/* TechnoTaLim Store — default theme. Minimal, fast, ~5KB.
   CSS variables make it themable later from store branding settings. */
:root {
    --ink: #14171f;
    --muted: #6b7280;
    --line: #e7e7e4;
    --bg: #ffffff;
    --soft: #f7f6f3;
    --accent: #4f46e5;
    --accent-ink: #ffffff;
    --radius: 14px;
    --maxw: 1180px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    font-size: 15px;
    overflow-x: clip; /* contain the off-canvas mobile drawer (no h-scroll) */
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Announcement bar (from branding settings) */
.announce { background: var(--ink); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 16px; }

/* Header — CSS custom props (--hd-*) are set inline from settings.header */
.brand-logo { max-height: var(--hd-logo, 30px); width: auto; display: block; }
/* Default header — white/black/grey, search-first.
   Desktop:  logo (left) · search (center) · cart + profile (right)
   Mobile:   logo (left) · cart + menu (right); search/categories/account
             live in the slide-in menu drawer.
   .hdr-collapse is display:contents so search/nav/account flatten into this
   flex row on desktop; cart + burger sit OUTSIDE it so they're always in the
   top bar. */
.site-header {
    background: var(--hd-bg, #ffffff);
    border-bottom: 1px solid var(--line);
}
.site-header.no-border { border-bottom: none; }
.site-header.is-sticky { position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: var(--hd-h, 64px); max-width: 1320px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; flex-shrink: 0; color: var(--hd-text, #14171f); order: 0; }
.brand-mark { max-height: var(--hd-logo, 30px); width: auto; display: block; border-radius: var(--hd-logo-radius, 0); object-fit: cover; }
.brand-text span { color: #9aa3ad; }
/* categories: hidden on desktop (search-first default), shown in the mobile menu */
.nav { display: none; align-items: center; gap: 18px; }
.nav a { color: var(--hd-text, #14171f); font-size: 13.5px; font-weight: 600; white-space: nowrap; padding: 4px 0; }
.nav a:hover { opacity: .62; }
/* centered search — takes the middle on desktop */
.hsearch { display: flex; position: relative; order: 1; flex: 1 1 auto; justify-content: center; min-width: 0; }
.hsearch input {
    height: 40px; width: 100%; max-width: var(--hd-search-w, 520px); padding: 0 16px 0 40px;
    border: 1px solid #e5e7eb; border-radius: 6px;
    background: #f4f4f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;
    font-size: 13.5px; color: #14171f; outline: none; transition: border-color .15s, background-color .15s;
}
.hsearch input::placeholder { color: #9aa3ad; }
.hsearch input:focus { border-color: #14171f; background: #fff; }
/* right-side actions: icon + text label (desktop) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--hd-text, #14171f); flex-shrink: 0; font-size: 13.5px; font-weight: 600; }
.icon-btn:hover { opacity: .6; }
.icon-label { white-space: nowrap; }
.cart-btn { order: 3; border: 1px solid #e5e7eb; border-radius: 6px; height: 40px; padding: 0 12px; }
.acct-btn { order: 4; border: 1px solid #e5e7eb; border-radius: 6px; height: 40px; padding: 0 12px; }
.cart-ico { position: relative; display: inline-flex; }
.cart-count { position: absolute; top: -6px; right: -8px; background: #14171f; color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }
/* header nav buttons (custom items, kind=button) — shown inside the mobile menu */
.nav .hbtn {
    display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
    border-radius: 0; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.nav .hbtn-solid { background: var(--hd-btn, #14171f); color: var(--hd-btn-text, #fff); }
.nav .hbtn-outline { background: transparent; border: 1.5px solid var(--hd-btn, currentColor); color: var(--hd-btn, var(--hd-text, #14171f)); }
.nav .hbtn:hover { opacity: .9; }
/* search suggestions dropdown — moved to <body> + positioned fixed by JS so it
   overlays outside the header (never clipped by it) */
.hsuggest { position: fixed; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.16); overflow: hidden; z-index: 9999; max-height: 64vh; overflow-y: auto; }
.hs-item { display: block; padding: 9px 14px; text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-item + .hs-item { border-top: 1px solid var(--line); }
.hs-item:hover { background: var(--soft); }

/* Product listing grid — EXACT column counts: desktop --cols, tablet --tcols,
   mobile --mcols (all merchant-chosen on the List block). */
/* Breakpoints MUST match the builder canvas + compiled element @media (tablet ≤1024,
   mobile ≤640) — design section and output are required to be pixel-identical. */
.ttproducts { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 30px 22px; }
@media (max-width: 1024px) {
    .ttproducts { grid-template-columns: repeat(var(--tcols, 3), minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 640px) {
    /* phones: 2-up grids read cramped with desktop gaps — tighten globally
       (!important beats each List block's inline desktop gap on mobile only) */
    .ttproducts { grid-template-columns: repeat(var(--mcols, 2), minmax(0, 1fr)); gap: 14px 8px !important; }
}

/* order-page status timeline: steps lit by the On-load blocks */
.tt-tl-on { background: #047857 !important; }
.tt-tl-txt-on { color: #0A1628 !important; }
/* (no hover lift — the box-shadow read as a hard box on transparent cards) */
/* Card image hover-zoom is now a customizable BLOCK ("hover-zoom" in a List's
   On-bind-item) — not global CSS — so merchants control the scale/speed/direction. */
/* Empty bound text in cards (a badge with no label, a missing vendor / compare-at)
   collapses so it never renders an empty coloured box. */
.ttproducts :where(p, h1, h2, h3, h4, h5, h6, del, span):empty { display: none !important; }

/* ── Product filters (Search & filters block) ── */
.ttfilters { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; padding: clamp(12px,3vw,18px); border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ttf-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ttf-label { font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #8a97a6; }
.ttf-ctl { height: 40px; padding: 0 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 11px; background: #fff; font-size: 13.5px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.ttf-ctl:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
select.ttf-ctl { cursor: pointer; padding-right: 30px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8898' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.ttf-search { min-width: clamp(180px, 42vw, 300px); }
.ttf-searchg { flex: 1 1 auto; }
.ttf-stock { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid rgba(0,0,0,.14); border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; }
.ttf-stock input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; }
.ttf-apply { height: 40px; padding: 0 20px; border: none; border-radius: 11px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: opacity .15s; }
.ttf-apply:hover { opacity: .9; }
/* Active/selected chip in a v3 filter sidebar (productsSeed) — the block layer toggles .ttfsel on
   the clicked control (or the bound category pill). Overrides the chip's inline white bg / ink text;
   the pill's label inherits colour so it flips to white too. */
.ttfsel { background: var(--ink, #0A1628) !important; color: #fff !important; border-color: var(--ink, #0A1628) !important; }
/* Products-page checkbox tick — the filter's blocks toggle .tt-cbx-on to fill the box (the ✓ inside
   inherits the colour so it shows only when ticked). !important to beat the tick's inline base. */
.tt-cbx-on { background: var(--ink, #0A1628) !important; border-color: var(--ink, #0A1628) !important; color: #fff !important; }
/* Mobile filter DRAWER (LEGACY — pages published before custom-view drawers): the left filter
   column becomes a fixed slide-in at ≤1024, toggled by .tt-open; a backdrop sits behind it. */
.tt-backdrop { position: fixed; inset: 0; background: rgba(10,22,40,.42); z-index: 199; display: none; }
.tt-backdrop.tt-open { display: block; }
@media (max-width: 1024px) {
  .tt-filter-drawer { position: fixed !important; top: 0 !important; left: 0 !important; height: 100dvh !important; width: min(340px, 88vw) !important; max-width: none !important; transform: translateX(-105%); transition: transform .32s cubic-bezier(.32,.72,0,1); z-index: 200; overflow-y: auto; background: #fff; box-shadow: 0 22px 60px rgba(10,22,40,.3); padding: 20px 18px 30px; }
  .tt-filter-drawer.tt-open { transform: translateX(0); }
}
/* Page-bound elements (cp:/cc: binds — product/category template pages): a field the
   merchant didn't fill for THIS product/category arrives empty and must disappear —
   "show all fields, display:none the missing ones". */
[data-pb]:not(img):empty { display: none !important; } /* imgs are void = always :empty — they collapse only on empty src (below) */
img[data-pb][src=""] { display: none !important; }

/* CUSTOM-VIEW drawer shell — any custom view (kind "view") opened by the "open view … as
   drawer" block. Mechanism only (fixed position, slide, backdrop); the view inside brings
   its own width/background/padding. __ttVD toggles .tt-open (+ .tt-right for side:right). */
.tt-vdrawer-bg { position: fixed; inset: 0; background: rgba(10,22,40,.42); z-index: 199; display: none; }
.tt-vdrawer-bg.tt-open { display: block; }
.tt-vdrawer { position: fixed; top: 0; left: 0; height: 100dvh; max-width: 92vw; transform: translateX(-105%); transition: transform .32s cubic-bezier(.32,.72,0,1); z-index: 200; overflow-y: auto; background: #fff; box-shadow: 0 22px 60px rgba(10,22,40,.3); }
.tt-vdrawer.tt-right { left: auto; right: 0; transform: translateX(105%); }
.tt-vdrawer.tt-open { transform: translateX(0); }
/* center (popup) mode — the same shell opened as a centered modal (image viewer etc.) */
.tt-vdrawer.tt-center { left: 50%; top: 50%; right: auto; height: auto; max-height: 86dvh; max-width: min(92vw, 720px); border-radius: 6px; transform: translate(-50%, -50%) scale(.96); opacity: 0; visibility: hidden; transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .28s, visibility .28s; }
.tt-vdrawer.tt-center.tt-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
/* v3 custom header sticky fix: the compiled header is wrapped in a .ttdoc-hd div
   that contains ONLY the header (short). A position:sticky element can't escape
   its parent's box, so inside that short wrapper the header un-sticks and scrolls
   away. display:contents removes the wrapper's box → the header's containing block
   becomes <body> (the page's scroll container) → sticky top:0 holds down the whole
   page. Scoped CSS (.ttdoc-hd .x) still applies — the class stays in the DOM. */
.ttdoc-hd { display: contents; }

/* custom VARIANT selector (thumbnail + label dropdown; hidden real <select name=variant>
   stays in sync so cart blocks + the variant→image jump keep working) */
.ttvar-btn { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 14px; font-family: inherit; color: #0A1628; background: #fff; cursor: pointer; }
.ttvar-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #E3E8EF; border-radius: 10px; box-shadow: 0 16px 40px rgba(10,22,40,.16); z-index: 120; max-height: 320px; overflow: hidden auto; display: none; }
.ttvar-opt { display: flex; align-items: center; gap: 11px; padding: 9px 12px; cursor: pointer; font-size: 14px; color: #0A1628; }
.ttvar-opt:hover { background: rgba(10,22,40,.04); }
.ttvar-opt.on { background: rgba(10,22,40,.06); }
.ttvar-opt + .ttvar-opt { border-top: 1px solid #F0F2F5; }
.ttvar-ck { color: #0A1628; font-weight: 800; opacity: 0; }
.ttvar-opt.on .ttvar-ck { opacity: 1; }
.ttf-clear { font-size: 12.5px; color: #7a8898; text-decoration: underline; align-self: center; white-space: nowrap; }
/* dual-handle price range slider */
.ttf-price { min-width: 210px; }
.ttf-price-vals { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ttf-slider { position: relative; height: 32px; display: flex; align-items: center; padding: 0 9px; }
.ttf-rail { position: absolute; left: 9px; right: 9px; height: 4px; border-radius: 4px; background: rgba(0,0,0,.13); }
.ttf-fill { position: absolute; left: 9px; height: 4px; border-radius: 4px; background: var(--ink); }
.ttf-slider input[type=range] { position: absolute; left: 0; right: 0; width: 100%; margin: 0; height: 32px; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ttf-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.22); cursor: pointer; margin-top: -7px; }
.ttf-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.22); cursor: pointer; }
.ttf-slider input[type=range]::-webkit-slider-runnable-track { background: none; height: 4px; }
.ttf-slider input[type=range]::-moz-range-track { background: none; height: 4px; }
/* Mobile: search box + a Filters button stay; the rest collapse (CSS toggle) */
.ttf-toggle, .ttf-fbtn { display: none; }
.ttf-rest { display: contents; }
@media (max-width: 600px) {
    /* Mobile: search box + an icon-only Filters button on one aligned row. */
    .ttfilters { gap: 10px; padding: 12px; align-items: center; }
    .ttf-searchg { flex: 1 1 auto; }
    .ttf-searchg .ttf-label { display: none; } /* drop the label so the input lines up with the icon */
    .ttf-search { min-width: 0; width: 100%; }
    .ttf-fbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; flex-shrink: 0; border: 1px solid rgba(0,0,0,.14); border-radius: 11px; color: var(--ink); background: #fff; cursor: pointer; }
    .ttf-fbtn-t { display: none; } /* icon only */
    .ttf-rest { display: none; flex-basis: 100%; }
    .ttf-toggle:checked ~ .ttf-rest { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 2px; }
    .ttf-rest .ttf-group, .ttf-rest .ttf-price { flex: 1 1 100%; }
    .ttf-rest select.ttf-ctl, .ttf-rest .ttf-stock { width: 100%; }
    .ttf-apply { flex: 1 1 auto; }
}
/* Legacy variant tweaks only touched the (now desktop-hidden) nav, so they're
   inert under the search-first default. Keep .wrap flex regardless of variant. */
.hv-classic .wrap, .hv-minimal .wrap, .hv-centered .wrap { display: flex; }
/* Mobile drawer. .hdr-collapse is display:contents on desktop (search/nav/
   account flatten into .wrap); on mobile it becomes a slide-in panel. Cart +
   burger stay in the top bar. */
.hdr-collapse { display: contents; }
.hdr-burger, .hdr-close, .hdr-drawer-head, .hdr-backdrop { display: none; }
.hdr-burger { order: 5; align-items: center; justify-content: center; cursor: pointer; color: var(--hd-text, #14171f); padding: 4px; margin: -4px 0; flex-shrink: 0; }

@media (max-width: 768px) {
    /* CRITICAL: backdrop-filter would trap the fixed drawer inside the header
       box — keep it off so the drawer + backdrop are viewport-relative. */
    .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .site-header .wrap { display: flex !important; align-items: center; gap: 10px; }
    .site-header .brand { order: 0; font-size: 16px; }
    .site-header .cart-btn { order: 3; margin-left: auto; border-color: transparent; padding: 0; }
    /* top-bar cart is icon-only on mobile (no label, no border) */
    .site-header .cart-btn .icon-label { display: none; }
    .site-header .hdr-burger { display: inline-flex; order: 5; }

    /* .hdr-collapse becomes a real slide-in panel from the right */
    .site-header .hdr-collapse {
        display: flex !important; flex-direction: column; align-items: stretch; gap: 0;
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
        width: min(86vw, 360px); max-width: 100%;
        background: var(--hd-bg, #fff); color: var(--hd-text, #14171f);
        box-shadow: -18px 0 50px -18px rgba(0,0,0,0.4);
        transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
        padding: 0 18px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .site-header .hdr-toggle:checked ~ .wrap .hdr-collapse { transform: translateX(0); }

    .site-header .hdr-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 58px; margin: 0 -18px 6px; padding: 0 18px; border-bottom: 1px solid rgba(127,127,127,0.16); position: sticky; top: 0; background: inherit; z-index: 1; }
    .site-header .hdr-drawer-title { font-weight: 800; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
    .site-header .hdr-close { display: inline-flex; cursor: pointer; padding: 6px; margin: -6px; color: inherit; }

    /* dim backdrop behind the panel */
    .site-header .hdr-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(10,16,28,0.46); opacity: 0; pointer-events: none; transition: opacity .3s; }
    .site-header .hdr-toggle:checked ~ .wrap .hdr-backdrop { opacity: 1; pointer-events: auto; }

    /* drawer contents as clean rows: search · categories · account */
    .site-header .hdr-collapse .hsearch { order: 0; display: flex; flex: none; justify-content: stretch; padding: 16px 0 8px; }
    .site-header .hdr-collapse .hsearch input { width: 100%; max-width: none; height: 42px; }
    .site-header .hdr-collapse .nav { order: 1; display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 0; }
    .site-header .hdr-collapse .nav a { padding: 14px 2px; font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(127,127,127,0.12); white-space: normal; }
    .site-header .hdr-collapse .nav .hbtn { align-self: flex-start; height: auto; margin: 12px 0; border-bottom: none; }
    .site-header .hdr-collapse .acct-btn { order: 2; justify-content: flex-start; gap: 12px; height: auto; padding: 14px 2px; font-size: 15px; font-weight: 600; border: none; border-bottom: 1px solid rgba(127,127,127,0.12); background: none; border-radius: 0; }
    .site-header .hdr-collapse .icon-label { display: inline; }
}

/* Hero */
.hero {
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    padding: 56px 0;
    text-align: center;
}
.hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 10px; letter-spacing: -0.03em; font-weight: 800; }
.hero p { color: var(--muted); margin: 0; font-size: 16px; }

/* Section heads */
.section { padding: 40px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.section-head h2 { font-size: 19px; margin: 0; letter-spacing: -0.02em; font-weight: 800; }
.section-head a { color: var(--accent); font-size: 13px; font-weight: 700; }

/* Product grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px 20px;
}
.card { display: block; }
.card .ph {
    aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden;
    background: var(--soft); border: 1px solid var(--line);
}
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .ph img { transform: scale(1.04); }
.card .name { margin-top: 11px; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.card .price { margin-top: 3px; color: var(--ink); font-size: 14px; font-weight: 700; }
.card .price .was { color: var(--muted); font-weight: 500; text-decoration: line-through; margin-left: 6px; font-size: 12.5px; }

/* Featured products — Carousel (horizontal scroll-snap rail) */
.prail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.prail::-webkit-scrollbar { display: none; }
.prail > .card { flex: 0 0 clamp(180px, 44vw, 252px); scroll-snap-align: start; }

/* Featured products — Editorial (image with name/price overlaid) */
.ocard { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; background: var(--soft); }
.ocard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ocard:hover img { transform: scale(1.05); }
.ocard .oinfo { position: absolute; inset: auto 0 0 0; padding: 16px 16px 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; background: linear-gradient(transparent, rgba(0,0,0,0.62)); color: #fff; }
.ocard .oname { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.ocard .oprice { font-weight: 700; font-size: 14px; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.ocard .oprice .was { opacity: .75; font-weight: 500; text-decoration: line-through; margin-left: 6px; font-size: 12px; }

/* Collections strip */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.coll-card { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--soft); border: 1px solid var(--line); display: flex; align-items: flex-end; }
.coll-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coll-card .label { position: relative; z-index: 1; padding: 14px 16px; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; text-shadow: 0 1px 8px rgba(0,0,0,.5); width: 100%; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.coll-card.noimg .label { color: var(--ink); text-shadow: none; background: none; }

/* Product detail */
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 40px 0; align-items: start; }
.gallery .main { border-radius: var(--radius); overflow: hidden; background: var(--soft); border: 1px solid var(--line); aspect-ratio: 1/1; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); cursor: pointer; }
.pdp h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.03em; }
.pdp .price { font-size: 22px; font-weight: 800; }
.pdp .price .was { color: var(--muted); font-weight: 500; text-decoration: line-through; margin-left: 10px; font-size: 16px; }
.opt { margin-top: 20px; }
.opt label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.opt .vals { display: flex; gap: 8px; flex-wrap: wrap; }
.opt .vals span { padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.opt .vals span:hover { border-color: var(--ink); }
.addcart { margin-top: 26px; width: 100%; padding: 15px; border: none; border-radius: 12px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: -0.01em; }
.addcart:hover { background: #000; }
.desc { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; color: #333; line-height: 1.7; }
.desc h2, .desc h3 { letter-spacing: -0.02em; }
.desc img { border-radius: 10px; margin: 12px 0; }

/* Empty / 404 */
.empty { text-align: center; padding: 80px 20px; }
.empty h1 { font-size: 22px; margin: 0 0 8px; }
.empty p { color: var(--muted); margin: 0; }

/* Content page */
.page { max-width: 760px; margin: 0 auto; padding: 48px 0; }
.page-title { font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.03em; margin: 0 0 22px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: clamp(9px,2.4vw,16px) 0; color: var(--muted); font-size: 12.5px; }
.site-footer .wrap { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); font-weight: 600; }
.site-footer a:hover { color: var(--ink); }
.footer-credit { display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit svg { width: 12px; height: 12px; flex-shrink: 0; }
@media (max-width: 640px) {
  .site-footer { font-size: 11px; }
  .footer-credit svg { width: 11px; height: 11px; }
  .hero1 { min-height: 60vh !important; }
  .fcta-row { justify-content: center !important; text-align: center; }
}
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ── Builder: responsive grid (columns set via --cols inline) ── */
.bgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--gap, 20px); }

/* ── Builder: FAQ / accordion (zero-JS <details>) ── */
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 2px; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--muted); transition: transform .2s ease; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 2px 18px; color: #555; line-height: 1.7; font-size: 14.5px; }

/* ── Builder: gallery (grid + scroll-snap carousel) ── */
.gal-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.gal-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.gal-strip img { flex: 0 0 auto; width: min(78%, 440px); aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); scroll-snap-align: start; }

/* ── Builder: responsive video embed ── */
.vid { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Builder: testimonials ── */
.tcard { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--soft); }
.tcard .q { font-size: 15px; line-height: 1.65; margin: 0; }
.tcard .who { font-weight: 700; margin-top: 14px; font-size: 14px; }
.tcard .role { color: var(--muted); font-size: 12.5px; }

/* ── Builder: stats ── */
.stat { text-align: center; }
.stat .n { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
.stat .l { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ── Builder: featured product ── */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.feat .fimg { aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.feat .fimg img { width: 100%; height: 100%; object-fit: cover; }
.feat h2 { font-size: clamp(24px, 3.5vw, 34px); letter-spacing: -0.03em; margin: 0 0 8px; }
.feat .price { font-size: 22px; font-weight: 800; }
.feat .price .was { color: var(--muted); font-weight: 500; text-decoration: line-through; margin-left: 10px; font-size: 16px; }
.feat .cta { margin-top: 22px; display: inline-block; padding: 13px 26px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; }

@media (max-width: 860px) {
    .bgrid { grid-template-columns: repeat(2, 1fr); }
    .feat { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 720px) {
    .pdp { grid-template-columns: 1fr; gap: 24px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
}
@media (max-width: 560px) {
    .bgrid { grid-template-columns: 1fr; }
    /* product/category cards + stats stay 2-up on phones (1-up looks too large) */
    .bgrid.prod, .bgrid.stats { grid-template-columns: repeat(2, 1fr); }
}

/* PDP gallery — sticky only on desktop. On mobile it must NOT be sticky,
   otherwise the info column scrolls *under* the pinned image (the reported
   sticky/overlay bug on phones). */
.pdp-gallery { flex: 1.1 1 340px; min-width: 0; }
@media (min-width: 860px) {
    .pdp-gallery { position: sticky; top: 20px; align-self: flex-start; }
}

/* ── Hero carousel (HeroSection4) ── all structural styles are INLINE in the
   renderer (renderHeroCarousel / HeroCarouselPreview) so it never collapses if
   this stylesheet is stale or missing. These are cosmetic enhancements only. */
.ttc-track::-webkit-scrollbar { display: none; }
.ttc-arrow:hover { background: rgba(0,0,0,.6) !important; }
/* skeleton / shimmer loading */
@keyframes ttShimmer { 0% { background-position: -560px 0; } 100% { background-position: 560px 0; } }
.ph-skel { background: linear-gradient(100deg, #eceae5 30%, #f6f5f2 50%, #eceae5 70%); background-size: 560px 100%; animation: ttShimmer 1.25s linear infinite; }
.ph-skel-card { aspect-ratio: 1/1; border-radius: 12px; background: linear-gradient(100deg, #eceae5 30%, #f6f5f2 50%, #eceae5 70%); background-size: 560px 100%; animation: ttShimmer 1.25s linear infinite; }
/* Per-device arrow visibility (mobile ≤640, tablet 641-1024, desktop ≥1025). */
@media (max-width: 640px) { .tt-carousel.arrows-hide-mobile .ttc-arrow { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .tt-carousel.arrows-hide-tablet .ttc-arrow { display: none !important; } }
@media (min-width: 1025px) { .tt-carousel.arrows-hide-desktop .ttc-arrow { display: none !important; } }

/* Dynamic List (Sketchware ListView) built-in skeleton shimmer */
.tt-skel{background:linear-gradient(100deg,#eceef2 30%,#f6f7f9 50%,#eceef2 70%);background-size:200% 100%;animation:tt-shimmer 1.25s ease-in-out infinite}
@keyframes tt-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
[data-ttlist][data-loaded]{animation:tt-fadein .35s ease both}
@keyframes tt-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* circular loading spinner (the builder's "Loading spinner" element) */
.tt-spin { animation: ttspin .8s linear infinite; }
@keyframes ttspin { to { transform: rotate(360deg); } }

/* Mobile menu drawer — at least full viewport height, and GROWS + scrolls when
   the menu is taller than the screen. #ttdrawer is fixed top:0/bottom:0 (definite
   height) + overflow-y:auto. Percentage heights are brittle through the .ttdoc-dw
   wrapper (an earlier height:100% made it full but NOT scrollable — the bottom row
   was cut off on mobile/iPad). Flexbox instead: the panel fills the viewport when
   content is short (marginTop:auto pins the bottom row low) and grows past it when
   tall, so #ttdrawer scrolls to reveal the bottom row. Overrides the panel's inline
   height:100%. */
#ttdrawer { display: flex; flex-direction: column; }
#ttdrawer > .ttdoc-dw { flex: 1 0 auto; display: flex; flex-direction: column; }
#ttdrawer #drawerPanel { flex: 1 0 auto; height: auto !important; }