/* ==========================================================================
   পাহাড়ি (Pahari) — গ্রোসারি ই-কমার্স ডিজাইন সিস্টেম
   রেফারেন্স: Ghorer Bazar · কমলা + গাঢ় সবুজ · বাংলা
   ========================================================================== */
/* Fonts are enqueued by the theme (inc/dynamic-css.php) — single source, no double-load. */

/* ==========================================================================
   1. ডিজাইন টোকেন
   ========================================================================== */
:root {
  /* কমলা (প্রাইমারি) — প্রিমিয়াম আই-ক্যাচিং */
  --orange-700:#c4570a; --orange-600:#e2680b; --orange-500:#f17912; --orange-400:#f89a3e; --orange-100:#fde7d2;
  /* সবুজ — প্রিমিয়াম (লোগো থেকে) */
  --green-900:#10302a; --green-800:#1a3f36; --green-700:#235247; --green-600:#1f8a47; --green-500:#2eaf5c; --green-cta:#1f9d52; --green-100:#dcf0e3;
  /* নিউট্রাল */
  --white:#ffffff; --cream:#f6f3ea; --off-white:#faf8f3; --gray-50:#f3f1ec; --gray-100:#eae9e3;
  --gray-100b:#ececec; --gray-200:#e2e0d8; --gray-300:#cdcabf; --gray-400:#9d9a8e; --gray-500:#6f6c62; --gray-600:#4a4840; --ink:#1c1b16;
  /* সেমান্টিক */
  --bg:var(--cream); --surface:var(--white); --text:var(--ink); --text-soft:var(--gray-500); --border:#e7e4db;
  --success:#2e9d5f; --danger:#e23b2e; --warning:#e8a30f; --save:#2fa45f;
  /* গ্রেডিয়েন্ট */
  --grad-orange:linear-gradient(135deg,#f17912,#f89a3e);
  --grad-green:linear-gradient(135deg,#10302a,#235247);
  --grad-green-cta:linear-gradient(135deg,#1c8746,#2eb05f);
  /* গ্লাস */
  --glass-blur:saturate(170%) blur(22px);
  --glass-white:rgba(255,255,255,.72);
  --glass-dark:rgba(16,40,36,.72);
  /* টাইপোগ্রাফি — বাংলা ফার্স্ট */
  --font-body:'Hind Siliguri','Poppins',-apple-system,sans-serif;
  --font-display:'Anek Bangla','Hind Siliguri',sans-serif;
  --font-num:'Poppins','Hind Siliguri',sans-serif;
  /* রেডিয়াস — অ্যাপল-প্রিমিয়াম */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  /* শ্যাডো — নরম গভীরতা */
  --sh-xs:0 1px 2px rgba(16,40,36,.05); --sh-sm:0 4px 16px rgba(16,40,36,.07);
  --sh-md:0 14px 38px rgba(16,40,36,.11); --sh-lg:0 28px 64px rgba(16,40,36,.16);
  --sh-orange:0 12px 30px rgba(241,121,18,.30); --sh-green:0 12px 30px rgba(31,157,82,.28);
  /* মোশন */
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.18s; --t-mid:.32s; --t-slow:.55s;
  /* লেআউট */
  --maxw:1280px; --gutter:clamp(16px,4vw,48px); --topbar-h:78px; --mega-h:50px;
}

/* ==========================================================================
   2. রিসেট ও বেস
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--orange-500);outline-offset:3px}
::selection{background:var(--orange-100);color:var(--orange-700)}
.num{font-family:var(--font-num)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--gray-50)}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:999px;border:3px solid var(--gray-50)}
::-webkit-scrollbar-thumb:hover{background:var(--orange-400)}

/* ==========================================================================
   3. টাইপোগ্রাফি
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--ink)}
.display{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;line-height:1.1}
h1{font-size:clamp(1.7rem,4vw,2.8rem)}
h2{font-size:clamp(1.4rem,3vw,2.1rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
.lead{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--text-soft);font-weight:400}
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--orange-600);display:inline-flex;align-items:center;gap:.5rem}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--orange-500);border-radius:2px}
.muted{color:var(--text-soft)} .text-orange{color:var(--orange-600)} .text-green{color:var(--green-700)}

/* সেকশন টাইটেল (আন্ডারলাইন বার) */
.sec-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.8rem);position:relative;padding-bottom:10px;display:inline-block}
.sec-title::after{content:'';position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--orange-500);border-radius:3px}
.sec-title.center{display:block;text-align:center}
.sec-title.center::after{left:50%;transform:translateX(-50%)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.see-all{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--orange-600);font-size:.92rem;transition:gap var(--t-fast)}
.see-all:hover{gap:11px}

/* ==========================================================================
   4. লেআউট
   ========================================================================== */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(36px,5vw,60px)}
.section-sm{padding-block:clamp(26px,3.5vw,42px)}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} .cols-5{grid-template-columns:repeat(5,1fr)}
.flex{display:flex} .between{justify-content:space-between} .center-y{align-items:center}
.gap-sm{gap:10px} .gap{gap:18px} .gap-lg{gap:32px} .wrap{flex-wrap:wrap}
@media(max-width:1000px){.cols-5{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cols-5,.cols-4,.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.cols-2{grid-template-columns:1fr}}

/* ==========================================================================
   5. বাটন
   ========================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:12px 24px;border-radius:var(--r-pill);cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-mid),background var(--t-mid),color var(--t-mid);overflow:hidden;white-space:nowrap;user-select:none}
.btn svg{width:17px;height:17px} .btn:active{transform:scale(.96)}
.btn-primary{background:var(--orange-500);color:#fff;box-shadow:var(--sh-orange)}
.btn-primary:hover{background:var(--orange-600);transform:translateY(-2px)}
.btn-green{background:var(--green-700);color:#fff} .btn-green:hover{background:var(--green-800);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--green-800)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--border)} .btn-ghost:hover{border-color:var(--orange-400);color:var(--orange-600)}
.btn-outline{background:#fff;color:var(--orange-600);border:1.5px solid var(--orange-400)}
.btn-outline:hover{background:var(--orange-500);color:#fff;border-color:var(--orange-500)}
.btn-light{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)} .btn-light:hover{background:rgba(255,255,255,.28)}
.btn-lg{padding:15px 32px;font-size:1.02rem} .btn-sm{padding:9px 16px;font-size:.86rem}
.btn-block{width:100%} .btn-icon{width:44px;height:44px;padding:0;border-radius:50%}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .6s var(--ease-out);pointer-events:none}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ==========================================================================
   6. ব্যাজ
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);line-height:1.2}
.badge-best{background:var(--danger);color:#fff} .badge-pre{background:var(--orange-500);color:#fff}
.badge-save{background:var(--save);color:#fff} .badge-new{background:var(--green-700);color:#fff}
.badge-organic{background:var(--green-500);color:#fff} .badge-out{background:var(--gray-200);color:var(--gray-500)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--border);font-size:.88rem;font-weight:500;cursor:pointer;transition:all var(--t-fast);color:var(--gray-600)}
.chip:hover{border-color:var(--orange-400);color:var(--orange-600)} .chip.active{background:var(--orange-500);color:#fff;border-color:var(--orange-500)}

/* ==========================================================================
   7. কার্ড
   ========================================================================== */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);border:1px solid var(--border);overflow:hidden;transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid)}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.card-pad{padding:clamp(20px,3vw,30px)}
