/* ===========================================================================
   Storefront styles - public single-page ghee shop ("/").
   Visual language follows the Flipomart marketplace: light blue utility bar,
   white sticky header with a pill search, blue primary (#1B4FD8), grey-blue
   page background and white bordered section cards.

   Self-contained on purpose: output.css is a pre-built Tailwind bundle, so any
   new utility class would need an npm rebuild to exist. Everything the shop
   needs lives here as plain CSS, scoped under .shop.
   =========================================================================== */

.shop {
    /* brand */
    --brand: #1B4FD8;
    --brand-dk: #1740B0;
    --brand-sf: #E8F1FE;
    --orange: #F59E0B;

    /* text */
    --ink: #16233F;
    --ink-2: #334155;
    --muted: #64748B;
    --muted-2: #94A3B8;

    /* surface */
    --bg: #F5F7FA;
    --card: #FFFFFF;
    --line: #E6EAF0;
    --line-2: #EEF1F6;
    --thumb: #F1F4F8;

    /* status */
    --green: #16A34A;
    --green-sf: #F0FDF4;
    --red: #E11D48;

    --r: 10px;
    --r-sm: 8px;
    --r-lg: 14px;
    --pill: 999px;

    --shadow-sm: 0 1px 2px rgba(22, 35, 63, .05);
    --shadow-md: 0 6px 20px rgba(22, 35, 63, .08);
    --shadow-lg: 0 20px 50px rgba(22, 35, 63, .16);

    font-family: 'Poppins', 'Hind Siliguri', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    min-height: 100vh;
    /* Stops a stray wide child from side-scrolling the whole page on a phone.
       `clip` rather than `hidden`: `hidden` would make this a scroll container
       and kill the sticky header. */
    overflow-x: clip;
}

.shop *, .shop *::before, .shop *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.shop section[id], .shop [id="top"] { scroll-margin-top: 100px; }
.shop h1, .shop h2, .shop h3, .shop h4 { font-weight: 600; line-height: 1.25; margin: 0; color: var(--ink); }
.shop p { margin: 0; }
.shop img, .shop svg { display: block; max-width: 100%; }
.shop a { color: inherit; text-decoration: none; }
.shop button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.shop del { text-decoration: line-through; }
.bn { font-family: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ══════════════════════════ TOP UTILITY BAR ══════════════════════════ */
.topbar {
    background: var(--brand-sf);
    color: var(--brand);
    font-size: 12.5px;
}
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 28px;
}
.topbar-note { color: #2A62C9; }
.topbar-links { display: flex; align-items: center; gap: 18px; }
.topbar-links a:hover { text-decoration: underline; }
.topbar-links .sep { width: 1px; height: 13px; background: #B9CFF3; }

/* ══════════════════════════ HEADER ══════════════════════════ */
/* Solid while the page sits at the top; once site.js flags .is-stuck the header
   turns to frosted glass so the content scrolling underneath shows through. */
.hdr {
    position: sticky; top: 0; z-index: 40;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hdr.is-stuck {
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom-color: rgba(255, 255, 255, .55);
    box-shadow: 0 10px 34px rgba(22, 35, 63, .12);
}
@supports not (backdrop-filter: blur(1px)) {
    .hdr.is-stuck { background: rgba(255, 255, 255, .96); }
}
.hdr-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }

.logo { display: flex; align-items: baseline; gap: 1px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; flex: none; }
.logo-a { color: var(--ink); }
.logo-b { color: var(--brand); }
.logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); align-self: flex-start; margin-top: 6px; }
/* Uploaded /Admin/MyCompany logo, shown instead of the wordmark. Height-capped
   just under the header's 68px min-height so any aspect ratio drops into the bar
   without pushing it taller; width is generous for a wide horizontal logo. */
.logo-img { display: block; height: 54px; width: auto; max-width: 260px; object-fit: contain; align-self: center; }

/* Compact pill search: a soft grey field with a leading magnifier and a small
   round go button. Deliberately narrow — the logo and the action icons keep the
   header balanced instead of one giant bar swallowing the whole row. */
