/* meebd storefront extras (module storefront-extras): compare list, order tracking, share bar, blog gallery, video and author box.
   Loaded after shop.css on every storefront page. Everything is prefixed .sfx- and built from the --sf-* tokens, so every theme and
   both languages get it for free. Never set letter-spacing or text-transform on text that can be Bangla. */

/* The shared bits ------------------------------------------------------- */
.sfx-muted{color:var(--sf-muted)}
.sfx-hint{margin-top:6px;font-size:.88rem}
.sfx-page{padding-block:20px 56px}
.sfx-page__head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin:12px 0 22px}
.sf-body .sfx-page__head h1{margin:0 0 6px}
.sf-body .sfx-page__head p{margin:0;max-width:62ch}
.sf-body .sfx-eyebrow{margin:0 0 4px;font-size:.95rem;color:var(--sf-muted)}
.sfx-card{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:calc(var(--sf-radius) + 2px);padding:clamp(16px,3vw,24px);margin-bottom:16px}
.sf-body .sfx-card__title{font-size:1.1rem;margin:0 0 14px}
.sfx-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;font-weight:600;font-size:.88rem;background:var(--sf-accent-soft);color:var(--sf-accent-text);white-space:nowrap}
.sfx-pill--ok{background:#E3F6EC;color:#0B6B45}
.sfx-pill--err{background:#FDECEA;color:#B42318}
.sfx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.sfx-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sf-text);cursor:pointer}
.sfx-icon-btn:hover{background:color-mix(in srgb,var(--sf-text) 8%,transparent)}
html:not(.sf-js) .sfx-js-only{display:none}

/* Compare button (cards and product page) ------------------------------- */
.sfx-cmp{margin:0}
.sfx-cmp__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--sf-border-strong);border-radius:var(--sf-btn-radius);background:var(--sf-surface);color:var(--sf-text);font-weight:600;font-size:.92rem;cursor:pointer;transition:background-color .15s,border-color .15s}
.sfx-cmp__btn:hover{border-color:var(--sf-text)}
.sfx-cmp__btn[aria-busy="true"]{opacity:.6;cursor:progress}
.sfx-cmp__icon--on{display:none}
.sfx-cmp__btn[aria-pressed="true"]{background:var(--sf-accent-soft);border-color:var(--sf-accent-text);color:var(--sf-accent-text)}
.sfx-cmp__btn[aria-pressed="true"] .sfx-cmp__icon--on{display:block}
.sfx-cmp__btn[aria-pressed="true"] .sfx-cmp__icon--off{display:none}
.sfx-cmp--card{position:absolute;right:8px;top:8px;z-index:3}
/* a sold-out card's media carries a filter (its own stacking context): lift it above the card's stretched title link so the button stays clickable */
.sf-card__media:has(>.sfx-cmp){z-index:2}
.sfx-cmp--card .sfx-cmp__btn{width:44px;padding:0;border-color:transparent;border-radius:50%;background:rgba(255,255,255,.96);color:#101828;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.sfx-cmp--card .sfx-cmp__btn:hover{background:#fff}
.sfx-cmp--card .sfx-cmp__btn[aria-pressed="true"]{background:var(--sf-accent);border-color:var(--sf-accent);color:var(--sf-accent-ink)}
.sfx-cmp--card .sfx-cmp__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sfx-cmp--pdp{margin:12px 0 16px}
.sfx-cmp--pdp .sfx-cmp__btn{width:100%}

/* Sticky compare bar ---------------------------------------------------- */
.sfx-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--sf-surface);border-top:1px solid var(--sf-border);box-shadow:0 -8px 24px rgba(16,24,40,.12);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.sfx-bar[hidden]{display:none}
.sfx-bar__inner{display:flex;align-items:center;gap:12px}
.sfx-bar__items{display:flex;gap:10px;min-width:0;flex:1 1 auto;padding:6px 8px 0 0;overflow:visible}
.sfx-chip{position:relative;flex:none;width:48px;height:48px}
.sfx-chip__link{display:grid;place-items:center;width:100%;height:100%;border:1px solid var(--sf-border);border-radius:8px;background:var(--sf-bg);overflow:visible;color:var(--sf-text)}
.sfx-chip__link img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}
.sfx-chip__ph{font-weight:700;color:var(--sf-muted)}
.sfx-chip__rm{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--sf-border-strong);border-radius:50%;background:var(--sf-surface);color:var(--sf-text);cursor:pointer}
.sfx-chip__rm::before{content:"";position:absolute;inset:-12px}
.sfx-chip__rm:hover{background:var(--sf-text);color:var(--sf-bg)}
.sf-body .sfx-bar__count{margin:0;font-size:.88rem;color:var(--sf-muted);white-space:nowrap}
.sfx-bar__actions{display:flex;align-items:center;gap:6px;flex:none}
.sfx-bar__go{white-space:nowrap}
.sfx-bar__clear{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sf-muted);cursor:pointer}
.sfx-bar__clear:hover{background:color-mix(in srgb,var(--sf-text) 8%,transparent);color:var(--sf-text)}
.sfx-bar-lite{position:fixed;right:16px;bottom:16px;z-index:95;padding:12px 18px;border-radius:999px;background:var(--sf-accent);color:var(--sf-accent-ink) !important;font-weight:600;box-shadow:var(--sf-shadow)}
body.sfx-has-bar{padding-bottom:84px;--sf-float-offset:80px}
/* the phone add-to-cart bar of the product page sits at the bottom too: stack the compare bar above it */
@media (max-width:767px){
  body.sfx-has-bar.sf-has-sticky{--sf-float-offset:152px}
  body.sf-has-sticky .sfx-bar{bottom:72px}
  .sfx-bar__count{display:none}
  .sfx-bar__items{gap:8px}
  .sfx-chip{width:42px;height:42px}
}

