:root{
  --mist:#F2F4F5; --card:#FFF;
  --pine:#1E2A36; --pine-soft:#4A5768;
  --euca:#7FA08F; --euca-deep:#4C6E61;
  --amber:#C98A3D; --amber-soft:#E8C79A; --amber-glow:#F3B75C;
  --lilac:#B7A8CC; --line:#E2E7E2; --danger:#B5573F;
  --star:#E9A83C;
  --r:16px;
  --shadow:0 2px 12px rgba(34,51,46,.07);
  --shadow-lg:0 18px 50px rgba(34,51,46,.18);
  --fd:'Marcellus',serif; --fb:'Karla',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--mist);color:var(--pine);-webkit-font-smoothing:antialiased}
button{font-family:var(--fb);cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--fb)}
img,svg{display:block;max-width:100%}

@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.7);opacity:.45}}
.bd{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--euca);margin-left:.1em;animation:breathe 4.2s ease-in-out infinite}
@keyframes flame{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.12) translateY(-1.5px)}}
@keyframes mist{0%{transform:translateY(0);opacity:.55}100%{transform:translateY(-14px);opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes up{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .bd{animation:bdFade 5.5s ease-in-out infinite!important}
}
@keyframes bdFade{0%,100%{opacity:.9}50%{opacity:.45}}

/* ---------- promo ticker ---------- */
.promo{background:var(--pine);color:#EAF1EC;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;white-space:nowrap;padding:8px 0}
.promo div{display:inline-flex;gap:56px;animation:ticker 26s linear infinite;padding-right:56px}
.promo span{display:inline-flex;align-items:center;gap:8px}
.promo i{width:4px;height:4px;border-radius:50%;background:var(--amber-glow);flex:none}

/* ---------- header ---------- */
header{position:relative;z-index:60;background:rgba(243,245,242,.93);border-bottom:1px solid var(--line)}
.h-top{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px}
.logo{font-family:var(--fd);font-size:1.8rem;letter-spacing:.02em;color:var(--pine);text-decoration:none;line-height:1;white-space:nowrap;user-select:none}
.logo small{display:block;font-family:var(--fb);font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;color:var(--euca-deep);margin-top:3px}
.search{flex:1;display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 17px;gap:9px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--euca);box-shadow:0 0 0 4px rgba(127,160,143,.14)}
.search svg{flex:none;opacity:.5}
.search input{border:none;outline:none;width:100%;font-size:.95rem;background:transparent;color:var(--pine)}
.h-actions{display:flex;gap:4px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.icon-btn:hover{background:#e6ece7}
.badge{position:absolute;top:1px;right:-1px;background:var(--amber);color:#fff;font-size:.62rem;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.chips{max-width:1320px;margin:0 auto;display:flex;gap:8px;overflow-x:auto;padding:2px 18px 11px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:7px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:.83rem;font-weight:700;color:var(--pine-soft);transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--euca);color:var(--pine)}
.chip.on{background:var(--pine);border-color:var(--pine);color:#fff}

/* ---------- moods ---------- */

.mood-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;justify-content:flex-start}
@media(min-width:1180px){.mood-row{justify-content:center;flex-wrap:wrap}}
.mood-row::-webkit-scrollbar{display:none}
.mood{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:20px;background:#fff;box-shadow:var(--shadow);text-align:center;padding:12px 6px;transition:.2s;cursor:pointer;color:var(--pine)}
.mood:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mood.on{background:var(--pine);color:#fff;box-shadow:var(--shadow-lg)}
.mood.on b{color:#fff}
.qz-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.qz{border:1px solid rgba(239,244,240,.22);color:#EFF4F0;border-radius:14px;padding:14px 18px;font-weight:500;font-size:.94rem;letter-spacing:.01em;transition:.25s ease;background:rgba(255,255,255,.05);cursor:pointer;text-align:left;line-height:1.35}
.qz:hover,.qz:active{background:rgba(239,244,240,.14);border-color:rgba(239,244,240,.5)}
.qz-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:9px;max-width:min(620px,100%);width:100%;box-sizing:border-box}
.qz{white-space:normal;overflow-wrap:anywhere;box-sizing:border-box;max-width:100%}
#heroQuiz{max-width:100%;box-sizing:border-box;overflow:hidden}
@media(max-width:560px){.qz-row{grid-template-columns:1fr}.qz{padding:13px 15px;font-size:.9rem}}
.qz-back{margin-top:18px;color:rgba(239,244,240,.55);font-size:.8rem;font-weight:700;cursor:pointer}
#heroQuiz{animation:up .35s ease}
.mood-ic{display:block;width:30px;height:30px;margin-bottom:8px;color:var(--euca-deep)}
.mood-ic svg{width:100%;height:100%}
.mood.on .mood-ic{color:#EFF4F0}
.mood b{font-size:.72rem;font-weight:800;letter-spacing:.04em}

/* ---------- hero ---------- */
.hero{max-width:1320px;margin:16px auto 8px;padding:0 18px}
.hero-in{background:linear-gradient(112deg,#141F2B 0%,#283B4A 46%,#4C6C77 100%);border-radius:24px;padding:clamp(30px,5vw,52px) clamp(24px,5vw,54px);color:#EFF4F0;position:relative;overflow:hidden;display:flex;align-items:center;gap:20px}
.hero-in::before{content:"";position:absolute;left:-90px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(183,168,204,.25),transparent 66%)}
.hero-txt{position:relative;z-index:1;flex:1}
.hero h1{font-family:var(--fd);font-size:clamp(1.65rem,3.6vw,2.7rem);font-weight:400;line-height:1.18;max-width:21ch}
.hero p{margin-top:12px;font-size:.96rem;opacity:.8;max-width:48ch;line-height:1.55}
.hero-cta{display:inline-block;margin-top:22px;font-weight:800;font-size:.9rem;padding:14px 26px;border-radius:999px;text-decoration:none;transition:.22s;text-align:center}
.hero-primary{background:var(--amber-glow);color:#2A2013;box-shadow:0 8px 20px rgba(8,14,20,.32)}
.hero-primary:hover{transform:translateY(-2px)}
.hero-ghost{background:transparent;color:rgba(239,244,240,.82);border:1px solid rgba(239,244,240,.28);font-weight:600}
.hero-ghost:hover{background:rgba(239,244,240,.1);color:#EFF4F0}
@keyframes momentsGlow{0%{background:rgba(201,138,61,.24)}100%{background:transparent}}
.moods-lit{animation:momentsGlow 2.2s ease-out;border-radius:16px}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.hero-art{position:relative;z-index:1;width:210px;flex:none;animation:floaty 6s ease-in-out infinite}
.breathe-wrap{width:210px;height:210px;position:relative;display:grid;place-items:center}
.breathe-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(232,199,154,.30),rgba(232,199,154,0) 66%)}
.breathe-core{width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9CC0AE,#4C6C77 72%);box-shadow:0 0 70px rgba(127,160,143,.5);animation:breatheBig 8s ease-in-out infinite}
.breathe-lbl{position:absolute;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:#EFF4F0;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.lbl-in{animation:lblA 8s ease-in-out infinite}
.lbl-out{opacity:0;animation:lblB 8s ease-in-out infinite}
@keyframes breatheBig{0%,100%{transform:scale(.7)}50%{transform:scale(1.2)}}
@keyframes lblA{0%,40%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes lblB{0%,42%{opacity:0}52%,90%{opacity:1}98%,100%{opacity:0}}
@media(max-width:760px){.hero-art{display:none}}

/* ---------- flash deals ---------- */
.flash{max-width:1320px;margin:18px auto 0;padding:0 18px}
.flash-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.flash-head h2{font-family:var(--fd);font-weight:400;font-size:1.35rem}
.count{display:flex;gap:5px;align-items:center;font-size:.78rem;font-weight:700;color:var(--pine-soft)}
.count b{background:var(--pine);color:#fff;border-radius:7px;padding:4px 7px;font-variant-numeric:tabular-nums;font-size:.8rem}
.flash-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;min-height:240px}
.flash-row::-webkit-scrollbar{display:none}
.flash-row .card{flex:0 0 172px}

/* ---------- grid ---------- */
main{max-width:1320px;margin:0 auto;padding:10px 18px 60px}
.grid-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 2px 14px;flex-wrap:wrap}
.grid-head h2{font-family:var(--fd);font-weight:400;font-size:1.35rem}
.grid-head h2 span{font-size:.8rem;font-family:var(--fb);color:var(--pine-soft);margin-left:8px}
.sort{padding:8px 13px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:.82rem;font-weight:700;color:var(--pine-soft);outline:none;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px;min-height:70vh}
@media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;cursor:pointer;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.thumb{aspect-ratio:1;position:relative;overflow:hidden;user-select:none}
.thumb svg{width:100%;height:100%}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb img,.pm-thumb img,.ci-thumb img{filter:saturate(.88) contrast(.96) brightness(1.04) sepia(.06)}
.pill{position:absolute;top:9px;left:9px;background:var(--danger);color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.05em;padding:4px 9px;border-radius:999px;z-index:2}
.pill.new{background:var(--euca-deep)}
.pill.digital{background:var(--lilac)}
.heart{position:absolute;top:7px;right:7px;width:31px;height:31px;border-radius:50%;background:rgba(255,255,255,.88);display:grid;place-items:center;z-index:2;transition:.18s;font-size:.95rem;color:#8FA097}
.heart:hover{transform:scale(1.12)}
.heart.on{color:var(--danger)}
.c-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.c-name{font-size:.87rem;font-weight:600;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.35em}
.meta{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--pine-soft)}
.stars{color:var(--star);letter-spacing:-1px;font-size:.78rem}
.c-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px}
.price{font-family:var(--fd);font-size:1.12rem}
.price s{font-family:var(--fb);font-size:.73rem;color:#5F6E66;margin-left:5px}
.off{font-size:.66rem;font-weight:800;color:var(--danger);background:#F7E6DF;border-radius:6px;padding:2px 6px;margin-left:5px;vertical-align:middle}
.add{width:35px;height:35px;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;font-size:1.2rem;line-height:1;transition:.18s;flex:none}
.add:hover{background:var(--euca-deep);transform:scale(1.1)}
.add.added{background:var(--euca-deep);transform:scale(1.12)}
.badge.bump{animation:bump .45s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* skeleton */
.sk{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.sk div{background:linear-gradient(90deg,#EEF1EE 25%,#E2E8E3 50%,#EEF1EE 75%);background-size:200% 100%;animation:shimmer 1.3s infinite}
.sk .s1{aspect-ratio:1}.sk .s2{height:13px;margin:12px 12px 8px;border-radius:6px}.sk .s3{height:13px;margin:0 40px 14px 12px;border-radius:6px}
.the-end{text-align:center;padding:44px 0 8px;color:var(--pine-soft)}
.the-end b{font-family:var(--fd);font-weight:400;font-size:1.2rem;display:block;margin-bottom:4px;color:var(--pine)}

/* ---------- trust ---------- */
.trust{max-width:1320px;margin:8px auto 0;padding:6px 18px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.t-item{background:#fff;border-radius:14px;padding:13px 15px;display:flex;gap:11px;align-items:center;box-shadow:var(--shadow);font-size:.78rem;font-weight:700;color:var(--pine-soft)}

/* ---------- drawers / modal / toast ---------- */
.overlay{position:fixed;inset:0;background:rgba(18,28,24,.48);z-index:80;opacity:0;pointer-events:none;transition:.25s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(430px,100vw);background:var(--mist);z-index:90;transform:translateX(102%);transition:transform .32s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column}
.drawer.show{transform:none}
.d-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.d-head h3{font-family:var(--fd);font-weight:400;font-size:1.3rem}
.d-body{flex:1;overflow-y:auto;padding:16px 20px}
.cart-item{display:flex;gap:12px;background:#fff;border-radius:14px;padding:10px;margin-bottom:10px;box-shadow:var(--shadow)}
.ci-thumb{width:66px;height:66px;border-radius:11px;flex:none;overflow:hidden;position:relative}
.ci-thumb svg,.ci-thumb img{width:100%;height:100%;object-fit:cover}
.ci-info{flex:1;min-width:0}
.ci-info b{font-size:.85rem;display:block;line-height:1.3}
.ci-info .price{font-size:.98rem}
.qty{display:flex;align-items:center;gap:11px;margin-top:6px;font-weight:700}
.qty button{width:25px;height:25px;border-radius:7px;background:var(--mist);font-weight:800}
.ci-x{color:var(--danger);font-size:.75rem;font-weight:800;align-self:flex-start}
.d-foot{padding:16px 20px;border-top:1px solid var(--line);background:#fff}
.ship-note{font-size:.76rem;color:var(--euca-deep);font-weight:700;margin-bottom:10px;text-align:center}
.total-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:.95rem}
.total-row b{font-family:var(--fd);font-size:1.3rem;font-weight:400}
.btn{display:block;width:100%;text-align:center;background:var(--pine);color:#fff;padding:14px;border-radius:999px;font-weight:800;font-size:.95rem;letter-spacing:.02em;transition:.2s}
.btn:hover{background:var(--euca-deep)}
.btn.ghost{background:transparent;color:var(--pine);border:1.5px solid var(--line);margin-top:8px}
.btn.ghost:hover{border-color:var(--euca)}
.empty{text-align:center;padding:60px 20px;color:var(--pine-soft)}
.empty .big{font-size:2.6rem;margin-bottom:10px}

.pmodal{position:fixed;inset:0;z-index:95;display:none;align-items:flex-end;justify-content:center}
.pmodal.show{display:flex}
@media(min-width:640px){.pmodal.show{align-items:center;padding:20px}}
.pm-card{background:var(--mist);width:min(780px,100vw);max-height:92dvh;overflow-y:auto;border-radius:24px 24px 0 0}
@media(min-width:640px){.pm-card{border-radius:24px}}
.pm-grid{display:grid;grid-template-columns:1fr}
.pm-grid>*{min-width:0}   /* a long row of photo thumbnails must scroll inside the page, never stretch it wider than a phone */
@media(max-width:639px){.pm-x{float:none;margin-bottom:-38px}}   /* phones: the close button sits on the photo, so the photo uses the full width */
@media(min-width:640px){.pm-grid{grid-template-columns:1fr 1.05fr}}
.pm-thumb{aspect-ratio:1;position:relative;overflow:hidden}
.pm-thumb svg,.pm-thumb img{width:100%;height:100%;object-fit:cover}
.pm-body{padding:24px 26px 28px}
.pm-body .cat-lab{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--euca-deep);font-weight:800;display:block;margin-bottom:7px}
.pm-body h3{font-family:var(--fd);font-weight:400;font-size:1.55rem;line-height:1.22}
.pm-meta{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:.8rem;color:var(--pine-soft)}
.pm-body .price{font-size:1.6rem;margin:12px 0 2px;display:block}
.pm-body p{font-size:.93rem;line-height:1.62;color:var(--pine-soft);margin:12px 0 20px}
.pm-x{position:sticky;top:0;margin-left:auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:1.05rem;z-index:2;float:right;transform:translate(-12px,12px)}
.rel{padding:6px 26px 28px}
.rel h4{font-family:var(--fd);font-weight:400;font-size:1.1rem;margin-bottom:12px}
.rel-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.rel-row::-webkit-scrollbar{display:none}
.rel-row .card{flex:0 0 138px}
.rel-row .c-name{font-size:.76rem;min-height:2.4em}
.rel-row .price{font-size:.95rem}
.rel-row .add{width:29px;height:29px;font-size:1rem}

.toast{position:fixed;bottom:78px;left:50%;transform:translate(-50%,80px);background:var(--pine);color:#fff;padding:12px 22px;border-radius:999px;font-size:.88rem;font-weight:700;z-index:120;transition:.3s;opacity:0;box-shadow:var(--shadow-lg)}
@media(min-width:700px){.toast{bottom:26px}}
.toast.show{transform:translate(-50%,0);opacity:1}
.wa-fab{position:fixed;right:16px;bottom:76px;width:54px;height:54px;border-radius:50%;background:#1FA855;display:grid;place-items:center;z-index:65;box-shadow:0 8px 26px rgba(0,0,0,.28);transition:transform .2s}
.wa-fab:hover{transform:scale(1.08)}
@media(min-width:700px){.wa-fab{bottom:24px;right:24px}}

/* ---------- mobile bottom nav ---------- */
.bnav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;z-index:70}
@media(min-width:700px){.bnav{display:none}}
.bnav button{flex:1;padding:9px 0 max(9px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.62rem;font-weight:800;color:#5F6E66;position:relative}
.bnav button.on{color:var(--pine)}
.bnav .badge{top:2px;right:calc(50% - 20px)}
@media(max-width:699px){body{padding-bottom:58px}}

/* ---------- admin ---------- */
.admin{max-width:1020px;margin:0 auto;padding:26px 18px 90px;display:none}
.admin.show{display:block}
.a-title{font-family:var(--fd);font-weight:400;font-size:1.75rem;margin-bottom:4px}
.a-sub{color:var(--pine-soft);font-size:.9rem;margin-bottom:22px}
.a-card{background:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.a-card h3{font-family:var(--fd);font-weight:400;font-size:1.2rem;margin-bottom:14px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.f-full{grid-column:1/-1}
label.fl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pine-soft);margin-bottom:5px}
.fi{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;font-size:.92rem;outline:none;background:var(--mist);transition:border-color .2s;color:var(--pine)}
.fi:focus{border-color:var(--euca)}
textarea.fi{resize:vertical;min-height:82px}
.a-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn.sm{width:auto;display:inline-block;padding:11px 22px;font-size:.85rem}
.a-list{display:flex;flex-direction:column;gap:8px}
.a-item{display:flex;align-items:center;gap:12px;background:var(--mist);border-radius:13px;padding:10px 12px}
.a-item .ci-thumb{width:46px;height:46px}
.a-item b{font-size:.87rem;display:block}
.a-item small{color:var(--pine-soft);font-size:.75rem}
.a-item .sp{flex:1}
.a-item button{font-size:.76rem;font-weight:800;padding:7px 12px;border-radius:9px}
.a-item .ed{background:#E7ECE8}
.a-item .de{background:#F6E4DE;color:var(--danger)}
.login-box{max-width:380px;margin:70px auto;background:#fff;padding:30px;border-radius:20px;box-shadow:var(--shadow-lg);text-align:center}
.login-box h2{font-family:var(--fd);font-weight:400;margin-bottom:16px}
.note{font-size:.78rem;color:var(--pine-soft);background:#EDF2EE;border-radius:11px;padding:10px 14px;margin-top:12px;line-height:1.55;text-align:left}
.faq details{background:#fff;border-radius:14px;padding:15px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{font-weight:700;cursor:pointer;font-size:.96rem;color:var(--pine)}
.faq details p{margin-top:10px;color:var(--pine-soft);line-height:1.7;font-size:.9rem;white-space:pre-line}

/* ---------- footer ---------- */
.newsletter{max-width:1320px;margin:30px auto 0;padding:0 18px}
.nl-in{background:linear-gradient(112deg,#4C6C77,#283B4A);border-radius:22px;padding:32px clamp(20px,4vw,44px);color:#EFF4F0;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.nl-in h3{font-family:var(--fd);font-weight:400;font-size:1.4rem}
.nl-in p{font-size:.85rem;opacity:.8;margin-top:4px}
.nl-form{display:flex;gap:8px;flex:1;min-width:270px;max-width:420px}
.nl-form input{flex:1;border:none;border-radius:999px;padding:13px 18px;font-size:.9rem;outline:none}
.nl-form button{background:var(--amber-glow);color:#2A2013;font-weight:800;border-radius:999px;padding:0 24px;font-size:.85rem}
footer{border-top:1px solid var(--line);background:#fff;margin-top:34px}
.f-in{max-width:1320px;margin:0 auto;padding:38px 18px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.f-in .logo{font-size:1.5rem}
.f-col{font-size:.85rem;color:var(--pine-soft);line-height:2.05}
.f-col b{color:var(--pine);display:block;margin-bottom:2px}
.f-col a{color:inherit;text-decoration:none}
.f-col a:hover{color:var(--euca-deep)}
.copyright{text-align:center;font-size:.75rem;color:#9BA8A0;padding:0 0 22px}

.logo{display:flex;align-items:center;gap:9px}
.logo .lgm{flex:0 0 auto;width:34px;height:auto;object-fit:contain}
.logo .lgw{display:inline-flex;flex-direction:column;line-height:1}
.logo .lgrow{display:inline-flex;align-items:center;gap:5px}
@media(max-width:520px){.logo .lgm{width:27px}}

@media(max-width:760px){
  .h-top{flex-wrap:wrap;row-gap:8px}
  .h-top .logo{order:1}
  .h-top .h-actions{order:2;margin-left:auto}
  .h-top .search{order:3;flex:0 0 100%;width:100%;padding:9px 15px}
  .icon-btn{width:38px;height:38px}
  .h-actions{gap:2px}
}
.icon-btn{border:none;background:transparent;cursor:pointer;color:inherit}
.search input{min-width:0}

.addbox.editing{background:linear-gradient(180deg,#EDF2F7,#E7EEF4);border-color:#B9CBD9;box-shadow:0 4px 22px rgba(30,42,54,.14)}
.addbox{background:linear-gradient(180deg,#FBF6EC,#F7F1E6);border:1.5px solid #E8D9BE;box-shadow:0 4px 20px rgba(201,138,61,.10)}
.addbox .step{background:#fff;border:1px solid #EFE6D6;border-radius:13px;padding:14px 15px;margin-bottom:12px}
.addbox .step-h{font-weight:800;font-size:.86rem;margin-bottom:10px;display:flex;align-items:center;gap:9px;color:var(--ink)}
.addbox .step-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--amber,#C98A3D);color:#fff;font-size:.75rem}
.mchip{display:inline-flex;align-items:center;gap:6px;background:#EDF2EE;color:#2F4A3E;border-radius:999px;padding:5px 11px;font-size:.78rem;font-weight:700}
.mchip button{border:none;background:none;cursor:pointer;color:#7b8790;font-size:.9rem;line-height:1}
.a-card{margin-bottom:26px}
.fresh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px;padding:0 18px;max-width:1320px;margin:0 auto}
@media(max-width:560px){.fresh-grid{grid-template-columns:repeat(2,1fr);gap:11px;padding:0 12px}}

#footSheet{display:none}#footSheet.open{display:block!important}.card img,.pm-thumb img,.flash-row img{filter:saturate(1.22) contrast(1.07) brightness(1.02)}
.card:hover img{filter:saturate(1.3) contrast(1.1) brightness(1.04)}
.napper{position:absolute;pointer-events:none;z-index:1;opacity:.5;transition:opacity .5s ease}
.napper svg{display:block;overflow:visible}
.napper .zzz{animation:zfloat 3.6s ease-in-out infinite}
.napper .body{animation:breathe 4.2s ease-in-out infinite;transform-origin:center bottom}
.napper .tail{transform-origin:left center}
.napper .eyeO{display:none}
.napper .heart{opacity:0}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.045)}}
@keyframes zfloat{0%{opacity:0;transform:translate(0,4px)}40%{opacity:.85}100%{opacity:0;transform:translate(7px,-16px)}}
@keyframes wagT{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(16deg)}}
@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(-16px) rotate(-6deg)}38%{transform:translateY(0) rotate(0)}56%{transform:translateY(-11px) rotate(5deg)}76%{transform:translateY(-2px) rotate(0)}}
@keyframes hfloat{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1.05)}}
.napper.awake{opacity:1;transform:scale(1.06)}
.napper.awake .zzz{display:none}
.napper.awake .eyeC{display:none}
.napper.awake .eyeO{display:block}
.napper.awake .body{animation:hop .85s cubic-bezier(.3,1.4,.5,1) 0s 3}
.napper.awake .tail{animation:wagT .28s ease-in-out 12}
.napper.awake .heart{animation:hfloat 1.9s ease-out forwards}
@media(max-width:700px){.napper{transform:scale(.72)!important}}

/* Retain the compact marketplace identity, with clearer controls and less scrolling. */
:root{--ink:var(--pine);--ink-soft:var(--pine-soft)}
[hidden]{display:none!important}html{scroll-padding-top:12px}body{overflow-x:clip}body.modal-open{overflow:hidden}
:focus-visible{outline:3px solid #8a5a1e;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.5}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}input,select,textarea{font-size:16px}
.skip-link{position:fixed;left:10px;top:-100px;z-index:500;background:#fff;padding:14px;border-radius:10px}.skip-link:focus{top:10px}
.hero{margin-top:15px}.hero-in{padding:27px 34px;border-radius:20px;min-height:235px}.hero h1{font-size:clamp(1.65rem,3.1vw,2.3rem);max-width:30ch}.hero p{font-size:.92rem;max-width:54ch}.hero-cta{margin-top:0;padding:12px 21px;animation:none}.hero-art{width:150px}.breathe-wrap{width:150px;height:150px}.breathe-core{width:86px;height:86px}.breathe-lbl{font-size:.6rem}.hero-txt>div{margin-top:16px!important}
#moodRow{margin-top:12px!important}#moodRow>div:first-child{margin-bottom:8px!important}.mood-row{justify-content:flex-start;gap:9px;padding:5px 2px 8px}.mood{min-width:112px;min-height:77px;padding:10px 12px;border-radius:14px;box-shadow:none;border:1px solid var(--line)}.mood-ic{width:25px!important;height:25px!important;margin-bottom:6px!important}.mood b{font-size:.75rem;line-height:1.25}.mood.on{background:#1e2a36!important;color:#fff!important;border-color:#1e2a36!important}.mood.on .mood-ic{color:#cbe4d5}.mood-more{min-width:100px}
.trust{margin-top:12px;gap:8px}.t-item{padding:11px;font-size:.75rem;box-shadow:none;border:1px solid var(--line)}.flash{margin-top:24px}.flash-head{justify-content:space-between}.flash-head .count{font-size:.74rem}.flash-row{gap:12px;scroll-snap-type:x proximity;min-height:0;padding:2px 2px 10px}.flash-row .card{flex:0 0 calc((100% - 60px)/6);min-width:160px;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.card{min-width:0;box-shadow:0 1px 4px #1e2a3609;border:1px solid #e6e9e8;transition:box-shadow .18s,transform .18s}.card:hover{box-shadow:0 5px 20px #1e2a3614}.card .thumb{aspect-ratio:1;background:#fff;position:relative}.card .thumb img{width:100%;height:100%;object-fit:contain;padding:6px;filter:none!important}.product-link{display:block;width:100%;height:100%}.card .c-name{min-height:2.7em;line-height:1.35;font-size:.87rem}.c-name a{color:inherit;text-decoration:none}.card .meta{font-size:.69rem;min-height:1.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#637169}.card .price{font-size:1.04rem;line-height:1.2}.price s{display:block;font-size:.73rem;margin:3px 0 0;font-weight:500}.card .heart{width:36px;height:36px;background:#ffffffed;color:#47574d;border:1px solid #e2e8e3}.card .heart.on{background:#edf2ee;color:#355c47}.card .add{width:36px;height:36px;flex-shrink:0}.card .pill{font-size:.66rem;padding:5px 7px}.card .c-body{padding:10px}.failed-image{opacity:.28;object-fit:contain!important;padding:32px!important}.image-unavailable{display:grid;place-items:center;min-height:170px;padding:25px;color:var(--pine-soft);font-size:.8rem}
.grid-head{align-items:center;margin-top:26px}.grid-head h2{font-size:1.3rem!important}.sort{min-height:42px}.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.budget-filter{display:flex;gap:7px;align-items:center;font-size:.79rem;color:var(--pine-soft)}.budget-filter select,.filter-chip{border:1px solid #cbd6ce;background:#fff;border-radius:999px;min-height:40px;padding:8px 13px;font-size:.8rem}.filter-chip.on{background:var(--pine);color:#fff;border-color:var(--pine)}.clear-filters{padding:10px 6px;text-decoration:underline;font-size:.8rem}.result-status{font-size:.78rem;color:var(--pine-soft);margin-bottom:13px;min-height:1.2em}.load-more{display:block;max-width:250px;margin:24px auto 0}.empty-state{grid-column:1/-1;padding:45px 15px}.empty-state p{margin:10px auto 20px}.the-end{padding:22px 10px}.bnav{padding-bottom:max(7px,env(safe-area-inset-bottom))}.bnav button{min-height:47px}.chips{touch-action:pan-x pan-y}.chip{min-height:39px}
.drawer{height:100dvh;padding-bottom:env(safe-area-inset-bottom)}.d-body{overscroll-behavior:contain}.d-foot{padding-bottom:max(20px,env(safe-area-inset-bottom))}.qty button{width:36px;height:36px}.ci-info small{display:block;margin-top:4px;font-size:.75rem;color:var(--pine-soft)}.ci-info .price{margin:8px 0}.ci-x{width:36px;height:36px}.pmodal{padding:24px;overscroll-behavior:contain;z-index:110}.overlay{z-index:100}.drawer{z-index:110}.pm-card{position:relative;width:min(980px,100%);max-width:980px;margin:auto;border-radius:20px;overflow:visible}.pm-x{position:sticky;display:block;top:8px;margin:8px 8px -42px auto;z-index:5;background:#fff;border:1px solid var(--line);width:38px;height:38px;box-shadow:var(--shadow)}.pm-grid{gap:4px;padding:28px 20px 10px}.pm-body{min-width:0;padding:18px}.pm-body h2{font-family:var(--fd);font-size:1.65rem;font-weight:400;line-height:1.25;margin:9px 0 14px}.gallery{padding:14px;min-width:0}.pm-thumb{aspect-ratio:1;height:auto;position:relative;overflow:hidden;background:#f8f9f8;border-radius:14px}.gallery-image{width:100%;height:100%;display:block;cursor:zoom-in}.pm-thumb img,.pm-thumb video{width:100%;height:100%;object-fit:contain;filter:none!important}.gallery-arrow{position:absolute;top:45%;width:36px;height:44px;font-size:1.8rem;border:1px solid var(--line);background:#fff;border-radius:11px;z-index:2}.gallery-arrow.prev{left:7px}.gallery-arrow.next{right:7px}.gallery-help{display:flex;justify-content:space-between;font-size:.73rem;color:var(--pine-soft);padding:9px 0}.gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding:3px;scrollbar-width:thin}.pm-gal-t{flex:0 0 60px;width:60px;height:60px;border:2px solid transparent;background:#f2f4f2;border-radius:9px;overflow:hidden}.pm-gal-t.on{border-color:#4C6E61}.pm-gal-t img{width:100%;height:100%;object-fit:contain}.gallery #galleryStatus{font-size:.75rem;line-height:1.5;min-height:1.5em;margin-top:6px}.gallery #galleryStatus button{text-decoration:underline}.pm-price{display:flex;align-items:center;gap:12px}.pm-price .price{font-size:1.7rem}.availability,.delivery-note{font-size:.8rem!important;color:var(--pine-soft);line-height:1.5}.delivery-note a{color:inherit}.product-description{max-height:240px;overflow-y:auto;margin:14px 0}.product-description p{font-size:.9rem;line-height:1.6;margin-bottom:9px}.fi{border:1.5px solid #b6c7bb;min-height:46px;border-radius:10px;margin-bottom:12px}.fl{margin-top:10px}.product-actions{padding-top:13px}.product-actions .btn{margin-bottom:8px}#productError,.error{color:#9b3926;font-size:.85rem}#pmPhotoPrev img{max-height:90px;border-radius:10px}.rel h3{font-size:1rem;margin-bottom:12px}.rel-row .card{min-width:155px}.image-zoom{position:fixed;inset:0;background:#fffffffa;z-index:150;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain}.image-zoom img{width:auto;height:auto;max-width:100%;max-height:100dvh;object-fit:contain;touch-action:pinch-zoom}.zoom-close{position:fixed;right:18px;top:18px;background:var(--pine);color:#fff;border-radius:50%;width:44px;height:44px;z-index:151}
.finder{padding:40px;max-width:850px;margin:0 auto}.finder h2,.checkout-body h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);margin:15px 0 10px;line-height:1.25}.finder>p,.checkout-body>p{color:var(--pine-soft);font-size:.91rem;line-height:1.6}.finder-progress{display:flex;gap:5px;margin:18px 0}.finder-progress span{height:4px;background:#e5eae6;border-radius:5px;flex:1}.finder-progress .done{background:#4C6E61}.finder-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0}.finder-options button{display:flex;align-items:center;justify-content:space-between;text-align:left;border:1px solid #cdd8cf;border-radius:13px;min-height:65px;padding:15px 18px;background:#f8faf8;font-size:.94rem;font-weight:600}.finder-options button:hover,.finder-options button:focus-visible{background:#eaf1e9;border-color:#4C6E61}.finder-options button span{color:#4C6E61;font-size:1.3rem}.finder-nav{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:18px;font-size:.8rem;color:var(--pine-soft)}.finder-nav button{text-decoration:underline;text-underline-offset:3px;min-height:40px}.finder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.match-reason{font-size:.71rem;color:#4C6E61;margin-top:7px;line-height:1.4}.finder-explanation{background:#edf2ee;padding:10px 14px;border-radius:10px;margin-top:14px}.checkout-body{padding:35px;max-width:620px;margin:auto}.order-lines{margin:24px 0;border-top:1px solid var(--line)}.order-lines>div{display:flex;gap:18px;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:.88rem}.order-lines b{white-space:nowrap}.order-lines small{display:block;color:var(--pine-soft);margin-top:5px}.grand-total{border-top:1px solid var(--line);padding-top:15px}.whatsapp-checkout{background:#236b48;margin-top:16px;text-decoration:none}#checkoutStatus{font-size:.8rem;line-height:1.5;margin-top:10px;color:#355b43}.analytics-choice{position:fixed;bottom:15px;left:15px;max-width:340px;background:#fff;border:1px solid #cdd8cf;border-radius:14px;padding:16px;box-shadow:var(--shadow-lg);z-index:90;display:flex;flex-wrap:wrap;gap:10px}.analytics-choice p{font-size:.82rem;line-height:1.5}.analytics-choice button{padding:9px 15px;background:#edf2ee;border-radius:7px;font-size:.8rem}.analytics-choice button:last-child{background:#1e2a36;color:#fff}.nl-form{min-width:0}.nl-form input{min-width:0}.newsletter input{font-size:16px}.copyright{color:#65776c}#staticContent{max-width:1284px;margin:24px auto;padding:20px}#staticContent h1{font-family:var(--fd);font-weight:400;font-size:2rem}#staticContent img{max-height:480px;object-fit:contain}#staticContent p{line-height:1.65;margin:15px 0}.static-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}.static-products a{color:inherit}.static-products img{aspect-ratio:1;width:100%}#footSheet{z-index:115!important}
@media(max-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.flash-row .card{flex-basis:180px}.trust .t-item:nth-child(2){display:none}.pm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){html{scroll-padding-top:12px}.h-top{padding:10px 12px}.h-actions .icon-btn{width:36px;height:38px}.logo small{font-size:.49rem}.chips{padding-left:12px;padding-right:12px}.promo{font-size:.65rem;padding:6px 0}.hero-in{padding:23px 20px;min-height:0}.hero p{font-size:.88rem}.hero-cta{font-size:.82rem;padding:12px 15px}.hero-txt>div{gap:8px!important}.hero{padding:0 12px}.hero-art{display:none}.mood{min-width:94px;min-height:78px;padding:9px 8px}.mood b{font-size:.68rem}.trust{padding:0 12px;display:grid;grid-template-columns:1fr 1fr}.trust .t-item:nth-child(3){display:none}.t-item{font-size:.68rem;padding:10px 6px}.t-item i{font-size:1rem}.flash{padding:0 12px;margin-top:21px}.flash-head h2{font-size:1.2rem}.flash-head p{font-size:.79rem!important}.flash-head .count{display:none}.flash-row .card{flex-basis:43vw;min-width:145px;max-width:190px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}main{padding:8px 12px 35px}.grid-head{gap:8px}.grid-head h2{font-size:1.2rem!important;flex:1;min-width:160px}.sort{font-size:.74rem;padding:8px}.filter-bar{gap:6px}.filter-chip,.budget-filter select{padding:8px 10px;font-size:.75rem}.budget-filter{font-size:.73rem}.card .c-name{font-size:.83rem}.card .meta{font-size:.65rem}.card .add{width:38px;height:38px}.card .heart{width:36px;height:36px}.pmodal{padding:0}.pm-card{border-radius:0;min-height:100dvh;margin:0;width:100%}.pm-grid{grid-template-columns:1fr;padding:25px 10px 0}.gallery{padding:8px}.pm-thumb{max-height:60dvh;aspect-ratio:1}.pm-body{padding:15px 9px}.pm-body h2{font-size:1.45rem}.pm-x{top:10px;margin-right:12px}.product-actions{position:sticky;bottom:0;background:#fff;padding:12px 0 max(4px,env(safe-area-inset-bottom));z-index:4}.product-description{max-height:none}.rel{padding:12px 18px 24px}.finder{padding:35px 19px 25px}.finder-options{gap:8px}.finder-options button{padding:13px 11px;min-height:66px;font-size:.87rem}.finder-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.finder-nav{font-size:.77rem}.checkout-body{padding:35px 20px max(24px,env(safe-area-inset-bottom))}.drawer{max-width:100vw;width:100vw}.analytics-choice{bottom:80px;left:12px;right:12px;max-width:unset}.newsletter{padding:0 12px}.nl-in{padding:24px 18px}.nl-form{flex-basis:100%;max-width:none}.nl-form input{padding:12px;min-width:0;width:100%}.nl-form button{padding:0 16px}.wa-fab{bottom:85px!important;width:46px;height:46px}.f-in{padding-bottom:80px}#moodRow{padding:0 12px!important}.bnav{z-index:70}.image-zoom img{max-height:90dvh}}
@media(max-width:360px){.logo{font-size:1.5rem}.logo .lgm{width:24px}.logo small{font-size:.42rem}.h-actions{gap:0}.h-actions .icon-btn{width:32px}.finder-options{grid-template-columns:1fr}.hero-cta{width:100%}.budget-filter>select{max-width:125px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.lbl-out{display:none}.lbl-in{opacity:1}.bd{animation:none!important}}
/* Dialog content must remain scrollable when a result list is taller than the viewport. */
.pmodal.show{align-items:center}.pm-card{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-width:700px){.pmodal.show{align-items:stretch;padding:0}.pm-card{max-height:100dvh;min-height:100dvh;border-radius:0;scrollbar-gutter:auto}}
/* Let shoppers reach products sooner on phones. */
@media(max-width:700px){
 .mood{flex-direction:row;gap:7px;width:auto;height:auto;min-width:0;min-height:44px;padding:8px 12px;border-radius:999px;white-space:nowrap}
 .mood-ic{width:22px!important;height:22px!important;margin:0!important;flex-shrink:0}.mood b{font-size:.7rem}
 .hero-in{padding:19px 20px}.hero h1{font-size:1.7rem}.hero p{font-size:.82rem;line-height:1.45;margin-top:8px}.hero-txt>div{margin-top:12px!important}
 .h-top{column-gap:7px}.h-actions{flex-shrink:0}.logo small{letter-spacing:.25em}
}
@media(max-width:360px){.h-top .logo{font-size:1.35rem;gap:5px}.h-top .logo .lgm{width:22px}.logo small{font-size:.37rem;letter-spacing:.16em}.h-actions .icon-btn{width:30px}.hero-cta{font-size:.77rem;padding:10px 12px;width:auto}.hero h1{font-size:1.5rem}}

@media(max-width:700px){.hero h1{font-size:1.45rem;max-width:none}.hero-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
@media(max-width:360px){.hero-txt>div{gap:6px!important}.hero-cta{font-size:.66rem;padding:9px 10px}}

/* Design fixes, 26 Oct 2026 */
/* section labels: one style, left-aligned */
.section-label{max-width:1320px;margin:0 auto;padding:0 18px 6px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pine-soft);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#moodRow .section-label{padding:0}
/* moments fill the row on wider screens */
@media(min-width:701px){.mood{flex:1 1 112px;max-width:220px}}
/* trust row: line icons in the brand colour */
.t-item svg{flex:none;color:var(--euca-deep)}
/* links styled as buttons never underline */
a.btn{text-decoration:none}a.btn.ghost{color:var(--pine)}
/* promo ticker: pauses on hover or tap, stops after a few loops */
.promo div{animation-iteration-count:4}.promo:hover div,.promo.paused div{animation-play-state:paused}
/* product popup: the close button floats over the content instead of taking a 50px column from it */
.pm-x{float:none}
/* product popup: one row of actions */
.product-actions{display:flex;align-items:center;gap:8px}
.product-actions .btn{flex:1;min-width:0;margin:0;min-height:50px;padding:12px 16px}
.pm-icon{flex:none;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--pine);display:grid;place-items:center;transition:border-color .2s,background .2s,color .2s}
.pm-icon:hover{border-color:var(--euca)}
.availability.in-stock{color:#2E6B47;font-weight:700}
.availability.in-stock::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2F8A57;margin-right:8px;vertical-align:1px}
/* checkout */
.jo-gift-banner{background:#FBF3E2;border:1px solid #E8D9BE;border-radius:12px;padding:11px 14px;margin:12px 0;font-size:.85rem;line-height:1.55;color:#7A5A26}
.whatsapp-checkout:hover{background:#1C5A3C}
/* 404 */
.notfound{max-width:560px;margin:40px auto 56px;text-align:center}
.notfound h1{font-family:var(--fd);font-weight:400;font-size:clamp(1.75rem,4.4vw,2.4rem);line-height:1.2;margin:8px 0 12px;color:var(--pine)}
.notfound p{color:var(--pine-soft);font-size:.95rem;line-height:1.6;max-width:44ch;margin:0 auto}
.notfound-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.notfound-actions .btn{width:auto;min-width:180px;margin:0;padding:13px 26px}
/* menu sheet */
.sheet{position:fixed;inset:0;background:rgba(30,42,54,.45)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:min(560px,100%);background:#fff;border-radius:22px 22px 0 0;padding:12px 22px max(24px,env(safe-area-inset-bottom));max-height:80vh;overflow:auto;box-shadow:0 -10px 40px rgba(30,42,54,.18)}
.sheet-panel::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#D5DDD8;margin:0 auto 12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.sheet-head b{font-family:var(--fd);font-weight:400;font-size:1.25rem;color:var(--pine)}
.sheet-x{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1rem;background:var(--mist)}
.sheet-links{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.sheet-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;border-bottom:1px solid var(--line);color:var(--pine);text-decoration:none;font-weight:600;font-size:.92rem}
.sheet-links a::after{content:"›";color:var(--pine-soft);font-size:1.15rem;line-height:1}
.sheet-links a:hover{color:var(--euca-deep)}
.sheet-note{margin-top:16px;font-size:.8rem;line-height:1.5;color:var(--euca-deep);background:#EDF2EE;border-radius:12px;padding:10px 12px}
.sheet-note:empty{display:none}
/* bottom bar: active item marker, WhatsApp item */
.bnav button.on::before{content:"";position:absolute;top:0;left:50%;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--pine);transform:translateX(-50%)}
.bnav a{flex:1;padding:9px 0 max(9px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.62rem;font-weight:800;color:#5F6E66;position:relative;text-decoration:none;min-height:47px}
.bnav .bn-wa svg{color:#1A8F48}
@media(max-width:699px){.wa-fab{display:none!important}}
/* phones: products start sooner */
@media(max-width:700px){
  .chips-label{display:none}
  .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:12px}
  .t-item{background:none;border:0;box-shadow:none;padding:2px 0;font-size:.72rem;gap:6px}
  .t-item svg{width:16px;height:16px}
  .product-actions .btn{font-size:.9rem;letter-spacing:0;padding:12px}
  .pm-icon{width:48px;height:48px}
  .product-actions{margin:0 -19px;padding:10px 19px max(10px,env(safe-area-inset-bottom));background:rgba(242,244,245,.97);border-top:1px solid var(--line);box-shadow:0 -8px 20px rgba(30,42,54,.06)}
  .sheet-links{column-gap:16px}
}

/* Polish and motion, 27 Oct 2026 (Impeccable polish pass + transitions.dev) */
:root{
  /* transitions.dev motion tokens */
  --duration-quick:150ms;--duration-fast:250ms;--duration-medium:350ms;--duration-slow:400ms;--duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(0.22, 1, 0.36, 1);--ease-in-out:ease-in-out;
  /* Modal open / close */
  --modal-open-dur:250ms;--modal-close-dur:150ms;--modal-scale:0.96;--modal-scale-close:0.96;--modal-ease:cubic-bezier(0.22, 1, 0.36, 1);
  /* Toast open / close */
  --toast-open:350ms;--toast-close:250ms;--toast-distance:16px;--toast-blur:2px;--toast-scale:0.97;--toast-ease:cubic-bezier(0.22, 1, 0.36, 1);
  /* Like button, in the brand green */
  --like-color:var(--euca-deep);--like-fill:150ms;--like-pop:350ms;--like-pop-ease:cubic-bezier(0.22, 1, 0.36, 1);--like-particle-dur:600ms;--like-particle-dist:20px;--like-particle-size:2.5px;--like-ease:cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur:250ms;--icon-swap-blur:2px;--icon-swap-start-scale:0.25;--icon-swap-ease:ease-in-out;
}

/* transitions.dev: Modal open / close */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

/* transitions.dev: Toast open / close */
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-toast { transition: none !important; }
}

/* transitions.dev: Like button */
.t-like-heart { color: currentColor; transition: color var(--like-fill) var(--like-ease); }
.t-like-heart path {
  fill: transparent; stroke: currentColor;
  transition: fill var(--like-fill) var(--like-ease), stroke var(--like-fill) var(--like-ease);
}
.t-like[data-liked="true"] .t-like-heart { color: var(--like-color); }
.t-like[data-liked="true"] .t-like-heart path { fill: currentColor; }
/* Pop scale lives on an HTML wrapper, never the <svg> itself:
   transforming an inline SVG makes Chromium rasterise it at 1×
   (pixelated on hi-DPI). Wrapping keeps the vector crisp. */
.t-like[data-liked="true"] .t-like-icon { animation: t-like-pop var(--like-pop) var(--like-pop-ease); }
@keyframes t-like-pop { 0% { transform: scale(1); } 30% { transform: scale(0.82); } 100% { transform: scale(1); } }

/* Particle burst — 8 dots flung along per-particle vectors. */
.t-like-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; color: var(--like-color); }
.t-like-particles i {
  position: absolute;
  left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  width: calc(var(--like-particle-size) * var(--psize, 1));
  height: calc(var(--like-particle-size) * var(--psize, 1));
  border-radius: 50%; background: currentColor; opacity: 0;
}
@keyframes t-like-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)); }
}
.t-like.is-bursting .t-like-particles i {
  animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .t-like-icon, .t-like-particles i { animation: none !important; }
}

/* transitions.dev: Icon swap */
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  /* No will-change: it would freeze each icon's raster at its 0.25 start
     scale, so a large icon scales up blurry and pixelated. */
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

/* Wiring the transitions into the shop */
.pmodal.is-closing{pointer-events:none}
.drawer{transition:transform var(--duration-medium) var(--ease-smooth-out)}
.drawer.show{transition-duration:var(--duration-slow)}
.drawer.is-closing{pointer-events:none}
.overlay{transition:opacity var(--duration-fast) var(--ease-smooth-out)}
#footSheet.sheet{opacity:0;transition:opacity var(--duration-medium) var(--ease-smooth-out)}
#footSheet.sheet.open{opacity:1;transition-duration:var(--duration-slow)}
#footSheet.is-closing{display:block!important;pointer-events:none}
.sheet-panel{transform:translateY(100%);transition:transform var(--duration-medium) var(--ease-smooth-out)}
#footSheet.open .sheet-panel{transform:none;transition-duration:var(--duration-slow)}
.toast{left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.t-like{position:relative}
.t-like.is-static .t-like-icon{animation:none}
.t-like-icon{display:grid;place-items:center}
.card .heart[data-liked="true"],#pmSave[data-liked="true"]{background:#EDF2EE;border-color:#CFE0D5}
.t-like-particles i:nth-child(1){--px:0px;--py:calc(var(--like-particle-dist) * -1)}
.t-like-particles i:nth-child(2){--px:calc(var(--like-particle-dist) * .71);--py:calc(var(--like-particle-dist) * -.71)}
.t-like-particles i:nth-child(3){--px:var(--like-particle-dist);--py:0px}
.t-like-particles i:nth-child(4){--px:calc(var(--like-particle-dist) * .71);--py:calc(var(--like-particle-dist) * .71)}
.t-like-particles i:nth-child(5){--px:0px;--py:var(--like-particle-dist)}
.t-like-particles i:nth-child(6){--px:calc(var(--like-particle-dist) * -.71);--py:calc(var(--like-particle-dist) * .71)}
.t-like-particles i:nth-child(7){--px:calc(var(--like-particle-dist) * -1);--py:0px}
.t-like-particles i:nth-child(8){--px:calc(var(--like-particle-dist) * -.71);--py:calc(var(--like-particle-dist) * -.71)}
.t-like-particles i:nth-child(even){--psize:.8;--pdelay:30ms}
.add .t-icon{display:grid;place-items:center}
.badge.bump{animation:bump var(--duration-very-slow) var(--ease-smooth-out)}
.btn:active,.pm-icon:active{transform:scale(.98)}

/* drawn icons in buttons */
.pm-x,.zoom-close,.ci-x,.qty button,.gallery-arrow,.pm-gal-t,.sheet-x{display:grid;place-items:center}
.gallery-arrow{color:var(--pine)}
.empty .big{display:flex;justify-content:center;color:var(--pine-soft);margin-bottom:12px}
.note-ic{display:inline-flex;vertical-align:-3px;margin-right:6px}
.btn.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto}
.wa-btn{background:#236b48}.wa-btn:hover{background:#1C5A3C}

/* browser surfaces themed from the palette */
::selection{background:rgba(127,160,143,.32);color:var(--pine)}
input,textarea{caret-color:var(--euca-deep)}
:focus-visible{outline:2px solid #8a5a1e;outline-offset:2px}
.hero :focus-visible,.nl-in :focus-visible{outline-color:#EFF4F0}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
.pm-card,.d-body,.gallery-thumbs,.product-description,.sheet-panel{scrollbar-width:thin;scrollbar-color:#C9D3CC transparent}
.order-lines b,.qty span,.badge,#galleryCount,.result-status{font-variant-numeric:tabular-nums}

/* type: balanced headings, no lonely last words */
h1,h2{text-wrap:balance}
p{text-wrap:pretty}

/* trust line: a quiet row on every screen size */
@media(min-width:701px){.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 40px;margin-top:16px}.t-item{background:none;border:0;box-shadow:none;padding:4px 0}}

/* Second polish look: contrast, minimum text sizes, one breathing moment */
.badge{color:#2A2013}
.hero p,.nl-in p{opacity:1;color:#E6EDEA}
.section-label{font-size:.72rem}
.bnav button,.bnav a{font-size:.7rem}
@media(max-width:700px){.t-item{font-size:.76rem}}
@media(max-width:360px){.hero-cta{font-size:.8rem;padding:11px 14px}}
/* the brand dot breathes only in the hero on phones, where the desktop breathing circle is hidden */
@keyframes bdBreathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.5);opacity:.5}}
.bd{animation:none}
@media(max-width:760px){.hero .bd{animation:bdBreathe 4.2s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.hero .bd{animation:none!important}}
/* finder on phones: the step bar shares the top row with the close button */
@media(max-width:700px){.finder{padding-top:20px}.finder-progress{margin:20px 60px 18px 0}}
/* FAQ: a drawn chevron instead of the browser's triangle */
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--pine-soft);border-bottom:2px solid var(--pine-soft);transform:translateY(-2px) rotate(45deg);transition:transform var(--duration-fast) var(--ease-smooth-out)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}

/* 7 Nov 2026: a banner message that names a product opens it */
.promo a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.promo a:hover{color:#fff}