.search { position: relative; flex: 1 1 auto; max-width: 440px; }
.search-ico {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 12.5px; color: var(--muted-2); pointer-events: none;
}
.search input {
    width: 100%; height: 38px;
    padding: 0 42px 0 35px;
    font: inherit; font-size: 13.5px;
    color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: var(--pill);
    outline: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.search input::placeholder { color: var(--muted-2); }
.search input:hover { border-color: #D3DCEA; }
.search input:focus {
    background: var(--card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(27, 79, 216, .12);
}
/* Twitter blue — same hex as the .s-tw social button in the footer. */
.search-go {
    position: absolute; top: 4px; right: 4px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    font-size: 11.5px;
    color: #fff; background: #1DA1F2;
    border-radius: 50%;
    transition: background .15s ease, transform .15s ease;
}
.search-go:hover { background: #1A8CD8; transform: scale(1.06); }

.hdr-act { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.ico {
    position: relative;
    width: 42px; height: 42px; border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-size: 19px; color: var(--muted);
}
.ico:hover { background: var(--brand-sf); color: var(--brand); }
.ico--cart { color: var(--brand); font-size: 21px; }
.cart-badge {
    position: absolute; top: 1px; right: 1px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 700; color: #fff;
    background: var(--ink); border-radius: var(--pill);
}
/* ---- header profile ---- */
.profile { position: relative; flex: none; margin-left: 4px; }
.profile-btn {
    display: flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 10px;
    border-radius: var(--r-sm);
}
.profile-btn:hover { background: var(--brand-sf); }
.profile-ava {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 700; color: #fff;
    background: linear-gradient(140deg, var(--brand) 0%, #3B82F6 100%);
}
.profile-ava i { font-size: 14px; }
.profile-ava--lg { width: 42px; height: 42px; }
.profile-ava--lg i { font-size: 18px; }
.profile-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.profile-txt small { font-size: 10.5px; color: var(--muted); }
.profile-txt b { font-size: 13px; font-weight: 600; color: var(--ink); }
.profile-caret { font-size: 10px; color: var(--muted); transition: transform .18s ease; }
.profile-caret.open { transform: rotate(180deg); }

/* below the header's own z-index (40) so the menu inside it stays clickable */
.profile-backdrop { position: fixed; inset: 0; z-index: 39; }

.profile-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
    width: 258px; padding: 6px;
    background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-md);
}
.profile-menu-head {
    display: flex; align-items: center; gap: 11px;
    padding: 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line-2);
}
.profile-menu-head > div { min-width: 0; }
.profile-menu-head b { display: block; font-size: 13.5px; font-weight: 600; }
.profile-menu-head small { display: block; font-size: 11.5px; color: var(--muted); word-break: break-word; }
.profile-role {
    display: inline-block; margin-top: 6px; padding: 2px 9px;
    font-size: 10.5px; font-weight: 600;
    color: var(--brand); background: var(--brand-sf); border-radius: var(--pill);
}
.profile-menu a, .profile-menu button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 12px; border-radius: var(--r-sm);
    font-size: 13.5px; color: var(--ink-2); text-align: left;
}
.profile-menu i { width: 16px; font-size: 13px; }
.profile-menu a:hover { background: var(--brand-sf); color: var(--brand); }
.profile-menu .logout:hover { background: #FEF2F2; color: var(--red); }

/* ══════════════════════════ BUTTONS ══════════════════════════ */
/* Every rule below is scoped with .shop on purpose. The `.shop button` reset
   above is (0,1,1) and would otherwise out-specify a bare `.btn-primary`
   (0,1,0) and strip the background off every <button> — anchors styled as
   buttons looked fine, <button>s rendered as plain text. */
.shop .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 42px; padding: 0 20px;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    border: 1px solid transparent; border-radius: var(--r-sm);
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.shop .btn:active { transform: translateY(1px); }

.shop .btn-primary { background: var(--brand); color: #fff; }
.shop .btn-primary:hover { background: var(--brand-dk); box-shadow: 0 5px 14px rgba(27, 79, 216, .34); }
.shop .btn-primary:disabled { opacity: .6; cursor: default; box-shadow: none; }

.shop .btn-line { border-color: var(--line); background: var(--card); color: var(--ink); }
.shop .btn-line:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-sf); }

/* Product-card "Add to cart": a plain bordered button with an orange label, so
   it still reads as a button without colouring the whole card blue. */
.shop .btn-add { border-color: #EBD9BB; background: var(--card); color: #EA580C; font-weight: 600; }
.shop .btn-add:hover { border-color: #EA580C; background: #FFF7ED; color: #C2410C; box-shadow: 0 4px 12px rgba(234, 88, 12, .18); }

.shop .btn-dark { background: var(--ink); color: #fff; }
.shop .btn-dark:hover { background: #0D1830; box-shadow: 0 5px 14px rgba(22, 35, 63, .3); }

/* Banner "Order Now" — bKash magenta (same hex as the .pay--bkash label). */
.shop .btn-order { background: #E2136E; color: #fff; }
.shop .btn-order:hover { background: #BE0F5C; box-shadow: 0 5px 14px rgba(226, 19, 110, .38); }

/* "Call to order" — Twitter blue, matching the search button. */
.shop .btn-call { background: #1DA1F2; color: #fff; }
.shop .btn-call:hover { background: #1A8CD8; box-shadow: 0 5px 14px rgba(29, 161, 242, .38); }

.shop .btn-wa { background: #25D366; color: #fff; }
.shop .btn-wa:hover { background: #1EB855; box-shadow: 0 5px 14px rgba(37, 211, 102, .34); }

.shop .btn-block { width: 100%; }
.shop .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* ══════════════════════════ SECTION SHELL ══════════════════════════ */
.section { padding: 13px 0; }
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px 20px 22px;
}
/* Same slim label as .cart-panel-head, so every section on the page carries an
   identically sized heading rule instead of a big display line. */
.panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 12px; padding-bottom: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}
.panel-head h2 {
    font-size: 15px; font-weight: 600; line-height: 1.2;
    text-transform: uppercase; letter-spacing: .06em;
}
.panel-head p { color: var(--muted); font-size: 12.5px; }
.panel-head .link { color: var(--brand); font-size: 12.5px; font-weight: 500; }
.panel-head .link:hover { text-decoration: underline; }

/* ══════════════════════════ HERO ══════════════════════════ */
.hero-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px; padding-top: 22px;
}

.banner {
    position: relative; overflow: hidden;
    min-height: 310px;
    border-radius: var(--r);
    background:
        radial-gradient(120% 90% at 88% 15%, #FBEFCE 0%, rgba(251, 239, 206, 0) 55%),
        linear-gradient(135deg, #FDF8EC 0%, #F7EBD2 55%, #F2E0BC 100%);
    display: flex; align-items: center;
}
.banner::before,
.banner::after {
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, .45); pointer-events: none;
}
.banner::before { width: 260px; height: 260px; top: -90px; left: -60px; }
.banner::after { width: 180px; height: 180px; bottom: -70px; left: 32%; background: rgba(233, 185, 63, .16); }

.banner-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 18px;
    width: 100%; padding: 30px 34px;
}
.banner-eyebrow {
    display: inline-block; margin-bottom: 12px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: #A9791F;
}
.banner h1 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; color: #5A3B0E; line-height: 1.12; }
.banner h1 em { font-style: normal; color: #B07A12; }
.banner-off { margin-top: 12px; font-size: 22px; font-weight: 600; color: #6B4A14; }
.banner-sub { margin-top: 4px; font-size: 14px; color: #8A6B33; }
.banner-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* Sits over the bottom-right of the artwork now that it fills the band, so it
   carries its own backing to stay readable on any uploaded image. */
.banner-tc {
    position: absolute; right: 16px; bottom: 12px; z-index: 2;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(253, 248, 236, .82);
    font-size: 10.5px; color: #A98C55;
}
/* Drawn-jar fallback, shown only when the admin has published no banner. */
.banner-art { display: grid; place-items: center; }

/* ---- admin-published hero banner ----
   The image fills the whole card instead of taking a column of its own, so the
   card keeps the height it always had and the headline sits on top of the photo. */
.banner-bg { position: absolute; inset: 0; z-index: 0; }
.banner-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Fades the photo out under the headline, left to right: the text side stays
   readable whatever gets uploaded, while the right of the image shows clean. */
.banner-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(253, 248, 236, .94) 0%,
        rgba(253, 248, 236, .80) 34%,
        rgba(253, 248, 236, .30) 60%,
        rgba(253, 248, 236, 0) 100%);
}

/* The decorative blobs are for the plain gradient card; over a photo they read
   as smudges. */
.banner--photo::before,
.banner--photo::after { display: none; }

/* Whole-card click target when the admin set a redirect URL. Sits below
   .banner-inner (z-index 1), so the CTA buttons still take their own clicks. */
.banner-link { position: absolute; inset: 0; z-index: 0; }

.promo {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 22px 20px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.promo-mark {
    width: 54px; height: 54px; border-radius: 16px;
    display: grid; place-items: center; margin-bottom: 12px;
    font-size: 24px; color: #fff;
    background: linear-gradient(140deg, var(--brand) 0%, #3B82F6 100%);
}
.promo h3 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.promo-phone { margin: 8px 0 16px; font-size: 24px; font-weight: 700; color: var(--brand); letter-spacing: -.01em; }
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: 16px; }
.promo-cell {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 12px 8px; font-size: 11.5px; font-weight: 500; color: var(--ink-2);
    line-height: 1.35;
}
.promo-cell i { display: block; font-size: 17px; color: var(--brand); margin-bottom: 7px; }
.promo-actions { display: grid; gap: 8px; width: 100%; }

/* ══════════════════════════ FEATURE STRIP ══════════════════════════ */
.strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    margin-top: 14px;
}
.strip-item {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border-left: 1px solid var(--line-2);
}
.strip-item:first-child { border-left: 0; }
.strip-ico {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 16px; color: var(--brand); background: var(--brand-sf);
}
.strip-item b { display: block; font-size: 14px; font-weight: 600; }
.strip-item small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ══════════════════════════ PRODUCT GRID ══════════════════════════ */
.products {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 13px;
}
.pc {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.pc:hover { border-color: #C9D8F2; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pc--feature { border-color: var(--brand); }
/* Jar picked in "Shop by size". Listed after --feature so a selected best
   seller shows the selection, not the static highlight. */
.pc--active {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(27, 79, 216, .16);
}
.pc--active:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 79, 216, .16), var(--shadow-md); }

.pc-flag, .pc-disc {
    position: absolute; top: 10px; z-index: 2;
    height: 22px; padding: 0 9px;
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; border-radius: 5px;
}
.pc-flag { left: 10px; color: #fff; }
.pc-flag--gold { background: var(--orange); }
.pc-flag--green { background: var(--green); }
.pc-disc { right: 10px; color: #fff; background: var(--red); }

.pc-img {
    height: 168px; display: grid; place-items: center;
    background: linear-gradient(180deg, #FCFCFD 0%, #F4F6FA 100%);
    border-bottom: 1px solid var(--line-2);
    padding: 10px;
}
.pc-body { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.pc-name { font-size: 14.5px; font-weight: 600; color: var(--brand); }
.pc-name:hover { text-decoration: underline; }
.pc-name-bn { font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.pc-cat { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* The variant this card sells (250g, 500g …). Every size is its own card, so
   this line is what tells two otherwise identical tiles apart — it carries the
   weight the product name would in a catalog without variants. */
.pc-variant {
    display: inline-block; align-self: flex-start;
    margin-top: 5px; padding: 2px 9px;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: linear-gradient(150deg, #FDF6E6 0%, #F6E7C6 100%);
    font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em;
}

.pc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.pc-price b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pc-price del { font-size: 12.5px; color: var(--muted-2); }
.pc-unit { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pc-save { font-size: 11.5px; font-weight: 600; color: var(--green); margin-top: 4px; }

.pc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; }
.pc-foot .btn { flex: 1; }

.stepper {
    display: inline-flex; align-items: center; flex: none;
    height: 30px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    overflow: hidden;
}
.stepper button {
    width: 26px; height: 100%;
    display: grid; place-items: center;
    font-size: 11px; color: var(--ink-2);
}
.stepper button:hover { background: var(--brand-sf); color: var(--brand); }
.stepper span {
    align-self: stretch;                 /* height-independent centring, so the
                                            wide variant below can be taller */
    display: grid; place-items: center;
    min-width: 26px; padding: 0 6px;
    font-size: 13px; font-weight: 600;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}

/* In-cart state of a product card: the stepper replaces the Add button and
   edits the cart itself, which is what keeps the header badge in step.
   Keeps the neutral stepper palette — only the width and label change. */
.stepper--wide { width: 100%; height: 36px; }
.stepper--wide button { width: 38px; font-size: 12px; }
.stepper--wide span { flex: 1; font-size: 12.5px; }

.empty-search {
    grid-column: 1 / -1;
    text-align: center; padding: 40px 0; color: var(--muted);
}
.empty-search i { font-size: 30px; color: var(--muted-2); margin-bottom: 12px; }

/* ══════════════════════════ PROCESS STEPS ══════════════════════════ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step {
    border: 1px solid var(--line); border-radius: var(--r);
    padding: 20px 18px;
    background: linear-gradient(180deg, #FCFDFF 0%, #F7F9FC 100%);
}
.step-no {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; margin-bottom: 12px;
    font-size: 13px; font-weight: 700; color: var(--brand); background: var(--brand-sf);
}
.step h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ══════════════════════════ REVIEWS ══════════════════════════ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px; }
.stars { color: var(--orange); font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.review > p { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.review-by { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: 15px; font-weight: 600; color: #fff;
    background: linear-gradient(140deg, var(--brand) 0%, #3B82F6 100%);
}
.review-by b { display: block; font-size: 13.5px; font-weight: 600; }
.review-by small { display: block; font-size: 12px; color: var(--muted); }

/* ══════════════════════════ FAQ ══════════════════════════ */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 18px;
    font-size: 14.5px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 12px; color: var(--muted); transition: transform .18s ease;
}
.faq details[open] summary { color: var(--brand); }
.faq details[open] summary::after { transform: rotate(180deg); color: var(--brand); }
.faq details p { padding: 0 18px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* ══════════════════════════ CTA BAND ══════════════════════════ */
/* Frosted-glass panel floating on a navy backdrop. The two colour blobs below
   sit *behind* .cta-inner on purpose — they are what the blur refracts, without
   them the glass has nothing to show and reads as flat grey. */
.cta-band {
    position: relative; overflow: hidden;
    border-radius: var(--r);
    padding: 13px;
    background: linear-gradient(120deg, #EAF6FE 0%, #C7E6FB 55%, #A8D8F8 100%);
    color: #0C4A6E;
}
.cta-band::before, .cta-band::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.cta-band::before {
    width: 320px; height: 320px; top: -140px; left: 6%;
    background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%);
}
.cta-band::after {
    width: 380px; height: 380px; bottom: -190px; right: 3%;
    background: radial-gradient(circle, rgba(29, 161, 242, .55) 0%, rgba(29, 161, 242, 0) 70%);
}

.cta-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px; flex-wrap: wrap; padding: 26px 28px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 18px 40px rgba(29, 161, 242, .2);
}
/* Firefox with backdrop-filter disabled, older Safari: fall back to a solid tint
   so the copy keeps its contrast instead of sitting on near-transparent white. */
@supports not (backdrop-filter: blur(1px)) {
    .cta-inner { background: rgba(255, 255, 255, .82); }
}
.cta-inner h2 { color: #0C4A6E; font-size: 24px; font-weight: 600; }
.cta-inner p { color: rgba(12, 74, 110, .78); font-size: 14px; margin-top: 5px; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-actions .btn-light { background: #fff; color: #0C4A6E; font-weight: 600; }
.cta-actions .btn-light:hover { background: #E4F3FE; box-shadow: 0 5px 14px rgba(29, 161, 242, .28); }

/* ══════════════════════════ FOOTER ══════════════════════════ */
.footer { background: var(--card); border-top: 1px solid var(--line); margin-top: 26px; }
.footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 34px; padding: 44px 0 34px;
}
.footer-about p { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin: 14px 0 18px; max-width: 420px; }
.socials { display: flex; gap: 10px; }
.socials a {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 16px; color: #fff;
}
.socials .s-fb { background: #1877F2; }
.socials .s-tw { background: #1DA1F2; }
.socials .s-ig { background: linear-gradient(45deg, #F09433 0%, #DC2743 50%, #BC1888 100%); }
.socials .s-yt { background: #FF0000; }
.socials .s-wa { background: #25D366; }
.socials a:hover { opacity: .88; }

.footer-col h4 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13.5px; color: var(--ink-2); padding: 6px 0; }
.footer-col a:hover { color: var(--brand); }
.footer-col p { font-size: 13.5px; color: var(--ink-2); line-height: 2; }

.footer-pay { border-top: 1px solid var(--line-2); padding: 22px 0 26px; }
.footer-pay > span { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; }
.pays { display: flex; flex-wrap: wrap; gap: 10px; }
.pay {
    height: 36px; padding: 0 14px;
    display: inline-flex; align-items: center;
    font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
    background: var(--card); border: 1px solid var(--line); border-radius: 6px;
}
.pay--bkash { color: #E2136E; }
.pay--nagad { color: #EE4B23; }
.pay--ssl { color: #1A4C8B; }
.pay--cod { color: var(--green); }
.pay--upay { color: #E8A33D; }

.footer-note {
    background: #F1F5F9; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--muted);
}
.footer-note-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; padding: 18px 0;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a:hover { color: var(--brand); }
.dev-by { display: inline-flex; align-items: center; gap: 8px; }
.dev-by i { color: var(--brand); font-size: 15px; }
.dev-by b { color: var(--ink); font-weight: 600; }

/* ══════════════════════════ CART SECTION ══════════════════════════ */
/* The cart used to slide in from the right. It is now a normal panel sitting
   under the product grid, so cart / checkout / confirmation all flow in the
   page. */
/* Slim header bar: a small wide-tracked label instead of a big display heading,
   so the cart lines start higher and more of the cart fits in one view. */
.cart-panel-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.cart-panel-head h2 {
    font-size: 15px; font-weight: 600; line-height: 1.2;
    text-transform: uppercase; letter-spacing: .06em;
}
.cart-panel-head .count { font-size: 12.5px; color: var(--muted); }
.drawer-x {
    width: 28px; height: 28px; margin: -2px 0; border-radius: var(--r-sm);
    display: grid; place-items: center; color: var(--muted); font-size: 14px;
}
.drawer-x:hover { background: var(--brand-sf); color: var(--brand); }

/* Cart and checkout both run as two columns: the lines / the form on the left,
   Order Summary + the CTA parked on the right. The summary sticks so it stays
   in view while a long list scrolls past. */
.cart-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px; align-items: start;
}
.cart-grid--solo { grid-template-columns: minmax(0, 1fr); }
.cart-col { min-width: 0; }
.cart-aside { position: sticky; top: 96px; }

/* Only the confirmation screen still runs as one centred column. */
.drawer-body { max-width: 760px; margin: 0 auto; }
.drawer-foot {
    max-width: 760px; margin: 18px auto 0;
    border-top: 1px solid var(--line); padding-top: 16px;
}

.seller-head {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    background: #F8FAFC; border: 1px solid var(--line);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    font-size: 13px; font-weight: 600;
}
.seller-head i { color: var(--muted); font-size: 13px; }
.seller-tag {
    margin-left: auto; padding: 3px 9px;
    font-size: 10.5px; font-weight: 500; color: var(--muted);
    background: #EEF2F7; border-radius: var(--pill);
}
.cart-card {
    background: var(--card); border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    margin-bottom: 14px;
}
/* One row per line: thumb · name · unit price · stepper · line total · bin.
   Everything sits on a single baseline so the list stays short. */
.cart-line {
    display: grid; align-items: center;
    grid-template-columns: 46px minmax(0, 1fr) auto auto 84px 32px;
    gap: 12px; padding: 9px 12px;
    border-bottom: 1px solid var(--line-2);
}
.cart-line:last-child { border-bottom: 0; }
.cart-thumb {
    width: 46px; height: 46px; border-radius: 6px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--thumb); border: 1px solid var(--line-2);
}
.cart-line-main { min-width: 0; }
.cart-line-main b {
    display: block; font-size: 13.5px; font-weight: 600; color: var(--brand);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-line-main small { display: block; font-size: 11.5px; color: var(--muted); }
.cart-line-price { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.cart-line-price del { font-size: 11.5px; font-weight: 400; color: var(--muted-2); margin-left: 5px; }
.line-del {
    width: 32px; height: 32px; border-radius: 6px;
    display: grid; place-items: center;
    font-size: 13px; color: var(--muted-2);
}
.line-del:hover { background: #FEF2F2; color: var(--red); }
.line-total { font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }

.deliv-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-top: 1px solid var(--line-2);
    font-size: 12.5px; color: var(--muted);
}
.deliv-row .free { margin-left: auto; font-weight: 600; color: var(--green); }
.deliv-row .fee { margin-left: auto; font-weight: 600; color: var(--ink); }

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty i { font-size: 34px; color: var(--muted-2); margin-bottom: 12px; }
.empty p { font-size: 14px; }

/* ---- order summary ---- */
.summary-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 14px;
}
.summary-card > h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }
.totals { display: grid; gap: 9px; }
.totals > div { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); }
.totals .free { color: var(--green); font-weight: 600; }
.ship-note {
    background: var(--green-sf); border: 1px solid #DCFCE7; border-radius: 6px;
    padding: 8px 10px; font-size: 12px; color: #15803D;
}
.grand {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: 15px; font-weight: 600;
}
.grand b { font-size: 19px; font-weight: 700; }
.drawer-foot .btn-primary, .cart-aside .btn-primary { margin-top: 14px; }
.pay-note { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 10px; }

/* ---- checkout form ---- */
/* Two fields per row, textareas and the area picker across both. */
.form-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field--full { grid-column: 1 / -1; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field label span { color: var(--red); }
.field input, .field textarea {
    width: 100%; padding: 10px 13px;
    font: inherit; font-size: 13.5px; color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    outline: none; resize: vertical;
}
.field textarea { min-height: 62px; }
.field input:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 79, 216, .1); }
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.radio-row label {
    display: flex; align-items: center; gap: 8px; margin: 0;
    padding: 10px 11px; cursor: pointer;
    font-size: 12.5px; font-weight: 500;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.radio-row label.sel { border-color: var(--brand); background: var(--brand-sf); color: var(--brand); }
.radio-row input { accent-color: var(--brand); }
.form-err {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 13px; margin-bottom: 14px;
    font-size: 13px; color: #B91C1C;
    background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--r-sm);
}

/* ---- success ---- */
.success { text-align: center; padding: 34px 16px; }
.success .tick {
    width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px;
    display: grid; place-items: center;
    font-size: 27px; color: #fff; background: var(--green);
}
.success h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.success p { font-size: 13.5px; color: var(--muted); }
.order-code {
    display: inline-block; margin: 16px 0 12px;
    padding: 9px 16px;
    font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--brand);
    background: var(--brand-sf); border-radius: var(--r-sm);
}

/* ══════════════════════════ TOAST ══════════════════════════ */
.toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 70;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    font-size: 13.5px; color: #fff; background: var(--ink);
    border-radius: var(--pill); box-shadow: var(--shadow-lg);
    transform: translate(-50%, 20px); opacity: 0; visibility: hidden;
    transition: .22s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast i { color: #4ADE80; }

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width: 1100px) {
    .hero-row { grid-template-columns: 1fr; }
    .promo { flex-direction: row; align-items: center; text-align: left; gap: 20px; flex-wrap: wrap; }
    .promo-mark { margin-bottom: 0; }
    .promo-grid { flex: 1; margin-bottom: 0; min-width: 240px; }
    .promo-actions { grid-auto-flow: column; width: auto; }
    .products { grid-template-columns: repeat(3, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .topbar-note { display: none; }
    .hdr-inner { gap: 12px; min-height: 60px; }
    .search { max-width: 320px; }
    .search input { height: 36px; padding: 0 40px 0 33px; }
    .search-go { top: 3px; }
    /* Follows the shorter header bar at this width. */
    .logo-img { height: 44px; max-width: 170px; }
    .strip { grid-template-columns: 1fr 1fr; }
    .strip-item:nth-child(3) { border-left: 0; }
    .strip-item:nth-child(n+3) { border-top: 1px solid var(--line-2); }
    .reviews { grid-template-columns: 1fr; }
    /* Not enough room for a 330px sidebar: Order Summary drops under the list. */
    .cart-grid { grid-template-columns: minmax(0, 1fr); }
    .cart-aside { position: static; max-width: 420px; margin-left: auto; }
    .banner-inner { grid-template-columns: 1fr; }
    /* Drops the decorative jar only. A published banner is the card's background,
       so it keeps showing here — and the scrim goes near-opaque because there is
       no room for the photo to breathe beside the text at this width. */
    .banner-art { display: none; }
    .banner-scrim {
        background: linear-gradient(90deg,
            rgba(253, 248, 236, .94) 0%,
            rgba(253, 248, 236, .86) 60%,
            rgba(253, 248, 236, .72) 100%);
    }
}

@media (max-width: 640px) {
    .wrap { padding: 0 14px; }
    .logo { font-size: 21px; }
    .profile-txt { display: none; }    
    /* avatar only on narrow screens */
    .profile-btn { padding: 0 6px; }
    /* minmax(0, …) so a long product name wraps instead of widening a column. */
    .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel { padding: 16px 14px 18px; }
    /* Already slim at full width - just tightens a touch here. */
    .panel-head h2, .cart-panel-head h2 { font-size: 14px; }
    .steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-note-in { justify-content: center; text-align: center; }
    .cta-inner { padding: 22px 20px; }
    .cart-aside { max-width: none; }
    .form-card { grid-template-columns: 1fr; }
    /* The one-line row does not fit a phone, so it folds: name + bin, then the
       unit price, then the stepper with the line total. */
    .cart-line {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb main  del"
            "thumb price price"
            ".     step  total";
        gap: 5px 10px; padding: 11px 12px;
    }
    .cart-thumb { grid-area: thumb; align-self: start; }
    .cart-line-main { grid-area: main; }
    .cart-line-price { grid-area: price; }
    .cart-line .stepper { grid-area: step; justify-self: start; }
    .line-total { grid-area: total; align-self: center; }
    .line-del { grid-area: del; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DYNAMIC CATALOG
   Everything below supports the admin-driven storefront: real product photos
   (with the drawn jar kept as the fallback), the loading skeleton, and the
   quick-view panel backed by api/v1/GetEcomProductDetails.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- real photos in the places that used to hold only the drawn jar ---- */
.shop .pc-photo { max-width: 100%; max-height: 148px; object-fit: contain; }
.shop .cart-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); }

/* The card image and title are buttons now (they open quick view), so the
   button chrome has to be stripped back to what the <div>/<a> looked like. */
.shop .pc-img--btn {
    width: 100%; border: 0; border-bottom: 1px solid var(--line-2);
    cursor: pointer; font: inherit;
}
.shop .pc-name--btn {
    background: none; border: 0; padding: 0; text-align: left;
    font: inherit; font-size: 14.5px; font-weight: 600;
    color: var(--brand); cursor: pointer;
}
.shop .pc-name--btn:hover { text-decoration: underline; }

.shop .pc-flag--grey { background: var(--muted); }

/* ---- loading skeleton ---- */
.shop .pc--skeleton { pointer-events: none; }
.shop .sk {
    display: block; border-radius: 6px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
}
.shop .sk-img { width: 100%; height: 100%; border-radius: 0; }
.shop .sk-line { height: 12px; margin-bottom: 9px; }
.shop .sk-line--short { width: 60%; }
.shop .sk-line--price { width: 40%; height: 18px; margin-top: 6px; }
@keyframes sk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .shop .sk { animation: none; }
}

/* ---- quick view ---- */
/* Dim behind the dialog. The cart no longer uses this — it is a panel in the
   page now — so the only thing that opens over the shelf is the quick view. */
.overlay {
    position: fixed; inset: 0; z-index: 59;
    background: rgba(15, 23, 42, .45);
    opacity: 0; visibility: hidden; transition: .22s ease;
}
.overlay.open { opacity: 1; visibility: visible; }

.shop .qv {
    position: fixed; z-index: 60;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(940px, calc(100vw - 32px));
    max-height: calc(100vh - 48px); overflow-y: auto;
    background: var(--card); border-radius: var(--r-lg);
    box-shadow: 0 24px 64px rgba(16, 24, 40, .24);
    padding: 22px;
}
.shop .qv-x {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--card);
    color: var(--muted); cursor: pointer;
}
.shop .qv-x:hover { color: var(--ink); border-color: var(--muted-2); }

.shop .qv-loading {
    display: grid; place-items: center; gap: 10px;
    min-height: 220px; color: var(--muted); font-size: 14px;
}

.shop .qv-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; }

.shop .qv-main {
    height: 300px; display: grid; place-items: center;
    background: linear-gradient(180deg, #FCFCFD 0%, #F4F6FA 100%);
    border: 1px solid var(--line-2); border-radius: var(--r);
    padding: 12px;
}
.shop .qv-main img { max-width: 100%; max-height: 100%; object-fit: contain; }

.shop .qv-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.shop .qv-thumb {
    width: 58px; height: 58px; padding: 4px; cursor: pointer;
    background: var(--thumb); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.shop .qv-thumb.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(27, 79, 216, .16); }
.shop .qv-thumb img { width: 100%; height: 100%; object-fit: contain; }

.shop .qv-info h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.shop .qv-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; }
.shop .qv-meta span {
    padding: 3px 9px; border-radius: var(--pill);
    background: var(--thumb); color: var(--muted);
}
.shop .qv-meta .in  { background: var(--green-sf); color: var(--green); }
.shop .qv-meta .out { background: #FEF2F2; color: var(--red); }

.shop .qv-price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.shop .qv-price b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.shop .qv-price del { font-size: 14px; color: var(--muted-2); }
.shop .qv-off {
    font-size: 12px; font-weight: 600; color: #fff;
    background: var(--red); border-radius: 5px; padding: 2px 7px;
}

.shop .qv-attr { margin-top: 16px; }
.shop .qv-attr label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.shop .qv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shop .qv-chip {
    padding: 7px 14px; cursor: pointer; font: inherit; font-size: 13px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.shop .qv-chip:hover:not(:disabled) { border-color: var(--brand); }
.shop .qv-chip.sel { border-color: var(--brand); background: var(--brand-sf); color: var(--brand); font-weight: 600; }
.shop .qv-chip:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.shop .qv-short { font-size: 13.5px; color: var(--ink-2); margin-top: 14px; line-height: 1.6; }
.shop .qv-desc { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.65; }
.shop .qv-desc img { max-width: 100%; height: auto; }

.shop .qv-spec { margin-top: 16px; }
.shop .qv-spec h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.shop .qv-spec dl { display: grid; gap: 4px; font-size: 12.5px; }
.shop .qv-spec dl > div { display: flex; gap: 8px; }
.shop .qv-spec dt { min-width: 130px; color: var(--muted); }
.shop .qv-spec dd { color: var(--ink-2); }

.shop .qv-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.shop .qv-foot .btn-primary { flex: 1; }

.shop .qv-similar { margin-top: 26px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.shop .qv-similar h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.shop .qv-similar-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.shop .qv-similar-card {
    flex: none; width: 128px; padding: 10px; cursor: pointer; text-align: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.shop .qv-similar-card:hover { border-color: var(--brand); }
.shop .qv-similar-card b { display: block; font-size: 12px; font-weight: 500; margin-top: 6px; line-height: 1.35; }
.shop .qv-similar-card small { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.shop .qv-similar-card .pc-photo { max-height: 74px; }

@media (max-width: 860px) {
    .shop .qv { padding: 18px; }
    .shop .qv-grid { grid-template-columns: 1fr; gap: 18px; }
    .shop .qv-main { height: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — PHONES & SMALL DEVICES
   Kept at the end of the file on purpose: the quick-view and dynamic-catalog
   rules above are written as ".shop .qv…", so anything that has to beat them
   needs the same .shop prefix *and* a later source position.

   Ladder:  860 tablet · 640 large phone · 520 phone · 400 small phone
            360 very small (SE / Fold cover) · short landscape · touch devices
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------- <= 860px --*/
@media (max-width: 860px) {
    /* The note beside them is hidden at this width, so the links take the row. */
    .topbar-inner { justify-content: center; }
    .topbar-links { flex-wrap: wrap; justify-content: center; gap: 14px; }

    .cta-inner { padding: 22px 24px; gap: 18px; }
    .banner-inner { padding: 26px 24px; }
    .shop .qv-spec dt { min-width: 108px; }
}

/* ---------------------------------------------------------------- <= 640px --*/
@media (max-width: 640px) {
    .shop section[id], .shop [id="top"] { scroll-margin-top: 84px; }
    .section { padding: 10px 0; }
    .hero-row { padding-top: 14px; gap: 14px; }

    /* Hero */
    .banner { min-height: 220px; }
    .banner-inner { padding: 22px 18px; }
    .banner h1 { font-size: clamp(24px, 7vw, 32px); }
    .banner-off { font-size: 18px; margin-top: 9px; }
    .banner-sub { font-size: 13px; }
    .banner-cta { margin-top: 15px; gap: 8px; }
    .banner-cta .btn { flex: 1 1 160px; }

    /* Promo card — it was turned into a row at 1100px; back to a column here. */
    .promo { flex-direction: column; align-items: center; text-align: center; padding: 18px 16px; }
    .promo-mark { margin-bottom: 10px; }
    .promo-grid { margin-bottom: 14px; }
    .promo-actions { grid-auto-flow: row; width: 100%; }

    .strip-item { padding: 14px 14px; gap: 11px; }
    .strip-item b { font-size: 13px; }
    .strip-item small { font-size: 11px; }

    /* Product grid */
    .products { gap: 10px; }
    .pc-img { height: 148px; padding: 8px; }
    .shop .pc-photo { max-height: 128px; }
    .pc-body { padding: 11px 11px 13px; }
    .pc-name, .shop .pc-name--btn { font-size: 13.5px; }
    .pc-price b { font-size: 17px; }
    /* Stepper + button no longer fit side by side on a half-width card. */
    .pc-foot { flex-direction: column; align-items: stretch; gap: 7px; padding-top: 11px; }

    .steps { gap: 12px; }
    .step { padding: 16px 15px; }
    .review { padding: 16px 15px; }
    .faq summary { min-height: 46px; }

    /* Cart / checkout */
    .summary-card { padding: 12px; }
    .grand b { font-size: 17px; }
    .drawer-foot { margin-top: 14px; padding-top: 13px; }
    /* iOS Safari zooms the page when a focused field is under 16px. */
    .field input, .field textarea, .search input { font-size: 16px; }
    .field textarea { min-height: 74px; }

    /* Call-to-action band */
    .cta-inner { flex-direction: column; align-items: stretch; padding: 20px 16px; gap: 14px; }
    .cta-inner h2 { font-size: 19px; }
    .cta-inner p { font-size: 13px; }
    .cta-actions { width: 100%; }
    .cta-actions .btn { flex: 1 1 140px; }

    /* Footer */
    .footer { margin-top: 18px; }
    .footer-col h4 { font-size: 15px; margin-bottom: 10px; }
    .footer-pay { padding: 18px 0 20px; }
    .footer-legal { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }

    /* Toast spans the screen instead of being centred by a transform. */
    .toast {
        left: 14px; right: 14px; bottom: 16px;
        justify-content: center; text-align: left;
        transform: translate(0, 20px);
    }
    .toast.show { transform: translate(0, 0); }

    /* Quick view */
    .shop .qv {
        width: calc(100vw - 20px); max-height: calc(100dvh - 24px);
        padding: 16px; border-radius: 14px;
    }
    .shop .qv-x { top: 9px; right: 9px; width: 30px; height: 30px; }
    .shop .qv-main { height: 210px; }
    .shop .qv-thumb { width: 50px; height: 50px; }
    .shop .qv-info h3 { font-size: 17px; padding-right: 34px; }
    .shop .qv-price b { font-size: 22px; }
    .shop .qv-foot { flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .shop .qv-foot .btn-primary { flex: 1 1 100%; order: 2; }
    /* Label over value — a 130px label column leaves nothing for the value. */
    .shop .qv-spec dl > div { flex-direction: column; gap: 1px; }
    .shop .qv-spec dt { min-width: 0; }
    .shop .qv-similar { margin-top: 20px; padding-top: 14px; }
    .shop .qv-similar-row {
        gap: 10px; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .shop .qv-similar-card { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- <= 520px --*/
@media (max-width: 520px) {
    .wrap { padding: 0 12px; }
    .topbar-links { gap: 10px; font-size: 11.5px; }

    /* Header stays a single short row: the phone lives in the top bar and in
       the hero, so its icon is the one thing that can go. */
    .hdr-inner { gap: 8px; min-height: 54px; }
    .hdr-act .ico[href^="tel:"] { display: none; }
    .logo { font-size: 18px; }
    .logo-dot { width: 5px; height: 5px; margin-top: 4px; }
    .logo-img { height: 34px; max-width: 118px; }
    .search { max-width: none; }
    .search input { height: 34px; padding: 0 34px 0 30px; }
    .search-ico { left: 11px; font-size: 11.5px; }
    .search-go { width: 26px; height: 26px; top: 4px; right: 4px; font-size: 10.5px; }
    .ico { width: 36px; height: 36px; font-size: 17px; }
    .ico--cart { font-size: 19px; }
    .profile { margin-left: 0; }
    .profile-menu { width: min(260px, calc(100vw - 24px)); }

    .panel { padding: 14px 12px 16px; }
    .products { gap: 9px; }
    .pc-img { height: 136px; }
    .shop .pc-photo { max-height: 118px; }
    .pc-name-bn { font-size: 12px; }
    .shop .btn { height: 40px; font-size: 13px; }
    .shop .btn-sm { height: 36px; font-size: 12.5px; padding: 0 12px; }

    /* One column reads better than two cramped ones at this width. */
    .radio-row { grid-template-columns: 1fr; }
    .cart-line { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .cart-thumb { width: 42px; height: 42px; }
    .cart-aside { max-width: none; margin-left: 0; }

    .shop .qv-main { height: 180px; }
    .shop .qv-chip { padding: 8px 12px; }
}

/* ---------------------------------------------------------------- <= 400px --*/
@media (max-width: 400px) {
    .wrap { padding: 0 10px; }
    .topbar-links { gap: 8px; font-size: 11px; }
    .topbar-links .sep { display: none; }

    .banner-inner { padding: 18px 14px; }
    .banner h1 { font-size: 23px; }
    .banner-cta .btn { flex: 1 1 100%; }
    .promo-phone { font-size: 20px; }
    .promo-cell { padding: 10px 6px; font-size: 11px; }

    /* Four one-line rows beat two cramped columns down here. */
    .strip { grid-template-columns: 1fr; }
    .strip-item { border-left: 0; padding: 11px 12px; }
    .strip-item:nth-child(n+2) { border-top: 1px solid var(--line-2); }

    .products { gap: 8px; }
    .pc-img { height: 122px; }
    .shop .pc-photo { max-height: 104px; }
    .pc-body { padding: 9px 9px 11px; }
    .pc-name, .shop .pc-name--btn { font-size: 12.5px; }
    .pc-cat, .pc-unit, .pc-save { font-size: 10.5px; }
    .pc-price b { font-size: 15.5px; }
    .pc-flag, .pc-disc { font-size: 9.5px; padding: 2px 6px; }

    .cart-line { padding: 10px 10px; gap: 5px 8px; }
    .cart-line-main b { font-size: 12.5px; }
    .line-total { font-size: 13px; }
    .grand b { font-size: 16px; }

    .footer-legal { gap: 6px 12px; font-size: 12px; }
    .pays { gap: 7px; }
    .shop .qv-similar-card { width: 112px; }
}

/* ---------------------------------------------------------------- <= 360px --*/
/* iPhone SE 1st gen, Galaxy Fold cover screen, 360px budget Androids. The shelf
   stays two columns like every other phone width; the cards just get tighter. */
@media (max-width: 360px) {
    .wrap { padding: 0 9px; }
    .hdr-inner { gap: 6px; }
    .logo { font-size: 16px; }
    .logo-img { height: 30px; max-width: 96px; }

    .products { gap: 7px; }
    .pc-img { height: 110px; padding: 6px; }
    .shop .pc-photo { max-height: 96px; }
    .pc-body { padding: 8px 8px 10px; }
    .pc-name, .shop .pc-name--btn { font-size: 12px; }
    .pc-price b { font-size: 14.5px; }
    .shop .pc-foot .btn-sm { font-size: 11.5px; padding: 0 6px; gap: 4px; }

    .panel-head { gap: 8px; }
    .banner h1 { font-size: 21px; }
    .promo-grid { grid-template-columns: 1fr; }
    .shop .qv { padding: 14px; }
    .shop .qv-main { height: 160px; }
}

/* ------------------------------------------------- short landscape phones --*/
/* A phone on its side has ~340px of height: the utility bar and a tall dialog
   would eat most of it. */
@media (max-height: 500px) and (orientation: landscape) {
    .topbar { display: none; }
    .hdr-inner { min-height: 48px; }
    .shop section[id], .shop [id="top"] { scroll-margin-top: 60px; }
    .banner { min-height: 180px; }
    .shop .qv { max-height: calc(100dvh - 16px); padding: 14px; }
    .shop .qv-main { height: 150px; }
    .cart-aside { position: static; }
}

/* --------------------------------------------------------- touch devices --*/
/* Lift and scale animations are built for a cursor; on a touch screen they only
   fire after the tap and read as lag. Tap targets go up to ~34px instead. */
@media (hover: none) {
    .pc:hover { transform: none; box-shadow: none; }
    .search-go:hover { transform: none; }
    .shop .btn:hover { box-shadow: none; }
    .topbar-links a { padding: 3px 0; }
    .footer-col a { padding: 9px 0; }
    .line-del, .drawer-x, .shop .qv-x { min-width: 34px; min-height: 34px; }
}