/* =============================================================================================
   WSL DESIGN SYSTEM (ws.css) - loaded on every page by universal.headResources(), straight after
   universal.css. Tokens (--ws-*) are in universal.css with the 2026 header / footer; this file has
   the shared building blocks: page frame, type, buttons, pills, cards, panels, forms, breadcrumb.
   The first part moved here unchanged from hub.css (Retailer Hub / 2026 homepage, Sept 2026);
   the additions at the end are for the October 2026 restyle of the rest of the site.
   Page-specific styles stay with their page (hub.css: homepage + hub pages).
   ============================================================================================= */

body.wsBody {
    background: var(--ws-bg);
    color: var(--ws-ink);
    font-family: var(--ws-font);
}

.wsMain {
    font-family: var(--ws-font);
    color: var(--ws-ink);
    line-height: 1.5;
    padding-bottom: 24px;
}

    .wsMain *,
    .wsMain *::before,
    .wsMain *::after {
        box-sizing: border-box;
    }

    .wsMain img {
        max-width: 100%;
    }

    /* :where() keeps this at element specificity so component colours (e.g. .hpBrand--house) win */
    :where(.wsMain) a {
        color: inherit;
    }

/* Sections: horizontal padding centres content to 1280px on wide screens */
.wsSec {
    padding: 0 var(--ws-pad);
    margin-top: 72px;
}

.wsSec--m48 { margin-top: 48px; }
.wsSec--m40 { margin-top: 40px; }
.wsSec--m32 { margin-top: 32px; }
.wsSec--m24 { margin-top: 24px; }

.wsStack {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.wsStack--32 { gap: 32px; }
.wsStack--24 { gap: 24px; }

.wsHeadRow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.wsTitleBlock {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Typography */
.wsH1,
.wsH2,
.wsH3,
.wsH4 {
    margin: 0;
    font-family: var(--ws-font);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wsH1 { font-size: 72px; line-height: 0.98; }
.wsH1--64 { font-size: 64px; line-height: 1; }
.wsH2 { font-size: 44px; line-height: 1.05; }
.wsH2--60 { font-size: 60px; line-height: 1; }
.wsH2--40 { font-size: 40px; }
.wsH2--36 { font-size: 36px; }
.wsH2--32 { font-size: 32px; letter-spacing: -0.01em; }
.wsH3 { font-size: 24px; letter-spacing: 0; line-height: 1.25; }
.wsH3--30 { font-size: 30px; letter-spacing: -0.01em; }
.wsH3--26 { font-size: 26px; }
.wsH4 { font-size: 21px; letter-spacing: 0; line-height: 1.3; }
.wsH4--22 { font-size: 22px; }
.wsH4--20 { font-size: 20px; }

.wsEyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-accent-text);
}

.wsEyebrow--ink { color: var(--ws-ink); }
.wsEyebrow--accent { color: var(--ws-accent); }

.wsLead {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: var(--ws-ink-2);
}

.wsText18 { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ws-ink-2); }
.wsText17 { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ws-muted); }
.wsText16 { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ws-ink-2); }
.wsText15 { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ws-ink-2); }