.glass{background:rgba(255,255,255,.85);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.6)}
.bg-cream{background:var(--cream)} .bg-white{background:#fff}

/* ফিচার আইকন কার্ড (যদি লাগে) */
.feature{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;transition:all var(--t-mid) var(--ease-out)}
.feature:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.feature-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;background:var(--orange-100);color:var(--orange-600);font-size:24px}
.feature h3{margin-bottom:8px;font-size:1.15rem} .feature p{color:var(--text-soft);font-size:.94rem}

/* ==========================================================================
   8. প্রোডাক্ট কার্ড (Ghorer Bazar ক্যাটাগরি স্টাইল)
   ========================================================================== */
.product-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid),border-color var(--t-mid)}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--orange-100)}
/* aspect-ratio:1/0 (was here before) is an invalid ratio — browsers ignore
   it, so the box had no fixed size and just followed each image's own
   dimensions. 1/1 forces every card thumbnail to the same square, and
   object-fit:cover fills it edge-to-edge regardless of the source photo's
   own aspect ratio (no more letterboxing/whitespace mismatches). */
.pc-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;padding:0}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.product-card:hover .pc-media img{transform:scale(1.12)}
.pc-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.pc-save{position:absolute;top:10px;right:10px;z-index:2}
.pc-wish{position:absolute;bottom:10px;right:10px;width:36px;height:36px;border-radius:50%;z-index:2;background:#fff;box-shadow:var(--sh-sm);display:grid;place-items:center;color:var(--gray-400);transition:all var(--t-fast);opacity:0;transform:scale(.8)}
.product-card:hover .pc-wish{opacity:1;transform:scale(1)}
.pc-wish:hover{color:var(--danger)} .pc-wish.active{color:var(--danger);opacity:1;transform:scale(1)} .pc-wish.active svg{fill:var(--danger)}
.pc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc-cat{align-self:flex-start;font-size:.68rem;font-weight:700;color:var(--orange-600);background:var(--orange-100);padding:2px 9px;border-radius:var(--r-pill);letter-spacing:.02em}
.pc-title{font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-title:hover{color:var(--orange-600)}
.pc-rating{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--text-soft)}
.stars{color:var(--warning);letter-spacing:1px;font-size:.85rem}
/* Smart, distinct price roles (current / old / save) — see pahari_format_sale_price().
   The %-off is already shown as a corner ribbon (.pc-save), so the inline
   .pahari-price-save text is hidden here to avoid repeating/wrapping badly.
   The bold/ink treatment lives on .pc-price itself (not just .pahari-price-now)
   so every price shape — a plain regular price, a "min – max" variable-product
   range, or a sale price — inherits the exact same look. Only .pahari-price-old
   explicitly overrides back to the muted strikethrough style. */
.pc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-family:var(--font-num);font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-top:2px}
/* Variable-product prices (and the price swapped in by updateCardPrice() in
   theme.js) arrive wrapped in <span class="price"> — which WooCommerce's own
   stylesheet colors olive-green (#77a464) with its own font sizing, making
   variable cards look different from simple ones. Force every inner piece
   to inherit .pc-price's ink/bold/num-font look; !important because WC's
   ".woocommerce div.product span.price" selector outranks ours on specificity. */
/* Current-price paths ONLY (direct .amount / ins / .pahari-price-now) — a
   naive ".price .amount" would also catch the .amount inside <del> and, on
   specificity, beat the muted old-price rule below, blowing the struck
   price up to full size. */
