:root{--green-900:#1c4218;--green-800:#24521f;--green-700:#2f6b2a;--green-600:#3c7d32;--green-500:#5b9a3e;--green-300:#a8ce8e;--green-100:#e7f2de;--green-50:#f3f8ee;--gold-800:#8a5c06;--gold-700:#a8700a;--gold-600:#d08e00;--gold-500:#eea60f;--gold-300:#f7cf6b;--gold-100:#fdf0d2;--gold-50:#fff8e8;--cream:#fffaf0;--cream-2:#faf3e2;--paper:#ffffff;--ink:#1f2b1c;--ink-2:#3f4c3a;--muted:#69735f;--line:#ece3cd;--line-2:#e0d5ba;--danger:#b3261e;--danger-bg:#fdecea;--wa:#25d366;--wa-dark:#128c4b;--radius:18px;--radius-sm:12px;--radius-xs:8px;--shadow-sm:0 1px 2px rgba(31,43,28,.06),0 2px 8px rgba(47,107,42,.05);--shadow:0 10px 30px -10px rgba(47,107,42,.22);--shadow-lg:0 24px 60px -20px rgba(31,66,24,.35);--font-body:'Poppins','Hind Siliguri',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--font-display:var(--font-body);--font-num:var(--font-body);--font-brand:'Anek Bangla','Playfair Display','Hind Siliguri',serif;--header-h:72px;--ease:cubic-bezier(.2,.7,.2,1)}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font-family:var(--font-body);font-size:16.5px;line-height:1.7;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;padding-bottom:68px}@media (min-width:900px){body{padding-bottom:0}}img{max-width:100%;height:auto;display:block}a{color:var(--green-700);text-decoration:none}a:hover{color:var(--green-800)}h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;margin:0 0 .5em;color:var(--ink);font-weight:700}h1{font-size:clamp(1.7rem,4.2vw,2.6rem)}h2{font-size:clamp(1.4rem,3vw,2rem)}h3{font-size:1.15rem}p{margin:0 0 1em}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;border-radius:6px}.icon{width:1.25em;height:1.25em;flex-shrink:0;vertical-align:-0.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.skip-link{position:absolute;left:-999px;top:8px;z-index:999;background:var(--green-700);color:#fff;padding:8px 14px;border-radius:8px}.skip-link:focus{left:8px;color:#fff}.muted{color:var(--muted)}.center{text-align:center}.mt-xl{margin-top:56px}.hp{position:absolute;left:-9999px;height:0;overflow:hidden}.container{width:100%;max-width:1240px;margin:0 auto;padding:0 16px}.container.narrow{max-width:760px}@media (min-width:768px){.container{padding:0 24px}}.hide-sm{display:none !important}.show-sm{display:inline-flex}.show-md{display:flex}@media (min-width:768px){.hide-sm{display:inline-flex !important}.show-sm{display:none !important}}@media (min-width:1024px){.show-md{display:none !important}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:10px 20px;border-radius:999px;border:2px solid transparent;font-weight:600;font-size:1rem;line-height:1.2;text-align:center;transition:transform .15s var(--ease),background .2s,box-shadow .2s,color .2s;white-space:nowrap}.btn:active{transform:translateY(1px) scale(.99)}.btn-primary{background:var(--green-700);color:#fff;box-shadow:0 6px 18px -6px rgba(47,107,42,.55)}.btn-primary:hover{background:var(--green-800);color:#fff;box-shadow:0 10px 24px -8px rgba(47,107,42,.6)}.btn-gold{background:var(--gold-500);color:var(--ink);box-shadow:0 6px 18px -6px rgba(208,142,0,.6)}.btn-gold:hover{background:var(--gold-300);color:var(--ink)}.btn-soft{background:var(--green-100);color:var(--green-800)}.btn-soft:hover{background:var(--green-700);color:#fff}.btn-outline{border-color:var(--green-700);color:var(--green-700);background:transparent}.btn-outline:hover{background:var(--green-700);color:#fff}.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}.btn-ghost:hover{background:var(--cream-2);color:var(--ink)}.btn-light{background:#fff;color:var(--green-800)}.btn-light:hover{background:var(--gold-100);color:var(--green-900)}.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{background:var(--wa-dark);color:#fff}.btn-sm{min-height:38px;padding:6px 14px;font-size:.92rem}.btn-lg{min-height:54px;padding:12px 26px;font-size:1.06rem}.btn-block{display:flex;width:100%}.btn[disabled],.btn.loading{opacity:.65;pointer-events:none}.grow{flex:1}.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--ink)}.icon-btn:hover{background:var(--green-50)}.icon-btn .icon{width:24px;height:24px}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1.5}.badge .icon{width:14px;height:14px}.badge-sale{background:#c0392b;color:#fff}.badge-gold{background:var(--gold-500);color:var(--ink)}.badge-digital{background:var(--green-700);color:#fff}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .2s}.site-header.scrolled{box-shadow:0 6px 20px -12px rgba(31,66,24,.3)}.header-inner{display:flex;align-items:center;gap:10px;min-height:var(--header-h)}.menu-btn{margin-left:-8px}@media (min-width:1024px){.menu-btn{display:none}}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);flex-shrink:0}.brand img{width:50px;height:50px;object-fit:contain}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-name{font-family:var(--font-brand);font-weight:700;font-size:1.45rem;letter-spacing:-.01em;white-space:nowrap}.brand-sub{font-size:.74rem;color:var(--muted);display:none;margin-top:2px}@media (min-width:560px){.brand-sub{display:block}}.gold{color:var(--gold-600)}.green{color:var(--green-700)}.search-form{position:relative;display:none;flex:1;max-width:560px;margin:0 auto}.search-form input{width:100%;height:48px;padding:0 56px 0 20px;border-radius:999px;border:2px solid var(--line);background:var(--cream);transition:border-color .2s,background .2s}.search-form input:focus{outline:none;border-color:var(--green-500);background:#fff}.search-form button{position:absolute;right:5px;top:5px;width:38px;height:38px;border-radius:50%;border:0;background:var(--green-700);color:#fff;display:grid;place-items:center}.search-form button .icon{width:18px;height:18px}@media (min-width:768px){.search-form{display:block}}.search-open .search-form{display:block;position:absolute;left:12px;right:12px;top:calc(100% + 8px);max-width:none;z-index:5}.search-open .search-form input{box-shadow:var(--shadow);background:#fff}.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);overflow:hidden;z-index:10}.search-suggest a{display:flex;align-items:center;gap:12px;padding:8px 12px;color:var(--ink)}.search-suggest a:hover,.search-suggest a.focus{background:var(--green-50)}.search-suggest img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--cream)}.search-suggest .ss-name{flex:1;font-weight:500;line-height:1.3}.search-suggest .ss-price{font-weight:700;color:var(--green-700)}.search-suggest .ss-all{justify-content:center;color:var(--green-700);font-weight:600;border-top:1px solid var(--line)}.search-suggest .ss-empty{padding:14px;color:var(--muted);text-align:center}.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}@media (min-width:768px){.header-actions{margin-left:0}}.header-call{align-items:center;gap:10px;color:var(--ink);padding:6px 12px 6px 6px;border-radius:999px}.header-call:hover{background:var(--green-50);color:var(--ink)}.header-call small{display:block;font-size:.72rem;color:var(--muted);line-height:1.1}.header-call strong{font-size:.98rem;line-height:1.2}.hc-icon{width:40px;height:40px;border-radius:50%;background:var(--gold-100);color:var(--gold-700);display:grid;place-items:center}.cart-btn{position:relative;width:48px;height:48px;border-radius:50%;border:0;background:var(--green-700);color:#fff;display:grid;place-items:center;transition:transform .2s}.cart-btn:hover{background:var(--green-800)}.cart-btn .icon{width:22px;height:22px}.cart-btn.bump{animation:bump .45s var(--ease)}@keyframes bump{30%{transform:scale(1.18)}60%{transform:scale(.94)}}.cart-count{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gold-500);color:var(--ink);font-size:.78rem;font-weight:700;display:grid;place-items:center;border:2px solid #fff}.cart-count[hidden]{display:none}.main-nav{border-top:1px solid var(--line);display:none}@media (min-width:1024px){.main-nav{display:block}}.nav-inner{display:flex;gap:4px;flex-wrap:wrap;align-items:stretch}.nav-inner::-webkit-scrollbar{display:none}.nav-inner a{padding:11px 14px;color:var(--ink-2);font-weight:500;white-space:nowrap;position:relative}.nav-inner a::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--gold-500);transform:scaleX(0);transition:transform .25s var(--ease)}.nav-inner a:hover,.nav-inner a.active{color:var(--green-700)}.nav-inner a:hover::after,.nav-inner a.active::after{transform:scaleX(1)}.drawer{position:fixed;inset:0;z-index:100;visibility:hidden}.drawer::before{content:'';position:absolute;inset:0;background:rgba(20,35,18,.45);opacity:0;transition:opacity .3s}.drawer.open{visibility:visible}.drawer.open::before{opacity:1}.drawer-panel{position:absolute;top:0;bottom:0;width:min(400px,88vw);background:#fff;display:flex;flex-direction:column;transition:transform .35s var(--ease);box-shadow:var(--shadow-lg)}.drawer-left .drawer-panel{left:0;transform:translateX(-100%)}.drawer-right .drawer-panel{right:0;transform:translateX(100%)}.drawer.open .drawer-panel{transform:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.drawer-head strong{display:inline-flex;align-items:center;gap:8px;font-size:1.1rem;font-family:var(--font-display)}.drawer-body{flex:1;overflow-y:auto;padding:8px 16px}.drawer-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:8px;background:var(--cream)}.drawer-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem}.drawer-total strong{font-size:1.3rem;color:var(--green-700)}.drawer-nav{flex:1;overflow-y:auto;padding:8px}.drawer-nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:var(--ink);font-weight:500}.drawer-nav a:hover{background:var(--green-50)}.drawer-nav a .icon{color:var(--green-600)}.drawer-label{padding:14px 12px 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.free-ship{padding:10px 16px;font-size:.9rem;background:var(--gold-50);border-bottom:1px solid var(--line)}.free-ship:empty{display:none}.free-ship.static{border:1px dashed var(--gold-300);border-radius:12px;margin:10px 0}.free-ship .bar{height:6px;background:var(--gold-100);border-radius:6px;margin-top:6px;overflow:hidden}.free-ship .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-500),var(--green-500));border-radius:6px;transition:width .4s var(--ease)}.ci{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}.ci img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--cream)}.ci-name{font-weight:600;line-height:1.3;color:var(--ink);display:block}.ci-meta{font-size:.85rem;color:var(--muted)}.ci-right{text-align:right;display:grid;gap:4px;justify-items:end}.ci-right strong{color:var(--green-700)}.ci-remove{border:0;background:none;color:var(--muted);font-size:.8rem;padding:0;text-decoration:underline}.ci-remove:hover{color:var(--danger)}.cart-empty{text-align:center;padding:48px 16px;color:var(--muted)}.cart-empty .icon{width:56px;height:56px;color:var(--green-300);margin:0 auto 12px;display:block}.hero{padding:16px 0 8px}@media (min-width:768px){.hero{padding:24px 0 8px}}.hero-slider{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--cream-2);aspect-ratio:2056 / 765}.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}.hero-slider .slide.active{opacity:1;z-index:1}.hero-slider picture,.hero-slider img{display:block;width:100%;height:100%}.hero-slider .slide::before{content:'';position:absolute;inset:-20px;background:var(--bg) center / cover no-repeat;filter:blur(22px) saturate(1.1);opacity:.55}/* soft fill when a banner is not the slider's shape */
.hero-slider picture { position: relative; }
@media (max-width: 640px) { .hero-slider .slide.has-m::before { display: none; } }   /* phones load the phone banner only */
.hero-slider img { object-fit: contain; }   /* the whole banner, never cut */
@media (max-width: 640px) { .hero-slider.has-mobile { aspect-ratio: 1 / 1; } }
.slider-dots { position: absolute; z-index: 2; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.slider-dots button { width: 9px; height: 9px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .7); padding: 0; transition: width .3s; }
.slider-dots button.active { width: 26px; background: var(--gold-500); }
.hero-card { position: relative; z-index: 2; margin: 14px 0 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 18px; display: grid; gap: 20px; border: 1px solid var(--line); }
@media (min-width: 900px) { .hero-card { margin: 18px 0 0; padding: 28px 32px; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px; } }
.salam-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-100); color: var(--gold-800); font-weight: 600; font-size: .88rem; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.hero-copy h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .3em; }
.hero-copy p { color: var(--ink-2); margin-bottom: 16px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-cta .btn { flex: 1 1 auto; }
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trust-list li { display: flex; gap: 10px; align-items: flex-start; }
.trust-list strong { display: block; font-size: .95rem; line-height: 1.3; }
.trust-list small { color: var(--muted); font-size: .8rem; line-height: 1.35; display: block; }
.ti { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.ti .icon { width: 22px; height: 22px; }
.ti-gold { background: var(--gold-100); color: var(--gold-700); }
.ti-green { background: var(--green-100); color: var(--green-700); }
.ti-wa { background: #dcf8e6; color: var(--wa-dark); }
.ti-fb { background: #e5efff; color: #0866ff; }

/* ---------- Sections ---------- */
.section { padding: 48px 0; }
.section-sm { padding: 24px 0 48px; }
@media (min-width: 768px) { .section { padding: 72px 0; } }
.section-tint { background: linear-gradient(180deg, var(--green-50), var(--cream)); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head h2 { margin: 0; }
.section-head.center { justify-content: center; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-700); font-weight: 600; font-size: .9rem; margin-bottom: 4px; letter-spacing: .02em; }
.eyebrow .icon { width: 16px; height: 16px; }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.link-more .icon { width: 18px; height: 18px; transition: transform .2s; }
.link-more:hover .icon { transform: translateX(3px); }

/* ---------- Categories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
.cat-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 12px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; overflow: hidden; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; color: var(--ink); }
.cat-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; transition: transform .3s var(--ease); }
.cat-card:hover .cat-icon { transform: scale(1.08) rotate(-4deg); }
.cat-icon .icon { width: 30px; height: 30px; }
.cat-tone-0 .cat-icon { background: var(--gold-100); color: var(--gold-700); }
.cat-tone-1 .cat-icon { background: var(--green-100); color: var(--green-700); }
.cat-tone-2 .cat-icon { background: #e6f2ef; color: #22675a; }
.cat-tone-3 .cat-icon { background: #fbe9e1; color: #a5502d; }
.cat-name { font-weight: 600; line-height: 1.3; font-size: .98rem; }
.cat-count { font-size: .8rem; color: var(--muted); }

/* ---------- Product grid & card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .product-grid.grid-shop { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .product-grid.grid-shop { grid-template-columns: repeat(4, 1fr); } }
.product-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.product-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.pc-media { position: relative; display: block; aspect-ratio: 1; background: var(--cream-2); overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .pc-media img { transform: scale(1.05); }
.pc-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pc-soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .6); font-weight: 700; color: var(--ink-2); }
.pc-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; flex: 1; }
@media (min-width: 640px) { .pc-body { padding: 14px 16px 16px; } }
.pc-title { color: var(--ink); font-weight: 600; line-height: 1.35; font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pc-title:hover { color: var(--green-700); }
.pc-short { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pc-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.pc-price strong { font-size: 1.15rem; color: var(--green-700); font-weight: 700; }
.pc-price del { font-size: .85rem; color: var(--muted); }
.pc-low { margin: 0; font-size: .8rem; color: #b45309; font-weight: 600; }
.pc-body .btn { margin-top: 6px; }

/* ---------- Values / Islamic ---------- */
.values { background: var(--green-800); color: #eef5e8; position: relative; overflow: hidden; }
.values::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(238, 166, 15, .18), transparent 40%), radial-gradient(circle at 90% 80%, rgba(168, 206, 142, .18), transparent 40%); }
.values .container { position: relative; }
.values-quote { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.quote-mark .icon { width: 40px; height: 40px; color: var(--gold-500); }
.values-quote blockquote { margin: 8px 0 0; }
.values-quote p { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.5; color: #fff; margin-bottom: 8px; }
.values-quote cite { font-style: normal; color: var(--gold-300); font-size: .92rem; }
.values-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.value-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); padding: 22px; }
.value-card h3 { color: #fff; margin: 12px 0 6px; }
.value-card p { color: #d5e4cc; font-size: .94rem; margin: 0; }
.vi { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-500); color: var(--ink); }
.vi .icon { width: 24px; height: 24px; }
.section-tint .value-card { background: #fff; border-color: var(--line); }
.section-tint .value-card h3 { color: var(--ink); }
.section-tint .value-card p { color: var(--muted); }
@media (min-width: 1024px) { .section-tint .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Spotlight ---------- */
.spotlight-inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .spotlight-inner { grid-template-columns: 1fr 1.25fr; gap: 48px; } .spotlight-inner.reverse .spotlight-copy { order: 2; } }
.spotlight-honey { background: linear-gradient(135deg, var(--gold-50), #fff5dc 60%, var(--cream)); }
.spotlight-islamic { background: linear-gradient(135deg, var(--green-50), #fff 70%); }
.ayah-inline { font-family: var(--font-display); font-size: 1.15rem; color: var(--green-800); border-left: 4px solid var(--gold-500); padding: 6px 0 6px 16px; }
.ayah-inline small { font-family: var(--font-body); color: var(--muted); font-size: .85rem; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px 18px; text-align: center; }
.step-n { position: absolute; top: 12px; left: 14px; font-family: var(--font-num); font-weight: 700; color: var(--gold-500); font-size: 1.4rem; }
.step-i { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); }
.step-i .icon { width: 26px; height: 26px; }
.steps h3 { font-size: 1.02rem; margin-bottom: 4px; }
.steps p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: 1fr 1.6fr; gap: 56px; } }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; transition: box-shadow .2s; }
.faq-list details[open] { box-shadow: var(--shadow-sm); border-color: var(--green-300); }
.faq-list summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { transition: transform .25s; color: var(--green-600); }
.faq-list details[open] summary .icon { transform: rotate(180deg); }
.faq-list details p { padding: 0 18px 16px; margin: 0; color: var(--ink-2); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--green-700), var(--green-900)); color: #fff; padding: 40px 0; }
.cta-inner { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: #fff; margin-bottom: 4px; }
.cta-band p { color: #d5e4cc; margin: 0; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer-ayah { background: var(--cream-2); text-align: center; padding: 32px 0; border-top: 1px solid var(--line); }
.ayah-ar { font-family: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif; font-size: 1.7rem; color: var(--green-800); margin-bottom: 4px; }
.ayah-tr { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 2px; }
.footer-ayah small { color: var(--muted); }

/* ---------- Floating & bottom nav ---------- */
.fab-wa { position: fixed; right: 20px; bottom: 24px; z-index: 40; display: none; align-items: center; gap: 8px; background: var(--wa); color: #fff; padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(18, 140, 75, .6); font-weight: 600; transition: transform .2s; }
.fab-wa:hover { color: #fff; transform: translateY(-2px); }
.fab-wa .icon { width: 26px; height: 26px; }
@media (min-width: 900px) { .fab-wa { display: inline-flex; } }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px -12px rgba(31, 66, 24, .25); }
@media (min-width: 900px) { .bottom-nav { display: none; } }
.bottom-nav a, .bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; color: var(--muted); font-size: .72rem; font-weight: 500; background: none; border: 0; }
.bottom-nav .icon { width: 22px; height: 22px; }
.bottom-nav .active { color: var(--green-700); }
.bottom-nav .bn-wa { color: var(--wa-dark); }
.bottom-nav b { position: absolute; top: 6px; left: 54%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold-500); color: var(--ink); font-size: .68rem; display: grid; place-items: center; }
.bottom-nav b[hidden] { display: none; }

/* ---------- Toasts / alerts ---------- */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); z-index: 200; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 500; opacity: 0; pointer-events: none; transition: all .3s var(--ease); max-width: calc(100vw - 32px); text-align: center; box-shadow: var(--shadow-lg); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); }
@media (min-width: 900px) { .toast { bottom: 32px; } }
.toast-static { max-width: 1240px; margin: 12px auto 0; padding: 12px 16px; border-radius: 12px; width: calc(100% - 32px); }
.toast-success { background: var(--green-100); color: var(--green-900); }
.toast-error { background: var(--danger-bg); color: var(--danger); }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.alert .icon { margin-top: 2px; }
.alert-error { background: var(--danger-bg); color: #8a1c14; }
.alert-success { background: var(--green-100); color: var(--green-900); }
.alert-info { background: var(--gold-50); color: var(--gold-800); border: 1px solid var(--gold-100); }

/* ---------- Page hero / breadcrumbs ---------- */
.page-hero { background: linear-gradient(135deg, var(--green-50), var(--gold-50)); padding: 28px 0; border-bottom: 1px solid var(--line); }
.page-hero.slim { padding: 22px 0; }
.page-hero h1 { margin-bottom: 4px; }
.page-hero p { color: var(--ink-2); margin: 0; max-width: 720px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .86rem; color: var(--muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green-700); }
.breadcrumb .icon { width: 14px; height: 14px; }
.breadcrumb span { color: var(--ink-2); }

/* ---------- Shop ---------- */
.shop-layout { display: grid; gap: 24px; }
@media (min-width: 1024px) { .shop-layout { grid-template-columns: 250px 1fr; gap: 32px; } }
.shop-side { display: none; }
@media (min-width: 1024px) { .shop-side { display: block; position: sticky; top: calc(var(--header-h) + 60px); align-self: start; } }
.side-title { font-size: 1.05rem; margin-bottom: 10px; }
.side-cats { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 2px; }
.side-cats a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 500; }
.side-cats a:hover { background: var(--green-50); color: var(--green-700); }
.side-cats a.active { background: var(--green-700); color: #fff; }
.side-promise { display: flex; gap: 12px; padding: 16px; background: var(--gold-50); border: 1px solid var(--gold-100); border-radius: var(--radius-sm); font-size: .88rem; }
.side-promise .icon { color: var(--gold-700); width: 28px; height: 28px; }
.side-promise p { margin: 0; }
.chip-row { gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-weight: 500; font-size: .92rem; white-space: nowrap; }
.chip.active, .chip:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.result-count { color: var(--muted); font-size: .92rem; }
.toolbar-controls { display: flex; gap: 8px; }
.toolbar-controls select, .field select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%233f4c3a' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center; padding: 9px 38px 9px 14px; border: 1px solid var(--line-2); border-radius: 12px; min-height: 42px; }
.empty-state { text-align: center; padding: 56px 16px; }
.empty-icon { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--green-100); color: var(--green-700); margin-bottom: 16px; }
.empty-icon .icon { width: 38px; height: 38px; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }
.pagination a:hover { border-color: var(--green-500); color: var(--green-700); }
.pagination .current { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* ---------- Product detail ---------- */
.product-detail { display: grid; gap: 24px; }
@media (min-width: 900px) { .product-detail { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }
.pd-gallery { position: relative; }
@media (min-width: 900px) { .pd-gallery { position: sticky; top: calc(var(--header-h) + 60px); } }
.pd-main { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--cream-2); aspect-ratio: 1; border: 1px solid var(--line); }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-badge { position: absolute; top: 14px; left: 14px; font-size: .9rem; padding: 4px 12px; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.pd-thumbs button { flex-shrink: 0; width: 76px; height: 76px; border-radius: 12px; border: 2px solid var(--line); padding: 0; overflow: hidden; background: var(--cream-2); }
.pd-thumbs button.active { border-color: var(--green-600); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-info h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 8px 0 6px; }
.pd-short { color: var(--ink-2); font-size: 1.05rem; }
.pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.pd-price strong { font-size: 2rem; font-weight: 700; color: var(--green-700); font-family: var(--font-num); }
.pd-price del { color: var(--muted); font-size: 1.1rem; }
.pd-stock { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0 16px; border-bottom: 1px dashed var(--line-2); margin-bottom: 16px; font-weight: 600; font-size: .95rem; }
.pd-stock span { display: inline-flex; align-items: center; gap: 6px; }
.pd-stock .in { color: var(--green-700); }
.pd-stock .low { color: #b45309; }
.pd-stock .out { color: var(--danger); }
.pd-stock .sku { color: var(--muted); font-weight: 400; font-size: .85rem; }
.pd-form { display: grid; gap: 12px; }
.pd-options { border: 0; padding: 0; margin: 0 0 4px; }
.pd-options legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 2px solid var(--line-2); background: #fff; font-weight: 600; cursor: pointer; transition: all .15s; }
.opt input:checked + span { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.opt input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.pd-options.invalid .opt span { border-color: var(--danger); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pd-buy { display: flex; gap: 10px; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--line-2); border-radius: 999px; background: #fff; overflow: hidden; }
.qty button { width: 44px; height: 50px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; }
.qty button:hover { background: var(--green-50); color: var(--green-700); }
.qty button .icon { width: 18px; height: 18px; }
.qty input { width: 44px; text-align: center; border: 0; font-weight: 700; font-size: 1.05rem; -moz-appearance: textfield; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-sm button { width: 36px; height: 40px; }
.qty-sm input { width: 36px; font-size: .98rem; }
.pd-alt-order { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-perks { list-style: none; padding: 16px; margin: 20px 0 0; background: var(--green-50); border-radius: var(--radius-sm); display: grid; gap: 10px; font-size: .94rem; }
.pd-perks li { display: flex; gap: 10px; align-items: flex-start; }
.pd-perks .icon { color: var(--green-700); margin-top: 3px; }
.pd-tabs { margin-top: 48px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tab-list { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab-list button { padding: 14px 20px; border: 0; background: none; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tab-list button[aria-selected="true"] { color: var(--green-700); border-bottom-color: var(--gold-500); }
.tab-panel { padding: 20px; }
@media (min-width: 768px) { .tab-panel { padding: 28px 32px; } }
.rich { line-height: 1.8; }
.rich h2 { font-size: 1.35rem; margin-top: 1em; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 60px; z-index: 44; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .3); transform: translateY(150%); transition: transform .3s var(--ease); }
.sticky-buy.show { transform: none; }
.sticky-buy strong { font-size: 1.2rem; color: var(--green-700); }
.sticky-buy del { color: var(--muted); font-size: .85rem; }

/* ---------- Cart & checkout ---------- */
.checkout-steps { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 6px; font-size: .86rem; font-weight: 600; }
.checkout-steps li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.checkout-steps li:not(:last-child)::after { content: ''; width: 24px; height: 2px; background: var(--line-2); margin-left: 6px; }
.checkout-steps li.on { color: var(--green-700); }
.checkout-steps li.done { color: var(--green-600); }
.cart-layout, .checkout-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .cart-layout, .checkout-layout { grid-template-columns: 1fr 400px; gap: 32px; } }
.cart-table { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px 16px; }
.cart-row { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "img info remove" "img qty line"; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 640px) { .cart-row { grid-template-columns: 88px 1fr auto auto auto; grid-template-areas: "img info qty line remove"; gap: 16px; } }
.cr-img { grid-area: img; }
.cr-img img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--cream-2); }
@media (min-width: 640px) { .cr-img img { width: 88px; height: 88px; } }
.cr-info { grid-area: info; display: flex; flex-direction: column; gap: 2px; }
.cr-name { color: var(--ink); font-weight: 600; line-height: 1.3; }
.cr-opt { font-size: .85rem; color: var(--muted); }
.cr-price { font-size: .9rem; color: var(--muted); }
.cart-row .qty { grid-area: qty; justify-self: start; }
.cr-line { grid-area: line; color: var(--green-700); font-size: 1.05rem; text-align: right; }
.cr-remove { grid-area: remove; justify-self: end; color: var(--muted); }
.cr-remove:hover { color: var(--danger); background: var(--danger-bg); }
.cart-table .link-more { margin-top: 14px; }
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.summary-card.sticky { position: sticky; top: calc(var(--header-h) + 60px); }
.summary-card h2 { font-size: 1.25rem; margin-bottom: 14px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.sum-row.total { border-top: 2px dashed var(--line-2); margin-top: 8px; padding-top: 14px; font-size: 1.1rem; font-weight: 700; }
.sum-row.total strong { font-size: 1.45rem; color: var(--green-700); font-family: var(--font-num); }
.sum-row.discount { color: var(--green-700); }
.sum-row[hidden] { display: none; }
.sum-items { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
.sum-items li { display: flex; align-items: center; gap: 10px; }
.sum-items img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--cream-2); }
.si-name { flex: 1; font-size: .92rem; line-height: 1.35; }
.si-name small { color: var(--muted); }
.mini-trust { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: .86rem; color: var(--muted); }
.mini-trust li { display: flex; align-items: center; gap: 8px; }
.mini-trust .icon { color: var(--green-600); width: 18px; height: 18px; }
.summary-card .btn-block { margin-top: 14px; }

.cod-banner { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(120deg, var(--gold-100), var(--gold-50)); border: 1px solid var(--gold-300); margin-bottom: 18px; }
.cod-banner > span { width: 48px; height: 48px; border-radius: 14px; background: var(--gold-500); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; }
.cod-banner strong { font-size: 1.05rem; }
.cod-banner p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.card-fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 18px; margin: 0 0 18px; }
@media (min-width: 640px) { .card-fieldset { padding: 22px 24px; } }
.card-fieldset legend { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; padding: 0 8px; margin-left: -8px; }
.card-fieldset legend .icon { color: var(--green-600); }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; transition: border-color .2s, box-shadow .2s; font-size: 1rem; }
.field textarea { min-height: auto; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(91, 154, 62, .15); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-error { display: block; color: var(--danger); font-size: .86rem; margin-top: 4px; }
.field-row { display: grid; gap: 14px; margin-bottom: 14px; }
.field-row > .field { margin-bottom: 0; }
.field-row:last-child { margin-bottom: 0; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hint { display: block; font-size: .82rem; color: var(--muted); margin-top: 4px; }
.req { color: var(--danger); }
.opt-label { font-weight: 400; color: var(--muted); font-size: .85rem; }
.zone-info { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--green-50); color: var(--green-800); font-size: .92rem; font-weight: 500; }
.coupon-box { display: flex; gap: 8px; margin: 14px 0 4px; }
.coupon-box input { flex: 1; min-width: 0; border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm); padding: 8px 12px; text-transform: uppercase; }
.coupon-msg { font-size: .86rem; margin: 0 0 8px; min-height: 1em; }
.coupon-msg.ok { color: var(--green-700); }
.coupon-msg.err { color: var(--danger); }
.pay-method { margin-top: 14px; }
.pm-option { display: flex; gap: 10px; align-items: center; padding: 14px; border: 2px solid var(--green-600); background: var(--green-50); border-radius: var(--radius-sm); cursor: pointer; }
.pm-option input { accent-color: var(--green-700); width: 20px; height: 20px; }
.pm-option span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.pm-option small { grid-column: 2; color: var(--muted); font-size: .82rem; }
.terms-note { font-size: .8rem; color: var(--muted); text-align: center; margin: 10px 0 0; }

/* ---------- Success ---------- */
.success-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 20px; text-align: center; box-shadow: var(--shadow); }
@media (min-width: 640px) { .success-card { padding: 44px 48px; } }
.success-icon { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: var(--green-700); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px var(--green-100); animation: pop .6s var(--ease); }
.success-icon .icon { width: 42px; height: 42px; stroke-width: 2.6; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.success-eyebrow { color: var(--gold-700); font-weight: 700; margin-bottom: 4px; font-family: var(--font-display); font-size: 1.2rem; }
.order-no-box { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 24px; border-radius: var(--radius-sm); background: var(--gold-50); border: 1px dashed var(--gold-500); margin: 6px 0 20px; }
.order-no-box span { font-size: .85rem; color: var(--muted); }
.order-no-box strong { font-size: 1.4rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); }
.order-no-box .icon { width: 18px; height: 18px; color: var(--muted); }
.wa-confirm { background: #effbf3; border: 1px solid #bfeccf; border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; }
.wa-confirm p { margin-bottom: 10px; font-size: .94rem; }
.success-summary { text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; }
.next-steps { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; display: grid; gap: 10px; }
.next-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--green-50); font-size: .94rem; }
.next-steps .icon { color: var(--green-700); margin-top: 3px; }
.success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dua-note { margin: 20px 0 0; font-size: .9rem; color: var(--muted); font-style: italic; }

/* ---------- Track ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
@media (min-width: 640px) { .card { padding: 28px; } }
.track-form { display: grid; gap: 0 14px; align-items: end; }
@media (min-width: 640px) { .track-form { grid-template-columns: 1fr 1fr auto; } .track-form .field { margin-bottom: 0; } .track-form .btn { min-height: 50px; } }
.tr-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tr-head small { display: block; color: var(--muted); font-size: .8rem; }
.tr-head strong { font-size: .98rem; }
.timeline { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.timeline li { text-align: center; position: relative; font-size: .78rem; color: var(--muted); font-weight: 600; }
.timeline li::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--line-2); z-index: 0; }
.timeline li:first-child::before { display: none; }
.timeline li.done::before { background: var(--green-600); }
.tl-dot { position: relative; z-index: 1; width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; background: #fff; border: 3px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.tl-dot .icon { width: 16px; height: 16px; stroke-width: 3; }
.timeline li.done .tl-dot { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.timeline li.current .tl-dot { box-shadow: 0 0 0 6px var(--green-100); }
.timeline li.done { color: var(--green-800); }
.log-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; font-size: .92rem; }
.log-list li { padding: 10px 14px; border-left: 3px solid var(--gold-500); background: var(--cream); border-radius: 0 10px 10px 0; }

/* ---------- About / contact ---------- */
.about-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1.2fr; gap: 56px; } }
.about-img img { border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.ayah-block { margin: 24px 0; padding: 20px 24px; background: var(--green-50); border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ayah-block p { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 6px; color: var(--green-900); }
.ayah-block cite { color: var(--muted); font-style: normal; font-size: .88rem; }
.ayah-block.big { border-left: 0; border-radius: var(--radius); text-align: center; padding: 32px; }
.ayah-block.big p { font-size: 1.45rem; }
.contact-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.contact-cards { display: grid; gap: 12px; align-content: start; }
@media (min-width: 560px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-card { display: flex; gap: 12px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); transition: box-shadow .2s, transform .2s; }
a.contact-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.contact-card strong { display: block; }
.contact-card span:not(.ti) { font-size: .9rem; color: var(--muted); word-break: break-word; }
.contact-form h2 { font-size: 1.3rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .site-header, .site-footer, .bottom-nav, .fab-wa, .footer-ayah, .drawer { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ---------- Reviews ---------- */
.stars { --r: 0; display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: 2px; background: linear-gradient(90deg, var(--gold-500) calc(var(--r) / 5 * 100%), #ddd5bf calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.stars.sm { font-size: .88rem; letter-spacing: 1px; }
.stars.lg { font-size: 1.5rem; }
.pc-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.pc-rating small { font-size: .78rem; }
.pd-rating { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .92rem; margin-bottom: 6px; }
.pd-rating:hover { color: var(--green-700); }
.rating-summary { display: flex; align-items: center; gap: 14px; padding: 14px 0 18px; }
.rating-summary > strong { font-family: var(--font-num); font-size: 2.6rem; line-height: 1; color: var(--green-800); }
.rating-summary > div { display: grid; gap: 2px; }
.rating-summary.inline { display: inline-flex; gap: 8px; padding: 6px 0 0; justify-content: center; flex-wrap: wrap; }
.review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.review-grid .review-list { grid-template-columns: 1fr; }
@media (min-width: 700px) { .review-grid .review-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .review-grid .review-list { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.rc-head { display: flex; gap: 12px; align-items: flex-start; }
.rc-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.rc-head b { margin-right: 6px; }
.verified { display: inline-flex; align-items: center; gap: 3px; font-size: .76rem; font-weight: 600; color: var(--green-700); background: var(--green-50); padding: 1px 8px; border-radius: 999px; }
.verified .icon { width: 14px; height: 14px; }
.rc-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.rc-product { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; margin-top: 10px; color: var(--gold-800); background: var(--gold-50); padding: 2px 10px; border-radius: 999px; }
.rc-product .icon { width: 14px; height: 14px; }
.rc-text { margin: 10px 0 0; color: var(--ink-2); }
.rc-reply { margin-top: 12px; padding: 10px 14px; background: var(--green-50); border-left: 3px solid var(--green-600); border-radius: 0 10px 10px 0; font-size: .92rem; }
.rc-reply b { display: inline-flex; align-items: center; gap: 6px; color: var(--green-800); font-size: .86rem; }
.rc-reply p { margin: 4px 0 0; }
.reviews-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .reviews-layout { grid-template-columns: 1fr 360px; } }
.review-inline { margin: 0; display: grid; gap: 10px; }
.review-inline h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.review-inline .field { margin: 0; }
.review-inline textarea, .review-inline input[name="name"], .rv-body textarea, .rv-row textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; resize: vertical; background: #fff; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; margin: 4px 0 8px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 2.1rem; line-height: 1; color: #ddd5bf; cursor: pointer; padding: 2px; transition: color .12s, transform .12s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--gold-500); }
.star-input label:hover { transform: scale(1.15); }
.star-input input:focus-visible + label { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 6px; }
.star-word { order: -1; margin-left: 10px; font-weight: 600; color: var(--gold-800); font-size: .92rem; min-width: 5em; }
.review-form .card-fieldset { display: grid; gap: 6px; }
.small-text { font-size: .9rem; margin: 0; }
.rv-product { display: flex; gap: 14px; padding: 12px 0; border-top: 1px dashed var(--line-2); }
.rv-product img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--cream-2); flex-shrink: 0; }
.rv-body { flex: 1; min-width: 0; }
.rv-row { padding: 12px 0; border-top: 1px dashed var(--line-2); }
.rv-row:first-child { border-top: 0; padding-top: 0; }
.check-line { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.check-line input { width: 18px; height: 18px; accent-color: var(--green-700); }
.success-card.slim { padding: 28px 20px; }
.center-block { margin-left: auto; margin-right: auto; }
.mt-md { margin-top: 24px; }
.page-review .page-hero p { max-width: 640px; }
.review-form .card-fieldset legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; line-height: 1.35; }
.review-form .card-fieldset legend + * { clear: both; }

/* ---------- Product image zoom ---------- */
.pd-main { cursor: zoom-in; touch-action: pan-y; }
.pd-main img { transition: transform .12s ease-out; will-change: transform; user-select: none; -webkit-user-drag: none; }
.pd-main.zooming img { transition: none; }
.pd-zoom-btn { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--green-800); font: inherit; font-weight: 600; font-size: .85rem; box-shadow: var(--shadow-sm); cursor: pointer; z-index: 2; }
.pd-zoom-btn .icon { width: 20px; height: 20px; }
.pd-count { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(19,50,29,.75); color: #fff; font-size: .8rem; font-weight: 600; z-index: 2; }
.pd-main.zooming .pd-zoom-btn, .pd-main.zooming .pd-count, .pd-main.zooming .pd-badge { opacity: 0; }
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12,22,14,.96); display: flex; flex-direction: column; color: #fff; }
.lightbox[hidden] { display: none; }
.lb-top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.lb-count { font-weight: 600; min-width: 56px; }
.lb-hint { flex: 1; text-align: center; font-size: .85rem; color: #cfdcc6; }
.lb-stage { flex: 1; min-height: 0; min-width: 0; position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: zoom-in; }
.lightbox.zoomed .lb-stage { cursor: grab; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; transition: transform .08s linear; user-select: none; -webkit-user-drag: none; }
.lb-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,.26); }
.lb-btn .icon { width: 24px; height: 24px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }
.lb-zoom { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
@media (max-width: 640px) { .lb-prev, .lb-next { display: none; } .lb-hint { font-size: .78rem; } }

.admin-cs-bar { background: #13321D; color: #F2C14E; text-align: center; font-size: .85rem; padding: 6px 12px; font-family: var(--font-body); }
.admin-cs-bar a { color: #fff; text-decoration: underline; }

/* ---------- Category tree ---------- */
.side-group > a { font-weight: 600; }
.side-sub { list-style: none; margin: 2px 0 8px 22px; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 1px; }
.side-sub a { padding: 7px 10px !important; font-size: .94rem; font-weight: 500; }
.sub-chips { display: flex; }
.chip .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.chip-ghost { background: transparent; border-style: dashed; }

.browse-more { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }

/* ---------- Menu dropdowns (broad group → subcategories) ---------- */
.nav-dd { position: relative; display: flex; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; }
.nav-dd-btn .icon { width: 15px; height: 15px; transition: transform .2s; }
.nav-dd-panel { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 250px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); display: none; }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { display: grid; gap: 2px; }
.nav-dd:hover .nav-dd-btn .icon { transform: rotate(180deg); }
.nav-dd-panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.nav-dd-panel a::after { display: none; }
.nav-dd-panel a:hover { background: var(--green-50); color: var(--green-700); }
.nav-dd-panel .icon { color: var(--green-600); width: 18px; height: 18px; }
.nav-dd-panel .dd-all { font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 10px 10px 4px 4px; margin-bottom: 2px; }
.drawer-group summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; font-weight: 600; cursor: pointer; }
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-group summary .icon:first-child { color: var(--green-600); }
.drawer-group summary .icon:last-child { margin-left: auto; transition: transform .2s; color: var(--muted); }
.drawer-group[open] summary .icon:last-child { transform: rotate(180deg); }
.drawer-group a { padding: 10px 12px 10px 48px !important; font-size: .96rem; }
.drawer-group .dg-all { font-weight: 600; color: var(--green-700) !important; }

/* ---------- Homepage group cards ---------- */
.group-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .group-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.group-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow .25s, transform .25s; }
.group-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.group-main { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.group-main:hover { color: var(--green-700); }
.group-main > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.group-main .cat-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.group-main > .icon { color: var(--muted); }
.group-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.group-subs a { padding: 6px 14px; border-radius: 999px; background: var(--cream-2); color: var(--ink-2); font-size: .9rem; font-weight: 500; }
.group-subs a:hover { background: var(--green-700); color: #fff; }
.home-collection { padding-top: 40px; }

/* ---------- "For" (kids / adults) filter ---------- */
.aud-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding: 8px 10px; background: var(--gold-50); border: 1px solid var(--gold-100); border-radius: 14px; }
.aud-label { font-weight: 600; color: var(--gold-800); margin-right: 2px; }
.aud { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-weight: 600; font-size: .92rem; }
.aud .icon { width: 16px; height: 16px; }
.aud.on, .aud:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* ---------- Share & SKU ---------- */
.pd-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sku-chip { border: 1px dashed var(--line-2); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .8rem; color: var(--muted); cursor: copy; letter-spacing: .02em; }
.sku-chip b { color: var(--ink-2); font-family: var(--font-body); letter-spacing: .04em; }
.sku-chip:hover { border-color: var(--green-500); color: var(--green-700); }
.share-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 5px 14px; font: inherit; font-weight: 600; font-size: .86rem; color: var(--green-800); cursor: pointer; transition: background .15s, border-color .15s; }
.share-btn .icon { width: 16px; height: 16px; }
.share-btn:hover { background: var(--green-50); border-color: var(--green-300); }
.share-btn.sm { padding: 3px 12px; margin-left: 8px; font-size: .82rem; vertical-align: middle; }
.share-pop { position: absolute; z-index: 400; min-width: 210px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); display: grid; gap: 2px; }
.share-pop[hidden] { display: none; }
.share-pop a, .share-pop button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 10px; font: inherit; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; }
.share-pop a:hover, .share-pop button:hover { background: var(--green-50); color: var(--green-700); }
.share-pop .icon { width: 18px; height: 18px; color: var(--green-600); }
.from-note, .pc-price .from { font-size: .85rem; color: var(--muted); font-weight: 500; }
.opt span small { display: block; font-size: .74rem; font-weight: 600; color: var(--green-700); margin-top: 1px; }
.opt input:checked + span small { color: #fff; }
.opt span { flex-direction: column; line-height: 1.2; }

/* grid children must be allowed to shrink, or long chip rows push the page wider than the screen */
.shop-layout > *, .product-detail > * { min-width: 0; }
.sub-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-bottom: 2px; }
.sub-chips::-webkit-scrollbar { display: none; }
.sub-chips > * { flex: none; }

/* ---------- Larger, easier type for menus, categories & search ---------- */
.nav-inner a, .nav-dd-btn { font-size: 1.06rem; font-weight: 600; padding-top: 13px; padding-bottom: 13px; }
.nav-dd-panel a { font-size: 1rem; }
.search-form input { height: 52px; font-size: 1.05rem; }
.search-form button { width: 42px; height: 42px; }
.drawer-nav a { font-size: 1.08rem; padding: 14px 12px; }
.side-title { font-size: 1.2rem; }
.side-cats a { font-size: 1.04rem; padding: 11px 12px; }
.side-sub a { font-size: 1rem !important; }
.chip { font-size: 1rem; padding: 8px 18px; }
.shop-toolbar select { font-size: 1rem; min-height: 46px; }

/* ---------- Shop filters ---------- */
.shop-toolbar .tb-left { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.filter-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 600; font-size: 1rem; cursor: pointer; transition: border-color .2s, background .2s; }
.filter-btn .icon { width: 18px; height: 18px; color: var(--green-700); }
.filter-btn:hover, .filter-btn[aria-expanded="true"] { border-color: var(--green-600); background: var(--green-50); }
.filter-btn b { min-width: 22px; height: 22px; border-radius: 999px; background: var(--green-700); color: #fff; font-size: .78rem; display: grid; place-items: center; padding: 0 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; border-radius: 999px; background: var(--green-50); color: var(--green-800, #1f4a1a); border: 1px solid var(--green-100, #d8ead0); font-size: .92rem; font-weight: 500; }
.filter-chip .icon { width: 14px; height: 14px; opacity: .7; }
.filter-chip:hover { background: #fff; }
.filter-panel { display: grid; gap: 18px 28px; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: -6px 0 22px; box-shadow: var(--shadow-sm, 0 6px 20px rgba(40,60,30,.06)); }
.filter-panel[hidden] { display: none; }
@media (min-width: 900px) { .filter-panel { grid-template-columns: 1.4fr 1fr 1fr; } .fp-actions { grid-column: 1 / -1; } }
.fp-group { display: grid; gap: 8px; align-content: start; }
.fp-label { font-weight: 600; font-size: 1rem; color: var(--ink); }
.fp-label small { color: var(--muted); font-weight: 400; }
.fp-price { display: flex; align-items: center; gap: 8px; }
.fp-price label { flex: 1; }
.fp-price input, .filter-panel select { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--cream); font-size: 1rem; }
.fp-price input:focus, .filter-panel select:focus { outline: none; border-color: var(--green-500); background: #fff; }
.fp-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-quick .chip { font-size: .88rem; padding: 6px 12px; cursor: pointer; }
.fp-check { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); cursor: pointer; font-weight: 500; }
.fp-check input { width: 18px; height: 18px; accent-color: var(--green-700); }
.fp-check .icon { width: 17px; height: 17px; color: var(--gold-600, #b37a06); vertical-align: -3px; }
.fp-check:has(input:checked) { border-color: var(--green-600); background: var(--green-50); }
.fp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Offers ---------- */
.badge-offer { background: linear-gradient(90deg, #C9971C, #E3B33D); color: #1f2b1c; }
.pd-offer { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 8px 14px; border-radius: 12px; background: var(--gold-50, #fdf6e3); border: 1px dashed #e3c26a; color: #6b4a05; font-size: .95rem; }
.pd-offer .icon { width: 18px; height: 18px; }
.opt span small del { opacity: .55; margin-left: 2px; }
.coupon-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--green-50); color: var(--green-800, #1f4a1a); font-size: .92rem; }
.coupon-note .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--gold-600, #b37a06); }
.coupon-note[hidden] { display: none; }
.preview-bar { background: #13321D; color: #F2C14E; font-size: .95rem; padding: 10px 0; }
.preview-bar .icon { width: 18px; height: 18px; vertical-align: -3px; }
.preview-bar a { color: #fff; text-decoration: underline; margin-left: 6px; }

/* ---------- Optional customer account ---------- */
.acc-btn { position: relative; }
.acc-btn.on::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); border: 2px solid #fff; }
.acc-box { border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 16px 18px; margin: 4px 0 18px; background: var(--cream); }
.acc-box.signed { display: flex; align-items: center; gap: 10px; border-style: solid; border-color: var(--green-100, #d8ead0); background: var(--green-50); font-size: .95rem; }
.acc-box.signed .icon { color: var(--green-700); flex: none; }
.acc-box:not(.signed) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acc-box .acc-ic { flex: none; width: 40px; height: 40px; }
.acc-txt { flex: 1 1 260px; min-width: 0; }
.acc-txt small { display: block; color: var(--muted); font-size: .88rem; margin-top: 2px; }
.acc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-box.wait { border-style: solid; border-color: var(--gold-200, #ecdcae); background: var(--gold-50); }
.acc-box.wait > .icon { color: var(--gold-800); flex: none; }
.acc-box.wait > span { flex: 1 1 240px; } .acc-box.wait small { display: block; color: var(--muted); font-size: .88rem; margin-top: 2px; }
@media (max-width: 520px) { .acc-btns { width: 100%; } .acc-btns .btn { flex: 1; } }
button.btn-signin { border: 0; font: inherit; cursor: pointer; }
.narrow-sm { max-width: 480px; }
.rr-alt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; font-size: .92rem; color: var(--muted); }
.rr-note { margin: 14px 0 0; text-align: center; }
.rr-box { display: grid; gap: 14px; }
.rr-lead { margin: 0; text-align: center; font-size: .95rem; }
.rr-ok { display: flex; gap: 8px; justify-content: center; margin: 0; color: var(--green-700); font-weight: 600; }
.rr-ok .icon { flex: none; margin-top: 3px; }
.rr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rr-btns .btn { justify-content: center; }
.rr-call { margin: 0; text-align: center; font-size: .92rem; color: var(--muted); }
.rr-call a { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.rr-order { display: grid; gap: 4px; justify-items: start; padding: 14px; border-radius: 12px; background: var(--green-50); border: 1px solid var(--line); }
.rr-order b { display: inline-flex; align-items: center; gap: 6px; }
.rr-order small { color: var(--muted); font-size: .88rem; margin-bottom: 6px; }
.acc-merge { border: 1px solid var(--line); border-left: 4px solid var(--green-600, #2f7d3e); border-radius: 12px; background: #fff; padding: 14px 16px; margin: 0 0 16px; display: grid; gap: 10px; }
.am-t { display: flex; gap: 10px; align-items: flex-start; }
.am-t .icon { color: var(--green-700); flex: none; margin-top: 3px; }
.am-t small { display: block; color: var(--muted); font-size: .88rem; }
.acc-merge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acc-merge label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .92rem; cursor: pointer; }
.acc-merge input { accent-color: var(--green-700); width: 18px; height: 18px; }
.am-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 400px) { .rr-btns { grid-template-columns: 1fr; } }
.acc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 20px); padding: 28px 24px; box-shadow: var(--shadow-sm, 0 6px 20px rgba(40,60,30,.06)); }
.acc-head { text-align: center; margin-bottom: 18px; }
.acc-head h1 { font-size: 1.6rem; margin: 10px 0 6px; }
.acc-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green-50); color: var(--green-700); }
.acc-ic .icon { width: 26px; height: 26px; }
.acc-form { display: grid; gap: 14px; }
.acc-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.acc-form input { height: 50px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--cream); font-size: 1rem; font-weight: 400; }
.acc-form input:focus { outline: none; border-color: var(--green-500); background: #fff; }
.acc-form.compact input { height: 44px; }
.acc-links { text-align: center; margin-top: 16px; font-size: .95rem; }
.acc-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; font-size: .85rem; color: var(--muted); }
.acc-note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--green-600); }
.acc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.acc-top h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.acc-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .acc-grid { grid-template-columns: 1fr 340px; align-items: start; } }
.acc-grid > * { min-width: 0; }
.acc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.acc-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 14px; }
.acc-panel h2 .icon { width: 20px; height: 20px; color: var(--green-700); }
.acc-orders { display: grid; gap: 8px; }
.acc-order { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.acc-order .right { text-align: right; }
.status-pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: 1px 10px; border-radius: 999px; background: var(--gold-50, #fdf6e3); color: #6b4a05; margin-left: 4px; }
.status-pill.st-delivered { background: var(--green-50); color: var(--green-700); }
.status-pill.st-cancelled, .status-pill.st-returned { background: #f6e7e5; color: #8a2a22; }
.acc-bag { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; font-size: .92rem; }
.acc-bag li { display: flex; justify-content: space-between; gap: 10px; }

/* =========================================================
   Colour refresh — brand green for trust, warm saffron for action,
   coral for deals, soft tints so the page feels fresh and lively
   ========================================================= */
:root {
  --accent: #f07a1a;          /* saffron-orange: action buttons, floating cart */
  --accent-dark: #d9620a;
  --accent-50: #fff3e8;
  --accent-100: #ffe2c7;
  --coral: #e5484d;           /* deals & discounts */
  --sky: #2f80c9; --sky-50: #eaf3fc;
  --plum: #7b5cc4; --plum-50: #f1ecfb;
  --mint-50: #eaf7f0; --peach-50: #fff0e6; --butter-50: #fff7d9; --rose-50: #fdecef;
}
.badge-sale { background: var(--coral); }
.pc-price del, .pd-price del { color: #9b8f86; }
/* Add to bag = warm action colour; Order now stays brand green */
.product-card [data-add-cart], .pd-buy .btn-soft { background: var(--accent-50); color: var(--accent-dark); border: 1px solid var(--accent-100); }
.product-card [data-add-cart]:hover, .pd-buy .btn-soft:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.product-card .btn-soft:not([data-add-cart]) { background: var(--green-50); }
.btn-gold { background: linear-gradient(135deg, #f7b733, var(--accent)); color: #fff; }
.btn-gold:hover { background: var(--accent-dark); color: #fff; }
.section-tint { background: linear-gradient(180deg, var(--mint-50), #fff 70%); }
.top-products { background: linear-gradient(180deg, #fff, var(--peach-50)); }
.spotlight-honey { background: linear-gradient(135deg, var(--butter-50), var(--peach-50)); }
.ti-coral { background: var(--rose-50); color: var(--coral); }
.ti-sky { background: var(--sky-50); color: var(--sky); }
.cat-tone-0 .cat-icon { background: var(--butter-50); color: #b07800; }
.cat-tone-1 .cat-icon { background: var(--mint-50); color: var(--green-700); }
.cat-tone-2 .cat-icon { background: var(--sky-50); color: var(--sky); }
.cat-tone-3 .cat-icon { background: var(--rose-50); color: var(--coral); }

/* ---------- Header: labelled icons (Track order · Wishlist · Sign in · Cart · More) ---------- */
.header-actions { gap: 4px; }
.ha-item { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; padding: 4px 6px; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; border-radius: 12px; }
.ha-item:hover { color: var(--green-700); background: var(--green-50); }
.ha-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; }
.ha-ic .icon { width: 25px; height: 25px; stroke-width: 1.7; }
.ha-label { font-size: .8rem; font-weight: 500; white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.ha-badge { position: absolute; top: -5px; right: -8px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.ha-badge[hidden] { display: none; }
.ha-item.signed .ha-ic::after { content: ''; position: absolute; bottom: 1px; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--green-600); border: 2px solid #fff; }
.ha-cart .ha-label { font-weight: 700; color: var(--accent-dark); }
.ha-cart.bump .ha-ic { animation: bump .5s var(--ease); }
.ha-more { display: none; }
@media (min-width: 1024px) { .ha-more { display: inline-flex; } }
@media (max-width: 767px) { .ha-label { display: none; } .ha-item { min-width: 38px; padding: 4px; } }

/* ---------- Floating cart (right edge, desktop) + checkout bar (phone) ---------- */
.float-cart { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 45; display: none; flex-direction: column; align-items: stretch; width: 84px; border: 0; padding: 0; border-radius: 12px 0 0 12px; overflow: hidden; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(217, 98, 10, .55); font: inherit; transition: width .2s; }
.float-cart .fc-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; background: linear-gradient(160deg, #f7a23b, var(--accent)); color: #fff; font-size: .8rem; font-weight: 600; }
.float-cart .fc-top .icon { width: 26px; height: 26px; }
.float-cart .fc-total { padding: 8px 6px; background: #fff; color: var(--accent-dark); font-weight: 700; font-size: .92rem; text-align: center; border: 1px solid var(--accent-100); border-left: 0; }
.float-cart:hover { width: 92px; }
.float-cart.bump { animation: bump .5s var(--ease); }
@media (min-width: 900px) { .float-cart { display: flex; } }
.m-cartbar { position: fixed; left: 10px; right: 10px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 44; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 14px; background: linear-gradient(135deg, #f7a23b, var(--accent)); color: #fff; box-shadow: 0 10px 26px -8px rgba(217, 98, 10, .6); font-size: .95rem; }
.m-cartbar[hidden] { display: none; }
.m-cartbar:hover { color: #fff; }
.m-cartbar .icon { width: 18px; height: 18px; vertical-align: -3px; }
.mcb-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; background: rgba(255,255,255,.22); padding: 5px 10px; border-radius: 999px; }
@media (min-width: 900px) { .m-cartbar { display: none !important; } }
body.has-cartbar .fab-wa { bottom: calc(130px + env(safe-area-inset-bottom)); }

/* ---------- Wishlist hearts ---------- */
.product-card { position: relative; }
.wish-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #8b8079; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .15s, color .15s; }
.wish-btn .icon { width: 19px; height: 19px; }
.wish-btn:hover { color: var(--coral); transform: scale(1.08); }
.wish-btn.on, .wish-chip.on { color: var(--coral); }
.wish-btn.on .icon, .wish-chip.on .icon { fill: currentColor; }
.wish-btn.pop, .wish-chip.pop { animation: bump .45s var(--ease); }
.wish-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: inherit; font-size: .88rem; cursor: pointer; }
.wish-chip .icon { width: 16px; height: 16px; }

/* ---------- Homepage: two banners + trust strip + featured categories + top products ---------- */
.hero-duo { display: grid; gap: 14px; }
@media (min-width: 1000px) { .hero-duo { grid-template-columns: 2.05fr 1fr; align-items: stretch; } .hero-main { align-self: start; } }
.hero-side { position: relative; display: none; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: var(--radius); overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #3d8a3a 0%, #1f5a2c 55%, #143a1d 100%); box-shadow: var(--shadow); }
@media (min-width: 1000px) { .hero-side { display: flex; } }
.hero-side::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(240,122,26,.25); }
.hs-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .82rem; font-weight: 600; color: #ffe2a6; }
.hs-kicker .icon { width: 15px; height: 15px; }
.hs-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; color: #fff; }
.hs-sub { font-size: .88rem; color: #d7e8cf; }
.hs-points { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: .84rem; color: #e3efdc; }
.hs-points b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; }
.hs-packs { display: flex; gap: 6px; margin-top: auto; position: relative; z-index: 1; }
.hs-packs img { width: 28%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.hs-cta { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .92rem; }
.hero-side:hover .hs-cta { background: var(--accent-dark); }
.trust-strip { list-style: none; margin: 14px 0 0; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 900px) { .trust-strip { grid-template-columns: repeat(4, 1fr); padding: 16px 20px; } }
.trust-strip li { display: flex; align-items: center; gap: 10px; }
.trust-strip strong { display: block; font-size: .92rem; }
.trust-strip small { color: var(--muted); font-size: .8rem; }
.center-title { text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 18px; }
.fc-row-wrap { position: relative; }
.fc-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
@media (min-width: 1000px) { .fc-row { grid-auto-columns: calc((100% - 7 * 14px) / 8); } }
.fc-row::-webkit-scrollbar { display: none; }
.fc-card { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-align: center; transition: transform .2s var(--ease), box-shadow .2s; }
.fc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--green-700); }
.fc-img { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.fc-img img { width: 100%; height: 100%; object-fit: cover; }
.fc-card.tone-0 .fc-img { background: var(--butter-50); } .fc-card.tone-1 .fc-img { background: var(--mint-50); } .fc-card.tone-2 .fc-img { background: var(--sky-50); }
.fc-card.tone-3 .fc-img { background: var(--peach-50); } .fc-card.tone-4 .fc-img { background: var(--plum-50); } .fc-card.tone-5 .fc-img { background: var(--rose-50); }
.fc-name { font-weight: 600; font-size: .98rem; }
.fc-arrow { position: absolute; top: 50%; transform: translateY(-60%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: none; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(217,98,10,.6); }
.fc-arrow.prev { left: -18px; background: var(--accent-100); color: var(--accent-dark); } .fc-arrow.next { right: -18px; }
.fc-arrow .icon { width: 20px; height: 20px; }
@media (min-width: 1000px) { .fc-arrow { display: grid; } }
@media (min-width: 1100px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 767px) {
  .header-actions { gap: 0; }
  .ha-item, .header-actions .icon-btn { min-width: 36px; width: 36px; padding: 2px; }
  .ha-ic { width: 26px; height: 26px; }
  .ha-ic .icon { width: 23px; height: 23px; }
}
@media (max-width: 400px) { .brand-text small { display: none; } }
@media (max-width: 767px) {
  .header-inner { gap: 6px; }
  .brand { gap: 6px; flex-shrink: 1; min-width: 0; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1.2rem; }
  .header-actions { margin-left: auto; flex-shrink: 0; }
}

/* ---------- Second banner slider (right) + arrows on the main slider ---------- */
.hero-side-slider { position: relative; display: none; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 290px; }
@media (min-width: 1000px) { .hero-side-slider { display: block; } }
.hero-side-slider .hero-side { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; box-shadow: none; border-radius: 0; }
.hero-side-slider .hero-side.active { opacity: 1; visibility: visible; z-index: 1; }
.hero-side-slider .slider-dots { z-index: 3; bottom: 12px; left: auto; right: 16px; transform: none; }
.hero-side.tone-offer { background: radial-gradient(120% 90% at 100% 0%, #f7a23b 0%, #e2620e 55%, #b2470a 100%); }
.hero-side.tone-offer .hs-kicker { color: #fff4dc; }
.hero-side.tone-offer .hs-cta { background: #fff; color: #c2540c; }
.hero-side.tone-green { background: radial-gradient(120% 90% at 100% 0%, #3d8a3a 0%, #1f5a2c 55%, #143a1d 100%); }
.hero-side.tone-peach { background: radial-gradient(120% 90% at 100% 0%, #ffd9b8 0%, #f6b98d 50%, #e8946a 100%); color: #3a1f10; }
.hero-side.tone-peach .hs-title { color: #3a1f10; } .hero-side.tone-peach .hs-sub { color: #5a3420; } .hero-side.tone-peach .hs-kicker { background: rgba(255,255,255,.5); color: #7a3c14; }
.hero-side.tone-plum { background: radial-gradient(120% 90% at 100% 0%, #8f74d6 0%, #5b43a8 55%, #3a2a75 100%); }
.hero-side.tone-plum .hs-kicker { color: #efe6ff; } .hero-side.tone-plum .hs-sub { color: #e2d9fb; }
.slider-arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.92); color: var(--accent-dark); display: none; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: background .2s, color .2s; }
.slider-arrow .icon { width: 22px; height: 22px; }
.slider-arrow.prev { left: 14px; } .slider-arrow.prev .icon { transform: rotate(180deg); }
.slider-arrow.next { right: 14px; }
.slider-arrow:hover { background: var(--accent); color: #fff; }
@media (min-width: 768px) { .slider-arrow { display: grid; } }

/* ---------- Product video (YouTube, click-to-play) ---------- */
.pd-video { position: absolute; inset: 0; z-index: 6; background: #000; }
.pd-video[hidden] { display: none; }
.pd-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.pd-video-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; }
.pd-video-close .icon { width: 18px; height: 18px; }
.pd-thumb-video { position: relative; }
.pd-thumb-video img { object-fit: cover; }
.pd-thumb-video .play, .pd-video-cta .play { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e62117; color: #fff; }
.pd-thumb-video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.pd-thumb-video .play .icon, .pd-video-cta .play .icon { width: 14px; height: 14px; margin-left: 2px; }
.pd-video-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); }
.pd-video-cta:hover { border-color: #e62117; color: #b3170f; }

/* ---------- Product page: About this item, details, photos, frequently bought together ---------- */
.pd-about { margin: 6px 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--green-50); border: 1px solid var(--green-100); }
.pd-about h2 { font-size: 1rem; margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; }
.pd-about ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pd-about li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.pd-about li .icon { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--green-600); }
.pd-about-more { display: inline-block; margin-top: 8px; font-size: .9rem; font-weight: 600; }
.pd-desc-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .pd-desc-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.pd-desc-grid h3, .tab-panel h3.mt { font-size: 1.1rem; margin: 0 0 10px; }
.tab-panel h3.mt { margin-top: 26px; }
.pd-hl-full { margin: 0 0 18px; padding-left: 20px; line-height: 1.8; }
.pd-specs { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.pd-specs table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.pd-specs th, .pd-specs td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pd-specs tr:nth-child(odd) th, .pd-specs tr:nth-child(odd) td { background: var(--cream); }
.pd-specs th { width: 40%; color: var(--muted); font-weight: 600; }
.pd-specs tr:last-child th, .pd-specs tr:last-child td { border-bottom: 0; }
.pd-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pd-photo-grid button { padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--cream-2); cursor: zoom-in; }
.pd-photo-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s; }
.pd-photo-grid button:hover img { transform: scale(1.04); }
.fbt { margin-top: 36px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, #fff, var(--accent-50)); }
.fbt h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); margin-bottom: 16px; }
.fbt-body { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .fbt-body { grid-template-columns: 1fr 260px; } }
.fbt-items { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.fbt-plus { flex: none; font-size: 1.6rem; font-weight: 300; color: var(--muted); }
.fbt-item { position: relative; flex: 0 0 168px; display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; border: 1.5px solid var(--accent-100); cursor: pointer; transition: opacity .2s, border-color .2s; }
.fbt-item input { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; accent-color: var(--accent); }
.fbt-item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--cream-2); }
.fbt-name { font-size: .88rem; line-height: 1.35; color: var(--ink-2); }
.fbt-item strong { color: var(--green-700); }
.fbt-item.off { opacity: .45; border-color: var(--line); }
.fbt-buy { display: grid; gap: 6px; text-align: center; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.fbt-buy strong { font-size: 1.6rem; color: var(--accent-dark); }
.av-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.av-row > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .av-row { grid-auto-columns: calc((100% - 4 * 16px) / 5); } }

/* ---------- Product cards: size · quantity · Add to cart · Buy now ---------- */
.pc-buy { display: grid; gap: 6px; margin-top: auto; }
.pc-opt { width: 100%; height: 36px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; font: inherit; font-size: .86rem; color: var(--ink); }
.pc-opt.invalid { border-color: var(--coral); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pc-row { display: flex; gap: 6px; align-items: stretch; }
.pc-qty { flex: none; height: 36px; }
.pc-qty button { width: 28px; }
.pc-qty input { width: 30px; text-align: center; -moz-appearance: textfield; }
.pc-qty input::-webkit-outer-spin-button, .pc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-cart { flex: 1; min-width: 0; height: 36px; padding: 0 8px; background: var(--accent-50); color: var(--accent-dark); border: 1px solid var(--accent-100); white-space: nowrap; }
.pc-cart:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pc-cart span { overflow: hidden; text-overflow: ellipsis; }
.pc-buynow { height: 36px; background: var(--green-700); color: #fff; }
.pc-buynow:hover { background: var(--green-800); color: #fff; }
.pc-buy .icon { width: 16px; height: 16px; }
@media (max-width: 420px) { .pc-cart span { display: none; } }
.product-card { display: flex; flex-direction: column; }
.product-card .pc-body { display: flex; flex-direction: column; flex: 1; }

/* ---------- Homepage & lists: a calm, standard grid — 2 per row on phones, 3 on tablets, 4 on computers ---------- */
.product-grid { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 700px) { .product-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1100px) { .product-grid:not(.grid-shop):not(.grid-2) { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1100px) { .spotlight .product-grid.grid-2 { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---------- Frequently bought together (appears after Add to cart, right above the details) ---------- */
.fbt { margin: 28px 0 8px; }
.fbt[hidden] { display: none; }
.fbt .fbt-t-added { display: none; }
.fbt.fbt-added { border-color: var(--green-300); box-shadow: 0 0 0 4px var(--green-50); animation: fbtIn .45s var(--ease); }
.fbt.fbt-added .fbt-t-added { display: inline-flex; align-items: center; gap: 8px; color: var(--green-700); }
.fbt.fbt-added .fbt-t-added .icon { width: 24px; height: 24px; }
.fbt.fbt-added .fbt-t-default { display: none; }
@keyframes fbtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fbt-item { cursor: default; }
.fbt-link { display: grid; gap: 6px; color: inherit; }
.fbt-link:hover .fbt-name { color: var(--green-700); text-decoration: underline; }
.fbt-one { height: 34px; background: var(--accent-50); color: var(--accent-dark); border: 1px solid var(--accent-100); }
.fbt-one:hover { background: var(--accent); color: #fff; }
.fbt-one.done { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.fbt-one .icon, .fbt-incart .icon { width: 15px; height: 15px; }
.fbt-incart { display: none; align-items: center; justify-content: center; gap: 4px; height: 34px; border-radius: 10px; background: var(--green-50); color: var(--green-700); font-size: .86rem; font-weight: 600; }
.fbt-item.in-cart .fbt-incart { display: inline-flex; }
.fbt-item.in-cart { opacity: 1; border-color: var(--green-100); }

/* ---------- Best products: 2×2 highlight cards (picture left, details & buttons right) ---------- */
.best-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .best-grid { grid-template-columns: 1fr 1fr; } }
.wide-card { flex-direction: row !important; align-items: stretch; border: 1.5px solid var(--accent-100); box-shadow: 0 10px 30px -18px rgba(217, 98, 10, .45); }
.wide-card:hover { border-color: var(--accent); }
.wc-media { position: relative; flex: 0 0 44%; display: block; background: var(--cream-2); overflow: hidden; }
.wc-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; display: block; transition: transform .35s var(--ease); }
.wide-card:hover .wc-media img { transform: scale(1.04); }
.wc-body { padding: 16px 16px 14px; gap: 6px; }
.wide-card .pc-title { font-size: 1.12rem; font-weight: 700; }
.wc-hl { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; gap: 4px; }
.wc-hl li { display: flex; gap: 6px; align-items: flex-start; font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.wc-hl .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--green-600); }
.wide-card .pc-price strong { font-size: 1.35rem; }
.wide-card .wish-btn { left: 10px; right: auto; }
.wide-card .pc-badges { top: 10px; left: auto; right: 10px; align-items: flex-end; }
@media (max-width: 480px) { .wc-media { flex-basis: 40%; } .wc-body { padding: 12px; } .wide-card .pc-title { font-size: 1rem; } .wc-hl { display: none; } }

/* ---------- Category sections: one slider row per subcategory, 4 across ---------- */
.cat-group { padding: 26px 0 8px; }
.cat-group.tone-0 { background: linear-gradient(180deg, #fff, var(--mint-50)); }
.cat-group.tone-1 { background: linear-gradient(180deg, #fff, var(--butter-50)); }
.cat-group.tone-2 { background: linear-gradient(180deg, #fff, var(--plum-50)); }
.cg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cg-head .cat-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--green-700); box-shadow: var(--shadow-sm); }
.cg-head .cat-icon .icon { width: 26px; height: 26px; }
.cg-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.cg-head p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.cg-head p small { color: var(--gold-700); }
.cg-head > div { flex: 1; min-width: 0; }
.cat-row { margin-bottom: 22px; }
.cr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cr-head h3 { margin: 0; font-size: 1.15rem; font-family: var(--font-body); font-weight: 700; }
.cr-wrap { position: relative; }
.cat-slider { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 10px; overscroll-behavior-x: contain; }
.cat-slider::-webkit-scrollbar { display: none; }
.cat-slider > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 700px) { .cat-slider { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; } }
@media (min-width: 1440px) { .cat-slider { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; } }   /* smaller laptops: 3 bigger cards */
.cr-wrap .fc-arrow { top: 38%; }
.cr-wrap .fc-arrow.prev { left: -20px; } .cr-wrap .fc-arrow.next { right: -20px; }
.fc-arrow[hidden] { display: none !important; } .fc-arrow.dim { opacity: .35; pointer-events: none; }

/* ---------- Header logo: short intro on the first visit of a session (like the coming-soon page, but never blocks the shop) ---------- */
.brand-mark { width: 50px; height: 50px; flex: none; overflow: visible; }
@media (max-width: 767px) { .brand-mark { width: 38px; height: 38px; } }
.bm-l, .bm-r { transform-box: fill-box; transform-origin: 50% 100%; }
.bm-shine { transform: translateX(-80px) skewX(-18deg); }
@media (prefers-reduced-motion: no-preference) {
  .logo-intro .bm-l { animation: bmInL .9s cubic-bezier(.2, .8, .2, 1) .05s both; }
  .logo-intro .bm-r { animation: bmInR .9s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .logo-intro .bm-v { stroke-dasharray: 160; stroke-dashoffset: 160; animation: bmDraw .7s ease .85s forwards; }
  .logo-intro .bm-shine { animation: bmSweep 1.1s ease-in-out 1.2s 1 both; }
  .logo-intro .brand-text { animation: bmText .7s ease .45s both; }
  .brand:hover .brand-mark { animation: bmNod .6s ease; }
}
@keyframes bmInL { from { transform: translate(-60px, 14px) rotate(-26deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bmInR { from { transform: translate(60px, -14px) rotate(26deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bmDraw { to { stroke-dashoffset: 0; } }
@keyframes bmSweep { from { transform: translateX(-80px) skewX(-18deg); } to { transform: translateX(260px) skewX(-18deg); } }
@keyframes bmText { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes bmNod { 40% { transform: rotate(-8deg) scale(1.06); } 75% { transform: rotate(4deg); } }
/* Best-products highlight cards: bigger product picture */
.wc-media { flex: 0 0 54%; }
.wide-card .wc-media img { min-height: 100%; }
.wide-card .wc-body { padding: 14px 14px 12px; }
.wide-card .wc-hl li:nth-child(2) { display: none; }
@media (min-width: 900px) and (max-width: 1150px) { .wc-media { flex-basis: 48%; } }
@media (max-width: 480px) { .wc-media { flex-basis: 50%; } }
/* banner arrows sit together in the bottom-right corner, away from the picture's headline */ .slider-arrow{top:auto;bottom:14px;transform:none;width:38px;height:38px;border-radius:50%}.slider-arrow.prev{left:auto;right:60px}.slider-arrow.next{right:14px}.hero-main .slider-dots{left:24px;transform:none}.fab-wa{right:14px;bottom:14px;width:50px;height:50px;padding:0;gap:0;justify-content:center;overflow:hidden;white-space:nowrap;box-shadow:0 8px 22px -8px rgba(18,140,75,.65);transition:width .25s var(--ease),padding .25s var(--ease),transform .2s}.fab-wa .icon{width:26px;height:26px;flex:none}.fab-wa span{max-width:0;opacity:0;overflow:hidden;transition:max-width .25s var(--ease),opacity .2s,margin .25s;font-size:.9rem}.fab-wa:hover,.fab-wa:focus-visible{width:auto;padding:0 16px 0 12px}.fab-wa:hover span,.fab-wa:focus-visible span{max-width:220px;opacity:1;margin-left:8px}.ask-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;display:grid;gap:10px;align-content:start;scroll-margin-top:90px}.ask-form h3{margin:0;font-size:1.05rem;display:flex;gap:8px;align-items:center}.ask-form textarea,.ask-form input:not([type=checkbox]){width:100%}.ask-more summary{cursor:pointer;font-size:.9rem;color:var(--green-700);font-weight:600}.ask-grid{display:grid;gap:8px;margin:8px 0 4px}.ask-form .check-line{display:flex;gap:8px;align-items:center;font-size:.9rem}.ask-msg{margin:0;padding:10px 12px;border-radius:10px;background:#e9f7ee;color:#155e2e;font-size:.92rem}.ask-msg.err{background:#fdecec;color:#8f1d1d}.faq-page{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}.faq-side{display:grid;gap:12px;align-content:start}@media (min-width:900px){.faq-page{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.faq-side{position:sticky;top:90px}}.faq-ctas{display:flex;flex-wrap:wrap;gap:10px}.qa-list{display:grid;gap:12px;align-content:start}.qa-item{border-bottom:1px solid var(--line);padding-bottom:12px}.qa-item p{margin:0 0 4px}.qa-q b{color:var(--green-700)}.qa-a b{color:var(--gold-700)}.ha-lang-tag{display:grid;place-items:center;min-width:26px;height:22px;padding:0 4px;border:1.6px solid currentColor;border-radius:7px;font-size:.72rem;font-weight:700;letter-spacing:.02em;line-height:1}.ha-lang:hover .ha-lang-tag{color:var(--green-700)}.nav-news{position:relative;margin-left:auto;align-self:center;flex:0 1 360px;min-width:0}.nav-note{position:relative;display:block;width:100%;height:30px;overflow:hidden;color:var(--green-700);font:inherit;font-size:.86rem;font-weight:500;text-align:right;background:none;border:0;border-radius:8px;padding:0 6px;cursor:pointer}.nav-note:hover,.nav-note[aria-expanded="true"]{background:var(--green-50)}.nav-note span{position:absolute;inset:0 6px;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(100%);transition:all .5s var(--ease)}.nav-note span.active{opacity:1;transform:none}.nav-inner{flex-wrap:nowrap}@media (max-width:1180px){.nav-news{display:none}}@media (max-width:767px){.ha-lang{display:none}}@media (max-width:380px){.header-inner{gap:4px}.brand-name{font-size:1.05rem}.brand-mark{width:32px;height:32px}.menu-btn{width:36px}}@media (max-width:340px){.brand-name{font-size:.95rem}.ha-item,.header-actions .icon-btn{min-width:32px;width:32px}}.site-footer{background:#fff;color:var(--ink-2);border-top:1px solid var(--line);padding-top:56px;font-size:1.02rem}.footer-grid{display:grid;gap:34px 24px;grid-template-columns:1fr 1fr;padding-bottom:40px}.footer-brand{grid-column:1 / -1;display:grid;gap:14px;align-content:start}@media (min-width:1000px){.footer-grid{grid-template-columns:2.1fr repeat(4,1fr);gap:28px}.footer-brand{grid-column:auto;padding-right:16px}}.footer-brand .brand img{width:52px;height:52px}.footer-brand .brand-name{font-size:1.6rem}.footer-about{margin:0;line-height:1.7;color:var(--ink-2);max-width:60ch}.site-footer h3{font-size:1.18rem;font-weight:700;color:var(--ink);margin:0 0 16px}.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}.site-footer a{color:var(--ink-2);transition:color .15s}.site-footer a:hover{color:var(--green-700)}.contact-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}.contact-list .icon{width:20px;height:20px;color:var(--green-600);margin-top:3px;flex:none}.social{display:flex;gap:10px;margin-top:4px}.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--green-50);color:var(--green-700)}.social a:hover{background:var(--green-700);color:#fff}.footer-bottom{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;padding-bottom:24px;font-size:.95rem;color:var(--muted)}.footer-pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.fp-label{font-weight:600;color:var(--ink-2)}.pay-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--cream);border:1px solid var(--line);color:var(--ink-2);font-size:.9rem;font-weight:500}.pay-badge .icon{width:17px;height:17px;color:var(--green-600)}@media (max-width:767px){.site-footer{padding-top:40px;padding-bottom:72px}.footer-bottom{flex-direction:column;align-items:flex-start}}/* Checkout on phones:compact "no advance payment" badge,roomy fields */ @media (max-width:639px){.cod-banner{gap:12px;padding:12px 14px;margin-bottom:14px;align-items:flex-start}.cod-banner>span{width:38px;height:38px;border-radius:11px}.cod-banner>span .icon{width:20px;height:20px}.cod-banner strong{font-size:1rem;display:block;line-height:1.35}.cod-banner p{font-size:.88rem;line-height:1.5;margin-top:2px}.card-fieldset{padding:16px 14px}.card-fieldset legend{font-size:1.02rem}.checkout-layout{gap:16px}}a[href^="tel:"],.contact-list a[href*="wa.me"]{white-space:nowrap;letter-spacing:.02em;font-weight:500}.contact-card[href^="tel:"] div>span,.contact-card[href*="wa.me"] div>span{color:var(--ink);font-weight:600;font-size:1.05rem;letter-spacing:.02em}.btn-signin{display:inline-flex;align-items:center;padding:8px 18px;border-radius:999px;background:var(--green-700);color:#fff !important;font-weight:600;white-space:nowrap}.btn-signin:hover{background:var(--green-800,#17401f)}.wish-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.wish-save-note{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink-2);text-align:center}.wish-save-note>.icon{color:var(--green-600)}@media (max-width:480px){.wish-bar .btn{flex:1 1 100%;justify-content:center}}.news-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(420px,90vw);background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:6px}.news-item{padding:10px 12px;border-radius:10px}.news-item + .news-item{border-top:1px solid var(--line);border-radius:0}.news-item p{margin:0;color:var(--ink);line-height:1.6;font-size:.95rem}.news-item a{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:.88rem;font-weight:600;color:var(--green-700)}.news-item a .icon{width:15px;height:15px}.drawer-news{margin:0 12px 6px;padding:10px 12px;border-radius:12px;background:var(--gold-50);border:1px solid var(--gold-100);display:grid;gap:6px}.drawer-news p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}.drawer-news a{color:var(--green-700);font-weight:600}.footer-wide{max-width:1480px;padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}@media (min-width:1000px){.site-footer{padding-top:44px}.footer-grid{padding-bottom:28px}.footer-brand{gap:10px}.site-footer ul{gap:10px}}.footer-brand-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.footer-brand-head .social{margin-top:0}@media (min-width:1000px){.footer-brand .contact-list{grid-template-columns:auto auto;justify-content:start;gap:10px 28px}.footer-brand .contact-list .cl-wide{grid-column:1 / -1}}.site-footer h3{white-space:nowrap}.main-nav{background:#17301a;border-top:0}.nav-inner{gap:2px;align-items:stretch}.main-nav .nav-inner>a,.main-nav .nav-dd-btn{color:#eef4ea;font-size:1rem;font-weight:500;padding:12px 13px}.main-nav .nav-inner>a:hover,.main-nav .nav-dd-btn:hover,.main-nav .nav-inner>a.active,.main-nav .nav-dd-btn.active{color:var(--gold-300)}.main-nav .nav-inner>a::after,.main-nav .nav-dd-btn::after{background:var(--gold-500);left:13px;right:13px}.nav-offer{display:inline-flex;align-items:center;gap:6px;color:#ffb35c !important;font-weight:600 !important}.nav-offer .icon{width:17px;height:17px}.nav-offer:hover,.nav-offer.active{color:#ffc98a !important}.nav-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px}.nav-all .icon{width:15px;height:15px}.main-nav .nav-dd-panel{top:calc(100% - 2px)}@media (max-width:1320px){.nav-sc-6{display:none}}@media (max-width:1240px){.nav-sc-5{display:none}}@media (max-width:1140px){.nav-sc-4{display:none}.main-nav .nav-inner>a,.main-nav .nav-dd-btn{padding-left:10px;padding-right:10px}}@media (max-width:1070px){.nav-sc-3{display:none}}.wide-card .pc-short{-webkit-line-clamp:2;font-size:.86rem;line-height:1.45}.btn-signin.sm{padding:4px 14px;font-size:.9rem;margin-left:4px}@media (min-width:1024px){.shop-layout{grid-template-columns:272px 1fr}}.fside{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:4px 0 6px;margin-bottom:16px}.fs-head{display:flex;align-items:center;gap:10px;padding:14px 18px 12px;border-bottom:1px solid var(--line)}.fs-head h2{display:flex;align-items:center;gap:8px;margin:0;font-size:1.08rem}.fs-head h2 .icon{width:18px;height:18px;color:var(--green-600)}.fs-clear{margin-left:auto;font-size:.88rem;font-weight:600;color:var(--accent-dark,#c2410c)}.fs-close{display:none;margin-left:auto}.fs-clear + .fs-close{margin-left:4px}.fs-sec{padding:14px 18px;border-bottom:1px solid var(--line)}.fs-sec:last-of-type{border-bottom:0}.fs-sec h3{font-size:.98rem;font-weight:700;margin:0 0 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.fs-sec h3 small{font-weight:400;color:var(--muted);font-size:.8rem}.price-slider{position:relative;height:26px;margin:2px 4px 10px}.ps-track{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:4px;background:var(--line-2)}.ps-fill{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--green-600)}.price-slider input[type=range]{position:absolute;left:-2px;right:-2px;top:0;width:calc(100% + 4px);height:26px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}.price-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--green-600);box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:grab}.price-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--green-600);box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:grab}.price-slider input[type=range]::-moz-range-track{background:none}.price-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--green-100)}.ps-inputs{display:flex;align-items:center;gap:8px}.ps-inputs i{color:var(--muted);font-style:normal}.ps-inputs label{flex:1;display:flex;align-items:center;gap:4px;height:40px;padding:0 10px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--cream)}.ps-inputs label:focus-within{border-color:var(--green-500);background:#fff}.ps-inputs span{color:var(--muted);font-size:.9rem}.ps-inputs input{width:100%;border:0;background:none;font:inherit;font-size:.95rem;outline:none;-moz-appearance:textfield}.ps-inputs input::-webkit-inner-spin-button{-webkit-appearance:none}.ps-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.ps-quick button{font:inherit;font-size:.8rem;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer}.ps-quick button:hover,.ps-quick button.on{border-color:var(--green-600);color:var(--green-700);background:var(--green-50)}.fcat,.fcat-sub{list-style:none;margin:0;padding:0}.fcat{display:grid;gap:2px}.fcat-row{display:flex;align-items:center}.fcat-row .fchk{flex:1;font-weight:600}.fcat-tg{width:32px;height:32px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--muted);cursor:pointer}.fcat-tg:hover{background:var(--green-50);color:var(--green-700)}.fcat-tg .icon{width:16px;height:16px;transition:transform .2s}.fcat-g.open .fcat-tg .icon{transform:rotate(180deg)}.fcat-sub{display:none;margin:0 0 6px 13px;padding-left:12px;border-left:2px solid var(--line)}.fcat-g.open .fcat-sub{display:grid}.fchk{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px;cursor:pointer;font-size:.95rem;color:var(--ink);line-height:1.3}.fchk:hover{background:var(--green-50)}.fchk input{position:absolute;opacity:0;width:1px;height:1px}.fchk .box{flex:none;width:18px;height:18px;border:1.8px solid var(--line-2);border-radius:5px;background:#fff;display:grid;place-items:center;transition:background .15s,border-color .15s}.fchk input:checked + .box{background:var(--green-600);border-color:var(--green-600)}.fchk input:checked + .box::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}.fchk input:indeterminate + .box{border-color:var(--green-600)}.fchk input:indeterminate + .box::after{content:'';width:9px;height:2px;background:var(--green-600);border-radius:2px}.fchk input:focus-visible + .box{box-shadow:0 0 0 3px var(--green-100)}.fchk-t{flex:1;display:inline-flex;align-items:center;gap:6px;min-width:0}.fchk-t .icon{width:16px;height:16px;color:var(--green-600)}.fchk small{color:var(--muted);font-size:.78rem;background:var(--cream);padding:1px 7px;border-radius:999px}.fchk.none{opacity:.5}.fswitch{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:.95rem}.fswitch input{position:absolute;opacity:0;width:1px;height:1px}.fswitch .sw{flex:none;position:relative;width:40px;height:22px;border-radius:999px;background:var(--line-2);transition:background .2s}.fswitch .sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}.fswitch input:checked + .sw{background:var(--green-600)}.fswitch input:checked + .sw::after{transform:translateX(18px)}.fswitch input:focus-visible + .sw{box-shadow:0 0 0 3px var(--green-100)}.fswitch .icon{width:16px;height:16px;color:var(--accent);vertical-align:-3px}.fswitch small{color:var(--muted);font-weight:400}.fseg{display:flex;flex-wrap:wrap;gap:6px}.fseg label{cursor:pointer}.fseg input{position:absolute;opacity:0;width:1px;height:1px}.fseg span{display:inline-block;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line-2);font-size:.88rem;font-weight:500;color:var(--ink-2);background:#fff}.fseg input:checked + span{background:var(--green-700);border-color:var(--green-700);color:#fff}.fseg input:focus-visible + span{box-shadow:0 0 0 3px var(--green-100)}.fs-foot{padding:12px 18px 10px}@media (min-width:1024px){.fs-foot{display:none}.filter-btn{display:none !important}}.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px}.tb-right{display:flex;align-items:center;gap:8px}.toolbar-controls{display:flex;align-items:center;gap:6px}.sort-label .icon{width:18px;height:18px;color:var(--green-600)}.shop-toolbar select{min-height:40px;border-radius:10px}.result-count{font-weight:600;color:var(--ink-2)}.active-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 14px}.active-chips .filter-chip{background:var(--green-50);border-color:var(--green-100);color:var(--green-700);font-weight:500}.chip-clear{font-size:.88rem;font-weight:600;color:var(--accent-dark,#c2410c);margin-left:4px}@media (max-width:1023px){.shop-side{display:none}.shop-side.open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:88vh;overflow-y:auto;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:sheetUp .25s var(--ease)}.shop-side.open .fside{border:0;margin:0;border-radius:0}.shop-side.open .side-promise{display:none}.shop-side.open .fs-head{position:sticky;top:0;z-index:2;background:#fff;border-radius:20px 20px 0 0}.shop-side.open .fs-close{display:grid}.shop-side.open .fs-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding-bottom:calc(10px + env(safe-area-inset-bottom))}.filter-backdrop:not([hidden]){position:fixed;inset:0;z-index:85;background:rgba(15,30,15,.45)}}@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}@media (min-width:1024px){.shop-side{max-height:calc(100vh - var(--header-h) - 76px);overflow-y:auto;scrollbar-width:thin;padding-right:2px}}.combo{position:relative}.combo input{width:100%}.combo-native{position:absolute !important;opacity:0;pointer-events:none;height:1px !important;min-height:0 !important;width:1px !important;padding:0 !important;border:0 !important}.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-lg)}.combo-list li{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.95rem;line-height:1.35}.combo-list li:hover,.combo-list li.on{background:var(--green-50);color:var(--green-700)}.combo-list li.city::after{content:'city';margin-left:6px;font-size:.7rem;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--gold-100);color:var(--gold-800)}.combo-list li.none{color:var(--muted);cursor:default;font-size:.88rem}.combo-list li.none:hover{background:none;color:var(--muted)}.field input:disabled{background:var(--cream);cursor:not-allowed}.label-preview{margin-top:14px;border:1.5px dashed var(--green-300);border-radius:var(--radius-sm);padding:12px 14px;background:#fbfdf9}.lp-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px;font-size:.92rem}.lp-head .icon{width:18px;height:18px;color:var(--green-600)}.lp-head small{color:var(--muted)}.lp-card{display:grid;gap:2px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:8px;font-family:'Poppins',Arial,sans-serif;font-size:.95rem;color:var(--ink)}.lp-card[lang="bn"]{font-family:var(--font-body)}.lp-lang{display:inline-flex;margin-left:auto;padding:2px;border:1px solid var(--line-2);border-radius:999px;background:#fff}.lp-lang[hidden],.lpv .lp-card[hidden]{display:none}.lpv .lp-lang{margin:0 0 8px}.lp-lang button{border:0;background:none;font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);padding:3px 10px;border-radius:999px;cursor:pointer}.lp-lang button.on{background:var(--green-700);color:#fff}.lp-card small{font-size:.7rem;letter-spacing:.12em;color:var(--muted);font-weight:700}.lp-card b{font-size:1.08rem}.lp-place{font-weight:700;text-transform:uppercase;letter-spacing:.02em}.lp-edit{margin-top:8px;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--green-700);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;padding:4px 0}.lp-edit .icon{width:15px;height:15px}.lp-fix{display:grid;gap:10px;margin-top:10px}.lp-fix label{display:grid;gap:4px;font-size:.88rem;font-weight:600}.lp-fix input,.lp-fix textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:10px;font:inherit;font-family:'Poppins',Arial,sans-serif}.lp-fix[hidden],.lp-edit[hidden]{display:none}.success-card .label-preview,.success-card .lp-card{text-align:left}.lp-phone{margin-top:4px;font-size:.95rem}.lp-phone b{font-size:1.02rem}.combo-list li.other{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--green-700);font-weight:600}.other-input{margin-top:8px;width:100%}.other-input[hidden]{display:none}.pw-meter{margin-top:6px;display:grid;gap:4px}.pw-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.pw-bars i{height:5px;border-radius:3px;background:var(--line-2);transition:background .2s}.pw-meter[data-lv="1"] .pw-bars i:nth-child(-n+1){background:#dc2626}.pw-meter[data-lv="2"] .pw-bars i:nth-child(-n+2){background:#f59e0b}.pw-meter[data-lv="3"] .pw-bars i:nth-child(-n+3){background:#65a30d}.pw-meter[data-lv="4"] .pw-bars i{background:var(--green-600)}.pw-txt{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;color:var(--muted)}.pw-txt b{font-weight:700}.pw-meter[data-lv="1"] .pw-txt b{color:#dc2626}.pw-meter[data-lv="2"] .pw-txt b{color:#b45309}.pw-meter[data-lv="3"] .pw-txt b{color:#4d7c0f}.pw-meter[data-lv="4"] .pw-txt b{color:var(--green-700)}.pw-tip{font-size:.8rem;color:var(--muted);line-height:1.45}.otl{list-style:none;margin:16px 0;padding:0}.otl li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:12px;padding-bottom:18px}.otl li::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line-2)}.otl li:last-child::before{display:none}.otl li.done::before{background:var(--green-500)}.otl-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);background:#fff;display:grid;place-items:center;color:#fff}.otl-dot .icon{width:15px;height:15px}.otl li.done .otl-dot{background:var(--green-600);border-color:var(--green-600)}.otl li.current .otl-dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-100,#ffedd5);background:#fff}.otl-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:28px;padding-top:3px}.otl li:not(.done):not(.current) .otl-title b{color:var(--muted);font-weight:500}.otl li.current .otl-title b{color:var(--accent-dark,#c2410c)}.otl-title small{color:var(--muted);font-size:.82rem}.otl-note{margin:4px 0 0;font-size:.9rem;color:var(--ink-2);display:flex;gap:6px;align-items:flex-start}.otl-note .icon{width:15px;height:15px;color:var(--green-600);margin-top:3px;flex:none}.otl-ship{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--green-50);font-size:.9rem}.otl-ship .mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em}.track-signin{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:12px;margin:6px 0 14px;color:var(--ink-2);font-size:.94rem}.track-signin>.icon{color:var(--green-600)}.track-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.care-note{display:flex;align-items:flex-start;gap:8px;margin:8px 0 14px;padding:10px 12px;border-radius:10px;background:#fff7ed;color:#9a3412;font-size:.92rem;line-height:1.5}.care-note .icon{width:16px;height:16px;flex:none;margin-top:3px;color:var(--accent)}.care-note.center{justify-content:center;max-width:560px;margin:10px auto 0}.care-note.small{font-size:.85rem;padding:8px 10px}.acc-who{display:flex;align-items:center;gap:14px}.acc-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--green-50);border:2px solid var(--green-100);flex:none}.acc-avatar img{width:100%;height:100%;object-fit:cover}.acc-avatar svg{width:34px;height:34px;fill:none;stroke:var(--green-600);stroke-width:2.4;stroke-linecap:round}.acc-avatar.lg{width:84px;height:84px}.acc-avatar.lg svg{width:50px;height:50px}.acc-nudge{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 14px;border:1px solid var(--gold-100);background:var(--gold-50);border-radius:var(--radius-sm)}.nudge-ring{--p:0;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green-600) calc(var(--p) * 1%),var(--line-2) 0)}.nudge-ring span{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--green-700)}.nudge-t{flex:1;display:grid;gap:2px;min-width:0}.nudge-t small{color:var(--ink-2);font-size:.84rem}.acc-nudge form{display:contents}.acc-tabs{display:flex;gap:4px;overflow-x:auto;margin:0 0 16px;border-bottom:1px solid var(--line);scrollbar-width:none}.acc-tabs a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;color:var(--ink-2);font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}.acc-tabs a .icon{width:17px;height:17px}.acc-tabs a.on{color:var(--green-700);border-bottom-color:var(--gold-500)}.tab-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:.72rem}.acc-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:10px;font-weight:600;font-size:.92rem}a.acc-order{color:inherit;transition:border-color .15s,background .15s}a.acc-order:hover{border-color:var(--green-300);background:var(--green-50)}.link-like{color:var(--green-700);font-weight:600}.od-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}.od-head small{display:block;color:var(--muted);font-size:.78rem}.od-items{list-style:none;margin:0;padding:0}.od-items li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.od-items img,.od-noimg{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--cream);display:grid;place-items:center}.od-name{display:grid;gap:2px;min-width:0}.od-name small{color:var(--muted)}.od-sum{display:grid;gap:6px;margin-top:12px}.od-sum>div{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2)}.od-sum .disc{color:var(--green-700)}.od-sum .tot{padding-top:8px;border-top:2px dashed var(--line-2);color:var(--ink);font-size:1.05rem}.od-sum .tot b{color:var(--green-700);font-size:1.25rem}.od-addr{margin:0 0 10px;line-height:1.6;color:var(--ink-2)}.lp-card.small{font-size:.85rem;padding:10px 12px}.acc-help{display:grid;gap:8px}.privacy-note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;margin-bottom:14px;border-radius:10px;background:var(--green-50);color:var(--green-800,#24521f);font-size:.9rem;line-height:1.5}.privacy-note .icon{width:17px;height:17px;flex:none;margin-top:2px;color:var(--green-600)}.pf-form{display:grid;gap:14px}.pf-photo{display:flex;align-items:center;gap:14px}.pf-photo>div{display:grid;gap:6px;justify-items:start}.pf-upload{cursor:pointer}.pf-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.pf-set{border:0;padding:0;margin:0}.pf-set legend{font-weight:600;font-size:.94rem;margin-bottom:8px;padding:0}.addr-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-bottom:14px}.addr-card{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:#fff;display:grid;gap:6px;align-content:start}.addr-card.is-default{border-color:var(--green-400,#6aa84f);background:#fbfdf9}.addr-card p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.55}.addr-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.addr-badge{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--green-600);color:#fff}.addr-badge .icon{width:12px;height:12px}.addr-act{display:flex;flex-wrap:wrap;gap:4px}.addr-act form{display:inline}.addr-add{place-items:center;place-content:center;min-height:120px;border-style:dashed;color:var(--green-700);font-weight:600;display:flex;gap:6px}.addr-form{display:grid;gap:12px;padding-top:12px;border-top:1px solid var(--line)}.addr-form h3{margin:0;font-size:1.02rem}.addr-form-act{display:flex;gap:8px}.rv-sub{font-size:.98rem;margin:6px 0 8px}.rv-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}.rv-list li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px}.rv-list img{width:48px;height:48px;border-radius:8px;object-fit:cover}.rv-list div{display:grid;min-width:0}.rv-list small{color:var(--muted)}.rv-store{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--gold-50);border:1px solid var(--gold-100)}.rv-store>div{display:grid;gap:2px}.rv-store small{color:var(--ink-2)}.saved-addr{margin-bottom:14px}.sa-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:.94rem}.sa-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.sa-opt{position:relative;cursor:pointer}.sa-opt input{position:absolute;opacity:0;width:1px;height:1px}.sa-opt span{display:grid;gap:2px;height:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;font-size:.9rem}.sa-opt span small{color:var(--muted);font-size:.8rem;line-height:1.4}.sa-opt input:checked + span{border-color:var(--green-600);background:var(--green-50);box-shadow:0 0 0 3px var(--green-100)}.sa-opt input:focus-visible + span{box-shadow:0 0 0 3px var(--green-100)}.sa-new span{place-content:center;color:var(--green-700)}.sa-new .icon{width:15px;height:15px;vertical-align:-2px}@media (max-width:560px){.acc-nudge{flex-wrap:wrap}.nudge-t{flex-basis:calc(100% - 60px)}.od-items li{grid-template-columns:48px 1fr}.od-line{grid-column:2}.rv-list li{grid-template-columns:48px 1fr}.rv-list li .btn{grid-column:1 / -1}}.pf-photo label.pf-upload{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0}.pf-photo label.check-line{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-weight:500;margin:0}.pf-photo label.check-line input{width:auto;min-height:0}.deal-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-bottom:14px}.deal-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid #fed7aa;background:linear-gradient(135deg,#fff7ed,#fff);color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}.deal-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 20px -14px rgba(217,98,10,.6)}.deal-card.on{border-color:var(--accent);background:linear-gradient(135deg,#ffedd5,#fff7ed);box-shadow:0 0 0 3px #ffedd5}.deal-card.other{border-color:var(--line-2);background:#fff}.deal-card.other.on{border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100);background:var(--green-50)}.dc-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#fff}.deal-card.other .dc-ic{background:var(--green-600)}.dc-ic .icon{width:20px;height:20px}.dc-t{display:grid;gap:2px;min-width:0}.dc-t b{font-size:1rem;line-height:1.3}.dc-t em{font-style:normal;font-weight:700;color:var(--accent-dark,#c2410c);font-size:.95rem}.dc-t small{color:var(--muted);font-size:.8rem}.deal-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,#fff7ed,#fffbeb);border:1px solid #fed7aa;color:var(--ink-2);font-size:.92rem}.deal-strip>.icon{color:var(--accent);flex:none}.deal-strip span{flex:1;min-width:0}.deal-strip em{font-style:normal;font-weight:700;color:var(--accent-dark,#c2410c);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.deal-strip em .icon{width:15px;height:15px}.fdeal{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}.fdeal h3{font-size:.9rem;margin:0 0 6px}.fradio{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px;cursor:pointer;font-size:.93rem}.fradio:hover{background:var(--green-50)}.fradio input{position:absolute;opacity:0;width:1px;height:1px}.fradio .dot{flex:none;width:18px;height:18px;border-radius:50%;border:1.8px solid var(--line-2);background:#fff;display:grid;place-items:center}.fradio input:checked + .dot{border-color:var(--accent)}.fradio input:checked + .dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--accent)}.fradio input:focus-visible + .dot{box-shadow:0 0 0 3px #ffedd5}.fradio em{font-style:normal;font-size:.8rem;font-weight:700;color:var(--accent-dark,#c2410c);margin-left:4px}.fradio small{color:var(--muted);font-size:.78rem;background:var(--cream);padding:1px 7px;border-radius:999px}.nav-live{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:2px;border-radius:999px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;animation:livePulse 2s ease-in-out infinite}@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(240,122,26,.55)}50%{box-shadow:0 0 0 5px rgba(240,122,26,0)}}@media (prefers-reduced-motion:reduce){.nav-live{animation:none}}.deal-card.soon{border-style:dashed;border-color:var(--line-2);background:#fff;opacity:.85;cursor:default}.deal-card.soon:hover{transform:none;box-shadow:none}.deal-card.soon .dc-ic{background:var(--muted)}.deal-card.soon em{color:var(--ink-2)}.m-catbar{display:none;background:#17301a}@media (max-width:1023px){.m-catbar{display:block}}.m-catbar-in{display:flex;gap:4px;overflow-x:auto;padding:6px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}.m-catbar-in::-webkit-scrollbar{display:none}.m-catbar a{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;color:#eef4ea;font-size:.9rem;font-weight:500;white-space:nowrap;scroll-snap-align:start}.m-catbar a.on{background:rgba(255,255,255,.14);color:var(--gold-300)}.m-catbar .mc-offer{color:#ffb35c;font-weight:700;background:rgba(240,122,26,.16)}.m-catbar .mc-offer .icon{width:15px;height:15px}.m-catbar .nav-live{margin-left:2px}.drawer-nav a.drawer-offer{color:var(--accent-dark,#c2410c);font-weight:700;background:#fff7ed}.drawer-nav a.drawer-offer .icon{color:var(--accent)}.drawer-nav a.drawer-offer .nav-live{margin-left:auto}@media (min-width:768px) and (max-width:1023px){.ha-track{display:none !important}.header-inner .search-form{min-width:0;flex:1}}.deal-card{--dc-bg:#fff7ed;--dc-line:#fed7aa;--dc-ic:var(--accent);--dc-txt:#c2410c;--dc-ring:#ffedd5;background:linear-gradient(135deg,var(--dc-bg),#fff);border-color:var(--dc-line)}.deal-card .dc-ic{background:var(--dc-ic)}.deal-card .dc-t em{color:var(--dc-txt)}.deal-card:hover,.deal-card.on{border-color:var(--dc-ic)}.deal-card.on{background:linear-gradient(135deg,var(--dc-ring),var(--dc-bg));box-shadow:0 0 0 3px var(--dc-ring)}.deal-card.dc-urgent{--dc-bg:#fef2f2;--dc-line:#fecaca;--dc-ic:#dc2626;--dc-txt:#b91c1c;--dc-ring:#fee2e2}.deal-card.dc-urgent small{color:#b91c1c;font-weight:600}.deal-card.dc-soon{--dc-bg:#fff7ed;--dc-line:#fed7aa;--dc-ic:#ea580c;--dc-txt:#c2410c;--dc-ring:#ffedd5}.deal-card.dc-week{--dc-bg:#fefce8;--dc-line:#fde68a;--dc-ic:#ca8a04;--dc-txt:#a16207;--dc-ring:#fef9c3}.deal-card.dc-long{--dc-bg:#f0fdf4;--dc-line:#bbf7d0;--dc-ic:#16a34a;--dc-txt:#15803d;--dc-ring:#dcfce7}.deal-card.other{--dc-bg:#f8fafc;--dc-line:var(--line-2);--dc-ic:#475569;--dc-txt:#334155;--dc-ring:#e2e8f0}@media (max-width:560px){.deal-cards{grid-template-columns:1fr 1fr;gap:8px}.deal-card{padding:10px;gap:8px}.dc-ic{width:30px;height:30px;border-radius:8px}.dc-ic .icon{width:16px;height:16px}.dc-t b{font-size:.9rem}.dc-t small{font-size:.74rem}}fieldset{min-width:0}.pd-form{grid-template-columns:minmax(0,1fr)}/* Product buy row:modern quantity stepper + compact "add to cart",always side by side;"Order now" stays large */ .pd-buy{display:flex;flex-wrap:nowrap;align-items:stretch;gap:10px}.pd-buy>*{min-width:0}.pd-buy .qty{flex:none;height:52px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}.pd-buy .qty button{width:42px;height:100%;border-radius:0;color:var(--green-700);transition:background .15s}.pd-buy .qty button:hover{background:var(--green-50)}.pd-buy .qty button:active{background:var(--green-100)}.pd-buy .qty input{width:40px;height:100%;font-size:1.12rem;font-weight:700;color:var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line)}.pd-buy .btn.grow{flex:1 1 auto;height:52px;padding:0 12px;gap:6px;border-radius:14px;white-space:nowrap;font-weight:700;font-size:1.02rem}.pd-buy .btn.grow .icon{width:19px;height:19px}.pd-form .btn-primary.btn-block{min-height:54px;white-space:nowrap;border-radius:14px;font-size:1.08rem;letter-spacing:.01em;box-shadow:0 10px 22px -12px rgba(31,90,44,.6)}@media (max-width:360px){.pd-buy{gap:8px}.pd-buy .qty button{width:38px}.pd-buy .qty input{width:34px}.pd-buy .btn.grow{padding:0 8px;font-size:.96rem}.pd-buy .btn.grow .icon{width:17px;height:17px}}.drawer-panel{display:flex;flex-direction:column}.drawer-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}.drawer-nav{overflow:visible}.dh-lang{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;border:1.5px solid var(--line-2);font-size:.86rem;font-weight:600;color:var(--ink)}.dh-lang .icon{width:15px;height:15px;color:var(--green-600)}.drawer-head .dh-lang + .icon-btn{margin-left:4px}.dq-row{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px 12px 6px}.dq-row a{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 2px;border-radius:12px;color:var(--ink-2);font-size:.74rem;font-weight:500;text-align:center;line-height:1.2}.dq-row a:hover{background:var(--green-50);color:var(--green-700)}.dq-row .icon{width:21px;height:21px;color:var(--green-700)}.dq-row span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dq-row b{position:absolute;top:3px;right:calc(50% - 20px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:.66rem;display:grid;place-items:center}.dq-row a.signed .icon{color:var(--green-600)}.drawer-search{display:flex;margin:4px 12px 8px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--cream);overflow:hidden}.drawer-search input{flex:1;min-width:0;border:0;background:none;padding:9px 14px;font:inherit;font-size:.95rem;outline:none}.drawer-search button{border:0;background:var(--green-700);color:#fff;width:42px;display:grid;place-items:center;cursor:pointer}.drawer-search button .icon{width:18px;height:18px}.dpop{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 4px}.drawer-nav .dpop a{padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:.95rem;background:#fff}.drawer-nav .dpop a .icon{width:17px;height:17px}.drawer-nav a.drawer-all{color:var(--green-700);font-weight:700}.drawer-nav a.drawer-all .icon:last-child{margin-left:auto;width:16px;height:16px}.drawer-help{margin-top:6px;border-top:1px solid var(--line);padding-top:4px}.drawer-news{font-size:.86rem}.drawer-scroll .drawer-nav{flex:none}.home-news{display:none;align-items:center;gap:8px;margin:10px 0 0;padding:8px 12px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;font-size:.88rem;color:var(--ink-2)}@media (max-width:1180px){.home-news{display:flex}}.home-news>.icon{width:17px;height:17px;color:var(--accent);flex:none}.hn-rot{position:relative;flex:1;min-width:0;height:2.8em;overflow:hidden}.hn-rot span{position:absolute;inset:0;display:flex;align-items:center;line-height:1.4;opacity:0;transform:translateY(100%);transition:all .5s var(--ease)}.hn-rot span.active{opacity:1;transform:none}.hn-rot a{color:var(--accent-dark,#c2410c);font-weight:600}/* Product cards:quantity + "add to cart" perfectly on one line,same height,same modern style as the product page */ .pc-buy .btn{margin-top:0;min-height:0}.pc-row{align-items:center}.pc-qty{height:38px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff}.pc-qty button{width:30px;height:100%;color:var(--green-700);font-size:1.05rem;line-height:1}.pc-qty input{width:30px;height:100%;font-weight:700;border-left:1px solid var(--line);border-right:1px solid var(--line)}.pc-cart,.pc-buynow{height:38px;border-radius:10px}.product-card .pc-media{aspect-ratio:1 / 1}.product-card .pc-media img{width:100%;height:100%;object-fit:cover}.pc-deal{display:flex;align-items:center;gap:8px;padding:7px 10px;margin:0;border-top:1px solid var(--line);border-bottom:1px dashed var(--line);--pd-bg:#fff7ed;--pd-ic:#ea580c;--pd-txt:#9a3412;background:var(--pd-bg);color:var(--pd-txt)}.pc-deal.tone-urgent{--pd-bg:#fef2f2;--pd-ic:#dc2626;--pd-txt:#991b1b}.pc-deal.tone-soon{--pd-bg:#fff7ed;--pd-ic:#ea580c;--pd-txt:#9a3412}.pc-deal.tone-normal{--pd-bg:#f0fdf4;--pd-ic:#16a34a;--pd-txt:#166534}.pcd-off{flex:none;padding:3px 8px;border-radius:8px;background:var(--pd-ic);color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.01em}.pcd-t{display:grid;min-width:0;line-height:1.25}.pcd-t b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pcd-t small{display:flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden}.pcd-t small .icon{width:12px;height:12px;flex:none}.pc-deal.tone-urgent .pcd-t small{animation:dealBlink 1.6s ease-in-out infinite}@keyframes dealBlink{50%{opacity:.65}}@media (prefers-reduced-motion:reduce){.pc-deal.tone-urgent .pcd-t small{animation:none}}.product-card .pc-price del{margin-left:6px}.pc-return{display:flex;align-items:center;gap:5px;margin:0;font-size:.78rem;color:var(--green-700);font-weight:600}.pc-return .icon{width:13px;height:13px}.pc-buy{display:grid;gap:8px;margin-top:auto}.pc-add{width:100%;height:44px;margin:0 !important;border-radius:12px;background:var(--green-700);color:#fff;font-weight:700;font-size:.98rem;gap:8px;box-shadow:0 8px 18px -12px rgba(31,90,44,.7)}.pc-add:hover{background:var(--green-800);color:#fff}.pc-add .icon{width:18px;height:18px}.pc-add.loading{opacity:.7;pointer-events:none}.pc-step{display:grid;grid-template-columns:44px 1fr 44px;align-items:stretch;height:44px;border-radius:12px;border:1.5px solid var(--green-600);background:var(--green-50);overflow:hidden}.pc-step[hidden]{display:none}.pc-step button{border:0;background:#fff;color:var(--green-700);display:grid;place-items:center;cursor:pointer;transition:background .15s}.pc-step button:hover{background:var(--green-100)}.pc-step button:disabled{opacity:.5}.pc-step button .icon{width:18px;height:18px}.pc-step .st-qty{display:flex;align-items:center;justify-content:center;gap:4px;color:var(--green-800,#24521f)}.pc-step .st-qty b{font-size:1.1rem}.pc-step .st-qty small{font-size:.74rem;color:var(--green-700)}.pc-step .st-trash{display:none}.pc-step.is-one .st-minus{display:none}.pc-step.is-one .st-trash{display:grid;color:#b91c1c}.pc-notify{height:44px;border-radius:12px}@media (max-width:420px){.pc-add{font-size:.92rem;height:42px}.pc-step{height:42px;grid-template-columns:40px 1fr 40px}.pc-step .st-qty small{display:none}.pcd-t b{font-size:.8rem}}.pd-return{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin:4px 0 10px;padding:7px 12px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;font-size:.92rem}.pd-return .icon{width:16px;height:16px}.pd-return span{color:#15803d;font-size:.85rem}.pc-buy{grid-template-columns:minmax(0,1fr)}.pc-buy>*,.pc-opt{min-width:0;max-width:100%}.pc-add span{overflow:hidden;text-overflow:ellipsis}@media (max-width:420px){.pc-add{gap:5px;padding:0 6px}.pc-add .icon{width:16px;height:16px}.pcd-off{padding:2px 6px;font-size:.8rem}.pc-deal{gap:6px;padding:6px 8px}}/* Card:ONE green button — "Add to cart" morphs into 🗑/− · qty · + in the same place */ .pc-cta{position:relative;height:44px;border-radius:12px;background:var(--green-700);box-shadow:0 8px 18px -12px rgba(31,90,44,.7);overflow:hidden;transition:background .2s}.pc-cta.is-added{background:var(--green-800,#24521f)}.pc-cta .pc-add{position:absolute;inset:0;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;box-shadow:none;color:#fff;font:inherit;font-weight:700;font-size:.98rem;cursor:pointer}.pc-cta .pc-add:hover{background:rgba(255,255,255,.08)}.pc-cta .pc-step{position:absolute;inset:0;height:100%;border:0;border-radius:0;background:transparent;grid-template-columns:46px 1fr 46px;animation:ctaMorph .22s var(--ease)}.pc-cta .pc-step button{background:rgba(255,255,255,.1);color:#fff}.pc-cta .pc-step button:hover{background:rgba(255,255,255,.22)}.pc-cta .pc-step .st-qty,.pc-cta .pc-step .st-qty b{color:#fff}.pc-cta .pc-step .st-qty small{color:rgba(255,255,255,.8)}.pc-cta .pc-step.is-one .st-trash{color:#fecaca}.pc-cta .pc-add{animation:ctaMorph .22s var(--ease)}@keyframes ctaMorph{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.pc-cta .pc-step,.pc-cta .pc-add{animation:none}}@media (max-width:420px){.pc-cta{height:42px}.pc-cta .pc-step{grid-template-columns:40px 1fr 40px}}.pc-cta .pc-add[hidden],.pc-cta .pc-step[hidden]{display:none}.pc-cta{height:46px;border-radius:14px;background:linear-gradient(135deg,#2f8a45 0%,var(--green-700) 55%,#1d5a2c 100%);box-shadow:0 10px 22px -14px rgba(31,90,44,.85),inset 0 1px 0 rgba(255,255,255,.18)}.pc-cta .pc-add{gap:9px;font-size:1rem;letter-spacing:.01em}.pc-cta .pc-add .icon{width:19px;height:19px;transition:transform .2s}.pc-cta .pc-add:hover .icon{transform:translateX(-2px) rotate(-8deg)}.pc-cta:hover{box-shadow:0 12px 26px -14px rgba(31,90,44,.95),inset 0 1px 0 rgba(255,255,255,.2)}.pc-cta.is-added{background:#fff;box-shadow:inset 0 0 0 2px var(--green-600),0 8px 18px -14px rgba(31,90,44,.6)}.pc-cta .pc-step{grid-template-columns:48px 1fr 48px}.pc-cta .pc-step button{background:var(--green-600);color:#fff}.pc-cta .pc-step button:hover{background:var(--green-700)}.pc-cta .pc-step button:first-child{border-radius:14px 0 0 14px}.pc-cta .pc-step button:last-child{border-radius:0 14px 14px 0}.pc-cta .pc-step .st-qty{background:#fff}.pc-cta .pc-step .st-qty,.pc-cta .pc-step .st-qty b{color:var(--green-800,#24521f)}.pc-cta .pc-step .st-qty b{font-size:1.18rem;font-weight:800}.pc-cta .pc-step.is-one button:first-child{background:#fff1f2;color:#dc2626;box-shadow:inset -1px 0 0 #fecdd3}.pc-cta .pc-step.is-one button:first-child:hover{background:#ffe4e6}.pc-cta .pc-step.is-one .st-trash{color:#dc2626}@media (max-width:420px){.pc-cta{height:42px}.pc-cta .pc-step{grid-template-columns:42px 1fr 42px}}.home-row .section-head{align-items:flex-end}.hr-sub{margin:2px 0 0;color:var(--muted);font-size:.92rem}.offer-row .eyebrow{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.offer-row .eyebrow>.icon{display:none}.or-off{padding:3px 10px;border-radius:999px;color:#fff;font-size:.85rem}.or-when{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:.85rem}.or-when .icon{width:14px;height:14px}.offer-row.tone-urgent .or-off{background:#dc2626}.offer-row.tone-urgent .or-when{color:#b91c1c}.offer-row.tone-soon .or-off{background:#ea580c}.offer-row.tone-soon .or-when{color:#c2410c}.offer-row.tone-normal .or-off{background:#16a34a}.offer-row.tone-normal .or-when{color:#15803d}.offer-row{background:linear-gradient(180deg,#fffaf3,transparent 70%)}.rec-row .eyebrow{color:var(--accent-dark,#c2410c)}.cat-slider.wide-slider{grid-auto-columns:88%}@media (min-width:700px){.cat-slider.wide-slider{grid-auto-columns:calc((100% - 14px) / 2)}}@media (min-width:1024px){.cat-slider.wide-slider{grid-auto-columns:calc((100% - 2 * 16px) / 3);gap:16px}}.wide-card{display:grid !important;grid-template-columns:42% 1fr;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}.wide-card:hover{border-color:var(--green-300)}.wide-card .wc-media{position:relative;display:block;flex:none;background:var(--cream-2);min-height:100%}.wide-card .wc-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;min-height:220px}.wc-off{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:8px;color:#fff;font-weight:800;font-size:.85rem;background:#ea580c}.wc-off.tone-urgent{background:#dc2626}.wc-off.tone-normal{background:#16a34a}.wc-badge{position:absolute;top:10px;left:10px}.wide-card .wc-body{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;min-width:0}.wide-card .wish-btn{position:absolute;top:8px;right:8px;left:auto;width:34px;height:34px}.wide-card .pc-title{padding-right:34px;font-size:1rem;font-weight:700;min-height:0}.wc-deal{display:grid;gap:1px;padding:5px 8px;border-radius:8px;font-size:.78rem;line-height:1.3;background:#fff7ed;color:#9a3412}.wc-deal small{display:flex;align-items:center;gap:4px;font-weight:600}.wc-deal small .icon{width:12px;height:12px}.wc-deal.tone-urgent{background:#fef2f2;color:#991b1b}.wc-deal.tone-normal{background:#f0fdf4;color:#166534}.wide-card .pc-price strong{font-size:1.25rem}.wide-card .pc-buy{margin-top:auto;gap:6px}.pc-buynow2{height:40px;border:0;border-radius:12px;background:linear-gradient(135deg,#f59e0b,var(--accent));color:#fff;font:inherit;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-shadow:0 8px 18px -12px rgba(217,98,10,.8)}.pc-buynow2:hover{filter:brightness(1.05)}.pc-buynow2 .icon{width:16px;height:16px}.pc-buynow2.loading{opacity:.7;pointer-events:none}.product-card .pc-title{display:block;-webkit-line-clamp:unset;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.product-card .pc-body{gap:4px}.product-card .pc-price{margin-top:0}.product-card{--oc:#16a34a}.pc-tags{--oc:#16a34a;display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 6px 6px 8px;border-bottom:1px solid var(--line);background:#fff}.pc-tags[style]{background:color-mix(in srgb,var(--oc) 7%,#fff);border-bottom-color:color-mix(in srgb,var(--oc) 22%,#fff)}.pct-chips{flex:1;min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden}.tag{flex:none;display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 8px;border-radius:999px;font-size:.74rem;font-weight:700;line-height:1.25;white-space:nowrap}.tag-off{background:var(--oc);color:#fff;font-size:.8rem;font-weight:800;padding:3px 9px}.tag-offer{flex:1 1 auto;min-width:0;display:grid;gap:0;padding:2px 6px;border-radius:8px;color:color-mix(in srgb,var(--oc) 75%,#000);background:transparent}.tag-offer b{font-size:.76rem;overflow:hidden;text-overflow:ellipsis}.tag-offer small{display:flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;opacity:.9;overflow:hidden}.tag-offer small .icon{width:11px;height:11px;flex:none}.tag-badge{background:#fef3c7;color:#92400e}.tag-digital{background:#ede9fe;color:#5b21b6}.tag-cat{background:var(--cream);color:var(--muted);font-weight:600}.pc-tags .wish-btn{position:static;flex:none;width:30px;height:30px;box-shadow:none;background:#fff;border:1px solid var(--line)}.pc-tags .wish-btn .icon{width:16px;height:16px}.product-card .pc-media{border-radius:0}.pc-deal{display:none !important}@media (max-width:420px){.pc-tags{gap:4px;padding:5px 5px 5px 6px;min-height:36px}.tag-off{font-size:.74rem;padding:2px 7px}.tag-offer b{font-size:.7rem}.tag-offer small{font-size:.64rem}.pc-tags .wish-btn{width:28px;height:28px}}.top-grid{display:grid;gap:16px;grid-template-columns:1fr}@media (min-width:760px){.top-grid{grid-template-columns:1fr 1fr;gap:18px}}.top-grid .wide-card{grid-template-columns:50% 1fr;grid-template-rows:auto 1fr}.top-grid .wide-card>.pc-tags{grid-column:1 / -1}.top-grid .wide-card .wc-media img{min-height:260px}@media (min-width:1100px){.top-grid .wide-card .wc-media img{min-height:300px}}.wide-card>.pc-tags{grid-column:1 / -1}.wide-card .wc-body .wish-btn{display:none}.wide-card .pc-title{padding-right:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:1.05rem}@media (max-width:420px){.top-grid .wide-card{grid-template-columns:46% 1fr}.top-grid .wide-card .wc-media img{min-height:220px}}.offer-row{--oc:#ea580c;background:linear-gradient(180deg,color-mix(in srgb,var(--oc) 6%,#fff),transparent 75%)}.offer-row .or-off{background:var(--oc) !important}.offer-row .or-when{color:color-mix(in srgb,var(--oc) 80%,#000) !important}.offer-row h2{color:color-mix(in srgb,var(--oc) 70%,#1a2e1a)}.group-row .eyebrow{color:var(--green-700)}.more-wrap{display:flex;justify-content:center;margin-top:18px}.more-wrap[hidden]{display:none}.more-btn{min-width:min(100%,320px);height:52px;border-radius:14px;border:2px solid var(--green-600);background:#fff;color:var(--green-700);font-weight:700;font-size:1.02rem;gap:8px}.more-btn:hover{background:var(--green-50)}.more-btn.loading{opacity:.6;pointer-events:none}.home-row,.more-products,.values,.section-tint{content-visibility:auto;contain-intrinsic-size:auto 720px}/* ---------- Product page:bold offer box in the offer's colour ---------- */
.pd-offer-box { --oc: #ea580c; display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--oc) 35%, #fff); background: linear-gradient(120deg, color-mix(in srgb, var(--oc) 12%, #fff), #fff); box-shadow: 0 10px 24px -18px var(--oc); }
.pob-off { flex: none; display: grid; place-items: center; min-width: 64px; height: 52px; padding: 0 8px; border-radius: 12px; background: var(--oc); color: #fff; font-weight: 800; font-size: 1.3rem; }
.pob-t { display: grid; gap: 3px; min-width: 0; }
.pob-t b { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; color: color-mix(in srgb, var(--oc) 70%, #000); }
.pob-t b .icon { width: 17px; height: 17px; }
.pob-t span { font-size: .9rem; color: var(--ink-2); }
.pob-t small { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: color-mix(in srgb, var(--oc) 80%, #000); }
.pob-t small .icon { width: 13px; height: 13px; }
.pd-offer-box[data-deal-ends] small { animation: dealBlink 1.6s ease-in-out infinite; }
@media (max-width: 560px) {
  .pc-tags:has(.tag-offer) .tag-badge { display: none; }   /* phones: the offer wins the space */
  .pc-return { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: .74rem; }
  .pc-return .icon { vertical-align: -2px; }
}

/* ---------- Product photos: "see full view" link + viewer (big photo left, thumbnails right, zoom starts at 100%) ---------- */
.pd-fullview { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 2px; border: 0; background: none; color: var(--green-700); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pd-fullview .icon { width: 16px; height: 16px; }
.pd-fullview small { color: var(--muted); font-weight: 500; }
.pd-zoom-btn span { display: none !important; }
.lb-v2 { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(12, 20, 12, .96); color: #fff; }
.lb-v2[hidden] { display: none; }
.lb-v2 .lb-top { position: static; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(0, 0, 0, .35); }
.lb-v2 .lb-title { flex: 1; min-width: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-v2 .lb-count { color: rgba(255, 255, 255, .7); font-size: .9rem; }
.lb-v2 .lb-zoom { position: static; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px; transform: none; }
.lb-v2 .lb-btn { position: static; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-v2 .lb-btn:hover { background: rgba(255, 255, 255, .24); }
.lb-v2 .lb-btn .icon { width: 20px; height: 20px; }
.lb-pct { min-width: 58px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.lb-pct:hover { background: rgba(255, 255, 255, .12); }
.lb-v2 .lb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 132px; grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 12px; }
.lb-v2 .lb-stage { position: relative; inset: auto; min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .04); touch-action: none; cursor: grab; }
.lb-v2:not(.zoomed) .lb-stage { cursor: zoom-in; }
.lb-v2 .lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s ease-out; user-select: none; }
.lb-v2 .lb-prev, .lb-v2 .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-v2 .lb-prev { left: 10px; } .lb-v2 .lb-next { right: 10px; }
.lb-v2.single .lb-prev, .lb-v2.single .lb-next, .lb-v2.single .lb-thumbs { display: none; }
.lb-v2.single .lb-body { grid-template-columns: minmax(0, 1fr); }
.lb-thumbs { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.lb-thumbs button { flex: none; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; opacity: .65; transition: opacity .15s, border-color .15s; }
.lb-thumbs button:hover { opacity: .9; }
.lb-thumbs button.active { border-color: var(--gold-500); opacity: 1; }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .lb-v2 .lb-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 8px; }
  .lb-thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 0 4px; }
  .lb-thumbs button { width: 64px; }
  .lb-v2 .lb-title { display: none; }
  .lb-v2 .lb-top { justify-content: space-between; }
}

/* ---------- Phones: product pop-up ---------- */
.pmodal { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: var(--cream); animation: pmUp .22s var(--ease); }
.pmodal[hidden] { display: none; }
@keyframes pmUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.pm-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 4px 14px -10px rgba(0,0,0,.3); }
.pm-back { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--green-700); color: #fff; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.pm-title { flex: 1; min-width: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-full { flex: none; font-size: .82rem; font-weight: 600; color: var(--green-700); }
.pmodal iframe { flex: 1; width: 100%; border: 0; background: var(--cream); opacity: 0; transition: opacity .2s; }
.pmodal.ready iframe { opacity: 1; }
.pm-load { position: absolute; top: 52px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: pmLoad 1s linear infinite; }
.pmodal.ready .pm-load { display: none; }
@keyframes pmLoad { from { background-position: -50% 0; } to { background-position: 150% 0; } }
/* page shown inside the pop-up: no site header/footer */
.is-embed .site-header, .is-embed .m-catbar, .is-embed .main-nav, .is-embed .site-footer, .is-embed .footer-ayah, .is-embed .bottom-nav, .is-embed .fab-wa, .is-embed .float-cart, .is-embed .m-cartbar, .is-embed .breadcrumb { display: none !important; }
.is-embed main { padding-top: 0; }
.is-embed .sticky-buy { bottom: 0; }
.lb-v2 { z-index: 300; }
.lb-mode { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.lb-mode button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.lb-mode button .icon { width: 15px; height: 15px; }
.lb-mode button.on { background: #fff; color: var(--green-800, #24521f); }
.lb-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 2; }
.lb-v2.video-mode .lb-prev, .lb-v2.video-mode .lb-next, .lb-v2.video-mode .lb-zoom { visibility: hidden; }
@media (max-width: 760px) { .lb-mode button { padding: 0 9px; } }
.lb-v2 { background: #0f1a10; }
@media (max-width: 760px) {
  .lb-v2 .lb-top { gap: 6px; padding: 8px; }
  .lb-v2 .lb-count { display: none; }
  .lb-v2 .lb-btn { width: 34px; height: 34px; }
  .lb-v2 .lb-btn .icon { width: 17px; height: 17px; }
  .lb-pct { min-width: 44px; height: 30px; font-size: .8rem; }
  .lb-mode button { height: 30px; padding: 0 8px; font-size: .8rem; }
  .lb-v2 .lb-close { margin-left: auto; }
  .lb-v2.video-mode .lb-zoom { display: none; }
}
/* Product page: the same tag bar sits on top of the photo (badge, discount, offer) */
.pd-tagbar .pc-tags { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; min-height: 44px; padding: 8px 12px; }
.pd-tagbar + .pd-main { border-top-left-radius: 0; border-top-right-radius: 0; }
.pd-tagbar .tag { font-size: .8rem; }
.pd-tagbar .tag-off { font-size: .88rem; }

/* Offers: bright orange / red, a soft gloss — noticeable but clean */
.pc-tags { --oc: #f2541b; }
.pc-tags[style] { background: linear-gradient(90deg, color-mix(in srgb, var(--oc) 13%, #fff), color-mix(in srgb, var(--oc) 5%, #fff)); border-bottom-color: color-mix(in srgb, var(--oc) 28%, #fff); }
.tag-off { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--oc) 70%, #ffd27a), var(--oc) 55%, color-mix(in srgb, var(--oc) 82%, #000)); box-shadow: 0 2px 6px color-mix(in srgb, var(--oc) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.tag-off::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: tagShine 4.5s ease-in-out infinite; }
@keyframes tagShine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .tag-off::after { animation: none; display: none; } }
.tag-offer { color: color-mix(in srgb, var(--oc) 82%, #000); }
/* Product page: the one place the offer shows — a little larger */
.pd-tagbar .pc-tags[style] { min-height: 52px; padding: 9px 14px; }
.pd-tagbar .tag-off { font-size: 1rem; padding: 5px 12px; }
.pd-tagbar .tag-offer b { font-size: .92rem; }
.pd-tagbar .tag-offer small { font-size: .78rem; }
.pd-tagbar .tag-offer small .icon { width: 13px; height: 13px; }

/* Magnifier on the product photo */
.pd-main img { transition: transform .18s ease-out; }
.pd-main.zooming img { transition: transform .18s ease-out, transform-origin 0s; }
.pd-mag-hint { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--green-800); box-shadow: var(--shadow-sm); pointer-events: none; transition: opacity .15s; }
.pd-mag-hint .icon { width: 20px; height: 20px; }
.pd-main.zooming .pd-mag-hint { opacity: 0; }
@media (hover: none) { .pd-main { cursor: pointer; } .pd-main.zooming { touch-action: none; } }

/* Full view: the photo follows the mouse when magnified */
.lb-v2.zoomed .lb-stage { cursor: zoom-out; }
.lb-v2.zoomed .lb-stage img { transition: transform .1s ease-out; }

/* Checkout summary: the scrollbar never sits on the prices */
.sum-items { padding-right: 10px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sum-items::-webkit-scrollbar { width: 6px; }
.sum-items::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
.pd-tagbar .pc-tags:has(.tag-offer) .tag-badge { display: inline-flex !important; }

/* Badges (বেস্ট সেলার, খাঁটি, নতুন…) on the photo's top-right corner — the tag bar keeps its room for the offer */ .photo-badge{position:absolute;top:10px;right:10px;z-index:2;max-width:calc(100% - 20px);padding:4px 10px;border-radius:999px;background:rgba(255,251,235,.95);color:#92400e;font-size:.74rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:none}.pd-main .photo-badge{top:14px;right:14px;font-size:.85rem;padding:5px 12px;transition:opacity .15s}.pd-main.zooming .photo-badge{opacity:0}@media (max-width:420px){.photo-badge{top:7px;right:7px;font-size:.68rem;padding:3px 8px}}.tag-offer,.pc-tags[style] .tag-offer{color:var(--green-800)}.tag-offer small{color:var(--green-700)}/* Long product names:the page heading always shows the full name;the phone pop-up bar keeps only Back / Full page (the name is right below),and the full-view bar wraps it to two lines instead of "…" */ .pm-title{visibility:hidden}.lb-v2 .lb-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}/* Home "Top products":wider photo,slimmer info side */ .top-grid .wide-card{grid-template-columns:60% 1fr}.top-grid .wide-card .wc-body{padding:12px 12px 10px;gap:4px}.top-grid .wide-card .pc-title{font-size:.95rem;line-height:1.3}.top-grid .wide-card .pc-price strong{font-size:1.12rem}.top-grid .wide-card .pc-price del{font-size:.8rem}.top-grid .wide-card .pc-return{font-size:.76rem}.top-grid .wide-card select{height:36px;font-size:.82rem;padding:0 8px}.top-grid .wide-card .pc-cta{height:38px;border-radius:10px}.top-grid .wide-card .pc-cta .pc-add{font-size:.86rem;gap:6px}.top-grid .wide-card .pc-cta .pc-step{grid-template-columns:36px 1fr 36px}.top-grid .wide-card .pc-buynow2{height:36px;font-size:.84rem;border-radius:10px}@media (max-width:420px){.top-grid .wide-card{grid-template-columns:56% 1fr}.top-grid .wide-card .pc-title{font-size:.9rem}}/* Stepper (− / 🗑 · qty · +):every cell clips to the button's own corners, so no green edge shows beside the delete icon */
.pc-cta.is-added { box-shadow: 0 8px 18px -14px rgba(31, 90, 44, .6); overflow: hidden; }
.pc-cta .pc-step { border-radius: inherit; overflow: hidden; }
.pc-cta .pc-step button, .pc-cta .pc-step button:first-child, .pc-cta .pc-step button:last-child { border-radius: 0; }
.pc-cta.is-added::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); pointer-events: none; z-index: 2; }
.pc-cta .pc-step.is-one button:first-child { box-shadow: none; border-right: 1px solid #fecdd3; }

/* Share one product straight from any list: small round button on the photo's bottom-right */ .media-box{position:relative;display:block;min-width:0}.wide-card>.media-box{min-height:100%}.wide-card>.media-box>.wc-media{height:100%}.card-share{position:absolute;right:10px;bottom:10px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--green-800);box-shadow:0 2px 8px rgba(0,0,0,.14);cursor:pointer;opacity:.9;transition:opacity .15s,transform .15s}.card-share .icon{width:16px;height:16px}.card-share:hover{opacity:1;transform:scale(1.06)}@media (hover:hover) and (pointer:fine){.card-share{opacity:0}.product-card:hover .card-share,.card-share:focus-visible{opacity:1}}@media (max-width:420px){.card-share{width:30px;height:30px;right:7px;bottom:7px}.card-share .icon{width:14px;height:14px}}.combo-slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}.combo-slider::-webkit-scrollbar{display:none}@media (min-width:1000px){.combo-slider{grid-auto-columns:calc((100% - 48px) / 4)}}@media (max-width:520px){.combo-slider{grid-auto-columns:72%;gap:12px}}.combo-card{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}.combo-card:hover{transform:translateY(-3px);border-color:var(--green-300);box-shadow:0 14px 30px -18px rgba(31,90,44,.45)}.cc-media{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:2px;aspect-ratio:1;background:var(--line);overflow:hidden}.cc-media img{width:100%;height:100%;object-fit:cover;background:var(--cream-2);display:block}.cc-media.n1{grid-template-columns:1fr}.cc-media.n1 img{object-fit:contain}/* the combo's own photo: shown whole */
.cc-media.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.cc-media.n3 img:first-child { grid-row: span 2; }
.cc-off { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; color: #fff; font-size: .8rem; font-weight: 800; background: linear-gradient(135deg, #f97316, #dc2626); box-shadow: 0 3px 10px rgba(220, 38, 38, .3); }
.cc-gift { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 251, 235, .95); color: #92400e; font-size: .74rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.cc-gift .icon { width: 13px; height: 13px; }
.cc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.cc-name { font-size: 1.02rem; line-height: 1.3; }
.cc-count { color: var(--muted); font-size: .82rem; }
.cc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.cc-price strong { color: var(--green-800); font-size: 1.15rem; }
.cc-price del { color: var(--muted); font-size: .85rem; }
.cc-btn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; background: var(--green-50, #f0f7ee); color: var(--green-800); font-weight: 700; font-size: .92rem; border: 1px solid var(--green-200, #cfe5c9); }
.combo-card:hover .cc-btn { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.cc-btn .icon { width: 16px; height: 16px; }
/* combo page */
.combo-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; margin-top: 10px; }
@media (max-width: 860px) { .combo-detail { grid-template-columns: 1fr; gap: 18px; } }
.cd-media { border-radius: var(--radius); border: 1px solid var(--line); position: sticky; top: 90px; }
@media (max-width: 860px) { .cd-media { position: relative; top: 0; } }
.cd-info h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 6px; }
.cd-hint { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--green-50, #f0f7ee); color: var(--green-800); font-size: .9rem; margin: 10px 0 14px; }
.cd-hint.locked { background: #fffbeb; color: #92400e; }
.cd-hint .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cd-h { font-size: 1.05rem; margin: 0 0 8px; } .cd-h small { color: var(--muted); font-weight: 500; }
.cd-items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cd-item { display: grid; grid-template-columns: auto 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: opacity .15s, background .15s; }
.cd-item.off { opacity: .5; background: var(--cream, #faf7f0); }
.cd-item.off .cd-line { text-decoration: line-through; }
.cd-check input { position: absolute; opacity: 0; pointer-events: none; }
.cd-check { position: relative; cursor: pointer; }
.cd-box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--green-600); display: grid; place-items: center; color: #fff; background: var(--green-600); transition: background .15s; }
.cd-box .icon { width: 15px; height: 15px; }
.cd-check input:not(:checked) + .cd-box { background: #fff; color: transparent; }
.cd-check input:disabled + .cd-box { background: var(--green-700); border-color: var(--green-700); cursor: default; }
.cd-check input:focus-visible + .cd-box { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.cd-img img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--cream-2); display: block; }
.cd-txt { min-width: 0; display: grid; gap: 2px; }
.cd-name { color: var(--ink); font-weight: 600; line-height: 1.3; }
.cd-txt small { color: var(--muted); }
.cd-opt { margin-top: 4px; height: 34px; font-size: .85rem; max-width: 220px; }
.cd-line { color: var(--green-800); white-space: nowrap; }
@media (max-width: 420px) { .cd-item { grid-template-columns: auto 52px 1fr; } .cd-img img { width: 52px; height: 52px; } .cd-line { grid-column: 3; justify-self: start; font-size: .9rem; } }
.cd-sum { padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 14px; margin-bottom: 12px; background: #fff; }
.cd-min { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; } .cd-min .icon { width: 15px; height: 15px; }
.combo-note { display: flex; align-items: center; gap: 6px; color: var(--green-800); margin: 4px 0 8px; } .combo-note .icon { width: 15px; height: 15px; }
.review-cta { padding-top: 10px; padding-bottom: 30px; }
/* Return request page */
.rr-form { display: grid; gap: 12px; }
.rr-line { grid-template-columns: auto 64px 1fr auto; }
.rr-qty { display: grid; gap: 2px; text-align: center; } .rr-qty select { height: 34px; }
.rr-reasons { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rr-reasons legend { width: 100%; }
.rr-reasons .opt span { min-height: 40px; font-weight: 500; }
.rr-list { display: grid; gap: 10px; margin-bottom: 14px; }
.rr-item { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.rr-item:first-of-type { border-top: 0; }
.rr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rr-refund { display: flex; align-items: center; gap: 6px; color: var(--green-800); font-weight: 600; margin: 2px 0; } .rr-refund .icon { width: 16px; height: 16px; }
.status-pill.rs-requested { background: #fef3c7; color: #92400e; } .status-pill.rs-approved, .status-pill.rs-received { background: #e0f2fe; color: #075985; }
.status-pill.rs-refunded { background: #dcfce7; color: #166534; } .status-pill.rs-rejected { background: #fee2e2; color: #991b1b; }
.cd-min[hidden], .cd-sum .sum-row[hidden] { display: none !important; }

/* Checkout: choose which cart items go into this order */
.sel-all { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.sel-all input { width: 18px; height: 18px; accent-color: var(--green-700); }
.sel-all small { margin-left: auto; }
.sum-items li { transition: opacity .15s; }
.sum-items li.off { opacity: .45; }
.sum-items li.off strong { text-decoration: line-through; }
.sel-item { position: relative; cursor: pointer; flex: none; display: grid; place-items: center; }
.sel-item input { position: absolute; opacity: 0; pointer-events: none; }
.sel-item .cd-box { width: 22px; height: 22px; border-radius: 6px; }
.sel-item input:not(:checked) + .cd-box { background: #fff; color: transparent; }
.sel-item input:focus-visible + .cd-box { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.sel-note { display: flex; gap: 6px; align-items: flex-start; margin: -6px 0 12px; } .sel-note .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
/* Checkout: gift */
.gift-box { transition: border-color .2s, background .2s; }
.gift-box.on { border-color: #f5c27a; background: #fffcf5; }
.gift-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.gift-toggle input { width: 20px; height: 20px; margin-top: 3px; accent-color: #d9620a; flex: none; }
.gift-toggle b { display: inline-flex; align-items: center; gap: 6px; font-size: 1.02rem; color: #9a3412; }
.gift-toggle b .icon { width: 19px; height: 19px; }
.gift-toggle small { display: block; color: var(--muted); margin-top: 2px; }
.gift-fields { margin-top: 14px; display: grid; gap: 4px; }
.gift-fields .lbl { display: block; font-weight: 600; margin-bottom: 6px; }
.gift-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .gift-pay { grid-template-columns: 1fr; } }
.gift-pay .pm-option { cursor: pointer; }
.gift-wa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #ecfdf3; color: #14532d; font-size: .88rem; }
.gift-wa > .icon { width: 20px; height: 20px; color: #16a34a; flex: none; }
.gift-wa span { flex: 1 1 220px; }
.gift-pay .pm-option:not(.on) { border-color: var(--line-2); background: #fff; }
.gift-done { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: #fffcf5; border: 1px solid #f5c27a; text-align: left; display: grid; gap: 8px; }
.gift-done p { margin: 0; display: flex; gap: 6px; align-items: center; } .gift-done p .icon { width: 18px; height: 18px; color: #d9620a; }
.gift-done blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid #f5c27a; background: #fff; border-radius: 8px; font-style: italic; color: var(--ink-2); }
.gift-hint { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.gift-hint .icon { width: 15px; height: 15px; flex: none; margin-top: 3px; }
.gift-pay .pm-option, .field .gift-pay label.pm-option { display: flex; flex-direction: row; align-items: center; padding: 12px; margin: 0; font-weight: 400; }
.gift-pay .pm-option input { flex: none; margin: 0; }

/* Checkout: "Didn't forget anything?" */
.co-forgot { margin: 4px 0 14px; padding: 12px; border-radius: 14px; background: #fffbeb; border: 1px dashed #f5c27a; }
.cf-head { display: grid; gap: 1px; margin-bottom: 8px; }
.cf-head b { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: #9a3412; } .cf-head b .icon { width: 16px; height: 16px; }
.cf-head small { color: var(--muted); font-size: .8rem; }
.co-forgot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.co-forgot li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.cf-img img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--cream-2); display: block; }
.cf-txt { min-width: 0; display: grid; line-height: 1.3; }
.cf-txt a { color: var(--ink); font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-txt small { color: var(--muted); font-size: .78rem; }
.cf-add { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 9px; border: 0; background: var(--green-700); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; }
.cf-add .icon { width: 14px; height: 14px; }
.cf-add.ghost { background: #fff; color: var(--green-800); border: 1px solid var(--green-600); }
.cf-add:disabled { opacity: .6; }
/* Checkout gift: copy buttons */
.gift-copy { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 10px; }
.gift-copy small { width: 100%; color: var(--muted); font-size: .82rem; }
.chip-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: .84rem; cursor: pointer; }
.chip-btn:hover { border-color: var(--green-600); color: var(--green-800); }
.chip-btn .icon { width: 14px; height: 14px; }
.gift-fields[hidden], .gift-wa[hidden], .sel-note[hidden], .co-forgot[hidden] { display: none !important; }

/* ---------- Big screens: the page grows with the monitor and shows more products per row ----------
   Laptops (up to ~1440px) keep the current layout exactly; wider screens use the extra space instead of empty side margins. */
.top-grid > .wide-card:nth-child(n+5) { display: none !important; }   /* 2×2 on laptops and phones */
@media (min-width: 1500px) {
  .container { max-width: min(94vw, 2480px); padding-left: 24px; padding-right: 24px; }
  .toast-static { max-width: min(94vw, 2480px); }
  .footer-wide { max-width: min(96vw, 2560px); }
  .product-grid:not(.grid-2) { grid-template-columns: repeat(5, 1fr) !important; }
  .product-grid.grid-shop { grid-template-columns: repeat(4, 1fr) !important; }
  .cat-slider { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
  .cat-slider.wide-slider { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .combo-slider { grid-auto-columns: minmax(calc((100% - 4 * 16px) / 5), 1fr); }
  .fc-row { grid-auto-columns: calc((100% - 9 * 14px) / 10); }
  .shop-layout { grid-template-columns: 280px 1fr; }
  .product-detail { max-width: 1500px; margin-left: auto; margin-right: auto; }
  .checkout-layout, .cart-layout, .combo-detail { max-width: 1500px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1700px) {
  .top-grid { grid-template-columns: repeat(3, 1fr); }
  .top-grid > .wide-card:nth-child(n+5) { display: grid !important; }
  .product-grid.grid-shop { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 1900px) {
  .product-grid:not(.grid-2) { grid-template-columns: repeat(6, 1fr) !important; }
  .cat-slider { grid-auto-columns: calc((100% - 5 * 16px) / 6); }
  .combo-slider { grid-auto-columns: minmax(calc((100% - 5 * 16px) / 6), 1fr); }
}
@media (min-width: 2200px) {
  .product-grid.grid-shop { grid-template-columns: repeat(6, 1fr) !important; }
  .cat-slider { grid-auto-columns: calc((100% - 6 * 16px) / 7); }
  .cat-slider.wide-slider { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
  .product-grid:not(.grid-2):not(.grid-shop) { grid-template-columns: repeat(7, 1fr) !important; }
}
@media (min-width: 2500px) {
  .product-grid.grid-shop { grid-template-columns: repeat(7, 1fr) !important; }
  .product-grid:not(.grid-2):not(.grid-shop) { grid-template-columns: repeat(8, 1fr) !important; }
  .cat-slider { grid-auto-columns: calc((100% - 7 * 16px) / 8); }
  .cat-slider.wide-slider { grid-auto-columns: calc((100% - 5 * 16px) / 6); }
  .combo-slider { grid-auto-columns: minmax(calc((100% - 6 * 16px) / 7), 1fr); }
  .top-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Cart drawer: price, stepper and Remove in one fixed right column — every row lines up */
.ci { grid-template-columns: 64px minmax(0, 1fr) 112px; align-items: start; }
.ci-main { min-width: 0; display: grid; gap: 4px; padding-top: 2px; }
.ci-meta { display: block; }
.ci-right { gap: 6px; width: 112px; }
.ci-qty { width: 112px; display: grid !important; grid-template-columns: 36px 1fr 36px; border-width: 1.5px; }
.ci-qty button { width: 36px; height: 36px; font-size: 1.1rem; }
.ci-qty input { width: 100%; font-size: .95rem; }
.ci-qty button.is-trash { color: #dc2626; }
.ci-qty button.is-trash:hover { background: #fff1f2; color: #b91c1c; }
.ci-qty .icon { width: 17px; height: 17px; }
@media (max-width: 380px) { .ci { grid-template-columns: 52px minmax(0, 1fr) 104px; gap: 10px; } .ci img { width: 52px; height: 52px; } .ci-right, .ci-qty { width: 104px; } .ci-qty { grid-template-columns: 32px 1fr 32px; } .ci-qty button { width: 32px; } }
.co-forgot li[hidden] { display: none !important; }
.cf-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #f5c27a; flex-wrap: wrap; }
.cf-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #f5c27a; background: #fff; color: #9a3412; border-radius: 999px; height: 32px; padding: 0 12px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.cf-toggle .icon, .cf-all .icon { width: 14px; height: 14px; }
.cf-all { display: inline-flex; align-items: center; gap: 4px; color: var(--green-800); font-size: .84rem; font-weight: 600; }

/* Checkout gift — clear steps */
.gift-flow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #f5d9a8; margin-bottom: 6px; }
.gift-flow > div { flex: 1; min-width: 0; display: grid; }
.gift-flow small { color: var(--muted); font-size: .76rem; }
.gift-flow b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.gift-flow > div:last-child b { color: #9a3412; }
.gf-arrow { color: #d9620a; display: grid; place-items: center; } .gf-arrow .icon { width: 22px; height: 22px; }
.gift-step { padding: 14px 0 4px; border-top: 1px dashed #f5d9a8; }
.gift-step:first-of-type { border-top: 0; }
.gift-step h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .98rem; }
.gift-step h4 > span:first-child { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #d9620a; color: #fff; font-size: .78rem; font-weight: 800; flex: none; }
.gift-step textarea { width: 100%; }
.gift-notify { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.seg { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 600; font-size: .9rem; }
.seg input:checked + span { border-color: #d9620a; background: #fff7ed; color: #9a3412; }
.seg input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.addr-box legend span { display: inline; }
.lp-gift-note { display: flex; align-items: center; gap: 6px; margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: .84rem; font-weight: 600; }
.lp-gift-note .icon { width: 16px; height: 16px; }
.lp-gift-note[hidden], .lp-gift-tag[hidden] { display: none !important; }
.lp-gift-tag { margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; font-weight: 800; }

/* Floating error sticker — what still needs filling in, tap a line to jump there */
.err-sticker { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; width: min(440px, calc(100% - 24px)); max-height: 46vh; overflow: auto; background: #fff; border: 1.5px solid #fca5a5; border-left: 5px solid #dc2626; border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(127, 29, 29, .45); padding: 10px 12px 10px 14px; animation: esIn .25s var(--ease); }
@keyframes esIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 899px) { .err-sticker { bottom: calc(76px + env(safe-area-inset-bottom)); } }   /* above the phone bottom bar */
.es-head { display: flex; align-items: center; gap: 8px; color: #b91c1c; margin-bottom: 4px; }
.es-head > .icon { width: 20px; height: 20px; flex: none; }
.es-head b { flex: 1; font-size: .95rem; }
.es-x { border: 0; background: none; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.es-x:hover { background: #fee2e2; color: #b91c1c; }
.es-x .icon { width: 16px; height: 16px; }
.err-sticker ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.err-sticker li { position: relative; padding-left: 14px; font-size: .9rem; color: var(--ink); }
.err-sticker li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #dc2626; }
.err-sticker li button { border: 0; background: none; padding: 3px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: #fca5a5; text-underline-offset: 3px; }
.err-sticker li button:hover { color: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .err-sticker { animation: none; } }
/* Label: "I checked — it is correct" */
.lp-confirm { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: #f0fdf4; border: 1.5px solid #bbf7d0; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--green-800); }
.lp-confirm input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--green-700); flex: none; }
.lp-confirm.has-error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
/* Label preview: gift tag in the top-right corner, so “TO” and the address stay clean */
.lp-card { position: relative; }
.lp-card .lp-gift-tag { position: absolute; top: 10px; right: 10px; margin: 0; padding: 2px 8px; border: 1px solid #f5c27a; border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
/* Waived delivery + total savings */
.dl-was { color: var(--muted); font-weight: 500; margin-right: 4px; }
.dl-free { color: var(--green-700); }
.sum-saved { display: flex; align-items: center; gap: 6px; margin: 8px 0 12px; padding: 8px 12px; border-radius: 10px; background: #ecfdf3; color: #166534; font-size: .9rem; }
.sum-saved .icon { width: 16px; height: 16px; flex: none; }
.sum-saved span { flex: 1; }
.sum-saved strong { font-size: 1rem; }
.sum-saved[hidden] { display: none !important; }
/* My account → saved addresses as labels */
.addr-card { display: grid; gap: 8px; align-content: start; }
.addr-top b { display: inline-flex; align-items: center; gap: 6px; } .addr-top b .icon { width: 16px; height: 16px; color: var(--green-700); }
.addr-label { margin: 0; font-size: .9rem; }
.addr-bn { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.addr-act { display: flex; flex-wrap: wrap; gap: 6px; }
.addr-del { color: #b91c1c; } .addr-del:hover { background: #fef2f2; }
.addr-add { display: grid; place-items: center; text-align: center; gap: 4px; min-height: 170px; border: 2px dashed var(--line-2); color: var(--green-800); text-decoration: none; }
.addr-add .icon { width: 26px; height: 26px; }
.addr-add small { color: var(--muted); max-width: 240px; }
.addr-card.is-default { border-color: var(--green-600); box-shadow: 0 0 0 1px var(--green-600) inset; }
.cd-opt-note { color: var(--muted); font-size: .76rem; }
.sum-saved { display: grid; gap: 3px; }
.ss-top { display: flex; align-items: center; gap: 6px; } .ss-top span { flex: 1; } .ss-top .icon { width: 16px; height: 16px; }
.ss-parts { color: #15803d; font-size: .76rem; line-height: 1.45; padding-left: 22px; }
.sum-row.discount span { display: inline-flex; align-items: center; gap: 5px; } .sum-row.discount .icon { width: 15px; height: 15px; }
/* Product page: already in the cart → − n + right here */
.pd-incart { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 14px; background: #ecfdf3; border: 1.5px solid #bbf7d0; }
.pd-incart[hidden], .pd-buy[hidden] { display: none !important; }
.pdi-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #166534; } .pdi-lbl .icon { width: 18px; height: 18px; }
.pdi-step { display: grid; grid-template-columns: 44px 52px 44px; height: 44px; border-radius: 12px; overflow: hidden; background: #fff; border: 1.5px solid var(--green-600); margin-left: auto; }
.pdi-step button { border: 0; background: var(--green-600); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pdi-step button:hover { background: var(--green-700); }
.pdi-step button .icon { width: 18px; height: 18px; }
.pdi-step b { display: grid; place-items: center; font-size: 1.15rem; color: var(--green-800); }
.pdi-step .st-trash { display: none; }
.pd-incart.is-one .pdi-step button:first-child { background: #fff1f2; color: #dc2626; }
.pd-incart.is-one .st-minus { display: none; } .pd-incart.is-one .st-trash { display: grid; }
.pdi-cart { border: 0; background: none; color: var(--green-800); font: inherit; font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pdi-cart .icon { width: 15px; height: 15px; }
@media (max-width: 420px) { .pdi-step { margin-left: 0; } }
/* Expected delivery dates */
.eta-box { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; padding: 10px 14px; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.eta-box > .icon { width: 22px; height: 22px; flex: none; }
.eta-box div { display: grid; line-height: 1.3; }
.eta-box small { font-size: .78rem; color: #3b5b9a; }
.eta-box b { font-size: 1.02rem; }
.eta-upd { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.eta-box.done { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }

/* ---------- Focus mode: specialty home + landing pages ---------- */
.nav-focus { white-space: nowrap; }
.fh-hero { padding: 22px 0 8px; }
.fh-intro { text-align: center; max-width: 720px; margin: 0 auto 18px; }
.fh-intro h1 { font-size: clamp(1.55rem, 3.4vw, 2.3rem); margin: 2px 0 6px; line-height: 1.3; }
.fh-intro p { color: var(--muted); margin: 0; }
.fh-slider { position: relative; display: grid; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--green-50); }
.fh-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; display: grid; }   /* stacked in one cell: the slider is as tall as its tallest slide */
.fh-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.fh-slide.tone-0 { background: radial-gradient(120% 90% at 85% 40%, var(--gold-100), transparent 60%), linear-gradient(135deg, var(--green-50), var(--cream)); }
.fh-slide.tone-1 { background: radial-gradient(120% 90% at 85% 40%, var(--green-100), transparent 60%), linear-gradient(135deg, var(--gold-50), var(--cream)); }
.fh-slide.tone-2 { background: radial-gradient(120% 90% at 85% 40%, #fbe3d4, transparent 60%), linear-gradient(135deg, var(--cream-2), var(--cream)); }
.fh-slide.is-full { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--cream-2); }
.fh-slide.is-full img { position: relative; display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }   /* the whole banner, never cropped */
.fh-slide.is-full::before, .fh-visual.is-banner::before { content: ''; position: absolute; inset: -20px; background: var(--bg) center / cover no-repeat; filter: blur(22px) saturate(1.1); opacity: .55; }   /* soft fill around banners of any size */
.fh-slide.is-split { grid-template-rows: auto auto; }
.fh-slide.is-split .fh-visual { order: -1; }
.fh-copy { padding: 18px 20px 40px; }
.fh-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--gold-800); background: #fff; border: 1px solid var(--gold-300); border-radius: 99px; padding: 3px 12px; }
.fh-kicker .icon { width: 14px; height: 14px; }
.fh-copy h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.25; margin: 10px 0 6px; }
.fh-copy p { color: var(--ink-2); margin: 0 0 10px; max-width: 46ch; }
.fh-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fh-price strong { font-size: 1.6rem; color: var(--green-800); }
.fh-price del { color: var(--muted); }
.fh-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.fh-visual { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; }
.fh-visual img { max-height: 82%; width: auto; max-width: 86%; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(31, 66, 24, .22)); }
.fh-visual.is-banner img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; filter: none; }   /* any size fits the 16:9 frame */
.fh-copy .link-more { align-self: center; }
@media (min-width: 900px) {
  .fh-slide.is-split { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; }   /* ⅓ text + ⅔ banner */
  .fh-slide.is-split .fh-visual { order: 0; aspect-ratio: 16 / 9; }
  .fh-copy { padding: 36px 28px 36px 44px; }
  .fh-copy h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
  .fh-visual:not(.is-banner) img { max-height: 360px; }
}
.lp-banner { margin-top: 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.lp-banner img { display: block; width: 100%; height: auto; }
.lp-top-banner { padding-top: 18px; } .lp-top-banner .lp-banner { margin-top: 0; }
.lp-trust { padding: 4px 0 8px; } .lp-hero + .lp-trust, .lp-top-banner + .lp-hero { margin-top: 0; }
.fh-nav { position: absolute; z-index: 3; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 999px; background: transparent; transition: background .25s; }   /* only the dots show; arrows appear on mouse-over */
.fh-nav .fh-arrow { opacity: 0; pointer-events: none; transition: opacity .25s; }
@media (hover: hover) {
  .fh-slider:hover .fh-nav { background: rgba(16, 28, 16, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .fh-slider:hover .fh-nav .fh-arrow { opacity: .9; pointer-events: auto; }
  .fh-slider:hover .fh-nav .fh-arrow:hover { opacity: 1; }
}
@media (hover: none) { .fh-nav .fh-arrow { display: none; } }   /* phones: swipe or tap the dots */   /* ‹ dots › in one pill at the bottom — never over the text */
.fh-nav .slider-dots { position: static; transform: none; display: flex; align-items: center; gap: 6px; }
.fh-nav .slider-dots button { width: 10px; height: 10px; background: #ef4444; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.fh-nav .slider-dots button.active { width: 24px; background: #f59e0b; }
.fh-arrow { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; color: var(--green-800); display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.fh-arrow:hover { background: var(--gold-100); }
.fh-arrow .icon { width: 18px; height: 18px; }
@media (max-width: 899px) { .fh-copy { padding-bottom: 58px; } }
.fh-range .section-head { margin-bottom: 8px; }
.fh-feature { display: grid; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 22px; box-shadow: var(--shadow-sm); }
.fh-f-media { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream-2); aspect-ratio: 1; }
.fh-f-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.fh-f-media:hover img { transform: scale(1.03); }
.fh-f-pic { min-width: 0; }
.fh-f-pic .pd-tagbar .pc-tags { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.fh-f-pic .pd-tagbar + .fh-f-media { border-top-left-radius: 0; border-top-right-radius: 0; }
.fh-f-body h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin: 0 0 4px; }
.fh-f-body h3 a { color: var(--ink); }
.fh-rating { display: flex; align-items: center; gap: 6px; font-size: .9rem; margin-bottom: 6px; }
.fh-f-sub { color: var(--ink-2); margin: 0 0 10px; }
.fh-hl { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.fh-hl li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; }
.fh-hl .icon { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--green-600); }
.fh-f-price strong { font-size: 1.5rem; }
.fh-f-buy { max-width: 400px; margin: 10px 0 12px; }
@media (min-width: 900px) {
  .fh-feature { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 44px; padding: 24px; }
  .fh-feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  .fh-feature.flip .fh-f-pic { order: 2; }
  .fh-feature.flip .fh-f-body { padding-left: 20px; }
}

.lp-hero { padding: 22px 0 8px; background: linear-gradient(180deg, var(--green-50), var(--cream) 70%); }
.lp-hero-grid { display: grid; gap: 22px; align-items: start; }
.lp-visual { position: relative; border-radius: var(--radius); overflow: hidden; background: radial-gradient(80% 70% at 50% 45%, var(--gold-100), var(--cream-2)); aspect-ratio: 1; box-shadow: var(--shadow); }
.lp-visual img { width: 100%; height: 100%; object-fit: contain; }   /* product photos of any shape fit without cutting */
.lp-copy h1 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.25; margin: 4px 0 6px; }
.lp-name { color: var(--muted); font-weight: 500; margin: 0 0 6px; }
.lp-rating { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--ink-2); margin-bottom: 8px; }
.lp-sub { color: var(--ink-2); font-size: 1.05rem; margin: 0 0 12px; }
.lp-order { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 16px); }
.lp-price { margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-price strong { font-size: 1.8rem; }
.lp-assure { list-style: none; padding: 12px 0 0; margin: 14px 0 0; border-top: 1px dashed var(--line-2); display: grid; gap: 6px; font-size: .9rem; color: var(--ink-2); }
.lp-assure li { display: flex; align-items: center; gap: 8px; }
.lp-assure .icon { width: 18px; height: 18px; color: var(--green-700); }
@media (min-width: 900px) {
  .lp-hero { padding-top: 34px; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
  .lp-visual { position: sticky; top: calc(var(--header-h) + 16px); }
}
.lp-ben-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.lp-ben { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.lp-ben p { margin: 0; font-weight: 500; }
.lp-ben .vi { flex: none; background: var(--green-100); color: var(--green-700); }
.lp-story-grid { display: grid; gap: 24px; align-items: center; }
.lp-story-text { color: var(--ink-2); }
.lp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
@media (min-width: 900px) { .lp-story-grid { grid-template-columns: 1.1fr 1fr; gap: 44px; } }
.lp-oth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.lp-oth { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px 10px 10px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.lp-oth:hover { border-color: var(--green-300); box-shadow: var(--shadow-sm); color: var(--ink); }
.lp-oth img { width: 64px; height: 64px; border-radius: var(--radius-xs); object-fit: cover; }
.lp-oth span { flex: 1; display: grid; }
.lp-oth small { color: var(--green-700); font-weight: 600; }
.lp-oth .icon { width: 18px; height: 18px; color: var(--muted); }
.connect-strip { padding-top: 8px; }
.cs-grid { display: grid; gap: 14px; }
@media (min-width: 800px) { .cs-grid { grid-template-columns: 1fr 1fr; } .cs-grid.one { grid-template-columns: minmax(0, 640px); justify-content: center; } }
.cs-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink); transition: box-shadow .2s, border-color .2s; }
.cs-card:hover { color: var(--ink); box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.cs-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; }
.cs-ic .icon { width: 24px; height: 24px; }
.cs-fb .cs-ic { background: #e7f0fe; color: #1877f2; }
.cs-rv .cs-ic { background: var(--gold-100); color: var(--gold-700); }
.cs-txt { flex: 1; min-width: 0; display: grid; line-height: 1.4; }
.cs-txt small { color: var(--muted); margin-top: 2px; }
.cs-btn { flex: none; white-space: nowrap; }
.cs-fb .cs-btn { background: #1877f2; color: #fff; }
.cs-rv .cs-btn { background: var(--gold-500); color: var(--ink); }
@media (max-width: 520px) { .cs-card { flex-wrap: wrap; } .cs-btn { width: 100%; justify-content: center; } }
.dfocus img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.dpop.dfocus { grid-template-columns: 1fr; }
/* formatted text (product description, landing story) */
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 .8em; }
.md h4 { font-size: 1.12rem; margin: 1.1em 0 .4em; color: var(--green-800); }
.md h5 { font-size: 1rem; margin: 1em 0 .3em; color: var(--ink); }
.md ul, .md ol { margin: 0 0 .9em; padding-left: 1.3em; }
.md li { margin: .2em 0; }
.md ul li::marker { color: var(--green-600); }
.md blockquote { margin: 0 0 .9em; padding: 10px 14px; background: var(--gold-50); border-left: 3px solid var(--gold-500); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.md hr { border: 0; border-top: 1px dashed var(--line-2); margin: 1.1em 0; }
.md a { text-decoration: underline; text-underline-offset: 2px; }
/* Offer zone: one row per deal */
.deal-group { margin: 6px 0 22px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; border-top: 3px solid var(--oc, var(--gold-500)); }
.dg-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.dg-head h2 { font-size: 1.12rem; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dg-head h2 .icon { width: 20px; height: 20px; color: var(--oc, var(--gold-700)); }
.dg-off { font-size: .8rem; color: #fff; background: var(--oc, #e8590c); padding: 2px 10px; border-radius: 99px; }
.dg-when { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; } .dg-when .icon { width: 14px; height: 14px; }
.dg-head .link-more { margin-left: auto; }
.grid-one-row { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0 !important; overflow: hidden; padding-bottom: 2px; }   /* only the cards that fit one row */
.grid-one-row > * { min-height: 0; }
.deal-more { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 8px 0 20px; }
.lp-order:target { animation: lpFlash 2s ease-out 1; }
@keyframes lpFlash { 0%, 35% { box-shadow: 0 0 0 4px var(--gold-500), var(--shadow); } 100% { box-shadow: var(--shadow-sm); } }
/* Product page: search inside this product */
.pd-find { margin: 0 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--green-50), #fff); }
.pf-box { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.pf-box:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 4px var(--green-100); }
.pf-box > .icon { width: 18px; height: 18px; color: var(--muted); flex: none; }
.pf-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 11px 0; font: inherit; font-size: .95rem; }
.pf-box input::-webkit-search-cancel-button { display: none; }
.pf-clear { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--cream-2); display: grid; place-items: center; cursor: pointer; }
.pf-clear[hidden] { display: none; }
.pf-clear .icon { width: 14px; height: 14px; }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pf-chips button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
.pf-chips button:hover { border-color: var(--green-500); color: var(--green-800); background: var(--green-50); }
.pf-results { margin-top: 10px; display: grid; gap: 6px; }
.pf-count { margin: 0; font-size: .8rem; color: var(--muted); }
.pf-hit { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; }
.pf-hit:hover { border-color: var(--green-300); background: var(--green-50); }
.pf-in { flex: none; font-size: .72rem; font-weight: 600; color: var(--green-800); background: var(--green-100); padding: 2px 8px; border-radius: 99px; margin-top: 2px; white-space: nowrap; }
.pf-snip mark { background: var(--gold-100); color: inherit; padding: 0 2px; border-radius: 3px; }
.pf-hit-ask { justify-content: center; color: var(--green-800); font-weight: 600; border-style: dashed; }
.pf-none { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--gold-50); border: 1px dashed var(--gold-300); }
.pf-none p { margin: 0 0 8px; font-weight: 500; }
.pf-none-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pf-flash { animation: pfFlash 2.2s ease-out 1; border-radius: 6px; }
@keyframes pfFlash { 0%, 40% { background: var(--gold-100); box-shadow: 0 0 0 6px var(--gold-100); } 100% { background: transparent; box-shadow: none; } }
.footer-bottom.is-center { justify-content: center; text-align: center; }
@media (max-width: 767px) { .footer-bottom.is-center { align-items: center; } }
.co-optional { margin-top: 6px; }
.co-opt-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 18px 0 10px; color: var(--ink-2); }
.co-opt-title .icon { width: 18px; height: 18px; color: var(--green-600); }
/* admin only: switch between customer view (focus mode) and the full store */
.admin-view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; padding: 6px 12px; background: #13321d; color: #e8f2e1; font-size: .82rem; }
.admin-view-bar .icon { width: 15px; height: 15px; vertical-align: -2px; }
.admin-view-bar a { color: #f2c14e; }
.avb-switch { display: inline-flex; background: rgba(255, 255, 255, .1); border-radius: 99px; padding: 2px; }
.avb-switch a { padding: 3px 12px; border-radius: 99px; color: #e8f2e1; }
.avb-switch a.on { background: #f2c14e; color: #13321d; font-weight: 600; }

/* ---------- Landing page v2: gallery first, clear price, use cases, video ---------- */
.lp-hero { background: radial-gradient(90% 60% at 10% 0%, var(--gold-50), transparent 60%), linear-gradient(180deg, var(--green-50), var(--cream) 80%); }
.lp-gallery { display: grid; gap: 10px; align-content: start; }
.lp-gallery .lp-visual { position: relative; top: auto; }
.lp-save-tag { position: absolute; left: 14px; top: 14px; z-index: 2; background: linear-gradient(135deg, #f97316, #e8590c); color: #fff; font-weight: 700; font-size: .85rem; padding: 5px 12px; border-radius: 99px; box-shadow: 0 6px 16px -6px rgba(232, 89, 12, .6); }
.lp-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.lp-thumbs::-webkit-scrollbar { display: none; }
.lp-thumbs button { flex: none; width: 68px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--cream-2); cursor: pointer; transition: border-color .2s, transform .2s; }
.lp-thumbs button.on { border-color: var(--green-600); }
.lp-thumbs button:hover { transform: translateY(-2px); }
.lp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lp-top-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.lp-top-line .lp-rating { margin: 0; }
.lp-copy h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.01em; }
.lp-hl { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; gap: 8px; }
.lp-hl li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.lp-hl li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; margin-top: 2px; }
.lp-hl li > span .icon { width: 13px; height: 13px; }
@media (min-width: 1100px) { .lp-hl { grid-template-columns: 1fr 1fr; } }
.lp-order { border-radius: 20px; padding: 20px; box-shadow: var(--shadow); border-color: var(--line); }
.lp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-price strong { font-size: 2.1rem; line-height: 1; color: var(--green-800); font-weight: 800; }
.lp-price del { color: var(--muted); font-size: 1.05rem; }
.lp-alt-order { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.lp-alt-order a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.lp-alt-order a:hover { color: var(--green-800); }
.lp-alt-order .icon { width: 16px; height: 16px; color: var(--green-700); }
@media (min-width: 900px) { .lp-gallery { position: sticky; top: calc(var(--header-h) + 16px); } .lp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
/* use cases: big photo + short text, alternating */
.lp-uses .section-head { margin-bottom: 18px; }
.lp-use { display: grid; gap: 18px; align-items: center; margin: 0 auto 26px; max-width: 1080px; }
.lp-use-img { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--cream-2); }
.lp-use-img::before { content: ''; position: absolute; inset: -20px; background: var(--bg) center / cover no-repeat; filter: blur(20px) saturate(1.1); opacity: .5; }   /* soft fill when the photo is not 4:3 */
.lp-use-img img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }   /* the whole photo, never cut */
.lp-use:hover .lp-use-img img { transform: scale(1.03); }
.lp-use-txt h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 6px 0 8px; }
.lp-use-txt .md { color: var(--ink-2); }
.lp-use-n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold-500); color: var(--ink); font-weight: 800; box-shadow: 0 6px 14px -6px rgba(208, 142, 0, .7); }
.lp-use.no-img { max-width: 760px; }
.pd-uses { margin: 34px 0 10px; padding: 28px 0 6px; border-top: 1px solid var(--line); }
.lp-info .pd-find { margin-top: 0; }
@media (min-width: 860px) { .lp-use:not(.no-img) { grid-template-columns: 1fr 1fr; gap: 44px; } .lp-use.flip .lp-use-img { order: 2; } }
/* video: a picture with a play button until pressed */
.lp-yt, .lp-yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.lp-yt { position: relative; padding: 0; cursor: pointer; background: #000; }
.lp-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .3s, transform .6s var(--ease); }
.lp-yt:hover img { opacity: 1; transform: scale(1.02); }
.lp-yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #e11d48; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s; }
.lp-yt:hover .lp-yt-play { transform: translate(-50%, -50%) scale(1.08); }
.lp-yt-play .icon { width: 34px; height: 34px; margin-left: 4px; }

/* Page sections with their own phone order (Admin → Site texts → Page sections) — re-ordered by CSS, sent once */
@media (min-width: 641px) { .ps-b.ps-d-off, .trust-strip.no-desk { display: none; } }
@media (max-width: 640px) {
  .ps-flow { display: flex; flex-direction: column; }
  .ps-b { order: var(--o); min-width: 0; }
  .ps-b.ps-m-off, .trust-strip.no-phone { display: none; }
}
.pd-trust .trust-strip { margin-top: 18px; }

/* 👁 show / hide password */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px !important; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: #6b7280; cursor: pointer; border-radius: 8px; }
.pw-eye:hover { color: #111; background: rgba(0,0,0,.05); }
.pw-eye .pw-slash { display: none; }
.pw-eye.on .pw-slash { display: inline; }
.ck-form .pw-wrap input[type] { max-width: none; }

/* Reviews: one row to swipe, tag chips to filter */
.rv-box { min-width: 0; }
.rv-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.rv-chips::-webkit-scrollbar { display: none; }
.rv-chips button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--ink); }
.rv-chips button small { color: var(--muted); margin-left: 2px; }
.rv-chips button.on { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.rv-chips button.on small { color: rgba(255,255,255,.8); }
.rv-scroll-wrap { position: relative; }
.review-list.rv-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin: 0; scrollbar-width: thin; }
.rv-row > li { flex: 0 0 min(320px, 84%); scroll-snap-align: start; }
.rv-row > li[hidden] { display: none; }
.rv-arrow { position: absolute; top: 40%; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); display: grid; place-items: center; cursor: pointer; }
.rv-arrow[hidden] { display: none; }
.rv-arrow.prev { left: -10px; } .rv-arrow.next { right: -10px; }
.rv-arrow .icon { width: 18px; height: 18px; }
@media (hover: none) { .rv-arrow { display: none; } }
.rc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rc-tags span { font-size: .75rem; background: var(--green-50); color: var(--green-800); border-radius: 999px; padding: 2px 10px; }
.rv-tagpick { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv-tagpick legend { font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.rv-tagpick label { cursor: pointer; }
.rv-tagpick input { position: absolute; opacity: 0; pointer-events: none; }
.rv-tagpick span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .85rem; background: #fff; }
.rv-tagpick input:checked + span { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.rv-tagpick input:focus-visible + span { outline: 2px solid var(--green-500); outline-offset: 2px; }

/* =========================================================
   Clean look (Settings → Store info → Website look; html.ui-v4).
   Neutral page so product photos carry the colour · green = brand & trust (menu, links, "in cart")
   · gold = only the buttons that lead to an order · red = only discounts · prices in dark ink.
   "Classic" removes the class and the shop looks as before.
   ========================================================= */
.ui-v4 {
  --cream: #f6f7f3; --cream-2: #f1f3ee;
  --line: #e4e8df; --line-2: #d5dbcd;
  --ink: #1a2018; --ink-2: #3a4237; --muted: #636b5f;
  --act: #f5a90a; --act-hover: #e69a00; --act-ink: #1d1a0f;
  --deal: #d92d20;
  --shadow-sm: 0 1px 2px rgba(26, 32, 24, .05), 0 2px 6px rgba(26, 32, 24, .04);
  --shadow: 0 12px 28px -16px rgba(26, 32, 24, .28);
}
.ui-v4 body { background: var(--cream); }
/* sections: plain white bands instead of pastel gradients */
.ui-v4 .section-tint, .ui-v4 .top-products, .ui-v4 .spotlight-honey { background: #fff; border-block: 1px solid var(--line); }
.ui-v4 .eyebrow { color: var(--green-700); }
.ui-v4 .link-more { color: var(--green-700); }
/* the one action colour */
.ui-v4 .btn-act, .ui-v4 .hs-cta, .ui-v4 .pc-buynow2 { background: var(--act); color: var(--act-ink); border-color: transparent; box-shadow: 0 6px 16px -8px rgba(197, 128, 0, .55), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.ui-v4 .btn-act:hover, .ui-v4 .pc-buynow2:hover { background: var(--act-hover); color: var(--act-ink); filter: none; }
/* secondary buttons (give a review, chat on WhatsApp): white, so gold keeps meaning "order" */
.ui-v4 .btn-gold { background: #fff; color: var(--green-800); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.ui-v4 .btn-gold:hover { background: var(--green-50); color: var(--green-900); border-color: #bcd8ad; }
.ui-v4 .btn-act .icon, .ui-v4 .pc-buynow2 .icon { stroke-width: 2.2; }
/* cards: calm, photo first */
.ui-v4 .product-card { border-color: var(--line); }
.ui-v4 .product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.ui-v4 .pc-tags[style] { background: #fff; border-bottom-color: var(--line); }
.ui-v4 .pc-price strong, .ui-v4 .cc-price strong, .ui-v4 .pd-price strong, .ui-v4 .lp-price strong, .ui-v4 .sticky-buy strong, .ui-v4 .drawer-total strong { color: var(--ink); }
.ui-v4 .pc-price del, .ui-v4 .pd-price del { color: #767c72; }
.ui-v4 .badge-sale { background: var(--deal); }
.ui-v4 .wide-card { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ui-v4 .wide-card:hover { border-color: var(--line-2); }
/* card "Add to cart": clear but quiet, so a row of cards doesn't turn into a wall of buttons */
.ui-v4 .pc-cta:not(.is-added) { background: var(--green-50); box-shadow: inset 0 0 0 1.5px #bcd8ad; }
.ui-v4 .pc-cta:not(.is-added) .pc-add { color: var(--green-800); }
.ui-v4 .pc-cta:not(.is-added):hover { background: var(--green-700); box-shadow: 0 8px 18px -12px rgba(31, 90, 44, .7); }
.ui-v4 .pc-cta:not(.is-added):hover .pc-add { color: #fff; background: transparent; }
.ui-v4 .cc-btn { background: var(--green-50); border-color: #bcd8ad; }
/* product page: Order now (gold) › Add to cart (green outline) › WhatsApp / call (quiet) */
.ui-v4 .pd-buy .btn-soft { background: #fff; color: var(--green-800); border: 2px solid var(--green-700); }
.ui-v4 .pd-buy .btn-soft:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.ui-v4 .pd-alt-order .btn-wa { background: #fff; color: #0e7a3f; border-color: #b9e4c9; }
.ui-v4 .pd-alt-order .btn-wa:hover { background: #effaf3; color: #0e7a3f; }
.ui-v4 .pd-alt-order .btn-outline { border-color: var(--line-2); color: var(--ink-2); }
.ui-v4 .pd-alt-order .btn-outline:hover { background: var(--cream); color: var(--ink); }
/* cart shortcuts: brand green, gold count */
.ui-v4 .float-cart .fc-top { background: var(--green-800); }
.ui-v4 .float-cart .fc-total { color: var(--green-800); border-color: var(--line); }
.ui-v4 .m-cartbar { background: var(--green-800); box-shadow: 0 10px 24px -10px rgba(28, 66, 24, .6); }
.ui-v4 .ha-badge { background: var(--act); color: var(--act-ink); }
.claim { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.claim summary { cursor: pointer; font-weight: 600; color: var(--green-700); display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.claim summary::-webkit-details-marker { display: none; }
.claim p { margin: 8px 0; }
.claim-form { display: flex; flex-wrap: wrap; gap: 8px; }
.claim-form input { flex: 1 1 160px; height: 42px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: 10px; font: inherit; background: var(--cream); }
.claim-found { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--green-50); }
/* Account activation + sign-in pop-up */
.av-box { display: grid; gap: 12px; }
.av-lead { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .95rem; }
.av-lead .icon { flex: none; margin-top: 3px; color: var(--green-700); }
.av-lead.ok { color: var(--green-700); font-weight: 600; }
.av-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.av-alt form { margin: 0; }
.av-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .9rem; margin: 2px 0; }
.av-ch[hidden] { display: none; }
.av-ch > span { color: var(--muted); }
.av-ch label { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.av-ch input { width: 18px; height: 18px; accent-color: var(--green-700); }
.av-success { text-align: left; margin: 14px auto; max-width: 520px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--green-600, #2f7d3e); border-radius: 12px; background: #fff; display: grid; gap: 10px; }
.si-pop { width: min(420px, calc(100vw - 32px)); border: 0; border-radius: 18px; padding: 24px 22px 18px; box-shadow: 0 24px 60px rgba(20, 30, 15, .25); }
.si-pop::backdrop { background: rgba(20, 25, 18, .45); backdrop-filter: blur(2px); }
.si-pop[open] { animation: siIn .18s ease-out; }
@keyframes siIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.si-x { position: absolute; top: 10px; right: 10px; margin: 0; }
.si-x button { border: 0; background: none; padding: 6px; cursor: pointer; color: var(--muted); }
.si-head { text-align: center; margin-bottom: 14px; }
.si-head h2 { margin: 8px 0 0; font-size: 1.35rem; }
.si-pop .acc-links { text-align: center; margin: 12px 0 0; font-size: .9rem; }
.si-pop [data-si-err][hidden] { display: none; }
.si-pop .field-error { margin: -4px 0 0; }
.si-pop { max-height: calc(100vh - 32px); overflow-y: auto; }
.si-pop [data-si-panel][hidden], .si-pop [data-si-note][hidden], .si-pop [data-si-addr][hidden] { display: none; }
.si-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--green-700); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.si-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--gold-50); color: var(--gold-800); font-size: .9rem; }
.si-addr { display: flex; gap: 6px; align-items: center; margin: -2px 0 0; }
.si-addr .icon { width: 15px; height: 15px; color: var(--green-600); flex: none; }
.si-pop .acc-form > small { display: block; text-align: center; line-height: 1.45; }
.si-pop .av-box { margin: 0 0 12px; }
.si-go-on { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: .9rem; color: var(--green-800, #2f5a1f); }
.si-go-on .icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--green-600); }

/* ===================== Wishlist page: compact list + separate sections below ===================== */
.wl-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.wl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--cream); }
.wl-bar[hidden], .wl-bar [hidden] { display: none !important; }
.wl-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.wl-all input, .wl-check input { width: 18px; height: 18px; accent-color: var(--green-700); cursor: pointer; }
.wl-bar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-sort { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); }
.wl-sort select { font: inherit; font-size: .88rem; color: var(--ink); padding: 6px 28px 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; background-color: #fff; }
.wl-list { list-style: none; margin: 0; padding: 0; }
.wl-row { display: grid; grid-template-columns: 22px 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); transition: opacity .25s, transform .25s; }
.wl-row:last-child { border-bottom: 0; }
.wl-row:hover { background: #fcfcfa; }
.wl-row.going { opacity: 0; transform: translateX(14px); }
.wl-img { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: var(--cream); display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }
.wl-img img { width: 100%; height: 100%; object-fit: contain; }
.wl-info { min-width: 0; }
.wl-cat { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--green-700); text-transform: uppercase; }
.wl-cat .icon { width: 13px; height: 13px; }
.wl-name { display: block; font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.35; margin: 1px 0 3px; }
a.wl-name:hover { color: var(--green-700); }
.wl-short { margin: 0 0 4px; font-size: .86rem; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: .82rem; color: var(--muted); }
.wl-rate { display: inline-flex; align-items: center; gap: 4px; }
.wl-rate .stars { font-size: .78rem; }
.wl-stock.in { color: var(--green-700); display: inline-flex; align-items: center; gap: 3px; } .wl-stock.in .icon { width: 13px; height: 13px; }
.wl-stock.low { color: #b45309; font-weight: 600; }
.wl-stock.out { color: #b42318; font-weight: 600; }
.wl-date { display: block; margin-top: 4px; font-size: .76rem; color: var(--muted); }
.wl-na { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: .86rem; color: #9a6b10; }
.wl-na .icon { width: 15px; height: 15px; flex: none; }
.wl-row.off .wl-img { filter: grayscale(1); opacity: .55; }
.wl-row.off .wl-name { color: var(--muted); }
.wl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.wl-price { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 8px; text-align: right; }
.wl-price strong { font-size: 1.08rem; color: var(--ink); }
.wl-price del { font-size: .82rem; color: var(--muted); }
.wl-acts { display: flex; align-items: center; gap: 6px; }
.wl-ic { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.wl-ic .icon { width: 16px; height: 16px; }
.wl-ic:hover { color: #b42318; border-color: #f3c1bb; background: #fff6f5; }
.wl-empty-now { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px; margin: 0; color: var(--muted); }
.wl-empty-now[hidden] { display: none; }
@media (max-width: 640px) {
  .wl-bar { padding: 10px 12px; } .wl-bar-end { margin-left: 0; width: 100%; justify-content: space-between; }
  .wl-row { grid-template-columns: 20px 64px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .wl-img { width: 64px; height: 64px; border-radius: 10px; }
  .wl-side { grid-column: 2 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .wl-price { justify-content: flex-start; text-align: left; }
}
.wl-more { margin: 10px 0 40px; }
.wl-more-lead { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.wl-more-lead::before, .wl-more-lead::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.wl-sec { margin-top: 18px; padding: 18px 18px 8px; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--line); }
.wl-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.wl-sec-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; }
.wl-sec-head h2 .icon { width: 20px; height: 20px; color: var(--green-700); }
.wl-sec-head p { margin: 3px 0 0; font-size: .86rem; color: var(--muted); }
.wl-sec-links { display: flex; align-items: center; gap: 14px; }
.wl-clear { border: 0; background: none; padding: 0; font: inherit; font-size: .86rem; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wl-clear .icon { width: 14px; height: 14px; } .wl-clear:hover { color: #b42318; }
/* one row per section: ~6 across on a laptop, more on big screens */
.cat-slider.wl-strip { grid-auto-columns: calc((100% - 12px) / 2.3); gap: 12px; }
@media (min-width: 600px) { .cat-slider.wl-strip { grid-auto-columns: calc((100% - 3 * 12px) / 4); } }
@media (min-width: 900px) { .cat-slider.wl-strip { grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; } }
@media (min-width: 1150px) { .cat-slider.wl-strip { grid-auto-columns: calc((100% - 5 * 14px) / 6); } }
@media (min-width: 1700px) { .cat-slider.wl-strip { grid-auto-columns: calc((100% - 6 * 14px) / 7); } }
@media (min-width: 1900px) { .cat-slider.wl-strip { grid-auto-columns: calc((100% - 7 * 14px) / 8); } }
@media (min-width: 2200px) { .cat-slider.wl-strip { grid-auto-columns: calc((100% - 9 * 14px) / 10); } }
.wl-strip .pc-title { font-size: .9rem; }
.wl-strip .pc-return, .wl-strip .tag-offer small { display: none; }   /* compact cards: 6 across */
.wl-strip .pc-add { font-size: .84rem; white-space: nowrap; padding-left: 8px; padding-right: 8px; gap: 6px; justify-content: center; }
.wl-strip .pc-opt { font-size: .82rem; }
/* ♡ on combo cards, the landing photo and the combo page */
.combo-card .cc-gift { top: auto; bottom: 10px; right: auto; left: 10px; }   /* the ♡ takes the top-right corner */
.cc-wish { position: absolute; top: 8px; right: 8px; left: auto; width: 32px; height: 32px; }
.cc-wish .icon { width: 16px; height: 16px; }
.lp-visual { position: relative; }
.lp-wish { top: auto; bottom: 14px; right: 14px; width: 42px; height: 42px; }   /* the photo badge sits top-right */
.cd-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cd-title .wish-chip { flex: none; margin-top: 4px; }
/* wishlist line: ♡ on the photo (toggles, the line stays); 🗑 on the right removes the line */
.wl-media { position: relative; width: 88px; height: 88px; }
.wl-heart.wish-btn { top: -6px; right: -6px; width: 28px; height: 28px; box-shadow: 0 1px 6px rgba(0,0,0,.14); }
.wl-heart .icon { width: 15px; height: 15px; }
@media (max-width: 640px) { .wl-media { width: 64px; height: 64px; } .wl-heart.wish-btn { width: 26px; height: 26px; } }

/* Saving chip — "৳120 সাশ্রয় · 20%" on cards,home,landing,product,combo and wishlist (the best offer,or item offers + combo discount added up) */ .save-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 7px;border-radius:99px;background:#fff1e8;color:#c2410c;font-size:.78rem;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:middle}.save-chip .icon{width:13px;height:13px;flex:none}.save-chip[hidden]{display:none}.pc-price .save-chip{flex-basis:auto;font-size:.72rem;padding:1px 8px 1px 6px}.pd-price .save-chip{font-size:.86rem;padding:3px 11px 3px 9px}.cc-body>.save-chip{align-self:flex-start;margin-top:4px;font-size:.72rem}.wl-price .save-chip{font-size:.7rem;padding:1px 7px 1px 5px}.cd-saved{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px}.cd-saved[hidden]{display:none}.cd-saved .save-chip{font-size:.86rem;padding:3px 11px 3px 9px}