.wsOnDark { color: #fff; }
.wsOnDark .wsLead,
.wsOnDark .wsText18,
.wsOnDark .wsText17,
.wsOnDark .wsText16 { color: #d6d3cd; }

/* Pills */
.wsPill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.wsPill--accent { background: var(--ws-accent); color: var(--ws-ink); }
.wsPill--outline { border: 1.5px solid var(--ws-accent); color: var(--ws-accent); }

.wsTag {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.wsTag--teal { background: #d8f3f6; color: var(--ws-accent-text); }
.wsTag--lilac { background: #e6e1f0; color: #4d4766; }
.wsTag--peach { background: #f8e0d5; color: #6b4a42; }

/* Chip label with a round icon (data feed / API hero) */
.wsChip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
}

    .wsChip .wsChipIcon {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        background: var(--ws-ink);
        color: var(--ws-accent);
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Buttons */
.wsBtnRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wsBtn {
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    font-family: var(--ws-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wsMain a.wsBtn { text-decoration: none; }

.wsBtn--accent { background: var(--ws-accent); color: var(--ws-ink) !important; }
.wsBtn--accent:hover { background: var(--ws-accent-hover); }
.wsBtn--dark { background: var(--ws-ink); color: #fff !important; }
.wsBtn--dark:hover { background: var(--ws-dark-3); }
.wsBtn--outline { background: transparent; border: 1.5px solid var(--ws-ink); color: var(--ws-ink) !important; }
.wsBtn--outline:hover { background: var(--ws-ink); color: #fff !important; }
.wsBtn--outlineLight { background: transparent; border: 1.5px solid #fff; color: #fff !important; }
.wsBtn--outlineLight:hover { background: #fff; color: var(--ws-ink) !important; }
.wsBtn--lg { height: 56px; padding: 0 30px; font-size: 17px; }
.wsBtn--md { height: 48px; padding: 0 24px; font-size: 15px; }
.wsBtn--sm { height: 44px; padding: 0 22px; font-size: 15px; }

.wsBtn:focus-visible,
.wsMain a:focus-visible,
.wsMain button:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}

.wsLinkArrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ws-accent-text);
    text-decoration: none;
}

    .wsLinkArrow:hover {
        color: var(--ws-accent-text);
        text-decoration: underline;
    }

/* Icon tiles, numbers, ticks */
.wsTile {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--ws-ink);
    color: var(--ws-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wsTile--soft { background: var(--ws-dark-3); }

.wsNum {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--ws-accent);
    color: var(--ws-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

.wsNum--dark { background: var(--ws-ink); color: var(--ws-accent); }
.wsNum--sm { width: 36px; height: 36px; font-size: 15px; }

.wsTick {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--ws-accent);
    color: var(--ws-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wsTick--sm { width: 24px; height: 24px; border-radius: 7px; }

/* Cards + grids */
.wsGrid {
    display: grid;
    gap: 20px;
}

.wsGrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wsGrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wsGrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wsGrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wsGrid--g16 { gap: 16px; }
.wsGrid--g24 { gap: 24px; }

.wsCard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border-radius: 22px;
    background: #fff;
    color: var(--ws-ink);
    text-decoration: none;
}

.wsCard--step { gap: 12px; }
.wsCard--row { flex-direction: row; align-items: flex-start; gap: 20px; }
.wsCard--soft { background: var(--ws-bg); }
.wsCard--lg { padding: 36px; border-radius: 24px; gap: 12px; }

a.wsCard { transition: transform .15s ease, box-shadow .15s ease; }
a.wsCard:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(17, 20, 24, .08); }

.wsCardBody {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wsTickRow {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.wsCheckItem {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 26px;
    border-radius: 20px;
    background: var(--ws-bg);
}

/* Split layout (text + visual) */
.wsSplit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: center;
}

.wsSplit--56 { gap: 56px; }

/* Panels */
.wsPanel {
    padding: 56px;
    border-radius: 28px;
    background: #fff;
}

.wsDark {
    border-radius: 28px;
    background: var(--ws-ink);
    color: #fff;
}

.wsDark--pad { padding: 72px 64px; }

.wsCta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 56px;
    border-radius: 28px;
    background: var(--ws-accent);
    color: var(--ws-ink);
}

.wsCta--compact { padding: 40px 48px; border-radius: 24px; gap: 20px 32px; }

.wsCtaText {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wsCtaText--tight { gap: 6px; }

.wsNote {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 26px;
    border-radius: 18px;
    background: #fff;
    font-size: 16px;
    line-height: 1.55;
}

    .wsNote .wsNoteIcon {
        flex-shrink: 0;
        color: var(--ws-accent-text);
    }

.wsNote--center { align-items: center; padding: 16px 24px; font-weight: 500; }

/* Breadcrumb */
.wsCrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 28px var(--ws-pad) 0;
    font-size: 14px;
    color: var(--ws-muted);
}

    .wsCrumbs a {
        color: var(--ws-muted);
        font-weight: 600;
        text-decoration: none;
    }

        .wsCrumbs a:hover { color: var(--ws-ink); text-decoration: underline; }

    .wsCrumbs [aria-current],
    .wsCrumbs [aria-current] a {
        color: var(--ws-ink);
        font-weight: 700;
    }

/* Illustration panels (stand in for the design's image placeholders) */
.wsVisual {
    position: relative;
    min-height: 380px;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.wsVisual--hero { min-height: 460px; border-radius: 28px; }
.wsVisual--teal { background: #d8f3f6; }
.wsVisual--lilac { background: #e6e1f0; }
.wsVisual--peach { background: #f8e0d5; }
.wsVisual--grey { background: #d9dcdf; }
.wsVisual--dark { background: #2a2d31; }

/* Artwork fills. The illustrations are drawn on the same flat colour as their panel, so
   "contain" leaves no visible seam at any width; photos crop to fill instead. */
.wsVisual--art, .wsVisual--photo { padding: 0; }

    .wsVisual--art > img, .wsVisual--photo > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .wsVisual--art > img { object-fit: contain; }
    .wsVisual--photo > img { object-fit: cover; object-position: 65% 50%; }
    .wsVisual--inset > img { padding: 36px; box-sizing: border-box; }

/* Responsive */
@media (max-width: 1100px) {
    .wsH1 { font-size: 60px; }
    .wsH1--64 { font-size: 54px; }
    .wsH2--60 { font-size: 50px; }
    .wsGrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wsGrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .wsSec { margin-top: 56px; }
    .wsSec--m48, .wsSec--m40 { margin-top: 40px; }
    .wsH1 { font-size: 48px; }
    .wsH1--64 { font-size: 44px; }
    .wsH2 { font-size: 34px; }
    .wsH2--60 { font-size: 40px; }
    .wsH2--40, .wsH2--36 { font-size: 30px; }
    .wsGrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wsSplit { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .wsPanel, .wsCta { padding: 40px 32px; }
    .wsVisual { min-height: 320px; }
    .wsVisual--hero { min-height: 360px; }
    .wsVisual--art { min-height: 0; aspect-ratio: 4 / 3; max-height: 480px; }
    .wsDark--pad { padding: 48px 32px; }
}

@media (max-width: 600px) {
    .wsSec { margin-top: 48px; }
    .wsH1 { font-size: 40px; }
    .wsH1--64 { font-size: 38px; }
    .wsH2, .wsH2--60 { font-size: 30px; }
    .wsLead { font-size: 17px; }
    .wsGrid--2, .wsGrid--3, .wsGrid--4, .wsGrid--5 { grid-template-columns: minmax(0, 1fr); }
    .wsPanel, .wsCta, .wsCta--compact { padding: 32px 22px; border-radius: 22px; }
    .wsBtnRow .wsBtn { flex: 1 1 auto; }
    .wsCard--row { flex-direction: column; }
    .wsDark--pad { padding: 36px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    a.wsCard {
        transition: none !important;
    }
}

/* =============================================================================================
   SITE-WIDE ADDITIONS (2026 restyle): pieces the restyled shop, cart, checkout, account and
   information pages share. Measurements from Qui's restyled site + the WSL brand guidelines
   (October 2026): 14px-radius 50px inputs with 14px bold labels above, 20px cards, 28px panels,
   fully rounded buttons at least 44px tall, white cards with no border or shadow.
   ============================================================================================= */

:root {
    --ws-peach: #f8e0d5;
    --ws-lilac: #e6e1f0;
    --ws-teal-tint: #d8f3f6;
    --ws-teal-soft: #e8fafd;
    --ws-sand: #ece6d8;
    --ws-grey-tint: #dcdcdc;
    --ws-placeholder: #eeebe5;
    --ws-required: #b42318;
}

/* Page frame: breadcrumb, title row, then the page's blocks, 28px apart */
.wsPage {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px var(--ws-pad) 80px;
}

    .wsPage > .wsCrumbs {
        padding: 0;
    }

.wsPageHead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 32px;
}

.wsPageTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ws-ink);
}

.wsPageMeta {
    font-size: 16px;
    font-weight: 600;
    color: var(--ws-muted);
}

.wsPageIntro {
    margin: 10px 0 0;
    max-width: 760px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ws-ink-2);
}

/* Link pills: sub-categories, A to Z letters. White; the current one inverted. */
.wsChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wsChipLink {
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ws-ink);
    font-family: var(--ws-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .wsChipLink:hover {
        background: var(--ws-ink);
        color: #fff;
        text-decoration: none;
    }

    .wsChipLink.is-active,
    .wsChipLink[aria-current] {
        background: var(--ws-ink);
        color: #fff;
        font-weight: 700;
    }

/* Small badges: "Best seller", "New", order status */
.wsBadge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--ws-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.wsBadge--accent { background: var(--ws-accent); color: var(--ws-ink); }
.wsBadge--ok { background: #dff5e8; color: #1d8a55; font-weight: 800; }
.wsBadge--bad { background: #fde3e3; color: var(--ws-required); font-weight: 800; }
.wsBadge--wait { background: var(--ws-sand); color: var(--ws-ink-2); font-weight: 800; }
.wsBadge--info { background: var(--ws-teal-tint); color: var(--ws-accent-text); font-weight: 800; }

/* Forms: label above (14px bold), 50px input, 1.5px line border, 14px radius */
.wsForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wsFormRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

.wsFormRow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wsField {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.wsLabel {
    font-family: var(--ws-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--ws-ink);
}

    .wsLabel .wsReq { color: var(--ws-required); }
    .wsLabel .wsOpt { font-weight: 400; color: var(--ws-muted); }

.wsInput,
.wsSelect,
.wsTextarea {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid var(--ws-line);
    border-radius: 14px;
    background: #fff;
    color: var(--ws-ink);
    font-family: var(--ws-font);
    font-size: 15px;
    outline: none;
    box-shadow: none;
}

.wsSelect { padding: 0 14px; }

/* Phones and tablets: iOS zooms into any field under 16px when it's tapped, so every field is 16px there */
@media (max-width: 900px) {
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=number],
    input[type=url],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

.wsTextarea {
    height: auto;
    min-height: 120px;
    padding: 14px 16px;
    line-height: 1.5;
    resize: vertical;
}

    .wsInput:focus,
    .wsSelect:focus,
    .wsTextarea:focus {
        border-color: var(--ws-ink);
        box-shadow: 0 0 0 3px rgba(0, 186, 210, .25);
    }

    .wsInput::placeholder,
    .wsTextarea::placeholder { color: #8b867e; }

    .wsInput.is-invalid,
    .wsSelect.is-invalid,
    .wsTextarea.is-invalid { border-color: var(--ws-required); }

/* Inputs on a dark panel: charcoal fill, #3D4148 border */
.wsDark .wsLabel { color: #fff; }

.wsDark .wsInput,
.wsDark .wsSelect,
.wsDark .wsTextarea {
    border-color: #3d4148;
    background: var(--ws-dark-2);
    color: #fff;
}

    .wsDark .wsInput:focus,
    .wsDark .wsSelect:focus,
    .wsDark .wsTextarea:focus { border-color: var(--ws-accent); }

.wsCheck {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--ws-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ws-ink-2);
    cursor: pointer;
}

    .wsCheck input {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin: 2px 0 0;
        accent-color: var(--ws-ink);
    }

.wsDark .wsCheck { color: #d6d3cd; }
.wsDark .wsCheck input { accent-color: var(--ws-accent); }

.wsFieldHelp {
    font-size: 14px;
    color: var(--ws-muted);
}

.wsFieldError {
    font-size: 14px;
    font-weight: 600;
    color: var(--ws-required);
}

/* Messages */
.wsAlert {
    padding: 14px 18px;
    border-radius: 14px;
    background: #fde3e3;
    color: var(--ws-required);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.wsAlert--ok { background: #dff5e8; color: #1d8a55; }
.wsAlert--info { background: var(--ws-teal-tint); color: var(--ws-ink); font-weight: 500; }

/* Label / value rows (order summaries, specifications) */
.wsRows {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.wsRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: 15px;
}

    .wsRow > :first-child { color: var(--ws-muted); }
    .wsRow > :last-child { font-weight: 700; text-align: right; }

.wsRow--total {
    padding-top: 12px;
    font-size: 17px;
    font-weight: 800;
}

    .wsRow--total > :first-child { color: var(--ws-ink); }
    .wsRow--total > :last-child { font-weight: 800; }

/* On a dark panel the total sits under a rule (the cart's "Order summary") */
.wsDark .wsRow--total {
    margin-top: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--ws-dark-3);
}

.wsDark .wsRow > :first-child { color: #d6d3cd; }
.wsDark .wsRow--total > :first-child { color: #fff; }

/* Image placeholder (no product photo yet) */
.wsImgPh {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--ws-placeholder);
    color: #6d6860;
    font-size: 12px;
    font-weight: 600;
}

/* Quantity stepper: - [1] + in a rounded box */
.wsQty {
    height: 48px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1.5px solid var(--ws-line);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

    .wsQty button {
        width: 40px;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 18px;
        font-weight: 800;
        cursor: pointer;
    }

    .wsQty input {
        width: 40px;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        -moz-appearance: textfield;
    }

        .wsQty input::-webkit-outer-spin-button,
        .wsQty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Two-column page body that stacks below 900px (content + sidebar) */
.wsCols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.wsCols--side-left { grid-template-columns: 240px minmax(0, 1fr); }

/* Long-form text (terms, FAQs, guides) inside a white card */
.wsProse {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ws-ink-2);
}

    .wsProse h2 { margin: 32px 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--ws-ink); }
    .wsProse h3 { margin: 24px 0 8px; font-size: 19px; font-weight: 800; color: var(--ws-ink); }
    .wsProse > :first-child { margin-top: 0; }
    .wsProse p, .wsProse ul, .wsProse ol { margin: 0 0 14px; }
    .wsProse ul, .wsProse ol { padding-left: 22px; }
    .wsProse li { margin: 4px 0; }
    .wsProse a { color: var(--ws-accent-text); font-weight: 600; text-decoration: underline; }
    .wsProse strong { color: var(--ws-ink); }

@media (max-width: 900px) {
    .wsCols,
    .wsCols--side-left { grid-template-columns: minmax(0, 1fr); }
    .wsFormRow--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .wsPage { padding-top: 20px; padding-bottom: 56px; gap: 22px; }
    .wsFormRow,
    .wsFormRow--3 { grid-template-columns: minmax(0, 1fr); }
    .wsChips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--ws-gutter)); padding: 0 var(--ws-gutter) 4px; scrollbar-width: none; }
    .wsChips::-webkit-scrollbar { display: none; }
}

/* =============================================================================================
   CATALOGUE (2026 restyle): category + search pages and the product card
   (universal.render_product_elements, subcat.generateFilterOutput / pillsHtml / pagerHtml).
   The pages no longer use .categoryLayout, so the old fixed-width filter rules don't apply; the
   ids filter.js relies on (#filterWrap, #filterItemsWrap, #prodPlaceholderWrap) are kept, and the
   rules below are scoped under .wsCatLayout to out-rank their old global styles.
   ============================================================================================= */

/* Sub-category pills: past the first 12, behind "+N more" (all of them scroll on a phone) */
.wsChips .wsChipExtra {
    display: none;
}

.wsChips.is-open .wsChipExtra {
    display: inline-flex;
}

.wsChips .wsChipMore {
    border: 1.5px solid var(--ws-line);
    background: transparent;
}

@media (max-width: 600px) {
    .wsChips .wsChipExtra {
        display: inline-flex;
    }

    .wsChips .wsChipMore {
        display: none;
    }
}

/* Page sections */
.wsCat .wsPageMeta {
    padding-bottom: 6px;
}

.wsCatLayout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
}

.wsCatMain {
    flex: 999 1 540px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wsCatBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 12px 12px 12px 20px;
    border-radius: 999px;
    background: #fff;
}

.wsCatBarText {
    font-size: 15px;
    font-weight: 600;
    color: var(--ws-ink-2);
}

.wsSort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ws-muted);
}

    .wsSort select {
        height: 44px;
        padding: 0 16px;
        border: 1.5px solid var(--ws-line);
        border-radius: 999px;
        background: #fff;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

/* Product grid: cards 220px and up, filling the row (also the account's "My likes", account/wishlist.aspx) */
.wsCatLayout #prodPlaceholderWrap,
.wsProdGrid,
/* My likes (Qui's design): bigger cards, three across; the MSRP above the price; a full "Add to cart" button
   (render_product_elements' addLabel) beside the quantity, or under it on a narrow card */
.wishlistWrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    width: auto;
    margin: 0;
}

    .wishlistWrap .wsProdPrice {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 2px;
    }

    .wishlistWrap .wsProdNow {
        font-size: 22px;
    }

    .wishlistWrap .wsProdFoot {
        flex-wrap: wrap;
    }

    .wishlistWrap .wsProd .wsQuickAdd--text {
        flex: 1 1 120px;
        width: auto;
        padding: 0 18px;
        background: var(--ws-ink);
        color: #fff;
        font-family: var(--ws-font);
        font-size: 15px;
        font-weight: 700;
    }

        .wishlistWrap .wsProd .wsQuickAdd--text:hover {
            background: #2a2d31;
            color: #fff;
        }

.wsEmpty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 32px;
    border-radius: 20px;
    background: #fff;
}

.wsEmptyTitle {
    font-size: 20px;
    font-weight: 800;
}

.wsEmptyText {
    font-size: 15px;
    color: var(--ws-muted);
}

/* Filter card */
.wsCatLayout #filterWrap {
    position: relative;
    flex: 1 1 260px;
    width: auto;
    max-width: 320px;
    box-sizing: border-box;
    padding: 20px 24px 8px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    overflow: visible;
    font-family: var(--ws-font);
    color: var(--ws-ink);
}

.wsCatLayout #filterToggleBtn {
    display: none;
}

.filterHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
}

.filterHeadTitle {
    font-size: 20px;
    font-weight: 800;
}

#remFil.filterClearAll {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ws-accent-text);
    font-family: var(--ws-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    #remFil.filterClearAll:hover {
        text-decoration: underline;
    }

.wsCatLayout .filterOptionWrap {
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid var(--ws-line-2);
}

.wsCatLayout .filterOptionTitleWrap {
    align-items: center;
    font-size: 16px;
    font-weight: 700;
}

.wsCatLayout .filterOptionChev {
    display: flex;
    transition: transform .15s ease;
}

.wsCatLayout .filterOptionWrap.open .filterOptionChev {
    transform: rotate(180deg);
}

.wsCatLayout .filterOptionWrap.open > .filterCatWrap {
    display: block;
}

.wsCatLayout .filterCatWrap {
    margin: 0;
}

.wsCatLayout .filterGridWrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
}

/* Each option is a checkbox row (drawn here; the row itself is the .filterBtnWrap toggle) */
.wsCatLayout .filterBtnWrap {
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none !important;
    color: var(--ws-ink-2);
    font-size: 15px;
    line-height: 1.35;
}

    .wsCatLayout .filterBtnWrap::before {
        content: '';
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        box-sizing: border-box;
        border: 1.5px solid #8b867e;
        border-radius: 4px;
        background: #fff;
    }

    .wsCatLayout .filterBtnWrap:hover {
        color: var(--ws-ink);
    }

        .wsCatLayout .filterBtnWrap:hover::before {
            border-color: var(--ws-ink);
        }

    .wsCatLayout .filterBtnWrap.filSel {
        color: var(--ws-ink);
        font-weight: 600;
    }

        .wsCatLayout .filterBtnWrap.filSel::before {
            border-color: var(--ws-ink);
            background: var(--ws-ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center / 12px no-repeat;
        }

    .wsCatLayout .filterBtnWrap.hidden {
        display: none;
    }

.wsCatLayout .filterTitle {
    flex-grow: 1;
    font-weight: inherit;
}

.wsCatLayout .filterCount {
    font-size: 13px;
    font-weight: 400;
    color: var(--ws-muted);
}

.wsCatLayout .filterBtnWrap .colourSwatch {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin: 0;
    border: 1px solid #d6d3cd;
    outline: 0;
    cursor: inherit;
}

.wsCatLayout .showMoreIden {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    color: var(--ws-accent-text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

    .wsCatLayout .showMoreIden:hover {
        text-decoration: underline;
    }

.wsCatLayout span.filSelCn {
    width: 20px;
    height: 20px;
    margin-left: 6px;
    background: var(--ws-accent);
    color: var(--ws-ink);
    font-size: 11px;
    font-weight: 800;
}

.wsCatLayout .price-inputs {
    gap: 10px;
    margin: 14px 0 10px;
}

    .wsCatLayout .price-inputs input {
        width: 50%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 12px;
        border: 1.5px solid var(--ws-line);
        border-radius: 10px;
        font-family: var(--ws-font);
        font-size: 14px;
    }

.wsCatLayout .noUi-connect {
    background: var(--ws-ink) !important;
}

/* Pagination */
.wsPager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 12px;
}

    .wsPager:empty {
        display: none;
    }

    .wsPager a {
        height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-sizing: border-box;
        border-radius: 999px;
        background: #fff;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

        .wsPager a:hover {
            background: var(--ws-line-2);
            text-decoration: none;
        }

        .wsPager a[aria-current] {
            background: var(--ws-ink);
            color: #fff;
        }

    .wsPager .wsPagerStep {
        padding: 0 20px;
        border: 1.5px solid var(--ws-ink);
        background: transparent;
    }

        .wsPager .wsPagerStep:hover {
            background: var(--ws-ink);
            color: #fff;
        }

    .wsPager .wsPagerGap {
        padding: 0 4px;
        color: var(--ws-muted);
    }

/* Product card */
.wsProd {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px 16px;
    border-radius: 20px;
    background: #fff;
    color: var(--ws-ink);
    font-family: var(--ws-font);
}

.wsProdImg {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--ws-placeholder);
    overflow: hidden;
}

    .wsProdImg .prodGridImg {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.wsProdBadge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ws-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Wishlist heart: a white circle drawn with box-shadow, so the hover / liked rules (which replace
   the whole background) can't remove it */
.wsProd .heart-icon {
    top: 30px;
    right: 30px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #fff;
    z-index: 2;
}

    /* the white circle is only drawn, so the heart itself was an 18px target: this makes the whole circle (and a
       little more) tappable */
    .wsProd .heart-icon::after,
    .wsPdp .imgMain .heart-icon::after {
        content: '';
        position: absolute;
        inset: -12px;
        border-radius: 50%;
    }

    /* ...and the heart sits on solid white inside it (universal.css sets the heart with the background
       shorthand, which clears the colour, so it's set again for every state) */
    .wsProd .heart-icon,
    .wsProd .heart-icon:hover,
    .wsProd .heart-icon.liked {
        background-color: #fff;
    }

.wsProdBody {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}

.wsProdBrand {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ws-muted);
}

a.wsProdName {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 42px;
    overflow: hidden;
    color: var(--ws-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

    a.wsProdName:hover {
        color: var(--ws-ink);
        text-decoration: underline;
    }

/* Other colours: small swatch dots */
.wsProd .prodGridImgWrap {
    min-height: 0;
    max-height: none;
    margin: 6px 0 0;
    gap: 6px;
}

.wsProd .sampleProdImgWrap {
    min-width: 0;
    max-width: none;
    border-radius: 50%;
    background: none;
}

    .wsProd .sampleProdImgWrap::after {
        display: none;
    }

.wsProd .colourSwatch {
    width: 16px;
    height: 16px;
    border: 1px solid #d6d3cd;
    outline: 0;
}

    .wsProd .colourSwatch.active,
    .wsProd .sampleProdImgWrap.selectedColour .colourSwatch {
        border: 1px solid #d6d3cd;
        outline: 0;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ws-ink);
    }

.wsProdPrice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: auto;
    padding: 0 4px;
}

.wsProdNow {
    font-size: 18px;
    font-weight: 800;
}

.wsProdMsrp {
    font-size: 13px;
    color: var(--ws-muted);
}

.wsProdFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 0 4px;
}

.wsProdPrice + .wsProdFoot {
    margin-top: 0;
}

a.wsProdLogin {
    color: var(--ws-accent-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

    a.wsProdLogin:hover {
        color: var(--ws-accent-text);
        text-decoration: underline;
    }

.wsProdWait {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ws-muted);
}

.wsProd .wsQuickAdd,
.wsQuickAdd {
    width: 44px;
    min-width: 0;
    height: 44px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--ws-accent);
    color: var(--ws-ink);
    font-size: 0;
    cursor: pointer;
}

    .wsQuickAdd:hover {
        background: var(--ws-accent-hover);
        color: var(--ws-ink);
    }

/* Rounded quantity stepper (cards; the cart flyout has its own copy in universal.css) */
.wsProd .qty-input {
    height: 44px;
    min-width: 0;
    padding: 0 2px;
    box-sizing: border-box;
    border: 1.5px solid var(--ws-line);
    border-radius: 999px;
}

    .wsProd .qty-input .qty-count {
        width: 34px;
        height: 40px;
        border: 0;
        border-radius: 999px;
        background: transparent;
    }

        .wsProd .qty-input .qty-count::before,
        .wsProd .qty-input .qty-count::after {
            width: 11px;
            background: var(--ws-ink);
        }

        .wsProd .qty-input .qty-count:disabled::before,
        .wsProd .qty-input .qty-count:disabled::after {
            background: #c9c5be;
        }

    .wsProd .qty-input .product-qty {
        width: 30px;
        height: 40px;
        font-family: var(--ws-font);
        font-size: 15px;
        font-weight: 800;
    }

@media (max-width: 900px) {
    .wsCatLayout #filterWrap {
        flex-basis: 100%;
        max-width: none;
        padding: 16px 20px;
    }

    /* the filters fold behind a "Filters" button (filter.js, 900px and under: iPads in portrait too) */
    .wsCatLayout #filterToggleBtn {
        position: static !important;
        width: 100% !important;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-sizing: border-box;
        padding: 0 20px;
        border: 1.5px solid var(--ws-ink);
        border-radius: 999px;
        background: transparent;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 15px;
        font-weight: 700;
    }

        .wsCatLayout #filterToggleBtn .label {
            text-transform: none;
        }

    .wsCatLayout #filterItemsWrap {
        margin-top: 12px;
    }

    /* rows a finger can hit */
    .wsCatLayout .filterBtnWrap {
        min-height: 40px;
    }

    #remFil.filterClearAll {
        padding: 11px 0;
    }

    .wsCatBar {
        border-radius: 22px;
    }
}

/* Phones: two cards a row (the filters fold below 900px: the block above) */
@media (max-width: 768px) {
    .wishlistWrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .wsCatLayout #prodPlaceholderWrap {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .wsProd {
        gap: 10px;
        padding: 8px 8px 12px;
        border-radius: 16px;
    }

    a.wsProdName {
        font-size: 14px;
        min-height: 36px;
    }

    .wsProdBadge {
        top: 6px;
        left: 6px;
        font-size: 11px;
    }

    .wsProd .heart-icon {
        top: 20px;
        right: 20px;
    }

    /* one row: the login link (or stepper) and a 38px add button */
    a.wsProdLogin {
        font-size: 13px;
    }

    .wsProd .wsQuickAdd {
        width: 38px;
        height: 38px;
    }

    .wsProd .qty-input {
        height: 38px;
    }

        .wsProd .qty-input .qty-count {
            width: 28px;
            height: 34px;
        }

        .wsProd .qty-input .product-qty {
            width: 24px;
            height: 34px;
        }
}

/* =============================================================================================
   PRODUCT PAGE (2026 restyle, default.aspx): gallery + buy box, quick-look tiles, description +
   specifications, data feed band, "More ..." cards. Replaces the page's own <style> block; the
   ids its scripts use (#imgCaroWrap, #mainImgWrap, #imgNavWrap, #priceWrap, #prodQtyPp, #atcBtn,
   #coVarCol) are styled here under .wsPdp.
   ============================================================================================= */

.wsPdp {
    gap: 32px;
}

.wsPdpTop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}

/* Gallery: the main picture, then the thumbnails underneath */
.wsPdpGallery {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wsPdp .imgMain {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: #fff;
    overflow: hidden;
}

    .wsPdp .imgMain .mainImg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform .2s ease;
    }

/* The like heart, top right of the picture: the product cards' white circle (.wsProd .heart-icon), its
   edge as far in as the Best seller badge on the left */
.wsPdp .imgMain .heart-icon {
    top: 26px;
    right: 26px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #fff, 0 4px 14px 8px rgba(17, 20, 24, .12);
    z-index: 3;
}

    .wsPdp .imgMain .heart-icon,
    .wsPdp .imgMain .heart-icon:hover,
    .wsPdp .imgMain .heart-icon.liked {
        background-color: #fff;
    }

.wsPdpBadge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ws-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.wsPdp #imgNavWrap {
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.wsPdp .imgNavBtn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ws-ink);
    box-shadow: 0 4px 14px rgba(17, 20, 24, .12);
    cursor: pointer;
    pointer-events: auto;
}

.wsPdp #imgCaroWrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* Qui's design: three across */
    gap: 14px;
}

.wsPdpGallery.isSingle #imgNavWrap,
.wsPdpGallery.isSingle #imgCaroWrap {
    display: none;
}

