/* ============================================================
   Fabric Wall Stickers — storefront styles (hand-rolled, no framework)
   ============================================================ */
:root {
    --sage: #3f8f80;
    --sage-dark: #2f6d61;
    --sage-light: #e8f3f0;
    --coral: #f2765c;
    --coral-dark: #db5a41;
    --ink: #22312e;
    --muted: #667670;
    --cream: #fbf9f4;
    --white: #ffffff;
    --line: #e6e2d8;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 6px 24px rgba(34, 49, 46, 0.08);
    --shadow-lg: 0 14px 40px rgba(34, 49, 46, 0.14);
    --wrap: 1160px;
    --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
a { color: var(--sage-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

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

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
    padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Buttons --- */
.btn {
    display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 600;
    border: 2px solid transparent; cursor: pointer; font-size: 1rem; transition: .15s ease;
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--sage-dark); border-color: var(--sage); }
.btn-ghost:hover { background: var(--sage-light); }
.btn-block { display: block; width: 100%; text-align: center; }

/* --- Header --- */
/* Sitewide USP strip above the header — best trust signals on every landing page. */
.announce-bar { background: var(--ink); color: #fff; text-align: center; font-size: .82rem; font-weight: 600; padding: 7px 12px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.announce-sep { opacity: .5; }

.site-header {
    position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--coral); font-size: 1.35rem; }
.brand-logo { height: 48px; width: auto; display: block; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.site-search { position: relative; }
.site-search input {
    border: 1px solid var(--line); border-radius: 999px; padding: 7px 38px 7px 14px;
    font-family: inherit; font-size: .9rem; width: 160px; background: var(--white);
}
.site-search input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.site-search button {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: .95rem; padding: 4px 8px;
}
.site-nav > ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.site-nav > ul > li { position: relative; }
.site-nav a { color: var(--ink); font-weight: 500; font-size: .95rem; }
.has-dropdown > a::after { content: " ▾"; font-size: .7em; color: var(--muted); }
.dropdown {
    position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--white);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
    padding: 8px; list-style: none; margin: 8px 0 0; display: none; flex-direction: column; gap: 2px; z-index: 200;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: flex; }
/* Invisible bridge across the 8px margin gap so the menu stays open while the
   mouse travels from the link down to the menu. */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.dropdown li { width: 100%; }
.dropdown a { display: block; padding: 8px 12px; border-radius: 8px; }
.dropdown a:hover { background: var(--sage-light); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-link { color: var(--ink); font-weight: 500; font-size: .95rem; }
.cart-link { position: relative; display: inline-flex; }
.cart-count {
    position: absolute; top: -8px; right: -10px; background: var(--coral); color: #fff;
    font-size: .7rem; min-width: 18px; height: 18px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-close { display: none; }
.nav-backdrop { display: none; }
body.nav-open { overflow: hidden; }

/* --- Hero --- */
.hero {
    background-image: linear-gradient(90deg, rgba(251,249,244,.97) 0%, rgba(251,249,244,.82) 38%, rgba(251,249,244,.35) 62%, rgba(251,249,244,0) 88%), var(--hero-image, none);
    background-size: cover; background-position: right center; background-repeat: no-repeat; overflow: hidden;
}
.hero-inner { display: flex; align-items: center; min-height: 460px; padding: 76px 20px; }
.hero-copy { max-width: 560px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--sage-dark); font-weight: 700; margin: 0 0 12px; }
.hero-copy h1 { font-size: clamp(2rem, 4vw, 3.1rem); color: var(--ink); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 42ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
/* hero art elements removed — the hero now uses a full-bleed background image */

/* --- USP band --- */
.usp-band { background: var(--white); border-bottom: 1px solid var(--line); }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 34px 20px; }
.usp h3 { font-size: 1.02rem; color: var(--sage-dark); margin-bottom: 4px; }
.usp p { margin: 0; color: var(--muted); font-size: .92rem; }

/* --- Sections --- */
.section { padding: 56px 0; }
.section-alt { background: var(--sage-light); }
.section-title { font-size: 1.7rem; text-align: center; margin-bottom: 32px; }

/* --- Cards --- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); text-align: center; transition: .18s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.cat-card-img { aspect-ratio: 4/3; background: var(--sage-light); }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-name { display: block; padding: 16px; font-weight: 700; color: var(--ink); }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .18s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.product-card-img { aspect-ratio: 1; background: var(--sage-light); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-name { padding: 14px 14px 2px; font-weight: 600; color: var(--ink); }
.product-card-price { padding: 0 14px 16px; color: var(--sage-dark); font-weight: 700; }
.product-card-price s { color: var(--muted); font-weight: 400; margin-right: 6px; }

/* --- CTA band --- */
.cta-band { background: var(--sage-dark); color: #fff; text-align: center; padding: 56px 20px; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d7ece7; margin-bottom: 22px; }
.cta-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); }

/* --- Footer --- */
.site-footer { background: var(--ink); color: #cfd8d4; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 48px 20px 32px; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: #cfd8d4; font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: .85rem; }
.footer-bottom p { margin: 0; }
/* Social icon links (brand column) — inherit footer link colours via currentColor. */
.footer-social { display: flex; gap: 14px; margin-top: 14px; }
.footer-social a { display: inline-flex; }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
/* Payment method badges (Why Us column). */
.footer-pay { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.footer-pay svg { width: 48px; height: 30px; border-radius: 4px; display: block; }

/* --- Error pages --- */
.error-page { text-align: center; padding: 80px 0; }
.error-page h1 { font-size: 4rem; color: var(--sage-dark); }

/* --- Flash messages --- */
.flash-wrap { margin-top: 16px; }
.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 10px; font-weight: 500; }
.flash-success { background: #e4f4ec; color: #1c7a4d; border: 1px solid #b9e3cd; }
.flash-error { background: #fbe6e2; color: #b03a26; border: 1px solid #f2c3b9; }

/* --- Breadcrumbs --- */
.breadcrumbs { font-size: .85rem; padding: 14px 0; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs .sep { margin: 0 8px; color: var(--line); }
.breadcrumbs .current { color: var(--ink); font-weight: 600; }

/* --- Category page --- */
.category-head { padding: 24px 0 0; }
.category-head h1 { font-size: 2rem; }
.category-intro { color: var(--muted); max-width: 70ch; }
.subcats { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.chip { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: .9rem; color: var(--ink); }
.chip:hover { background: var(--sage-light); text-decoration: none; border-color: var(--sage); }
.listing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.result-count { color: var(--muted); }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form select, .qty-field input, .field input, .field select, .field textarea, .search-form input {
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--white); color: var(--ink);
}
.empty-state { text-align: center; color: var(--muted); padding: 40px 0; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; align-items: center; }
.page-link { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.page-link.active { background: var(--sage); color: #fff; border-color: var(--sage); }
.page-step { font-weight: 600; }
.page-ellipsis { color: var(--muted); padding: 0 2px; }
.checkout-trust { text-align: center; font-size: .85rem; color: var(--muted); margin-top: 12px; }

/* --- Product detail --- */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.gallery-main { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 1; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

/* --- Image lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(20, 28, 26, .88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 900px); max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; top: 14px; right: 20px; width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }
body.lightbox-open { overflow: hidden; }

/* --- Sticky buy bar (shown on mobile only) --- */
.buy-bar { display: none; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumbs .thumb { width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: none; padding: 0; cursor: pointer; }
.gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs .thumb.active { border-color: var(--sage); }
.product-info h1 { font-size: 2rem; }
.price-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.price-now { font-size: 1.7rem; font-weight: 800; color: var(--sage-dark); }
.price-was { text-decoration: line-through; color: var(--muted); font-size: 1.1rem; }
.badge-sale { background: var(--coral); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.product-short { color: var(--muted); }
.add-to-cart { margin: 22px 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: .9rem; font-weight: 600; }
.qty-add { display: flex; gap: 12px; align-items: flex-end; }
.qty-field { width: 90px; }
.btn-add { flex: 1; }
.trust-badges { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: var(--sage-dark); font-size: .9rem; font-weight: 600; }
.product-description { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.product-description ul { padding-left: 20px; }
.product-description li { margin-bottom: 6px; }

/* --- Cart --- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.cart-item { display: grid; grid-template-columns: 90px 1fr auto auto auto; gap: 16px; align-items: center; background: var(--white); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.cart-item-img img { border-radius: 10px; }
.cart-item-main { display: flex; flex-direction: column; gap: 2px; }
.cart-item-name { font-weight: 700; color: var(--ink); }
.cart-item-variant { color: var(--muted); font-size: .85rem; }
.cart-item-unit { color: var(--muted); font-size: .85rem; }
.cart-item-qty input { width: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.cart-item-total { font-weight: 700; }
.cart-item-remove button { background: none; border: 0; font-size: 1.4rem; color: var(--muted); cursor: pointer; line-height: 1; }
.cart-summary { background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); position: sticky; top: 90px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; }
.summary-total { font-size: 1.2rem; font-weight: 800; border-top: 1px solid var(--line); padding-top: 12px; }
.summary-currency { font-size: .8rem; font-weight: 600; color: var(--muted); }
.cart-summary .btn { margin-top: 8px; }
.btn-sm { padding: 7px 14px; font-size: .88rem; }
.continue-link { display: block; text-align: center; margin-top: 14px; color: var(--muted); font-size: .9rem; }
.summary-muted { color: var(--muted); }
.summary-discount { color: var(--sage-dark); }
.summary-discount > span:first-child { display: flex; align-items: center; gap: 8px; }
.coupon-remove-form { display: inline; }
.coupon-remove { background: none; border: 0; padding: 0; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: pointer; }
.coupon-note { font-size: .82rem; color: var(--coral-dark); margin: -6px 0 10px; }
.coupon-form { display: flex; gap: 8px; margin-top: 12px; }
.coupon-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: .92rem; text-transform: uppercase; }
.summary-plus-ship { font-size: .75rem; font-weight: 500; color: var(--muted); }
.summary-ship-options { list-style: none; margin: 4px 0 8px; padding: 10px 12px; background: var(--cream); border-radius: var(--radius); font-size: .85rem; color: var(--muted); }
.summary-ship-options li { display: flex; justify-content: space-between; padding: 2px 0; }

/* --- Forms / pages --- */
.page-narrow .container { max-width: 820px; }
.page-narrow h2 { margin-top: 28px; }
.feature-list { padding-left: 20px; }
.feature-list li { margin-bottom: 8px; }
.stack-form { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.stack-form .field span { margin-bottom: 2px; }
.search-form { display: flex; gap: 10px; margin: 20px 0; }
.search-form input { flex: 1; }
.faq-list { margin-top: 20px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 10px; }
.faq-item summary { font-weight: 700; cursor: pointer; }
.faq-item p { margin: 10px 0 0; color: var(--muted); }
.coming-soon { text-align: center; padding: 70px 0; }

/* --- Checkout --- */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
.checkout-form h2 { font-size: 1.15rem; margin: 24px 0 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Suburb / State / Postcode on one row; suburb gets the extra width. */
.grid-address { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.checkout-login-hint { background: var(--sage-light); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 8px; }
.checkout-register-opt { display: flex; gap: 10px; align-items: flex-start; background: var(--sage-light); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 8px; font-size: .9rem; cursor: pointer; }
.checkout-register-opt input { margin-top: 3px; accent-color: var(--sage); }
.field-narrow { max-width: 200px; }
.notice { background: #fff7e8; border: 1px solid #f2d79b; border-radius: var(--radius); padding: 14px 16px; }
.notice code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
.btn-place { margin-top: 20px; }
.checkout-summary { background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); position: sticky; top: 90px; }
.co-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; font-size: .9rem; }
.co-line img { border-radius: 8px; }
#dropin-container { margin-bottom: 12px; }

/* --- Success / orders --- */
.success-badge { width: 64px; height: 64px; border-radius: 999px; background: var(--sage); color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.notice-inline { background: #fff7e8; border: 1px solid #f2d79b; border-radius: var(--radius); padding: 12px 16px; }
.account-invite { background: var(--sage-light); border-radius: var(--radius-lg); padding: 22px 24px; margin: 20px 0; }
.account-invite h2 { margin: 0 0 8px; font-size: 1.15rem; }
.account-invite p { margin: 0 0 14px; }
.account-invite-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.account-invite-form .field { flex: 1 1 260px; margin: 0; }
.order-box { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; margin: 20px 0; }
.order-table { width: 100%; border-collapse: collapse; }
.order-table td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ta-right { text-align: right; }
.order-sub td { color: var(--muted); border-bottom: none; padding: 4px 0; }
.order-total td { font-weight: 800; font-size: 1.1rem; border-top: 2px solid var(--line); border-bottom: none; padding-top: 10px; }
.ship-addr { font-style: normal; color: var(--muted); line-height: 1.7; }

/* --- Auth / account --- */
/* Two classes so this beats `.page-narrow .container` (820px) on specificity. */
.container.auth-box { max-width: 440px; }
/* reCAPTCHA's iframe is a fixed 302px — let it shrink rather than overflow. */
.g-recaptcha { margin: 10px 0 4px; max-width: 100%; overflow: hidden; }
.auth-alt { text-align: center; margin-top: 12px; color: var(--muted); }
.hint { color: var(--muted); font-weight: 400; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.account-head { display: flex; justify-content: space-between; align-items: center; }
.account-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0 32px; align-items: start; }
.account-panel { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px 24px; }
.account-panel h2 { margin: 0; font-size: 1.15rem; }
.account-orders { width: 100%; border-collapse: collapse; margin-top: 12px; }
.account-orders th, .account-orders td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.status { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.status-paid, .status-completed { background: #e4f4ec; color: #1c7a4d; }
.status-pending { background: #fff2d9; color: #a5761a; }
.status-processing, .status-shipped { background: #e5eefb; color: #2b5fb0; }
.status-cancelled { background: #fbe6e2; color: #b03a26; }

/* --- Shipping methods (checkout) --- */
.ship-methods { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 8px; }
.ship-method { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
/* display:flex would override the hidden attribute (used by the country filter). */
.ship-method[hidden] { display: none; }
.ship-method:hover { border-color: var(--sage); }
.ship-method input { accent-color: var(--sage); }
.ship-method-label { flex: 1; }
.ship-method-price { font-weight: 700; color: var(--ink); }
.summary-muted span:last-child { color: var(--muted); }

/* --- Responsive --- */
/* Breakpoint at 1024px (not 900) so browsers/webviews that fall back to the
   ~980px default viewport still collapse the header into the mobile menu. */
@media (max-width: 1024px) {
    .usp-grid { grid-template-columns: repeat(2, 1fr); }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-inner { min-height: auto; padding: 52px 20px; }
    .product-layout { grid-template-columns: 1fr; gap: 24px; }
    .cart-layout { grid-template-columns: 1fr; }
    .account-panels { grid-template-columns: 1fr; }
    /* Three columns is too tight on phones — suburb full-width, state + postcode split. */
    .grid-address { grid-template-columns: 1fr 1fr; }
    .grid-address .field:first-child { grid-column: 1 / -1; }
    /* Keep the USP strip to one line on phones. */
    .announce-optional { display: none; }
    .cart-item { grid-template-columns: 70px 1fr auto; grid-template-areas: "img main total" "img qty remove"; }
    .cart-item-img { grid-area: img; }
    .cart-item-main { grid-area: main; }
    .cart-item-total { grid-area: total; }
    .cart-item-qty { grid-area: qty; }
    .cart-item-remove { grid-area: remove; }
    .trust-badges { grid-template-columns: 1fr; }
}

/* --- Mobile menu: hamburger + dimmed mask + fixed-width right-hand drawer (below ~800px) --- */
@media (max-width: 800px) {
    .nav-toggle { display: flex; }
    .header-actions { margin-left: auto; }

    /* Hero scrim: a fixed 400px cream mask from the left; the image shows beyond it. */
    .hero {
        background-image:
            linear-gradient(90deg, rgba(251,249,244,.97) 0, rgba(251,249,244,0.6) 400px, rgba(251,249,244,0) 700px), 
            var(--hero-image, none);
    }

    /* Lift the whole header (which contains the mask + drawer) above the page. */
    body.nav-open .site-header { z-index: 999; }

    /* Full-window semi-transparent mask behind the drawer. */
    .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1;
        background: rgba(34, 49, 46, .45);
        opacity: 0; visibility: hidden; transition: opacity .25s ease;
    }
    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

    /* The menu itself: a fixed-width panel sliding in from the right. */
    .site-nav {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
        width: min(300px, 80vw); margin: 0;
        background: var(--cream);
        padding: 76px 24px 32px; overflow-y: auto;
        transform: translateX(100%); transition: transform .25s ease;
        box-shadow: -10px 0 30px rgba(34, 49, 46, .2);
    }
    .site-nav.open { transform: translateX(0); }
    .site-nav { flex-direction: column; align-items: stretch; gap: 14px; }
    .site-search input { width: 100%; }
    .site-nav > ul { flex-direction: column; gap: 2px; }
    .site-nav > ul > li { position: static; }
    .site-nav a { display: block; padding: 13px 4px; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
    .nav-account a { color: var(--sage-dark); font-weight: 700; }

    /* Close (×) — aligned to sit exactly where the hamburger is. */
    .nav-close {
        display: flex; position: absolute; top: 14px; right: 36px;
        width: 40px; height: 40px; align-items: center; justify-content: center;
        font-size: 2rem; line-height: 1; background: none; border: 0; color: var(--ink); cursor: pointer;
    }

    /* Expand the Wall Stickers categories inline — no hover needed. */
    .has-dropdown > a::after { content: ''; }
    .dropdown {
        display: flex; position: static; box-shadow: none; border: none; background: none;
        min-width: 0; margin: 0; padding: 0 0 4px 14px;
    }
    .dropdown::before { display: none; } /* no hover bridge needed on mobile */
    .dropdown a { font-size: .98rem; color: var(--muted); padding: 10px 4px; border-bottom: 1px dashed var(--line); }

    /* Sticky buy bar keeps the add-to-cart within thumb's reach. */
    .buy-bar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
        align-items: center; justify-content: space-between; gap: 14px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--white); box-shadow: 0 -6px 20px rgba(34, 49, 46, .12);
    }
    .buy-bar-price { font-size: 1.15rem; font-weight: 800; }
    .buy-bar .btn { flex: 1; max-width: 260px; }
    .product-detail { padding-bottom: 80px; } /* keep content clear of the bar */
}

/* ============================================================
   Live chat widget (assets/js/chat.js)
   ============================================================ */
.fws-chat { position: fixed; right: 20px; bottom: 20px; z-index: 900; font-family: var(--font); }

.fws-chat-launcher {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--sage); color: #fff; border: none; cursor: pointer;
    padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-lg);
    font-size: 1rem; font-weight: 600; transition: transform .15s, background .15s;
}
.fws-chat-launcher:hover { background: var(--sage-dark); transform: translateY(-1px); }
.fws-chat-launcher { position: relative; }
.fws-chat-unread {
    position: absolute; top: -5px; right: -5px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--coral); color: #fff; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
}
.fws-chat-unread[hidden] { display: none; }
.fws-chat-launcher-icon { font-size: 1.25rem; line-height: 1; }
.fws-chat.open .fws-chat-launcher { display: none; }

.fws-chat-panel[hidden] { display: none; }
.fws-chat-panel {
    position: absolute; right: 0; bottom: 0;
    width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100vh - 90px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}

.fws-chat-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 16px; background: var(--sage); color: #fff;
}
.fws-chat-title { display: block; font-size: 1rem; }
.fws-chat-status { display: block; font-size: .78rem; opacity: .9; }
.fws-chat-actions { display: flex; align-items: center; gap: 6px; }
.fws-chat-human, .fws-chat-end, .fws-chat-close {
    background: rgba(255,255,255,.18); color: #fff; border: none; cursor: pointer;
    border-radius: 8px; padding: 5px 10px; font-size: .82rem; font-weight: 600;
}
.fws-chat-human:hover, .fws-chat-end:hover, .fws-chat-close:hover { background: rgba(255,255,255,.32); }
.fws-chat-human[hidden] { display: none; }

.fws-chat-log {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column;
    gap: 10px; background: var(--cream);
}
.fws-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: .92rem; white-space: pre-wrap; word-wrap: break-word; }
.fws-msg-bot  { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.fws-msg-team { align-self: flex-start; background: var(--sage-light); border: 1px solid var(--sage-light); border-bottom-left-radius: 4px; }
.fws-msg-me   { align-self: flex-end; background: var(--sage); color: #fff; border-bottom-right-radius: 4px; }
.fws-msg-who  { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sage-dark); margin-bottom: 2px; }
.fws-msg[data-pending] { opacity: .6; }
.fws-chat-note { align-self: center; font-size: .8rem; color: var(--muted); font-style: italic; text-align: center; }
.fws-chat-divider {
    display: flex; align-items: center; gap: 10px; align-self: stretch;
    color: var(--muted); font-size: .78rem; margin: 2px 0;
}
.fws-chat-divider::before, .fws-chat-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
}
.fws-chat-ended { padding: 12px; border-top: 1px solid var(--line); background: var(--white); }
.fws-chat-ended[hidden], .fws-chat-form[hidden] { display: none; }
.fws-chat-newchat {
    width: 100%; padding: 10px 15px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--sage); color: #fff; font-size: .95rem; font-weight: 600;
}
.fws-chat-newchat:hover { background: var(--sage-dark); }

.fws-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--white); }
.fws-chat-input {
    flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px;
    font-size: .95rem; font-family: inherit; outline: none;
}
.fws-chat-input:focus { border-color: var(--sage); }
.fws-chat-input:disabled { background: var(--cream); }
.fws-chat-send {
    flex: 0 0 auto; width: 42px; border: none; cursor: pointer; border-radius: 50%;
    background: var(--coral); color: #fff; font-size: 1.2rem; font-weight: 700;
}
.fws-chat-send:hover { background: var(--coral-dark); }
.fws-chat-send:disabled { background: var(--muted); cursor: default; }

@media (max-width: 520px) {
    .fws-chat { right: 12px; bottom: 12px; }
    .fws-chat-panel { width: calc(100vw - 24px); height: calc(100vh - 80px); }

    /* On pages with the sticky buy bar (product pages), float the chat
       launcher above it so neither control is covered. Once the chat panel
       is open it overlays the bar anyway, so drop back down. */
    body:has(.buy-bar) .fws-chat { bottom: calc(76px + env(safe-area-inset-bottom)); }
    body:has(.buy-bar) .fws-chat.open { bottom: 12px; }
}