/* ===============================================================
   ShopPro storefront
   Palette and proportions follow the supplied design: dark navy
   chrome, blue accents, red for sale pricing, generous whitespace
   and soft-edged cards on an off-white ground.
   =============================================================== */

:root {
    --navy: #0b1b34;
    --navy-2: #12294a;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --red: #dc2626;
    --green: #16a34a;
    --amber: #f59e0b;

    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --line: #e5e7eb;
    --line-2: #f1f5f9;
    --bg: #f7f8fa;
    --white: #fff;

    --wrap: 1280px;

    --r-sm: 6px;
    --r: 10px;
    --r-lg: 16px;

    --sh-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --sh: 0 4px 14px rgba(15, 23, 42, .07);
    --sh-lg: 0 14px 40px rgba(15, 23, 42, .13);

    --gap: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }

/* ---------------- Announcement bar ---------------- */

.announce { background: var(--navy); color: #cbd5e1; font-size: 12.5px; }
.announce-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.announce-msgs { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.announce-msg a { color: #fff; text-decoration: underline; margin-left: 5px; }
.announce-links { display: flex; align-items: center; gap: 16px; }
.announce-links a:hover { color: #fff; }
.currency-form select {
    background: transparent; border: 0; color: #cbd5e1; font: inherit; cursor: pointer; padding: 2px 4px;
}
.currency-form select option { color: var(--ink); }

/* ---------------- Header ---------------- */

/* The header and category bar stick as one block. Making only the
   header sticky pinned it while the navigation scrolled away beneath,
   which left an empty white band where the menu had been. */
.site-top {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow .18s;
}

.site-top.is-stuck { box-shadow: 0 4px 20px rgba(0, 0, 0, .22); }

.header {
    background: var(--navy);
    color: #fff;
}

.header-inner { display: flex; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 14px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.3px; flex: 0 0 auto; }
.brand-mark {
    display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: 10px; background: var(--blue); font-size: 18px;
}

.search { flex: 1 1 auto; max-width: 620px; position: relative; display: flex; }
.search input {
    width: 100%; border: 0; border-radius: 999px; padding: 11px 52px 11px 20px;
    font-size: 14px; background: #fff; color: var(--ink);
}
.search input::placeholder { color: #94a3b8; }
.search button {
    position: absolute; right: 4px; top: 4px; bottom: 4px; width: 44px;
    border: 0; border-radius: 999px; background: var(--navy); color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
.search button:hover { background: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.haction { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #e2e8f0; }
.haction:hover { color: #fff; }
.haction span { white-space: nowrap; }

.cart-link { position: relative; }
.cart-count {
    position: absolute; top: -7px; right: -10px;
    background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 999px;
    display: grid; place-items: center; padding: 0 5px;
}
.cart-count[data-count="0"] { display: none; }

.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }

/* ---------------- Main navigation + mega menu ---------------- */

.mainnav { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 90; }
/* No overflow here, deliberately.
   This used to carry overflow-x:auto so a long menu could scroll
   sideways. But setting overflow on one axis makes the other compute
   to "auto" as well, which turns this into a clipping box -- and the
   mega menus are absolutely positioned children of it, so every
   dropdown was cut off at the bar and never appeared.
   The items wrap instead, which needs no clipping. */
.mainnav-inner { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.navlink {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 13px 14px; font-size: 14px; font-weight: 500; color: var(--ink-2);
    white-space: nowrap; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.navlink:hover { color: var(--blue); }
.navlink.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

.navitem { position: relative; }
.navcaret {
    width: 0; height: 0; border: 4px solid transparent;
    border-top-color: currentColor; margin-top: 3px; opacity: .6;
}

.megamenu {
    position: absolute; left: 0; top: 100%; min-width: 230px;
    background: var(--white); border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--sh-lg); padding: 8px; z-index: 95;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.navitem:hover .megamenu,
.navitem.is-open .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu-inner { display: flex; flex-direction: column; }
.megamenu a { padding: 8px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); }
.megamenu a:hover { background: var(--line-2); color: var(--blue); }

/* ---------------- Notices ---------------- */

.notice { margin: 18px 0 0; padding: 12px 16px; border-radius: var(--r); font-size: 14px; border: 1px solid transparent; }
.notice-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.notice-error   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.notice-info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.notice-warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }

/* ---------------- Sections ---------------- */

.section { padding: 40px 0; }
.section:first-of-type { padding-top: 26px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.section-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin: 0; }
.section-head p { color: var(--muted); font-size: 14px; margin: 5px 0 0; }
.view-all { color: var(--blue); font-size: 14px; font-weight: 600; white-space: nowrap; }
.view-all:hover { text-decoration: underline; }

/* ---------------- Hero slider ---------------- */

.hero { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy); }
.hero-track { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.hero-slide {
    flex: 0 0 100%; position: relative; min-height: 380px;
    display: grid; align-items: center; background-size: cover; background-position: center;
}
.hero-slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11, 27, 52, .92) 0%, rgba(11, 27, 52, .72) 42%, rgba(11, 27, 52, .18) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 560px; padding: 48px; color: #fff; }
.hero-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: #93c5fd; margin-bottom: 12px;
}
.hero-content h2 { font-size: 42px; line-height: 1.1; letter-spacing: -1.2px; margin: 0 0 10px; font-weight: 800; }
.hero-content .hero-sub { font-size: 19px; color: #cbd5e1; margin: 0 0 14px; font-weight: 500; }
.hero-content p { color: #94a3b8; margin: 0 0 24px; font-size: 15px; max-width: 46ch; }

.hero-dots { position: absolute; bottom: 18px; left: 48px; display: flex; gap: 7px; z-index: 3; }
.hero-dot {
    width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
    background: rgba(255, 255, 255, .38); cursor: pointer; transition: width .2s, background .2s;
}
.hero-dot.is-active { width: 22px; background: #fff; }

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border-radius: 999px; border: 0;
    background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
    display: grid; place-items: center; font-size: 18px; transition: background .15s;
}
.hero-arrow:hover { background: rgba(255, 255, 255, .3); }
.hero-prev { left: 14px; }
.hero-next { right: 14px; }

/* ---------------- Buttons ---------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border: 1px solid transparent; border-radius: var(--r-sm);
    font-size: 14.5px; font-weight: 600; cursor: pointer;
    background: var(--navy); color: #fff; transition: background .15s, transform .06s, box-shadow .15s;
}
.btn:hover { background: var(--navy-2); }
.btn:active { transform: translateY(1px); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #f1f5f9; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { background: var(--line-2); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ---------------- Trust badges ---------------- */

.trust { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { display: flex; align-items: center; gap: 13px; padding: 20px 22px; border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: 0; }
.trust-icon {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
    background: var(--line-2); display: grid; place-items: center; color: var(--blue);
}
.trust-item strong { display: block; font-size: 14px; font-weight: 650; }
.trust-item span { font-size: 12.5px; color: var(--muted); }

/* ---------------- Category tiles ---------------- */

.cat-grid { display: grid; gap: var(--gap); }
.cat-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: #d7dbe2; }
.cat-media { aspect-ratio: 4 / 3; background: var(--line-2); display: grid; place-items: center; overflow: hidden; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-media .placeholder-mark { font-size: 30px; opacity: .35; }
.cat-body { padding: 13px 15px 15px; }
.cat-body h3 { font-size: 14.5px; font-weight: 650; margin: 0 0 3px; }
.cat-body span { font-size: 12.5px; color: var(--blue); font-weight: 600; }

.cat-card.compact .cat-media { aspect-ratio: 1 / 1; }
.cat-card.compact .cat-body { text-align: center; padding: 11px; }

/* ---------------- Product cards ---------------- */

.product-grid { display: grid; gap: var(--gap); }

.card {
    position: relative; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: #d7dbe2; }

.card-media { position: relative; aspect-ratio: 1 / 1; background: var(--line-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card-media img { transform: scale(1.04); }
.card-media .placeholder-mark {
    position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; opacity: .3;
}

.card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.pill {
    display: inline-block; padding: 3px 9px; border-radius: var(--r-sm);
    font-size: 11px; font-weight: 700; letter-spacing: .2px; color: #fff; background: var(--navy);
}
.pill-hot { background: var(--red); }
.pill-new { background: var(--blue); }
.pill-off { background: var(--red); }
.pill-out { background: #475569; }

.wish-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line);
    background: rgba(255, 255, 255, .94); color: var(--muted);
    display: grid; place-items: center; cursor: pointer; transition: color .15s, border-color .15s;
}
.wish-btn:hover { color: var(--red); border-color: #fecaca; }
.wish-btn.is-active { color: var(--red); border-color: #fecaca; background: #fff1f2; }

.card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-brand { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 650; }
.card-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0; }
.card-title a:hover { color: var(--blue); }

.stars { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.stars-marks { color: var(--amber); letter-spacing: 1px; }

.card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.price-now { font-size: 16.5px; font-weight: 750; letter-spacing: -.3px; }
.price-was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.price-off { font-size: 12px; font-weight: 700; color: var(--red); }

.card-stock { font-size: 12px; color: var(--muted); }
.card-stock.low { color: var(--amber); font-weight: 600; }
.card-stock.out { color: var(--red); font-weight: 600; }

.card-cta { margin-top: 4px; }

/* ---------------- Promo banners ---------------- */

.promo-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.promo {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    min-height: 168px; padding: 26px 28px; display: flex; flex-direction: column;
    justify-content: center; color: #fff; background-size: cover; background-position: center;
    transition: transform .18s, box-shadow .18s;
}
.promo:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15)); }
.promo > * { position: relative; z-index: 2; }
.promo h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.3px; }
.promo .promo-sub { font-size: 24px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 6px; }
.promo p { font-size: 13px; opacity: .88; margin: 0 0 16px; }
.promo .btn { align-self: flex-start; }

/* ---------------- Brand strip ---------------- */

.brand-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.brand-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
    aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 14px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.brand-card:hover { border-color: #cbd5e1; box-shadow: var(--sh-sm); transform: translateY(-2px); }
.brand-card img { max-height: 40px; width: auto; object-fit: contain; }
.brand-card span { font-size: 15px; font-weight: 750; color: var(--ink-2); letter-spacing: -.3px; text-align: center; }

/* ---------------- Testimonials ---------------- */

.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.testi { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.testi .stars-marks { font-size: 15px; margin-bottom: 10px; display: block; }
.testi p { font-size: 14px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.65; }
.testi-who { display: flex; align-items: center; gap: 11px; }
.testi-avatar {
    width: 38px; height: 38px; border-radius: 999px; background: var(--navy);
    color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.testi-who strong { display: block; font-size: 13.5px; }
.testi-who span { font-size: 12px; color: var(--muted); }

/* ---------------- Blog cards ---------------- */

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.post { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.post-media { aspect-ratio: 16 / 9; background: var(--line-2); }
.post-media img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 16px 18px 20px; }
.post-body h3 { font-size: 15.5px; font-weight: 650; margin: 0 0 7px; line-height: 1.45; }
.post-body p { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.post-meta { font-size: 12px; color: var(--muted); }

/* ---------------- Newsletter ---------------- */

.newsletter {
    background: var(--navy); border-radius: var(--r-lg); padding: 34px 40px; color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.newsletter-text { display: flex; align-items: center; gap: 18px; }
.newsletter-icon {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px;
    background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 21px;
}
.newsletter h2 { font-size: 21px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.3px; }
.newsletter p { color: #94a3b8; font-size: 14px; margin: 0; }
.newsletter-form { display: flex; gap: 9px; flex: 1 1 380px; max-width: 480px; }
.newsletter-form input {
    flex: 1; border: 0; border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; color: var(--ink);
}
.newsletter-form .btn { flex: 0 0 auto; }

/* ---------------- Footer ---------------- */

.footer { background: var(--navy); color: #94a3b8; margin-top: 50px; font-size: 13.5px; }
.footer-top {
    display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 34px;
    padding-top: 46px; padding-bottom: 34px;
}
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { margin: 0 0 12px; line-height: 1.7; max-width: 34ch; }
.footer-contact a { color: #cbd5e1; }
.footer-contact a:hover { color: #fff; }
/* h2 as well as h3: the footer headings became h2 so the document
   outline does not skip a level on pages whose body has no h2. The
   size is set explicitly here, so the change is invisible. */
.footer-col h2,
.footer-col h3 { color: #fff; font-size: 14px; font-weight: 650; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a:hover { color: #fff; }

.socials { display: flex; gap: 8px; margin-top: 4px; }
.socials a {
    width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, .1);
    display: grid; place-items: center; color: #cbd5e1; font-size: 12px; font-weight: 700;
}
.socials a:hover { background: var(--blue); color: #fff; }

.paylogos { display: flex; flex-wrap: wrap; gap: 7px; }
.paylogo {
    background: rgba(255, 255, 255, .1); border-radius: 5px; padding: 5px 9px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: #cbd5e1;
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 20px; }
.footer-bottom p { margin: 0; font-size: 12.5px; }

/* ---------------- Empty states ---------------- */

.empty-block { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty-block .mark { font-size: 40px; opacity: .35; margin-bottom: 12px; }
/* h2 as well as h3: empty-state headings became h2 so a page whose
   only content is an empty state does not skip from h1 to h3. */
.empty-block h2,
.empty-block h3 { color: var(--ink); font-size: 17px; margin: 0 0 6px; }
.empty-block p { margin: 0 0 18px; }

/* ---------------- Responsive ---------------- */

@media (max-width: 1100px) {
    .brand-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .header-inner { flex-wrap: wrap; gap: 14px; }
    .search { order: 3; flex-basis: 100%; max-width: none; }
    .haction span { display: none; }
    .nav-toggle { display: flex; }

    .mainnav-inner { display: none; flex-direction: column; align-items: stretch; padding-bottom: 10px; }
    .mainnav.is-open .mainnav-inner { display: flex; }
    .navlink { padding: 11px 4px; border-bottom: 1px solid var(--line-2); }
    .megamenu { position: static; opacity: 1; visibility: visible; transform: none;
                box-shadow: none; border: 0; padding: 0 0 6px 16px; display: none; }
    .navitem.is-open .megamenu { display: block; }

    .hero-slide { min-height: 300px; }
    .hero-content { padding: 30px 26px; }
    .hero-content h2 { font-size: 28px; }
    .hero-content .hero-sub { font-size: 16px; }
    .hero-dots { left: 26px; }

    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-item:nth-child(2) { border-right: 0; }
    .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

    .promo-grid, .testi-grid, .post-grid { grid-template-columns: 1fr; }
    .brand-grid { grid-template-columns: repeat(3, 1fr); }

    .newsletter { padding: 26px; flex-direction: column; align-items: stretch; }
    .newsletter-form { max-width: none; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
    .section { padding: 28px 0; }
    .section-head h2 { font-size: 19px; }
}

@media (max-width: 560px) {
    .announce-links a { display: none; }
    .announce-msgs { font-size: 12px; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .trust-item:last-child { border-bottom: 0; }
    .footer-top { grid-template-columns: 1fr; }
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-content h2 { font-size: 24px; }
    .hero-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Section visibility toggles from the homepage builder. */
@media (min-width: 901px) { .hide-desktop { display: none !important; } }
@media (max-width: 900px) { .hide-mobile  { display: none !important; } }

/* ---------------- Artwork-only hero slides ----------------

   A finished banner already carries its own headline, styling and
   call to action. The scrim exists to keep overlaid copy readable
   over a photograph; on artwork it just greys out the design, so it
   is removed and the whole slide becomes the link instead.

   contain, not cover: a supplied banner has a composition, and
   cover would crop the product out of it at narrow widths.         */

.hero-slide.is-artwork::after { content: none; }

.hero-slide.is-artwork {
    /* contain, not cover.
       A carousel gives every slide one shared height, and banners
       supplied by a designer do not share one aspect ratio -- these
       are 2.9:1 and 2.0:1. Under cover the wider artwork was cropped
       and lost its headline and button off the left edge.
       contain shows the whole design every time. The cost is a band
       of background on the slides whose shape differs most from the
       tallest, which is a far better trade than losing the message.
       aspect-ratio still sets the natural height when nothing taller
       is beside it. */
    aspect-ratio: var(--hero-ratio, 3 / 1);
    min-height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hero-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

.hero-cover:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -5px;
}

/* A wide banner shrinks to a short strip on a phone if the slide
   keeps its desktop height, so the minimum is relaxed and the image
   is allowed to set it. */
/* No min-height override on narrow screens either: aspect-ratio
   already scales the banner down proportionally, and a minimum
   would put the letterboxing straight back. */

/* ---------------- Store logo ----------------
   Set from Settings -> Appearance. The header is dark navy and
   the footer darker still, so a logo drawn for a white page --
   as most are -- needs a light plate behind it rather than being
   left to disappear into the background. */

.brand-logo {
    height: 40px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 5px 9px;
}

.brand-logo-footer { height: 38px; }

@media (max-width: 900px) {
    .brand-logo { height: 32px; max-width: 140px; padding: 4px 7px; }
}

/* ---------------- Storefront icons ----------------

   CSS masks from inline SVG: no icon font, no sprite request,
   nothing external. A mask paints with currentColor, which is
   what lets the same icon sit in dark ink on the white bar and
   in white on the blue active pill without a second copy.
   ------------------------------------------------------- */

.sic {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    vertical-align: -0.2em;
}

.sic-home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5V20h13V9.5%22%2F%3E%3Cpath%20d%3D%22M9.5%2020v-6h5v6%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5V20h13V9.5%22%2F%3E%3Cpath%20d%3D%22M9.5%2020v-6h5v6%22%2F%3E%3C%2Fsvg%3E");
}
.sic-grid {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%223%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2213.5%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%2213.5%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%223%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2213.5%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%2213.5%22%20width%3D%227.5%22%20height%3D%227.5%22%20rx%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
}
.sic-monitor {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8.5%2021h7%22%2F%3E%3Cpath%20d%3D%22M12%2017v4%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8.5%2021h7%22%2F%3E%3Cpath%20d%3D%22M12%2017v4%22%2F%3E%3C%2Fsvg%3E");
}
.sic-shirt {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%203%2012%205.5%2015.5%203%2021%206l-2.5%204-2%20-1V21h-9V9l-2%201L3%206Z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%203%2012%205.5%2015.5%203%2021%206l-2.5%204-2%20-1V21h-9V9l-2%201L3%206Z%22%2F%3E%3C%2Fsvg%3E");
}
.sic-house {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5V20h13V9.5%22%2F%3E%3Cpath%20d%3D%22M10%2020v-4.5h4V20%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5V20h13V9.5%22%2F%3E%3Cpath%20d%3D%22M10%2020v-4.5h4V20%22%2F%3E%3C%2Fsvg%3E");
}
.sic-flower {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M12%209.4c0-3%201.4-5.4%200-6.4-1.4%201-0%203.4%200%206.4Z%22%2F%3E%3Cpath%20d%3D%22M12%2014.6c0%203-1.4%205.4%200%206.4%201.4-1%200-3.4%200-6.4Z%22%2F%3E%3Cpath%20d%3D%22M9.4%2012c-3%200-5.4-1.4-6.4%200%201%201.4%203.4%200%206.4%200Z%22%2F%3E%3Cpath%20d%3D%22M14.6%2012c3%200%205.4%201.4%206.4%200-1-1.4-3.4%200-6.4%200Z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M12%209.4c0-3%201.4-5.4%200-6.4-1.4%201-0%203.4%200%206.4Z%22%2F%3E%3Cpath%20d%3D%22M12%2014.6c0%203-1.4%205.4%200%206.4%201.4-1%200-3.4%200-6.4Z%22%2F%3E%3Cpath%20d%3D%22M9.4%2012c-3%200-5.4-1.4-6.4%200%201%201.4%203.4%200%206.4%200Z%22%2F%3E%3Cpath%20d%3D%22M14.6%2012c3%200%205.4%201.4%206.4%200-1-1.4-3.4%200-6.4%200Z%22%2F%3E%3C%2Fsvg%3E");
}
.sic-bike {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2217%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2217%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M5.5%2017%2010%207h4%22%2F%3E%3Cpath%20d%3D%22M10%207%2015%2017%22%2F%3E%3Cpath%20d%3D%22M8%207h4%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2217%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2217%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M5.5%2017%2010%207h4%22%2F%3E%3Cpath%20d%3D%22M10%207%2015%2017%22%2F%3E%3Cpath%20d%3D%22M8%207h4%22%2F%3E%3C%2Fsvg%3E");
}
.sic-gamepad {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%227.5%22%20width%3D%2219%22%20height%3D%229.5%22%20rx%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M7%2011v2.6M5.7%2012.3h2.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2211.6%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2218.2%22%20cy%3D%2213.6%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%227.5%22%20width%3D%2219%22%20height%3D%229.5%22%20rx%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M7%2011v2.6M5.7%2012.3h2.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2211.6%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2218.2%22%20cy%3D%2213.6%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
}
.sic-tag {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012V5a2%202%200%200%201%202-2h7l9%209-9%209-9-9Z%22%2F%3E%3Ccircle%20cx%3D%227.4%22%20cy%3D%227.4%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012V5a2%202%200%200%201%202-2h7l9%209-9%209-9-9Z%22%2F%3E%3Ccircle%20cx%3D%227.4%22%20cy%3D%227.4%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
}
.sic-file {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8l-5-5Z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M8.5%2013h7M8.5%2016.5h5%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8l-5-5Z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M8.5%2013h7M8.5%2016.5h5%22%2F%3E%3C%2Fsvg%3E");
}
.sic-mail {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E");
}
.sic-book {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204.5h6a3%203%200%200%201%203%203V20a2.5%202.5%200%200%200-2.5-2.5H3Z%22%2F%3E%3Cpath%20d%3D%22M21%204.5h-6a3%203%200%200%200-3%203V20a2.5%202.5%200%200%201%202.5-2.5H21Z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204.5h6a3%203%200%200%201%203%203V20a2.5%202.5%200%200%200-2.5-2.5H3Z%22%2F%3E%3Cpath%20d%3D%22M21%204.5h-6a3%203%200%200%200-3%203V20a2.5%202.5%200%200%201%202.5-2.5H21Z%22%2F%3E%3C%2Fsvg%3E");
}
.sic-truck {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%206.5h11v9H2z%22%2F%3E%3Cpath%20d%3D%22M13%209.5h4l3%203v3h-7z%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2218%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.9%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%206.5h11v9H2z%22%2F%3E%3Cpath%20d%3D%22M13%209.5h4l3%203v3h-7z%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2218%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.9%22%2F%3E%3C%2Fsvg%3E");
}
.sic-refresh {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%2015.3-6.4%22%2F%3E%3Cpath%20d%3D%22M18.5%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-15.3%206.4%22%2F%3E%3Cpath%20d%3D%22M5.5%2021v-5h5%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%2015.3-6.4%22%2F%3E%3Cpath%20d%3D%22M18.5%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-15.3%206.4%22%2F%3E%3Cpath%20d%3D%22M5.5%2021v-5h5%22%2F%3E%3C%2Fsvg%3E");
}
.sic-user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M4.5%2020.5a7.5%207.5%200%200%201%2015%200%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M4.5%2020.5a7.5%207.5%200%200%201%2015%200%22%2F%3E%3C%2Fsvg%3E");
}
.sic-heart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020s-7.5-4.6-7.5-9.6A4.4%204.4%200%200%201%2012%207.6a4.4%204.4%200%200%201%207.5%202.8C19.5%2015.4%2012%2020%2012%2020Z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020s-7.5-4.6-7.5-9.6A4.4%204.4%200%200%201%2012%207.6a4.4%204.4%200%200%201%207.5%202.8C19.5%2015.4%2012%2020%2012%2020Z%22%2F%3E%3C%2Fsvg%3E");
}
.sic-cart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2220%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M2.5%203h3l2.5%2012.2a1.8%201.8%200%200%200%201.8%201.4h7.6a1.8%201.8%200%200%200%201.8-1.4L21%207.5H6%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2220%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M2.5%203h3l2.5%2012.2a1.8%201.8%200%200%200%201.8%201.4h7.6a1.8%201.8%200%200%200%201.8-1.4L21%207.5H6%22%2F%3E%3C%2Fsvg%3E");
}
.sic-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.6-3.6%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.6-3.6%22%2F%3E%3C%2Fsvg%3E");
}
.sic-compare {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%207l3-3M4%207l3%203%22%2F%3E%3Cpath%20d%3D%22M20%2017H4m16%200-3-3m3%203-3%203%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%207l3-3M4%207l3%203%22%2F%3E%3Cpath%20d%3D%22M20%2017H4m16%200-3-3m3%203-3%203%22%2F%3E%3C%2Fsvg%3E");
}
.sic-bell {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%209a6%206%200%201%200-12%200c0%205-2%206.5-2%206.5h16S18%2014%2018%209Z%22%2F%3E%3Cpath%20d%3D%22M10.3%2019.5a2%202%200%200%200%203.4%200%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%209a6%206%200%201%200-12%200c0%205-2%206.5-2%206.5h16S18%2014%2018%209Z%22%2F%3E%3Cpath%20d%3D%22M10.3%2019.5a2%202%200%200%200%203.4%200%22%2F%3E%3C%2Fsvg%3E");
}


/* ===============================================================
   HEADER REDESIGN

   The chrome moves from dark navy to light. Everything below
   overrides the earlier header rules rather than replacing them in
   place, so the order in this file matters: these come last and win.

   Three bands, all on light ground now:
     1. utility strip  - shipping, returns, help, with icons
     2. main header    - logo, pill search, account / wishlist / cart
     3. category bar   - icon + label, active item as a blue pill
   =============================================================== */

/* ---------------- 1. Utility strip ---------------- */

.announce {
    background: #f6f8fb;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.announce-inner { min-height: 44px; }

.announce-msgs { gap: 0; }

.announce-msg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    font-weight: 500;
    color: var(--ink-2);
}

/* Hairline dividers between strips, as in the reference. The first
   has none, so the row starts flush with the page gutter. */
.announce-msg + .announce-msg { border-left: 1px solid var(--line); }
.announce-msg:first-child { padding-left: 0; }

.announce-msg .sic { color: var(--blue); font-size: 17px; }
.announce-msg a { color: var(--blue); text-decoration: underline; font-weight: 600; margin-left: 0; }

.announce-links { gap: 0; font-weight: 500; }
.announce-links > * { padding: 0 18px; }
.announce-links > * + * { border-left: 1px solid var(--line); }
.announce-links > *:last-child { padding-right: 0; }
.announce-links a { color: var(--ink-2); }
.announce-links a:hover { color: var(--blue); }

.currency-form select { color: var(--ink-2); }

/* ---------------- 2. Main header ---------------- */

.header {
    background: var(--white);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.header-inner { padding-top: 18px; padding-bottom: 18px; gap: 32px; }

/* The logo sits on white now, so the light plate it needed against
   the navy bar would show as a box around it. */
.brand-logo {
    background: none;
    padding: 0;
    border-radius: 0;
    height: 52px;
    max-width: 230px;
}

.brand-name { color: var(--ink); }

/* Search: a soft pill with the button inside its right edge. */
.search input {
    background: #f6f8fb;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 13px 58px 13px 22px;
    font-size: 14.5px;
}

.search input:focus {
    outline: none;
    background: var(--white);
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.search button {
    right: 5px; top: 5px; bottom: 5px;
    width: 48px;
    background: var(--blue);
    border-radius: 999px;
}

.search button:hover { background: var(--blue-dark); }

/* Header actions */
.header-actions { gap: 6px; }

.haction {
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--r);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    transition: background .14s, color .14s;
}

.haction:hover { background: #f1f5f9; color: var(--blue); }
.haction svg { width: 22px; height: 22px; }

/* Divider before the cart, matching the reference. */
.cart-link { margin-left: 10px; padding-left: 20px; border-left: 1px solid var(--line); border-radius: 0; }
.cart-link:hover { background: none; }

/* Orange, not red: the badge is a count, not a warning, and orange
   is the accent the logo already uses. */
.cart-count {
    background: #f97316;
    top: 2px;
    right: -2px;
}

.haction-count { background: #f97316; color: #fff; }

.navcaret { opacity: .5; }

/* ---------------- 3. Category bar ---------------- */

.mainnav { background: var(--white); border-bottom: 1px solid var(--line); }

/*
 * The gutter must be restated, not just the top padding: this element
 * is also a `.wrap`, and `padding: 6px 0 0` would zero the 20px side
 * padding it inherits from there -- which is what pushed the first
 * item flush against the window edge while the logo above it kept its
 * margin. Anything that sets padding here has to carry the gutter.
 */
.mainnav-inner { gap: 2px; padding: 6px 20px 0; }

.navlink {
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--r) var(--r) 0 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-2);
    border-bottom: 3px solid transparent;
}

.navlink .sic { font-size: 18px; opacity: .85; }

.navlink:hover { color: var(--blue); background: #f6f8fb; }
.navlink:hover .sic { opacity: 1; }

/*
 * The active item is a filled pill with an underline beneath it.
 * Both are needed: the pill reads at a glance, and the underline
 * keeps the "you are here" mark visible to anyone who cannot
 * distinguish the fill colour.
 */
.navlink.active {
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--blue);
}

.navlink.active .sic { opacity: 1; }
.navlink.active:hover { background: var(--blue-dark); color: #fff; }

/* ---------------- Narrow screens ---------------- */

@media (max-width: 1080px) {
    /* The toggle was white-on-navy; on the white bar it must be ink. */
    .nav-toggle span { background: var(--ink); }
}

@media (max-width: 900px) {
    .header-inner { gap: 14px; padding-top: 12px; padding-bottom: 12px; }
    .brand-logo { height: 38px; max-width: 150px; }

    /* Only the icons at this width -- the labels do not fit beside a
       search field, and dropping them keeps the row on one line. */
    .haction span:not(.haction-count) { display: none; }
    .haction .navcaret { display: none; }
    .haction { padding: 8px; }
    .cart-link { margin-left: 4px; padding-left: 10px; }

    .announce { font-size: 12px; }
    .announce-msg { padding: 0 12px; gap: 7px; }
    .announce-links > * { padding: 0 10px; }

    .navlink { border-radius: var(--r); border-bottom-width: 0; }
    .navlink.active { border-bottom-width: 0; }
}

@media (max-width: 560px) {
    /* Strips wrap rather than scroll sideways; a divider between
       stacked rows would read as a stray line, so it is dropped. */
    .announce-inner { flex-wrap: wrap; gap: 2px; padding-top: 6px; padding-bottom: 6px; }
    .announce-msg + .announce-msg { border-left: 0; }
    .announce-msg { padding: 0 10px 0 0; }
}

/* The category row must hold one line: eleven items with icons is
   a lot, and a second row pushes the page content down and reads
   as a mistake. Tightened rather than allowed to wrap, and the
   labels drop to icons only before it would break. */
@media (min-width: 1081px) {
    .mainnav-inner { flex-wrap: nowrap; }
    .navlink { padding: 11px 11px; font-size: 14px; gap: 7px; white-space: nowrap; }
    .navlink .sic { font-size: 17px; }
}

@media (min-width: 1081px) and (max-width: 1320px) {
    /*
     * Eleven items needed the labels dropping here to hold one line.
     * With Brands, Blog and Contact gone there are eight, and eight
     * labelled items measure ~1060px against the ~1240px available at
     * the narrow end of this band -- so the labels stay. A bare icon
     * with a caret told a shopper nothing.
     */
    .navlink { padding: 11px 9px; }
}

/* ===============================================================
   HEADER: LOGO SIZE, CENTRED SEARCH, TYPEAHEAD

   Appended last so it wins over the redesign block above.
   =============================================================== */

/* ---------------- Logo ---------------- */

.brand-logo {
    height: 64px;
    max-width: 260px;
    width: auto;
    object-fit: contain;
}

/* ---------------- Centred search ----------------

   The search used to sit immediately after the logo with the actions
   pushed right by `margin-left: auto`, which left the gap on the right
   and put the field nowhere in particular.

   Giving both side columns `flex: 1 1 0` makes them claim equal width
   whatever they contain, so the middle column lands on the page centre
   -- and stays there when the account name is "Jo" or "Jonathan".
   `min-width: 0` is what lets those columns shrink below their content
   instead of shoving the field off-centre. */

.header-inner { justify-content: space-between; }

.brand { flex: 1 1 0; min-width: 0; }

.header-actions {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
    margin-left: 0;
}

.search {
    flex: 0 1 640px;
    max-width: 640px;
    margin: 0 24px;
}

/* ---------------- Typeahead panel ---------------- */

.suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 200;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    padding: 6px;
}

.suggest[hidden] { display: none; }

.suggest-head {
    margin: 6px 6px 2px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3, #94a3b8);
}

.suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--ink);
}

.suggest-item img {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
    background: #f6f8fb;
    border-radius: 8px;
}

.suggest-text { display: flex; flex-direction: column; min-width: 0; }

.suggest-label {
    font-size: 14px;
    font-weight: 500;
    /* One line: a long product name must not push the price out of
       the row or make the panel taller than the viewport. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggest-meta { font-size: 12px; color: var(--ink-2); }

.suggest-price {
    margin-left: auto;
    padding-left: 10px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Hover and keyboard highlight share one appearance, so the mouse and
   the arrow keys cannot disagree about which row is current. */
.suggest-item:hover,
.suggest-item.is-active,
.suggest-all:hover,
.suggest-all.is-active { background: #eff4ff; }

.suggest-all {
    display: block;
    margin-top: 4px;
    padding: 10px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
    text-align: center;
}

.suggest-empty {
    margin: 0;
    padding: 14px 10px;
    font-size: 13.5px;
    color: var(--ink-2);
    text-align: center;
}

/* ---------------- Narrow screens ---------------- */

@media (max-width: 1080px) {
    .search { margin: 0 14px; flex-basis: 420px; }
}

@media (max-width: 900px) {
    /* The field drops to its own full-width row here, so the equal
       side columns and the centring margins have to be given back. */
    .search { flex: 1 1 100%; max-width: none; margin: 0; }
    .brand, .header-actions { flex: 0 0 auto; }
    .header-actions { margin-left: auto; }
    .brand-logo { height: 44px; max-width: 170px; }
}

@media (max-width: 560px) {
    .brand-logo { height: 38px; max-width: 150px; }
    .suggest-item img { width: 34px; height: 34px; }
}