.wsPdp .sampleImgWrap {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2.5px solid #fff;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

    .wsPdp .sampleImgWrap.active {
        border-color: var(--ws-ink);
    }

    .wsPdp .sampleImgWrap::after {
        display: none;
    }

    .wsPdp .sampleImgWrap a {
        display: flex;
        width: 100%;
        height: 100%;
    }

.wsPdp .sampleImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: none;
}

/* Information column */
.wsPdpInfo {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.wsPdpBrand {
    align-self: flex-start;
    height: 34px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--ws-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

    a.wsPdpBrand:hover {
        color: var(--ws-ink);
        text-decoration: underline;
    }

.wsPdpTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: clamp(34px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ws-ink);
}

.wsPdpMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: -8px;
    font-size: 14px;
    color: var(--ws-muted);
}

    .wsPdpMeta b {
        color: var(--ws-ink);
    }

/* Other colours */
.wsPdpColours #coVarColWrap {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--ws-muted);
}

.wsPdpColours #coVarCol {
    margin-left: 4px;
    color: var(--ws-ink);
    font-weight: 700;
}

.wsPdpColours .filterColourSwatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wsPdpColours .sampleImgWrap {
    width: 64px;
    border-width: 2px;
    border-radius: 14px;
}

    .wsPdpColours .sampleImgWrap:hover {
        border-color: var(--ws-ink);
    }

/* Buy box */
.wsPdpBuy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 22px;
    background: #fff;
}

.wsPdpBuyHead {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wsPdpBuyText {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

.wsPdpPrice {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.wsPdpMsrp {
    margin-left: 12px;
    font-size: 15px;
    color: var(--ws-muted);
}

.wsPdpBuyRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.wsPdp .qty-input {
    height: 52px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1.5px solid var(--ws-line);
    border-radius: 999px;
}

    .wsPdp .qty-input .qty-count {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 999px;
        background: transparent;
    }

        .wsPdp .qty-input .qty-count::before,
        .wsPdp .qty-input .qty-count::after {
            width: 12px;
            background: var(--ws-ink);
        }

        .wsPdp .qty-input .qty-count:disabled::before,
        .wsPdp .qty-input .qty-count:disabled::after {
            background: #c9c5be;
        }

    .wsPdp .qty-input .product-qty {
        width: 40px;
        height: 44px;
        font-family: var(--ws-font);
        font-size: 17px;
        font-weight: 800;
    }

.wsPdp #btnWrap {
    flex: 1 1 200px;
}

    .wsPdp #btnWrap button {
        width: 100%;
        height: 52px;
        padding: 0 24px;
        border: 0;
        border-radius: 999px;
        background: var(--ws-accent);
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
    }

        .wsPdp #btnWrap button:hover {
            background: var(--ws-accent-hover);
        }

.wsPdpBuyNote {
    margin: 0;
    font-size: 14px;
    color: var(--ws-muted);
}

    .wsPdpBuyNote a {
        color: var(--ws-accent-text);
        font-weight: 700;
        text-decoration: none;
    }

        .wsPdpBuyNote a:hover {
            text-decoration: underline;
        }

/* Quick-look tiles + material note */
.wsPdpTiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.wsPdpTile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
}

    .wsPdpTile span:first-child {
        font-size: 13px;
        color: var(--ws-muted);
    }

    .wsPdpTile span:last-child {
        font-size: 17px;
        font-weight: 800;
    }

.wsPdpNote {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--ws-teal-tint);
    font-size: 15px;
    line-height: 1.5;
}

    .wsPdpNote svg {
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--ws-accent-text);
    }

/* Description + specifications */
.wsPdpDetails {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
}

.wsPdpCard {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
}

    .wsPdpDetails .wsPdpCard + .wsPdpCard {
        flex-basis: 420px;
    }

    .wsPdpCard h2 {
        margin: 0;
        padding: 0;
        border: 0;
        font-family: var(--ws-font);
        font-size: 26px;
        font-weight: 800;
        color: var(--ws-ink);
    }

dl.wsSpecs {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    font-size: 15px;
}

    dl.wsSpecs dt,
    dl.wsSpecs dd {
        margin: 0;
        padding: 12px 0;
        border-top: 1px solid var(--ws-line-2);
    }

    dl.wsSpecs dt {
        color: var(--ws-muted);
    }

    dl.wsSpecs dd {
        font-weight: 700;
        overflow-wrap: anywhere;
    }