/* Compare page ---------------------------------------------------------- */
.sfx-cmp-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.sfx-cmp-tools form{margin:0}
.sfx-diff{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:.92rem}
.sfx-diff input{width:20px;height:20px;accent-color:var(--sf-accent)}
.sfx-cmp-scroll{overflow-x:auto;border:1px solid var(--sf-border);border-radius:calc(var(--sf-radius) + 2px);background:var(--sf-surface);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sfx-cmp-scroll:focus-visible{outline:2px solid var(--sf-accent-text);outline-offset:2px}
.sfx-cmp-table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;min-width:calc(112px + var(--sfx-n,2) * 188px)}
.sfx-cmp-table th,.sfx-cmp-table td{text-transform:none;letter-spacing:normal;padding:14px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--sf-border);font-size:.95rem;font-weight:400;background:var(--sf-surface);overflow-wrap:anywhere}
.sfx-cmp-table tbody tr:last-child th,.sfx-cmp-table tbody tr:last-child td{border-bottom:0}
.sfx-cmp-corner,.sfx-cmp-rowhead{position:sticky;inset-inline-start:0;z-index:2;width:112px;border-inline-end:1px solid var(--sf-border)}
.sfx-cmp-rowhead{font-weight:600 !important;font-size:.84rem !important;color:var(--sf-muted)}
.sfx-cmp-colhead{position:relative;padding-top:18px !important}
.sf-body .sfx-cmp-remove{position:absolute;inset-block-start:6px;inset-inline-end:6px;margin:0;z-index:1}
.sfx-cmp-remove .sfx-icon-btn{background:color-mix(in srgb,var(--sf-surface) 88%,transparent);border:1px solid var(--sf-border)}
.sfx-cmp-thumb{display:block;aspect-ratio:1/1;border-radius:var(--sf-radius);overflow:hidden;background:var(--sf-accent-soft);margin-bottom:10px}
.sfx-cmp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sfx-cmp-ph{display:grid;place-items:center;width:100%;height:100%;font:700 2.4rem var(--sf-display);color:var(--sf-accent-text)}
.sfx-cmp-name{display:block;font-weight:600;font-size:1rem;line-height:1.3;color:var(--sf-text) !important}
.sfx-price{font-size:1.05rem;font-variant-numeric:tabular-nums}
.sfx-price--sale{color:var(--sf-sale,var(--sf-accent-text))}
.sfx-was{margin-inline-start:6px;color:var(--sf-muted);font-size:.9rem}
.sfx-from{font-weight:400;font-size:.85rem;color:var(--sf-muted)}
.sfx-rating{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sfx-stars{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:1px;color:color-mix(in srgb,var(--sf-text) 22%,transparent);white-space:nowrap}
.sfx-stars>span{position:absolute;inset:0 auto 0 0;overflow:hidden;color:#E8A100;letter-spacing:1px}
html[lang="bn"] .sfx-stars{letter-spacing:1px}
.sfx-stock{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}
.sfx-stock__dot{width:9px;height:9px;border-radius:50%;background:#12A150;flex:none}
.sfx-stock.is-low .sfx-stock__dot{background:#D97706}
.sfx-stock.is-out .sfx-stock__dot{background:#B42318}
.sfx-stock.is-out{color:#B42318}
.sf-body .sfx-opts{display:flex;flex-wrap:wrap;gap:6px}
.sfx-opts li{padding:3px 10px;border:1px solid var(--sf-border-strong);border-radius:999px;font-size:.85rem;line-height:1.5}
.sfx-opts li.is-out{text-decoration:line-through;color:var(--sf-muted);border-style:dashed}
.sfx-cmp-buyrow td,.sfx-cmp-buyrow th{padding-block:16px}
.sfx-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.sfx-cmp-table[data-diff="1"] tr.is-same{display:none}
.sf-body .sfx-cmp-note{margin:12px 2px 0;font-size:.86rem}
.sfx-recent{margin-top:40px}
.sf-body .sfx-recent__title{font-size:clamp(1.25rem,1rem + 1vw,1.6rem);margin:0 0 16px}
.sfx-recent .sf-grid{--sf-cols:4}
@media (max-width:640px){
  .sfx-cmp-table{min-width:calc(96px + var(--sfx-n,2) * 172px)}
  .sfx-cmp-corner,.sfx-cmp-rowhead{width:96px}
  .sfx-cmp-table th,.sfx-cmp-table td{padding:12px 10px}
}

/* Order tracking -------------------------------------------------------- */
.sfx-track__head{align-items:flex-start}
.sfx-trackform .sf-field{margin-bottom:16px}
.sfx-trackform__note{margin-top:12px;font-size:.92rem}
.sf-body .sfx-eta{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:14px 16px;border-radius:calc(var(--sf-radius) + 2px);background:var(--sf-accent-soft);color:var(--sf-text)}
.sfx-eta svg{flex:none;color:var(--sf-accent-text)}
.sf-body .sfx-steps{position:relative;margin:0;padding:0;list-style:none}
.sfx-step{position:relative;display:flex;gap:14px;padding-bottom:22px}
.sfx-step:last-child{padding-bottom:0}
.sfx-step::before{content:"";position:absolute;inset-inline-start:13px;top:28px;bottom:0;width:2px;background:var(--sf-border)}
.sfx-step:last-child::before{display:none}
.sfx-step--done::before{background:var(--sf-accent)}
.sfx-step__dot{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--sf-border-strong);background:var(--sf-surface);color:var(--sf-accent-ink);position:relative;z-index:1}
.sfx-step--done .sfx-step__dot{background:var(--sf-accent);border-color:var(--sf-accent)}
.sfx-step--current .sfx-step__dot{border-color:var(--sf-accent);box-shadow:0 0 0 5px var(--sf-accent-soft)}
.sfx-step--current .sfx-step__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--sf-accent)}
.sfx-step--stopped .sfx-step__dot{background:#B42318;border-color:#B42318;color:#fff}
.sfx-step__body{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:2px}
.sfx-step__label{font-weight:600}
.sfx-step--upcoming .sfx-step__label{color:var(--sf-muted);font-weight:500}
.sfx-step__at,.sfx-step__detail{font-size:.88rem;color:var(--sf-muted)}
.sfx-ships{display:grid;gap:14px}
.sfx-ship{padding:14px 16px;border:1px solid var(--sf-border);border-radius:var(--sf-radius);background:var(--sf-bg)}
.sf-body .sfx-ship__top{margin:0 0 8px}
.sf-body .sfx-ship p{margin-bottom:8px}
.sfx-ship__hint{font-size:.88rem}
.sf-body .sfx-ship__items{margin:6px 0 0;font-size:.92rem;color:var(--sf-muted)}
.sf-body .sfx-kv{display:grid;gap:6px;margin:0 0 12px}
.sfx-kv>div{display:flex;flex-wrap:wrap;gap:4px 12px}
.sfx-kv dt{color:var(--sf-muted);min-width:8.5rem}
.sfx-kv dd{margin:0;font-weight:600}
.sfx-kv code{font-weight:600;font-size:.95rem;font-family:inherit;overflow-wrap:anywhere}
.sf-body .sfx-items{display:grid;gap:12px;margin:0 0 14px}
.sfx-items li{display:flex;align-items:center;gap:12px}
.sfx-items__img{flex:none;width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--sf-accent-soft)}
.sfx-items__img--blank{display:grid;place-items:center;font-weight:700;color:var(--sf-accent-text)}
.sfx-items__main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.sfx-items__qty{flex:none;color:var(--sf-muted);font-variant-numeric:tabular-nums}
.sf-body .sfx-total{display:flex;justify-content:space-between;gap:12px;margin:0;padding-top:12px;border-top:1px solid var(--sf-border)}
.sf-body .sfx-total--refund{border-top:0;padding-top:6px;color:var(--sf-muted)}
.sf-body .sfx-privacy{font-size:.9rem;margin:4px 0 18px}

/* Share bar ------------------------------------------------------------- */
.sf-body .sfx-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:18px 0}
.sfx-share__label{font-weight:600;font-size:.92rem}
.sf-body .sfx-share__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sfx-share__link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--sf-border-strong);border-radius:999px;background:var(--sf-surface);color:var(--sf-text) !important;font:600 .88rem var(--sf-font);text-decoration:none !important;cursor:pointer;transition:background-color .15s,border-color .15s}
.sfx-share__link:hover{border-color:var(--sf-text);background:color-mix(in srgb,var(--sf-text) 5%,var(--sf-surface))}
.sfx-share__link.is-done{background:var(--sf-accent-soft);border-color:var(--sf-accent-text);color:var(--sf-accent-text) !important}
.sfx-share__link[hidden]{display:none}
.sfx-share__fallback{display:block;flex:1 0 100%}
html.sf-js .sfx-share__fallback{display:none}
html.sf-js .sfx-share__fallback.is-open{display:block}
.sfx-share__fallback-label{display:block;font-size:.85rem;color:var(--sf-muted);margin-bottom:4px}
.sfx-share__input{width:100%;font-size:.9rem}
@media (hover:hover) and (pointer:fine){.sfx-touch-only{display:none}}

