/* ════════════════════════════════════════════════════════════════════
 * ONES SHOP — legacy-patches.css
 * 
 * Auto-generated by refactor script. Concatenates all <style id="ones-*">
 * patches plus untagged <style> blocks from the original index.php,
 * IN THEIR ORIGINAL ORDER to preserve cascade specificity.
 *
 * DO NOT reorder blocks — many rules depend on later blocks overriding
 * earlier ones via !important and source-order. If you need to tweak,
 * append a new section below or use CSS Cascade Layers (@layer).
 * ════════════════════════════════════════════════════════════════════ */



/* ════════════════════════════════════════════════════════════════════
 * CSS @layer priority order (future-ready)
 *
 * New code can wrap rules in:
 *   @layer base { ... }      ← lowest priority
 *   @layer v5 { ... }
 *   ...
 *   @layer v22 { ... }       ← highest priority
 *   @layer overrides { ... } ← absolute top (use sparingly)
 *
 * Rules WITHOUT a @layer (the existing legacy blocks below) automatically
 * sit ABOVE all named layers, so this declaration is non-breaking.
 * ════════════════════════════════════════════════════════════════════ */
@layer base, v4, v5, v6, v7, v8, v10, v11, v12, v13, v14, v15, v17, v18, v21, v22, hero-redesign, cart-redesign, late-polish, overrides;

/* ──────────────────────────────────────────────────────────────────
   ones-base-fixes
   Originally <style id="ones-base-fixes"> at index.php lines 27–433
   ────────────────────────────────────────────────────────────────── */