/* Data feed band */
.wsPdpBand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 28px 32px;
    border-radius: 24px;
}

.wsPdpBandText {
    flex: 1 1 360px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 16px;
    line-height: 1.5;
    color: #c9c5be;
}

.wsPdpBandTitle {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

/* "More ..." */
.wsPdpRelHead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
}

.wsPdpRelTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ws-ink);
}

.wsPdp .wsProdGrid {
    margin-top: -12px;
}

/* Size chart tables (universal.generateSizeChart), in the brand colours */
.size-chart-hidden {
    display: none;
}

#sizeChart table.size-chart {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ws-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    font-size: 14px;
    line-height: 1.45;
}

    #sizeChart table.size-chart + table.size-chart {
        margin-top: 20px;
    }

    #sizeChart table.size-chart td {
        padding: 12px 14px;
        vertical-align: middle;
        border-bottom: 1px solid var(--ws-line-2);
    }

    #sizeChart table.size-chart tbody tr:nth-child(even) td {
        background: var(--ws-bg);
    }

#sizeChart .purple-heading {
    font-weight: 700;
    color: var(--ws-accent-text);
    background: var(--ws-teal-soft);
    white-space: nowrap;
}

#sizeChart .trntnb {
    background: transparent !important;
    border-bottom: 0 !important;
}

#sizeChart table.size-chart > tbody > tr:first-child > td {
    background: #fff !important;
    color: var(--ws-accent-text) !important;
    font-weight: 700;
}

    #sizeChart table.size-chart > tbody > tr:first-child > td.purple-heading {
        background: transparent !important;
    }

#sizeChart table.size-chart > tbody > tr.header-row > td {
    background: var(--ws-ink) !important;
    color: #fff !important;
    font-weight: 700;
    border-bottom: 0;
}

    #sizeChart table.size-chart > tbody > tr.header-row > td.purple-heading {
        background: transparent !important;
        color: #fff !important;
    }

@media (max-width: 900px) {
    .wsPdpTop {
        gap: 28px;
    }

    #sizeChart table.size-chart {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        #sizeChart table.size-chart td {
            white-space: nowrap;
        }
}

@media (max-width: 600px) {
    .wsPdp .imgMain {
        border-radius: 22px;
    }

    .wsPdp #imgCaroWrap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .wsPdpBuy,
    .wsPdpCard {
        padding: 22px;
    }

    .wsPdpBand {
        padding: 24px 22px;
    }

    dl.wsSpecs {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .wsPdp .wsProdGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* =============================================================================================
   BRANDS A TO Z (2026 restyle, brands.aspx)
   ============================================================================================= */

.wsBrands {
    gap: 32px;
}

    .wsBrands .wsPageIntro {
        margin-top: 12px;
        font-size: 17px;
    }

.wsBrandHouse {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: clamp(28px, 4vw, 48px);
}

.wsBrandHouseHead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
}

.wsBrandHouseText {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 640px;
}

    .wsBrandHouseText h2 {
        margin: 0;
        font-size: clamp(32px, 3.4vw, 44px);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #fff;
    }

    .wsBrandHouseText p {
        margin: 0;
        font-size: 17px;
        line-height: 1.5;
        color: #c9c5be;
    }

.wsBrandRanges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

a.wsBrandRange {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 18px;
    background: var(--ws-dark-2);
    color: #fff;
    text-decoration: none;
}

    a.wsBrandRange:hover {
        background: var(--ws-dark-3);
        color: #fff;
    }

    a.wsBrandRange span:first-child {
        font-size: 20px;
        font-weight: 800;
    }

    a.wsBrandRange span:last-child {
        font-size: 13px;
        color: #a9a59e;
    }

.wsBrandSection {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wsBrandHeading {
    margin: 0;
    font-family: var(--ws-font);
    font-size: clamp(28px, 2.8vw, 36px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ws-ink);
}

.wsBrandTiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

a.wsBrandTile {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 18px;
    background: #fff;
    color: var(--ws-ink);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

    a.wsBrandTile:hover {
        box-shadow: inset 0 0 0 2px var(--ws-ink);
        color: var(--ws-ink);
    }

.wsBrandAll {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 28px;
    background: #fff;
}

.wsBrandAllHead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wsBrandFind {
    flex: 0 1 360px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 0 18px;
    border: 1.5px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-muted);
    cursor: text;
}

    .wsBrandFind:focus-within {
        border-color: var(--ws-ink);
        box-shadow: 0 0 0 3px rgba(0, 186, 210, .25);
    }

    .wsBrandFind input {
        flex-grow: 1;
        min-width: 0;
        height: 100%;
        padding: 0;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 15px;
    }

.wsBrandLetters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .wsBrandLetters a,
    .wsBrandLetters span {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .wsBrandLetters a {
        background: var(--ws-bg);
        color: var(--ws-ink);
    }

        .wsBrandLetters a:hover {
            background: var(--ws-ink);
            color: #fff;
        }

    .wsBrandLetters span {
        color: #c9c5be;
    }

.wsBrandGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 20px 0;
    border-top: 1px solid var(--ws-line-2);
    scroll-margin-top: 24px;
}

    .wsBrandGroup[hidden] {
        display: none;
    }

.wsBrandLetter {
    flex: 0 0 64px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--ws-accent-text);
}

.wsBrandNames {
    flex: 1 1 480px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 24px;
}

    .wsBrandNames a {
        padding: 7px 0;
        color: var(--ws-ink);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
    }

        .wsBrandNames a:hover {
            color: var(--ws-accent-text);
            text-decoration: underline;
        }

        .wsBrandNames a[hidden] {
            display: none;
        }

.wsBrandNone {
    margin: 0;
    font-size: 15px;
    color: var(--ws-muted);
}

    .wsBrandNone a {
        color: var(--ws-accent-text);
        font-weight: 700;
    }

@media (max-width: 600px) {
    .wsBrandLetter {
        flex-basis: 100%;
    }

    .wsBrandNames {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wsBrandTiles,
    .wsBrandRanges {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    a.wsBrandTile {
        font-size: 16px;
    }
}

/* =============================================================================================
   CART + CHECKOUT + ORDER CONFIRMATION (2026 restyle, Qui's design). Replaces the pages' own
   <style> blocks. Every id / class their scripts use is styled here as it was used before:
   checkout: #checkoutTitleWrap (.padBorder once delivery is saved), #titleDelivery / #titlePayment
   (.inactive), #delEditBtn (hidden until toggled), #checkoutPaymentOptionsWrap (hidden until
   delivery is saved), .paymentOption / .paymentCheck (.selected), #credit-card-wrapper (shown by
   the script), #stripe-spinner, #payment-message (.hidden), .inputError, #addressBookContainer.
   ============================================================================================= */

/* Shared: store credit in green */
.coCredit {
    color: #1d8a55;
}

/* Lighter green on the dark panel: #1d8a55 is only ~4.2:1 on #111418 */
.wsDark .coCredit {
    color: #5fd39a;
}

/* ---------- Cart page ---------- */
.wsCart #cartWrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.cartMain {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wsCart #cItemsWrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* One white card per line: picture | name | quantity | price | remove */
.wsCart #cItemsWrap .cartItemWrap {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border: 0;
    border-radius: 20px;
    background: #fff;
}

    .wsCart #cItemsWrap .cartItemInfoWrap,
    .wsCart #cItemsWrap .cartItemTop,
    .wsCart #cItemsWrap .cartEditWrap {
        display: contents;
    }

    .wsCart #cItemsWrap .cartItemImg {
        grid-column: 1;
        width: 104px;
        height: 104px;
        min-width: 104px;
    }

    .wsCart #cItemsWrap .cartItemName {
        grid-column: 2;
    }

    .wsCart #cItemsWrap .qty-input {
        grid-column: 3;
        grid-row: 1;
        height: 48px;
        padding: 0 2px;
        box-sizing: border-box;
        border: 1.5px solid var(--ws-line);
        border-radius: 999px;
    }

        .wsCart #cItemsWrap .qty-input .qty-count {
            width: 40px;
            height: 44px;
            border: 0;
            border-radius: 999px;
            background: transparent;
        }

            .wsCart #cItemsWrap .qty-input .qty-count::before,
            .wsCart #cItemsWrap .qty-input .qty-count::after {
                width: 12px;
                background: var(--ws-ink);
            }

            .wsCart #cItemsWrap .qty-input .qty-count:disabled::before,
            .wsCart #cItemsWrap .qty-input .qty-count:disabled::after {
                background: #c9c5be;
            }

        .wsCart #cItemsWrap .qty-input .product-qty {
            width: 34px;
            height: 44px;
            font-family: var(--ws-font);
            font-size: 15px;
            font-weight: 800;
        }

    .wsCart #cItemsWrap .cartPriceWrap {
        grid-column: 4;
        grid-row: 1;
        min-width: 96px;
    }

    .wsCart #cItemsWrap button.cartTrash {
        grid-column: 5;
        grid-row: 1;
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
        border-radius: 999px;
        background: var(--ws-bg);
        color: var(--ws-ink);
        text-decoration: none;
    }

        .wsCart #cItemsWrap button.cartTrash span {
            display: none;
        }

        .wsCart #cItemsWrap button.cartTrash:hover {
            background: var(--ws-line-2);
        }

/* Empty / not-approved states */
.wsCart #cItemsWrap .cartEmptyWrap {
    align-items: flex-start;
    gap: 12px;
    padding: 32px;
    border-radius: 20px;
    background: #fff;
}

a.cartKeepShopping {
    align-self: flex-start;
}

/* An empty / not-yet-approved cart has its own "Keep shopping" button */
.cartMain:has(.cartEmptyWrap) a.cartKeepShopping {
    display: none;
}

    a.cartKeepShopping svg {
        flex-shrink: 0;
    }

/* Dark "Order summary" */
.wsCart #cartSummaryWrap {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border-radius: 22px;
}

.cartSumTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.wsCart #cartSummaryWrap .wsRow--total {
    align-items: center;
}

.cartSumTotal {
    font-size: 30px;
    color: var(--ws-accent);
}

.wsCart #checkOutBtnWrap .checkOutBtn {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 999px;
    background: var(--ws-accent);
    color: var(--ws-ink);
    font-family: var(--ws-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

    .wsCart #checkOutBtnWrap .checkOutBtn:hover {
        background: var(--ws-accent-hover);
    }

/* ---------- Checkout ---------- */
.wsSteps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wsStep {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--ws-ink-2);
    font-size: 15px;
    font-weight: 700;
}

/* Small phones (iPhone SE / mini): the three steps stay on one row */
@media (max-width: 420px) {
    .wsSteps {
        gap: 6px;
    }

    .wsStep {
        gap: 6px;
        padding: 0 12px 0 6px;
        font-size: 14px;
    }
}

    .wsStep span {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--ws-bg);
        font-size: 13px;
        font-weight: 800;
    }

/* The current step: Delivery until the delivery details are saved, then Payment */
.wsStep--del,
.wsCheckout:has(#titlePayment:not(.inactive)) .wsStep--pay {
    background: var(--ws-ink);
    color: #fff;
}

    .wsStep--del span,
    .wsCheckout:has(#titlePayment:not(.inactive)) .wsStep--pay span {
        background: var(--ws-accent);
        color: var(--ws-ink);
    }

.wsCheckout:has(#titlePayment:not(.inactive)) .wsStep--del {
    background: #fff;
    color: var(--ws-ink-2);
}

    .wsCheckout:has(#titlePayment:not(.inactive)) .wsStep--del span {
        background: #dff5e8;
        color: #1d8a55;
    }

.wsCheckout #checkoutWrap,
.wsConfirm #checkoutWrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.wsCheckout #checkoutMainWrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.coCard {
    padding: 40px;
    border-radius: 22px;
    background: #fff;
}

.wsCheckout #checkoutTitleWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

    .wsCheckout #checkoutTitleWrap.padBorder {
        margin-bottom: 0;
    }

.wsCheckout .checkoutMainTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ws-ink);
}

    .wsCheckout .checkoutMainTitle.inactive {
        color: #a9a59e;
    }

.wsCheckout #delEditBtn {
    display: none;
}

/* Buttons the checkout script binds (.primaryButton): ink pills, the payment button teal */
.wsCheckout .primaryButton,
#checkoutPopup .primaryButton {
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--ws-ink);
    color: #fff;
    font-family: var(--ws-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

    .wsCheckout .primaryButton:hover,
    #checkoutPopup .primaryButton:hover {
        background: var(--ws-dark-3);
    }

