/* Brand tokens lifted verbatim from the app (privacy.html) — family resemblance, no coupling */
  :root{
    --pink:#ff8fc7; --pink-soft:#ffd9ec; --lav:#c9b8ff; --lav-soft:#ece6ff;
    --pink-ink:#b4236c; --ink:#4b3b57; --ink-soft:#6f607c; --line:#f0e6f4;
    --maxw:1100px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{margin:0;padding:0}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
    background:linear-gradient(170deg,#fff5fb 0%,#f3edff 100%);
    background-attachment:fixed; min-height:100vh;
    overflow-x:clip;
  }
  a{color:var(--pink-ink);font-weight:700;text-decoration:none}
  a:hover{text-decoration:underline}
  img{max-width:100%;display:block}

  /* ---- Nav ---- */
  .nav{position:sticky;top:0;z-index:50;
    background:rgba(255,250,253,.78);backdrop-filter:saturate(1.4) blur(12px);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);
    border-bottom:1px solid var(--line)}
  .nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:16px;
    padding:12px calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left))}
  .brand{display:flex;align-items:center;gap:10px;flex:none}
  .brand .logo{width:34px;height:34px;border-radius:10px;overflow:hidden;background:#fff;
    border:1px solid var(--line);box-shadow:0 4px 14px rgba(120,80,160,.14);flex:none}
  .brand .logo img{width:100%;height:100%;object-fit:cover}
  .brand .name{font-size:19px;font-weight:800;letter-spacing:.2px;color:var(--ink)}
  .brand .name span{color:var(--pink-ink)}
  .nav-links{display:flex;gap:22px;margin-left:14px}
  .nav-links a{color:var(--ink-soft);font-weight:800;font-size:14px}
  .nav-links a:hover{color:var(--ink);text-decoration:none}
  .nav-spacer{flex:1}
  /* iOS CTA — links to the launch email signup until the App Store page is live. */
  .ios-cta{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;
    background:#fff;border:1px solid var(--line);border-radius:22px;padding:7px 8px 7px 14px;
    box-shadow:0 3px 12px rgba(120,80,160,.10);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  .ios-cta:hover{transform:translateY(-1px);border-color:var(--lav);box-shadow:0 6px 16px rgba(120,80,160,.16);text-decoration:none}
  .ios-cta:focus-visible{outline:3px solid var(--pink-soft);outline-offset:2px;text-decoration:none}
  .ios-cta .ios-label{font-weight:800;font-size:13px;color:var(--ink-soft);white-space:nowrap}
  .ios-cta .ios-tag{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    color:var(--ink);background:var(--lav);padding:4px 9px;border-radius:16px}

  /* ---- Layout ---- */
  section{max-width:var(--maxw);margin:0 auto;padding:0 18px}
  .eyebrow{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--pink-ink);margin:0 0 12px}

  /* ---- Hero ---- */
  .hero{text-align:center;padding:64px 18px 40px}
  .hero h1{font-size:clamp(34px,6vw,56px);font-weight:900;line-height:1.05;letter-spacing:.2px;margin:0 0 16px}
  .hero p{max-width:600px;margin:0 auto 26px;font-size:clamp(16px,2.2vw,18.5px);color:var(--ink-soft)}
  .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .trust-strip{max-width:860px;margin:28px auto 0;display:grid;grid-template-columns:repeat(3,1fr);
    background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:20px;
    box-shadow:0 10px 30px rgba(120,80,160,.09);overflow:hidden;text-align:left}
  .trust-item{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-items:center;
    padding:14px 16px;color:var(--ink);font-weight:inherit;text-decoration:none}
  .trust-item + .trust-item{border-left:1px solid var(--line)}
  .trust-icon{grid-row:1/span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
    background:var(--lav-soft);color:var(--ink);font-size:15px;font-weight:900}
  .trust-item:nth-child(2) .trust-icon{background:var(--pink-soft)}
  .trust-title{font-size:12.5px;font-weight:900;line-height:1.25}
  .trust-detail{font-size:11.5px;font-weight:650;line-height:1.35;color:var(--ink-soft)}
  .trust-item:hover{text-decoration:none;background:rgba(255,255,255,.72)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font:inherit;font-weight:800;font-size:15px;border-radius:26px;padding:13px 26px;cursor:pointer;
    border:1px solid transparent;transition:transform .12s ease,box-shadow .12s ease}
  .btn:hover{text-decoration:none;transform:translateY(-1px)}
  .btn-primary{background:var(--pink-ink);color:#fff;box-shadow:0 8px 22px rgba(180,35,108,.28)}
  .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:0 4px 14px rgba(120,80,160,.10)}

  /* ---- What we carry ---- */
  .carry{padding:34px 18px 8px}
  .section-head{text-align:center;margin-bottom:26px}
  .section-head h2{font-size:clamp(26px,4vw,34px);font-weight:900;margin:0 0 8px}
  .section-head p{color:var(--ink-soft);margin:0 auto;max-width:560px}
  .group-label{display:flex;align-items:baseline;gap:10px;margin:30px 4px 14px}
  .group-label h3{font-size:19px;font-weight:900;margin:0}
  /* "See all →" — injected by shop.js next to a heading when a group has 2+ cards.
     Links to the category view (#singles/#sealed/#bundles). */
  .see-all{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:800;color:var(--pink-ink);white-space:nowrap}
  .see-all:hover{text-decoration:none;color:var(--ink)}
  .see-all .see-arrow{font-size:15px;line-height:1;transition:transform .12s ease}
  .see-all:hover .see-arrow{transform:translateX(3px)}

  /* ---- Category view (one collection at a time) ----
     shop.js sets body.in-category + .is-active on the chosen group when the URL
     hash is a collection handle. Hero/about/other groups hide; the cart, cards
     and detail modal are the same elements, so nothing here is duplicated. */
  .cat-back{display:none}
  body.in-category .hero,
  body.in-category .about,
  body.in-category .carry .section-head{display:none}
  body.in-category .shop-group{display:none}
  body.in-category .shop-group.is-active{display:block}
  body.in-category .shop-group.is-active .see-all{display:none}
  body.in-category .cat-back{display:inline-flex;align-items:center;gap:6px;
    margin:6px 4px 2px;font-size:14px;font-weight:800;color:var(--ink-soft)}
  body.in-category .cat-back:hover{color:var(--ink);text-decoration:none}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:18px}
  .product{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
    box-shadow:0 14px 40px rgba(120,80,160,.10);display:flex;flex-direction:column;
    transition:transform .14s ease,box-shadow .14s ease}
  .product:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(120,80,160,.16)}
  .product-media{position:relative;aspect-ratio:3/4;width:100%;padding:0;border:0;cursor:pointer;
    background:linear-gradient(160deg,var(--pink-soft) 0%,var(--lav-soft) 100%);
    display:grid;place-items:center;font:inherit;color:inherit}
  .product-media:focus-visible{outline:3px solid var(--pink-ink);outline-offset:-3px}
  .product-media img.ph{width:44%;opacity:.32;filter:saturate(.9)}
  .product-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
  .product-body .pn{font-weight:800;font-size:15px;line-height:1.2}
  .product-body .pmeta{font-size:12.5px;color:var(--ink-soft);font-weight:600}
  /* Card foot: uniform 2-col grid — price top-left with the quantity pill
     directly under it, Add to cart on the right spanning both rows. The
     .buyslot wrapper stays in the DOM (wireCart reads the stepper through it)
     but display:contents lifts its children into this grid. */
  .product-foot{margin-top:auto;display:grid;grid-template-columns:auto 1fr;align-items:center;
    column-gap:10px;row-gap:8px;padding-top:8px}
  .product-foot > .buyslot{display:contents}
  .product-foot .price{grid-row:1;grid-column:1;justify-self:center}
  .product-foot .qsel{grid-row:2;grid-column:1;justify-self:center}
  .product-foot .buy{grid-row:1/span 2;grid-column:2;justify-self:end}
  .price{font-weight:900;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}

  /* Buy control (rendered by assets/shop.js): a greyed, disabled <button class="buy">Sold out</button>… */
  .buyslot{margin-left:auto;display:flex;align-items:center;gap:8px}
  .buyslot .buy{font:inherit;font-weight:800;font-size:12.5px;color:var(--ink-soft);
    background:var(--lav-soft);border:1px solid var(--line);border-radius:16px;padding:8px 14px;cursor:not-allowed}
  /* …or a purple <a class="buy">Add to cart</a> linking to Shopify's hosted cart/checkout. */
  .buyslot a.buy{color:var(--ink);background:var(--lav);border-color:transparent;cursor:pointer;
    box-shadow:0 6px 16px rgba(120,80,160,.30);transition:transform .12s ease,box-shadow .12s ease}
  .buyslot a.buy:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 9px 22px rgba(120,80,160,.42)}

  /* Live-grid states — products load from the Shopify "singles"/"sealed" collections */
  .grid-note{grid-column:1/-1;text-align:center;color:var(--ink-soft);
    font-weight:600;font-size:14.5px;margin:2px 0;padding:20px 12px}
  .grid-note a{color:var(--pink-ink)}
  .product.is-soldout .product-media{opacity:.5}

  /* ---- Category filter + sort bar (built by assets/shop.js → buildFilters) ----
     Hidden by default; shown only on a category page (body.in-category + the
     .is-active group). Search + price + CCG/Set/Rarity/Language filter the cards
     client-side; Sort reorders the same loaded cards. A facet dropdown only
     exists when 2+ products have values. */
  .ccc-filters{display:none}
  body.in-category .shop-group.is-active .ccc-filters{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:2px 4px 22px}
  .cf-search{flex:1 1 240px;min-width:0;font:inherit;font-size:15px;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:22px;padding:11px 17px;
    box-shadow:0 4px 14px rgba(120,80,160,.08)}
  .cf-search::placeholder{color:var(--ink-soft);opacity:.85}
  .cf-controls{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;max-width:100%}
  .cf-field{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
    letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft);min-width:0;max-width:100%}
  .cf-field select,.cf-field input{font:inherit;font-weight:700;font-size:13.5px;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px;
    text-transform:none;letter-spacing:0;min-width:0;max-width:100%}
  .cf-field select{cursor:pointer}
  .cf-price input{width:72px}
  .cf-dash{color:var(--ink-soft);font-weight:700}
  .cf-search:focus,.cf-field select:focus,.cf-field input:focus{
    outline:none;border-color:var(--lav);box-shadow:0 0 0 3px var(--lav-soft)}
  .cf-clear{font:inherit;font-size:12.5px;font-weight:800;color:var(--pink-ink);
    background:none;border:none;cursor:pointer;padding:8px 4px}
  .cf-clear:hover{color:var(--ink);text-decoration:underline}
  .cf-count{flex-basis:100%;margin:0;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  /* Filtered-out cards + the "no matches" note only affect the active category. */
  body.in-category .shop-group.is-active .product.filtered-out{display:none}
  .cf-empty{display:none}
  body.in-category .shop-group.is-active .cf-empty.is-visible{display:block}
  .cf-clear-link{font:inherit;font-weight:800;color:var(--pink-ink);background:none;
    border:none;cursor:pointer;padding:0}
  .cf-clear-link:hover{color:var(--ink);text-decoration:underline}

  /* ---- About ---- */
  .about{padding:56px 18px}
  .about-card{background:#fff;border:1px solid var(--line);border-radius:24px;
    box-shadow:0 18px 50px rgba(120,80,160,.12);padding:38px 30px;max-width:760px;margin:0 auto;text-align:center}
  .about-card h2{font-size:clamp(24px,4vw,32px);font-weight:900;margin:0 0 14px}
  .about-card p{color:var(--ink-soft);margin:0 auto 12px;max-width:600px;font-size:16.5px}

  /* ---- Newsletter ---- */
  .newsletter{max-width:var(--maxw);margin:26px auto 0;padding:0 18px}
  .nl-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;
    box-shadow:0 8px 24px rgba(120,80,160,.08);display:flex;flex-wrap:wrap;gap:14px;
    align-items:center;justify-content:space-between}
  .nl-title{font-weight:800;font-size:17px}
  .nl-sub{color:var(--ink-soft);font-size:13.5px;max-width:420px}
  .nl-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .nl-input{border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:14px;
    min-width:220px;outline:none;background:#fff;color:var(--ink);font-family:inherit}
  .nl-input:focus{border-color:var(--pink-ink)}
  .nl-status{width:100%;font-size:13px;color:var(--ink-soft)}
  .nl-status.ok{color:#2e8b57}
  .nl-status.err{color:#c0392b}

  /* ---- Footer ---- */
  footer{border-top:1px solid var(--line);margin-top:24px}
  .foot-inner{max-width:var(--maxw);margin:0 auto;padding:30px 18px 44px;
    display:flex;flex-wrap:wrap;align-items:center;gap:14px}
  .foot-inner .brand .name{font-size:17px}
  .foot-spacer{flex:1}
  .foot-links{display:flex;gap:20px;flex-wrap:wrap}
  .foot-links a{color:var(--ink-soft);font-weight:800;font-size:13.5px}
  .foot-links .ig-link{display:inline-flex;align-items:center;gap:6px}
  .foot-links .ig-link:hover{color:var(--pink-ink)}
  .foot-links .ig-glyph{flex:none}
  .copy{width:100%;color:var(--ink-soft);font-size:12.5px;margin-top:4px}

  /* ---- Active "Add to cart" button (rendered by shop.js) ---- */
  .buyslot button.buy:not([disabled]){color:var(--ink);background:var(--lav);border-color:transparent;cursor:pointer;
    box-shadow:0 6px 16px rgba(120,80,160,.30);transition:transform .12s ease,box-shadow .12s ease}
  .buyslot button.buy:not([disabled]):hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(120,80,160,.42)}
  .buyslot button.buy.added{background:#5bbf7a;box-shadow:0 6px 16px rgba(90,180,110,.38)}

  /* ---- Card quantity stepper (rendered by shop.js, sits left of Add to cart) ---- */
  .qsel{display:inline-flex;align-items:center;flex:none;border:1px solid var(--line);
    border-radius:14px;overflow:hidden;background:#fff}
  .qsel .qbtn{width:28px;height:32px;border:0;background:#fff;cursor:pointer;color:var(--ink-soft);
    font:inherit;font-size:16px;font-weight:800;line-height:1;transition:color .12s ease,background .12s ease}
  .qsel .qbtn:hover:not(:disabled){color:var(--ink);background:var(--lav-soft)}
  .qsel .qbtn:disabled{opacity:.32;cursor:not-allowed}
  .qsel .qn{min-width:26px;text-align:center;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
  .qsel.qlast{color:var(--ink);background:var(--pink-soft);border-color:#f3c4db}
  .qsel.qlast .qbtn{width:22px;background:var(--pink-soft)}
  .qsel.qlast .qn{min-width:54px;font-size:11px;white-space:nowrap}
  .qsel.qzero{background:#f7f3f8}
  /* ---- Cart button (nav) ---- */
  .cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);
    box-shadow:0 3px 12px rgba(120,80,160,.10);cursor:pointer;
    transition:transform .12s ease,box-shadow .12s ease}
  .cart-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(120,80,160,.20)}
  .cart-btn svg{width:20px;height:20px}
  .cart-count{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:11px;
    background:var(--pink-ink);color:#fff;font-size:11px;font-weight:800;line-height:1;
    display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(180,35,108,.35)}
  .cart-count.show{display:inline-flex}
  .cart-btn.bump{animation:cartBump .4s ease}
  @keyframes cartBump{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}}

  /* ---- Cart drawer ---- */
  .cart-overlay{position:fixed;inset:0;z-index:60;background:rgba(75,59,87,.34);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
  .cart-overlay.open{opacity:1;visibility:visible}
  body.cart-lock{overflow:hidden}
  .cart-drawer{position:fixed;top:0;right:0;z-index:61;height:100%;width:min(400px,92vw);
    background:linear-gradient(180deg,#fff 0%,#fffafd 100%);box-shadow:-18px 0 50px rgba(120,80,160,.20);
    display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s}
  .cart-drawer.open{transform:translateX(0);visibility:visible;
    transition:transform .26s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
  .cart-head{display:flex;align-items:center;gap:10px;padding:20px 20px 14px;border-bottom:1px solid var(--line)}
  .cart-head h2{font-size:19px;font-weight:900;margin:0}
  .cart-close{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    background:#fff;cursor:pointer;font-size:20px;line-height:1;color:var(--ink-soft);display:grid;place-items:center}
  .cart-close:hover{color:var(--ink)}
  .cart-items{flex:1;overflow-y:auto;padding:6px 20px;-webkit-overflow-scrolling:touch}
  .cart-empty{text-align:center;color:var(--ink-soft);font-weight:600;padding:48px 16px;line-height:1.7}
  .cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .cl-img{width:58px;height:74px;flex:none;border-radius:10px;overflow:hidden;border:1px solid var(--line);
    background:linear-gradient(160deg,var(--pink-soft),var(--lav-soft))}
  .cl-img img{width:100%;height:100%;object-fit:cover}
  .cl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  .cl-title{font-weight:800;font-size:13.5px;line-height:1.25}
  .cl-meta{font-size:11.5px;color:var(--ink-soft);font-weight:600}
  .cl-foot{margin-top:auto;display:flex;align-items:center;gap:10px}
  .cl-price{font-weight:900;font-size:14px;font-variant-numeric:tabular-nums}
  .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
  .qty button{width:26px;height:26px;border:0;background:#fff;cursor:pointer;font-size:15px;font-weight:800;
    color:var(--ink-soft);line-height:1}
  .qty button:hover:not(:disabled){color:var(--ink);background:var(--lav-soft)}
  .qty button:disabled{opacity:.32;cursor:not-allowed}
  .qty .qn{min-width:24px;text-align:center;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
  .cl-max{flex-basis:100%;font-size:11px;font-weight:700;color:var(--ink-soft);margin-top:2px}
  .cl-remove{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-soft);
    font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
  .cl-remove:hover{color:var(--pink-ink)}
  .cart-foot{border-top:1px solid var(--line);padding:16px 20px calc(18px + env(safe-area-inset-bottom))}
  .cart-sub{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
  .cart-sub .cs-label{font-weight:800;font-size:14px}
  .cart-sub .cs-amt{font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}
  .cart-note{color:var(--ink-soft);font-size:12px;margin:0 0 14px}
  .cart-checkout{display:block;width:100%;text-align:center;font:inherit;font-weight:800;font-size:15px;
    border:0;border-radius:24px;padding:14px;cursor:pointer;background:var(--pink-ink);color:#fff;
    box-shadow:0 8px 22px rgba(180,35,108,.28);transition:transform .12s ease,box-shadow .12s ease}
  .cart-checkout:hover{transform:translateY(-1px);box-shadow:0 11px 26px rgba(180,35,108,.36)}
  .cart-checkout[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

  /* ---- Product detail modal (photos + description lightbox) ---- */
  .pd-overlay{position:fixed;inset:0;z-index:70;background:rgba(75,59,87,.42);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
  .pd-overlay.open{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s linear 0s}
  body.pd-lock{overflow:hidden}
  .pd-modal{position:fixed;z-index:71;top:50%;left:50%;width:min(940px,94vw);
    max-height:min(90vh,880px);transform:translate(-50%,-48%);opacity:0;visibility:hidden;
    background:linear-gradient(180deg,#fff 0%,#fffafd 100%);border:1px solid var(--line);
    border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(120,80,160,.30);
    transition:opacity .24s ease,transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear .24s}
  .pd-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%);
    transition:opacity .24s ease,transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
  .pd-close{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;
    border:1px solid var(--line);background:rgba(255,255,255,.92);cursor:pointer;font-size:21px;line-height:1;
    color:var(--ink-soft);display:grid;place-items:center;box-shadow:0 3px 12px rgba(120,80,160,.16)}
  .pd-close:hover{color:var(--ink)}
  .pd-content{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    max-height:inherit;overflow:hidden}
  .pd-gallery{padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0;
    background:linear-gradient(160deg,#fff 0%,#fff8fc 100%)}
  .pd-main{aspect-ratio:3/4;max-height:62vh;border-radius:16px;overflow:hidden;border:1px solid var(--line);
    background:linear-gradient(160deg,var(--pink-soft) 0%,var(--lav-soft) 100%);display:grid;place-items:center}
  .pd-main-img{width:100%;height:100%;object-fit:contain}
  .pd-thumbs{display:flex;gap:8px;flex-wrap:wrap}
  .pd-thumb{width:60px;height:60px;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;
    border:2px solid var(--line);background:#fff;transition:border-color .12s ease,transform .12s ease}
  .pd-thumb img{width:100%;height:100%;object-fit:cover}
  .pd-thumb:hover{transform:translateY(-1px)}
  .pd-thumb.active{border-color:var(--pink)}
  .pd-body{padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px;min-width:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .pd-title{font-size:clamp(20px,2.6vw,26px);font-weight:900;line-height:1.2;margin:0}
  .pd-vendor{font-size:13.5px;color:var(--ink-soft);font-weight:700;margin-top:-6px}
  .pd-price{font-weight:900;font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
  .pd-desc{color:var(--ink-soft);font-size:14.5px;line-height:1.7}
  .pd-desc p{margin:0 0 10px}
  .pd-desc ul,.pd-desc ol{margin:0 0 10px;padding-left:20px}
  .pd-desc li{margin:3px 0}
  .pd-desc a{color:var(--pink-ink)}
  .pd-desc strong,.pd-desc b{color:var(--ink)}
  .pd-desc h1,.pd-desc h2,.pd-desc h3,.pd-desc h4{color:var(--ink);font-size:16px;font-weight:800;margin:14px 0 6px}
  .pd-desc img{border-radius:10px;margin:8px 0}
  .pd-desc :last-child{margin-bottom:0}
  /* Reuse the card's .buyslot, but left-aligned and a touch larger in the modal. */
  .pd-buy{margin:6px 0 4px}
  .pd-buy .buy{font-size:14px;padding:11px 20px}

  /* Home page previews at most 4 cards per category; the rest live behind the
     "See all →" arrow. Category view (body.in-category) shows the full grid. */
  body:not(.in-category) .shop-group .grid > .product:nth-child(n+5){display:none}

  @media (max-width:620px){
    /* Mobile home: show just one example card per category; the rest live behind
       the "See all →" arrow. Category view (body.in-category) shows the full grid. */
    body:not(.in-category) .shop-group .grid > .product:nth-child(n+2){display:none}
    .nav-links{display:none}
    .nav-spacer{display:none}
    .nav-inner{gap:8px}
    .brand{flex:0 1 auto;min-width:0}
    .brand .logo{width:30px;height:30px}
    .brand .name{font-size:16.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ios-cta{margin-left:auto;padding:5px 8px 5px 9px}
    .ios-cta .ios-label{display:none}
    .ios-cta .ios-tag{font-size:9px;padding:3px 7px;letter-spacing:.2px}
    .hero{padding-top:44px}
    .trust-strip{grid-template-columns:1fr;margin-top:24px}
    .trust-item{padding:11px 14px}
    .trust-item + .trust-item{border-left:0;border-top:1px solid var(--line)}
    body.in-category .shop-group.is-active .ccc-filters{align-items:stretch;margin-left:0;margin-right:0}
    .cf-search{flex-basis:100%;width:100%}
    .cf-controls{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:9px}
    .cf-field{display:grid;grid-template-columns:76px minmax(0,1fr);width:100%}
    .cf-field select,.cf-field .cf-ccg{width:100%}
    .cf-price{grid-template-columns:76px minmax(0,1fr) auto minmax(0,1fr)}
    .cf-price input{width:100%}
    .cf-clear{justify-self:start}
    /* Detail modal becomes a bottom sheet that slides up and scrolls as one column. */
    .pd-modal{width:100vw;max-height:92vh;max-height:92dvh;top:auto;bottom:0;left:0;
      transform:translateY(100%);border-radius:22px 22px 0 0}
    .pd-modal.open{transform:translateY(0)}
    .pd-content{grid-template-columns:1fr;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .pd-gallery{padding:18px 18px 8px}
    .pd-main{aspect-ratio:1/1;max-height:52vh}
    .pd-body{padding:16px 18px 24px;overflow:visible}
  }