:root{
    --bg:#FFF7EC; --ink:#2B2250; --ink-soft:#6A6290; --line:#EADFCB;
    --red:#FF5A6E; --red-d:#D63A50; --green:#2FBF71; --green-d:#1E9356;
    --blue:#3EB8F0; --blue-d:#1F8DC2; --yellow:#FFC93C; --yellow-d:#E0A40F;
    --pink:#FF7EB6; --pink-d:#E0558F; --purple:#9B7BFF; --purple-d:#7556E0;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  body{
    font-family:'Quicksand', sans-serif; color:var(--ink); background:var(--bg); min-height:100vh;
    background-image:
      radial-gradient(circle at 8% 12%, #FFE1E6 0 60px, transparent 61px),
      radial-gradient(circle at 92% 30%, #DDF3FF 0 80px, transparent 81px),
      radial-gradient(circle at 15% 78%, #E2F7E9 0 70px, transparent 71px),
      radial-gradient(circle at 88% 88%, #FFF0C7 0 90px, transparent 91px);
    background-attachment:fixed;
  }
  h1,h2,h3,.baloo{ font-family:'Baloo 2', cursive; margin:0; }
  button,input{ font-family:inherit; }
  .wrap{ max-width:980px; margin:0 auto; padding:0 16px 130px; }

  /* candy cane strip */
  .cane{ height:14px; background:repeating-linear-gradient(135deg, var(--red) 0 14px, #fff 14px 28px); }

  /* user bar */
  .userbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0 0; }
  .hello{ font-weight:700; font-size:14.5px; }
  .hello b{ font-family:'Baloo 2'; font-size:16px; }
  .ub-btns{ display:flex; gap:6px; }
  .pill-btn{ border:2.5px solid var(--ink); background:#fff; border-radius:30px; padding:5px 12px; font-weight:700; font-size:13px; cursor:pointer; color:var(--ink); box-shadow:0 3px 0 var(--ink); }
  .pill-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }

  /* header */
  .hero{ text-align:center; padding:14px 0 18px; }
  .logo{ font-size:66px; line-height:1; font-weight:800; letter-spacing:1px; display:inline-flex; gap:2px; }
  .logo span{ display:inline-block; text-shadow:0 4px 0 rgba(43,34,80,.18); }
  .logo span:nth-child(1){ color:var(--red); transform:rotate(-6deg); }
  .logo span:nth-child(2){ color:var(--green); transform:translateY(-4px) rotate(4deg); }
  .logo span:nth-child(3){ color:var(--blue); transform:rotate(-3deg); }
  .logo span:nth-child(4){ color:var(--yellow); transform:translateY(-6px) rotate(5deg); }
  .logo span:nth-child(5){ color:var(--pink); transform:rotate(-4deg); }
  .logo span:nth-child(6){ color:var(--purple); transform:translateY(-3px) rotate(6deg); }
  .logo .tree{ font-size:44px; align-self:center; margin-left:6px; transform:rotate(8deg); }
  .sub{ display:inline-block; margin-top:10px; background:var(--ink); color:#fff; font-family:'Baloo 2'; font-weight:700; font-size:17px; padding:6px 18px 4px; border-radius:30px; transform:rotate(-1.5deg); box-shadow:0 4px 0 var(--red); }
  .owners{ display:flex; justify-content:center; gap:14px; margin-top:16px; }
  .owner{ text-align:center; }
  .owner .face{ width:92px; height:92px; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 0 rgba(43,34,80,.15); margin:0 auto 4px; overflow:hidden; background:#fff; }
  .owner .face img{ display:block; width:100%; height:100%; }
  @media (max-width:380px){ .owner .face{ width:80px; height:80px; } }
  .owner:nth-child(1) .face{ transform:rotate(-5deg); } .owner:nth-child(3) .face{ transform:rotate(5deg); }
  .owner .nm{ font-weight:700; font-size:13px; }
  .hero p{ margin:14px auto 0; max-width:420px; font-weight:700; color:var(--ink-soft); font-size:14.5px; }

  /* products */
  .shelf-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0 0 16px; }
  .shelf-bar .chip{ font-size:15px; padding:6px 14px 4px; }
  .search{ flex:1 1 100%; display:flex; align-items:center; gap:8px; background:#fff; border:2.5px solid var(--ink); border-radius:14px; padding:0 12px; box-shadow:0 3px 0 var(--ink); }
  .search input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Quicksand'; font-weight:700; font-size:16px; color:var(--ink); padding:10px 0; }
  .sort{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; }
  .sort select{ font-family:'Quicksand'; font-weight:700; font-size:14px; color:var(--ink); background:#fff; border:2.5px solid var(--ink); border-radius:12px; padding:6px 8px; cursor:pointer; }
  .grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
  @media (min-width:720px){ .grid{ grid-template-columns:repeat(3, 1fr); gap:20px; } }
  .card{ background:#fff; border:3px solid var(--ink); border-radius:24px; overflow:hidden; box-shadow:0 6px 0 var(--ink); display:flex; flex-direction:column; transition:transform .15s; }
  .card:nth-child(4n+1){ transform:rotate(-1deg); } .card:nth-child(4n+2){ transform:rotate(1deg); }
  .card:nth-child(4n+3){ transform:rotate(.6deg); } .card:nth-child(4n){ transform:rotate(-.6deg); }
  .ph{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:68px; position:relative; border-bottom:3px solid var(--ink); }
  .ph img{ width:100%; height:100%; object-fit:cover; }
  .price-tag{ position:absolute; top:10px; left:10px; z-index:2; background:var(--yellow); border:3px solid var(--ink); border-radius:16px; box-shadow:0 3px 0 var(--ink); padding:3px 16px 0; font-family:'Baloo 2'; font-weight:800; font-size:24px; line-height:1.25; transform:rotate(-4deg); }
  .badge{ position:absolute; top:10px; right:10px; background:#fff; border:2.5px solid var(--ink); border-radius:20px; padding:1px 9px 0; font-family:'Baloo 2'; font-weight:700; font-size:12.5px; }
  .badge.out{ background:var(--ink); color:#fff; }
  .body{ padding:12px 12px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .body h3{ font-size:19px; line-height:1.1; }
  .desc{ font-size:13px; font-weight:600; color:var(--ink-soft); line-height:1.35; flex:1; }
  .card.soldout .ph{ filter:grayscale(.9); opacity:.6; }

  /* variation picker */
  .pick-label{ font-size:12px; font-weight:700; color:var(--ink-soft); }
  .chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .chip{ border:2.5px solid var(--ink); background:#fff; border-radius:12px; padding:4px 10px 2px; font-family:'Baloo 2'; font-weight:700; font-size:14px; cursor:pointer; color:var(--ink); line-height:1.2; }
  .chip small{ display:block; font-family:'Quicksand'; font-size:10.5px; font-weight:700; color:var(--ink-soft); }
  .chip.on{ background:var(--blue); color:#fff; box-shadow:0 3px 0 var(--ink); }
  .chip.on small{ color:#E6F6FF; }
  .chip:disabled{ border-style:dashed; color:#B5AFCB; cursor:not-allowed; text-decoration:line-through; }
  .chip:disabled small{ text-decoration:none; color:#B5AFCB; }

  .stock{ font-size:12px; font-weight:700; color:var(--ink-soft); }
  .stock.low{ color:var(--red-d); }
  .add-row{ display:flex; align-items:center; gap:8px; }
  .qty{ display:flex; align-items:center; border:2.5px solid var(--ink); border-radius:14px; overflow:hidden; background:#fff; }
  .qty button{ width:28px; height:36px; border:none; background:#fff; font-size:20px; font-weight:800; color:var(--ink); cursor:pointer; }
  .qty button:disabled{ color:#C8C2DA; }
  .qty span{ min-width:22px; text-align:center; font-family:'Baloo 2'; font-weight:800; font-size:17px; }
  .big-btn{ white-space:nowrap; border:3px solid var(--ink); border-radius:16px; padding:8px 10px 6px; font-family:'Baloo 2'; font-weight:800; font-size:16px; cursor:pointer; color:#fff; background:var(--green); box-shadow:0 4px 0 var(--ink); flex:1; }
  .big-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
  a.big-btn{ display:block; flex:none; text-align:center; text-decoration:none; color:#fff !important; }
  .big-btn.choose{ background:var(--blue); }
  .big-btn:disabled{ background:#E3DEEF; color:#9C95B8; cursor:not-allowed; box-shadow:0 4px 0 #C8C2DA; border-color:#C8C2DA; }
  .big-btn.red{ background:var(--red); } .big-btn.blue{ background:var(--blue); } .big-btn.white{ background:#fff; color:var(--ink); }

  /* bag bar */
  .bag{ position:fixed; left:0; right:0; bottom:0; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); background:var(--yellow); border-top:3px solid var(--ink); display:none; z-index:20; }
  .bag.show{ display:block; }
  body.on-product .bag{ z-index:40; }
  .bag .inner{ max-width:980px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .bag .sum{ font-family:'Baloo 2'; font-weight:800; font-size:21px; line-height:1.05; }
  .bag .sum small{ display:block; font-family:'Quicksand'; font-size:13px; font-weight:700; }
  .bag .big-btn{ flex:0 0 auto; padding:9px 20px 7px; font-size:18px; background:var(--red); }

  /* sheets */
  .sheet-bg{ position:fixed; inset:0; background:rgba(43,34,80,.55); display:none; align-items:flex-end; justify-content:center; z-index:50; }
  .sheet-bg.open{ display:flex; }
  .sheet{ background:var(--bg); width:100%; max-width:480px; max-height:92vh; overflow-y:auto; border:3px solid var(--ink); border-bottom:none; border-radius:28px 28px 0 0; padding:22px 18px 26px; }
  @media (min-width:640px){ .sheet-bg{ align-items:center; } .sheet{ border-radius:28px; border-bottom:3px solid var(--ink); box-shadow:0 8px 0 var(--ink); } }
  .sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .sheet-head h2{ font-size:26px; }
  .x{ width:38px; height:38px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; font-size:20px; font-weight:800; cursor:pointer; color:var(--ink); }
  .line{ display:flex; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:2px dashed var(--line); font-weight:700; }
  .line .v{ display:block; font-size:12.5px; color:var(--ink-soft); }
  .total{ display:flex; justify-content:space-between; font-family:'Baloo 2'; font-weight:800; font-size:24px; padding:12px 0 6px; }
  .for{ background:#fff; border:2.5px solid var(--ink); border-radius:16px; padding:10px 12px; font-weight:700; margin:8px 0 16px; display:flex; align-items:center; gap:10px; }
  .for .av{ width:36px; height:36px; border-radius:50%; background:var(--pink); color:#fff; font-family:'Baloo 2'; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }

  /* welcome / profile */
  .welcome{ text-align:center; }
  .welcome .wave{ font-size:56px; line-height:1; }
  .welcome h2{ font-size:28px; margin-top:6px; }
  .welcome p{ font-weight:700; color:var(--ink-soft); margin:4px 0 18px; }
  .field-label{ display:block; text-align:left; font-family:'Baloo 2'; font-weight:700; font-size:16px; margin:0 0 6px; }
  .name-input{ width:100%; border:3px solid var(--ink); border-radius:16px; padding:12px 14px; font-size:18px; font-weight:700; background:#fff; color:var(--ink); margin-bottom:16px; }
  .name-input:focus{ outline:none; box-shadow:0 0 0 4px #BFE8FB; }
  .pinboxes{ display:flex; gap:10px; justify-content:center; margin-bottom:6px; }
  .pinboxes input{ width:56px; height:62px; text-align:center; font-family:'Baloo 2'; font-weight:800; font-size:28px; border:3px solid var(--ink); border-radius:16px; background:#fff; color:var(--ink); -webkit-text-security:disc; }
  .pinboxes input:focus{ outline:none; box-shadow:0 0 0 4px #FFD7E6; }
  .hint{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:16px; }
  .err{ color:var(--red-d); font-weight:700; font-size:14px; min-height:18px; margin:6px 0; }
  .link-btn{ background:none; border:none; color:var(--blue-d); font-weight:700; font-size:14.5px; text-decoration:underline; cursor:pointer; margin-top:12px; }

  .yay{ text-align:center; }
  .yay .big{ font-size:60px; }
  .yay h2{ font-size:30px; color:var(--green-d); }

  .order-card{ background:#fff; border:2.5px solid var(--ink); border-radius:16px; padding:10px 12px; margin-bottom:10px; }
  .order-card .top{ display:flex; justify-content:space-between; font-family:'Baloo 2'; font-weight:800; }
  .order-card .when{ font-size:12px; font-weight:700; color:var(--ink-soft); }
  .order-card.cancelled{ opacity:.55; }
  .order-card ul{ margin:6px 0 0; padding-left:18px; font-size:13.5px; font-weight:600; }

  .msg{ grid-column:1/-1; text-align:center; font-weight:700; color:var(--ink-soft); padding:30px 10px; }
  .one-opt{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
  .pay{ background:#fff; border:3px dashed var(--ink); border-radius:20px; padding:14px; text-align:center; margin:14px 0; }
  .pay h3{ font-size:20px; }
  .pay img{ width:100%; max-width:240px; border-radius:12px; margin:8px auto 4px; display:block; }
  .pay .note{ font-weight:700; font-size:14px; white-space:pre-wrap; }
  .pay a{ font-weight:700; font-size:13px; color:var(--blue-d); }
  .toast{ position:fixed; left:50%; top:16px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:14px; font-weight:700; z-index:100; display:none; }
  .toast.show{ display:block; }

  /* product cards link to the product page */
  .card a{ color:inherit; text-decoration:none; }
  a.ph{ display:flex; }
  .desc.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:none; }
  .see-more{ font-weight:700; font-size:13px; color:var(--blue-d) !important; flex:1; }

  /* product page */
  body.on-product{ overflow:hidden; }
  .pp{ position:fixed; inset:0; z-index:30; background:var(--bg); overflow-y:auto; display:none; padding-bottom:110px; }
  .pp.open{ display:block; }
  .pp-wrap{ max-width:980px; margin:0 auto; padding:14px 16px 20px; }
  .pp-back{ position:sticky; top:10px; z-index:5; margin-bottom:14px; }
  .pp-grid{ display:grid; gap:20px; }
  @media (min-width:760px){ .pp-grid{ grid-template-columns:1.1fr 1fr; align-items:start; } }
  .gallery{ position:relative; border:3px solid var(--ink); border-radius:24px; box-shadow:0 6px 0 var(--ink); overflow:hidden; }
  .slides{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:1/1; }
  .slides::-webkit-scrollbar{ display:none; }
  .slide{ flex:0 0 100%; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; }
  .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
  .slide.emoji{ font-size:110px; }
  .gallery .price-tag{ top:14px; left:14px; font-size:30px; }
  .gal-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; font-size:24px; font-weight:800; line-height:1; color:var(--ink); cursor:pointer; box-shadow:0 3px 0 var(--ink); }
  .gal-nav.prev{ left:10px; } .gal-nav.next{ right:10px; }
  .thumbs{ display:flex; gap:8px; margin-top:14px; overflow-x:auto; padding-bottom:4px; }
  .thumb{ flex:0 0 64px; height:64px; border-radius:14px; border:3px solid transparent; padding:0; overflow:hidden; cursor:pointer; background:#fff; opacity:.65; }
  .thumb.on{ border-color:var(--ink); opacity:1; }
  .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .slide img[data-zoom]{ cursor:zoom-in; }
  .zoom-hint{ position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.92); border:2px solid var(--ink); border-radius:999px; padding:3px 10px; font-size:13px; font-weight:800; color:var(--ink); pointer-events:none; }

  /* "You might also like" */
  .pp-more{ margin-top:30px; }
  .pp-more h3{ font-size:24px; margin:0 0 12px; }
  .more-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:42%; gap:12px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .more-grid::-webkit-scrollbar{ display:none; }
  @media (min-width:640px){ .more-grid{ grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); overflow:visible; } }
  @media (min-width:900px){ .more-grid{ grid-template-columns:repeat(6, 1fr); } }
  .more-card{ display:flex; flex-direction:column; gap:4px; background:#fff; border:3px solid var(--ink); border-radius:18px; box-shadow:0 4px 0 var(--ink); padding:8px; color:var(--ink); text-decoration:none; scroll-snap-align:start; min-width:0; }
  .more-card:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--ink); }
  .more-card.soldout{ opacity:.6; }
  .more-ph{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:40px; }
  .more-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
  .more-name{ font-weight:800; font-size:14px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .more-price{ font-family:'Baloo 2'; font-weight:800; font-size:16px; color:var(--red-d); }

  /* Full-screen photo zoom */
  .zoom{ position:fixed; inset:0; z-index:60; background:rgba(24,18,44,.94); display:none; }
  .zoom.open{ display:block; }
  body.zooming{ overflow:hidden; }
  .zoom-stage{ position:absolute; inset:0; overflow:hidden; touch-action:none; display:flex; align-items:center; justify-content:center; cursor:zoom-in; user-select:none; -webkit-user-select:none; }
  .zoom.zoomed .zoom-stage{ cursor:grab; }
  .zoom-stage img{ max-width:100%; max-height:100%; object-fit:contain; transform-origin:center center; will-change:transform; -webkit-user-drag:none; }
  .zoom-btn{ position:absolute; width:46px; height:46px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; color:var(--ink); font-size:24px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 3px 0 var(--ink); z-index:2; }
  .zoom-x{ top:14px; right:14px; font-size:20px; }
  .zoom-nav{ top:50%; transform:translateY(-50%); display:none; }
  .zoom.multi .zoom-nav{ display:block; }
  .zoom.zoomed .zoom-nav{ display:none; }
  .zoom-nav.prev{ left:12px; } .zoom-nav.next{ right:12px; }
  .zoom-foot{ position:absolute; left:0; right:0; bottom:16px; display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; font-weight:800; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.5); }
  .zoom-tip{ font-size:13px; opacity:.8; }
  .zoom.zoomed .zoom-tip{ visibility:hidden; }
  .pp-info{ background:#fff; border:3px solid var(--ink); border-radius:24px; box-shadow:0 6px 0 var(--ink); padding:18px 16px; display:flex; flex-direction:column; gap:10px; }
  .pp-info h2{ font-size:30px; line-height:1.05; }
  .pp-desc{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.55; white-space:pre-wrap; }
  .pp-controls{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
  .pp-controls .chip{ font-size:16px; padding:6px 14px 4px; }
  .pp-controls .big-btn{ font-size:18px; padding:10px 14px 8px; }

  /* "Pick one first" nudge when Add is tapped before choosing an option */
  .chips.nudge{ animation:nudge .5s ease; }
  .chips.nudge .chip:not(:disabled){ border-color:var(--red); }
  @keyframes nudge{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }

  /* Categories: a sidebar on wide screens, a swipeable row on phones */
  .shop-layout{ display:block; }
  .cats{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px 14px; padding:2px 16px 8px; }
  .cats::-webkit-scrollbar{ display:none; }
  .cats[hidden]{ display:none; }
  .cats-title{ display:none; }
  .cat{ flex:0 0 auto; display:flex; align-items:center; gap:6px; border:2.5px solid var(--ink); background:#fff; color:var(--ink); border-radius:999px; padding:6px 12px 5px; font-family:'Baloo 2'; font-weight:800; font-size:15px; cursor:pointer; white-space:nowrap; }
  .cat .ct{ font-family:'Quicksand'; font-size:11.5px; font-weight:800; background:var(--cream-2, #F3EBDD); border-radius:999px; padding:1px 7px; color:var(--ink-soft); }
  .cat.on{ background:var(--pink); color:#fff; box-shadow:0 3px 0 var(--ink); }
  .cat.on .ct{ background:rgba(255,255,255,.3); color:#fff; }
  @media (min-width:900px){
    .wrap{ max-width:1200px; }
    .shop-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
    .cats{ position:sticky; top:16px; flex-direction:column; gap:6px; overflow:visible; margin:0; padding:14px; background:#fff; border:3px solid var(--ink); border-radius:22px; box-shadow:0 5px 0 var(--ink); }
    .cats-title{ display:block; font-family:'Baloo 2'; font-weight:800; font-size:18px; margin:0 4px 4px; }
    .cat{ width:100%; border-radius:14px; border-color:transparent; padding:8px 10px 7px; }
    .cat:hover{ background:#FFF4E6; }
    .cat.on{ border-color:var(--ink); background:var(--pink); }
    .cat .nm{ flex:1; text-align:left; }
  }

  /* Pre-order */
  .pill-btn.pre{ background:var(--yellow); }
  .po-note{ background:#FFF4D6; border:2.5px dashed var(--yellow-d); border-radius:16px; padding:10px 12px; font-weight:700; font-size:14px; margin:4px 0 14px; color:var(--ink); }
  .po-select{ width:100%; border:2.5px solid var(--ink); border-radius:14px; padding:10px 12px; font-family:'Quicksand'; font-weight:700; font-size:16px; background:#fff; color:var(--ink); margin-bottom:12px; }
  .po-qty{ width:max-content; margin-bottom:12px; }
  .po-tag{ font-size:12.5px; font-weight:800; color:var(--yellow-d); margin:2px 0 4px; }
  .pre-link{ margin-top:14px; display:block; }
  .po-qty button{ width:44px; height:42px; } .po-qty span{ min-width:36px; }

  .eta{ background:var(--green); color:#fff; border:3px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink); padding:10px 12px; font-family:'Baloo 2'; font-weight:700; font-size:18px; text-align:center; margin:12px 0 4px; }
  .pay-sub{ font-weight:700; font-size:13.5px; color:var(--ink-soft); }

  .pay-intro{ background:#fff; border:3px solid var(--ink); border-radius:18px; padding:12px 14px; margin:10px 0 0; text-align:left; font-weight:700; font-size:15px; }
  .pay-intro p{ margin:4px 0; }

  /* Budget & age filters */
  .filter-row{ flex:1 1 100%; display:flex; align-items:center; gap:8px; min-width:0; }
  .filter-row .fl{ font-family:'Baloo 2'; font-weight:800; font-size:14px; white-space:nowrap; }
  .chips.scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; }
  .chips.scroll::-webkit-scrollbar{ display:none; }
  .chips.scroll .chip{ flex:0 0 auto; white-space:nowrap; font-size:14px; padding:5px 12px 3px; }
  .saved-chip.on{ background:var(--pink); }
  /* Best seller / almost gone flags on the photo */
  .flags{ position:absolute; left:8px; bottom:8px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; z-index:2; }
  .flag{ background:#fff; border:2.5px solid var(--ink); border-radius:12px; padding:1px 8px 0; font-family:'Baloo 2'; font-weight:800; font-size:12.5px; line-height:1.4; }
  .flag.best{ background:var(--yellow); }
  .flag.low{ background:var(--red); color:#fff; }
  /* Wishlist heart */
  .ph-wrap{ position:relative; }
  .heart{ position:absolute; right:8px; bottom:11px; z-index:3; width:38px; height:38px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; color:var(--red); font-size:20px; line-height:1; cursor:pointer; box-shadow:0 2px 0 var(--ink); display:flex; align-items:center; justify-content:center; padding:0; }
  .heart.on{ background:var(--red); color:#fff; }
  .heart.big{ position:static; flex:0 0 auto; width:46px; height:46px; font-size:24px; }
  .pp-title{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  /* Keep the card price tag and the "N designs" label from overlapping on phones */
  .card .ph .price-tag{ font-size:19px; padding:2px 10px 0; border-width:2.5px; top:8px; left:8px; }
  .card .ph .badge{ font-size:11.5px; padding:1px 7px 0; top:8px; right:8px; }
  @media (min-width:720px){ .card .ph .price-tag{ font-size:22px; } }

  /* Sale prices */
  .price-tag s{ font-size:.62em; font-weight:700; opacity:.75; margin-left:2px; }
  .price-tag.sale{ background:var(--red); color:#fff; }
  .flag.sale{ background:var(--red); color:#fff; }
  .chip small s{ opacity:.7; }