/* Shown by the script with .toggle() (display: block), so the label is centred by line-height */
.wsCheckout #delEditBtn.primaryButton {
    height: 40px;
    box-sizing: border-box;
    padding: 0 18px;
    border: 1.5px solid var(--ws-ink);
    background: transparent;
    color: var(--ws-ink);
    font-size: 14px;
    line-height: 37px;
}

    .wsCheckout #delEditBtn.primaryButton:hover {
        background: var(--ws-ink);
        color: #fff;
    }

.wsCheckout #placeOrder.primaryButton {
    width: 100%;
    height: 54px;
    margin-top: 20px;
    background: var(--ws-accent);
    color: var(--ws-ink);
}

    .wsCheckout #placeOrder.primaryButton:hover {
        background: var(--ws-accent-hover);
    }

    .wsCheckout #placeOrder:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

/* "Processing..." on Place order (anime.js turns it) */
.wsCheckout .spinnerDot {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
    border-radius: 50%;
}

/* Address book search */
.wsCheckout .inputSearchGroup {
    position: relative;
    margin-bottom: 22px;
}

.wsCheckout .inputIcon {
    position: absolute;
    top: 17px;
    left: 18px;
    color: var(--ws-muted);
    line-height: 0;
    pointer-events: none;
}

.wsCheckout .inputSearchGroup input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 16px 0 46px;
    border: 1.5px solid var(--ws-line);
    border-radius: 14px;
    background: #fff;
    font-family: var(--ws-font);
    font-size: 15px;
    outline: none;
}

    .wsCheckout .inputSearchGroup input:focus {
        border-color: var(--ws-ink);
        box-shadow: 0 0 0 3px rgba(0, 186, 210, .25);
    }

.wsCheckout #addressBookContainer {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px;
    gap: 6px;
    flex-direction: column;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 20, 24, .16);
}

.wsCheckout .addressBookCell {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ws-ink-2);
    cursor: pointer;
}

    .wsCheckout .addressBookCell:hover {
        background: var(--ws-bg);
    }

.wsCheckout .addressBookTitle {
    font-weight: 700;
    color: var(--ws-ink);
}

/* Delivery form: labels above the inputs (the label follows its input in the markup) */
.wsCheckout .addressForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .wsCheckout .addressForm .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 16px;
    }

        .wsCheckout .addressForm .row .inputGroup:only-child {
            grid-column: 1 / -1;
        }

.wsCheckout .inputGroup {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

    .wsCheckout .inputGroup label {
        position: static;
        transform: none;
        padding: 0;
        background: none;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 14px;
        font-weight: 700;
        pointer-events: auto;
    }

        .wsCheckout .inputGroup label.required::after {
            content: ' *';
            color: var(--ws-required);
        }

        .wsCheckout .inputGroup label .wsOpt {
            font-weight: 400;
            color: var(--ws-muted);
        }

    .wsCheckout .inputGroup input,
    .wsCheckout .inputGroup select,
    .wsCheckout .inputGroup textarea {
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        margin: 0;
        padding: 0 16px;
        border: 1.5px solid var(--ws-line);
        border-radius: 14px;
        background: #fff;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 15px;
        outline: none;
    }

    .wsCheckout .inputGroup textarea {
        height: auto;
        min-height: 96px;
        padding: 14px 16px;
        line-height: 1.5;
        resize: vertical;
    }

        .wsCheckout .inputGroup input:focus,
        .wsCheckout .inputGroup select:focus,
        .wsCheckout .inputGroup textarea:focus {
            border-color: var(--ws-ink);
            box-shadow: 0 0 0 3px rgba(0, 186, 210, .25);
        }

.wsCheckout .inputError {
    border-color: var(--ws-required) !important;
}

.wsCheckout .submitRow,
.wsCheckout .addressForm .row.submitRow {
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
}

/* Payment */
.wsCheckout #checkoutPaymentOptionsWrap {
    display: none;
    margin-top: 24px;
}

.wsCheckout .paymentOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding: 18px 20px;
    border: 1.5px solid var(--ws-line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}

    .wsCheckout .paymentOption:hover {
        border-color: var(--ws-ink);
    }

    .wsCheckout .paymentOption.selected {
        border-color: var(--ws-ink);
        background: var(--ws-bg);
    }

.wsCheckout .paymentCheckWrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wsCheckout .paymentCheck {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid #8b867e;
    border-radius: 50%;
    background: #fff;
}

    .wsCheckout .paymentCheck.selected {
        border-color: var(--ws-ink);
        background: var(--ws-ink);
        box-shadow: inset 0 0 0 4px #fff;
    }

.wsCheckout .paymentTitle {
    font-size: 16px;
    font-weight: 700;
}

.wsCheckout .paymentIconWrap {
    display: flex;
    gap: 8px;
}

    .wsCheckout .paymentIconWrap img {
        height: 24px;
        width: auto;
    }

.wsCheckout #credit-card-wrapper {
    box-sizing: border-box;
    width: 100%;
    margin: -4px 0 12px;
    padding: 24px;
    border: 1.5px solid var(--ws-line);
    border-radius: 16px;
    background: #fff;
}

.wsCheckout #stripe-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    color: var(--ws-muted);
    font-size: 14px;
}

    .wsCheckout #stripe-spinner i {
        font-size: 22px;
    }

.wsCheckout #payment-message {
    margin-top: 16px;
    color: var(--ws-required);
    font-size: 15px;
    font-weight: 600;
}

/* Summary (checkout + confirmation): white card */
.wsCheckout #checkoutSubWrap,
.wsConfirm #checkoutSubWrap {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    border-radius: 22px;
    background: #fff;
}

.coSumHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ws-line-2);
}

    .coSumHead #cSumTitle,
    .coSumHeadTitle {
        margin: 0;
        font-family: var(--ws-font);
        font-size: 24px;
        font-weight: 800;
        color: var(--ws-ink);
    }

.coSumHeadTitle {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ws-line-2);
}

    .coSumHead #cSumTitleSub {
        padding: 0;
        border: 0;
        background: none;
        color: var(--ws-accent-text);
        font-family: var(--ws-font);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

.coSumItems {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--ws-line-2);
}

.coSumItem {
    display: flex;
    align-items: center;
    gap: 14px;
}

.coSumImg {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--ws-placeholder);
    overflow: hidden;
}

    .coSumImg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.coSumName {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

    .coSumName span {
        font-size: 13px;
        font-weight: 400;
        color: var(--ws-muted);
    }

.coSumPrice {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* "Heads up" message (outside main.wsCheckout, so keyed on its id) */
#checkoutPopup.popupOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 20, 24, .55);
}

#checkoutPopup .popupModal {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    padding: 32px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}

#checkoutPopup .popupTitle {
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: 800;
}

#checkoutPopup #popupMessage {
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ws-ink-2);
}

/* ---------- Order confirmation ---------- */
.wsConfirm #checkoutMainWrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wsConfirm .orderHeader {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 48px;
}

.wsConfirm .orderIcon {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ws-accent);
    color: var(--ws-ink);
}

.wsConfirm .orderNumber {
    margin: 0 0 6px;
    color: var(--ws-accent);
    font-size: 16px;
    font-weight: 700;
}

.wsConfirm .thankYou {
    margin: 0;
    font-family: var(--ws-font);
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}

.wsConfirm .confirmationNote {
    margin: 10px 0 0;
    font-size: 17px;
    color: #d6d3cd;
}

.wsConfirm .orderInfoGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wsConfirm .orderDetails,
.wsConfirm .shippingAddress {
    padding: 28px;
    border-radius: 22px;
    background: #fff;
}

    .wsConfirm .orderDetails h2,
    .wsConfirm .shippingAddress h2 {
        margin: 0 0 14px;
        padding: 0 0 14px;
        border-bottom: 1px solid var(--ws-line-2);
        font-family: var(--ws-font);
        font-size: 22px;
        font-weight: 800;
        color: var(--ws-ink);
    }

    .wsConfirm .orderDetails dl.wsSpecs dt,
    .wsConfirm .orderDetails dl.wsSpecs dd {
        padding: 6px 0;
        border-top: 0;
    }

    .wsConfirm .shippingAddress p {
        margin: 0;
        font-size: 15px;
        line-height: 1.7;
        color: var(--ws-ink-2);
    }

@media (max-width: 1000px) {
    .wsCart #cartWrap,
    .wsCheckout #checkoutWrap,
    .wsConfirm #checkoutWrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsCart #cartSummaryWrap,
    .wsCheckout #checkoutSubWrap,
    .wsConfirm #checkoutSubWrap {
        position: static;
    }
}

@media (max-width: 700px) {
    /* Cart lines: picture + name on top, then quantity / price / remove */
    .wsCart #cItemsWrap .cartItemWrap {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        gap: 12px 14px;
    }

        .wsCart #cItemsWrap .cartItemImg {
            width: 76px;
            height: 76px;
            min-width: 76px;
            grid-row: 1 / span 2;
        }

        .wsCart #cItemsWrap .cartItemName {
            grid-column: 2;
            grid-row: 1;
        }

        .wsCart #cItemsWrap .qty-input {
            grid-column: 2;
            grid-row: 2;
            justify-self: start;
        }

        .wsCart #cItemsWrap .cartPriceWrap {
            grid-column: 3;
            grid-row: 2;
            min-width: 0;
        }

        .wsCart #cItemsWrap button.cartTrash {
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
            align-self: start;
            width: 36px;
            height: 36px;
        }

    .coCard,
    .wsCart #cartSummaryWrap,
    .wsCheckout #checkoutSubWrap,
    .wsConfirm #checkoutSubWrap {
        padding: 24px 20px;
    }

    .wsCheckout .addressForm .row,
    .wsConfirm .orderInfoGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsConfirm .orderHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 32px 24px;
    }

    .wsConfirm .orderIcon {
        width: 64px;
        height: 64px;
    }
}

/* =============================================================================================
   SIGN IN + REGISTER (2026 restyle, Qui's design): login.aspx, register.aspx, reset.aspx,
   reset-pass.aspx, register-thanks.aspx. Replaces the pages' own <style> blocks. Hidden until a
   script shows them, as before: #formErrorMsg, #pwRules, #resetAlert, .emailTakenMessage.
   ============================================================================================= */

.wsAuthGrid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.wsAuthCard,
.wsAuthApply {
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
    padding: 48px;
    border-radius: 28px;
}

.wsAuthCard {
    background: #fff;
}

.wsAuth .wsEyebrow {
    margin: 0 0 -8px;
}

.wsAuthTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ws-ink);
}

.wsAuthIntro {
    margin: -6px 0 6px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ws-ink-2);
}

.wsLabelRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

a.wsAuthLink,
.wsAuthHelp a,
.wsAuthNote a {
    color: var(--ws-accent-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

    a.wsAuthLink:hover,
    .wsAuthHelp a:hover,
    .wsAuthNote a:hover {
        text-decoration: underline;
    }

.wsAuth #formErrorMsg {
    display: none;
}

.wsAuthSubmit {
    width: 100%;
    border: 0;
    cursor: pointer;
}

    .wsAuthSubmit:disabled {
        opacity: .6;
        cursor: default;
    }

    /* The reset button's spinner (reset.aspx puts .spinner in the button) */
    .wsAuthSubmit .spinner {
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        margin: 0;
        border: 2px solid currentColor;
        border-top-color: transparent;
    }

.wsAuthHelp {
    margin: 0;
    font-size: 14px;
    color: var(--ws-muted);
}

/* Dark apply panel (login) / sidebar (register) */
.wsAuthApply .wsPill {
    align-self: flex-start;
}

.wsAuthApply .wsAuthTitle {
    color: #fff;
}

.wsAuthApply .wsAuthIntro {
    color: #d6d3cd;
}

.wsAuthPerks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

    .wsAuthPerks li {
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        padding: 10px 16px;
        border-radius: 14px;
        background: var(--ws-dark-2);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
    }

        .wsAuthPerks li svg {
            flex-shrink: 0;
            color: var(--ws-accent);
        }

.wsAuthNote {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #a9a59e;
}

    .wsAuthApply .wsAuthNote a {
        color: var(--ws-accent);
    }

/* One narrow card: forgot password, set a new password, thanks */
.wsAuth--narrow {
    align-items: center;
}

    .wsAuth--narrow .wsAuthCard {
        width: 100%;
        max-width: 560px;
    }

.wsAuth #resetAlert {
    display: none;
}

    .wsAuth #resetAlert.error {
        background: #fde3e3;
        color: var(--ws-required);
    }