/* ── ONES brand palette (matches the black + blue stripe logo) ──── */
    :root{
      --ones-blue:#006fd6;        /* primary blue from logo stripe */
      --ones-blue-2:#1a8af5;      /* hover/dark variant */
      --ones-blue-soft:rgba(0,111,214,.10);
      --ones-ink:#0f172a;         /* near-black, less harsh than #000 */
      --ones-ink-2:#1f2937;
      --ones-text-muted:#475467;
      --ones-line:#e6ebf2;
      --ones-surface:#ffffff;
      --ones-surface-2:#f7faff;   /* very faint blue tint, away from pure white */
      --ones-shadow:0 12px 32px rgba(15,23,42,.06);
    }

    /* Buttons & primary accents — switch from "all black" to brand blue */
    .btn-primary, .ones-btn-main, .ones-add-cart, .signup button {
      background: var(--ones-blue) !important; border-color: var(--ones-blue) !important; color: #fff !important;
    }
    .btn-primary:hover, .ones-btn-main:hover, .ones-add-cart:hover { background: var(--ones-blue-2) !important; }
    .ones-buy-now { color: var(--ones-blue) !important; border-color: var(--ones-blue) !important; }
    .ones-buy-now:hover { background: var(--ones-blue-soft) !important; }
    .view-all, .product-link, .ones-pill.dark { color: var(--ones-blue) !important; }
    .product-card .price, .ones-modal-price { color: var(--ones-ink) !important; }

    /* Selected lens card uses brand blue, not black */
    .ones-v13-card.selected, .ones-v13-card:hover,
    .ones-v12-card.selected, .ones-v12-card:hover {
      border-color: var(--ones-blue) !important;
      box-shadow: 0 14px 30px rgba(0,111,214,.16) !important;
    }
    .ones-v13-card.selected b, .ones-v12-card.selected b { color: var(--ones-blue) !important; }
    .ones-v13-card em, .ones-v12-card em { color: var(--ones-blue) !important; }
    .ones-v13-check.selected { border-color: var(--ones-blue) !important; background: linear-gradient(180deg,#fff,rgba(0,111,214,.04)) !important; }
    .ones-v13-check.selected .ones-v13-mark { background: var(--ones-blue) !important; border-color: var(--ones-blue) !important; }

    /* Step pills */
    .ones-v13-step.on, .ones-step.active { background: var(--ones-blue) !important; border-color: var(--ones-blue) !important; }

    /* Subtle blue-tint surface so the page isn't a wall of cold white */
    body { background: var(--ones-surface-2) !important; }
    .container, .product-card, .ones-form-card, .ones-summary-card, .ones-v13-block, .ones-v13-summary, .ones-v13-lens, .modal-content, .review-card { background: var(--ones-surface) !important; }

    /* Top-nav language switch (TH/EN) — sits inside .nav-icons on the right.
       flex-shrink:0 so the parent's flex:row doesn't squeeze it down to 10px. */
    html body #onesNavLang.nav-lang-switch{
      display:inline-flex!important; align-items:center; gap:0;
      flex:0 0 auto!important; flex-shrink:0!important;
      border:1px solid var(--ones-line,#e6ebf2);
      border-radius:999px; overflow:hidden; padding:2px;
      background:var(--ones-surface,#fff);
      margin-right:8px; min-width:74px;
    }
    html body #onesNavLang .nav-lang-btn{
      display:inline-flex!important; align-items:center; justify-content:center;
      border:0!important; background:transparent; cursor:pointer;
      padding:5px 12px!important; min-width:32px; height:26px; line-height:1;
      font:800 11px/1 Inter,'Noto Sans Thai',sans-serif;
      color:var(--ones-text-muted,#475467); letter-spacing:.06em;
      border-radius:999px!important; transition:.18s;
      white-space:nowrap;
    }
    html body #onesNavLang .nav-lang-btn:hover{ color:var(--ones-blue,#006fd6); }
    html body #onesNavLang .nav-lang-btn.active{
      background:var(--ones-blue,#006fd6)!important; color:#fff!important;
    }

    /* Checkout modal: actually centered on every viewport.
       Old rule used opacity-only with no flex centering — content stuck to top. */
    html body .checkout-modal{
      position:fixed!important; inset:0!important; z-index:900;
      background:rgba(8,12,20,.55)!important; backdrop-filter:blur(8px);
      display:flex!important; align-items:center!important; justify-content:center!important;
      padding:20px!important; overflow-y:auto!important;
      opacity:0; pointer-events:none; transition:opacity .25s ease;
    }
    html body .checkout-modal.open{ opacity:1!important; pointer-events:auto!important; }
    html body .checkout-modal .ones-checkout,
    html body .checkout-modal .checkout-content{
      width:min(960px, 100%)!important;
      max-height:92vh!important;
      margin:auto!important;
      overflow-y:auto!important;
      border-radius:24px!important;
      background:var(--ones-surface,#fff)!important;
      box-shadow:0 30px 80px rgba(0,0,0,.30)!important;
    }@media(max-width:640px){
      html body .checkout-modal{ padding:0!important; align-items:stretch!important; overflow:hidden!important; }
      /* #checkoutBody is the real flex item — make IT the single full-height scroller.
         Use dvh so the bottom buttons clear the mobile address bar (vh fallback first). */
      html body .checkout-modal #checkoutBody{
        margin:0!important; padding:1rem!important; width:100%!important; max-width:100%!important;
        height:100vh!important; height:100dvh!important;
        max-height:100vh!important; max-height:100dvh!important;
        overflow-y:auto!important; -webkit-overflow-scrolling:touch!important;
        border-radius:0!important;
      }
      /* inner card must NOT have its own height/scroll — avoids nested-scroll lock */
      html body .checkout-modal .ones-checkout,
      html body .checkout-modal .checkout-content{
        width:100%!important; max-height:none!important; min-height:0!important;
        overflow:visible!important; border-radius:0!important;
      }
      /* breathing room so the last buttons clear the home indicator / browser chrome */
      html body .checkout-modal .ones-checkout-body{ padding-bottom:max(32px, env(safe-area-inset-bottom))!important; }
    }

    /* Page rhythm + image fallback now injected as <style> at end of body so
       it lands AFTER per-version section{padding:38px 0!important} rules
       (see installLateStyles() near the bottom). */
    /* Section titles consistent rhythm */
    html body .section-head{ margin-bottom:28px!important; }

    /* ── Section dividers: subtle alternating tones (no hard borders) ─── */
    html body main > section:nth-of-type(even){ background:linear-gradient(180deg, rgba(0,111,214,.012), rgba(0,111,214,0))!important; }

    /* ── Featured section: cap height, keep grid clean ────────────────── */
    /* Page renders 28 products at once → 7 rows. Trim to 12 max via JS-friendly max-height + view-all CTA already exists. */
    html body #productsGrid{ max-height:none; }

    /* ── Image error fallback: add subtle placeholder bg so broken img boxes don't show as gray void ── */
    html body img{ background:linear-gradient(135deg,#f1f5fb,#e7eef7); }
    html body .product-card .product-img img{ background:transparent; }

    /* ── Footer: tighten ─────────────────────────────────────────────── */
    html body .footer{ padding-top:48px!important; }
    html body .footer-main{ padding-bottom:32px!important; }

    /* Footer "ติดต่อเรา" — compact contact list (was getting too tall) */
    html body .footer .contact-list{
      list-style:none; padding:0; margin:0;
      display:flex; flex-direction:column; gap:6px;
    }
    html body .footer .contact-list li{
      display:flex; align-items:flex-start; gap:8px;
      font-size:12px; line-height:1.45; color:var(--ones-text-muted,#475467);
      margin:0; padding:0;
    }
    html body .footer .contact-list li svg{ flex-shrink:0; width:14px; height:14px; margin-top:1px; }
    html body .footer .contact-list li strong{
      font-size:11px; letter-spacing:.06em; text-transform:uppercase;
      color:var(--ones-text-muted,#475467); margin-top:6px;
    }
    html body .footer .contact-list li span{ flex:1; min-width:0; word-break:break-word; }
    /* Make multi-line address shrink */
    html body .footer .contact-list li span br{ display:none; }
    html body .footer .contact-list li[data-addr] span{ font-size:11.5px; line-height:1.5; opacity:.85; }

    /* === Member Portal modal === */
    html body #memberModal{
      position:fixed; inset:0; z-index:11000;
      background:rgba(8,12,20,.55); backdrop-filter:blur(8px);
      display:none; align-items:center; justify-content:center; padding:20px;
    }
    html body #memberModal.open{ display:flex; }
    html body #memberModal .mm-card{
      width:min(960px, 100%); max-height:92vh; overflow:hidden;
      background:var(--ones-surface,#fff); border-radius:24px;
      border:1px solid var(--ones-line,#e6ebf2);
      box-shadow:0 30px 80px rgba(15,23,42,.30);
      display:grid; grid-template-rows:auto 1fr;
    }
    html body #memberModal .mm-head{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:16px 22px; border-bottom:1px solid var(--ones-line,#e6ebf2);
      background:var(--ones-surface-2,#f7faff);
    }
    html body #memberModal .mm-head h2{ margin:0; font-size:18px; letter-spacing:-.02em; }
    html body #memberModal .mm-close{
      width:36px; height:36px; border-radius:999px;
      border:1px solid var(--ones-line,#e6ebf2); background:#fff; color:var(--ones-ink);
      cursor:pointer; font-size:18px;
    }
    html body #memberModal .mm-body{
      display:grid; grid-template-columns:200px 1fr;
      overflow:hidden;
    }@media(max-width:640px){
      html body #memberModal .mm-body{ grid-template-columns:1fr; }
      html body #memberModal .mm-side{ display:flex; flex-direction:row; overflow-x:auto; padding:8px 12px!important; border-right:0!important; border-bottom:1px solid var(--ones-line,#e6ebf2)!important; }
      html body #memberModal .mm-tab{ flex-shrink:0; }
    }
    html body #memberModal .mm-side{
      padding:14px 10px; background:var(--ones-surface-2,#f7faff);
      border-right:1px solid var(--ones-line,#e6ebf2); overflow-y:auto;
      display:flex; flex-direction:column; gap:2px;
    }
    html body #memberModal .mm-tab{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      color:var(--ones-text-muted,#475467); font:600 13px/1 Inter,'Noto Sans Thai',sans-serif;
      border:0; background:transparent; text-align:left; width:100%;
    }
    html body #memberModal .mm-tab:hover{ background:rgba(0,111,214,.06); color:var(--ones-blue); }
    html body #memberModal .mm-tab.active{ background:var(--ones-blue,#006fd6); color:#fff; }
    html body #memberModal .mm-content{
      padding:22px; overflow-y:auto; max-height:75vh;
      background:var(--ones-surface,#fff);
    }
    html body #memberModal .mm-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
    html body #memberModal .mm-row.full{ grid-template-columns:1fr; }
    html body #memberModal label{
      display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
      color:var(--ones-text-muted,#475467); margin-bottom:5px;
    }
    html body #memberModal input, html body #memberModal select, html body #memberModal textarea{
      width:100%; padding:10px 12px; border-radius:10px;
      border:1px solid var(--ones-line,#e6ebf2); background:var(--ones-surface,#fff);
      color:var(--ones-ink); font:14px/1.4 Inter,'Noto Sans Thai',sans-serif;
    }
    html body #memberModal input:focus, html body #memberModal select:focus, html body #memberModal textarea:focus{
      outline:none; border-color:var(--ones-blue,#006fd6); box-shadow:0 0 0 3px rgba(0,111,214,.15);
    }
    html body #memberModal .mm-btn{
      display:inline-flex; align-items:center; gap:8px;
      padding:11px 18px; border-radius:10px; cursor:pointer; font:700 13px/1 Inter,'Noto Sans Thai',sans-serif;
      border:1px solid var(--ones-blue,#006fd6); background:var(--ones-blue,#006fd6); color:#fff;
    }
    html body #memberModal .mm-btn.ghost{ background:transparent; color:var(--ones-blue,#006fd6); }
    html body #memberModal .mm-btn:disabled{ opacity:.5; cursor:not-allowed; }
    html body #memberModal .mm-divider{
      display:flex; align-items:center; gap:10px; margin:18px 0;
      color:var(--ones-text-muted,#475467); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    }
    html body #memberModal .mm-divider::before, html body #memberModal .mm-divider::after{
      content:""; flex:1; height:1px; background:var(--ones-line,#e6ebf2);
    }
    html body #memberModal .mm-social-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
    html body #memberModal .mm-social-btn{
      display:flex; align-items:center; justify-content:center; gap:8px;
      padding:11px 14px; border-radius:10px; border:1px solid var(--ones-line,#e6ebf2);
      background:#fff; color:var(--ones-ink); cursor:pointer;
      font:700 12px/1 Inter,'Noto Sans Thai',sans-serif; transition:.18s;
    }
    html body #memberModal .mm-social-btn:hover{ border-color:var(--ones-blue); color:var(--ones-blue); transform:translateY(-1px); }
    html body #memberModal .mm-social-btn.line{ background:#06c755; border-color:#06c755; color:#fff; }
    html body #memberModal .mm-social-btn.google{ background:#fff; color:#1f2937; border-color:#dadce0; }
    html body #memberModal .mm-status{ font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:12px; display:none; }
    html body #memberModal .mm-status.show{ display:block; }
    html body #memberModal .mm-status.ok{ background:rgba(26,122,69,.12); color:#1a7a45; }
    html body #memberModal .mm-status.err{ background:rgba(185,28,28,.12); color:#b91c1c; }
    html body #memberModal .mm-list{ display:flex; flex-direction:column; gap:10px; }
    html body #memberModal .mm-list-item{
      padding:14px; border:1px solid var(--ones-line,#e6ebf2); border-radius:12px;
      background:var(--ones-surface-2,#f7faff);
    }

    /* Search panel — push below the sticky header. Header height is measured
       at runtime by openSearch() and exposed as --header-h on :root. */
    html body #searchPanel{
      top:var(--header-h, 72px)!important;
      z-index:50!important;        /* below header (header is sticky on top) */
      box-shadow:0 12px 32px rgba(15,23,42,.12)!important;
      border-top:1px solid var(--ones-line,#e6ebf2)!important;
    }
    /* Header should stay above search panel */
    html body #siteHeader, html body header.header{ z-index:100!important; position:sticky!important; top:0!important; }

    /* Right-side header icons — make them perfectly aligned circles */
    html body .nav-icons{
      display:flex!important; align-items:center!important; gap:10px!important;
    }
    html body .nav-icons .icon-btn{
      width:38px!important; height:38px!important; min-width:38px;
      display:inline-flex!important; align-items:center!important; justify-content:center!important;
      border:1px solid var(--ones-line,#e6ebf2)!important;
      border-radius:999px!important;
      background:var(--ones-surface,#fff)!important;
      color:var(--ones-ink,#0f172a)!important;
      cursor:pointer!important; padding:0!important;
      box-shadow:0 1px 3px rgba(15,23,42,.04)!important;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      position:relative;
    }
    html body .nav-icons .icon-btn:hover{
      transform:translateY(-1px); border-color:var(--ones-blue,#006fd6)!important;
      box-shadow:0 6px 14px rgba(0,111,214,.14)!important;
    }
    html body .nav-icons .icon-btn svg{ width:18px!important; height:18px!important; stroke-width:2!important; }
    html body .nav-icons .cart-badge{
      position:absolute; top:-4px; right:-4px;
      min-width:18px; height:18px; padding:0 5px;
      background:var(--ones-blue,#006fd6); color:#fff;
      font:800 10px/18px Inter,sans-serif; text-align:center;
      border-radius:999px; border:2px solid var(--ones-surface,#fff);
    }

    /* Back-to-Top floating button (bottom-right, fades in on scroll) */
    html body .back-to-top{
      position:fixed; right:14px; bottom:14px; z-index:9990;
      width:42px; height:42px; border-radius:999px;
      border:1px solid var(--ones-line,#e6ebf2);
      background:var(--ones-surface,#fff); color:var(--ones-blue,#006fd6);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; box-shadow:0 10px 24px rgba(15,23,42,.12);
      opacity:0; pointer-events:none; transform:translateY(8px);
      transition:opacity .22s ease, transform .22s ease, background .15s ease;
    }
    html body .back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
    html body .back-to-top:hover{ background:var(--ones-blue,#006fd6); color:#fff; border-color:var(--ones-blue,#006fd6); }

    /* Image stabilizer — show images fully right away.
       Older "fade-in" approach caused a visible re-flash whenever any DOM
       mutation re-ran the load handler. Now images just paint normally. */
    html body img{ background-color: transparent; opacity: 1!important; }

    /* Modal gallery thumbnails + colour dots — clickable, visible feedback */
    html body .modal-gallery{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
      gap:8px;
      margin-top:12px;
      padding:0 4px;
    }
    html body .modal-gallery .gallery-thumb{
      aspect-ratio:1/1;
      border:1.5px solid var(--ones-line,#e6ebf2);
      border-radius:10px;
      padding:0;
      background:#fff;
      overflow:hidden;
      cursor:pointer;
      transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    html body .modal-gallery .gallery-thumb:hover{ border-color:var(--ones-blue,#006fd6); transform:translateY(-1px); }
    html body .modal-gallery .gallery-thumb.selected{
      border-color:var(--ones-blue,#006fd6);
      box-shadow:0 0 0 2px rgba(0,111,214,.18);
    }
    html body .modal-gallery .gallery-thumb img{
      width:100%; height:100%; object-fit:cover; display:block;
    }
    html body .ones-modal-image{
      min-height:340px;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(180deg,#f9fbfe,#eef3fb);
      border-radius:18px; overflow:hidden;
    }
    html body .ones-modal-image img{ max-width:100%; max-height:100%; object-fit:contain; }

    html body .ones-color-row{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
    html body .ones-color-dot{
      width:32px; height:32px; border-radius:50%;
      cursor:pointer;
      border:2px solid var(--ones-surface,#fff);
      box-shadow:0 0 0 1px var(--ones-line,#e6ebf2);
      transition:transform .15s ease, box-shadow .15s ease;
      display:inline-block;
    }
    html body .ones-color-dot:hover{ transform:scale(1.08); }
    html body .ones-color-dot.selected{
      box-shadow:0 0 0 2px var(--ones-blue,#006fd6);
      transform:scale(1.08);
    }

    /* Square product image — bumped specificity (html body) so it wins over
       every per-breakpoint height:Npx rule from V14/V15/V21 layers.
       NO BORDER, NO BACKGROUND — image is the card. */
    html body .product-card .product-img,
    html body #productsGrid .product-card .product-img,
    html body #bsGrid .product-card .product-img{
      aspect-ratio:1/1!important;
      height:auto!important;
      min-height:0!important;
      max-height:none!important;
      width:100%!important;
      padding:0!important;
      margin:0 0 14px 0!important;
      border-radius:0!important;          /* no rounded corners on image area */
      border:0!important;
      box-shadow:none!important;
      overflow:hidden!important;
      background:transparent!important;   /* no card-tint behind the image */
      display:block!important;
    }
    html body .product-card .product-img>img,
    html body .product-card .product-img>picture>img{
      width:100%!important;
      height:100%!important;
      object-fit:cover!important;
      object-position:center!important;
      padding:0!important;
      margin:0!important;
      max-height:none!important;
      transition:transform .35s ease;
    }
    html body .product-card:hover .product-img>img{ transform:scale(1.04); }
    html body .product-card .product-img>svg{
      width:74%!important; height:auto!important; max-height:74%!important;
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    }
    /* Square-ish card with consistent padding + radius across V14/V15/V21 */
    html body .product-card{ border-radius:18px!important; padding:14px!important; }

    /* Hide images that have no usable src so the broken-image icon never shows */
    img:not([src]),
    img[src=""],
    img[src*="undefined"],
    img[src*="null"]{display:none!important}

    /* Category cards: show the photo, lay text on a soft gradient at the bottom only.
       Overrides the older "wash white over the whole card" rule so the user can see
       the actual category photo. */
    .category-card{position:relative!important;overflow:hidden!important;}
    .category-card>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;z-index:0!important;filter:saturate(1.02) contrast(1.02)!important;}
    .category-card .category-info{
      position:absolute!important;
      left:0!important; right:0!important; bottom:0!important; top:auto!important;
      height:auto!important;
      padding:18px 22px 18px!important;
      background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,.95) 100%)!important;
      display:grid!important; grid-template-columns:auto 1fr auto!important; align-items:end!important; gap:14px!important;
      z-index:2!important; color:#0f172a!important;
    }
    .category-card .category-icon{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;border-radius:50%!important;background:#fff!important;border:1px solid rgba(15,23,42,.08)!important;color:#111!important;box-shadow:0 6px 14px rgba(15,23,42,.08)!important;}
    .category-card .category-info h3{font-size:18px!important;font-weight:900!important;letter-spacing:-.02em!important;margin:0 0 4px!important;color:#0f172a!important;}
    .category-card .category-info p{font-size:12.5px!important;color:#475467!important;margin:0!important;line-height:1.4!important;}
    .category-card .category-arrow{font-size:22px!important;color:#0f172a!important;background:transparent!important;}

/* ──────────────────────────────────────────────────────────────────
   untagged-block-at-line-434
   Originally <style id=""> at index.php lines 434–1630
   ────────────────────────────────────────────────────────────────── */
:root {
      --blue: #006fd6;
      --blue-dark: #0056b5;
      --black: #101418;
      --text: #252b33;
      --muted: #6f7782;
      --line: #e7ebf0;
      --soft: #f6f8fb;
      --white: #ffffff;
      --radius: 18px;
      --shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
      --shadow-soft: 0 8px 28px rgba(17, 24, 39, 0.06);
      --container: 1180px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", "Noto Sans Thai", sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button, input {
      font-family: inherit;
    }

    .container {
      width: min(var(--container), calc(100% - 48px));
      margin: 0 auto;
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(231,235,240,0.75);
    }

    .nav {
      height: 82px;
      display: grid;
      grid-template-columns: 180px 1fr 210px;
      align-items: center;
      gap: 20px;
    }

    .brand {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      width: fit-content;
    }

    .brand-mark {
      font-size: 30px;
      line-height: 1;
      letter-spacing: -4px;
      font-weight: 800;
      color: var(--black);
      position: relative;
    }

    .brand-mark span {
      color: var(--blue);
      letter-spacing: -2px;
      margin: 0 2px;
    }

    .brand-name {
      font-size: 13px;
      letter-spacing: 10px;
      font-weight: 700;
      color: var(--black);
      padding-left: 8px;
    }

    .nav-links {
      display: flex;
      justify-content: center;
      gap: 48px;
      font-size: 15px;
      font-weight: 600;
      color: #20252b;
    }

    .nav-links a {
      position: relative;
      padding: 28px 0;
    }

    .nav-links a.active,
    .nav-links a:hover {
      color: var(--blue);
    }

    .nav-links a.active::after,
    .nav-links a:hover::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 20px;
      width: 100%;
      height: 2px;
      background: var(--blue);
      border-radius: 99px;
    }

    .nav-icons {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 23px;
    }

    .icon-btn {
      width: 25px;
      height: 25px;
      border: 0;
      background: transparent;
      color: var(--black);
      cursor: pointer;
      position: relative;
    }

    .icon-btn svg {
      width: 100%;
      height: 100%;
      stroke-width: 1.8;
    }

    .cart-badge {
      position: absolute;
      right: -10px;
      top: -9px;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: var(--blue);
      color: white;
      font-size: 11px;
      display: grid;
      place-items: center;
      font-weight: 700;
    }

    .mobile-menu {
      display: none;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      height: 56px;
      padding: 0 32px;
      border-radius: 7px;
      border: 0;
      background: var(--blue);
      color: white;
      font-size: 17px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(0, 111, 214, 0.24);
      transition: 0.25s ease;
    }

    .btn:hover {
      background: var(--blue-dark);
      transform: translateY(-2px);
    }

    .glass-img {
      position: absolute;
      object-fit: contain;
      filter: drop-shadow(0 20px 20px rgba(0,0,0,0.16));
    }

    .trust-bar {
      margin-top: -42px;
      position: relative;
      z-index: 8;
    }

    .trust-inner {
      background: rgba(255,255,255,0.94);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
      border-radius: 14px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: hidden;
    }

    .trust-item {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 14px;
      align-items: center;
      padding: 26px 34px;
      border-right: 1px solid var(--line);
    }

    .trust-item:last-child {
      border-right: 0;
    }

    .trust-item svg,
    .feature svg {
      color: var(--blue);
      stroke-width: 1.8;
    }

    .trust-item strong,
    .feature strong {
      display: block;
      font-size: 16px;
      color: var(--black);
      margin-bottom: 2px;
    }

    .trust-item span,
    .feature span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    section {
      padding: 70px 0;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .section-title h2 {
      font-size: 32px;
      letter-spacing: -0.8px;
      line-height: 1.2;
      color: var(--black);
      margin-bottom: 4px;
    }

    .section-title p {
      color: var(--muted);
      font-size: 15px;
    }

    .view-all {
      color: var(--blue);
      font-size: 15px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .category-card {
      min-height: 230px;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      background: var(--soft);
      box-shadow: 0 10px 28px rgba(17,24,39,0.04);
    }

    .category-card img {
      width: 100%;
      height: 100%;
      min-height: 230px;
      object-fit: cover;
      opacity: 0.94;
      transition: 0.35s ease;
    }

    .category-card:hover img {
      transform: scale(1.04);
    }

    .category-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 18px 22px;
      display: grid;
      grid-template-columns: 52px 1fr 28px;
      align-items: center;
      gap: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.96));
      backdrop-filter: blur(10px);
    }

    .category-icon {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      background: white;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: #20242b;
    }

    .category-info h3 {
      font-size: 17px;
      color: var(--black);
    }

    .category-info p {
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .category-arrow {
      color: var(--blue);
      font-weight: 800;
      font-size: 20px;
    }

    .products {
      padding-top: 0;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    .product-card {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: white;
      padding: 18px;
      min-height: 300px;
      position: relative;
      transition: 0.25s ease;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-soft);
    }

    .product-number {
      position: absolute;
      left: 16px;
      top: 14px;
      width: 25px;
      height: 25px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #f3f8ff;
      color: var(--blue);
      font-weight: 800;
      font-size: 14px;
    }

    .product-card img {
      width: 100%;
      height: 138px;
      object-fit: contain;
      margin: 28px 0 22px;
      filter: drop-shadow(0 13px 12px rgba(0,0,0,0.1));
    }

    .product-card h3 {
      font-size: 17px;
      color: var(--black);
      margin-bottom: 2px;
    }

    .product-card p {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 11px;
      min-height: 20px;
    }

    .price {
      font-weight: 800;
      color: var(--black);
      margin-bottom: 11px;
      font-size: 17px;
    }

    .dots {
      display: flex;
      gap: 7px;
    }

    .dot {
      width: 13px;
      height: 13px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,0.12);
      background: #111;
    }

    .dot.gray { background: #bfc3c8; }
    .dot.brown { background: #5a3f30; }
    .dot.tortoise { background: #2b160f; }
    .dot.green { background: #0e2d1f; }

    .why {
      padding-top: 0;
      padding-bottom: 54px;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 28px;
    }

    .feature {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 16px;
      align-items: center;
      padding: 10px 30px 10px 0;
      border-right: 1px solid var(--line);
    }

    .feature:last-child {
      border-right: 0;
    }

    .feature svg {
      width: 48px;
      height: 48px;
    }

    .lifestyle {
      padding: 0;
      background: linear-gradient(90deg, #f6f8fb 0%, #eef1f5 100%);
      overflow: hidden;
    }

    .lifestyle-grid {
      display: grid;
      grid-template-columns: 46% 54%;
      min-height: 365px;
      align-items: center;
    }

    .lifestyle-content {
      padding: 64px 0;
    }

    .lifestyle h2 {
      font-size: clamp(40px, 4vw, 62px);
      line-height: 1.12;
      color: #2a2f36;
      letter-spacing: -1.5px;
      margin: 10px 0 20px;
    }

    .lifestyle p {
      color: var(--muted);
      margin-bottom: 27px;
      font-size: 16px;
    }

    .lifestyle-image {
      align-self: stretch;
      background:
        linear-gradient(90deg, rgba(246,248,251,0.95), rgba(246,248,251,0.08) 35%),
        linear-gradient(180deg, var(--ones-surface-2,#f7faff), #eef4fc);
      min-height: 365px;
    }

    .reviews {
      padding-bottom: 38px;
    }

    .review-wrap {
      position: relative;
    }

    .review-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .review-card {
      border: 1px solid var(--line);
      background: white;
      border-radius: 14px;
      padding: 25px;
      min-height: 145px;
    }

    .review-top {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 13px;
    }

    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      background: #ddd;
    }

    .stars {
      color: var(--blue);
      letter-spacing: 3px;
      font-size: 15px;
      margin-left: auto;
      white-space: nowrap;
    }

    .review-card strong {
      color: var(--black);
    }

    .review-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
      margin-bottom: 6px;
    }

    .review-card time {
      color: #a0a7b0;
      font-size: 12px;
    }

    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: white;
      box-shadow: var(--shadow-soft);
      color: #6b7280;
      display: grid;
      place-items: center;
    }

    .slider-btn.left { left: -58px; }
    .slider-btn.right { right: -58px; }

    .newsletter {
      padding: 0 0 48px;
    }

    .newsletter-box {
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 43% 57%;
      background: white;
    }

    .newsletter-image {
      min-height: 225px;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.72)),
        linear-gradient(135deg, var(--ones-surface-2,#f7faff), #e6f0fa);
    }

    .newsletter-content {
      padding: 42px 52px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .newsletter-content span {
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 2px;
    }

    .newsletter-content h2 {
      font-size: 34px;
      line-height: 1.2;
      color: var(--black);
      margin-bottom: 8px;
    }

    .newsletter-content p {
      color: var(--muted);
      margin-bottom: 22px;
    }

    .signup {
      display: grid;
      grid-template-columns: 1fr 190px;
      gap: 12px;
      margin-bottom: 12px;
    }

    .signup input {
      height: 48px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0 16px;
      outline: 0;
      font-size: 15px;
    }

    .signup input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(0,111,214,0.1);
    }

    .signup button {
      height: 48px;
      border: 0;
      border-radius: 6px;
      background: var(--blue);
      color: white;
      font-weight: 700;
      cursor: pointer;
    }

    .checkbox {
      color: #8a929d;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .social-strip {
      padding: 0 0 58px;
    }

    .insta-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 14px;
    }

    .insta-grid img {
      height: 112px;
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
      filter: saturate(0.92);
    }

    .footer {
      background: #f7f9fc;
      border-top: 1px solid var(--line);
    }

    .footer-main {
      padding: 50px 0 36px;
      display: grid;
      grid-template-columns: 1.5fr 0.9fr 1fr 1.1fr 1.35fr;
      gap: 34px;
    }

    .footer-logo {
      margin-bottom: 18px;
    }

    .footer p,
    .footer a,
    .footer li {
      color: #6c7480;
      font-size: 14px;
    }

    .footer-desc {
      margin-bottom: 18px;
      max-width: 320px;
    }

    .social-icons {
      display: flex;
      gap: 12px;
    }

    .social-icons a {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: #222832;
      color: white;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 800;
    }

    .footer h3 {
      font-size: 15px;
      color: var(--black);
      margin-bottom: 15px;
    }

    .footer ul {
      list-style: none;
      display: grid;
      gap: 9px;
    }

    .contact-list li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
    }

    .contact-list svg {
      color: var(--blue);
      min-width: 17px;
      margin-top: 2px;
    }

    .footer-bottom {
      border-top: 1px solid var(--line);
      padding: 17px 0;
    }

    .footer-bottom-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: #7b8490;
      font-size: 13px;
    }

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

    .pay {
      padding: 2px 7px;
      min-width: 43px;
      height: 22px;
      border-radius: 4px;
      background: white;
      border: 1px solid #dbe1e8;
      display: grid;
      place-items: center;
      font-size: 10px;
      font-weight: 800;
      color: #1f2937;
    }@media (max-width: 1100px){
      .nav {
        grid-template-columns: 160px 1fr 190px;
      }
      .nav-links {
        gap: 28px;
      }
      .trust-item {
        padding: 22px 18px;
      }
      .product-grid,
      .features {
        grid-template-columns: repeat(2, 1fr);
      }
      .feature:nth-child(2) {
        border-right: 0;
      }
      .footer-main {
        grid-template-columns: repeat(3, 1fr);
      }
    }@media (max-width: 800px){
      .container {
        width: min(100% - 28px, var(--container));
      }
      .nav {
        height: 72px;
        grid-template-columns: 1fr auto;
      }
      .nav-links,
      .nav-icons {
        display: none;
      }
      .mobile-menu {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: white;
      }
      .trust-inner,
      .category-grid,
      .review-grid,
      .newsletter-box,
      .lifestyle-grid {
        grid-template-columns: 1fr;
      }
      .trust-item,
      .feature {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .trust-item:last-child,
      .feature:last-child {
        border-bottom: 0;
      }
      .product-grid,
      .features {
        grid-template-columns: 1fr;
      }
      .lifestyle-image {
        min-height: 270px;
      }
      .slider-btn {
        display: none;
      }
      .signup {
        grid-template-columns: 1fr;
      }
      .insta-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-main {
        grid-template-columns: 1fr;
      }
      .footer-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }
  
    
/* ═══ Theme system overlay ═══ */
:root[data-theme="light"]{
  --bg:#fff; --bg2:#f6f8fb; --bg3:#eef1f5; --bg4:#e7ebf0;
  --text:#252b33; --text2:#5f6772; --text3:#6f7782; --text4:#a0a7b0;
  --bd:#e7ebf0; --bd2:#dbe1e8;
  --card:#fff; --inp:#fff;
  --topbar-bg:#101418; --topbar-text:rgba(255,255,255,0.86);
  --shadow-card:var(--shadow-soft);
}

/* dark mode tweaks */

/* ═══ Topbar ═══ */
.topbar{height:38px;background:var(--topbar-bg,#101418);display:flex;align-items:center;}
.topbar-inner{width:min(var(--container,1180px),calc(100% - 48px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.topbar-promo{font-size:12px;letter-spacing:.02em;color:var(--topbar-text,rgba(255,255,255,0.86));}
.topbar-right{display:flex;align-items:center;gap:14px;}
.tb-btn{background:none;border:none;color:rgba(255,255,255,0.78);font-size:12px;font-family:inherit;cursor:pointer;padding:0;letter-spacing:.02em;transition:color .2s;}
.tb-btn:hover{color:#fff;}
.tb-sep{color:rgba(255,255,255,0.25);font-size:11px;}

/* ═══ ONES PNG logo replaces text logo ═══ */
.brand{display:inline-flex;align-items:center;width:fit-content;cursor:pointer;}
.brand img.brand-logo{height:46px;width:auto;max-width:148px;object-fit:contain;display:block;}
.brand-mark, .brand-name{display:none;} /* hide old text logo if needed */
.footer .brand img.brand-logo{height:42px;}

/* ═══ Cart badge fix ═══ */
.icon-btn{position:relative;}
.cart-badge{display:grid;}

/* ═══ Edit Mode ═══ */
.edit-banner{position:fixed;top:0;left:0;right:0;background:var(--blue);color:#fff;padding:.6rem 1.5rem;z-index:10000;align-items:center;justify-content:space-between;font-size:.78rem;display:none;flex-wrap:wrap;gap:.5rem;}
.edit-banner.active{display:flex;}
.edit-banner-actions{display:flex;gap:.5rem;}
.edit-banner button{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4);padding:.3rem .9rem;font-size:.72rem;cursor:pointer;border-radius:4px;font-family:inherit;}
.edit-banner button.danger{background:rgba(229,83,83,.25);border-color:rgba(229,83,83,.5);}
body.edit-mode [data-editable]{outline:2px dashed rgba(0,111,214,.4);cursor:pointer;position:relative;}
body.edit-mode [data-editable]:hover{outline:2px solid var(--blue);}
body.edit-mode [data-editable]::before{content:'✎ 'attr(data-edit-hint);position:absolute;top:-22px;left:0;background:var(--blue);color:#fff;font-size:.62rem;padding:2px 7px;letter-spacing:.08em;text-transform:uppercase;font-family:'Inter',sans-serif;z-index:5;white-space:nowrap;opacity:0;transition:opacity .2s;border-radius:3px 3px 0 0;}
body.edit-mode [data-editable]:hover::before{opacity:1;}
body.preview-mobile main, body.preview-mobile .header, body.preview-mobile .topbar, body.preview-mobile footer{max-width:420px;margin:0 auto;}

/* ═══ Panels & Modals ═══ */
.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;opacity:0;pointer-events:none;transition:opacity .3s;}
.panel-overlay.open{opacity:1;pointer-events:auto;}
.search-panel{position:fixed;top:0;left:0;right:0;background:var(--bg);z-index:600;padding:1.5rem 2rem;box-shadow:var(--shadow);transform:translateY(-100%);transition:transform .3s;}
.search-panel.open{transform:translateY(0);}
.search-input-wrap{max-width:700px;margin:0 auto;display:flex;align-items:center;gap:1rem;background:var(--soft);border:1px solid var(--bd2);border-radius:8px;padding:.75rem 1rem;}
.search-input-wrap input{flex:1;background:none;border:none;color:var(--text);font-size:1rem;font-family:inherit;outline:none;}
.search-close{background:none;border:none;color:var(--text3);font-size:1.1rem;cursor:pointer;}
.search-results{max-width:700px;margin:.75rem auto 0;}

.cart-panel,.wishlist-panel{position:fixed;top:0;right:0;width:420px;max-width:95vw;height:100vh;background:var(--bg);z-index:600;transform:translateX(100%);transition:transform .3s;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.cart-panel.open,.wishlist-panel.open{transform:translateX(0);}
.cart-panel-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;border-bottom:1px solid var(--bd);}
.cart-panel-head h3{font-size:1rem;font-weight:700;}
.close-btn{background:none;border:none;color:var(--text3);font-size:1.2rem;cursor:pointer;}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.5rem;}
.cart-footer{padding:1.2rem 1.5rem;border-top:1px solid var(--bd);}
.cart-subtotal{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:.55rem;}
.cart-checkout-btn{width:100%;background:var(--blue);color:#fff;border:none;padding:.88rem;font-size:.9rem;font-weight:700;font-family:inherit;border-radius:6px;cursor:pointer;margin-top:.5rem;transition:background .2s;}
.cart-checkout-btn:hover{background:var(--blue-dark);}
.cart-item{display:grid;grid-template-columns:70px 1fr auto;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--bd);align-items:center;}
.cart-item-img{width:70px;height:56px;background:var(--soft);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cart-item-img img{width:100%;height:100%;object-fit:contain;padding:4px;}
.cart-item-name{font-size:.84rem;font-weight:600;color:var(--text);}
.cart-item-type{font-size:.72rem;color:var(--text3);margin-top:.1rem;}
.cart-item-price{font-size:.88rem;font-weight:700;color:var(--blue);}
.cart-item-remove{background:none;border:none;color:var(--text4);cursor:pointer;font-size:1rem;}

/* Toast */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--text);color:var(--bg);padding:.88rem 1.5rem;border-radius:8px;z-index:9000;transform:translateY(100px);opacity:0;transition:all .3s;min-width:200px;box-shadow:var(--shadow);}
.toast.show{transform:translateY(0);opacity:1;}
.toast-title{font-weight:700;font-size:.88rem;margin-bottom:.18rem;}
.toast-msg{font-size:.78rem;opacity:.8;}

/* Product modal */
.product-modal{position:fixed;inset:0;z-index:800;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto;}
.product-modal.open{opacity:1;pointer-events:auto;}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);}
.modal-content{position:relative;z-index:1;background:var(--card);max-width:1000px;margin:2rem auto;display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;}
.modal-img{background:var(--soft);display:flex;flex-direction:column;min-height:460px;}
.modal-img-viewer{flex:1;display:flex;align-items:center;justify-content:center;padding:2.5rem;min-height:320px;}
.modal-img-viewer img{max-width:100%;max-height:340px;object-fit:contain;display:block;}
.modal-gallery{display:flex;gap:.5rem;padding:.75rem 1rem;background:var(--bg3);border-top:1px solid var(--bd);flex-wrap:wrap;}
.gallery-thumb{width:64px;height:64px;background:var(--soft);border:2px solid var(--bd);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;}
.gallery-thumb.selected,.gallery-thumb:hover{border-color:var(--blue);}
.gallery-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;}
.modal-info{padding:2rem;overflow-y:auto;max-height:600px;}
.modal-badge{display:inline-block;background:rgba(0,111,214,.1);color:var(--blue);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .65rem;border-radius:20px;margin-bottom:.6rem;font-weight:600;}
.modal-name{font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:.3rem;}
.modal-sku{font-size:.72rem;color:var(--text3);margin-bottom:1rem;}
.modal-price-row{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.1rem;}
.modal-price{font-size:1.7rem;font-weight:800;color:var(--blue);}
.modal-price-original{font-size:1rem;color:var(--text4);text-decoration:line-through;}
.modal-label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);margin-bottom:.5rem;}
.modal-colors{display:flex;gap:.5rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.color-option{width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;transition:all .15s;}
.color-option.selected,.color-option:hover{transform:scale(1.2);border-color:var(--blue);box-shadow:0 0 0 2px var(--blue);}
.modal-desc{font-size:.83rem;color:var(--text2);line-height:1.75;margin-bottom:1.25rem;}
.modal-add-cart{width:100%;padding:.88rem;background:var(--blue);color:#fff;border:none;font-size:.9rem;font-weight:700;font-family:inherit;border-radius:6px;cursor:pointer;transition:background .2s;margin-bottom:.6rem;}
.modal-add-cart:hover{background:var(--blue-dark);}
.modal-wishlist-btn{width:100%;padding:.8rem;background:none;color:var(--text2);border:1.5px solid var(--bd2);font-size:.85rem;font-family:inherit;border-radius:6px;cursor:pointer;transition:all .2s;}
.modal-wishlist-btn:hover{border-color:var(--blue);color:var(--blue);}

/* Filter buttons */
.products-filter{display:flex;gap:.5rem;flex-wrap:wrap;}
.filter-btn{background:none;border:1px solid var(--bd2);color:var(--text2);padding:.42rem 1rem;font-size:.78rem;cursor:pointer;font-family:inherit;border-radius:20px;transition:all .2s;}
.filter-btn.active,.filter-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);}

/* Product grid (admin-rendered all products) */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;}
.product-grid-card{background:var(--card);border:1px solid var(--bd);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s;box-shadow:var(--shadow-soft);}
.product-grid-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(0,111,214,.2);}
.product-img{height:220px;background:var(--soft);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.product-img svg{width:70%;max-width:200px;}
.product-grid-card:hover .product-img img{transform:scale(1.06);}
.product-badge{position:absolute;top:.75rem;left:.75rem;background:var(--blue);color:#fff;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .55rem;border-radius:3px;font-weight:700;}
.product-wishlist{position:absolute;top:.75rem;right:.75rem;background:rgba(255,255,255,.9);border:none;width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.product-wishlist.active,.product-wishlist:hover{background:var(--blue);color:#fff;}
.product-info{padding:1rem;}
.product-name{font-weight:700;font-size:.9rem;color:var(--text);margin-bottom:.2rem;}
.product-type{font-size:.72rem;color:var(--text3);margin-bottom:.5rem;}
.product-colors{display:flex;gap:.35rem;margin-bottom:.6rem;flex-wrap:wrap;}
.color-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;display:inline-block;}
.product-footer{display:flex;align-items:center;justify-content:space-between;}
.product-price{font-weight:700;font-size:.92rem;color:var(--text);}
.btn-cart{background:rgba(0,111,214,.1);color:var(--blue);border:1px solid rgba(0,111,214,.2);padding:.35rem .75rem;font-size:.75rem;font-weight:600;font-family:inherit;border-radius:4px;cursor:pointer;transition:all .2s;}
.btn-cart:hover{background:var(--blue);color:#fff;}

/* Form helpers */
.btn-primary{background:var(--blue);color:#fff;border:none;padding:.88rem 1.5rem;font-size:.88rem;font-weight:700;font-family:inherit;border-radius:6px;cursor:pointer;width:100%;transition:background .2s;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-outline{background:none;border:1.5px solid var(--bd2);color:var(--text2);padding:.85rem 1.5rem;font-size:.85rem;font-family:inherit;border-radius:6px;cursor:pointer;width:100%;}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:.78rem;color:var(--text2);margin-bottom:.35rem;font-weight:500;}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--inp);border:1px solid var(--bd2);color:var(--text);padding:.75rem 1rem;font-family:inherit;font-size:.88rem;border-radius:6px;outline:none;}
.form-group input:focus,.form-group select:focus{border-color:var(--blue);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.checkout-modal{position:fixed;inset:0;z-index:900;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto;}
.checkout-modal.open{opacity:1;pointer-events:auto;}

/* Reveal animations */
.reveal{opacity:1;transform:none;transition:all .5s ease;}
.reveal.visible{opacity:1;transform:none;}

/* All products section */
.all-products-sec{padding:0 0 70px;}
.all-products-sec .container{display:flex;flex-direction:column;gap:1.5rem;}@media(max-width:800px){
  .nav-links,.nav-icons{display:none;}
  .topbar-promo{font-size:11px;}
  .topbar-right{gap:8px;}
  .insta-grid{grid-template-columns:repeat(2,1fr);}
}


/* ═════════════════════════════════════════════════════════════
   ONES SHOP V2 — Premium homepage detail patch
   Goal: make the live storefront closer to the new reference
   while keeping existing admin/content/cart/wishlist/checkout JS.
   ═════════════════════════════════════════════════════════════ */
:root{
  --ones-blue:#006fd6;
  --ones-ink:#101418;
  --ones-paper:#ffffff;
  --ones-mist:#f5f7fb;
  --ones-line:#e7ebf0;
  --ones-muted:#6f7782;
  --ones-shadow:0 22px 70px rgba(17,24,39,.09);
  --ones-soft-shadow:0 12px 36px rgba(17,24,39,.065);
}
body{letter-spacing:-.01em;background:linear-gradient(180deg,#fff 0%,#fff 72%,#f8fafc 100%);} 
.topbar{background:#0f141b;color:#fff;border:0;}
.topbar-inner{width:min(var(--container),calc(100% - 48px));height:38px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.topbar-promo{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.88;}
.tb-btn{color:#fff;background:transparent;border:0;font-size:12px;letter-spacing:.08em;cursor:pointer;opacity:.9;}
.tb-btn:hover{opacity:1;color:#9bd4ff;}
.header{background:rgba(255,255,255,.86);box-shadow:0 1px 0 rgba(231,235,240,.8);}
.header.scrolled{box-shadow:0 10px 32px rgba(17,24,39,.08);} 
.nav{height:84px;grid-template-columns:210px 1fr 230px;}
.brand-logo{max-height:58px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.04));}
.nav-links{gap:42px;letter-spacing:.01em;}
.nav-links a{cursor:pointer;}
.nav-icons{gap:18px;}
.icon-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:999px;transition:.2s ease;}
.icon-btn:hover{background:#f1f7ff;color:var(--ones-blue);}
.btn{border-radius:8px;height:58px;padding:0 34px;letter-spacing:-.01em;box-shadow:0 18px 34px rgba(0,111,214,.25);} 
.btn:hover{box-shadow:0 22px 40px rgba(0,111,214,.30);}
.trust-bar{margin-top:-48px;}
.trust-inner{border-radius:18px;box-shadow:var(--ones-shadow);backdrop-filter:blur(16px);}
.trust-item{padding:28px 30px;}
.trust-item svg,.feature svg{color:var(--ones-blue);} 
.section-head{margin-bottom:30px;}
.section-title h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;}
.section-title p{font-size:15.5px;}
.view-all{cursor:pointer;}
.category-grid{gap:24px;}
.category-card{min-height:255px;border-radius:16px;background:#f5f7fb;box-shadow:var(--ones-soft-shadow);}
.category-card img{min-height:255px;filter:saturate(.96) contrast(1.02);}
.category-info{padding:19px 22px;grid-template-columns:50px 1fr 34px;}
.category-card:hover .category-arrow{transform:translateX(5px);}
.category-arrow{transition:.2s ease;}
.products,.all-products-sec{padding-top:12px;}
.products-filter{gap:10px;margin-top:6px;}
.filter-btn{border-color:#dfe6ef;background:#fff;padding:.58rem 1.16rem;border-radius:999px;font-weight:700;}
.filter-btn.active,.filter-btn:hover{background:#101418;border-color:#101418;color:#fff;}
.products-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.product-card{border:1px solid var(--ones-line);background:#fff;border-radius:16px;padding:18px;min-height:350px;box-shadow:0 8px 26px rgba(17,24,39,.04);position:relative;overflow:hidden;cursor:pointer;transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;}
.product-card:hover{transform:translateY(-7px);box-shadow:var(--ones-shadow);border-color:rgba(0,111,214,.28);}
.product-card .product-number{position:absolute;left:17px;top:16px;width:28px;height:28px;border-radius:999px;background:#f1f7ff;color:var(--ones-blue);display:grid;place-items:center;font-size:13px;font-weight:900;z-index:3;}
.product-card .product-img{height:165px;background:linear-gradient(180deg,#f9fbfe,#f0f3f8);border-radius:13px;margin:0 0 18px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.product-card .product-img img{width:100%!important;height:100%!important;object-fit:contain!important;padding:18px!important;transition:transform .3s ease;}
.product-card .product-img svg{width:82%;height:auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.12));}
.product-card:hover .product-img img,.product-card:hover .product-img svg{transform:scale(1.045);} 
.product-badge{top:12px;left:auto;right:12px;border-radius:999px;background:var(--ones-blue);padding:.24rem .62rem;letter-spacing:.12em;}
.product-wishlist{top:12px;right:12px;z-index:5;box-shadow:0 8px 18px rgba(17,24,39,.08);} 
.product-badge+.product-wishlist{top:48px;}
.product-info{padding:0;}
.product-name{font-size:18px;color:var(--ones-ink);letter-spacing:-.035em;margin-bottom:3px;}
.product-type{font-size:13px;text-transform:capitalize;color:var(--ones-muted);margin-bottom:10px;}
.product-colors{gap:7px;margin:10px 0 14px;}
.color-dot{width:14px;height:14px;border:1px solid rgba(0,0,0,.14);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.05);} 
.product-footer{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.product-price{font-size:18px;font-weight:900;color:#101418;}
.product-price s{font-size:12px;color:#9ca3af;margin-right:7px;font-weight:600;}
.btn-cart{background:#f1f7ff;border:1px solid #d9ebff;color:var(--ones-blue);border-radius:8px;padding:.52rem .82rem;font-weight:800;}
.btn-cart:hover{background:var(--ones-blue);border-color:var(--ones-blue);color:#fff;}
.why{padding-bottom:64px;}
.features{background:#fff;border:1px solid var(--ones-line);border-radius:18px;padding:28px 18px;box-shadow:var(--ones-soft-shadow);} 
.feature{padding:8px 24px;}
.lifestyle{background:linear-gradient(90deg,#f7f9fc 0%,#eef2f7 100%);}
.lifestyle-grid{min-height:400px;}
.lifestyle h2{font-size:clamp(42px,4.9vw,72px);letter-spacing:-.055em;}
.review-card{border-radius:18px;box-shadow:0 10px 30px rgba(17,24,39,.04);}
.stars{color:var(--ones-blue);}
.newsletter-box{border-radius:22px;box-shadow:var(--ones-soft-shadow);}
.signup button{font-weight:900;letter-spacing:.03em;}
.footer{background:#f6f8fb;}
.footer-main{grid-template-columns:1.45fr .85fr .95fr 1.05fr 1.45fr;}
.footer a{cursor:pointer;}
.modal-content{border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.24);} 
.modal-add-cart,.btn-primary,.cart-checkout-btn{background:var(--ones-blue);border-radius:8px;}
.modal-add-cart:hover,.btn-primary:hover,.cart-checkout-btn:hover{background:#0056b5;}@media(max-width:1100px){.products-grid{grid-template-columns:repeat(3,1fr);} .nav{grid-template-columns:180px 1fr 190px}.nav-links{gap:26px}}@media(max-width:900px){.products-grid{grid-template-columns:repeat(2,1fr)}.trust-inner{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:repeat(2,1fr)}.feature:nth-child(2){border-right:0}.footer-main{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.container,.topbar-inner{width:min(100% - 28px,var(--container));}.topbar-inner{height:auto;min-height:42px;align-items:flex-start;flex-direction:column;padding:8px 0}.nav{height:72px;grid-template-columns:1fr auto}.brand-logo{max-height:48px}.trust-inner,.category-grid,.products-grid,.features,.review-grid{grid-template-columns:1fr}.trust-item,.feature{border-right:0;border-bottom:1px solid var(--ones-line)}.trust-item:last-child,.feature:last-child{border-bottom:0}.product-card{min-height:330px}.lifestyle-grid,.newsletter-box{grid-template-columns:1fr}.lifestyle-image,.newsletter-image{min-height:230px}.footer-main{grid-template-columns:1fr}.footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:14px}}

  

/* === V16 PATCH: restore editable Inspiration / Instagram section from previous layout === */
.social-strip{
  display:block!important;
  padding: 34px 0 42px!important;
  background:#fff!important;
}
.social-strip .section-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:18px!important;
}
.social-strip .section-title h2{
  font-size:24px!important;
  line-height:1.15!important;
  letter-spacing:-.035em!important;
  color:#111827!important;
  margin:0 0 4px!important;
}
.social-strip .section-title p{
  font-size:13px!important;
  color:#667085!important;
  line-height:1.5!important;
  margin:0!important;
}
.social-strip .view-all{
  display:inline-flex!important;
  color:var(--ones-ref-blue,#006fd6)!important;
  font-size:13px!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.social-strip .insta-grid{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:14px!important;
}
.social-strip .insta-grid img{
  width:100%!important;
  aspect-ratio:1.34/1!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:8px!important;
  filter:saturate(.96)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.055)!important;
  cursor:pointer!important;
}@media(max-width:960px){
  .social-strip{display:block!important;padding:28px 0 34px!important;}
  .social-strip .insta-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;}
  .social-strip .insta-grid img{aspect-ratio:1.18/1!important;border-radius:10px!important;}
}@media(max-width:760px){
  .social-strip{display:block!important;padding:22px 0 26px!important;}
  .social-strip .section-head{display:flex!important;align-items:flex-end!important;margin-bottom:12px!important;}
  .social-strip .section-title h2{font-size:21px!important;}
  .social-strip .section-title p{font-size:11px!important;max-width:260px!important;}
  .social-strip .view-all{font-size:11px!important;}
  .social-strip .insta-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
  .social-strip .insta-grid img{aspect-ratio:1/1!important;border-radius:8px!important;box-shadow:none!important;}
}@media(max-width:430px){
  .social-strip .insta-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .social-strip .insta-grid img{aspect-ratio:1/1!important;}
}

/* ──────────────────────────────────────────────────────────────────
   ones-v5-polish-css
   Originally <style id="ones-v5-polish-css"> at index.php lines 1632–1652
   ────────────────────────────────────────────────────────────────── */
:root{
  --v5-bg:#ffffff;--v5-soft:#f6f8fb;--v5-soft2:#eef2f7;--v5-ink:#101418;--v5-muted:#68707b;
  --v5-line:#e7ebf0;--v5-blue:#006fd6;--v5-blue2:#0056b5;--v5-radius:18px;
  --v5-shadow:0 24px 70px rgba(17,24,39,.10);--v5-shadow2:0 12px 34px rgba(17,24,39,.075);
}
html{overflow-x:hidden} body{overflow-x:hidden;background:var(--v5-bg)}
.container{width:min(1180px,calc(100% - 48px));}
.header{box-shadow:0 1px 0 rgba(231,235,240,.76)}
.nav{height:78px;grid-template-columns:minmax(150px,200px) 1fr minmax(180px,230px)}
.brand-logo{object-fit:contain;max-width:154px;max-height:58px}.nav-links{gap:38px}.nav-links a{font-size:14px;letter-spacing:.02em}
.trust-inner{border-radius:18px;box-shadow:var(--v5-shadow2)}.trust-item{padding:25px 28px}.ones-config-icon{width:48px;height:48px;border-radius:999px;background:#f1f7ff;color:var(--v5-blue);display:grid;place-items:center;font-size:25px;line-height:1;border:1px solid #dbeafe;flex-shrink:0}
section{padding:82px 0}.section-head{margin-bottom:30px;gap:22px}.section-title h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.035em}.section-title p{font-size:15px;color:var(--v5-muted)}
.category-grid{gap:24px}.category-card{border-radius:18px;min-height:270px;box-shadow:0 10px 28px rgba(17,24,39,.05);transition:transform .28s ease,box-shadow .28s ease}.category-card:hover{transform:translateY(-5px);box-shadow:var(--v5-shadow2)}.category-card img{min-height:270px}.category-info{grid-template-columns:54px 1fr 30px;padding:20px 22px}.category-icon{width:50px;height:50px}
.products{padding-top:24px}.products-grid,.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.filter-tabs{gap:10px;flex-wrap:wrap}.filter-btn{min-height:42px;border-radius:999px;padding:0 18px}
.product-card{border-radius:20px!important;padding:16px!important;min-height:366px!important;background:#fff!important;border:1px solid var(--v5-line)!important;box-shadow:0 8px 28px rgba(17,24,39,.045)!important}.product-card:hover{transform:translateY(-7px)!important;box-shadow:var(--v5-shadow2)!important}.product-card .product-img{height:185px!important;border-radius:16px!important;background:linear-gradient(180deg,#fbfcfe,#eef2f7)!important}.product-card h3{font-size:17px!important;letter-spacing:-.015em}.product-card p,.product-type{color:var(--v5-muted)!important;font-size:13px!important}.product-actions{display:grid!important;grid-template-columns:1fr 44px!important;gap:10px!important;margin-top:14px}.btn-cart{height:44px!important;border-radius:12px!important;font-weight:800!important}.btn-wish{width:44px!important;height:44px!important;border-radius:12px!important}
.features{border:1px solid var(--v5-line);border-radius:20px;padding:24px;background:#fff;box-shadow:0 10px 30px rgba(17,24,39,.045)}.feature{padding:12px 24px}.feature .ones-config-icon{margin-right:0}.lifestyle-grid{min-height:410px}.lifestyle-content{padding:76px 0}.lifestyle h2{font-size:clamp(36px,4.4vw,64px)}.lifestyle-image{border-top-left-radius:30px;border-bottom-left-radius:30px}.review-card{border-radius:20px;box-shadow:0 10px 30px rgba(17,24,39,.045)}.newsletter-box{border-radius:24px;box-shadow:var(--v5-shadow2)}.insta-grid{grid-template-columns:repeat(7,1fr);gap:14px}.insta-grid img{height:auto;aspect-ratio:1/1;border-radius:16px}
/* Product detail modal */
.product-modal{padding:28px 16px}.modal-backdrop{background:rgba(6,10,18,.68)!important;backdrop-filter:blur(12px)}.modal-content{width:min(1120px,calc(100% - 24px));max-width:1120px!important;margin:0 auto!important;border-radius:28px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 40px 120px rgba(0,0,0,.32)!important;grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr)!important}.modal-img{background:linear-gradient(180deg,#f8fafc,#eef2f7)!important;min-height:620px!important}.modal-img-viewer{min-height:480px!important;padding:42px!important}.modal-img-viewer img{max-height:450px!important;filter:drop-shadow(0 24px 22px rgba(17,24,39,.16))}.modal-gallery{padding:16px!important;gap:10px!important;background:#fff!important;border-top:1px solid var(--v5-line)!important}.gallery-thumb{width:74px!important;height:58px!important;border-radius:12px!important;background:#f8fafc!important}.gallery-thumb.selected{border:2px solid var(--v5-blue)!important}.modal-info{padding:38px 40px!important;max-height:none!important}.modal-badge{border-radius:999px!important;padding:7px 12px!important;font-size:11px!important;font-weight:800!important}.modal-name{font-size:clamp(28px,3vw,40px)!important;letter-spacing:-.05em!important;line-height:1.06!important}.modal-sku{letter-spacing:.12em;text-transform:uppercase}.modal-price{font-size:30px!important;color:var(--v5-blue)!important}.modal-desc{font-size:15px!important;color:var(--v5-muted)!important}.modal-label{font-size:12px!important;letter-spacing:.14em!important;color:#59616c!important;font-weight:800!important}.modal-add-cart,.modal-wishlist-btn{height:52px!important;border-radius:14px!important;font-weight:800!important}.lens-config{border-radius:18px!important;background:#f8fafc!important;border:1px solid var(--v5-line)!important}.lens-option{border-radius:14px!important}.lens-option.selected{border-color:var(--v5-blue)!important;background:#f1f7ff!important}.lens-summary{border-radius:16px!important;background:#fff!important;border:1px solid var(--v5-line)!important}
.checkout-modal .checkout-content{border-radius:26px!important;box-shadow:0 40px 120px rgba(0,0,0,.30)!important}@media(max-width:1180px){.products-grid,.product-grid{grid-template-columns:repeat(3,1fr)}.nav-links{gap:24px}.modal-content{grid-template-columns:1fr 1fr!important}.modal-img{min-height:560px!important}}@media(max-width:960px){.container{width:min(100% - 36px,1180px)}.topbar-inner{gap:8px}.nav{grid-template-columns:1fr auto;height:72px}.nav-links{display:none}.nav-icons{gap:16px}.trust-bar{margin-top:0}.trust-inner{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(2){border-right:0}.category-grid{grid-template-columns:repeat(2,1fr)}.category-card:last-child{grid-column:1/-1}.products-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:repeat(2,1fr)}.feature:nth-child(2){border-right:0}.lifestyle-grid,.newsletter-box{grid-template-columns:1fr}.lifestyle-image{min-height:330px;border-radius:0}.review-grid{grid-template-columns:1fr}.insta-grid{grid-template-columns:repeat(4,1fr)}.footer-main{grid-template-columns:repeat(2,1fr)}.modal-content{display:block!important;width:min(720px,calc(100% - 20px))!important}.modal-img{min-height:0!important}.modal-img-viewer{min-height:340px!important;padding:28px!important}.modal-info{padding:30px!important}.modal-gallery{overflow-x:auto;flex-wrap:nowrap!important}.checkout-wrap,.checkout-content{width:min(720px,calc(100% - 20px))!important}}@media(max-width:640px){.container,.topbar-inner{width:calc(100% - 28px)}section{padding:58px 0}.topbar-inner{justify-content:center;text-align:center}.topbar-promo{font-size:12px}.brand-logo{max-width:126px;max-height:46px}.nav-icons{gap:12px}.icon-btn{width:22px;height:22px}.btn{height:52px;padding:0 24px;border-radius:14px}.trust-inner,.category-grid,.products-grid,.product-grid,.features,.review-grid{grid-template-columns:1fr!important}.trust-item,.feature{border-right:0!important;border-bottom:1px solid var(--v5-line);padding:20px}.trust-item:last-child,.feature:last-child{border-bottom:0}.category-card,.category-card img{min-height:230px}.section-head{display:block}.view-all{margin-top:12px}.product-card{min-height:auto!important}.product-card .product-img{height:175px!important}.filter-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.filter-btn{white-space:nowrap}.newsletter-content{padding:32px 22px}.signup{grid-template-columns:1fr!important}.insta-grid{grid-template-columns:repeat(2,1fr)}.footer-main{grid-template-columns:1fr}.footer-bottom-inner{display:block}.modal-content{width:calc(100% - 16px)!important;border-radius:22px!important}.modal-img-viewer{min-height:280px!important;padding:18px!important}.modal-img-viewer img{max-height:255px!important}.modal-info{padding:24px 18px!important}.modal-name{font-size:28px!important}.modal-price{font-size:25px!important}.lens-grid{grid-template-columns:1fr!important}.checkout-modal{padding:10px}.cart-panel,.wishlist-panel{width:min(390px,100vw)!important}.search-panel{padding:12px}.search-input-wrap{border-radius:16px}.ones-edit-fab{right:14px!important;bottom:14px!important}}

/* ──────────────────────────────────────────────────────────────────
   ones-v14-reference-layout
   Originally <style id="ones-v14-reference-layout"> at index.php lines 1653–1864
   ────────────────────────────────────────────────────────────────── */
/* ONES SHOP V14 — Reference layout only. All cart/checkout/lens/admin JS remains unchanged. */
:root{
  --v14-blue:#006fd6;
  --v14-ink:#111827;
  --v14-muted:#667085;
  --v14-line:#e8edf3;
  --v14-soft:#f6f9fd;
  --v14-card:#ffffff;
  --v14-shadow:0 14px 34px rgba(15,23,42,.07);
  --v14-max:1180px;
}
html{scroll-behavior:smooth}
body{background:#fff!important;color:var(--v14-ink);font-family:'DM Sans','Noto Sans Thai',system-ui,sans-serif!important}
.topbar{display:none!important}
.container{width:min(calc(100% - 64px),var(--v14-max))!important;margin-inline:auto!important}
.header{position:sticky;top:0;z-index:700;background:rgba(255,255,255,.92)!important;border-bottom:1px solid #edf1f5;box-shadow:0 10px 28px rgba(15,23,42,.035);backdrop-filter:blur(18px)}
.nav{height:70px!important;display:grid!important;grid-template-columns:185px 1fr 210px!important;align-items:center!important}
.brand-logo{max-height:48px!important;max-width:130px!important;object-fit:contain}
.nav-links{display:flex!important;justify-content:center;gap:42px!important}
.nav-links a{font-size:14px!important;font-weight:700;color:#202734;text-decoration:none;position:relative;padding:25px 0 20px}
.nav-links a:first-child,.nav-links a:hover{color:var(--v14-blue)!important}
.nav-links a:first-child:after,.nav-links a:hover:after{content:"";position:absolute;left:0;right:0;bottom:14px;height:3px;border-radius:4px;background:var(--v14-blue)}
.nav-icons{display:flex!important;justify-content:flex-end;align-items:center;gap:20px!important}
.icon-btn{width:28px!important;height:28px!important;color:#111827!important;background:transparent!important;border-radius:50%;position:relative}
.icon-btn:hover{color:var(--v14-blue)!important;background:#f2f8ff!important}
.icon-btn svg{width:22px;height:22px}
.menu-btn{display:none!important}
.btn{height:43px!important;padding:0 22px!important;border-radius:5px!important;background:linear-gradient(180deg,#0978e7,#0060c7)!important;color:#fff!important;box-shadow:0 12px 20px rgba(0,111,214,.18)!important;font-size:14px!important;font-weight:800!important;gap:12px!important}
.glass-img{position:absolute!important;object-fit:contain!important;filter:drop-shadow(0 12px 10px rgba(0,0,0,.12))}

/* Trust bar */
.trust-bar{margin-top:-22px!important;position:relative;z-index:10}
.trust-inner{display:grid!important;grid-template-columns:repeat(4,1fr)!important;background:#fff!important;border:1px solid var(--v14-line)!important;border-radius:7px!important;box-shadow:var(--v14-shadow)!important;overflow:hidden}
.trust-item{padding:19px 25px!important;display:grid!important;grid-template-columns:36px 1fr!important;gap:14px!important;align-items:center!important;border-right:1px solid var(--v14-line)!important}
.trust-item:last-child{border-right:0!important}
.trust-item svg{width:28px!important;height:28px!important;color:var(--v14-blue)!important;stroke-width:1.7!important}
.trust-item strong{font-size:13px!important;font-weight:900!important;color:#1f2937!important;margin-bottom:2px!important;display:block}
.trust-item span{font-size:11.5px!important;color:#7a8595!important}

/* Categories reference layout */
section{padding:38px 0!important}
.categories{padding-top:28px!important;padding-bottom:14px!important}
.category-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:20px!important}
.category-card{height:198px!important;min-height:0!important;border-radius:8px!important;background:#f6f8fb!important;box-shadow:0 8px 24px rgba(15,23,42,.055)!important;overflow:hidden!important;border:1px solid #eef2f7!important;position:relative!important}
.category-card img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;min-height:0!important;filter:saturate(.98) contrast(1.02)!important;opacity:1!important}
.category-info{position:relative!important;z-index:2!important;display:block!important;padding:24px 22px!important;background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.38) 58%,rgba(255,255,255,0))!important;height:100%!important;color:#1f2937!important}
.category-icon{display:none!important}
.category-info h3{font-size:22px!important;font-weight:900!important;margin:0 0 6px!important;color:#1f2937!important;letter-spacing:-.035em}
.category-info p{font-size:13px!important;color:#667085!important;line-height:1.45!important;max-width:180px!important}
.category-arrow{position:absolute!important;left:22px!important;top:92px!important;color:var(--v14-blue)!important;font-size:22px!important;background:transparent!important}

/* Best selling and all products */
.products,.all-products-sec{padding-top:20px!important;padding-bottom:24px!important}
.section-head{display:flex!important;align-items:end!important;justify-content:space-between!important;margin-bottom:16px!important}
.section-title h2{font-size:30px!important;line-height:1.1!important;letter-spacing:-.04em!important;margin:0!important;color:#121826!important}
.section-title p{font-size:13px!important;color:#7b8493!important;margin-top:5px!important}
.view-all{font-size:13px!important;color:var(--v14-blue)!important;font-weight:800!important;text-decoration:none!important}
.product-grid,.products-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
.product-card,.product-grid-card{background:#fff!important;border:1px solid #e8edf3!important;border-radius:9px!important;box-shadow:0 5px 18px rgba(15,23,42,.035)!important;padding:16px!important;min-height:244px!important;overflow:hidden!important;transition:.22s ease!important;cursor:pointer!important}
.product-card:hover,.product-grid-card:hover{transform:translateY(-4px)!important;box-shadow:0 14px 30px rgba(15,23,42,.08)!important;border-color:#d6e7fb!important}
.product-card .product-number{display:grid!important;left:14px!important;top:12px!important;width:27px!important;height:27px!important;background:#fff!important;border:1px solid #d8e9ff!important;color:var(--v14-blue)!important;border-radius:50%!important;font-weight:900!important;z-index:5!important}
.product-card>img{width:100%!important;height:108px!important;object-fit:contain!important;margin:16px 0 10px!important;border-radius:6px!important;background:#fafcff!important}
.product-card h3{font-size:15px!important;font-weight:900!important;color:#1f2937!important;letter-spacing:-.03em!important;margin:0 0 4px!important}
.product-card p{font-size:12px!important;line-height:1.45!important;color:#6b7280!important;margin:0 0 7px!important;min-height:33px!important}
.product-card .price{font-size:15px!important;font-weight:900!important;color:#111827!important;margin-bottom:8px!important}
.dots{display:flex!important;gap:7px!important}
.dot{width:10px!important;height:10px!important;border-radius:50%!important;background:#111!important;border:1px solid #ddd}
.product-img{height:150px!important;background:#fbfcfe!important;border-radius:8px!important;margin-bottom:12px!important}
.product-img img{object-fit:contain!important;padding:18px!important}
.product-badge{z-index:4!important;top:10px!important;right:10px!important;background:var(--v14-blue)!important;border-radius:999px!important}
.product-wishlist{left:10px!important;right:auto!important;top:10px!important;z-index:5!important;background:rgba(255,255,255,.94)!important;border:1px solid #e5edf6!important}
.product-name{font-size:15px!important;font-weight:900!important;color:#1f2937!important}
.product-type{font-size:12px!important;color:#6b7280!important}
.product-price{font-size:15px!important;font-weight:900!important}
.products-filter{gap:8px!important}
.filter-btn{height:36px!important;border-radius:999px!important;padding:0 14px!important;font-size:12px!important}

/* Why / banner / reviews / newsletter / inspiration */
.why{padding-top:18px!important;padding-bottom:20px!important}
.features{display:grid!important;grid-template-columns:repeat(4,1fr)!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;padding:10px 0!important}
.feature{padding:6px 24px!important;display:grid!important;grid-template-columns:46px 1fr!important;gap:16px!important;border-right:1px solid #e8edf3!important}
.feature:last-child{border-right:0!important}
.feature svg{width:42px!important;height:42px!important;color:var(--v14-blue)!important;stroke-width:1.55!important}
.feature strong{font-size:14px!important;font-weight:900!important;color:#1f2937!important}
.feature span{font-size:12px!important;color:#6b7280!important;line-height:1.4!important}
.lifestyle{padding:0!important;background:#f4f7fb!important;overflow:hidden!important}
.lifestyle-grid{min-height:230px!important;display:grid!important;grid-template-columns:44% 56%!important;align-items:center!important}
.lifestyle-content{padding:38px 0 44px 34px!important;z-index:2!important}
.lifestyle h2{font-size:44px!important;line-height:1.08!important;letter-spacing:-.055em!important;margin:8px 0 14px!important}
.lifestyle p{font-size:13px!important;color:#667085!important;line-height:1.65!important;max-width:350px!important}
.lifestyle-image{height:230px!important;min-height:230px!important;background-image:url('/assets/reference/banner-reference.jpg')!important;background-size:cover!important;background-position:center!important;border-radius:0!important}
.reviews{padding-top:34px!important;padding-bottom:24px!important}
.review-wrap{position:relative}
.review-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:20px!important}
.review-card{border:1px solid #e8edf3!important;border-radius:8px!important;padding:17px!important;box-shadow:0 5px 18px rgba(15,23,42,.035)!important;min-height:112px!important;background:#fff!important}
.review-card img{width:48px!important;height:48px!important}
.stars{color:var(--v14-blue)!important;font-size:14px!important;letter-spacing:2px}
.review-card strong{font-size:14px!important;color:#1f2937!important}
.review-card p{font-size:12px!important;line-height:1.5!important;color:#6b7280!important}
.newsletter{padding-top:8px!important;padding-bottom:24px!important}
.newsletter-box{display:grid!important;grid-template-columns:42% 58%!important;min-height:132px!important;border:1px solid #e8edf3!important;border-radius:8px!important;box-shadow:0 6px 20px rgba(15,23,42,.035)!important;overflow:hidden!important;background:#fff!important}
.newsletter-image{min-height:132px!important;background-image:url('/assets/reference/newsletter-reference.jpg')!important;background-size:cover!important;background-position:center!important}
.newsletter-content{padding:24px 34px!important}
.newsletter-content span{font-size:12px!important;color:#667085!important}
.newsletter-content h2{font-size:26px!important;letter-spacing:-.04em!important;margin:3px 0 4px!important}
.newsletter-content p{font-size:13px!important;color:#667085!important}
.signup{display:grid!important;grid-template-columns:1fr 190px!important;gap:10px!important;margin-top:13px!important}
.signup input{height:40px!important;border-radius:5px!important}
.signup button{height:40px!important;border-radius:5px!important;background:var(--v14-blue)!important;color:#fff!important}
.instagram{padding-top:0!important;padding-bottom:24px!important}
.insta-grid{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:14px!important}
.insta-grid img{height:auto!important;aspect-ratio:1.34/1!important;border-radius:8px!important;object-fit:cover!important}

/* Footer and payment row */
.footer{background:#fbfcfe!important;border-top:1px solid #e8edf3!important;padding-top:28px!important}
.footer-main{display:grid!important;grid-template-columns:1.6fr .8fr .95fr .95fr 1.05fr!important;gap:38px!important;padding-bottom:24px!important}
.footer-logo{max-width:130px!important;margin-bottom:12px!important}
.footer h3{font-size:14px!important;margin-bottom:12px!important;color:#1f2937!important;font-weight:900!important}
.footer p,.footer a,.footer li{font-size:12px!important;color:#667085!important;line-height:1.75!important}
.footer-bottom{border-top:1px solid #e8edf3!important;padding:14px 0!important}
.footer-bottom-inner{display:flex!important;align-items:center!important;justify-content:space-between!important}
.payment-icons,.payment-logos{display:flex!important;gap:12px!important;align-items:center!important;flex-wrap:nowrap!important}
.payment-icons img,.payment-logos img{height:18px!important;max-width:52px!important;object-fit:contain!important}

/* Mobile / tablet navigation to match reference */
@media(max-width:1024px){
  .container{width:min(calc(100% - 48px),900px)!important}
  .nav{height:72px!important;grid-template-columns:155px 1fr 185px!important}
  .nav-links{gap:28px!important}
  .nav-links a{font-size:13px!important}
  .hero{min-height:390px!important}
  .hero-grid{min-height:390px!important;grid-template-columns:50% 50%!important}
  .hero-content{padding-left:26px!important;padding-top:58px!important}
  .hero h1{font-size:42px!important}
  .model-wrap{left:47%!important}
  .hero-products{left:58px!important;width:560px!important;bottom:5px!important}
  .glass-1{width:285px!important}.glass-2{left:345px!important;width:175px!important}.stone{width:510px!important}
  .trust-item{padding:17px 18px!important;gap:10px!important}
  .category-card{height:166px!important}
  .product-grid,.products-grid{gap:16px!important}
  .features{grid-template-columns:repeat(4,1fr)!important}
  .feature{padding:6px 12px!important;grid-template-columns:40px 1fr!important}
  .feature svg{width:36px!important;height:36px!important}
  .lifestyle-grid{grid-template-columns:45% 55%!important}
  .review-grid{grid-template-columns:repeat(3,1fr)!important}
  .footer-main{grid-template-columns:1.3fr repeat(4,1fr)!important;gap:22px!important}
}@media(max-width:760px){
  .container{width:calc(100% - 28px)!important}
  .header{position:sticky!important}
  .nav{height:82px!important;grid-template-columns:1fr auto auto auto!important;gap:18px!important;padding:0 2px!important}
  .brand-logo{max-width:132px!important;max-height:52px!important}
  .nav-links{display:none!important}
  .nav-icons{display:flex!important;gap:18px!important}
  .nav-icons .icon-btn:nth-child(2),.nav-icons .icon-btn:nth-child(3){display:none!important}
  .menu-btn{display:grid!important;width:34px!important;height:34px!important;background:transparent!important;border:0!important;color:#111827!important}
  .trust-bar{margin-top:-26px!important}
  .trust-inner{grid-template-columns:repeat(4,1fr)!important;border-radius:8px!important}
  .trust-item{display:flex!important;flex-direction:column!important;text-align:center!important;gap:6px!important;padding:14px 6px!important}
  .trust-item svg{width:25px!important;height:25px!important}
  .trust-item strong{font-size:11px!important;line-height:1.25!important}
  .trust-item span{font-size:9.5px!important;line-height:1.25!important}
  section{padding:24px 0!important}
  .category-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
  .category-card{height:126px!important;border-radius:9px!important}
  .category-info{padding:14px 12px!important;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.45))!important}
  .category-info h3{font-size:15px!important;line-height:1.1!important}
  .category-info p{font-size:10px!important;max-width:90px!important}
  .category-arrow{top:56px!important;left:12px!important;font-size:16px!important}
  .section-head{align-items:flex-end!important;margin-bottom:12px!important}
  .section-title h2{font-size:21px!important}
  .section-title p{font-size:11px!important}
  .product-grid,.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .product-card,.product-grid-card{padding:10px!important;border-radius:8px!important;min-height:205px!important}
  .product-card .product-number{width:22px!important;height:22px!important;font-size:11px!important;left:9px!important;top:8px!important}
  .product-card>img{height:78px!important;margin:18px 0 7px!important}
  .product-card h3,.product-name{font-size:12px!important}
  .product-card p,.product-type{font-size:10px!important;min-height:28px!important}
  .product-card .price,.product-price{font-size:12px!important}
  .product-img{height:100px!important}
  .btn-cart{display:none!important}
  .why{padding-top:22px!important}
  .features{grid-template-columns:repeat(4,1fr)!important;gap:0!important;overflow:hidden!important}
  .feature{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;padding:10px 4px!important;gap:7px!important}
  .feature svg{width:30px!important;height:30px!important}
  .feature strong{font-size:10px!important;line-height:1.2!important}
  .feature span{font-size:8.5px!important;line-height:1.2!important}
  .lifestyle{display:none!important}
  .review-grid{grid-template-columns:repeat(3,1fr)!important;gap:9px!important;overflow:visible!important}
  .review-card{padding:10px!important;min-height:98px!important}
  .review-card img{width:38px!important;height:38px!important}
  .review-card p{font-size:9px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .stars{font-size:11px!important;letter-spacing:1px!important}
  .newsletter-box{display:block!important;border-radius:8px!important}
  .newsletter-image{display:none!important}
  .newsletter-content{padding:20px 18px!important;text-align:center!important}
  .newsletter-content h2{font-size:20px!important}
  .signup{grid-template-columns:1fr 132px!important;gap:7px!important}
  .insta-grid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
  .insta-grid img:nth-child(n+5){display:none!important}
  .footer-main{grid-template-columns:repeat(4,1fr)!important;gap:20px 12px!important}
  .footer-main>*:first-child{grid-column:1/-1!important}
  .footer-logo{max-width:110px!important}
  .footer h3{font-size:12px!important}
  .footer p,.footer a,.footer li{font-size:10px!important;line-height:1.55!important}
  .footer-bottom-inner{display:block!important;text-align:left!important}
  .payment-icons,.payment-logos{justify-content:center!important;margin-top:10px!important}
  .payment-icons img,.payment-logos img{height:16px!important}
  .modal-content{width:calc(100% - 16px)!important}
  .checkout-wrap,.checkout-content{width:calc(100% - 16px)!important}
}

/* ──────────────────────────────────────────────────────────────────
   v15-exact-reference-layout
   Originally <style id="v15-exact-reference-layout"> at index.php lines 1866–1889
   ────────────────────────────────────────────────────────────────── */
:root{--ones-ref-blue:#006FE6;--ones-ref-text:#18212f;--ones-ref-muted:#667085;--ones-ref-line:#e7edf5;--ones-ref-shadow:0 10px 34px rgba(15,23,42,.075)}
html{scroll-behavior:smooth;background:#fff!important}
body{background:#fff!important;color:var(--ones-ref-text)!important;font-family:'DM Sans','Noto Sans Thai',system-ui,sans-serif!important;overflow-x:hidden!important}
.topbar{display:none!important}
.container,.topbar-inner{width:min(100% - 112px,1230px)!important;max-width:1230px!important;margin-inline:auto!important}
.header{top:0!important;height:72px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;border-bottom:1px solid #edf2f7!important;box-shadow:0 2px 12px rgba(15,23,42,.025)!important;z-index:1000!important}
.nav{height:72px!important;display:grid!important;grid-template-columns:180px minmax(0,1fr) 210px!important;align-items:center!important;gap:12px!important}
.brand{display:flex!important;align-items:center!important;cursor:pointer!important}
.brand-logo{width:124px!important;height:auto!important;max-height:52px!important;object-fit:contain!important;display:block!important}
.nav-links{display:flex!important;align-items:center!important;justify-content:center!important;gap:42px!important;height:100%!important;white-space:nowrap!important}
.nav-links a{font-size:14px!important;font-weight:800!important;color:#1d2733!important;text-decoration:none!important;position:relative!important;padding:25px 0 22px!important;line-height:1!important}
.nav-links a:first-child,.nav-links a:hover{color:var(--ones-ref-blue)!important}
.nav-links a:first-child:after,.nav-links a:hover:after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:13px!important;height:3px!important;border-radius:9px!important;background:var(--ones-ref-blue)!important}
.nav-icons{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:20px!important}
.icon-btn{background:transparent!important;border:0!important;color:#101828!important;width:28px!important;height:28px!important;display:grid!important;place-items:center!important;border-radius:999px!important;position:relative!important;transition:.18s ease!important}
.icon-btn svg{width:22px!important;height:22px!important;stroke-width:1.75!important}
.icon-btn:hover{background:#f3f8ff!important;color:var(--ones-ref-blue)!important}.menu-btn{display:none!important}
.cart-count{background:var(--ones-ref-blue)!important;color:#fff!important;right:-7px!important;top:-7px!important;border:2px solid #fff!important;min-width:18px!important;height:18px!important;font-size:10px!important}.glass-img{position:absolute!important;object-fit:contain!important;filter:drop-shadow(0 12px 10px rgba(0,0,0,.13))!important}
.trust-bar{position:relative!important;z-index:9!important;margin-top:-23px!important}.trust-inner{display:grid!important;grid-template-columns:repeat(4,1fr)!important;background:#fff!important;border:1px solid var(--ones-ref-line)!important;border-radius:8px!important;box-shadow:var(--ones-ref-shadow)!important;overflow:hidden!important}.trust-item{padding:18px 24px!important;display:grid!important;grid-template-columns:36px 1fr!important;gap:14px!important;align-items:center!important;border-right:1px solid var(--ones-ref-line)!important}.trust-item:last-child{border-right:0!important}.trust-item svg{width:28px!important;height:28px!important;color:var(--ones-ref-blue)!important;stroke-width:1.65!important}.trust-item strong{display:block!important;font-size:13px!important;font-weight:900!important;color:#1f2937!important;margin-bottom:2px!important}.trust-item span{font-size:11.5px!important;line-height:1.35!important;color:#7b8492!important}
section{padding:34px 0!important}.categories{padding-top:28px!important;padding-bottom:12px!important}.category-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:20px!important}.category-card{height:198px!important;min-height:0!important;border-radius:8px!important;background:#f7f9fc!important;border:1px solid #edf2f7!important;box-shadow:0 8px 24px rgba(15,23,42,.055)!important;overflow:hidden!important;position:relative!important}.category-card img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;min-height:0!important;filter:saturate(.98) contrast(1.02)!important;opacity:1!important}.category-info{position:relative!important;z-index:2!important;height:100%!important;display:block!important;padding:24px 22px!important;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.5) 56%,rgba(255,255,255,0))!important}.category-icon{display:none!important}.category-info h3{font-size:22px!important;line-height:1.08!important;font-weight:900!important;letter-spacing:-.04em!important;color:#1f2937!important;margin:0 0 6px!important}.category-info p{font-size:13px!important;line-height:1.45!important;color:#667085!important;max-width:180px!important}.category-arrow{position:absolute!important;left:22px!important;top:92px!important;color:var(--ones-ref-blue)!important;background:transparent!important;font-size:22px!important}
.all-products-sec{display:none!important}.all-products-sec.ref-open{display:block!important}.products{padding-top:19px!important;padding-bottom:24px!important}.section-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;margin-bottom:16px!important}.section-title h2{font-size:30px!important;line-height:1.1!important;letter-spacing:-.045em!important;font-weight:900!important;color:#121826!important;margin:0!important}.section-title p{font-size:13px!important;color:#7b8492!important;margin-top:5px!important}.view-all{font-size:13px!important;color:var(--ones-ref-blue)!important;font-weight:900!important;text-decoration:none!important}.product-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}.product-card{background:#fff!important;border:1px solid #e8edf3!important;border-radius:9px!important;box-shadow:0 5px 18px rgba(15,23,42,.035)!important;padding:16px!important;min-height:244px!important;overflow:hidden!important;cursor:pointer!important;transition:.2s ease!important;position:relative!important}.product-card:hover{transform:translateY(-3px)!important;box-shadow:0 14px 30px rgba(15,23,42,.08)!important;border-color:#d6e7fb!important}.product-card .product-number{display:grid!important;place-items:center!important;position:absolute!important;left:14px!important;top:12px!important;width:27px!important;height:27px!important;border-radius:50%!important;background:#fff!important;border:1px solid #d8e9ff!important;color:var(--ones-ref-blue)!important;font-weight:900!important;z-index:4!important}.product-card>img{width:100%!important;height:108px!important;object-fit:contain!important;margin:16px 0 10px!important;border-radius:6px!important;background:#fafcff!important}.product-card h3{font-size:15px!important;font-weight:900!important;color:#1f2937!important;letter-spacing:-.03em!important;margin:0 0 4px!important}.product-card p{font-size:12px!important;line-height:1.45!important;color:#6b7280!important;margin:0 0 7px!important;min-height:33px!important}.product-card .price{font-size:15px!important;font-weight:900!important;color:#111827!important;margin-bottom:8px!important}.dots{display:flex!important;gap:7px!important}.dot{width:10px!important;height:10px!important;border-radius:50%!important;background:#111!important;border:1px solid #ddd}.dot.gray{background:#a7a7a7!important}.dot.brown{background:#6b432a!important}.dot.green{background:#124b2f!important}.dot.tortoise{background:#8a5d3f!important}.product-img{height:150px!important;background:#fbfcfe!important;border-radius:8px!important;margin-bottom:12px!important}.product-img img{object-fit:contain!important;padding:18px!important}.product-badge{z-index:4!important}.product-wishlist{left:10px!important;right:auto!important;top:10px!important;z-index:5!important}
.why{padding-top:18px!important;padding-bottom:18px!important}.features{display:grid!important;grid-template-columns:repeat(4,1fr)!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;padding:10px 0!important}.feature{padding:6px 24px!important;display:grid!important;grid-template-columns:46px 1fr!important;gap:16px!important;align-items:center!important;border-right:1px solid #e8edf3!important}.feature:last-child{border-right:0!important}.feature svg{width:42px!important;height:42px!important;color:var(--ones-ref-blue)!important;stroke-width:1.55!important}.feature strong{font-size:14px!important;font-weight:900!important;color:#1f2937!important}.feature span{font-size:12px!important;color:#6b7280!important;line-height:1.4!important}.lifestyle{padding:0!important;background:#f4f7fb!important;overflow:hidden!important}.lifestyle-grid{min-height:230px!important;display:grid!important;grid-template-columns:44% 56%!important;align-items:center!important}.lifestyle-content{padding:38px 0 44px 34px!important;z-index:2!important}.lifestyle h2{font-size:44px!important;line-height:1.08!important;letter-spacing:-.055em!important;margin:8px 0 14px!important}.lifestyle p{font-size:13px!important;color:#667085!important;line-height:1.65!important;max-width:350px!important}.lifestyle-image{height:230px!important;min-height:230px!important;background-image:url('/assets/reference/banner-reference.jpg')!important;background-size:cover!important;background-position:center!important;border-radius:0!important}.reviews{padding-top:34px!important;padding-bottom:24px!important}.review-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:20px!important}.review-card{border:1px solid #e8edf3!important;border-radius:8px!important;padding:17px!important;box-shadow:0 5px 18px rgba(15,23,42,.035)!important;min-height:112px!important;background:#fff!important}.review-card img{width:48px!important;height:48px!important}.stars{color:var(--ones-ref-blue)!important;font-size:14px!important;letter-spacing:2px}.newsletter{padding-top:8px!important;padding-bottom:24px!important}.newsletter-box{display:grid!important;grid-template-columns:42% 58%!important;min-height:132px!important;border:1px solid #e8edf3!important;border-radius:8px!important;box-shadow:0 6px 20px rgba(15,23,42,.035)!important;overflow:hidden!important;background:#fff!important}.newsletter-image{min-height:132px!important;background-image:url('/assets/reference/newsletter-reference.jpg')!important;background-size:cover!important;background-position:center!important}.newsletter-content{padding:24px 34px!important}.newsletter-content h2{font-size:26px!important;letter-spacing:-.04em!important;margin:3px 0 4px!important}.signup{display:grid!important;grid-template-columns:1fr 190px!important;gap:10px!important;margin-top:13px!important}.signup input,.signup button{height:40px!important;border-radius:5px!important}.signup button{background:var(--ones-ref-blue)!important;color:#fff!important}.instagram{padding-top:0!important;padding-bottom:24px!important}.insta-grid{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:14px!important}.insta-grid img{height:auto!important;aspect-ratio:1.34/1!important;border-radius:8px!important;object-fit:cover!important}.footer{background:#fbfcfe!important;border-top:1px solid #e8edf3!important;padding-top:28px!important}.footer-main{display:grid!important;grid-template-columns:1.6fr .8fr .95fr .95fr 1.05fr!important;gap:38px!important;padding-bottom:24px!important}.footer-logo{width:126px!important;max-width:126px!important;margin-bottom:12px!important}.footer h3{font-size:14px!important;margin-bottom:12px!important;color:#1f2937!important;font-weight:900!important}.footer p,.footer a,.footer li{font-size:12px!important;color:#667085!important;line-height:1.75!important}.footer-bottom{border-top:1px solid #e8edf3!important;padding:14px 0!important}.footer-bottom-inner{display:flex!important;align-items:center!important;justify-content:space-between!important}.payment-icons,.payment-logos{display:flex!important;gap:12px!important;align-items:center!important;flex-wrap:nowrap!important}.payment-icons img,.payment-logos img{height:18px!important;max-width:54px!important;object-fit:contain!important}.payment-icons img:nth-child(n+6),.payment-logos img:nth-child(n+6){display:none!important}@media(max-width:1024px){.container{width:min(calc(100% - 48px),900px)!important}.nav{height:72px!important;grid-template-columns:154px 1fr 178px!important}.nav-links{gap:28px!important}.nav-links a{font-size:13px!important}.trust-item{padding:17px 18px!important;gap:10px!important}.category-card{height:166px!important}.feature{padding:6px 12px!important;grid-template-columns:40px 1fr!important}.feature svg{width:36px!important;height:36px!important}.footer-main{grid-template-columns:1.25fr repeat(4,1fr)!important;gap:22px!important}}@media(max-width:760px){.container{width:calc(100% - 28px)!important}.header{height:82px!important}.nav{height:82px!important;display:grid!important;grid-template-columns:1fr auto auto!important;gap:18px!important}.brand-logo{width:132px!important;max-width:132px!important}.nav-links{display:none!important}.nav-icons{gap:18px!important}.nav-icons .icon-btn:nth-child(2),.nav-icons .icon-btn:nth-child(3){display:none!important}.menu-btn{display:grid!important;width:34px!important;height:34px!important;background:transparent!important;border:0!important;color:#111827!important}.trust-bar{margin-top:-26px!important}.trust-inner{grid-template-columns:repeat(4,1fr)!important;border-radius:8px!important}.trust-item{display:flex!important;flex-direction:column!important;text-align:center!important;gap:6px!important;padding:14px 6px!important}.trust-item svg{width:25px!important;height:25px!important}.trust-item strong{font-size:11px!important;line-height:1.25!important}.trust-item span{font-size:9.5px!important;line-height:1.25!important}section{padding:24px 0!important}.category-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}.category-card{height:126px!important;border-radius:9px!important}.category-info{padding:14px 12px!important;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5))!important}.category-info h3{font-size:15px!important;line-height:1.1!important}.category-info p{font-size:10px!important;max-width:90px!important}.category-arrow{top:56px!important;left:12px!important;font-size:16px!important}.section-head{align-items:flex-end!important;margin-bottom:12px!important}.section-title h2{font-size:21px!important}.section-title p{font-size:11px!important}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.product-card{padding:10px!important;border-radius:8px!important;min-height:205px!important}.product-card .product-number{width:22px!important;height:22px!important;font-size:11px!important;left:9px!important;top:8px!important}.product-card>img{height:78px!important;margin:18px 0 7px!important}.product-card h3{font-size:12px!important}.product-card p{font-size:10px!important;min-height:28px!important}.product-card .price{font-size:12px!important}.features{grid-template-columns:repeat(4,1fr)!important;overflow:hidden!important}.feature{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;padding:10px 4px!important;gap:7px!important}.feature svg{width:30px!important;height:30px!important}.feature strong{font-size:10px!important;line-height:1.2!important}.feature span{font-size:8.5px!important;line-height:1.2!important}.lifestyle{display:none!important}.review-grid{grid-template-columns:repeat(3,1fr)!important;gap:9px!important}.review-card{padding:10px!important;min-height:98px!important}.review-card img{width:38px!important;height:38px!important}.review-card p{font-size:9px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.stars{font-size:11px!important;letter-spacing:1px!important}.newsletter-box{display:block!important;border-radius:8px!important}.newsletter-image{display:none!important}.newsletter-content{padding:26px 20px!important;text-align:center!important}.newsletter-content:before{content:"✉";display:block;color:var(--ones-ref-blue);font-size:54px;line-height:1;margin-bottom:8px}.newsletter-content h2{font-size:20px!important}.signup{grid-template-columns:1fr 132px!important;gap:8px!important}.insta-grid{display:none!important}.instagram{display:none!important}.footer-main{grid-template-columns:repeat(4,1fr)!important;gap:18px!important}.footer-main>.footer-col:first-child{display:none!important}.footer h3{font-size:13px!important}.footer p,.footer a,.footer li{font-size:11px!important}.footer-bottom-inner{display:flex!important;align-items:center!important;gap:12px!important}.payment-icons img,.payment-logos img{height:16px!important;max-width:45px!important}}@media(max-width:430px){.container{width:calc(100% - 24px)!important}.trust-item{padding:12px 4px!important}.category-card{height:116px!important}.review-card:nth-child(n+4){display:none!important}.footer-main{grid-template-columns:repeat(2,1fr)!important}.footer-bottom-inner{flex-wrap:wrap!important}.payment-icons,.payment-logos{width:100%;justify-content:flex-end!important}}

/* ──────────────────────────────────────────────────────────────────
   untagged-block-at-line-1907
   Originally <style id=""> at index.php lines 1907–1912
   ────────────────────────────────────────────────────────────────── */
@media(max-width:1024px){
}@media(max-width:760px){
  .trust-bar{margin-top:0!important;}
}@media(max-width:430px){
}
</style></head>

/* ──────────────────────────────────────────────────────────────────
   ones-hero-v2-style
   Originally <style id="ones-hero-v2-style"> at index.php lines 2011–2118
   ────────────────────────────────────────────────────────────────── */
/* Reset legacy .hero conflicts when v2 class is present */
  body section.hero.hero-v2{
    background:#f7f9fc !important;
    padding:24px 0 !important;
    margin:0 !important;
    aspect-ratio:auto !important;
    max-height:none !important;
    min-height:auto !important;
    border:0 !important;
    overflow:visible !important;
    max-width:none !important;
    width:100% !important;
  }
  body section.hero.hero-v2 .container{
    width:min(calc(100% - 40px), 1240px);
    margin:0 auto;
    padding:0;
  }
  body section.hero.hero-v2 .hero-card{
    position:relative;
    background:#ffffff;
    background-image:linear-gradient(135deg, #ffffff 0%, #fbfdff 60%, #f0f6fc 100%);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(15,23,42,.06);
  }
  body section.hero.hero-v2 .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    align-items:center;
    min-height:460px;
    position:relative;
    background-size:auto 100%;
    background-position:center right -40px;
    background-repeat:no-repeat;
  }
  body section.hero.hero-v2 .hero-grid::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg,
      #ffffff 0%, rgba(255,255,255,.96) 35%, rgba(255,255,255,.6) 55%, rgba(255,255,255,.05) 75%, rgba(255,255,255,0) 90%);
    pointer-events:none; z-index:1;
  }
  body section.hero.hero-v2 .hero-left{
    padding:48px 40px;
    position:relative; z-index:2;
    max-width:56%;
  }
  body section.hero.hero-v2 .hero-eyebrow{
    display:inline-block;
    font:600 11.5px/1 'Inter','Noto Sans Thai',sans-serif !important;
    letter-spacing:0.16em !important; text-transform:uppercase !important;
    color:#006fd6 !important;
    margin-bottom:14px !important;
  }
  body section.hero.hero-v2 .hero-title{
    font:700 clamp(28px, 4vw, 44px)/1.15 'Inter','Noto Sans Thai',sans-serif !important;
    letter-spacing:-0.02em !important;
    color:#0f172a !important;
    margin:0 0 16px !important;
  }
  body section.hero.hero-v2 .hero-title em{ font-style:normal; color:#006fd6; }
  body section.hero.hero-v2 .hero-sub{
    font:400 14px/1.65 'Inter','Noto Sans Thai',sans-serif !important;
    color:#64748b !important;
    margin:0 0 24px !important;
    max-width:380px;
  }
  body section.hero.hero-v2 .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    padding:13px 26px;
    border-radius:10px;
    font:600 14px/1 'Inter','Noto Sans Thai',sans-serif;
    border:0;
    background:#006fd6; color:#fff;
    text-decoration:none;
    cursor:pointer;
    transition:background .18s ease, transform .15s ease, box-shadow .18s ease;
    white-space:nowrap;
  }
  body section.hero.hero-v2 .btn:hover{
    background:#0f172a; transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(15,23,42,.10);
  }
  body section.hero.hero-v2 .btn-arrow::after{ content:'→'; font-size:16px; }

  @media (max-width: 760px){
    body section.hero.hero-v2{ padding:16px 0 !important; }
    body section.hero.hero-v2 .container{ width:calc(100% - 24px); }
    body section.hero.hero-v2 .hero-card{ border-radius:14px; }
    body section.hero.hero-v2 .hero-grid{
      min-height:380px;
      background-position:top right -20px;
    }
    body section.hero.hero-v2 .hero-grid::before{
      background:linear-gradient(90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 35%,
        rgba(255,255,255,.45) 60%,
        rgba(255,255,255,0)   85%);
    }
    body section.hero.hero-v2 .hero-left{ padding:28px 22px 22px; min-height:380px; max-width:62%; }
    body section.hero.hero-v2 .hero-title{ font-size:clamp(24px, 7vw, 32px) !important; }
    body section.hero.hero-v2 .hero-sub{ font-size:13px !important; max-width:220px; line-height:1.55 !important; margin-bottom:18px !important; }
  }

/* ──────────────────────────────────────────────────────────────────
   ones-v4-live-editor-style
   Originally <style id="ones-v4-live-editor-style"> at index.php lines 3492–3504
   ────────────────────────────────────────────────────────────────── */
.ones-edit-fab{position:fixed;right:18px;bottom:18px;z-index:9999;border:0;border-radius:999px;background:var(--blue,#006fd6);color:#fff;padding:12px 18px;font:700 13px/1.1 "Inter","Noto Sans Thai",sans-serif;box-shadow:0 12px 35px rgba(0,111,214,.32);cursor:pointer;display:flex;align-items:center;gap:8px}
  .ones-edit-fab:hover{transform:translateY(-2px)}
  body.edit-mode{padding-top:46px}
  body.edit-mode .ones-edit-fab{display:none}
  .ones-config-icon{width:48px;height:48px;display:grid;place-items:center;color:var(--blue,#006fd6);font-size:30px;line-height:1;border-radius:999px;background:rgba(0,111,214,.07);border:1px solid rgba(0,111,214,.12);flex:0 0 auto}
  .trust-item .ones-config-icon{width:46px;height:46px;font-size:28px}
  .feature .ones-config-icon{width:50px;height:50px;font-size:30px}
  body.edit-mode [data-edit-key]{outline:2px dashed rgba(0,111,214,.36)!important;outline-offset:3px;cursor:pointer!important;position:relative}
  body.edit-mode [data-edit-key]:hover{outline-style:solid!important;outline-color:var(--blue,#006fd6)!important}
  .edit-banner strong{letter-spacing:.02em}
  .ones-edit-mini{font-size:11px;opacity:.78;margin-left:8px}@media(max-width:640px){.ones-edit-fab{right:12px;bottom:12px;padding:11px 14px;font-size:12px}.edit-banner{padding:.55rem .8rem}.edit-banner-actions{width:100%;justify-content:flex-start}}

/* ──────────────────────────────────────────────────────────────────
   ones-v6-style
   Originally <style id="ones-v6-style"> at index.php lines 3786–3828
   ────────────────────────────────────────────────────────────────── */
.ones-edit-fab{display:none!important}
  body:not(.edit-mode) .edit-banner{display:none!important}

  /* product badges must always sit above product images */
  .product-card{position:relative;overflow:hidden;isolation:isolate}
  .product-badge{z-index:20!important;top:14px!important;right:14px!important;left:auto!important;position:absolute!important;box-shadow:0 8px 18px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
  .product-img{position:relative;z-index:1}.product-wishlist{z-index:22!important}.product-number{z-index:22!important}

  /* Device preview when opened from Admin */
  body.v6-device-preview{background:#e9edf4!important;min-height:100vh;padding:26px 0!important}
  body.v6-device-preview::before{content:attr(data-preview-label);position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:99999;background:#101418;color:#fff;border-radius:999px;padding:7px 14px;font:700 12px/1 Inter,Noto Sans Thai,sans-serif;letter-spacing:.02em;box-shadow:0 8px 30px rgba(0,0,0,.2)}
  body.v6-device-preview main,body.v6-device-preview .header,body.v6-device-preview .topbar,body.v6-device-preview footer{margin-left:auto!important;margin-right:auto!important;background:#fff}
  body.v6-preview-mobile main,body.v6-preview-mobile .header,body.v6-preview-mobile .topbar,body.v6-preview-mobile footer{max-width:390px!important;width:390px!important;box-shadow:0 26px 80px rgba(17,24,39,.18)}
  body.v6-preview-tablet main,body.v6-preview-tablet .header,body.v6-preview-tablet .topbar,body.v6-preview-tablet footer{max-width:820px!important;width:820px!important;box-shadow:0 26px 80px rgba(17,24,39,.16)}

  /* Product modal refinement */
  .product-modal{padding:30px 16px!important}
  .product-modal .modal-backdrop{background:rgba(5,10,18,.72)!important;backdrop-filter:blur(16px)}
  .product-modal .modal-content{width:min(1160px,calc(100% - 24px))!important;max-width:1160px!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr)!important;background:#fff!important;border-radius:30px!important;overflow:hidden!important;box-shadow:0 44px 140px rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.18)}
  .product-modal .modal-img{min-height:640px!important;background:linear-gradient(145deg,#f8fafc 0%,#eef3f8 62%,#e7edf4 100%)!important;display:grid!important;grid-template-rows:1fr auto!important;position:relative!important;overflow:hidden!important}
  .product-modal .modal-img::before{content:'';position:absolute;inset:46px;border:1px solid rgba(15,23,42,.06);border-radius:28px;pointer-events:none;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.88),rgba(255,255,255,0) 58%)}
  .product-modal .modal-img-viewer{position:relative;z-index:2;min-height:500px!important;padding:54px!important;display:grid!important;place-items:center!important}
  .product-modal .modal-img-viewer img{width:100%!important;max-width:620px!important;height:auto!important;max-height:430px!important;object-fit:contain!important;filter:drop-shadow(0 30px 24px rgba(15,23,42,.18))!important}
  .product-modal .modal-img-viewer svg{width:min(92%,640px)!important;height:auto!important;filter:drop-shadow(0 30px 24px rgba(15,23,42,.16))!important}
  .product-modal .modal-gallery{z-index:3;padding:18px!important;gap:12px!important;background:rgba(255,255,255,.82)!important;border-top:1px solid #e7edf4!important;backdrop-filter:blur(14px);display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important}
  .product-modal .gallery-thumb{width:82px!important;height:62px!important;min-width:82px!important;border-radius:14px!important;background:#f8fafc!important;border:1px solid #e1e7ef!important;padding:5px!important;transition:.2s!important}
  .product-modal .gallery-thumb.selected,.product-modal .gallery-thumb:hover{border-color:#006fd6!important;box-shadow:0 0 0 3px rgba(0,111,214,.11)!important;transform:translateY(-1px)}
  .product-modal .modal-info{padding:38px 42px!important;max-height:calc(100vh - 68px)!important;overflow-y:auto!important;background:#fff!important}
  .modal-headline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.modal-pill{border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:#eff6ff;color:#006fd6}.modal-pill.sale{background:#fff1f2;color:#be123c}.stock-pill{font-size:12px;font-weight:800;border-radius:999px;padding:6px 10px;background:#ecfdf5;color:#047857}.stock-pill.low{background:#fffbeb;color:#b45309}.stock-pill.out{background:#fef2f2;color:#b91c1c}
  .modal-name{font-size:clamp(30px,3.2vw,43px)!important;line-height:1.04!important;letter-spacing:-.055em!important;margin:4px 0 8px!important}.modal-sku{letter-spacing:.14em!important;text-transform:uppercase!important;font-weight:700!important;color:#8b96a5!important}.modal-price-row{margin:18px 0 20px!important}.modal-price{font-size:34px!important;color:#006fd6!important}.modal-desc{font-size:15px!important;line-height:1.85!important;color:#687281!important;margin:16px 0!important}.modal-label{font-size:12px!important;letter-spacing:.15em!important;font-weight:900!important;color:#4b5563!important}
  .modal-colors{gap:9px!important}.color-option{width:30px!important;height:30px!important;border:2px solid #fff!important;box-shadow:0 0 0 1px rgba(15,23,42,.15)!important}.color-option.selected{box-shadow:0 0 0 3px rgba(0,111,214,.25)!important}
  .modal-spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.modal-spec{border:1px solid #e6ecf3;background:#f8fafc;border-radius:14px;padding:12px}.modal-spec span{display:block;font-size:11px;color:#8b96a5;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.modal-spec strong{display:block;margin-top:4px;color:#111827;font-size:14px}.modal-included{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.modal-included div{border:1px solid #e6ecf3;border-radius:14px;padding:12px;background:#fff;font-size:13px;color:#4b5563}.modal-included b{display:block;color:#111827;font-size:13px;margin-bottom:2px}
  .modal-add-cart,.modal-wishlist-btn{height:56px!important;border-radius:16px!important;font-weight:900!important;font-size:14px!important}.modal-add-cart{box-shadow:0 14px 30px rgba(0,111,214,.22)}

  /* beautiful lens section */
  .lens-section{margin:22px 0;border:1px solid #dfe8f2;border-radius:24px;background:linear-gradient(180deg,#fbfdff,#f4f8fd);overflow:hidden;box-shadow:0 14px 36px rgba(17,24,39,.06)}
  .lens-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;border-bottom:1px solid transparent}.lens-toggle h4{font-size:16px!important;margin:0!important;color:#111827;letter-spacing:-.02em}.lens-toggle span{border-radius:999px;background:#fff;color:#006fd6;padding:7px 12px;font-size:12px;font-weight:900;border:1px solid #dbeafe}.lens-body{display:none;padding:0 20px 20px}.lens-body.open{display:block}.lens-intro{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;border:1px solid #e2eaf4;background:#fff;border-radius:18px;padding:14px;margin-bottom:16px}.lens-intro-icon{width:42px;height:42px;border-radius:14px;background:#eff6ff;display:grid;place-items:center;font-size:22px}.lens-intro b{display:block;font-size:14px;color:#111827;margin-bottom:3px}.lens-intro p{margin:0;color:#6b7280;font-size:13px;line-height:1.55}
  .lens-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;margin-bottom:16px}.lens-option{border:1px solid #dfe8f2!important;background:#fff!important;border-radius:16px!important;padding:14px!important;text-align:left!important;min-height:72px;display:flex!important;flex-direction:column;justify-content:space-between;transition:.2s!important}.lens-option:hover{border-color:#006fd6!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,111,214,.08)}.lens-option.selected{background:#eef6ff!important;border-color:#006fd6!important;box-shadow:0 0 0 3px rgba(0,111,214,.10)!important}.lens-option-name{font-size:13px!important;font-weight:900!important;color:#111827!important}.lens-option-price{font-size:12px!important;font-weight:900!important;color:#006fd6!important;margin-top:6px}.lens-presc{display:none}.lens-presc.open{display:block}.lens-presc-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px!important;background:#fff;border:1px solid #e2eaf4;border-radius:18px;padding:14px;margin-bottom:16px}.lens-presc-grid label{display:block;font-size:10px!important;color:#8b96a5!important;font-weight:900!important;letter-spacing:.12em;margin-bottom:6px}.lens-presc-grid input{width:100%;height:42px;border:1px solid #dfe8f2;border-radius:12px;padding:0 10px;background:#f8fafc;color:#111827}.lens-coatings{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}.lens-coating{border:1px solid #dfe8f2;border-radius:16px;background:#fff;padding:13px;display:flex;gap:10px;align-items:flex-start;cursor:pointer}.lens-coating.selected{background:#f1f7ff;border-color:#006fd6}.lens-coating input{margin-top:2px}.lens-coating-name{font-size:13px;font-weight:900;color:#111827}.lens-coating-price{font-size:12px;color:#006fd6;font-weight:900;margin-top:3px}.lens-summary{display:none!important;margin-top:16px;border:1px solid #dfe8f2!important;border-radius:18px!important;background:#fff!important;padding:14px!important}.lens-summary.show{display:block!important}.lens-summary-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#4b5563;padding:7px 0}.lens-summary-row.total{border-top:1px solid #e6ecf3;margin-top:6px;padding-top:12px;font-size:16px;font-weight:900;color:#111827}

  /* customer review form */
  .review-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.review-write-btn{border:1px solid #dbe3ee;background:#fff;color:#006fd6;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer}.review-write-btn:hover{background:#eff6ff}.review-form-card{display:none;margin:22px 0 0;border:1px solid #e3eaf3;border-radius:24px;padding:22px;background:#fff;box-shadow:0 14px 36px rgba(17,24,39,.06)}.review-form-card.show{display:block}.review-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-form-card input,.review-form-card select,.review-form-card textarea{width:100%;border:1px solid #dfe8f2;border-radius:14px;padding:12px 14px;font-family:inherit;background:#f8fafc}.review-form-card textarea{grid-column:1/-1;min-height:105px;resize:vertical}.review-submit{border:0;background:#006fd6;color:#fff;border-radius:14px;padding:13px 18px;font-weight:900;cursor:pointer}.review-note{font-size:12px;color:#6b7280;margin-top:8px}.review-card.pending-note{border-style:dashed}.review-card .review-product{font-size:12px;color:#006fd6;font-weight:800;margin-top:2px}@media(max-width:960px){.product-modal .modal-content{display:block!important;width:min(720px,calc(100% - 20px))!important}.product-modal .modal-img{min-height:0!important}.product-modal .modal-img-viewer{min-height:360px!important;padding:30px!important}.product-modal .modal-info{max-height:none!important;padding:30px!important}.lens-presc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.review-form-grid{grid-template-columns:1fr}}@media(max-width:640px){.product-modal{padding:10px!important}.product-modal .modal-content{width:calc(100% - 8px)!important;border-radius:24px!important}.product-modal .modal-img-viewer{min-height:275px!important;padding:18px!important}.product-modal .modal-img-viewer img{max-height:238px!important}.product-modal .modal-info{padding:22px 18px!important}.modal-spec-grid,.modal-included,.lens-options,.lens-coatings{grid-template-columns:1fr!important}.lens-presc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:10px}.lens-toggle{padding:16px}.lens-body{padding:0 14px 16px}.modal-name{font-size:29px!important}}

/* ──────────────────────────────────────────────────────────────────
   ones-v7-style
   Originally <style id="ones-v7-style"> at index.php lines 3909–3938
   ────────────────────────────────────────────────────────────────── */
/* Remove unnecessary product numbers everywhere */
  .product-number{display:none!important}

  /* Keep sale / bestseller badges above image content */
  .product-card{overflow:visible!important}
  .product-card .product-img{overflow:hidden!important;position:relative!important}
  .product-card .product-badge{z-index:50!important;top:12px!important;right:12px!important;left:auto!important;position:absolute!important;pointer-events:none!important}

  /* Payment icon row */
  .payments{align-items:center!important;gap:10px!important}
  .pay{height:30px!important;min-width:auto!important;padding:0 12px!important;border-radius:9px!important;border:1px solid #d9e1ea!important;background:linear-gradient(180deg,#fff,#f7f9fc)!important;box-shadow:0 7px 16px rgba(17,24,39,.06)!important;font-size:11px!important;font-weight:900!important;letter-spacing:.02em!important;display:inline-flex!important;align-items:center!important;gap:6px!important;color:#111827!important;white-space:nowrap!important}
  .pay::before{content:'';width:18px;height:18px;border-radius:6px;display:inline-grid;place-items:center;font-size:10px;font-weight:900;color:#fff;background:#111827}
  .pay.visa::before{content:'V';background:#1a4fff}.pay.mc::before{content:'●';background:linear-gradient(90deg,#eb001b 0 50%,#f79e1b 50%)}.pay.jcb::before{content:'J';background:#0b8f55}.pay.apple::before{content:'';background:#111}.pay.promptpay::before{content:'P';background:#0a9dd9}

  /* Tools dock CSS removed 2026-05-12. Hide any leftover element if a stray
     script still creates one. */
  .ones-tools-dock,.ones-device-toolbar,#onesToolsDock{display:none!important}

  body.ones-device-shell{background:#e9edf4!important;min-height:100vh;padding-top:24px!important;padding-bottom:24px!important}
  body.ones-device-shell::after{content:attr(data-device-label);position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:9999;background:#101418;color:#fff;border-radius:999px;padding:7px 14px;font:800 12px/1 Inter,'Noto Sans Thai',sans-serif;box-shadow:0 10px 26px rgba(0,0,0,.18)}
  body.ones-device-shell main,body.ones-device-shell .header,body.ones-device-shell .topbar,body.ones-device-shell footer{margin-left:auto!important;margin-right:auto!important;background:#fff;box-shadow:0 24px 80px rgba(17,24,39,.16)}
  body.ones-preview-mobile main,body.ones-preview-mobile .header,body.ones-preview-mobile .topbar,body.ones-preview-mobile footer{width:390px!important;max-width:390px!important}
  body.ones-preview-tablet main,body.ones-preview-tablet .header,body.ones-preview-tablet .topbar,body.ones-preview-tablet footer{width:820px!important;max-width:820px!important}
  body.ones-preview-desktop main,body.ones-preview-desktop .header,body.ones-preview-desktop .topbar,body.ones-preview-desktop footer{width:min(1280px,calc(100% - 60px))!important;max-width:1280px!important}@media(max-width:640px){.ones-device-toolbar{left:10px;right:10px;bottom:10px;justify-content:center;border-radius:18px}.ones-device-toolbar button{padding:0 10px}.payments{justify-content:flex-start}.pay{height:28px!important;padding:0 9px!important;font-size:10px!important}}

  /* Category image resilience */
  .category-card img{background:#f2f5f9;object-fit:cover!important}
  .category-card img[src=""],.category-card img:not([src]){background:linear-gradient(135deg,#eef2f8,#ffffff)}

/* ──────────────────────────────────────────────────────────────────
   ones-v8-fix-style
   Originally <style id="ones-v8-fix-style"> at index.php lines 4099–4299
   ────────────────────────────────────────────────────────────────── */
/* Product cards: clean, aligned, and Fav on the left */
  .products-grid,.product-grid,#productsGrid,#bsGrid{
    align-items:stretch!important;
  }
  .product-card{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .product-card .product-img{
    position:relative!important;
    width:100%!important;
    aspect-ratio:1.18/1!important;
    height:auto!important;
    min-height:170px!important;
    margin-bottom:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .product-card .product-img img,
  .product-card > img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    padding:18px!important;
    display:block!important;
  }
  .product-card .product-img svg,
  .product-card > svg{
    max-width:86%!important;
    max-height:82%!important;
  }
  .product-card .product-info{
    display:flex!important;
    flex-direction:column!important;
    flex:1 1 auto!important;
  }
  .product-card .product-name,
  .product-card h3{
    min-height:1.35em!important;
    margin:0 0 6px!important;
  }
  .product-card .product-type,
  .product-card p{
    min-height:20px!important;
    margin-bottom:10px!important;
  }
  .product-card .product-colors,
  .product-card .dots{
    margin:2px 0 14px!important;
    min-height:20px!important;
  }
  .product-card .product-footer{
    margin-top:auto!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:12px!important;
    align-items:center!important;
  }
  .product-card .product-price,
  .product-card .price{
    white-space:nowrap!important;
  }
  .product-number{display:none!important;}
  .product-wishlist{
    left:12px!important;
    right:auto!important;
    top:12px!important;
    z-index:8!important;
    width:38px!important;
    height:38px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(17,24,39,.08)!important;
    box-shadow:0 10px 24px rgba(17,24,39,.12)!important;
    color:#111827!important;
  }
  .product-wishlist.active,.product-wishlist:hover{background:var(--blue,#006fd6)!important;color:#fff!important;border-color:transparent!important;}
  .product-badge{
    top:12px!important;
    right:12px!important;
    left:auto!important;
    z-index:7!important;
    box-shadow:0 8px 20px rgba(17,24,39,.10)!important;
  }
  .product-badge+.product-wishlist{top:12px!important;}

  /* Product modal: balanced image side and premium layout */
  .product-modal.open{display:block!important;}
  .product-modal .modal-content{
    min-height:0!important;
  }
  .product-modal .modal-img{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .product-modal .modal-img-viewer{
    aspect-ratio:1/1!important;
    min-height:0!important;
    height:auto!important;
    padding:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .product-modal .modal-img-viewer img{
    width:100%!important;
    height:100%!important;
    max-width:520px!important;
    max-height:520px!important;
    object-fit:contain!important;
  }
  .product-modal .modal-img-viewer svg{
    width:86%!important;
    height:auto!important;
    max-height:430px!important;
  }
  .product-modal .modal-info{
    overflow:auto!important;
  }
  .product-modal .lens-section,
  .product-modal .lens-config{
    border-radius:22px!important;
    background:linear-gradient(180deg,#f8fafc,#fff)!important;
    border:1px solid var(--v5-line,#e6e8ec)!important;
    box-shadow:0 14px 36px rgba(17,24,39,.05)!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .product-modal .lens-toggle{
    padding:18px 18px!important;
    background:#fff!important;
    border-bottom:1px solid var(--v5-line,#e6e8ec)!important;
  }
  .product-modal .lens-body{padding:18px!important;}
  .product-modal .lens-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .product-modal .lens-option,.product-modal .lens-coating{
    border:1px solid var(--v5-line,#e6e8ec)!important;
    background:#fff!important;
    border-radius:16px!important;
    min-height:58px!important;
    padding:12px!important;
    text-align:left!important;
    box-shadow:0 8px 18px rgba(17,24,39,.035)!important;
  }
  .product-modal .lens-option.selected,.product-modal .lens-coating.selected{
    border-color:var(--v5-blue,#006fd6)!important;
    background:#f1f7ff!important;
  }

  /* Right drawer for tablet/mobile menu */
  .ones-mobile-drawer{position:fixed;inset:0;z-index:12000;pointer-events:none;}
  .ones-mobile-drawer.open{pointer-events:auto;}
  .ones-mobile-drawer__shade{position:absolute;inset:0;background:rgba(8,12,20,.44);opacity:0;transition:opacity .25s ease;backdrop-filter:blur(4px);}
  .ones-mobile-drawer.open .ones-mobile-drawer__shade{opacity:1;}
  .ones-mobile-drawer__panel{position:absolute;top:0;right:0;width:min(360px,88vw);height:100%;background:var(--bg,#fff);border-left:1px solid var(--bd,#e8e8e8);box-shadow:-24px 0 70px rgba(0,0,0,.18);transform:translateX(104%);transition:transform .28s ease;display:flex;flex-direction:column;padding:18px;}
  .ones-mobile-drawer.open .ones-mobile-drawer__panel{transform:translateX(0);}
  .ones-mobile-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--bd,#e8e8e8);}
  .ones-mobile-drawer__brand{font-weight:900;letter-spacing:.16em;font-size:13px;}
  .ones-mobile-drawer__close{border:0;background:var(--bg3,#f5f5f5);width:38px;height:38px;border-radius:999px;cursor:pointer;font-size:18px;color:var(--text,#111);}
  .ones-mobile-drawer__links{display:grid;gap:8px;padding:18px 0;}
  .ones-mobile-drawer__links button{border:1px solid var(--bd,#e8e8e8);background:var(--bg,#fff);color:var(--text,#111);border-radius:16px;padding:14px 14px;text-align:left;font:700 14px/1.2 inherit;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
  .ones-mobile-drawer__links button:hover{border-color:var(--blue,#006fd6);color:var(--blue,#006fd6);}
  .ones-mobile-drawer__quick{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--bd,#e8e8e8);padding-top:16px;}
  .ones-mobile-drawer__quick button{border:0;border-radius:16px;background:var(--blue,#006fd6);color:#fff;padding:13px 10px;font-weight:800;cursor:pointer;}
  .ones-mobile-drawer__quick button.secondary{background:var(--bg3,#f5f5f5);color:var(--text,#111);border:1px solid var(--bd,#e8e8e8);}
  .mobile-menu{display:none!important;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--bd,#e5e7eb);border-radius:999px;background:var(--bg,#fff);color:var(--text,#111);cursor:pointer;}@media(max-width:960px){
    .nav{grid-template-columns:auto 1fr auto!important;gap:12px!important;}
    .brand{justify-self:start!important;}
    .nav-links{display:none!important;}
    .mobile-menu{display:flex!important;order:3;}
    .nav-icons{display:flex!important;justify-self:end!important;gap:12px!important;}
    .products-grid,.product-grid,#productsGrid,#bsGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;}
    .product-card{border-radius:18px!important;padding:14px!important;min-height:auto!important;}
    .product-card .product-img{min-height:160px!important;}
    .product-card .product-footer{grid-template-columns:1fr!important;gap:10px!important;}
    .product-card .btn-cart{width:100%!important;}
  }@media(max-width:640px){
    .nav{height:66px!important;}
    .nav-icons .icon-btn[aria-label="บัญชี"],.nav-icons .icon-btn[aria-label="ค้นหา"]{display:none!important;}
    .mobile-menu{width:40px;height:40px;}
    .products-grid,.product-grid,#productsGrid,#bsGrid{grid-template-columns:1fr!important;gap:18px!important;}
    .product-card{padding:14px!important;border-radius:20px!important;}
    .product-card .product-img{aspect-ratio:1.35/1!important;min-height:190px!important;}
    .product-card .product-footer{grid-template-columns:1fr auto!important;}
    .product-card .btn-cart{width:auto!important;min-width:116px!important;}
    .product-modal{padding:10px!important;}
    .product-modal .modal-content{width:calc(100% - 8px)!important;border-radius:24px!important;display:block!important;}
    .product-modal .modal-img-viewer{aspect-ratio:1.08/1!important;padding:22px!important;}
    .product-modal .modal-img-viewer img{max-height:320px!important;}
    .product-modal .modal-gallery{padding:12px!important;}
    .product-modal .modal-info{padding:22px 18px!important;}
    .product-modal .lens-options{grid-template-columns:1fr!important;}
    .ones-mobile-drawer__panel{width:min(340px,90vw);}
  }

/* ──────────────────────────────────────────────────────────────────
   ones-v10-checkout-responsive-style
   Originally <style id="ones-v10-checkout-responsive-style"> at index.php lines 4407–4433
   ────────────────────────────────────────────────────────────────── */
:root{--ones-radius:18px;--ones-shadow:0 28px 90px rgba(15,23,42,.18)}
  .product-card{position:relative!important;display:flex!important;flex-direction:column!important;min-height:100%!important;border-radius:22px!important;overflow:hidden!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;cursor:pointer!important}
  .product-card:hover{transform:translateY(-4px)!important;box-shadow:0 18px 50px rgba(15,23,42,.10)!important}
  .product-card .product-img{position:relative!important;width:100%!important;aspect-ratio:1/0.78!important;height:auto!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:linear-gradient(145deg,#f8f8f6,#eceff3)!important}
  .product-card .product-img img,.product-card .product-img svg{max-width:86%!important;max-height:82%!important;object-fit:contain!important;display:block!important}
  .product-wishlist{position:absolute!important;left:14px!important;right:auto!important;top:14px!important;z-index:12!important;width:38px!important;height:38px!important;border-radius:999px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(15,23,42,.10)!important;box-shadow:0 8px 24px rgba(0,0,0,.08)!important;color:#111!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .product-badge{position:absolute!important;right:14px!important;left:auto!important;top:14px!important;z-index:11!important;background:#111!important;color:#fff!important;border-radius:999px!important;padding:7px 10px!important;font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important;line-height:1!important}
  .product-info{display:flex!important;flex-direction:column!important;gap:9px!important;padding:18px!important;min-height:178px!important}
  .product-info .product-name,.product-card h3{font-size:18px!important;line-height:1.15!important;margin:0!important;min-height:0!important;word-break:break-word!important}
  .product-meta,.product-category{font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--text3,#7b8190)!important;margin:0!important}
  .product-actions{display:flex!important;gap:10px!important;align-items:center!important;margin-top:auto!important}
  .product-actions .add-btn,.product-card .add-btn{min-height:42px!important;border-radius:999px!important;flex:1!important;white-space:nowrap!important}

  .product-modal{padding:24px!important;background:rgba(8,12,20,.46)!important;backdrop-filter:blur(10px)!important}
  .product-modal .modal-content{width:min(1120px,calc(100vw - 40px))!important;margin:34px auto!important;background:var(--bg,#fff)!important;border-radius:30px!important;overflow:hidden!important;box-shadow:var(--ones-shadow)!important;display:grid!important;grid-template-columns:minmax(330px,1.02fr) minmax(360px,.98fr)!important;border:1px solid rgba(148,163,184,.18)!important}
  .product-modal .modal-img{min-height:610px!important;background:linear-gradient(145deg,#f8f8f6,#eef1f5)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:38px!important;position:relative!important}
  .ones-modal-image{width:100%;height:100%;min-height:420px;display:flex;align-items:center;justify-content:center;border-radius:24px;background:rgba(255,255,255,.44);overflow:hidden}
  .ones-modal-image img,.ones-modal-image svg{max-width:92%;max-height:430px;object-fit:contain;display:block}
  .product-modal .modal-info{padding:44px!important;display:flex!important;flex-direction:column!important;gap:16px!important;max-height:min(86vh,760px)!important;overflow:auto!important}
  .ones-modal-kicker{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.ones-pill{display:inline-flex;align-items:center;border:1px solid var(--bd,#e5e7eb);border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text2,#596170);background:var(--soft,#f7f8fa)}.ones-pill.dark{background:#111;color:#fff;border-color:#111}.ones-modal-title{font-size:clamp(30px,4vw,54px);letter-spacing:-.055em;line-height:.96;margin:0;color:var(--text,#111)}.ones-modal-desc{font-size:15px;line-height:1.75;color:var(--text2,#5f6673);margin:0}.ones-modal-price{display:flex;gap:12px;align-items:baseline;font-size:30px;font-weight:900;color:var(--text,#111)}.ones-modal-price del{font-size:16px;color:var(--text4,#9aa0aa);font-weight:500}.ones-label{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--text3,#7a8291);margin:4px 0 0}.ones-color-row{display:flex;gap:8px;flex-wrap:wrap}.ones-color-dot{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.16);cursor:pointer}.ones-modal-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ones-spec{background:var(--soft,#f7f8fa);border:1px solid var(--bd,#e7e9ee);border-radius:16px;padding:12px}.ones-spec span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text4,#9aa0aa);margin-bottom:5px}.ones-spec strong{font-size:13px;color:var(--text,#111)}
  .ones-lens-box{border:1px solid var(--bd,#e7e9ee);border-radius:24px;padding:18px;background:linear-gradient(180deg,rgba(248,250,252,.95),rgba(255,255,255,.8));display:grid;gap:14px}.ones-lens-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.ones-lens-head h4{margin:0;font-size:18px;letter-spacing:-.02em}.ones-lens-head small{color:var(--text3,#7b8190);font-size:12px}.ones-lens-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.ones-lens-card{border:1px solid var(--bd,#e7e9ee);background:#fff;border-radius:18px;padding:14px;cursor:pointer;text-align:left;transition:.2s}.ones-lens-card:hover,.ones-lens-card.selected{border-color:#111;box-shadow:0 10px 28px rgba(15,23,42,.08)}.ones-lens-card b{display:block;font-size:14px}.ones-lens-card span{display:block;margin-top:5px;color:var(--text3,#7b8190);font-size:12px}.ones-lens-card em{font-style:normal;display:block;margin-top:8px;font-weight:900}.ones-rx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ones-rx-grid input{width:100%;min-height:40px;border:1px solid var(--bd,#e7e9ee);border-radius:12px;padding:0 10px;background:#fff;color:#111}.ones-modal-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}.ones-modal-buttons button{min-height:54px;border-radius:999px;font-weight:900;cursor:pointer}.ones-add-cart{border:0;background:#111;color:#fff}.ones-buy-now{border:1px solid #111;background:#fff;color:#111}.ones-modal-close{position:absolute;right:18px;top:18px;z-index:3;width:42px;height:42px;border:0;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(0,0,0,.12);cursor:pointer;font-size:20px;color:#111}

  .checkout-modal{padding:24px!important;background:rgba(8,12,20,.52)!important;backdrop-filter:blur(10px)!important}.checkout-modal.open{display:block!important}.ones-checkout{width:min(980px,calc(100vw - 36px));margin:26px auto;background:var(--bg,#fff);border:1px solid rgba(148,163,184,.2);border-radius:30px;overflow:hidden;box-shadow:0 34px 110px rgba(0,0,0,.26);position:relative;z-index:2}.ones-checkout-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:24px 28px;border-bottom:1px solid var(--bd,#e7e9ee)}.ones-checkout-head h3{margin:0;font-size:24px;letter-spacing:-.04em}.ones-checkout-close{width:40px;height:40px;border:0;border-radius:999px;background:var(--soft,#f5f6f8);cursor:pointer;font-size:20px;color:var(--text,#111)}.ones-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:18px 28px 0}.ones-step{border:1px solid var(--bd,#e7e9ee);border-radius:999px;padding:10px 12px;font-size:12px;font-weight:900;text-align:center;color:var(--text3,#7a8291);background:var(--soft,#f7f8fa)}.ones-step.active{background:#111;color:#fff;border-color:#111}.ones-checkout-body{padding:24px 28px 28px;display:grid;grid-template-columns:1fr;gap:18px}.ones-form-card,.ones-summary-card{border:1px solid var(--bd,#e7e9ee);border-radius:24px;background:var(--card,#fff);padding:20px}.ones-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ones-field{display:grid;gap:7px}.ones-field.full{grid-column:1/-1}.ones-field label{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--text3,#7a8291)}.ones-field input,.ones-field textarea,.ones-field select{width:100%;min-height:46px;border:1px solid var(--bd,#e7e9ee);border-radius:14px;padding:0 13px;background:var(--bg,#fff);color:var(--text,#111);font:inherit}.ones-field textarea{padding-top:12px;min-height:86px;resize:vertical}.ones-summary-title{font-size:16px;font-weight:900;margin:0 0 12px}.ones-order-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--bd,#e7e9ee);font-size:13px}.ones-order-line:last-child{border-bottom:0}.ones-order-line.total{font-size:18px;font-weight:900}.ones-order-muted{color:var(--text3,#7a8291);font-size:12px;margin-top:4px}.ones-checkout-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}.ones-checkout-actions button{min-height:48px;border-radius:999px;padding:0 20px;font-weight:900;cursor:pointer}.ones-btn-ghost{background:transparent;border:1px solid var(--bd,#e7e9ee);color:var(--text,#111)}.ones-btn-main{background:#111;border:1px solid #111;color:#fff}.ones-errors{border:1px solid #fecaca;background:#fff1f2;color:#b91c1c;border-radius:16px;padding:12px 14px;font-size:13px;margin-bottom:14px}.ones-payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ones-payment{border:1px solid var(--bd,#e7e9ee);border-radius:18px;padding:14px;background:#fff;cursor:pointer;font-weight:900;text-align:left}.ones-payment.selected{border-color:#111;box-shadow:0 12px 30px rgba(15,23,42,.10)}.ones-slip-upload{border:1px dashed var(--bd,#cbd5e1);border-radius:20px;padding:16px;background:var(--soft,#f8fafc);display:grid;gap:10px;margin-top:14px}.ones-success{text-align:center;padding:44px 22px}.ones-success-icon{width:72px;height:72px;border-radius:50%;background:#111;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:18px}.ones-order-no{display:inline-flex;padding:10px 14px;border-radius:999px;background:var(--soft,#f7f8fa);border:1px solid var(--bd,#e7e9ee);font-weight:900;margin:10px 0 0}

  .ones-mobile-drawer__panel{border-radius:26px 0 0 26px!important;width:min(390px,88vw)!important;padding:20px!important}.ones-mobile-drawer__links button{border-radius:18px!important;min-height:54px!important}.mobile-menu{display:none!important}@media(max-width:1024px){.mobile-menu{display:flex!important}.nav-links{display:none!important}.products-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.product-modal .modal-content{grid-template-columns:1fr!important;width:min(760px,calc(100vw - 24px))!important;margin:14px auto!important}.product-modal .modal-img{min-height:360px!important}.product-modal .modal-info{max-height:none!important}.ones-checkout-body{grid-template-columns:1fr!important}.ones-summary-card{order:-1}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:640px){body{overflow-x:hidden}.container{width:calc(100% - 28px)!important}.topbar{display:none!important}.header{position:sticky!important;top:0!important}.nav{height:64px!important;grid-template-columns:auto 1fr auto!important;gap:10px!important}.brand-logo{max-width:112px!important}.products-grid,.product-grid,.category-grid{grid-template-columns:1fr!important;gap:16px!important}.product-card{border-radius:20px!important}.product-card .product-img{aspect-ratio:1/0.72!important}.product-info{padding:16px!important;min-height:auto!important}.product-actions{display:grid!important;grid-template-columns:1fr!important}.product-modal{padding:8px!important}.product-modal .modal-content{width:100%!important;margin:0!important;border-radius:24px 24px 0 0!important;min-height:calc(100vh - 16px)!important}.product-modal .modal-img{min-height:260px!important;padding:18px!important}.ones-modal-image{min-height:220px}.ones-modal-image img,.ones-modal-image svg{max-height:220px}.product-modal .modal-info{padding:24px 18px 28px!important}.ones-modal-specs,.ones-lens-grid,.ones-rx-grid,.ones-modal-buttons,.ones-form-grid,.ones-payment-grid{grid-template-columns:1fr!important}.ones-modal-title{font-size:34px}.checkout-modal{padding:8px!important}.ones-checkout{width:100%!important;margin:0!important;border-radius:24px 24px 0 0!important;min-height:calc(100vh - 16px)}.ones-checkout-head{padding:20px 18px}.ones-steps{padding:14px 18px 0;grid-template-columns:1fr;gap:6px}.ones-checkout-body{padding:18px;gap:14px}.ones-form-card,.ones-summary-card{border-radius:20px;padding:16px}.ones-checkout-actions{display:grid;grid-template-columns:1fr}.ones-checkout-actions button{width:100%}.cart-panel,.wishlist-panel{width:min(430px,100vw)!important;border-radius:24px 0 0 24px!important}.ones-mobile-drawer__panel{width:min(360px,92vw)!important}.footer-bottom-inner{gap:16px}.payments{justify-content:flex-start!important}}

/* ──────────────────────────────────────────────────────────────────
   ones-v11-order-coupon-assets-css
   Originally <style id="ones-v11-order-coupon-assets-css"> at index.php lines 4547–4564
   ────────────────────────────────────────────────────────────────── */
.ones-detail-summary-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ones-detail-item{display:grid;grid-template-columns:68px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--bd,#e7e9ee)}
.ones-detail-item:last-child{border-bottom:0}
.ones-detail-thumb{width:68px;height:54px;border-radius:14px;background:var(--soft,#f7f8fa);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--bd,#e7e9ee)}
.ones-detail-thumb img,.ones-detail-thumb svg{width:100%;height:100%;object-fit:contain}
.ones-item-name{font-weight:900;font-size:14px;letter-spacing:-.02em}
.ones-item-meta{color:var(--text3,#7a8291);font-size:12px;line-height:1.55;margin-top:3px}
.ones-item-price{font-weight:900;white-space:nowrap;text-align:right}
.ones-coupon-box{margin-top:14px;padding:14px;border:1px dashed var(--bd,#cbd5e1);border-radius:18px;background:var(--soft,#f8fafc)}
.ones-coupon-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:8px}
.ones-coupon-row input{min-height:44px;border:1px solid var(--bd,#e7e9ee);border-radius:14px;padding:0 13px;background:var(--bg,#fff);color:var(--text,#111);font:inherit;text-transform:uppercase}
.ones-coupon-row button{border:0;border-radius:14px;background:#111;color:#fff;font-weight:900;padding:0 16px;cursor:pointer}
.ones-discount-line strong{color:#16a34a}
.ones-asset-note{display:block;color:var(--text3,#7a8291);font-size:11px;line-height:1.55;margin-top:6px}
.ones-order-confirm{margin-top:14px;border:1px solid var(--bd,#e7e9ee);border-radius:18px;padding:14px;background:var(--soft,#f8fafc)}
.ones-order-confirm h4{margin:0 0 10px;font-size:14px}@media(max-width:640px){.ones-detail-item{grid-template-columns:58px 1fr;align-items:start}.ones-item-price{grid-column:2;text-align:left}.ones-coupon-row{grid-template-columns:1fr}.ones-coupon-row button{min-height:44px}}

/* ──────────────────────────────────────────────────────────────────
   ones-v12-lens-assets-polish-css
   Originally <style id="ones-v12-lens-assets-polish-css"> at index.php lines 4652–4657
   ────────────────────────────────────────────────────────────────── */
:root{--v12-blue:#006fd6;--v12-ink:#0c111d;--v12-soft:#f6f8fb;--v12-line:#e3e8ef;--v12-gold:#c9a84c}
.header{background:rgba(255,255,255,.86)!important;backdrop-filter:blur(22px)!important;border-bottom:1px solid rgba(12,17,29,.08)!important;box-shadow:0 12px 40px rgba(15,23,42,.06)!important}
.nav{height:78px!important;align-items:center!important}.brand{display:flex!important;align-items:center!important;justify-content:center!important}.brand-logo{object-fit:contain!important;max-height:52px!important}.nav-links a{font-weight:800!important;letter-spacing:.05em!important}.nav-icons .icon-btn{border-radius:999px!important;background:rgba(15,23,42,.04)!important;padding:8px!important}.category-card{overflow:hidden!important;border-radius:26px!important;border:1px solid var(--v12-line)!important;background:#fff!important;box-shadow:0 18px 55px rgba(15,23,42,.08)!important}.category-card img{height:310px!important;min-height:310px!important;object-fit:cover!important;filter:saturate(1.03) contrast(1.02)!important}.category-info{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(16px)!important;border-top:1px solid rgba(15,23,42,.08)!important}.product-card .product-img img{border-radius:18px!important;filter:drop-shadow(0 22px 24px rgba(15,23,42,.15))!important}.payments{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}.payments .pay{height:36px!important;min-width:56px!important;padding:0 12px!important;border:1px solid var(--v12-line)!important;border-radius:999px!important;background:#fff!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 6px 18px rgba(15,23,42,.06)!important}.payments .pay-logo{max-height:22px!important;max-width:76px!important;object-fit:contain!important}
.ones-v12-lens{border:1px solid var(--v12-line);border-radius:26px;background:linear-gradient(180deg,#f8fafc,#fff);padding:18px;margin:10px 0 4px;display:grid;gap:18px}.ones-v12-lens-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ones-v12-lens-head h4{margin:0;font-size:21px;letter-spacing:-.03em}.ones-v12-lens-head p{margin:5px 0 0;color:#667085;font-size:13px;line-height:1.5}.ones-v12-lens-block{display:grid;gap:10px}.ones-v12-lens-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#667085}.ones-v12-lens-title span:last-child{font-size:11px;color:var(--v12-gold)}.ones-v12-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ones-v12-card{border:1px solid var(--v12-line);background:#fff;border-radius:18px;padding:14px;text-align:left;cursor:pointer;transition:.18s ease;min-height:92px}.ones-v12-card:hover,.ones-v12-card.selected{border-color:var(--v12-ink);box-shadow:0 14px 32px rgba(15,23,42,.09);transform:translateY(-1px)}.ones-v12-card b{display:block;font-size:14px;line-height:1.25;color:var(--v12-ink)}.ones-v12-card small{display:block;margin-top:5px;color:#667085;line-height:1.45}.ones-v12-card em{display:block;font-style:normal;margin-top:9px;font-weight:900;color:var(--v12-blue)}.ones-v12-coatings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ones-v12-check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--v12-line);background:#fff;border-radius:18px;padding:13px;cursor:pointer}.ones-v12-check.selected{border-color:var(--v12-ink);box-shadow:0 12px 28px rgba(15,23,42,.08)}.ones-v12-check input{margin-top:4px}.ones-v12-check b{font-size:13px}.ones-v12-check small{display:block;color:#667085;margin-top:4px}.ones-v12-rx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ones-v12-rx input{min-height:40px;border:1px solid var(--v12-line);border-radius:12px;padding:0 10px;background:#fff}.ones-v12-summary{border:1px solid var(--v12-line);background:#fff;border-radius:18px;padding:14px;display:grid;gap:8px}.ones-v12-summary div{display:flex;justify-content:space-between;gap:12px;font-size:13px}.ones-v12-summary .total{border-top:1px solid var(--v12-line);padding-top:9px;font-weight:900;font-size:16px}.ones-modal-buttons{grid-template-columns:1fr 1fr!important}.ones-add-cart,.ones-buy-now{min-height:56px!important}.ones-buy-now{background:var(--v12-blue)!important;border-color:var(--v12-blue)!important;color:#fff!important}.ones-modal-image img{max-width:100%!important;max-height:520px!important;object-fit:contain!important}.product-modal .modal-img{background:linear-gradient(145deg,#f9fafb,#edf2f7)!important}.ones-modal-image{background:rgba(255,255,255,.64)!important;border:1px solid rgba(15,23,42,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)!important}@media(max-width:1024px){.nav{height:68px!important}.category-card img{height:250px!important;min-height:250px!important}.ones-v12-options,.ones-v12-coatings{grid-template-columns:1fr!important}.ones-v12-rx{grid-template-columns:repeat(2,1fr)!important}.product-modal .modal-content{width:min(760px,calc(100vw - 20px))!important}}@media(max-width:640px){.header{border-radius:0!important}.nav{height:62px!important}.brand-logo{max-width:118px!important}.category-card img{height:220px!important;min-height:220px!important}.ones-v12-lens{padding:14px;border-radius:22px}.ones-v12-lens-head{display:block}.ones-v12-rx{grid-template-columns:1fr!important}.ones-modal-buttons{grid-template-columns:1fr!important}.payments .pay{height:32px!important}.product-modal .modal-info{padding:20px 16px 28px!important}.ones-v12-card{min-height:auto}.ones-v12-lens-title{display:block}.ones-v12-lens-title span:last-child{display:block;margin-top:3px}}

/* ──────────────────────────────────────────────────────────────────
   ones-v13-lens-member-css
   Originally <style id="ones-v13-lens-member-css"> at index.php lines 4699–4701
   ────────────────────────────────────────────────────────────────── */
.ones-v13-hide{display:none!important}.ones-v13-lens{border:1px solid var(--v12-line,#e3e8ef);border-radius:28px;background:linear-gradient(180deg,#f8fafc,#fff);padding:18px;margin:14px 0;display:grid;gap:18px}.ones-v13-lens-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ones-v13-lens-head h4{margin:0;font-size:21px;letter-spacing:-.03em}.ones-v13-lens-head p{margin:6px 0 0;color:#667085;font-size:13px;line-height:1.55}.ones-v13-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ones-v13-step{border:1px solid var(--v12-line,#e3e8ef);background:#fff;border-radius:999px;padding:8px 10px;font-size:11px;font-weight:900;color:#98a2b3;text-align:center}.ones-v13-step.on{color:#fff;background:#0c111d;border-color:#0c111d}.ones-v13-block{border:1px solid var(--v12-line,#e3e8ef);border-radius:22px;background:#fff;padding:14px;display:grid;gap:12px;animation:v13fade .22s ease}.ones-v13-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#667085}.ones-v13-title span:last-child{font-size:11px;color:#c9a84c}.ones-v13-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ones-v13-card{border:1px solid var(--v12-line,#e3e8ef);background:#fff;border-radius:18px;padding:14px;text-align:left;cursor:pointer;transition:.18s;min-height:92px}.ones-v13-card:hover,.ones-v13-card.selected{border-color:#0c111d;box-shadow:0 14px 34px rgba(15,23,42,.1);transform:translateY(-1px)}.ones-v13-card b{display:block;font-size:14px;color:#0c111d}.ones-v13-card small{display:block;margin-top:5px;color:#667085;line-height:1.45}.ones-v13-card em{display:block;font-style:normal;margin-top:9px;font-weight:900;color:#006fd6}.ones-v13-coats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ones-v13-check{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--v12-line,#e3e8ef);border-radius:18px;padding:14px;cursor:pointer;background:#fff;color:inherit;font:inherit;text-align:left;width:100%;transition:.18s;}.ones-v13-check:hover{border-color:#0c111d;transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.06)}.ones-v13-check.selected{border-color:#0c111d;background:linear-gradient(180deg,#fff,rgba(12,17,29,.04));box-shadow:0 12px 28px rgba(15,23,42,.1)}.ones-v13-mark{display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;margin-top:2px;border-radius:7px;border:1.6px solid #c8ced8;background:#fff;font-size:13px;font-weight:900;color:#fff;transition:.18s}.ones-v13-check.selected .ones-v13-mark{background:#0c111d;border-color:#0c111d}.ones-v13-check.selected .ones-v13-mark::after{content:'✓'}.ones-v13-check input{display:none}.ones-v13-member{border:1px solid rgba(0,111,214,.22);background:linear-gradient(180deg,rgba(0,111,214,.07),rgba(255,255,255,.9));border-radius:18px;padding:14px;display:grid;gap:10px}.ones-v13-member b{font-size:14px}.ones-v13-member p{font-size:13px;color:#667085;line-height:1.55;margin:0}.ones-v13-member-actions{display:flex;gap:8px;flex-wrap:wrap}.ones-v13-mini-btn{border:1px solid #0c111d;background:#0c111d;color:#fff;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:900;cursor:pointer}.ones-v13-mini-btn.ghost{background:#fff;color:#0c111d}.ones-v13-rx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ones-v13-rx input{min-height:42px;border:1px solid var(--v12-line,#e3e8ef);border-radius:13px;padding:0 11px;background:#fff}.ones-v13-summary{border:1px solid var(--v12-line,#e3e8ef);background:#fff;border-radius:18px;padding:14px;display:grid;gap:8px}.ones-v13-summary div{display:flex;justify-content:space-between;gap:12px;font-size:13px}.ones-v13-summary .total{border-top:1px solid var(--v12-line,#e3e8ef);padding-top:9px;font-weight:900;font-size:16px}.ones-v13-rx-alert{margin:10px 0;padding:12px 14px;border:1px solid rgba(0,111,214,.22);background:rgba(0,111,214,.06);border-radius:16px;color:#344054;font-size:13px;line-height:1.55}.ones-v13-checkbox{display:flex;gap:9px;align-items:flex-start;margin-top:10px;color:#475467;font-size:13px}.ones-v13-toast{position:fixed;right:18px;bottom:18px;z-index:9999;background:#0c111d;color:#fff;border-radius:16px;padding:13px 16px;box-shadow:0 20px 55px rgba(0,0,0,.25);font-size:13px;max-width:min(360px,calc(100vw - 32px))}@keyframes v13fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media(max-width:760px){.ones-v13-options,.ones-v13-coats{grid-template-columns:1fr}.ones-v13-rx{grid-template-columns:repeat(2,1fr)}.ones-v13-progress{grid-template-columns:repeat(2,1fr)}.ones-v13-lens-head{display:block}}@media(max-width:480px){.ones-v13-rx{grid-template-columns:1fr}}

/* ──────────────────────────────────────────────────────────────────
   ones-v21-featured-nav-sync-css
   Originally <style id="ones-v21-featured-nav-sync-css"> at index.php lines 4965–4987
   ────────────────────────────────────────────────────────────────── */
@media(max-width:760px){}

/* Featured collection must be visible. V15 had hidden it for the reference preview. */
.all-products-sec,#featured{display:block!important;visibility:visible!important;opacity:1!important;padding:34px 0 46px!important;background:#fff!important;}
.all-products-sec .ce-size-note{display:none!important;}
#featured .section-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;margin-bottom:18px!important;}
#featured .section-title h2{font-size:32px!important;line-height:1.08!important;letter-spacing:-.045em!important;font-weight:900!important;color:#111827!important;margin:0!important;}
#featured .section-title p{font-size:13px!important;color:#667085!important;margin-top:6px!important;}
#productsGrid.products-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}@media(max-width:1024px){#productsGrid.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}@media(max-width:760px){#featured{padding:26px 0 34px!important}#productsGrid.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#featured .section-title h2{font-size:22px!important}.filter-tabs{display:flex!important;overflow-x:auto!important;gap:8px!important;padding-bottom:6px!important}.filter-btn{white-space:nowrap!important}}
.category-card{aspect-ratio:3/2!important;height:auto!important;min-height:0!important;}
.category-card>img{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center!important;}
.product-card .product-img,#productsGrid .product-img,#bsGrid .product-img{height:160px!important;background:#fbfcfe!important;border-radius:10px!important;display:grid!important;place-items:center!important;overflow:hidden!important;position:relative!important;}
.product-card .product-img img,#productsGrid .product-img img,#bsGrid .product-img img{width:100%!important;height:100%!important;object-fit:contain!important;padding:18px!important;}
.product-card>img{height:132px!important;object-fit:contain!important;}
.lifestyle-image,#lifestyleImg{aspect-ratio:16/7!important;min-height:230px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}
.newsletter-image,#nlImg{aspect-ratio:16/7!important;min-height:150px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}
.insta-grid img{aspect-ratio:1/1!important;object-fit:cover!important;object-position:center!important;}
[data-edit-key="hero.image"] img,[data-edit-key="banner.image"] img,[data-edit-key="newsletter.image"] img{display:none!important;}

/* Links/buttons should feel clickable even if they are <a> without href. */
.nav-links a,.view-all,.category-card,.btn,.filter-btn{cursor:pointer!important;}
.nav-links a{user-select:none!important;}

/* ──────────────────────────────────────────────────────────────────
   ones-v22-admin-images-only-css
   Originally <style id="ones-v22-admin-images-only-css"> at index.php lines 5068–5074
   ────────────────────────────────────────────────────────────────── */
/* V22: all configurable homepage images are controlled only by Admin content. */
.admin-image-placeholder{background:linear-gradient(135deg,#f6f8fb,#edf1f6)!important;position:relative!important;overflow:hidden!important}
.admin-image-placeholder:before{content:'ตั้งค่ารูปจาก Admin';position:absolute;inset:0;display:grid;place-items:center;color:#9aa3af;font-size:12px;font-weight:700;letter-spacing:.02em;text-align:center;padding:14px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.34))}
.insta-grid img.admin-hidden{display:none!important}
.insta-grid.only-admin-images{grid-auto-flow:row!important}

/* ──────────────────────────────────────────────────────────────────
   ones-hero-redesign
   Originally <style id="ones-hero-redesign"> at index.php lines 5445–5570
   ────────────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
     ONES Hero — single source of truth (2026-05-12 cleanup)
     Brand palette: white background + brand blue #006fd6 accent
     Targets a 2:1 frame on desktop (max 560 tall), proportional on mobile
     ════════════════════════════════════════════════════════════════════ */
  body section.hero{
    position:relative; overflow:hidden;
    background:#ffffff;
    margin:0 auto;
    max-width:1920px;
    aspect-ratio:2/1;
    max-height:560px;
    border-bottom:1px solid var(--ones-line,#e6ebf2);
  }
  body section.hero .new-hero{
    max-width:1280px; margin:0 auto; height:100%;
    padding:48px 40px 56px;
    display:grid; grid-template-columns:1.05fr 1fr; gap:56px;
    align-items:center;
    position:relative;
  }
  /* No image set → single column, text centered & readable */
  body section.hero .new-hero:not(:has(.nh-right)){
    grid-template-columns:1fr; max-width:880px;
  }

  /* ── Left text column ── */
  body section.hero .nh-left{ max-width:480px; }
  body section.hero .nh-eyebrow{
    display:inline-block;
    font:600 11.5px/1 Inter,'Noto Sans Thai',sans-serif;
    letter-spacing:.18em; text-transform:uppercase;
    color:#006fd6;
    margin-bottom:18px;
  }
  body section.hero .nh-title{
    font:300 clamp(32px, 3.8vw, 48px)/1.08 'Inter','Noto Sans Thai',sans-serif;
    color:#0f172a;
    letter-spacing:-.025em;
    margin:0 0 18px;
  }
  body section.hero .nh-title em{
    font-style:normal; font-weight:700;
    color:#006fd6;
  }
  body section.hero .nh-sub{
    font:400 15px/1.6 Inter,'Noto Sans Thai',sans-serif;
    color:#475467;
    margin:0 0 26px;
    max-width:440px;
  }
  body section.hero .nh-cta-row{
    display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  }
  body section.hero .nh-btn{
    display:inline-flex; align-items:center; gap:8px;
    font:600 13.5px/1 Inter,'Noto Sans Thai',sans-serif;
    cursor:pointer; text-decoration:none; border:0;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  }
  body section.hero .nh-btn.primary{
    background:#006fd6; color:#fff;
    padding:13px 26px; border-radius:999px;
  }
  body section.hero .nh-btn.primary::after{ content:'→'; font-size:15px; }
  body section.hero .nh-btn.primary:hover{ background:#0f172a; transform:translateY(-1px); }
  body section.hero .nh-btn.ghost{
    background:transparent; color:#0f172a;
    padding:13px 0; border-bottom:1px solid #0f172a;
    border-radius:0;
  }
  body section.hero .nh-btn.ghost:hover{ color:#006fd6; border-bottom-color:#006fd6; }

  /* ── Right image column ── */
  body section.hero .nh-right{ position:relative; height:100%; }
  body section.hero .nh-art{
    position:relative; width:100%; height:100%;
    max-height:440px;
    background:#f7faff;     /* very faint blue tint, away from pure white */
    border-radius:8px;
    overflow:hidden;
  }
  body section.hero .nh-art img{
    width:100%; height:100%;
    object-fit:contain; display:block;
  }

  /* ── Tablet ── */
  @media(max-width:900px){
    body section.hero{ aspect-ratio:auto; max-height:none; }
    body section.hero .new-hero{
      grid-template-columns:1fr;
      gap:32px; padding:44px 24px 52px;
      height:auto;
    }
    body section.hero .nh-left{ max-width:none; }
    body section.hero .nh-art{
      max-width:520px; max-height:360px;
      margin:0; aspect-ratio:4/3;
    }
  }

  /* ── Mobile ── */
  @media(max-width:560px){
    body section.hero .new-hero{
      padding:28px 20px 40px;
      gap:24px;
    }
    body section.hero .nh-eyebrow{
      margin-bottom:12px;
      font-size:10.5px; letter-spacing:.16em;
    }
    body section.hero .nh-title{
      font-size:30px; line-height:1.1;
      margin-bottom:14px;
    }
    body section.hero .nh-sub{
      font-size:14.5px; margin-bottom:20px;
    }
    body section.hero .nh-cta-row{ gap:16px; }
    body section.hero .nh-btn.primary{ padding:11px 22px; font-size:13px; }
    body section.hero .nh-btn.ghost{ padding:11px 0; font-size:13px; }
    body section.hero .nh-art{ max-height:240px; aspect-ratio:16/10; }
  }

/* ──────────────────────────────────────────────────────────────────
   ones-cart-redesign
   Originally <style id="ones-cart-redesign"> at index.php lines 5572–5751
   ────────────────────────────────────────────────────────────────── */
/* === Cart Panel — beautiful redesign (right-side drawer) === */
  body .cart-panel{
    width:min(440px, 100vw)!important; max-width:none!important;
    background:var(--ones-surface,#fff)!important;
    box-shadow:-30px 0 80px rgba(15,23,42,.18)!important;
    display:flex; flex-direction:column;
  }
  body .cart-panel-head{
    padding:20px 22px 16px!important;
    background:linear-gradient(180deg, var(--ones-surface-2,#f7faff), var(--ones-surface,#fff))!important;
    border-bottom:1px solid var(--ones-line,#e6ebf2)!important;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  body .cart-panel-head h3{
    font:800 18px/1.2 Inter,'Noto Sans Thai',sans-serif!important;
    margin:0; letter-spacing:-.02em;
    display:flex; align-items:center; gap:10px;
  }
  body .cart-panel-head h3::before{
    content:''; width:32px; height:32px; border-radius:8px;
    background:var(--ones-blue,#006fd6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 14H7L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/18px no-repeat;
  }
  body .cart-panel-head .close-btn{
    width:36px; height:36px; border-radius:999px;
    border:1px solid var(--ones-line,#e6ebf2); background:#fff; color:var(--ones-text-muted,#475467);
    cursor:pointer; font-size:18px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:.18s;
  }
  body .cart-panel-head .close-btn:hover{ background:#fee; color:#b91c1c; border-color:#fecaca; }

  body .cart-panel #cartItems{
    flex:1; overflow-y:auto; padding:16px 18px!important;
    display:flex; flex-direction:column; gap:12px;
  }
  body .cart-panel .cart-empty{
    text-align:center; padding:60px 20px!important;
    color:var(--ones-text-muted,#475467);
  }
  body .cart-panel .cart-empty span{ font-size:60px; display:block; margin-bottom:14px; opacity:.6; }
  body .cart-panel .cart-empty p{ font-size:14px; margin:0 0 16px; }
  body .cart-panel .cart-empty::after{
    content:'เริ่มเลือกแว่นที่ใช่ของคุณ'; display:block;
    font-size:12px; color:var(--ones-text-muted,#475467);
    background:var(--ones-surface-2,#f7faff); padding:10px 14px; border-radius:10px;
    margin-top:14px; max-width:280px; margin-left:auto; margin-right:auto;
  }

  /* Cart item card — clean horizontal layout */
  body .cart-panel .cart-item{
    display:grid!important; grid-template-columns:80px 1fr; gap:14px!important;
    padding:14px!important; background:var(--ones-surface-2,#f7faff)!important;
    border:1px solid var(--ones-line,#e6ebf2); border-radius:14px;
    transition:.15s; position:relative;
  }
  body .cart-panel .cart-item:hover{ border-color:var(--ones-blue,#006fd6); transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,111,214,.08); }
  body .cart-panel .cart-item-img{
    width:80px!important; height:80px!important; aspect-ratio:1/1;
    border-radius:10px!important; overflow:hidden; background:#fff!important;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--ones-line,#e6ebf2);
  }
  body .cart-panel .cart-item-img img,
  body .cart-panel .cart-item-img svg{ width:100%; height:100%; object-fit:cover; }
  body .cart-panel .cart-item-info{
    display:flex; flex-direction:column; gap:6px; min-width:0;
  }
  body .cart-panel .cart-item-name{
    font:700 14px/1.3 Inter,'Noto Sans Thai',sans-serif!important;
    color:var(--ones-ink,#0f172a)!important; margin:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  body .cart-panel .cart-item-meta,
  body .cart-panel .cart-item-type{
    font-size:11.5px!important; color:var(--ones-text-muted,#475467)!important;
    text-transform:uppercase; letter-spacing:.04em; margin:0;
  }
  body .cart-panel .cart-item-lens{
    font-size:11px; color:var(--ones-blue,#006fd6); padding:3px 8px;
    background:rgba(0,111,214,.08); border-radius:999px; align-self:flex-start;
    margin-top:2px; font-weight:600;
  }
  body .cart-panel .cart-item-price{
    font:800 15px/1 Inter,sans-serif!important; color:var(--ones-blue,#006fd6)!important;
    margin-top:auto;
  }
  body .cart-panel .cart-item-qty{
    display:inline-flex; align-items:center; gap:0;
    border:1px solid var(--ones-line,#e6ebf2); border-radius:999px;
    overflow:hidden; align-self:flex-start; margin-top:4px;
    background:#fff;
  }
  body .cart-panel .qty-btn{
    width:28px; height:28px; border:0; background:transparent;
    color:var(--ones-ink,#0f172a); cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    transition:.15s;
  }
  body .cart-panel .qty-btn:hover{ background:var(--ones-blue,#006fd6); color:#fff; }
  body .cart-panel .cart-item-qty span{
    min-width:30px; text-align:center; font:700 13px/1 Inter,sans-serif;
    padding:0 4px;
  }
  body .cart-panel .cart-item-remove{
    position:absolute; top:8px; right:8px;
    width:26px; height:26px; border-radius:999px;
    border:1px solid transparent; background:transparent;
    color:var(--ones-text-muted,#475467); cursor:pointer; font-size:11px;
    line-height:1; display:flex; align-items:center; justify-content:center;
    transition:.15s; opacity:.7;
  }
  body .cart-panel .cart-item-remove:hover{
    background:#fee; color:#b91c1c; border-color:#fecaca; opacity:1; transform:scale(1.05);
  }

  /* Footer with summary */
  body .cart-panel .cart-footer{
    padding:18px 22px 22px!important;
    background:linear-gradient(180deg, var(--ones-surface,#fff), var(--ones-surface-2,#f7faff))!important;
    border-top:1px solid var(--ones-line,#e6ebf2)!important;
  }
  body .cart-panel .cart-subtotal{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:6px 0; font-size:13px; color:var(--ones-text-muted,#475467);
  }
  body .cart-panel .cart-subtotal:first-child{
    font-size:18px!important; font-weight:800!important;
    color:var(--ones-ink,#0f172a)!important;
    padding-top:0; margin-bottom:2px;
  }
  body .cart-panel .cart-subtotal:first-child span:last-child{
    color:var(--ones-blue,#006fd6)!important;
  }
  body .cart-panel .cart-subtotal:nth-child(2){
    border-top:1px dashed var(--ones-line,#e6ebf2);
    padding-top:8px; margin-top:6px;
  }
  body .cart-panel .cart-checkout-btn{
    width:100%; margin-top:14px!important;
    padding:14px 18px!important; border:0!important;
    border-radius:12px!important;
    background:var(--ones-blue,#006fd6)!important;
    color:#fff!important;
    font:800 14px/1 Inter,'Noto Sans Thai',sans-serif!important;
    cursor:pointer; transition:.18s;
    box-shadow:0 8px 20px rgba(0,111,214,.30);
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  body .cart-panel .cart-checkout-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,111,214,.38); background:#0058aa!important; }
  body .cart-panel .cart-checkout-btn::after{ content:'→'; font-size:18px; }

  /* Add a continue-shopping link below checkout button */
  body .cart-panel .cart-footer::after{
    content:'← เลือกสินค้าต่อ / Continue shopping';
    display:block; text-align:center; margin-top:10px;
    font-size:12px; color:var(--ones-text-muted,#475467);
    cursor:pointer;
  }

  /* Trust pills under cart */
  body .cart-panel .cart-trust{
    display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:10px;
  }
  body .cart-panel .cart-trust span{
    font-size:10.5px; padding:4px 9px; border-radius:999px;
    background:rgba(0,111,214,.06); color:var(--ones-blue,#006fd6);
    border:1px solid rgba(0,111,214,.18); font-weight:600;
  }

  /* Dark theme */

  /* Mobile: full-width drawer */
  @media(max-width:480px){
    body .cart-panel{ width:100vw!important; max-width:100vw!important; }
    body .cart-panel .cart-item{ grid-template-columns:64px 1fr; gap:10px!important; padding:10px!important; }
    body .cart-panel .cart-item-img{ width:64px!important; height:64px!important; }
    body .cart-panel .cart-item-name{ font-size:13px!important; }
  }

/* ──────────────────────────────────────────────────────────────────
   ones-late-polish
   Originally <style id="ones-late-polish"> at index.php lines 5753–6424
   ────────────────────────────────────────────────────────────────── */
/* Generous breathing room between sections — class selectors so we beat .categories etc. */
  body section.categories,
  body section.products,
  body section.all-products-sec,
  body section.why,
  body section.lifestyle,
  body section.reviews,
  body section.newsletter,
  body section.social-strip{
    padding-top:60px!important; padding-bottom:60px!important;
  }
  body section.hero{ padding-top:0!important; padding-bottom:0!important; }
  body div.trust-bar{ padding:0!important; margin-top:-26px!important; position:relative; z-index:5; }
  body section.social-strip{ padding-top:40px!important; padding-bottom:48px!important; }
  body section.lifestyle{ padding:0!important; }   /* keep edge-to-edge banner */
  @media(max-width:760px){
    body section.categories,
    body section.products,
    body section.all-products-sec,
    body section.why,
    body section.reviews,
    body section.newsletter{ padding-top:40px!important; padding-bottom:40px!important; }
    body section.social-strip{ padding-top:30px!important; padding-bottom:36px!important; }
  }
  /* Section title rhythm */
  body .section-head{ margin-bottom:32px!important; }
  body .section-title h2{ font-weight:800!important; letter-spacing:-.02em!important; line-height:1.1!important; }
  body .section-title p{ margin-top:6px!important; font-size:14px!important; color:var(--ones-text-muted,#475467)!important; }
  /* Heading weights softened */
  body h1{ font-weight:800!important; letter-spacing:-.04em!important; }
  body h2, body h3{ font-weight:800!important; letter-spacing:-.02em!important; }
  /* Card hover lift */
  body .product-card, body .category-card, body .review-card{ transition:transform .25s ease, box-shadow .25s ease!important; }
  body .product-card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(15,23,42,.10)!important; }
  /* Subtle pill for "view all" links */
  body .view-all{
    display:inline-flex; align-items:center; gap:4px;
    padding:6px 14px!important; border:1px solid var(--ones-line,#e6ebf2)!important;
    border-radius:999px!important; font-size:13px!important; font-weight:700!important;
    color:var(--ones-blue,#006fd6)!important; text-decoration:none!important;
    transition:.18s; background:var(--ones-surface,#fff);
  }
  body .view-all:hover{ background:var(--ones-blue,#006fd6)!important; color:#fff!important; transform:translateY(-1px); }
  /* Featured products: cap visible rows on first paint, "Load more" hint */
  body #productsGrid{ position:relative; }

  /* ─── HEADER — tighter spacing 2026-05-12 ─────────────────────────── */
  /* Pull the side columns inward so the nav links breathe in the middle
     and the right-hand icons stop hugging the screen edge. */
  body .header{ height:auto!important; }
  body .nav{
    height:64px!important;
    /* Right column is auto-sized so it can grow when the inline search expands */
    grid-template-columns: minmax(140px,168px) 1fr auto!important;
    gap:24px!important;
    align-items:center!important;
  }
  body .brand-logo{ max-height:42px!important; max-width:140px!important; }
  body .nav-links{ gap:28px!important; justify-content:center!important; }
  body .nav-links a{ font-size:13.5px!important; letter-spacing:.01em!important; }
  body .nav-icons{ gap:12px!important; justify-content:flex-end!important; }
  body .nav-icons .icon-btn{ width:34px!important; height:34px!important; }
  body #onesNavLang{ height:30px!important; padding:2px!important; }
  body #onesNavLang .nav-lang-btn{ padding:0 10px!important; height:26px!important; font-size:11.5px!important; }@media(max-width:960px){
    body .nav{ grid-template-columns: auto 1fr auto!important; gap:14px!important; height:60px!important; }
    body .nav-links{ display:none!important; }
    body .brand-logo{ max-height:36px!important; max-width:120px!important; }
    body .nav-icons{ gap:8px!important; }
    body .nav-icons .icon-btn{ width:32px!important; height:32px!important; }
  }@media(max-width:560px){
    body .nav{ height:58px!important; }
    body .brand-logo{ max-height:32px!important; max-width:104px!important; }
  }

  /* ─── Container — consistent gutter ─────────────────────────────────── */
  body .container{
    width:min(calc(100% - 48px), 1180px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }@media(max-width:760px){
    body .container{ width:calc(100% - 32px)!important; }
  }

  /* ─── Section vertical rhythm — refined ──────────────────────────────── */
  body section.categories,
  body section.products,
  body section.all-products-sec,
  body section.why,
  body section.reviews,
  body section.newsletter{
    padding-top:72px!important; padding-bottom:72px!important;
  }@media(max-width:960px){
    body section.categories,
    body section.products,
    body section.all-products-sec,
    body section.why,
    body section.reviews,
    body section.newsletter{ padding-top:48px!important; padding-bottom:48px!important; }
  }@media(max-width:560px){
    body section.categories,
    body section.products,
    body section.all-products-sec,
    body section.why,
    body section.reviews,
    body section.newsletter{ padding-top:36px!important; padding-bottom:36px!important; }
  }

  /* ─── Grid gaps — consistent across cards ────────────────────────────── */
  body .category-grid{ gap:20px!important; }
  body .products-grid, body .product-grid{ gap:24px!important; }
  body .review-grid{ gap:20px!important; }
  body .features{ gap:0!important; } /* features uses borders instead of gaps */
  @media(max-width:760px){
    body .category-grid{ gap:14px!important; }
    body .products-grid, body .product-grid{ gap:14px!important; }
    body .review-grid{ gap:14px!important; }
  }

  /* ─── Section heads — consistent margin + clean mobile stacking ──────── */
  body .section-head{
    margin-bottom:36px!important;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:1rem; flex-wrap:wrap;
  }
  body .section-head .section-actions,
  body .section-head .actions{
    display:inline-flex; gap:.5rem; align-items:center; flex-shrink:0;
  }
  @media(max-width:760px){
    body .section-head{
      margin-bottom:22px!important;
      flex-direction:column; align-items:flex-start; gap:12px;
    }
    body .section-head .section-title{ width:100%; }
    body .section-head .view-all,
    body .section-head .section-actions,
    body .section-head .actions{
      align-self:stretch; display:flex; gap:8px;
      justify-content:flex-end;
    }
    body .section-head .view-all{
      padding:5px 12px!important; font-size:12px!important;
    }
  }

  /* ─── REVIEWS — polished mobile cards ───────────────────────────────── */
  body section.reviews .review-wrap{ position:relative; }
  /* Carousel arrows hidden on mobile (use natural scroll); shown desktop */
  @media(max-width:900px){
    body section.reviews .slider-btn{ display:none!important; }
  }
  body section.reviews .review-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
  }
  body section.reviews .review-card{
    background:#ffffff!important;
    border:1px solid var(--ones-line,#e6ebf2)!important;
    border-radius:14px!important;
    padding:22px!important;
    box-shadow:0 4px 14px rgba(15,23,42,.04)!important;
    display:flex; flex-direction:column; gap:14px;
    min-height:auto!important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  body section.reviews .review-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(0,111,214,.08)!important;
    border-color:rgba(0,111,214,.25)!important;
  }
  body section.reviews .review-card .review-top{
    display:flex; align-items:center; gap:12px;
    margin:0!important;
  }
  body section.reviews .review-card .avatar{
    width:44px!important; height:44px!important;
    flex-shrink:0; border-radius:999px;
    background:#f7faff;
  }
  body section.reviews .review-card .review-top > div:not(.stars){ flex:1; min-width:0; }
  body section.reviews .review-card strong{
    display:block; font:700 14px/1.25 Inter,'Noto Sans Thai',sans-serif!important;
    color:#0f172a!important; letter-spacing:0!important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  body section.reviews .review-card .review-product{
    font:500 11.5px/1.3 Inter,'Noto Sans Thai',sans-serif;
    color:var(--ones-text-muted,#94a3b8); margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  body section.reviews .review-card .stars{
    color:#006fd6!important; letter-spacing:1.5px!important;
    font-size:13px!important; flex-shrink:0; margin:0!important;
  }
  body section.reviews .review-card p{
    font:400 13.5px/1.65 Inter,'Noto Sans Thai',sans-serif!important;
    color:#475467!important; margin:0!important;
    /* Cap to 4 lines so cards stay even */
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  body section.reviews .review-card time{
    font:500 11.5px/1 Inter,'Noto Sans Thai',sans-serif!important;
    color:#94a3b8!important; margin-top:auto;
  }

  /* Tablet: 2 columns */
  @media(max-width:960px){
    body section.reviews .review-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  }
  /* Mobile/tablet: review-grid becomes a horizontal scroller; the JS-injected
     .review-track is the actual flex strip that holds the cards (so width:
     max-content can grow past body's overflow:hidden). */
  @media(max-width:900px){
    body section.reviews .review-grid{
      display:block!important;
      grid-template-columns:none!important;
      overflow-x:auto!important;
      overflow-y:hidden!important;
      scroll-snap-type:x mandatory;
      padding:4px 16px 14px!important;
      margin:0 -16px;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:thin;
    }
    body section.reviews .review-card{
      scroll-snap-align:start;
      padding:18px!important;
    }
    body section.reviews .review-card p{ -webkit-line-clamp:5; }
  }

  /* ─── PRODUCTS — center cards on mobile ────────────────────────────── */
  @media(max-width:560px){
    body section.products .section-head,
    body section.products .section-title{ text-align:center; }
    body section.products .section-title h2{ width:100%; }
    body section.products .product-grid{
      grid-template-columns:1fr!important;
      justify-items:center;
    }
    body section.products .product-card{
      width:100%; max-width:340px;
      text-align:center;
      align-items:center;
      margin:0 auto;
    }
    body section.products .product-card .dots{
      justify-content:center; display:flex;
    }
    /* Best-seller mobile carousel — peek + swipe */
    body section.products .product-grid{
      display:flex!important; overflow-x:auto;
      scroll-snap-type:x mandatory;
      gap:12px!important;
      margin:0 -16px;
      padding:0 16px 14px;
      -webkit-overflow-scrolling:touch;
    }
    body section.products .product-card{
      flex:0 0 calc(85% - 6px);
      scroll-snap-align:start;
    }
  }

  /* ─── REVIEWS — slider arrows enabled on mobile too ────────────────── */
  body section.reviews .review-wrap{ position:relative; }
  body section.reviews .slider-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:999px;
    background:#ffffff; border:1px solid var(--ones-line,#e6ebf2);
    box-shadow:0 6px 18px rgba(15,23,42,.08);
    color:#0f172a; cursor:pointer; z-index:5;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; line-height:1; padding:0;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  body section.reviews .slider-btn:hover{ background:#006fd6; color:#fff; transform:translateY(-50%) scale(1.06); }
  body section.reviews .slider-btn.left{ left:-14px; }
  body section.reviews .slider-btn.right{ right:-14px; }
  body section.reviews .slider-btn[disabled]{ opacity:.35; cursor:not-allowed; }
  @media(max-width:900px){
    body section.reviews .slider-btn{ display:flex!important; }
    body section.reviews .slider-btn.left{ left:4px; }
    body section.reviews .slider-btn.right{ right:4px; }
  }
  @media(max-width:560px){
    body section.reviews .slider-btn{ width:32px; height:32px; font-size:18px; }
  }

  /* ─── INSTAGRAM STRIP — horizontal slider on mobile ────────────────── */
  body section.social-strip .insta-grid{
    display:grid; grid-template-columns:repeat(7, 1fr); gap:12px;
  }
  body section.social-strip .insta-grid img{
    width:100%; aspect-ratio:1/1; object-fit:cover;
    border-radius:8px;
  }
  @media(max-width:960px){
    body section.social-strip{ display:block!important; }   /* override legacy hide rule */
    body section.social-strip .insta-grid,
    body section.social-strip div.insta-grid{
      display:block!important;
      overflow-x:auto!important;
      overflow-y:hidden!important;
      scroll-snap-type:x mandatory;
      margin:0 -16px;
      padding:4px 16px 14px!important;
      -webkit-overflow-scrolling:touch;
      grid-template-columns:none!important;
      width:auto!important;
      max-width:none!important;
    }
    /* The JS-injected wrapper is what actually creates the horizontal track */
    body section.social-strip .insta-grid .insta-track{
      display:flex!important;
      gap:10px!important;
      width:max-content!important;
      align-items:flex-start;
    }
    body section.social-strip .insta-grid .insta-track > a,
    body section.social-strip .insta-grid .insta-track > img{
      width:200px!important;
      height:200px!important;
      flex:0 0 200px!important;
      max-width:200px!important;
      min-width:200px!important;
      scroll-snap-align:start;
      border-radius:10px!important;
      overflow:hidden;
      display:block!important;
    }
    body section.social-strip .insta-grid .insta-track > a img{
      width:100%!important; height:100%!important;
      object-fit:cover!important; display:block!important;
      aspect-ratio:auto!important;
    }
  }
  @media(max-width:560px){
    body section.social-strip .insta-grid .insta-track > a,
    body section.social-strip .insta-grid .insta-track > img{
      width:160px!important;
      height:160px!important;
      flex:0 0 160px!important;
      max-width:160px!important;
      min-width:160px!important;
    }
  }

  /* ─── FOOTER — payment logos removed, ship note only (centered) ─────── */
  body footer .footer-bottom-inner{
    display:flex; flex-direction:column; align-items:center;
    gap:10px; text-align:center;
  }
  /* Hide ALL payment-related elements (VISA/MC/JCB/Apple Pay/PromptPay etc) */
  body footer .footer-bottom-inner .payments .pay,
  body footer .footer-bottom-inner .payments img,
  body footer .footer-bottom-inner .payment-icons,
  body footer .footer-bottom-inner .payment-logos{
    display:none!important;
  }
  /* Keep only the ship-note text (which is the FIRST span inside .payments) */
  body footer .footer-bottom-inner .payments{
    display:flex!important; justify-content:center!important;
    background:transparent!important; border:0!important;
  }
  body footer .footer-bottom-inner .payments > span:first-child{
    display:inline-block!important;
    color:var(--ones-text-muted,#475467);
    font:500 13px/1.5 Inter,'Noto Sans Thai',sans-serif;
  }

  /* ─── CATEGORIES — image only (no text, no icon) ────────────────────── */
  body section.categories .category-card{
    position:relative; overflow:hidden;
    border:1px solid var(--ones-line,#e6ebf2);
    border-radius:12px;
    aspect-ratio:4/3;
    background:#f7faff;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  body section.categories .category-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 36px rgba(0,111,214,.12);
    border-color:rgba(0,111,214,.3);
  }
  body section.categories .category-card > img{
    position:absolute!important; inset:0!important;
    width:100%!important; height:100%!important;
    object-fit:cover!important; display:block!important;
    border-radius:0!important;
  }
  body section.categories .category-card .category-info,
  body section.categories .category-card .category-icon,
  body section.categories .category-card .category-arrow,
  body section.categories .category-card h3,
  body section.categories .category-card p{
    display:none!important;
  }

  /* ─── HORIZONTAL TRACKS (reviews / products / modal gallery) ────────── */
  body section.reviews .review-grid .review-track,
  body section.products .product-grid .product-track,
  body #productModal .modal-gallery .modal-gallery-track{
    display:flex!important;
    gap:12px!important;
    width:max-content!important;
    align-items:stretch;
  }
  body section.reviews .review-grid .review-track > .review-card{
    flex:0 0 280px!important;
    width:280px!important;
    min-width:280px!important;
    max-width:280px!important;
  }
  @media(max-width:560px){
    body section.reviews .review-grid .review-track > .review-card{
      flex:0 0 calc(85vw - 32px)!important;
      width:calc(85vw - 32px)!important;
      min-width:calc(85vw - 32px)!important;
      max-width:calc(85vw - 32px)!important;
    }
  }
  /* Modal gallery thumbs scroll horizontally on overflow */
  body #productModal .modal-gallery{
    display:block!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    padding:12px 14px!important;
    margin:0!important;
    scrollbar-width:thin;
    width:100%!important;          /* match modal width, never overflow */
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body #productModal .modal-gallery .modal-gallery-track > *{
    flex:0 0 64px!important;
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    border-radius:8px!important;
    overflow:hidden;
  }
  body #productModal .modal-gallery .modal-gallery-track > *.selected,
  body #productModal .modal-gallery .modal-gallery-track > *.is-cover{
    box-shadow:0 0 0 2px #006fd6!important;
  }
  /* Best-seller carousel on mobile */
  @media(max-width:560px){
    body section.products .product-grid{
      display:block!important;
      overflow-x:auto!important;
      overflow-y:hidden!important;
      -webkit-overflow-scrolling:touch;
      padding:0 16px 14px!important;
      margin:0 -16px;
      scroll-snap-type:x mandatory;
    }
    body section.products .product-grid .product-track{
      width:max-content!important;
    }
    body section.products .product-grid .product-track > .product-card{
      flex:0 0 calc(85vw - 32px)!important;
      width:calc(85vw - 32px)!important;
      scroll-snap-align:start;
    }
  }

  /* ─── PRODUCT CARDS — full-frame image, no shadow, blue accents ─────── */
  body .product-card{
    box-shadow:none!important;
    border:1px solid var(--ones-line,#e6ebf2)!important;
    border-radius:12px!important;
    overflow:hidden;
    transition:transform .2s ease, border-color .2s ease;
    padding:0!important;
    position:relative;
  }
  body .product-card:hover{
    transform:translateY(-2px);
    border-color:rgba(0,111,214,.3)!important;
    box-shadow:0 12px 28px rgba(0,111,214,.10)!important;
  }
  /* Image fills the card top edge-to-edge — no padding */
  body .product-card .product-img,
  body .product-card > img:first-of-type,
  body .product-card .ones-product-img{
    width:100%!important;
    aspect-ratio:1/1!important;
    background:#f7faff!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:0!important;
    display:block!important;
  }
  body .product-card .product-img img,
  body .product-card > img:first-of-type{
    width:100%!important; height:100%!important;
    object-fit:cover!important;     /* full-frame, crop to fit */
    padding:0!important;
    display:block!important;
  }

  /* Product info sits below image */
  body .product-card .product-info,
  body .product-card .ones-product-info{
    padding:14px 16px 18px!important;
  }

  /* Wishlist (heart) button — smaller + brand blue */
  body .product-card .wishlist-btn,
  body .product-card .product-wishlist,
  body .product-card .ones-wishlist-btn,
  body .product-card [class*="wishlist"]{
    position:absolute!important;
    top:10px!important; left:10px!important;
    width:32px!important; height:32px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid var(--ones-line,#e6ebf2)!important;
    box-shadow:0 4px 10px rgba(15,23,42,.06)!important;
    color:#006fd6!important;
    display:flex!important; align-items:center; justify-content:center;
    z-index:2!important;
    cursor:pointer; padding:0!important;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  body .product-card .wishlist-btn svg,
  body .product-card .product-wishlist svg,
  body .product-card .ones-wishlist-btn svg,
  body .product-card [class*="wishlist"] svg{
    width:16px!important; height:16px!important;
    stroke:#006fd6!important; fill:transparent!important;
  }
  body .product-card .wishlist-btn:hover,
  body .product-card [class*="wishlist"]:hover{
    background:#006fd6!important; color:#fff!important; transform:scale(1.05);
  }
  body .product-card .wishlist-btn:hover svg,
  body .product-card [class*="wishlist"]:hover svg{
    stroke:#fff!important;
  }
  body .product-card [class*="wishlist"].active,
  body .product-card [class*="wishlist"].is-fav{
    background:#006fd6!important;
  }
  body .product-card [class*="wishlist"].active svg,
  body .product-card [class*="wishlist"].is-fav svg{
    fill:#fff!important; stroke:#fff!important;
  }

  /* Product badge (BESTSELLER / NEW / SALE / etc) — smaller + brand blue */
  body .product-card .product-badge,
  body .product-card .badge,
  body .product-card .ones-badge{
    position:absolute!important;
    top:10px!important; right:10px!important;
    background:#006fd6!important; color:#fff!important;
    font:700 10px/1 Inter,'Noto Sans Thai',sans-serif!important;
    letter-spacing:.08em!important;
    padding:5px 10px!important;
    border-radius:999px!important;
    text-transform:uppercase;
    z-index:2!important;
    border:0!important;
    box-shadow:0 4px 10px rgba(0,111,214,.25)!important;
  }
  body .product-card .product-number{ display:none!important; }   /* hide leftover "1/2/3" badges */

  /* ─── RESPONSIVE IMAGES — universal safety net ─────────────────────── */
  body img{ max-width:100%; height:auto; }
  body .brand-logo, body .product-card img, body .category-card img,
  body .product-img img, body .modal-img img, body .ones-modal-image img,
  body .review-card img, body .insta-item img,
  body .nh-art img, body .gallery-thumb img{
    object-fit:contain; width:100%; height:auto;
  }
  body .lifestyle-image, body .lifestyle img,
  body .newsletter-image, body .newsletter-image img,
  body .hero-image img, body .banner-image img{
    object-fit:cover; width:100%; height:100%;
  }
  body .category-card{ aspect-ratio:4/3; overflow:hidden; }
  body .product-card .product-img{ aspect-ratio:1/1; overflow:hidden; }
  body .product-card .product-img img{ width:100%; height:100%; object-fit:contain; }
  body .nh-art{ aspect-ratio:1/1; overflow:hidden; }
  body .nh-art img{ width:100%; height:100%; object-fit:cover; }

  /* ─── INLINE HEADER SEARCH ───────────────────────────────────────────
     Replaces the "open big panel below header" pattern. Click the search
     icon → the icon expands into a pill-shaped inline input. Type to see
     live results in a small dropdown. Blur with empty value → collapses
     back into the icon. */
  body #headerSearch{
    display:inline-flex; align-items:center; gap:0;
    height:36px; padding:0 0 0 4px;
    background:transparent; border:1px solid transparent; border-radius:999px;
    transition:width .25s ease, max-width .25s ease, background .2s ease, border-color .2s ease, padding .2s ease;
    width:36px; max-width:36px;
    overflow:hidden; position:relative;
    flex:0 0 auto;          /* don't let flex parent shrink it */
  }
  body #headerSearch.open{
    width:280px; max-width:280px;
    background:var(--ones-surface-2,#f7faff);
    border-color:var(--ones-line,#e6ebf2);
    padding:0 6px 0 4px;
  }
  /* On narrow screens, the open input becomes a full-width pill anchored
     under the header so it doesn't squeeze the other icons */
  @media(max-width:640px){
    body #headerSearch.open{
      position:absolute; top:50%; left:12px; right:12px;
      width:auto; max-width:none;
      transform:translateY(-50%);
      z-index:10;
    }
  }
  /* Make sure nav-icons can grow to host the open search */
  body .nav-icons{ flex-wrap:nowrap; }
  body #headerSearch button.hs-icon{
    background:transparent; border:0; cursor:pointer;
    width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
    color:var(--ones-ink,#0f172a); padding:0; flex-shrink:0;
  }
  body #headerSearch button.hs-icon:hover{ color:var(--ones-blue,#006fd6); }
  body #headerSearch input.hs-input{
    flex:1; min-width:0; height:32px;
    border:0; background:transparent; outline:none;
    font:500 13.5px/1 Inter,'Noto Sans Thai',sans-serif;
    color:var(--ones-ink,#0f172a);
    opacity:0; transition:opacity .15s ease .1s;
    padding:0 6px 0 2px;
  }
  body #headerSearch input.hs-input::placeholder{ color:var(--ones-text-muted,#94a3b8); }
  body #headerSearch.open input.hs-input{ opacity:1; }
  body #headerSearch button.hs-clear{
    background:transparent; border:0; cursor:pointer;
    color:var(--ones-text-muted,#94a3b8); padding:0; width:24px; height:24px;
    display:none; align-items:center; justify-content:center; font-size:14px;
  }
  body #headerSearch.has-value button.hs-clear{ display:inline-flex; }

  /* Dropdown results panel — anchored to the header search */
  body #headerSearchResults{
    position:fixed; top:var(--header-h,72px); right:max(20px, calc((100vw - 1180px)/2));
    width:min(420px, calc(100vw - 32px));
    background:#fff; border:1px solid var(--ones-line,#e6ebf2); border-radius:14px;
    box-shadow:0 18px 48px rgba(15,23,42,.12);
    max-height:60vh; overflow:auto; padding:8px; z-index:55;
    display:none;
  }
  body #headerSearchResults.show{ display:block; }
  body #headerSearchResults .hs-result{
    display:flex; gap:12px; align-items:center; padding:10px;
    border-radius:10px; cursor:pointer; text-decoration:none; color:inherit;
    transition:background .15s ease;
  }
  body #headerSearchResults .hs-result:hover{ background:var(--ones-surface-2,#f7faff); }
  body #headerSearchResults .hs-result img{
    width:48px; height:48px; object-fit:contain; background:var(--ones-surface-2,#f7faff);
    border-radius:8px; flex-shrink:0;
  }
  body #headerSearchResults .hs-result .hs-r-name{ font:600 13.5px/1.3 Inter,sans-serif; color:var(--ones-ink); }
  body #headerSearchResults .hs-result .hs-r-meta{ font:500 11.5px/1.3 Inter,sans-serif; color:var(--ones-text-muted); margin-top:2px; }
  body #headerSearchResults .hs-empty{ padding:24px 14px; text-align:center; color:var(--ones-text-muted); font:500 13px/1.5 Inter,'Noto Sans Thai',sans-serif; }

  /* Hide the legacy big search panel — we use the inline one now */
  body #searchPanel{ display:none!important; }

/* ──────────────────────────────────────────────────────────────────
   ones-force-light
   Originally <style id="ones-force-light"> at index.php lines 7308–7319
   ────────────────────────────────────────────────────────────────── */
/* Hide every dark-mode UI control left over in the storefront */
  #themeBtn, .tb-btn#themeBtn, button#themeBtn,
  #adminThemeBtn,
  #onesToolsDock .tool-grp[data-grp="theme"],
  #onesToolsDock [data-mode],
  .tb-sep:has(+ #langBtn){ display:none!important; }
  /* If the theme separator can't be matched via :has(), fall back to hiding the
     first separator after the (now hidden) theme button. Both rules together cover
     old browsers without :has support. */
  .topbar-right > .tb-sep:first-of-type{ display:none!important; }

/* ──────────────────────────────────────────────────────────────────
   untagged-block-at-line-7371
   Originally <style id=""> at index.php lines 7371–7401
   ────────────────────────────────────────────────────────────────── */
body .ones-modal-image{ position:relative; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; }
  body .ones-modal-image .ones-swipe-hint{
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    background:rgba(15,23,42,.55); color:#fff; font:600 11px/1 Inter,sans-serif;
    padding:6px 10px; border-radius:999px; pointer-events:none; opacity:0;
    transition:opacity .25s ease; backdrop-filter:blur(6px); white-space:nowrap;
  }
  body .ones-modal-image.show-hint .ones-swipe-hint{ opacity:1; }
  body .ones-modal-image .ones-arrow-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:999px;
    background:rgba(255,255,255,.92); border:1px solid var(--ones-line,#e6ebf2);
    box-shadow:0 6px 20px rgba(15,23,42,.10);
    color:var(--ones-ink,#0f172a); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; line-height:1; padding:0; z-index:5;
    transition:background .15s ease, transform .15s ease;
  }
  body .ones-modal-image .ones-arrow-btn:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
  body .ones-modal-image .ones-arrow-btn.prev{ left:10px; }
  body .ones-modal-image .ones-arrow-btn.next{ right:10px; }
  body .ones-modal-image .ones-arrow-btn[disabled]{ opacity:.3; cursor:not-allowed; }
  /* Hide arrows on very small screens — rely on swipe */
  @media(max-width:560px){
    body .ones-modal-image .ones-arrow-btn{ width:34px; height:34px; font-size:18px; }
  }
  /* Make .modal-gallery scrollable on touch */
  body .modal-gallery{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
  body .modal-gallery .gallery-thumb{ flex-shrink:0; scroll-snap-align:start; }

/* ──────────────────────────────────────────────────────────────────
   ones-v17-style
   Originally <style id="ones-v17-style"> at index.php lines 7811–8352
   ────────────────────────────────────────────────────────────────── */
/* ─── LIFESTYLE BANNER — full-frame image with text overlay ───────── */
body section.lifestyle{
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #0f172a !important;
  min-height: 420px !important;
  margin-top: 16px !important;
}
body section.lifestyle .lifestyle-grid,
body section.lifestyle .container.lifestyle-grid{
  position: relative !important;
  display: block !important;
  grid-template-columns: 1fr !important;
  min-height: 420px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
body section.lifestyle .lifestyle-image,
body section.lifestyle #lifestyleImg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background-size: cover !important;
  background-position: center 40% !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}
body section.lifestyle .lifestyle-image::after,
body section.lifestyle #lifestyleImg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,.65) 0%, rgba(15,23,42,.40) 45%, rgba(15,23,42,.18) 100%);
  pointer-events: none;
  z-index: 1;
}
body section.lifestyle .lifestyle-content{
  position: relative !important;
  z-index: 5 !important;
  max-width: min(560px, 92%) !important;
  margin: 0 auto 0 max(36px, 6%) !important;
  padding: 70px 0 !important;
  color: #fff !important;
  text-align: left !important;
}
body section.lifestyle .lifestyle-content .eyebrow{
  color: #93c5fd !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
}
body section.lifestyle .lifestyle-content h2{
  color: #fff !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  margin: 6px 0 18px !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.45) !important;
}
body section.lifestyle .lifestyle-content h2 span{
  color: #fff !important;
}
body section.lifestyle .lifestyle-content p{
  color: rgba(255,255,255,.92) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  max-width: 480px !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.45) !important;
  margin-bottom: 24px !important;
}
body section.lifestyle .lifestyle-content .btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
body section.lifestyle .lifestyle-content .btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.35) !important;
}

/* Tablet */
@media(max-width:1024px){
  body section.lifestyle{ min-height: 360px !important; }
  body section.lifestyle .lifestyle-grid{ min-height: 360px !important; }
  body section.lifestyle .lifestyle-content{ padding: 56px 0 !important; }
}

/* Mobile — keep section visible (override legacy display:none), full-frame image */
@media(max-width:760px){
  body section.lifestyle{
    display: block !important;
    min-height: 360px !important;
    margin-top: 8px !important;
  }
  body section.lifestyle .lifestyle-grid{
    min-height: 360px !important;
    padding: 0 !important;
  }
  body section.lifestyle .lifestyle-image,
  body section.lifestyle #lifestyleImg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    background-position: center 35% !important;
    aspect-ratio: auto !important;
  }
  body section.lifestyle .lifestyle-image::after,
  body section.lifestyle #lifestyleImg::after{
    background: linear-gradient(180deg, rgba(15,23,42,.20) 0%, rgba(15,23,42,.55) 60%, rgba(15,23,42,.65) 100%) !important;
  }
  body section.lifestyle .lifestyle-content{
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 60px 18px 40px !important;
    text-align: center !important;
  }
  body section.lifestyle .lifestyle-content .eyebrow{
    font-size: 10px !important;
    letter-spacing: 3px !important;
  }
  body section.lifestyle .lifestyle-content h2{
    font-size: 28px !important;
    margin: 8px 0 12px !important;
  }
  body section.lifestyle .lifestyle-content p{
    font-size: 13px !important;
    margin: 0 auto 18px !important;
  }
  body section.lifestyle .lifestyle-content .btn{
    padding: 12px 22px !important;
    font-size: 13px !important;
  }
}

/* ─── REVIEWS — softer cards + bigger member avatars ─────────────── */
body section.reviews .review-card .avatar{
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.10) !important;
  background: #e8edf3 !important;
}
body section.reviews .review-card .review-product{
  display: block;
  font-size: 11px;
  color: var(--blue, #006fd6);
  font-weight: 600;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
body section.reviews .review-card .review-photos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
body section.reviews .review-card .review-photos img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line, #e8edf3);
}
body section.reviews .review-card.is-member{
  background: linear-gradient(180deg, #fff 0%, #f0f7ff 100%) !important;
  border-color: rgba(0,111,214,.18) !important;
}
body section.reviews .review-card.is-member .avatar{
  border-color: var(--blue, #006fd6) !important;
}

/* ─── INSTAGRAM STRIP — prettier desktop grid ───────────────────── */
body section.social-strip{
  padding: 36px 0 56px !important;
}
/* Desktop: clean 7-column grid (override the .insta-track flex wrapper too) */
@media(min-width:761px){
  body section.social-strip .insta-grid{
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 14px !important;
  }
  body section.social-strip .insta-grid .insta-track{
    display: contents !important;   /* let grandchildren participate in grid */
  }
  body section.social-strip .insta-grid > a,
  body section.social-strip .insta-grid > img,
  body section.social-strip .insta-grid .insta-track > a,
  body section.social-strip .insta-grid .insta-track > img{
    position: relative;
    display: block !important;
    border-radius: 14px !important;
    overflow: hidden;
    aspect-ratio: 1/1 !important;
    height: auto !important;
    flex: unset !important;
    width: auto !important;
    min-width: 0 !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.05);
    background: #f4f7fb;
  }
  body section.social-strip .insta-grid a:hover,
  body section.social-strip .insta-grid img:hover{
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.16) !important;
    z-index: 2;
  }
  body section.social-strip .insta-grid img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: saturate(1) !important;
    border-radius: 14px !important;
    display: block !important;
    aspect-ratio: 1/1 !important;
  }
  body section.social-strip .insta-grid a::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.32) 100%);
    opacity: 0;
    transition: opacity .3s ease;
    border-radius: 14px;
    pointer-events: none;
  }
  body section.social-strip .insta-grid a:hover::after{ opacity: 1; }
}
@media(min-width:761px) and (max-width:1024px){
  body section.social-strip .insta-grid{ grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; }
  body section.social-strip .insta-grid > a:nth-child(n+6),
  body section.social-strip .insta-grid > img:nth-child(n+6),
  body section.social-strip .insta-grid .insta-track > a:nth-child(n+6),
  body section.social-strip .insta-grid .insta-track > img:nth-child(n+6){ display: none !important; }
}

/* ─── FACE SHAPE GUIDE — new section ────────────────────────────── */
body section.faceshape-section{
  padding: 48px 0 64px !important;
  background: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%);
}
body section.faceshape-section .section-head{
  text-align: center;
  margin-bottom: 28px;
  display: block !important;
}
body section.faceshape-section .section-title{
  text-align: center;
  margin: 0 auto;
}
body section.faceshape-section .section-title h2{
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 800 !important;
  color: var(--ink, #0f172a) !important;
  margin: 0 0 8px !important;
  letter-spacing: -.02em !important;
}
body section.faceshape-section .section-title p{
  color: #6b7280 !important;
  font-size: 14px !important;
  margin: 0 !important;
}
body section.faceshape-section .faceshape-card{
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid var(--line, #e8edf3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(15,23,42,.06) !important;
}
body section.faceshape-section .faceshape-image,
body section.faceshape-section #faceshapeImg{
  /* Use aspect-ratio for the placeholder size, but never let an stretched grid
     row snap back through aspect-ratio (otherwise it grows infinitely). */
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  align-self: start !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #f4f7fb !important;
  background-image:
    linear-gradient(135deg, #eef4fc 0%, #d6e6f5 100%);
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative;
}
body section.faceshape-section .faceshape-image::before,
body section.faceshape-section #faceshapeImg::before{
  content: "1600 × 900";
  position: absolute;
  bottom: 14px;
  right: 16px;
  background: rgba(15,23,42,.55);
  color: #fff;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  pointer-events: none;
  opacity: .65;
}
body section.faceshape-section .faceshape-image[data-has-image="true"]::before,
body section.faceshape-section #faceshapeImg[data-has-image="true"]::before{
  display: none;
}
body section.faceshape-section .faceshape-body{
  padding: 36px 36px 36px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
body section.faceshape-section .faceshape-body h3{
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ink, #0f172a) !important;
  margin: 0 0 12px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}
body section.faceshape-section .faceshape-body p{
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 0 0 18px !important;
}
body section.faceshape-section .faceshape-tags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body section.faceshape-section .faceshape-tag{
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  background: #eff6ff !important;
  color: var(--blue, #006fd6) !important;
  border: 1px solid rgba(0,111,214,.15) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
}

@media(max-width:760px){
  body section.faceshape-section{ padding: 28px 0 40px !important; }
  body section.faceshape-section .section-title h2{ font-size: 22px !important; }
  body section.faceshape-section .section-title p{ font-size: 12px !important; }
  body section.faceshape-section .faceshape-card{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border-radius: 14px !important;
  }
  body section.faceshape-section .faceshape-image,
  body section.faceshape-section #faceshapeImg{
    min-height: 200px !important;
    aspect-ratio: 16 / 9 !important;
  }
  body section.faceshape-section .faceshape-body{
    padding: 22px 18px 24px !important;
  }
  body section.faceshape-section .faceshape-body h3{ font-size: 17px !important; margin-bottom: 8px !important; }
  body section.faceshape-section .faceshape-body p{ font-size: 12.5px !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
  body section.faceshape-section .faceshape-tag{ padding: 5px 11px !important; font-size: 11px !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   V17 MOBILE: Best Sellers + Featured Products → horizontal slider
   (was 2-col grid that required heavy scrolling — now snap-scroll)
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px){
  /* The grids themselves become horizontal flex tracks */
  body section#products-sec .product-grid,
  body section#products-sec #bsGrid,
  body section.all-products-sec .products-grid,
  body section.all-products-sec #productsGrid{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding: 0 14px !important;
    /* Bleed slightly past the container edge so the next-card peek is visible */
    margin: 0 -14px !important;
    padding: 4px 14px 16px !important;
    gap: 12px !important;
    /* Override the legacy grid-template-columns that wins via !important */
    grid-template-columns: none !important;
  }
  /* Hide scrollbar (clean look — users discover via swipe/peek) */
  body section#products-sec .product-grid::-webkit-scrollbar,
  body section#products-sec #bsGrid::-webkit-scrollbar,
  body section.all-products-sec .products-grid::-webkit-scrollbar,
  body section.all-products-sec #productsGrid::-webkit-scrollbar{
    display: none !important;
  }
  body section#products-sec .product-grid,
  body section#products-sec #bsGrid,
  body section.all-products-sec .products-grid,
  body section.all-products-sec #productsGrid{
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  /* Each card: fixed-width snap point, ~70vw so neighbour peeks */
  body section#products-sec .product-grid > .product-card,
  body section#products-sec #bsGrid > .product-card,
  body section.all-products-sec .products-grid > .product-card,
  body section.all-products-sec #productsGrid > .product-card,
  body section.all-products-sec .products-grid > .product-grid-card,
  body section.all-products-sec #productsGrid > .product-grid-card{
    flex: 0 0 auto !important;
    width: 64vw !important;
    max-width: 240px !important;
    min-height: 230px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
  }
  /* Slightly bigger card content sizes for the wider mobile card */
  body section#products-sec .product-grid > .product-card > img,
  body section#products-sec #bsGrid > .product-card > img,
  body section.all-products-sec .products-grid > .product-card img,
  body section.all-products-sec #productsGrid > .product-card img{
    height: 110px !important;
    margin: 18px auto 8px !important;
    object-fit: contain !important;
  }
  body section#products-sec .product-grid > .product-card h3,
  body section#products-sec #bsGrid > .product-card h3,
  body section.all-products-sec .products-grid > .product-card .product-name,
  body section.all-products-sec #productsGrid > .product-card .product-name{
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  body section#products-sec .product-grid > .product-card p,
  body section#products-sec #bsGrid > .product-card p,
  body section.all-products-sec .products-grid > .product-card .product-type,
  body section.all-products-sec #productsGrid > .product-card .product-type{
    font-size: 11px !important;
  }
  body section#products-sec .product-grid > .product-card .price,
  body section#products-sec #bsGrid > .product-card .price,
  body section.all-products-sec .products-grid > .product-card .product-price,
  body section.all-products-sec #productsGrid > .product-card .product-price{
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  /* Hint dot indicator beneath the slider — pure CSS, no JS needed */
  body section#products-sec .product-grid::after,
  body section#products-sec #bsGrid::after,
  body section.all-products-sec .products-grid::after,
  body section.all-products-sec #productsGrid::after{ content: none; }

  /* Subtle right-edge fade so users see there's more to swipe */
  body section#products-sec .container,
  body section.all-products-sec .container{
    position: relative !important;
  }
  body section#products-sec .container::after,
  body section.all-products-sec .container::after{
    content: "";
    position: absolute;
    top: 64px; right: 0; bottom: 16px;
    width: 28px;
    background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 2;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   V17 LOGO: pure white background everywhere
   (Logo PNGs with transparent BG were picking up the gray header tint —
   pad the IMG with a white card so transparency reads as white.)
   ═════════════════════════════════════════════════════════════════════ */
#navLogoImg, #footerLogo, .nav .brand-logo, .footer-logo img{
  background: transparent !important;
}
/* ─── KILL the duplicate-logo overlap ─────────────────────────────
   Old markup had <div class="brand footer-logo"><img id="footerLogo">
   which made 4 legacy patches paint the logo as DIV bg-image AND set
   it as IMG src — two logos overlapping. New markup uses a wrapper
   <div class="footer-brand-wrap"> that no legacy code targets. ───── */
.footer-brand-wrap {
  background: transparent !important;
  background-image: none !important;
  display: block;
  margin-bottom: 18px;
}
.footer-brand-wrap > #footerLogo {
  display: block;
  max-width: 220px;
  height: auto;
  background: transparent !important;
}
#navLogoImg{
  background: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  box-sizing: content-box !important;
  box-shadow: 0 0 0 1px rgba(15,23,42,.04) !important;
}
@media (max-width: 760px){
  #navLogoImg{ padding: 4px 8px !important; border-radius: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * V24 — Product card refined to match design reference (2026-05-13).
 *
 * Ref: full-bleed product image; clean white-circle wishlist (top-left);
 * blue BESTSELLER pill (top-right); below image — name + subtitle, then
 * a single footer row { color dots · price · +Cart pill button }.
 *
 * Wins over V11/V14/V18/V22/V23 via specificity (`html body section`).
 * ═══════════════════════════════════════════════════════════════════════ */
html body section .product-card{
  padding:0 !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.06) !important;
  box-shadow:0 8px 26px rgba(15,23,42,.05) !important;
  isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease !important;
}
html body section .product-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

/* ── Image area: edge-to-edge square, no inner frame ────────────── */
html body section .product-card .product-img{
  height:auto !important;
  aspect-ratio:1/1 !important;
  margin:0 !important;
  padding:0 !important;
  background:#ffffff !important;
  background-image:none !important;
  border-radius:0 !important;
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
}
html body section .product-card .product-img > img,
html body section #productsGrid .product-card .product-img img,
html body section #bsGrid .product-card .product-img img,
html body section .products-grid .product-card .product-img img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  transition:transform .35s ease !important;
}
html body section .product-card:hover .product-img > img{
  transform:scale(1.04) !important;
}

/* ── BESTSELLER / NEW / SALE pill: top-right ────────────────────── */
html body section .product-card .product-badge{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  left:auto !important;
  z-index:5 !important;
  padding:8px 16px !important;
  font:800 11px/1 Inter, sans-serif !important;
  letter-spacing:.14em !important;
  border-radius:999px !important;
  background:var(--ones-blue, #006fd6) !important;
  color:#ffffff !important;
  box-shadow:0 8px 20px rgba(0,111,214,.30) !important;
  pointer-events:none !important;
  text-transform:uppercase !important;
}

/* ── Wishlist heart: clean white circle, no blur, no gradient ─── */
html body section .product-card .product-wishlist{
  position:absolute !important;
  top:16px !important;
  left:16px !important;
  right:auto !important;
  z-index:6 !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:#ffffff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  color:#7280a0 !important;
  font-size:18px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 6px 16px rgba(15,23,42,.10) !important;
  cursor:pointer !important;
  transition:transform .15s ease, color .15s ease, box-shadow .15s ease !important;
}
html body section .product-card .product-wishlist:hover{
  transform:scale(1.08) !important;
  color:#0f172a !important;
  box-shadow:0 8px 22px rgba(15,23,42,.16) !important;
}
html body section .product-card .product-wishlist.active{
  color:#dc2626 !important;
}
html body section .product-card .product-badge + .product-wishlist{ top:16px !important; }

/* ── Card body padding ─────────────────────────────────────────── */
html body section .product-card .product-info{
  padding:18px 20px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

/* Name (h3) — strictly ONE LINE with ellipsis if it overflows.
 * Source data is already shortened to ≤60 chars by xlsx_shorten_name(),
 * but the safety net here guarantees the card never grows vertically
 * on long titles, no matter what gets imported in the future. */
html body section .product-card .product-name{
  font:700 18px/1.25 Inter, sans-serif !important;
  letter-spacing:-.01em !important;
  color:#0f172a !important;
  margin:0 !important;
  text-align:left !important;
  min-height:auto !important;
  /* one-line clamp */
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}
html body section .product-card .product-type{
  font:500 13px/1.4 Inter, sans-serif !important;
  color:#94a3b8 !important;
  margin:0 0 4px !important;
  text-align:left !important;
  min-height:auto !important;
  /* subtitle also one line */
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* ── Footer row: color dots · price · +Cart button ─────────────── */
html body section .product-card .product-footer{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:14px !important;
  margin-top:12px !important;
  padding:0 !important;
  background:transparent !important;
}
/* Colors row sits in the first grid cell */
html body section .product-card .product-colors{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  flex-wrap:nowrap !important;
}
html body section .product-card .product-colors .color-dot{
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  display:inline-block !important;
  border:2px solid #ffffff !important;
  box-shadow:0 0 0 1px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.08) !important;
  cursor:pointer !important;
  transition:transform .12s ease !important;
}
html body section .product-card .product-colors .color-dot:hover{
  transform:scale(1.15) !important;
}
/* Price in the middle cell — keep on ONE line, even with strikethrough */
html body section .product-card .product-price{
  font:700 17px/1 Inter, sans-serif !important;
  color:#0f172a !important;
  text-align:left !important;
  display:inline-flex !important;
  align-items:baseline !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  min-width:0 !important;
}
html body section .product-card .product-price s{
  font:500 12px/1 Inter, sans-serif !important;
  color:#cbd5e1 !important;
  margin:0 !important;
  white-space:nowrap !important;
}

/* + Cart pill button on the right — visible at all viewports */
html body section .product-card .btn-cart{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  padding:0 18px !important;
  background:#eff6ff !important;
  color:var(--ones-blue, #006fd6) !important;
  border:1px solid #dbeafe !important;
  border-radius:999px !important;
  font:700 13px/1 Inter, sans-serif !important;
  letter-spacing:.01em !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  transition:background .15s ease, border-color .15s ease, transform .12s ease !important;
  width:auto !important;
  min-width:0 !important;
}
html body section .product-card .btn-cart::before{
  content:"+ ";
}
html body section .product-card .btn-cart:hover{
  background:var(--ones-blue, #006fd6) !important;
  color:#ffffff !important;
  border-color:var(--ones-blue, #006fd6) !important;
}

/* ── Image area: PURE WHITE background, no shimmer/gradient ───── */
html body section .product-card .product-img > img{ opacity:1 !important; }
html body section .product-card .product-img::before{ content:none !important; display:none !important; }
html body section .product-card .product-img::after { content:none !important; display:none !important; }

/* ── Narrow card layout: stack colors above price+button row ──── */
/* Activates whenever the card itself (not viewport) is < 280px wide,
 * via container queries — falls back to viewport breakpoint for older
 * browsers. Prevents the price + button from squishing into each other. */
@container (max-width: 280px) {
  html body section .product-card .product-footer{
    grid-template-columns:1fr auto !important;
    grid-template-areas:"colors colors" "price button" !important;
  }
  html body section .product-card .product-colors{ grid-area:colors !important; margin-bottom:4px !important; }
  html body section .product-card .product-price{ grid-area:price !important; }
  html body section .product-card .btn-cart{ grid-area:button !important; }
}
/* Fallback for browsers without container queries: viewport-based.
 * Tablet 3-col grid → cards are too narrow for 1-row footer.
 * Stack the footer into 3 rows so nothing clips. */
@media (max-width:1024px) and (min-width:561px){
  html body section .products-grid .product-card .product-footer,
  html body section #productsGrid .product-card .product-footer,
  html body section #bsGrid .product-card .product-footer{
    grid-template-columns:1fr !important;
    grid-template-areas:"colors" "price" "button" !important;
    gap:10px !important;
    align-items:start !important;
  }
  html body section .products-grid .product-card .product-colors,
  html body section #productsGrid .product-card .product-colors,
  html body section #bsGrid .product-card .product-colors{ grid-area:colors !important; }
  html body section .products-grid .product-card .product-price,
  html body section #productsGrid .product-card .product-price,
  html body section #bsGrid .product-card .product-price{ grid-area:price !important; }
  html body section .products-grid .product-card .btn-cart,
  html body section #productsGrid .product-card .btn-cart,
  html body section #bsGrid .product-card .btn-cart{
    grid-area:button !important;
    width:100% !important;
    justify-self:stretch !important;
  }
}

/* ── Mobile: tighter spacing, slightly smaller pieces ──────────── */
@media (max-width:560px){
  html body section .product-card .product-badge{
    top:12px !important; right:12px !important;
    padding:7px 12px !important; font-size:10px !important;
  }
  html body section .product-card .product-wishlist{
    top:12px !important; left:12px !important;
    width:38px !important; height:38px !important; font-size:16px !important;
  }
  html body section .product-card .product-info{ padding:14px 16px 16px !important; gap:4px !important; }
  html body section .product-card .product-name{ font-size:15px !important; }
  html body section .product-card .product-type{ font-size:12px !important; }
  html body section .product-card .product-price{ font-size:15px !important; }
  html body section .product-card .product-price s{ font-size:11px !important; }
  html body section .product-card .product-colors .color-dot{ width:18px !important; height:18px !important; }
  html body section .product-card .btn-cart{
    height:36px !important; padding:0 14px !important; font-size:12px !important;
  }
  html body section .product-card .product-footer{
    gap:8px !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:"colors colors" "price button" !important;
  }
  html body section .product-card .product-colors{ grid-area:colors !important; }
  html body section .product-card .product-price{ grid-area:price !important; }
  html body section .product-card .btn-cart{ grid-area:button !important; }
}

/* ════════════════════════════════════════════════════════════════════
 * 2026-05-14 — Heart wishlist + product badge (NEW/BESTSELLER) alignment
 *
 * Bug: heart was 38×38 (round) at top:14px left:14px,
 *      badge was 24px tall (pill) at top:14px right:14px
 *      → tops aligned but bottoms didn't → looked off-balance.
 *
 * Fix: pin both to the same height (36px) + same vertical center.
 *      Heart stays a circle. Badge becomes a 36px-tall pill with auto width.
 *      Both at top:12px right/left:12px so they live in the same horizontal
 *      band.
 * ════════════════════════════════════════════════════════════════════ */
/* Use specificity 0,3,3 to match the existing `html body section
 * .product-card .product-wishlist` rule at line ~4085, then come AFTER it
 * in source order to win the cascade. */
html body section .product-card .product-wishlist {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10) !important;
  color: #ef4444 !important;             /* heart accent */
  cursor: pointer !important;
  z-index: 22 !important;
  transition: transform .15s ease, background .15s ease, color .15s ease !important;
}
html body section .product-card .product-wishlist:hover {
  transform: scale(1.08) !important;
  background: #ef4444 !important;
  color: #fff !important;
}
html body section .product-card .product-wishlist.active {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}

html body section .product-card .product-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 14px !important;            /* horizontal only — vertical via line-height */
  line-height: 36px !important;          /* match height = perfect vertical center */
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #006fd6, #0a4ea3) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 111, 214, 0.30) !important;
  z-index: 21 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* Specific badge tints — keeps semantic meaning while preserving size */
html body section .product-card .product-badge.badge-new      { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 4px 12px rgba(16,185,129,.3) !important; }
html body section .product-card .product-badge.badge-sale     { background: linear-gradient(135deg, #ef4444, #dc2626) !important; box-shadow: 0 4px 12px rgba(239,68,68,.3) !important; }
html body section .product-card .product-badge.badge-limited  { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 4px 12px rgba(245,158,11,.3) !important; }

/* Mobile: both shrink to 32px in lockstep so they stay aligned */
@media (max-width: 600px) {
  html body section .product-card .product-wishlist,
  html body section .product-card .product-badge {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    top: 10px !important;
  }
  html body section .product-card .product-wishlist {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    left: 10px !important;
  }
  html body section .product-card .product-badge {
    right: 10px !important;
    line-height: 32px !important;
    font-size: 10px !important;
    padding: 0 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * 2026-05-14 — Image hydration placeholders (no broken-icon flash)
 *
 * The JS swaps the actual image into these divs/imgs after fetching from
 * the kv_content table. Until that happens, give every "to-be-hydrated"
 * spot a soft gray bg + smooth fade transition so users see a clean
 * placeholder, not transparent nothing or a broken icon.
 * ════════════════════════════════════════════════════════════════════ */

/* Background-image divs (hero/banner/lifestyle/newsletter/faceshape) */
#heroGrid,
#lifestyleImg, .lifestyle-image,
#nlImg, .newsletter-image,
#faceshapeImg, .faceshape-image,
[data-edit-key$=".image"] {
  background-color: #f1f5f9 !important;     /* light slate placeholder */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: background-image .2s ease, opacity .2s ease !important;
}

/* IMG tags that JS will hydrate later (product cards, category thumbs, insta) */
.product-card img,
.category-card img,
.insta-grid img,
[data-edit-key$=".image"] img,
img[id^="catImg"],
img[id^="instaImg"] {
  background-color: #f1f5f9;                /* shows during loading */
  transition: opacity .15s ease;
}
.product-card img[src=""],
.product-card img:not([src]) {
  opacity: 0;                                /* hide if no src yet */
}

/* Make any product-img wrapper reserve aspect-ratio space so cards don't
 * jump in size while images load (cumulative layout shift = 0) */
.product-card .product-img,
#productsGrid .product-img,
#bsGrid .product-img {
  background-color: #fbfcfe !important;
  position: relative !important;
  isolation: isolate !important;
}
.product-card .product-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f8fafc 25%, #e2e8f0 25%, #e2e8f0 50%, #f8fafc 50%, #f8fafc 75%, #e2e8f0 75%);
  background-size: 14px 14px;
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.product-card .product-img:has(img[src]:not([src=""])) ::before,
.product-card .product-img.is-loaded::before {
  opacity: 0;                                /* fade out placeholder once loaded */
}
.product-card .product-img > * {
  position: relative;
  z-index: 1;
}