.pc-price > .amount,.pc-price > .amount bdi,
.pc-price .price > .amount,.pc-price .price > .amount bdi,
.pc-price ins,.pc-price ins .amount,.pc-price ins bdi,
.pc-price .pahari-price-now,.pc-price .pahari-price-now .amount,.pc-price .pahari-price-now bdi{display:inline;color:var(--ink)!important;font-size:inherit!important;font-weight:inherit!important;font-family:inherit!important;letter-spacing:inherit}
.pc-price .price{display:contents}
.pc-price del,.pc-price del .amount,.pc-price del bdi,.pc-price .pahari-price-old,.pc-price .pahari-price-old .amount,.pc-price .pahari-price-old bdi{font-size:.82rem!important;font-weight:500!important;color:var(--gray-400)!important;text-decoration:line-through;font-family:var(--font-num)!important}
.pc-price ins{text-decoration:none;background:transparent}
.pc-price .pahari-price-save{display:none}
.pc-stock{font-size:.74rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.pc-stock::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(46,157,95,.16)}
.pc-stock.low::before{background:var(--warning);box-shadow:0 0 0 3px rgba(232,163,15,.2)}
.pc-stock.out::before{background:var(--gray-400);box-shadow:none}
.pc-add-btn{margin-top:auto;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1.5px solid var(--orange-400);border-radius:var(--r-pill);color:var(--orange-600);font-weight:600;font-size:.9rem;transition:all var(--t-fast)}
.pc-add-btn:hover{background:var(--orange-500);color:#fff;border-color:var(--orange-500)}
.pc-add-btn svg{width:16px;height:16px}
/* নতুন অ্যাকশন: কোয়ান্টিটি + কার্ট + এখনই কিনুন */
.pc-actions{margin-top:auto;display:flex;gap:8px;align-items:stretch}
.pc-qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-pill);background:#fff;flex-shrink:0;overflow:hidden}
.pc-qty button{width:30px;height:38px;display:grid;place-items:center;color:var(--gray-600);font-size:1.15rem;line-height:1;transition:all var(--t-fast)}
.pc-qty button:hover{background:var(--orange-100);color:var(--orange-600)}
.pc-qval{min-width:26px;text-align:center;font-weight:700;font-family:var(--font-num);font-size:.92rem}
.pc-cart{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:var(--r-pill);border:1.5px solid var(--orange-400);color:var(--orange-600);font-weight:600;font-size:.85rem;transition:all var(--t-fast);background:#fff}
.pc-cart:hover{background:var(--orange-500);color:#fff;border-color:var(--orange-500);box-shadow:var(--sh-orange)}
.pc-cart svg{width:16px;height:16px}
.pc-cart.added{background:var(--green-cta);border-color:var(--green-cta);color:#fff}
.pc-buy{margin-top:8px;width:100%;height:40px;border-radius:var(--r-pill);background:var(--grad-green-cta);color:#fff;font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:var(--sh-green);transition:all var(--t-fast)}
.pc-buy:hover{filter:brightness(1.06);transform:translateY(-2px)}
.pc-buy svg{width:16px;height:16px}
/* In-button "View cart" state (after add) + hide WooCommerce's separate link. */
.pc-cart.pc-added{background:var(--green-cta);border-color:var(--green-cta);color:#fff}
.pc-cart.pc-added:hover{filter:brightness(1.05)}
.product-card .added_to_cart,.product-card a.added_to_cart.wc-forward{display:none!important}
.pc-actions.no-qty .pc-cart{flex:1 1 100%}
/* Product card inside the Elementor Products widget — keep layout intact. */
.pahari-products-widget .grid{display:grid}
.pahari-products-widget .cat-row-scroll{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.pahari-products-widget .cat-row-scroll::-webkit-scrollbar{display:none}
.pahari-products-widget .cat-row-scroll .product-card{flex:0 0 230px}
.pahari-products-widget .product-card .pc-actions{display:flex}

/* ===== Compact + premium product card (refined) ===== */
.pc-body{padding:12px 13px 14px;gap:5px}
.pc-cat{font-size:.67rem;text-transform:uppercase;letter-spacing:.04em}
.pc-title{font-size:.92rem;line-height:1.3;min-height:2.4em;margin-bottom:1px}
.pc-price{font-size:1.05rem;margin-top:1px}
.pc-price .pahari-price-old{font-size:.78rem}
.pc-actions{gap:7px;margin-top:8px}
.pc-qty{border-width:1.5px;border-radius:var(--r-pill)}
.pc-qty button{width:27px;height:36px;font-size:1.02rem}
.pc-qval{min-width:20px;font-size:.86rem}
.pc-cart{height:36px;font-size:.83rem;font-weight:700;white-space:nowrap;gap:6px;padding:0 12px;min-width:0;background-color:var(--orange-500);background-image:var(--grad-orange);color:#fff!important;border:none;box-shadow:0 4px 14px rgba(241,121,18,.26);transition:transform var(--t-fast),box-shadow var(--t-fast),filter var(--t-fast)}
.pc-cart:hover{filter:brightness(1.06);transform:translateY(-1px);background-color:var(--orange-500);background-image:var(--grad-orange);color:#fff!important;border:none;box-shadow:var(--sh-orange)}
.pc-cart .pc-cart-label{color:#fff}
.pc-cart.pc-added,.pc-cart.added{background-color:var(--green-cta)!important;background-image:none!important;color:#fff!important}
.pc-cart svg{width:15px;height:15px;flex-shrink:0}

/* Out-of-stock "স্টকে এলে জানান" — sits in the exact slot the qty+cart row
   normally occupies (inc/stock-requests.php's pahari_render_stock_notify_form()),
   so an out-of-stock card reads as a variant of the same design, not a
   broken/degraded one. .pc-notify--card = product-card size; .pc-notify--full
   = single product page (taller, roomier — see the single-product rules below). */
.pc-notify{margin-top:8px}
.pc-notify-btn{width:100%;height:38px;border-radius:var(--r-pill);background:var(--off-white);border:1.5px solid var(--border);color:var(--gray-600);font-weight:700;font-size:.83rem;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:all var(--t-fast);cursor:pointer}
.pc-notify-btn:hover{border-color:var(--orange-400);color:var(--orange-600);background:#fff}
.pc-notify-btn svg{width:15px;height:15px;flex-shrink:0}
/* [hidden] must win over the plain class rule below — display:flex on
   .pc-notify-form alone out-specificities the browser's native
   "[hidden]{display:none}" UA rule, so the form and its trigger button both
   stayed visible at once until this was added. */
.pc-notify-form[hidden]{display:none}
.pc-notify-form{display:flex;gap:6px;margin-top:2px}
.pc-notify-form input{flex:1;min-width:0;height:38px;padding:0 12px;border:1.5px solid var(--border);border-radius:var(--r-pill);font-size:.82rem;font-family:inherit;background:#fff}
.pc-notify-form input:focus{outline:none;border-color:var(--orange-400)}
.pc-notify-form button{flex-shrink:0;height:38px;padding:0 16px;border-radius:var(--r-pill);border:none;background-color:var(--orange-500);background-image:var(--grad-orange);color:#fff;font-weight:700;font-size:.82rem;cursor:pointer}
.pc-notify-form button:disabled{opacity:.6;cursor:default}
/* [hidden] on this one too — same reasoning as .pc-notify-form above. */
.pc-notify-done[hidden]{display:none}
/* "রিকোয়েস্ট করা হয়েছে" — same pill shape/size as .pc-notify-btn so the slot
   never resizes, filled (not outline) bell + green tint = "you're on the
   list" at a glance. Rendered server-side already-requested (returning
   visitor, same IP — pahari_render_stock_notify_form()) or swapped in by JS
   right after a successful submit (theme.js stockNotify()). */
.pc-notify-done{width:100%;height:38px;border-radius:var(--r-pill);background:var(--green-100,#dcf0e3);border:1.5px solid transparent;color:var(--green-700,#0f6b3f);font-weight:700;font-size:.83rem;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:default}
.pc-notify-done svg{width:15px;height:15px;flex-shrink:0}
.pc-notify-msg{margin:6px 0 0;font-size:.78rem;color:var(--green-700,#0f6b3f);line-height:1.4}
.pc-notify-msg.is-error{color:var(--danger)}
.pc-cart .pc-cart-label{white-space:nowrap}
.pc-buy{height:38px;font-size:.85rem;margin-top:7px}
.pc-buy svg{width:15px;height:15px}
.pc-var-select{padding:7px 10px;font-size:.8rem;border-radius:var(--r-sm)}
.pc-wish{width:32px;height:32px;bottom:8px;right:8px;opacity:1;transform:none}
@media(max-width:600px){
  .pc-body{padding:11px 11px 12px}
  .pc-title{font-size:.86rem;min-height:2.3em}
  .pc-price{font-size:1rem}
  .pc-price .pahari-price-old{font-size:.74rem}
  .pc-cart{padding:0 8px;font-size:.8rem;height: 30px;}
  .pc-cart svg{display:none}
  .pc-actions{align-items: center;}
  .pc-qty{width: 40%;height: 30px;}
  .pc-qty button{width:25px;height:30px}
  .pc-var-group{padding: 10px; margin: -10px;}
  .pc-var-cap{padding: 5px 5px !important;border-radius: var(--r-sm) !important; font-size: x-small !important;}
}

/* Mobile search toggle — hidden on desktop; shown in the mobile-header block below. */
.topbar-search-toggle{display:none!important}
.pahari-products-widget .product-card .pc-buy{display:inline-flex;width:100%}
/* Inline variation selectors on variable product cards (quick-cart). */
.pc-variations{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;margin-bottom:8px}
.pc-var-select{flex:1 1 auto;min-width:0;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.82rem;background:#fff;color:var(--ink);cursor:pointer}
.pc-var-select:focus{border-color:var(--orange-400);outline:none}
.pc-variations + .pc-actions{margin-top:0}
/* Capsule-style variation buttons on cards. When there are more options than
   fit, the row scrolls horizontally (drag-scroll, see theme.js) instead of
   wrapping to a second line, and a right-edge fade hints there's more. */
.pc-variations--capsule{gap:8px}
.pc-var-group{display:flex;flex-wrap:nowrap;gap:5px;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%); padding: 10px; margin: -10px;}
.pc-var-group::-webkit-scrollbar{display:none}
.pc-var-cap{flex-shrink:0;padding:5px 11px;border:1.5px solid var(--border);border-radius:var(--r-pill);font-size:.78rem;font-weight:600;color:var(--gray-600);background:#fff;cursor:pointer;transition:all var(--t-fast);line-height:1.2}
/* Safety net: a capsule with no label (an "Any …" variation value slipping
   through a cache, a plugin, or older markup) renders as a baffling blank
   pill — never show one, wherever it came from. */
.pc-var-cap:empty,.var-swatch:empty{display:none!important}
.pc-var-cap:hover{border-color:var(--orange-400);color:var(--orange-600)}
/* Solid orange UNDER the gradient: if --grad-orange ever resolves invalid
   (a bad color option once collapsed it), the capsule stays visibly orange
   instead of turning into white-on-white "blank" pills. */
.pc-var-cap.active{background-color:var(--orange-500);background-image:var(--grad-orange);border-color:transparent;color:#fff;box-shadow:0 3px 9px rgba(241,121,18,.26)}

/* হরাইজন্টাল টপ-সেলিং কার্ড */
.sell-card{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;transition:all var(--t-mid) var(--ease-out)}
.sell-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.sell-card .sc-img{aspect-ratio:1;display:grid;place-items:center}
.sell-card .sc-img img{max-height:140px;object-fit:contain;mix-blend-mode:multiply}
.sell-card .sc-best{position:absolute;top:14px;right:14px}
.sell-card h3{font-size:1.15rem;margin-bottom:8px}
.sell-card .sc-price{font-family:var(--font-num);font-weight:700;font-size:1.2rem;color:var(--orange-600)}
.sell-card .sc-price .old{font-size:.9rem;color:var(--gray-400);text-decoration:line-through;margin-left:7px}
.sell-card .sc-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
@media(max-width:520px){.sell-card{grid-template-columns:96px 1fr;padding:14px} .sell-card .sc-img img{max-height:96px}}

/* ==========================================================================
   9. দুই-স্তরের হেডার (টপবার + মেগা নেভ)
   ========================================================================== */
/* টপবার স্বাভাবিকভাবে স্ক্রল হয়ে যায় (স্টিকি নয়); মেনুবার (.mega) টপে স্টিকি হয়।
   এজন্য default হেডারকে display:contents করা হয় — যাতে .mega-এর containing block
   হয় <body>, এবং পুরো পেজ স্ক্রল করলেও মেনুবার টপে আটকে থাকে। */
.announce-bar{background:var(--grad-green-cta,linear-gradient(135deg,#1c8746,#2eb05f));color:#fff;font-size:.8rem;font-weight:600;position:relative;z-index:3;overflow:hidden}
.announce-inner{max-width:var(--maxw);margin-inline:auto;padding:6px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:14px}
.announce-inner a{color:inherit}
.announce-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.announce-left .ab-text{opacity:.95}
.ab-phone{display:inline-flex;align-items:center;gap:5px;color:inherit;white-space:nowrap}
.ab-phone svg{opacity:.9}
.ab-phone em{font-style:normal;opacity:.82}
.ab-phone:hover{text-decoration:underline}
.announce-socials{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ab-soc{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);color:inherit;transition:all var(--t-fast)}
.ab-soc:hover{background:#fff;color:var(--green-700,#235247)}
.announce-ticker{flex:1;overflow:hidden;min-width:0}
.announce-ticker-track{display:inline-flex;gap:42px;white-space:nowrap;animation:announceTicker 24s linear infinite;will-change:transform}
.atk-item{display:inline-flex;align-items:center;gap:8px}
.atk-item::before{content:'•';opacity:.55}
.announce-bar:hover .announce-ticker-track{animation-play-state:paused}
@keyframes announceTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:760px){
  /* Whatever stays visible wraps neatly across multiple centered lines. */
  .announce-inner{flex-direction:column;align-items:center;gap:6px;font-size:.76rem;text-align:center;padding:8px var(--gutter)}
  /* width:100% forces the group to the viewport width so its items wrap
     instead of overflowing (was the cause of the clipped phone numbers). */
  .announce-left{width:100%;max-width:100%;justify-content:center;gap:6px 14px}
  .announce-socials{width:100%;justify-content:center}
  .ab-phone{max-width:100%}
  .ab-hide-m{display:none!important}
  /* If a whole group becomes empty after hiding, collapse its gap. */
  .announce-left:empty,.announce-socials:empty{display:none}
}
/* Header icon labels toggle (Theme Options → আইকনের নিচে নাম). */
.top-utils.header-icons-only .util > span:not(.count):not(.util-label-hide){display:none}
.site-header:not(.site-header--custom){display:contents}
/* z-index must beat .mega's 60: .topbar is a stacking context, so the
   live-search dropdown inside it can never rise above the nav bar below
   no matter how high ITS own z-index is — only the topbar's can fix that. */
.topbar{background:var(--glass-white);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid rgba(255,255,255,.5);position:relative;z-index:70}
.topbar-inner{max-width:var(--maxw);margin-inline:auto;padding:12px var(--gutter);display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-img,.logo img,.logo .custom-logo{height:52px!important;width:auto!important;max-width:220px;display:block!important;visibility:visible!important}
.logo-mark{width:44px;height:44px;border-radius:12px;background:var(--grad-orange);display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:var(--sh-sm)}
.logo-txt{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;color:var(--ink);line-height:1}
.logo-txt small{display:block;font-family:var(--font-body);font-size:.58rem;font-weight:600;letter-spacing:.12em;color:var(--orange-500);margin-top:3px}
@media(max-width:920px){.logo-img{height:44px}}
.topsearch{flex:1;max-width:560px;position:relative;margin-inline:auto}
.topsearch input{width:100%;padding:13px 52px 13px 20px;border:1px solid var(--border);background:var(--gray-50);border-radius:var(--r-pill);font-size:.95rem;transition:all var(--t-fast)}
.topsearch input:focus{background:#fff;border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(232,116,15,.1)}
.topsearch button{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--orange-500);color:#fff;display:grid;place-items:center}
/* Live search-as-you-type dropdown (see headerLiveSearch() in theme.js). */
.search-live{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg);max-height:420px;overflow-y:auto;padding:6px}
.search-live-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-sm);transition:background var(--t-fast)}
.search-live-item:hover{background:var(--off-white)}
.sli-img{width:44px;height:44px;flex-shrink:0;border-radius:var(--r-sm);overflow:hidden;background:#fff;border:1px solid var(--border)}
.sli-img img{width:100%;height:100%;object-fit:cover}
.sli-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.sli-name{font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sli-price{font-family:var(--font-num);font-size:.82rem;font-weight:700;color:var(--orange-600)}
.sli-price del{color:var(--gray-400);font-weight:500;margin-right:5px}
.sli-price del .amount{font-size:.9em}
.search-live-all{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid var(--border);font-weight:600;font-size:.86rem;color:var(--orange-600)}
.search-live-all:hover{color:var(--orange-700)}
.search-live-empty{padding:16px 10px;text-align:center;color:var(--text-soft);font-size:.88rem}
.top-utils{display:flex;align-items:center;gap:6px;flex-shrink:0}
.util{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:var(--r-md);color:var(--gray-600);font-size:.72rem;font-weight:500;transition:all var(--t-fast);position:relative}
.util:hover{color:var(--orange-600);background:var(--orange-100)}
.util svg{width:22px;height:22px}
.util .count{position:absolute;top:-1px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--orange-500);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center}
.topbar-toggle{display:none}

.mega{background:var(--glass-dark);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);position:sticky;top:0;z-index:60;transition:background var(--t-mid),box-shadow var(--t-mid);border-bottom:1px solid rgba(255,255,255,.07)}
.mega.stuck{background:rgba(16,40,36,.95);box-shadow:0 10px 30px rgba(16,40,36,.28)}
.mega-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:2px;height:var(--mega-h)}
/* Compact brand logo — appears in the sticky menubar once scrolled. */
.mega-logo{display:none;align-items:center;flex-shrink:0;margin-right:14px}
.mega-logo img{height:30px;width:auto;display:block;filter:brightness(0) invert(1)}
.mega.stuck .mega-logo{display:flex}
/* প্রায়োরিটি+ মেনু: .mega-links নিজে overflow:hidden হওয়ায় জায়গা না
   থাকলে আইটেম আর স্ক্রল বা কাটা যায় না — assets/js/theme.js-এর
   priorityNav() প্রতিটি .mega-link মাপে, না আঁটলে সেগুলোকে এখান থেকে
   সরিয়ে .mega-more-panel ড্রপডাউনে ক্লোন করে দেয়, তাই শেষের আইটেমগুলো
   হারিয়ে না গিয়ে "আরও"-এর নিচে থেকে যায়। */
.mega-links{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
.mega-link{display:inline-flex;flex-shrink:0;align-items:center;gap:5px;padding:0 15px;height:var(--mega-h);color:rgba(255,255,255,.88);font-size:.92rem;font-weight:500;white-space:nowrap;transition:all var(--t-fast);position:relative;border-bottom:3px solid transparent}
.mega-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.mega-link.active{color:#fff;border-color:var(--orange-500)}
.mega-link .ca{opacity:.6;font-size:.7rem}
.mega-more{position:relative;flex-shrink:0}
.mega-more-btn{
	display:flex;align-items:center;gap:5px;padding:0 15px;height:var(--mega-h);
	background:none;border:0;color:rgba(255,255,255,.88);font-size:.92rem;font-weight:500;
	white-space:nowrap;cursor:pointer;transition:all var(--t-fast);font-family:inherit;
}
.mega-more-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.mega-more-btn svg{transition:transform var(--t-fast)}
.mega-more.open .mega-more-btn{color:#fff;background:rgba(255,255,255,.07)}
.mega-more.open .mega-more-btn svg{transform:rotate(180deg)}
.mega-more-panel{
	position:absolute;top:100%;right:0;margin-top:6px;min-width:210px;
	background:#16332c;border:1px solid rgba(255,255,255,.1);border-radius:12px;
	box-shadow:0 16px 36px rgba(0,0,0,.35);padding:6px;display:none;flex-direction:column;gap:1px;z-index:70;
}
.mega-more.open .mega-more-panel{display:flex}
.mega-more-panel a{display:block;padding:10px 13px;border-radius:8px;color:rgba(255,255,255,.88);font-size:.88rem;font-weight:500;white-space:nowrap;text-decoration:none;transition:all var(--t-fast)}
.mega-more-panel a:hover{background:rgba(255,255,255,.09);color:#fff}
.mega-more-panel a.active{color:var(--orange-500)}
.mega-more-panel a.mega-more-sub{padding-left:26px;font-size:.83rem;color:rgba(255,255,255,.68)}
/* Top-level items that have children (inc/nav-walkers.php's 'mega' mode) —
   a hover/focus dropdown, same visual language as .mega-more-panel above. */
.mega-item{position:relative;flex-shrink:0;display:flex;align-items:center}
.mega-item .mega-link{padding-right:8px}
.mega-item .ca{display:flex;align-items:center;color:rgba(255,255,255,.6);margin-left:-4px;transition:transform var(--t-fast)}
.mega-item:hover .ca,.mega-item:focus-within .ca{transform:rotate(180deg)}
.mega-submenu{
	position:absolute;top:100%;left:0;min-width:200px;
	background:#16332c;border:1px solid rgba(255,255,255,.1);border-radius:12px;
	box-shadow:0 16px 36px rgba(0,0,0,.35);padding:6px;display:none;flex-direction:column;gap:1px;z-index:65;
}
.mega-item:hover .mega-submenu,.mega-item:focus-within .mega-submenu{display:flex}
.mega-sublink{display:block;padding:10px 13px;border-radius:8px;color:rgba(255,255,255,.88);font-size:.88rem;font-weight:500;white-space:nowrap;text-decoration:none;transition:all var(--t-fast)}
.mega-sublink:hover{background:rgba(255,255,255,.09);color:#fff}
.mega-sublink.active{color:var(--orange-500)}
@media(max-width:920px){
  .topsearch{order:3;flex-basis:100%;max-width:none;margin-top:4px}
  .topbar-inner{flex-wrap:wrap;gap:12px}
  .top-utils .util-label-hide{display:none}
  .mega{display:none}
  .topbar-toggle{display:grid}
}
/* Definitive mobile header (placed AFTER the ≤920 block so it wins):
   centered logo · left: search-icon · right: menu toggle · slide-down search. */
@media(max-width:760px){
  .topbar-inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:10px var(--gutter);min-height:56px}
  .site-header .logo{position:absolute;left:50%;top:11px;transform:translateX(-50%);margin:0;display:flex!important;z-index:1}
  .site-header .logo .logo-img,.site-header .logo img,.site-header .logo .custom-logo{height:34px!important;width:auto!important;max-width:150px;display:block!important;visibility:visible!important}
  .top-utils{order:1;width:100%;display:flex;align-items:center;gap:2px;margin:0}
  .topbar-search-toggle{display:flex!important}
  .top-utils > a.util{display:none}   /* track/signin/wishlist/cart live in the bottom-nav */
  .top-utils .util{padding:6px}
  .util svg{width:22px;height:22px}
  .topbar-toggle{margin-left:auto!important;order:9}
  .topsearch{order:5;flex:1 0 100%;max-width:none;max-height:0;overflow:hidden;opacity:0;margin:0;padding:0;transition:max-height .35s var(--ease-out),opacity .3s ease,margin .3s ease}
  .topbar.search-open .topsearch{max-height:72px;opacity:1;margin-top:10px}
  /* Lift the slide-down clip while the live-search dropdown has results —
     otherwise .topsearch's own overflow:hidden (used for the open/close
     animation) would cut the results panel off. */
  .topbar.search-open .topsearch.has-live{overflow:visible}
  .topbar.search-open .topbar-search-toggle{color:var(--orange-600);background:var(--orange-100)}
}

/* মোবাইল ড্রয়ার মেনু */
.m-menu{position:fixed;inset:0;z-index:1100;visibility:hidden}
.m-menu.open{visibility:visible}
.m-menu-scrim{position:absolute;inset:0;background:rgba(19,48,42,.45);opacity:0;transition:opacity var(--t-mid)}
.m-menu.open .m-menu-scrim{opacity:1}
.m-menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(86%,340px);background:#fff;padding:22px;transform:translateX(100%);transition:transform var(--t-mid) var(--ease-out);display:flex;flex-direction:column;gap:4px;overflow-y:auto;box-shadow:var(--sh-lg)}
.m-menu.open .m-menu-panel{transform:translateX(0)}
.m-menu-panel a{padding:13px 12px;border-radius:var(--r-sm);font-weight:600;font-size:1.02rem;color:var(--gray-600);transition:all var(--t-fast)}
.m-menu-panel a:hover,.m-menu-panel a.active{background:var(--orange-100);color:var(--orange-600)}
/* Items with children (inc/nav-walkers.php's 'mobile' mode) — link still
   navigates normally, a separate chevron button expands the submenu. */
.mm-row{display:flex;align-items:center;gap:2px}
.mm-row a{flex:1 1 auto;min-width:0}
.mm-toggle{
	flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
	border:0;background:none;border-radius:50%;color:var(--gray-500);cursor:pointer;transition:all var(--t-fast);
}
.mm-toggle:hover{background:var(--gray-100,#f0ede4)}
.mm-item.open .mm-toggle{transform:rotate(180deg);color:var(--orange-600)}
.mm-sub{max-height:0;overflow:hidden;transition:max-height var(--t-mid) var(--ease);padding-left:14px}
.mm-sublink{display:block;padding:11px 12px;font-weight:500;font-size:.94rem;color:var(--gray-600);border-radius:var(--r-sm);transition:all var(--t-fast)}
.mm-sublink:hover,.mm-sublink.active{background:var(--orange-100);color:var(--orange-600)}

/* ==========================================================================
   10. ফ্লোটিং কার্ট ডক — ডান পাশে (Ghorer Bazar স্টাইল)
   ========================================================================== */
.cart-dock{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:850;transition:all var(--t-mid) var(--ease-out)}
/* border:0/font:inherit — this is a real <button> now (keyboard/AT access),
   so neutralise the browser's default button chrome. */
.cart-dock-collapsed{position:relative;border:0;font:inherit;background-color:var(--orange-500);background-image:var(--grad-orange);color:#fff;border-radius:16px 0 0 16px;padding:15px 13px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;box-shadow:var(--sh-orange);min-width:76px;transition:transform var(--t-fast) var(--spring),box-shadow var(--t-mid);animation:dockFloat 3.5s ease-in-out infinite}
.cart-dock-collapsed::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(241,121,18,.5);animation:dockPulse 2.6s ease-out infinite}
.cart-dock-collapsed:hover{transform:translateX(-4px) scale(1.04);box-shadow:0 16px 40px rgba(241,121,18,.45)}
.cart-dock.expanded .cart-dock-collapsed{display:none}
@keyframes dockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dockPulse{0%{box-shadow:0 0 0 0 rgba(241,121,18,.5)}70%{box-shadow:0 0 0 16px rgba(241,121,18,0)}100%{box-shadow:0 0 0 0 rgba(241,121,18,0)}}
.cdc-bag{position:relative;width:34px;height:34px;display:grid;place-items:center}
.cdc-bag .count{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#fff;color:var(--orange-600);font-size:.66rem;font-weight:800;display:grid;place-items:center;border:1.5px solid var(--orange-500)}
.cdc-items{font-size:.74rem;font-weight:600}
.cdc-total{font-family:var(--font-num);font-weight:700;font-size:.82rem;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:6px;margin-top:2px}

.cart-dock-expanded{display:none;width:340px;max-width:92vw;background:var(--glass-white);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.6);border-right:none;border-radius:20px 0 0 20px;box-shadow:var(--sh-lg);overflow:hidden;flex-direction:column;transform-origin:right center}
.cart-dock.expanded .cart-dock-expanded{display:flex;animation:cartOpen .5s var(--spring)}
@keyframes cartOpen{0%{opacity:0;transform:translateX(60px) scale(.9)}100%{opacity:1;transform:none}}
.cart-dock.expanded .cde-item{animation:cartItemIn .45s var(--ease-out) backwards}
.cart-dock.expanded .cde-item:nth-child(1){animation-delay:.08s}
.cart-dock.expanded .cde-item:nth-child(2){animation-delay:.14s}
.cart-dock.expanded .cde-item:nth-child(3){animation-delay:.2s}
.cart-dock.expanded .cde-item:nth-child(n+4){animation-delay:.26s}
@keyframes cartItemIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.cde-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;background:var(--grad-green);color:#fff}
.cde-head h4{font-size:1.05rem;color:#fff}
.cde-close{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.8);transition:all var(--t-fast)}
.cde-close:hover{background:rgba(255,255,255,.15);color:#fff}
.cde-progress{padding:12px 18px}
.cde-progress p{font-size:.78rem;color:var(--text-soft);margin-bottom:7px}
.cde-progress p b{color:var(--orange-600)}
.cde-bar{height:7px;border-radius:999px;background:var(--gray-100b);overflow:hidden}
.cde-bar i{display:block;height:100%;background:var(--grad-orange);border-radius:999px;transition:width var(--t-slow) var(--ease-out)}
.cde-items{max-height:240px;overflow-y:auto;padding:4px 12px;display:flex;flex-direction:column;gap:6px}
.cde-item{display:flex;gap:11px;align-items:center;padding:8px;border-radius:var(--r-sm);transition:background var(--t-fast)}
.cde-item:hover{background:var(--gray-50)}
.cde-item img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--gray-50)}
.cde-item .info{flex:1;min-width:0}
.cde-item .info b{font-size:.85rem;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cde-item .info span{font-size:.78rem;color:var(--text-soft)}
.cde-item .rm{color:var(--gray-400);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;transition:all var(--t-fast)}
.cde-item .rm:hover{background:#fde7e4;color:var(--danger)}
.cde-empty{padding:26px 18px;text-align:center;color:var(--text-soft);font-size:.9rem}
.cde-foot{padding:14px 18px 16px;border-top:1px solid var(--border);flex-shrink:0}
.cde-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cde-total span{color:var(--text-soft);font-size:.9rem}
.cde-total b{font-family:var(--font-num);font-size:1.25rem;color:var(--orange-600)}
.cde-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Floating cart shows on mobile too (same as desktop). Sits clear of the bottom-nav. */
@media(max-width:760px){
  .cart-dock{display:block}
  .cart-dock-collapsed{min-width:60px;padding:12px 10px}
  .cdc-items,.cdc-total{display:none}
  /* top:50% vertical-centering drifts the dock over whatever happens to sit
     at viewport-middle once the page is scrolled — on the checkout form
     that's frequently a text input (confirmed: it was covering the phone
     field). The bottom-nav's own "কার্ট" tab already gives mobile checkout
     visitors cart access, so hide the redundant floating dock there only —
     every other mobile page keeps the original always-visible behaviour. */
  .woocommerce-checkout .cart-dock{display:none}
}
@keyframes cartBounce{0%,100%{transform:scale(1)}35%{transform:scale(1.2)}60%{transform:scale(.92)}}
.cart-bounce{animation:cartBounce .5s var(--spring)}

/* --- Full-height drawer + AJAX mini-cart (qty + remove) upgrade --- */
/* z-index above .bottom-nav (880) once expanded full-screen — otherwise
   the mobile bottom nav bar paints over .cde-foot's buttons at the
   bottom edge, since .cart-dock's own resting z-index (850) loses to it. */
.cart-dock.expanded{top:0;transform:none;height:100vh;z-index:900}
.cart-dock.expanded .cart-dock-expanded{display:flex;width:380px;max-width:94vw;height:100vh;max-height:100vh;border-radius:0;flex-direction:column;position:relative}
.cart-dock-expanded .cde-items{flex:1;min-height:0;max-height:none;overflow:hidden;padding:0;display:flex;flex-direction:column}
.mc-foot-info{flex-shrink:0;padding:0 16px 4px}
/* Lives inside .mc-freebar-slot (a fixed sibling of .cde-items, moved
   there by moveFreebarToSlot() in theme.js) — always sits directly above
   .cde-foot's buttons regardless of how tall .cde-items ends up being. */
.mc-freebar-slot{flex-shrink:0;margin-top:auto}
.mc-freebar{padding:10px 16px 4px}
.mc-freebar p{font-size:.8rem;color:var(--text-soft);margin-bottom:7px}
.mc-freebar p b{color:var(--orange-600)}
.mc-freebar-track{display:block;height:7px;border-radius:999px;background:var(--gray-100b,#eef1f0);overflow:hidden}
.mc-freebar-track > span{display:block;height:100%;background:var(--grad-orange);border-radius:999px;transition:width .5s var(--ease-out)}
.cde-list{list-style:none;margin:0;padding:8px 14px;display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto;min-height:0}
.cde-item{display:flex;gap:11px;align-items:center;padding:9px;border-radius:var(--r-sm)}
.cde-item:hover{background:var(--gray-50)}
.cde-thumb{flex-shrink:0;display:block}
.cde-thumb img{width:50px;height:50px;border-radius:10px;object-fit:cover;background:var(--gray-50);display:block}
.cde-info{flex:1;min-width:0}
.cde-name{font-size:.86rem;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.cde-meta{font-size:.76rem;color:var(--text-soft);margin:1px 0 6px}
.cde-qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.cde-qty .cde-step{width:26px;height:26px;display:grid;place-items:center;font-size:1rem;color:var(--gray-600);background:#fff}
.cde-qty .cde-step:hover{background:var(--orange-100);color:var(--orange-600)}
.cde-qval{min-width:26px;text-align:center;font-size:.85rem;font-weight:700;font-family:var(--font-num)}
.cde-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.cde-remove{color:var(--gray-400);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;transition:all var(--t-fast)}
.cde-remove:hover{background:#fde7e4;color:var(--danger)}
.cde-line{font-size:.85rem;font-weight:700;font-family:var(--font-num);color:var(--ink)}
.cde-subtotal{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 8px;border-top:1px solid var(--border)}
.cde-subtotal b{font-family:var(--font-num);font-size:1.15rem;color:var(--orange-600)}
.cart-dock.loading .cart-dock-expanded::after{content:'';position:absolute;top:0;left:-40%;height:3px;width:40%;background:linear-gradient(90deg,transparent,var(--orange-500),transparent);animation:dockBar 1s linear infinite;z-index:5}
@keyframes dockBar{0%{left:-40%}100%{left:100%}}
.cart-dock.loading .cde-items{opacity:.55;pointer-events:none;transition:opacity .15s}

/* ==========================================================================
   11. ব্যানার গ্রিড (হিরো)
   ========================================================================== */
.banner-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:14px}
.banner{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;box-shadow:var(--sh-sm)}
.banner img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.banner:hover img{transform:scale(1.05)}
.banner.tall{aspect-ratio:auto;grid-row:span 1}
@media(max-width:880px){.banner-grid{grid-template-columns:1fr 1fr}.banner:first-child{grid-column:1/-1}}
@media(max-width:560px){.banner-grid{grid-template-columns:1fr}.banner:first-child{grid-column:auto}}

/* ==========================================================================
   12. ক্যাটাগরি ক্যারোসেল
   ========================================================================== */
.cat-rail-wrap{position:relative}
/* scroll-snap "proximity" (not mandatory): mandatory snapping fights both
   finger-swipes and the mouse drag-scroll — the rail kept yanking itself to
   the nearest tile mid-drag. Proximity keeps tidy resting positions but lets
   a drag land wherever the user leaves it. */
.cat-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:6px 2px 10px;scrollbar-width:none}
.cat-rail::-webkit-scrollbar{display:none}
.cat-tile{flex:0 0 150px;scroll-snap-align:start;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 14px;text-align:center;transition:all var(--t-mid) var(--ease-out)}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--orange-100)}
.cat-tile .ci{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;background:var(--gray-50);display:grid;place-items:center;font-size:38px;transition:transform var(--t-mid) var(--spring)}
.cat-tile:hover .ci{transform:scale(1.08)}
.cat-tile b{font-weight:600;font-size:.95rem;color:var(--ink)}
.rail-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--orange-500);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-md);z-index:5;transition:all var(--t-fast)}
.rail-btn:hover{background:var(--orange-600);transform:translateY(-50%) scale(1.08)}
.rail-btn.prev{left:-10px} .rail-btn.next{right:-10px}
@media(max-width:760px){
  .rail-btn{display:none}
  .cat-tile{flex-basis:120px}
  /* Widget opt-in ("Arrows on Mobile" switcher): compact arrows return. */
  .cat-rail-wrap.arrows-m .rail-btn{display:grid;width:34px;height:34px}
  .cat-rail-wrap.arrows-m .rail-btn.prev{left:-4px}
  .cat-rail-wrap.arrows-m .rail-btn.next{right:-4px}
}

/* ব্র্যান্ড রেল */
.brand-rail{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.brand-rail::-webkit-scrollbar{display:none}
.brand-tile{flex:0 0 240px;height:110px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--gray-400);transition:all var(--t-mid)}
.brand-tile:hover{color:var(--green-700);box-shadow:var(--sh-sm)}
@media(max-width:560px){.brand-tile{flex-basis:160px}}

/* ==========================================================================
   13. ফর্ম
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.field label{font-size:.88rem;font-weight:600;color:var(--gray-600)}
.field label .req{color:var(--danger)}
.input,.select,.textarea{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:all var(--t-fast);font-size:.95rem;font-family:var(--font-body)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(232,116,15,.1)}
.input::placeholder,.textarea::placeholder{color:var(--gray-400)}
.textarea{resize:vertical;min-height:100px}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f6c62' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.qty button{width:40px;height:40px;display:grid;place-items:center;color:var(--gray-600);font-size:1.2rem;transition:all var(--t-fast)}
.qty button:hover{background:var(--orange-100);color:var(--orange-600)}
.qty input{width:42px;text-align:center;border:none;font-weight:700;font-family:var(--font-num);color:var(--ink);background:transparent}
.radio-card{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast);background:#fff}
.radio-card:hover{border-color:var(--orange-400)}
.radio-card.selected{border-color:var(--orange-500);background:var(--orange-100)}
.radio-card .dot{width:21px;height:21px;border-radius:50%;border:2px solid var(--gray-300);display:grid;place-items:center;flex-shrink:0;transition:all var(--t-fast)}
.radio-card.selected .dot{border-color:var(--orange-500)}
.radio-card.selected .dot::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--orange-500)}
.radio-card .pm-logo{width:44px;height:30px;border-radius:6px;display:grid;place-items:center;font-weight:800;font-size:.7rem;color:#fff;flex-shrink:0}
.pm-bkash{background:#e2136e} .pm-nagad{background:#ec1c24} .pm-rocket{background:#8c3494} .pm-cod{background:var(--green-700)} .pm-card{background:var(--ink)}

/* ==========================================================================
   14. টোস্ট
   ========================================================================== */
.toast-wrap{position:fixed;bottom:24px;left:24px;z-index:1300;display:flex;flex-direction:column;gap:10px}
@media(max-width:760px){.toast-wrap{bottom:84px;left:12px;right:12px}.toast{max-width:none}}
.toast{display:flex;align-items:center;gap:12px;background:var(--green-900);color:#fff;padding:13px 18px;border-radius:var(--r-md);box-shadow:var(--sh-lg);font-size:.92rem;font-weight:500;transform:translateX(-120%);animation:toastIn .4s var(--ease-out) forwards;max-width:330px}
.toast.out{animation:toastOut .3s var(--ease) forwards}
.toast .ti{width:28px;height:28px;border-radius:50%;background:var(--orange-500);display:grid;place-items:center;flex-shrink:0}
@keyframes toastIn{to{transform:translateX(0)}}
@keyframes toastOut{to{transform:translateX(-120%);opacity:0}}
@media(max-width:760px){.toast-wrap{bottom:92px;left:14px;right:14px}.toast{max-width:none}}

/* ==========================================================================
   15. অ্যাকর্ডিয়ন
   ========================================================================== */
.accordion{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:#fff}
.acc-item{border-bottom:1px solid var(--border)} .acc-item:last-child{border-bottom:none}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink);transition:color var(--t-fast)}
.acc-head:hover{color:var(--orange-600)}
.acc-head .ico{width:28px;height:28px;border-radius:50%;background:var(--orange-100);color:var(--orange-600);display:grid;place-items:center;flex-shrink:0;transition:transform var(--t-mid);font-size:1.2rem}
.acc-item.open .acc-head .ico{transform:rotate(45deg);background:var(--orange-500);color:#fff}
.acc-body{max-height:0;overflow:hidden;transition:max-height var(--t-mid) var(--ease)}
.acc-body p{padding:0 22px 20px;color:var(--text-soft)}

/* ==========================================================================
   16. স্ক্রল রিভিল
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s} .reveal.d3{transition-delay:.18s} .reveal.d4{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}html{scroll-behavior:auto}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.skeleton{background:linear-gradient(100deg,var(--gray-100b) 30%,var(--gray-50) 50%,var(--gray-100b) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ==========================================================================
   17. ফুটার
   ========================================================================== */
.footer{background:var(--green-900);color:rgba(255,255,255,.75);padding-block:clamp(44px,6vw,70px) 28px;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:-100px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,rgba(232,116,15,.22),transparent 70%);filter:blur(30px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;position:relative;z-index:1}
.footer .logo-txt{color:#fff} .footer .logo-txt small{color:var(--orange-400)}
.footer p{color:rgba(255,255,255,.6);font-size:.92rem;max-width:300px;margin-top:14px}
.footer h5{font-family:var(--font-display);font-weight:600;color:#fff;margin-bottom:14px;font-size:1rem}
.footer-links a{display:block;padding:6px 0;color:rgba(255,255,255,.62);font-size:.9rem;transition:all var(--t-fast)}
.footer-links a:hover{color:var(--orange-400);transform:translateX(4px)}
.footer-social{display:flex;gap:9px;margin-top:18px}
.footer-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:all var(--t-fast)}
.footer-social a:hover{background:var(--orange-500);transform:translateY(-3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;position:relative;z-index:1;font-size:.84rem;color:rgba(255,255,255,.55)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ===== বটম নেভ ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:880;display:none;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(18px);border-top:1px solid var(--border)}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:center}
/* min-height 48px = comfortable touch target; label ≥.72rem stays readable. */
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 12px;min-height:48px;color:var(--gray-500);font-size:.72rem;font-weight:600;transition:color var(--t-fast);position:relative}
.bn-item.active{color:var(--orange-600)}
.bn-item svg{width:22px;height:22px}
.bn-item .count{position:absolute;top:-2px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--orange-500);color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center}
.bn-fab{width:50px;height:50px;border-radius:50%;background:var(--orange-500);color:#fff;display:grid;place-items:center;margin-top:-24px;box-shadow:var(--sh-orange);border:4px solid var(--cream)}
@media(max-width:760px){.bottom-nav{display:block}body{padding-bottom:66px}}

/* ===== ইউটিলিটি ===== */
/* Breadcrumb: one line, never wraps. WooCommerce prints the final crumb (the
   product title) as a bare TEXT NODE, which flex can neither shrink nor
   ellipsize — so long Bengali product names were wrapping onto 2-3 lines.
   display:block + nowrap + text-overflow on the container clips that tail
   with an "…" instead; the delimiter gap moves from flex-gap to margins. */
.crumb{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:.85rem;color:var(--text-soft);padding:18px 0}
.crumb a,.crumb span{display:inline;white-space:nowrap}
.crumb a:hover{color:var(--orange-600)} .crumb span{color:var(--gray-300);margin:0 7px}
.divider{height:1px;background:var(--border);border:none;margin-block:20px}
.center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:34px}.mb-0{margin-bottom:0}
.scrolltop{position:fixed;right:18px;bottom:84px;width:46px;height:46px;border-radius:50%;background:var(--orange-500);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-md);z-index:840;opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--t-mid)}
.scrolltop.show{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){.scrolltop{bottom:140px;right:14px}}
.pill-list{display:flex;flex-wrap:wrap;gap:9px}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-item .ti-ico{width:50px;height:50px;border-radius:14px;background:var(--orange-100);color:var(--orange-600);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.trust-item h4{font-size:1rem;margin-bottom:2px}.trust-item p{font-size:.84rem;color:var(--text-soft)}

/* ===== ড্র্যাগ-স্ক্রল ===== */
.drag-scroll{cursor:grab;-webkit-overflow-scrolling:touch}
.drag-scroll.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.drag-scroll.dragging a,.drag-scroll.dragging button,.drag-scroll.dragging img{pointer-events:none}

/* ===== প্রিমিয়াম গ্লাস টাচ ===== */
.cat-tile{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.7));backdrop-filter:saturate(140%) blur(8px);border-color:rgba(255,255,255,.7)}
.cat-tile:hover{border-color:var(--orange-100)}
.sec-title::after{background:var(--grad-orange)}
.eyebrow{color:var(--green-600)} .eyebrow::before{background:var(--grad-orange)}
.btn-green{background:var(--grad-green-cta);box-shadow:var(--sh-green)}
.btn-green:hover{filter:brightness(1.06);transform:translateY(-2px)}
.badge-organic{background:var(--green-cta)}
.section,.section-sm{position:relative}

/* ==========================================================================
   SPA — AJAX page-transition styles (added by theme, Phase 1)
   ========================================================================== */
.skip-link{position:absolute;left:-9999px;top:auto;z-index:2000}
.skip-link:focus{left:16px;top:12px;width:auto;height:auto;padding:10px 16px;background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-md)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

#main-content{outline:none}
#main-content.spa-leaving{opacity:0;transform:translateY(8px);transition:opacity .16s var(--ease),transform .16s var(--ease)}
#main-content.spa-entering{animation:spaIn .34s var(--ease-out)}
@keyframes spaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.spa-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;background:var(--orange-500);opacity:0;transition:opacity .2s}
.spa-progress.run{opacity:1;width:80%;transition:width 8s cubic-bezier(.1,.7,.1,1),opacity .2s}
.spa-progress.done{opacity:1;width:100%;transition:width .25s var(--ease-out),opacity .35s .2s}

@media (prefers-reduced-motion: reduce){
  #main-content.spa-leaving,#main-content.spa-entering{animation:none;transition:none;opacity:1;transform:none}
}

/* ==========================================================================
   WooCommerce mini-cart inside the dock (Phase 4)
   ========================================================================== */
.cart-dock .widget_shopping_cart_content{padding:6px 14px;max-height:46vh;overflow-y:auto}
.cart-dock ul.woocommerce-mini-cart{list-style:none;margin:0;padding:0}
.cart-dock li.woocommerce-mini-cart-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);position:relative;font-size:.9rem}
.cart-dock li.woocommerce-mini-cart-item a:not(.remove){flex:1;font-weight:600;color:var(--ink)}
.cart-dock li.woocommerce-mini-cart-item img{width:44px;height:44px;border-radius:10px;object-fit:contain;background:var(--gray-50);padding:3px;order:-1}
.cart-dock li.woocommerce-mini-cart-item .quantity{display:block;color:var(--text-soft);font-size:.82rem;font-family:var(--font-num)}
.cart-dock a.remove,.cart-dock a.remove_from_cart_button{width:22px;height:22px;line-height:20px;text-align:center;border-radius:50%;background:var(--gray-50);color:var(--gray-500)!important;font-size:14px;flex-shrink:0}
.cart-dock a.remove:hover{background:var(--danger);color:#fff!important}
.cart-dock .woocommerce-mini-cart__total{display:flex;justify-content:space-between;padding:12px 0 4px;font-weight:700;color:var(--ink)}
.cart-dock .woocommerce-mini-cart__total .amount{color:var(--orange-600);font-family:var(--font-num)}
.cart-dock .woocommerce-mini-cart__buttons{display:none}        /* we use our own cde-actions */
.cart-dock .woocommerce-mini-cart__empty-message{padding:26px 6px;text-align:center;color:var(--text-soft)}
.cart-bounce{animation:cartBounce .5s var(--spring)}
@keyframes cartBounce{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}