.wsAuthDone {
    align-items: flex-start;
}

.wsAuthTick {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ws-accent);
    color: var(--ws-ink);
}

/* Register: the form card + a dark sidebar */
.wsRegister .wsCols {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.wsRegHead {
    margin: 14px 0 -2px;
    padding-top: 22px;
    border-top: 1px solid var(--ws-line-2);
    font-family: var(--ws-font);
    font-size: 22px;
    font-weight: 800;
    color: var(--ws-ink);
}

    .wsRegHead:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.wsRegister .wsTextarea {
    min-height: 96px;
}

.wsRegAside {
    position: sticky;
    top: 24px;
    padding: 32px;
}

    .wsRegAside .wsAuthTitle {
        font-size: 26px;
    }

    .wsRegAside .wsBtn {
        align-self: flex-start;
    }

    .wsRegAside .wsAuthPerks {
        grid-template-columns: minmax(0, 1fr);
    }

        .wsRegAside .wsAuthPerks li {
            font-weight: 600;
        }

.wsAuthActions {
    display: flex;
    justify-content: flex-end;
}

.emailTakenMessage a {
    color: inherit;
    text-decoration: underline;
}

/* Password rules: shown while a password field has focus; ticks / crosses as you type */
.pwRules {
    display: none;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--ws-bg);
    font-size: 14px;
    color: var(--ws-ink-2);
}

.pwRulesTitle {
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--ws-ink);
}

.pwRulesList {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pwRulesList li {
        position: relative;
        padding-left: 20px;
        line-height: 1.45;
    }

        .pwRulesList li::before {
            content: "\2022";
            position: absolute;
            left: 4px;
            color: var(--ws-muted);
        }

        .pwRulesList li.pass {
            color: #1d8a55;
        }

            .pwRulesList li.pass::before {
                content: "\2713";
                left: 2px;
                color: #1d8a55;
            }

        .pwRulesList li.fail {
            color: var(--ws-required);
        }

            .pwRulesList li.fail::before {
                content: "\2717";
                left: 2px;
                color: var(--ws-required);
            }

/* The register page never shows the site-wide loading overlay (as before the restyle) */
body.wsNoOverlay #loadingOverlay {
    display: none !important;
}

@media (max-width: 1000px) {
    .wsAuthGrid,
    .wsRegister .wsCols {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsRegAside {
        position: static;
    }
}

@media (max-width: 600px) {
    .wsAuthCard,
    .wsAuthApply {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .wsAuthPerks,
    .wsRegister .wsFormRow,
    .wsRegister .wsFormRow--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsAuthActions .wsBtn {
        width: 100%;
    }
}

/* =============================================================================================
   ACCOUNT (2026 restyle, Qui's design): account/home.aspx and the sections it loads into
   #accountContentWrap (account/*.aspx). Everything the account page needs is here; it no longer
   loads resources/css/account.css or its own <style> block. Rules are scoped to .wsAccount (the
   Terms prompt, added to <body>, by its ids).
   ============================================================================================= */

/* Shell: the menu card on the left, the section on the right */
.wsAcctWelcome {
    margin: 12px 0 0;
    font-size: 17px;
    color: var(--ws-ink-2);
}

.wsAccount #contentMain {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: auto;
    margin: 0;
    padding: 0;
}

.wsAccount #accountNavWrap {
    position: sticky;
    top: 24px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.wsAccount #accountContentWrap {
    position: relative;
    min-width: 0;
    min-height: 240px;
    width: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: none;
}

/* Menu */
.wsAcctNav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 20px;
    background: #fff;
}

.wsAccount #accountNavWrap .navItem {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ws-ink);
    font-family: var(--ws-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

    .wsAccount #accountNavWrap .navItem::before {
        content: "";
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #c9c5be;
    }

    .wsAccount #accountNavWrap .navItem:hover {
        background: var(--ws-bg);
        color: var(--ws-ink);
    }

    .wsAccount #accountNavWrap .navItem.active {
        background: var(--ws-ink);
        color: #fff;
    }

        .wsAccount #accountNavWrap .navItem.active::before {
            background: var(--ws-accent);
        }

    .wsAccount #accountNavWrap .navItem svg {
        flex-shrink: 0;
    }

    /* Log out (icon instead of a dot) and the verify / awaiting approval item */
    .wsAccount #accountNavWrap .wsAcctLogout,
    .wsAccount #accountNavWrap .verifyAccount {
        font-weight: 600;
    }

        .wsAccount #accountNavWrap .wsAcctLogout::before,
        .wsAccount #accountNavWrap .verifyAccount::before {
            display: none;
        }

    .wsAccount #accountNavWrap .wsAcctNavVerify {
        background: #fde3e3;
        color: var(--ws-required);
        font-weight: 700;
    }

    .wsAccount #accountNavWrap .wsAcctNavWait {
        background: var(--ws-sand);
        color: var(--ws-ink);
    }

        .wsAccount #accountNavWrap .wsAcctNavWait svg {
            color: #8a6a1f;
        }

.wsAccount .navLogoutBreak {
    width: auto;
    height: 1px;
    margin: 8px;
    background: var(--ws-line-2);
}

/* Section cards */
.wsAcctCard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 36px;
    border-radius: 24px;
    background: #fff;
}

.wsAcctTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ws-ink);
}

.wsAcctActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

    .wsAcctActions .wsBtn {
        border: 0;
        cursor: pointer;
    }

    .wsAcctActions .wsBtn--outline {
        border: 1.5px solid var(--ws-ink);
    }

/* Store credit: dark panel, the history (account/store-credit.aspx) opens inside it */
.wsAcctCredit {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 36px;
    border-radius: 24px;
}

.wsAcctCreditHead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wsAcctCreditLabel {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.wsAcctCreditAmount {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ws-accent);
}

.wsAcctCredit .wsBtn--outlineLight {
    cursor: pointer;
}

/* account/home.aspx's own <style> block lays these out as rows; the cards stack them */
.wsAccount #passWrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wsAccount #storeCreditWrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    margin: 0;
}

.wsAccount #storeCreditHistoryWrap {
    margin: 0;
}

.wsAccount #storeCreditHistoryWrap:empty {
    display: none;
}

.wsAccount .wsAcctCredit .scLogWrap,
.wsAccount .wsAcctCredit .scLogList {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    max-height: none;
    overflow: visible;
}

.wsAccount .wsAcctCredit .scLogHeader,
.wsAccount .wsAcctCredit .scLogRow {
    display: grid;
    grid-template-columns: 150px 120px minmax(0, 1fr) 110px;
    gap: 12px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid var(--ws-dark-3);
    background: none;
    font-size: 14px;
    line-height: 1.45;
    color: #d6d3cd;
}

.wsAccount .wsAcctCredit .scLogHeader {
    border-top: 0;
    padding-top: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a9a59e;
}

.wsAccount .wsAcctCredit .scAmountHead,
.wsAccount .wsAcctCredit .scAmount {
    text-align: right;
}

.wsAccount .wsAcctCredit .scType {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.wsAccount .wsAcctCredit .scNote {
    color: #d6d3cd;
}

.wsAccount .wsAcctCredit .scAmount {
    font-weight: 700;
    color: #fff;
}

    .wsAccount .wsAcctCredit .scAmount.pos {
        color: #5fd39a;
    }

.wsAccount .wsAcctCredit .scEmpty {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    font-size: 15px;
    color: #d6d3cd;
}

/* Account: section heading row (title + count on the left, a note on the right) */
.wsAcctHead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 4px 4px 0;
}

.wsAcctCount {
    margin-left: 6px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ws-muted);
}

.wsAcctRange {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ws-ink);
}

.wsAcctSub {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ws-ink);
}

.wsAcctEmpty p {
    margin: 0;
    font-size: 16px;
    color: var(--ws-ink-2);
}

/* "Load more" / "No more orders" */
.wsAcctMore {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

    .wsAcctMore .wsBtn {
        cursor: pointer;
    }

.wsAcctNoMore {
    height: 48px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 26px;
    border: 1.5px solid var(--ws-line);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ws-muted);
}

/* Order history: one card per order */
.wsOrders {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wsOrder {
    display: flex;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    padding: 28px;
    border-radius: 22px;
    background: #fff;
}

.wsOrderMain {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wsOrderHead,
.wsOrderBarTitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.wsOrderNo {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ws-ink);
}

.wsOrderFacts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0;
}

    .wsOrderFacts dt {
        margin: 0 0 3px;
        font-size: 13px;
        color: var(--ws-muted);
    }

    .wsOrderFacts dd {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--ws-ink);
    }

.wsOrderActions,
.wsOrderBarBtns {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .wsOrderActions .wsBtn,
    .wsOrderBarBtns .wsBtn {
        cursor: pointer;
    }

        .wsOrderActions .wsBtn:disabled,
        .wsOrderBarBtns .wsBtn:disabled {
            opacity: .6;
            cursor: default;
        }

    .wsOrderBarBtns .wsBtn svg {
        flex-shrink: 0;
    }

    .wsOrderBarBtns .wsBtn {
        gap: 8px;
    }

/* The order page */
.wsOrderView {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

a.wsAcctBack {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    color: var(--ws-accent-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

    a.wsAcctBack:hover {
        text-decoration: underline;
    }

.wsOrderBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    box-sizing: border-box;
    padding: 24px 28px;
    border-radius: 24px;
}

    .wsOrderBar .wsOrderNo {
        font-size: 32px;
        color: #fff;
    }

.wsOrderBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.wsOrderContents {
    gap: 16px;
}

.wsOrderHint {
    margin: -8px 0 0;
    font-size: 14px;
    color: var(--ws-muted);
}

.wsOrderLines {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ws-line-2);
}

.wsOrderLine {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ws-line-2);
}

.wsOrderImg {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ws-placeholder);
    overflow: hidden;
}

    .wsOrderImg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.wsOrderLineText {
    flex: 1 1 auto;
    min-width: 0;
}

.wsOrderLineName {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ws-ink);
}

.wsOrderLineQty {
    margin-top: 3px;
    font-size: 14px;
    color: var(--ws-muted);
}

.wsOrderLinePrice {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ws-ink);
}

/* Tick boxes (label.checkboxCustom > input.viewOrderVidCB + span.checkmark; the input stays focusable) */
.wsAccount .wsOrderLine .checkboxCustom {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

    .wsAccount .wsOrderLine .checkboxCustom input {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
    }

    .wsAccount .wsOrderLine .checkboxCustom .checkmark {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 1.5px solid #8b867e;
        border-radius: 6px;
        background: #fff;
    }

        .wsAccount .wsOrderLine .checkboxCustom .checkmark::after {
            content: "";
            width: 10px;
            height: 5px;
            margin-top: -2px;
            border: solid #fff;
            border-width: 0 0 2px 2px;
            transform: rotate(-45deg);
            opacity: 0;
        }

    .wsAccount .wsOrderLine .checkboxCustom input:checked + .checkmark {
        border-color: var(--ws-ink);
        background: var(--ws-ink);
    }

        .wsAccount .wsOrderLine .checkboxCustom input:checked + .checkmark::after {
            opacity: 1;
        }

    .wsAccount .wsOrderLine .checkboxCustom input:focus-visible + .checkmark {
        box-shadow: 0 0 0 3px rgba(0, 186, 210, .35);
    }

    /* Reorder with nothing ticked: the boxes flash red (account page script) */
    .wsAccount .wsOrderLine .checkboxCustom .checkmark.highlight-error {
        border-color: var(--ws-required);
        box-shadow: 0 0 0 3px rgba(180, 35, 24, .18);
    }

.wsOrderTotals {
    padding-top: 4px;
}

/* Order details / Ship to / Shipping details */
.wsOrderSide {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wsOrderCard {
    gap: 14px;
    padding: 24px;
    border-radius: 22px;
}

.wsKv {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

    .wsKv > div {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
    }

    .wsKv dt {
        margin: 0;
        font-size: 15px;
        color: var(--ws-muted);
    }

    .wsKv dd {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--ws-ink);
        overflow-wrap: anywhere;
    }

.wsOrderAddr,
.wsOrderNote {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ws-ink-2);
}

    .wsOrderNote strong {
        display: block;
        color: var(--ws-ink);
    }

a.wsOrderTrack {
    align-self: flex-start;
    gap: 6px;
}

@media (max-width: 1100px) {
    .wsOrder {
        flex-direction: column;
        align-items: stretch;
    }

    .wsOrderBody {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .wsOrder {
        padding: 22px 20px;
    }

    .wsOrderFacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wsOrderActions .wsBtn {
        flex: 1 1 140px;
    }

    .wsOrderBar {
        padding: 22px 20px;
    }

        .wsOrderBar .wsOrderNo {
            font-size: 26px;
        }

    .wsOrderBarBtns {
        flex: 1 1 100%;
        min-width: 0;
    }

    .wsOrderBarBtns .wsBtn {
        flex: 1 1 140px;
        min-width: 0;
    }

    .wsOrderLine {
        gap: 12px;
    }

    .wsOrderImg {
        width: 56px;
        height: 56px;
    }
}

/* Returns (account/returns-portal.aspx) and the "Return items" form (account/returns.aspx) */
.wsBadge--muted {
    background: var(--ws-grey-tint);
    color: var(--ws-ink-2);
    font-weight: 800;
}

.wsAcctHead > .wsBtn {
    align-self: center;
}

.wsReturns {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wsReturn {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    box-sizing: border-box;
    padding: 26px;
    border-radius: 22px;
    background: #fff;
}

.wsReturnImg {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--ws-placeholder);
    overflow: hidden;
}

    .wsReturnImg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.wsReturnMain {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wsReturnHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wsReturnNo {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 22px;
    font-weight: 800;
    color: var(--ws-ink);
}

.wsReturnWhat {
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ws-line-2);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ws-ink);
}

.wsReturnFacts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0;
}

    .wsReturnFacts dt {
        margin: 0 0 3px;
        font-size: 13px;
        color: var(--ws-muted);
    }

    .wsReturnFacts dd {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--ws-ink);
        overflow-wrap: anywhere;
    }