/* Blog: gallery, lightbox, video, author box ----------------------------- */
.sf-body .sfx-section-title{font:700 clamp(1.2rem,1rem + 1vw,1.5rem)/1.25 var(--sf-display);margin:0 0 16px}
.sfx-gallery-wrap{margin:36px 0 8px}
.sf-body .sfx-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.sf-body .sfx-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sfx-gallery__fig{margin:0}
.sfx-gallery__link{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--sf-radius);background:var(--sf-accent-soft);cursor:zoom-in}
.sfx-gallery__link img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--sf-ease)}
@media (hover:hover){.sfx-gallery__link:hover img{transform:scale(1.04)}}
.sfx-gallery__cap{margin-top:6px;font-size:.88rem;color:var(--sf-muted);line-height:1.4}
.sfx-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.sfx-lb[hidden]{display:none}
.sfx-lb__backdrop{position:absolute;inset:0;background:rgba(10,12,16,.9)}
.sfx-lb__figure{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(94vw,1200px);pointer-events:none}
.sfx-lb__img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:6px;background:#111;pointer-events:auto}
.sf-body .sfx-lb__cap{margin:0;color:#fff;text-align:center;font-size:.95rem;max-width:70ch;pointer-events:auto}
.sfx-lb__cap[hidden]{display:none}
.sfx-lb__btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:#111827;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.sfx-lb__btn:hover{background:#fff}
.sfx-lb__close{top:14px;inset-inline-end:14px}
.sfx-lb__prev{inset-inline-start:14px;top:50%;transform:translateY(-50%)}
.sfx-lb__next{inset-inline-end:14px;top:50%;transform:translateY(-50%)}
.sf-body .sfx-lb__count{position:absolute;bottom:14px;left:0;right:0;margin:0;text-align:center;color:#fff;font-size:.88rem}
.sfx-lb :focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:640px){
  .sfx-lb__prev,.sfx-lb__next{top:auto;bottom:10px;transform:none}
  .sfx-lb__prev{inset-inline-start:14px}
  .sfx-lb__next{inset-inline-end:14px}
}
.sfx-video{position:relative}
.sfx-video__play{position:relative;display:grid;place-items:center;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:var(--sf-radius);background:linear-gradient(135deg,#1b2433,#0b0f17);color:#fff !important;text-decoration:none !important;cursor:pointer}
.sfx-video__play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sfx-video__play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.38))}
.sfx-video__badge{position:relative;z-index:1;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--sf-accent);color:var(--sf-accent-ink);box-shadow:0 8px 28px rgba(0,0,0,.4);transition:transform .15s}
.sfx-video__badge svg{margin-inline-start:4px}
.sfx-video__play:hover .sfx-video__badge{transform:scale(1.08)}
.sfx-video__frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--sf-radius);background:#000}
.sf-body .sfx-video__note{margin:8px 0 0;font-size:.85rem;color:var(--sf-muted)}
.sfx-post-video{margin-bottom:24px}
.sfx-author{display:flex;gap:16px;align-items:flex-start;margin:28px 0 8px;padding:18px 20px;border:1px solid var(--sf-border);border-radius:calc(var(--sf-radius) + 2px);background:var(--sf-surface)}
.sfx-author__avatar{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sf-accent);color:var(--sf-accent-ink);font:700 1.3rem var(--sf-display)}
.sfx-author__body{min-width:0}
.sf-body .sfx-author__label{margin:0;font-size:.82rem;color:var(--sf-muted)}
.sf-body .sfx-author__name{margin:0 0 4px;font-size:1.05rem}
.sf-body .sfx-author__bio{margin:0 0 8px;color:var(--sf-text);line-height:1.55}
.sfx-author__more{font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.3em;min-height:44px}

/* Admin-free zone: reduced motion ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sfx-gallery__link img,.sfx-video__badge,.sfx-cmp__btn,.sfx-share__link{transition:none !important}
}