.wsReturnText {
    margin: 0;
    font-size: 16px;
    color: var(--ws-ink-2);
}

.wsReturnActions {
    display: flex;
    padding-top: 4px;
}

    .wsReturnActions .wsBtn {
        border: 1.5px solid var(--ws-ink);
        cursor: pointer;
    }

        .wsReturnActions .wsBtn:disabled {
            opacity: .6;
            cursor: default;
        }

.wsReturnErr {
    margin: 0;
}

.wsLikesEmpty[hidden] {
    display: none;
}

/* My likes: an unliked product fades as it leaves the list */
.wishlistWrap .wsProd.wsProdLeaving {
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.wsReturnSteps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ws-ink-2);
}

/* The form */
.wsReturnForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .wsReturnForm .wsAcctCard {
        gap: 22px;
    }

.wsReturnTable {
    display: flex;
    flex-direction: column;
}

.wsReturnRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 120px;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ws-line-2);
}

.wsReturnRow--head {
    padding: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ws-ink-2);
}

.wsReturnItem {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ws-ink);
}

.wsReturnPrice {
    font-size: 15px;
    color: var(--ws-ink-2);
}

.wsReturnDone {
    font-size: 14px;
    color: var(--ws-muted);
}

/* account.css (loaded after this file) still styles these two hooks */
.wsAccount .wsReturnForm select.returnDropDown {
    height: 50px;
    padding: 0 14px;
    border: 1.5px solid var(--ws-line);
    border-radius: 14px;
    font-size: 15px;
}

.wsAccount .wsReturnForm textarea#returnComments {
    width: 100%;
    min-height: 110px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid var(--ws-line);
    border-radius: 14px;
    font-size: 15px;
}

.wsAccount .wsReturnForm .wsReturnRow select.returnDropDown {
    height: 44px;
}

.wsReturnForm .wsAcctActions .wsBtn:disabled {
    opacity: .6;
    cursor: default;
}

@media (max-width: 700px) {
    .wsReturn {
        flex-direction: column;
        gap: 16px;
        padding: 22px 20px;
    }

    .wsReturnImg {
        width: 80px;
        height: 80px;
    }

    .wsReturnFacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wsReturnRow {
        grid-template-columns: minmax(0, 1fr) 96px;
        gap: 6px 12px;
    }

        .wsReturnRow .wsReturnItem {
            grid-column: 1 / -1;
        }

    .wsReturnRow--head span:first-child {
        display: none;
    }
}

/* Address book (account/address-book.aspx) and the address form (account/address-ui.aspx) */
.wsAddrGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wsAddr {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 22px;
    background: #fff;
}

.wsAddrName {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ws-ink);
}

.wsAddrLines,
.wsAddrContact,
.wsAddrNote {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ws-ink-2);
    overflow-wrap: anywhere;
}

    .wsAddrNote strong {
        display: block;
        color: var(--ws-ink);
    }

.wsAddrBtns {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 6px;
}

/* account.css positions these two absolutely */
.wsAccount .wsAddr .addressBookEdit,
.wsAccount .wsAddr .deleteAddressBtn {
    position: static;
    cursor: pointer;
}

.wsAccount .wsAddr .addressBookEdit {
    height: 40px;
    padding: 0 18px;
    border: 1.5px solid var(--ws-ink);
}

button.wsAddrRemove {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--ws-ink-2);
    font-family: var(--ws-font);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    button.wsAddrRemove:hover {
        color: var(--ws-required);
    }

/* The dashed "New address" card */
.wsAccount button.wsAddrNew {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 24px;
    border: 2px dashed #c9c5be;
    border-radius: 22px;
    background: transparent;
    color: var(--ws-ink);
    font-family: var(--ws-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

    .wsAccount button.wsAddrNew:hover {
        border-color: var(--ws-ink);
        background: #fff;
    }

.wsAddrPlus {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ws-accent);
    color: var(--ws-ink);
}

/* The form */
.wsAddrFormWrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

button.wsAcctBack {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--ws-accent-text);
    font-family: var(--ws-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

    button.wsAcctBack:hover {
        text-decoration: underline;
    }

.wsAddrFormWrap .wsAcctActions .wsBtn:disabled {
    opacity: .6;
    cursor: default;
}

@media (max-width: 1100px) {
    .wsAddrGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .wsAddrGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsAccount button.wsAddrNew {
        min-height: 150px;
    }
}

/* Account: "Update details" / "Update password" with nothing to do flash the fields red (account page script) */
.wsAccount .wsInput.input-error {
    border-color: var(--ws-required);
}

.wsAcctText {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ws-ink-2);
}

/* Read-only answers on "Verify your account" */
.wsAccount .wsInput[readonly],
.wsAccount .wsTextarea[readonly] {
    border-color: var(--ws-line-2);
    background: var(--ws-bg);
    color: var(--ws-ink-2);
}

.wsAccount #verifyForm .wsAcctActions .wsBtn:disabled {
    opacity: .6;
    cursor: default;
}

/* The Terms and Conditions prompt (account page script; added to <body>, outside .wsAccount) */
#tcOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 20, 24, .6);
}

#tcModal {
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
    font-family: var(--ws-font);
}

    #tcModal .tcHeader {
        padding: 32px 32px 0;
    }

        #tcModal .tcHeader h2 {
            margin: 0;
            font-family: var(--ws-font);
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -0.01em;
            line-height: 1.15;
            color: var(--ws-ink);
        }

        #tcModal .tcHeader p {
            margin: 10px 0 0;
            font-size: 16px;
            line-height: 1.55;
            color: var(--ws-ink-2);
        }

    #tcModal .tcBody {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 20px 32px;
    }

        #tcModal .tcBody p {
            margin: 0;
            font-size: 15px;
            line-height: 1.65;
            color: var(--ws-ink-2);
        }

            #tcModal .tcBody p.tcNote {
                margin-top: 12px;
                font-size: 14px;
                color: var(--ws-muted);
            }

    #tcModal a {
        color: var(--ws-accent-text);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    #tcModal .tcFooter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 32px 28px;
        border-top: 1px solid var(--ws-line-2);
    }

    #tcModal .tcCheckWrap {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 15px;
        line-height: 1.45;
        color: var(--ws-ink-2);
        cursor: pointer;
        user-select: none;
    }

        #tcModal .tcCheckWrap input[type="checkbox"] {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin: 2px 0 0;
            accent-color: var(--ws-ink);
            cursor: pointer;
        }

/* Accept only once the box is ticked (.enabled) */
#tcAcceptBtn {
    flex-shrink: 0;
    border: 0;
    cursor: pointer;
    opacity: .4;
    pointer-events: none;
    transition: opacity .2s ease;
}

    #tcAcceptBtn.enabled {
        opacity: 1;
        pointer-events: auto;
    }

@media (max-width: 600px) {
    #tcModal .tcHeader {
        padding: 24px 20px 0;
    }

    #tcModal .tcBody {
        padding: 16px 20px;
    }

    #tcModal .tcFooter {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px 22px;
    }

    #tcAcceptBtn {
        width: 100%;
    }
}

/* The site's own dialog (wsDialog in universal.js; the account page's acctDialog calls it): confirms and
   notices instead of the browser's. Above the Terms prompt, which can show a notice of its own. */
body.wsDialogOpen {
    overflow: hidden;
}

.wsDialogOverlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 20, 24, .6);
}

.wsDialog {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
    font-family: var(--ws-font);
}

.wsDialogTitle {
    margin: 0;
    font-family: var(--ws-font);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ws-ink);
}

.wsDialogText {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ws-ink-2);
}

.wsDialogBtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

    .wsDialogBtns .wsBtn {
        border: 0;
        cursor: pointer;
    }

    .wsDialogBtns .wsBtn--outline {
        border: 1.5px solid var(--ws-ink);
    }

@media (max-width: 480px) {
    .wsDialog {
        padding: 24px 20px;
    }

    .wsDialogBtns .wsBtn {
        flex: 1 1 140px;
    }
}

/* Section loading spinner (the router's .spinner) */
.wsAccount #accountContentWrap > .spinner {
    margin: 60px auto;
}

@media (max-width: 900px) {
    .wsAccount #contentMain {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The menu becomes one scrolling row of pills */
    .wsAccount #accountNavWrap {
        position: static;
    }

    .wsAcctNav {
        flex-direction: row;
        gap: 6px;
        padding: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .wsAcctNav::-webkit-scrollbar {
            display: none;
        }

        .wsAcctNav .navItemWrap {
            flex-shrink: 0;
        }

    .wsAccount #accountNavWrap .navItem {
        width: auto;
        min-height: 44px;
        white-space: nowrap;
        padding: 0 14px;
    }

    .wsAccount .navLogoutBreak {
        width: 1px;
        height: 28px;
        margin: 8px 2px;
    }
}

@media (max-width: 700px) {
    .wsAcctCard,
    .wsAcctCredit {
        padding: 24px 20px;
        border-radius: 22px;
    }

    .wsAccount .wsFormRow,
    .wsAccount .wsFormRow--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsAcctActions .wsBtn {
        width: 100%;
    }

    .wsAccount .wsAcctCredit .scLogHeader {
        display: none;
    }

    .wsAccount .wsAcctCredit .scLogRow {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 12px;
    }

        .wsAccount .wsAcctCredit .scLogRow > div:nth-child(3) {
            grid-column: 1 / -1;
        }
}

/* =============================================================================================
   INFORMATION PAGES (2026 restyle, Qui's design): About (about.aspx), Contact us (contact-us.aspx),
   FAQs (faq.aspx), Terms and Conditions (terms-and-conditions.aspx). The page frame is .wsPage;
   these pages space their blocks 32px apart (About: 64px, like the design).
   ============================================================================================= */

.wsInfo { gap: 32px; }
.wsInfo .wsPageIntro { margin-top: 0; }

/* CTA band text: ink on the teal (muted grey is too faint there) */
.wsInfoCtaNote {
    color: var(--ws-ink);
    font-weight: 500;
}

/* About ------------------------------------------------------------------------------------- */
.wsAbout { gap: 64px; }
.wsAbout > .wsCrumbs { margin-bottom: -36px; }

/* Photo + intro in one white card */
.abHero {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
}

    .abHero > img {
        flex: 0 1 44%;
        min-width: 0;
        width: 100%;
        min-height: 440px;
        object-fit: cover;
        display: block;
    }

.abHeroText {
    flex: 1.15 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: clamp(32px, 5vw, 64px);
}

    .abHeroText strong { color: var(--ws-ink); }

.abTitle {
    margin: 0;
    font-size: clamp(34px, 3.8vw, 50px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

/* "Proud to be NZ Distributors for": the brands' logos on white tiles in the dark panel */
.abBrands {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: clamp(28px, 4vw, 52px);
}

.abBrandsHead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
}

.abBrandsTitle {
    margin: 0;
    max-width: 680px;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

    .abBrandsTitle strong {
        font-weight: 800;
        color: var(--ws-accent);
    }

.abBrandGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.abBrand {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    border-radius: 22px;
    background: #fff;
    transition: transform .15s ease;
}

    .abBrand:hover { transform: translateY(-2px); }

    .abBrand img {
        min-width: 0;
        max-width: min(180px, 100%);
        max-height: 80px;
        object-fit: contain;
    }

    /* square logo files (b-Vibe, CB-X) have room round the mark */
    .abBrand--square img { max-height: 124px; }

/* Benefits: the teal intro card, then one white card each */
.abBenefits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}

.abBenefitsIntro,
.abBenefit {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border-radius: 24px;
    background: #fff;
}

.abBenefitsIntro {
    justify-content: flex-end;
    background: var(--ws-accent);
}

    .abBenefitsIntro h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .abBenefitsIntro strong { font-weight: 800; }

.abBenefit .wsTile {
    width: 48px;
    height: 48px;
}

.abBenefit h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.abBenefit p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ws-ink-2);
}

/* What retailers say */
.abQuotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.abQuote {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px;
    border-radius: 24px;
    background: #fff;
}

    .abQuote blockquote {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
    }

    .abQuote figcaption {
        margin-top: auto;
        font-size: 15px;
        font-weight: 700;
    }

        .abQuote figcaption span {
            font-weight: 500;
            color: var(--ws-muted);
        }

/* Contact us -------------------------------------------------------------------------------- */
/* Ways to reach us on the left, the message form on the right, the map underneath */
.ctCols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.ctWays {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ctWay {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 22px;
    background: #fff;
    color: var(--ws-ink);
    text-decoration: none;
}

.wsMain a.ctWay { text-decoration: none; }
a.ctWay { transition: transform .15s ease, box-shadow .15s ease; }
a.ctWay:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(17, 20, 24, .08); }

.ctWayText {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ctWayLabel {
    font-size: 14px;
    color: var(--ws-muted);
}

.ctWayValue {
    font-size: 19px;
    font-weight: 800;
}

.ctWayValue--email { overflow-wrap: anywhere; }

.ctWayValue--sm {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.ctFollow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-radius: 22px;
    background: var(--ws-ink);
    color: #fff;
}

.ctFollowLabel {
    font-size: 16px;
    font-weight: 700;
}

.ctFollowLinks {
    display: flex;
    gap: 10px;
}

    .wsMain .ctFollowLinks a {
        height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 18px;
        border: 1.5px solid #3d4148;
        border-radius: 999px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

        .wsMain .ctFollowLinks a:hover { border-color: #fff; }

.ctFormCard {
    flex: 1.4 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(24px, 3.5vw, 40px);
    border-radius: 28px;
    background: #fff;
}

.ctFormFoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ctFaqNote {
    font-size: 14px;
    color: var(--ws-muted);
}

    .wsMain .ctFaqNote a {
        color: var(--ws-accent-text);
        font-weight: 700;
        text-decoration: none;
    }

        .wsMain .ctFaqNote a:hover { text-decoration: underline; }

#contactSend:disabled { opacity: .7; cursor: default; }

.ctMap {
    height: 340px;
    border-radius: 28px;
    overflow: hidden;
    background: #e4e1db;
}

    .ctMap iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

@media (max-width: 900px) {
    .abHero > img { flex-basis: 100%; min-height: 320px; }
}

@media (max-width: 600px) {
    .wsInfo { gap: 24px; }
    .wsAbout { gap: 48px; }
    .wsAbout > .wsCrumbs { margin-bottom: -26px; }
    .abHero > img { min-height: 240px; }
    .abHeroText { padding: 28px 22px 32px; gap: 16px; }
    .abBrandGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .abBrand { height: 104px; padding: 0 16px; border-radius: 18px; }
    .abBrand img { max-height: 60px; }
    .abBrand--square img { max-height: 92px; }
    .abBenefitsIntro, .abBenefit { min-height: 0; padding: 24px; }
    .abBenefitsIntro h2 { font-size: 24px; }
    .abQuote { padding: 24px; }
    .ctWay { padding: 18px 20px; gap: 16px; }
    .ctFormFoot .wsBtn { width: 100%; }
    .ctMap { height: 260px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .abBrand,
    a.ctWay { transition: none; }
}

/* FAQs + Terms: a 240px list on the left (topics / "On this page"), kept in view while the page
   scrolls; above the text from 900px down */
.faqCols,
.tcCols {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.faqNav,
.tcToc {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 14px;
    border-radius: 22px;
    background: #fff;
}

/* FAQs ---------------------------------------------------------------------------------------- */
.wsFaq [hidden] { display: none !important; }

.faqHead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
}

    .faqHead .wsTitleBlock { max-width: 720px; }

.faqSearch {
    flex: 0 1 380px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 1.5px solid var(--ws-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--ws-muted);
}

    .faqSearch:focus-within { box-shadow: 0 0 0 3px rgba(0, 186, 210, .25); }
    .faqSearch svg { flex-shrink: 0; }

    .faqSearch input {
        flex-grow: 1;
        min-width: 0;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        outline: none;
        background: transparent;
        box-shadow: none;
        color: var(--ws-ink);
        font-family: var(--ws-font);
        font-size: 15px;
    }

        .faqSearch input::placeholder { color: #8b867e; }

.faqNav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .wsMain .faqNav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 14px;
        border-radius: 12px;
        color: var(--ws-ink);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

        .wsMain .faqNav a:hover { background: var(--ws-bg); }

.faqCount {
    font-size: 13px;
    font-weight: 600;
    color: var(--ws-muted);
}

.faqGroups {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.faqGroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-margin-top: 24px;
}

.faqGroupTitle {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.faqItem {
    border-radius: 18px;
    background: #fff;
}

    .faqItem h3 { margin: 0; }

.faqQ {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--ws-ink);
    font-family: var(--ws-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

/* + / - in a round button: two bars, the upright one hidden when open */
.faqIcon {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--ws-bg);
    color: var(--ws-ink);
}

    .faqIcon::before,
    .faqIcon::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12px;
        height: 2px;
        margin: -1px 0 0 -6px;
        border-radius: 2px;
        background: currentColor;
    }

    .faqIcon::after { transform: rotate(90deg); }

.faqQ:hover .faqIcon { background: var(--ws-line); }
.faqQ[aria-expanded="true"] .faqIcon { background: var(--ws-ink); color: #fff; }
.faqQ[aria-expanded="true"] .faqIcon::after { display: none; }

.faqA {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 22px 22px;
}

    .faqA p {
        margin: 0;
        font-size: 16px;
        line-height: 1.65;
        color: var(--ws-ink-2);
    }

    .faqA strong { color: var(--ws-ink); }

    .wsMain .faqA a,
    .wsMain .wsInfoCtaNote a {
        font-weight: 700;
        text-decoration: underline;
    }

    .wsMain .faqA a { color: var(--ws-accent-text); }

.faqNone {
    margin: 0;
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    font-size: 16px;
    color: var(--ws-ink-2);
}

/* Terms and Conditions ------------------------------------------------------------------------ */
/* The wording is the page's own (19 terms of trade + the 13-part privacy policy); only the frame
   is Qui's: "On this page", white cards, numbered teal headings. */
.tcUpdated {
    font-size: 15px;
    color: var(--ws-muted);
}

.tcToc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 10px;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ws-accent-text);
    cursor: default;
}

    .tcToc summary::-webkit-details-marker { display: none; }
    .tcToc summary svg { display: none; }

.tcNav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tcNavGroup {
    padding: 12px 14px 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ws-ink);
}

    .tcNavGroup:first-child { padding-top: 2px; }

    .wsMain .tcNav a {
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px 14px;
        border-radius: 12px;
        color: var(--ws-ink);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        text-decoration: none;
    }

        .wsMain .tcNav a:hover { background: var(--ws-bg); }

.tcNavNum {
    width: 22px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--ws-muted);
}

.tcDocs {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tcDoc {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3.5vw, 48px);
    border-radius: 28px;
    background: #fff;
}

.tcDocTitle {
    margin: 0 0 12px;
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    scroll-margin-top: 24px;
}

.tcLead {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ws-ink-2);
}

.tcCompany {
    margin: 0 0 24px;
    padding: 18px 22px;
    border-radius: 18px;
    background: var(--ws-bg);
    font-size: 15px;
    line-height: 1.6;
}

    .tcCompany p { margin: 2px 0; }

.tcSec {
    padding: 24px 0;
    border-top: 1px solid #efece6;
    scroll-margin-top: 24px;
}

.tcH {
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.tcNum {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--ws-accent-text);
}

/* Clauses (1.1, 1.2 ...) hang their number; (a) / (i) lists under them; definitions indented */
.tcSec p,
.tcSec li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ws-ink-2);
}

.tcSec p { margin: 10px 0; }
.tcSec strong { color: var(--ws-ink); }

.tcSec .sub-clause {
    position: relative;
    padding-left: 48px;
}

.tcSec .cl-num {
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--ws-ink);
}

.tcSec .def-term { padding-left: 48px; }

.tcSec ol.letter-list {
    margin: 10px 0;
    padding-left: 72px;
    list-style: lower-alpha;
}

.tcSec ol.roman-list {
    margin: 8px 0;
    padding-left: 104px;
    list-style: lower-roman;
}

.tcSec ol.letter-list ol.roman-list { padding-left: 32px; }

.tcSec li {
    margin: 6px 0;
    padding-left: 4px;
}

.tcSec .contact-block {
    margin: 16px 0 16px 48px;
    padding: 18px 22px;
    border-radius: 18px;
    background: var(--ws-bg);
    font-size: 15px;
    line-height: 1.8;
}

.wsMain .tcSec a {
    color: var(--ws-accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.tcAsk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 20px 24px;
    border-radius: 18px;
    background: var(--ws-bg);
}

    .tcAsk span {
        font-size: 15px;
        color: var(--ws-ink-2);
    }

@media (max-width: 900px) {
    .faqCols,
    .tcCols { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .faqNav,
    .tcToc { position: static; max-height: none; overflow: visible; }

    .faqSearch { flex: 1 1 100%; }

    /* "On this page" folds on phones: the heading opens it */
    .tcToc summary { cursor: pointer; padding-bottom: 6px; }
    .tcToc summary svg { display: block; transition: transform .15s ease; }
    .tcToc[open] summary svg { transform: rotate(180deg); }
    .tcToc[open] summary { padding-bottom: 10px; }
}

@media (max-width: 600px) {
    .faqGroupTitle { font-size: 22px; }
    .faqQ { padding: 14px 18px; font-size: 16px; }
    .faqA { padding: 0 18px 18px; }
    .faqA p { font-size: 15px; }

    .tcDoc { padding: 24px 20px; border-radius: 22px; }
    .tcH { font-size: 20px; gap: 10px; }
    .tcNum { font-size: 14px; }
    .tcSec p, .tcSec li { font-size: 15px; }
    .tcSec .sub-clause { padding-left: 36px; }
    .tcSec .def-term { padding-left: 0; }
    .tcSec ol.letter-list { padding-left: 44px; }
    .tcSec ol.roman-list { padding-left: 68px; }
    .tcSec ol.letter-list ol.roman-list { padding-left: 24px; }
    .tcSec .contact-block { margin-left: 0; }
    .tcAsk .wsBtn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .tcToc summary svg { transition: none; }
}

/* Subscription / billing outcomes (subscription-confirmed, subscription-cancelled, billing-updated and
   the manage-billing / start-subscription "couldn't open that link" fallback): the sign-in pages'
   narrow card (.wsAuth--narrow .wsAuthCard .wsAuthDone), plus a list of next steps and a footnote */
.wsAuthTick--muted {
    background: var(--ws-sand);
    color: var(--ws-ink-2);
}

.wsBillSteps {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ws-ink-2);
}

.wsBillFoot {
    width: 100%;
    margin: 4px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--ws-line);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ws-muted);
}

    .wsMain .wsBillFoot a {
        color: var(--ws-accent-text);
        font-weight: 700;
        overflow-wrap: anywhere;
    }

/* Maintenance (maintenance.aspx): no header or footer, one card in the middle of the screen */
.wsMaint {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px var(--ws-gutter);
}

.wsMaintCard {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 48px;
    border-radius: 28px;
    background: #fff;
}

.wsMaintLogo {
    width: 168px;
    height: auto;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .wsMaintCard { padding: 32px 22px; border-radius: 22px; }
}