/* ===========================
   Product Cards — Desktop UI
   =========================== */
:root{
    --pc-radius: 18px;
    --pc-shadow: 0 10px 28px rgba(16,24,40,.10);
    --pc-shadow-hover: 0 16px 36px rgba(16,24,40,.14);
    --pc-border: 1px solid #eef0f2;
    --pc-muted: #768190;
    --pc-text: #0f1728;
    --pc-bg: #fff;
    --pc-accent: #111;           /* دکمه مشکی مثل Pull&Bear */
    --pc-accent-weak: #f3f4f6;   /* پس‌زمینه کنترل‌ها */
}

/* گرید کارت‌ها داخل .cards که در PLP داری */
.cards{
    display:grid;
    gap:14px;
}
#plp_container.grid-2 .cards{ grid-template-columns: repeat(2,minmax(0,1fr)); }
#plp_container.grid-4 .cards{ grid-template-columns: repeat(4,minmax(0,1fr)); }
#plp_container.grid-8 .cards{ grid-template-columns: repeat(8,minmax(0,1fr)); }

/* ====== کارت ====== */
.pcard{
    position:relative;
    display:flex; flex-direction:column;
    background:var(--pc-bg);
    border-radius:calc(var(--pc-radius) + 2px);
    box-shadow:var(--pc-shadow);
    border:var(--pc-border);
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
    will-change: transform;
}
.pcard:hover{ transform:translateY(-3px); box-shadow:var(--pc-shadow-hover); }

/* ====== ناحیه تصویر/سوایپر ====== */
.pcard .pc-media{
    position:relative;
    border-bottom:var(--pc-border);
    overflow:hidden;
    aspect-ratio: 3 / 4; /* نسبت 3:4 مثل عکس‌های استودیویی */
    background:#f8f9fb;
}

/* ریشه سوایپر که Runtime ساخته: .pc-swiper */
.pcard .pc-media .pc-swiper{ height:100%; }
.pcard .pc-media .swiper{ height:100%; }
.pcard .pc-media .swiper-slide{
    display:flex; align-items:center; justify-content:center;
    height:100%;
}
.pcard .pc-media img{
    width:100%; height:100%;
    object-fit:cover;
}

/* دات‌های سوایپر پایین عکس */
.pcard .pc-dots{
    position:absolute; inset-inline:0; bottom:10px;
    display:flex; justify-content:center; gap:6px;
    pointer-events:auto; /* قابل کلیک باشد */
}
.pcard .pc-dots .swiper-pagination-bullet{
    width:7px; height:7px; border-radius:999px; opacity:.35; background:#111;
    transition:transform .18s, opacity .18s;
}
.pcard .pc-dots .swiper-pagination-bullet-active{
    transform:scale(1.3); opacity:.9;
}

/* ====== Topbar (لایک) ====== */
.pcard .pc-topbar{
    position:absolute; inset-inline:8px; top:8px;
    display:flex; align-items:center; justify-content:flex-end;
    gap:8px;
    pointer-events:none;       /* تا درگ سوایپر مختل نشود */
    z-index:3;
}
.pcard .pc-like{
    pointer-events:auto;       /* فقط خود دکمه قابل کلیک باشد */
    width:36px; height:36px; border-radius:999px;
    border:0; background:rgba(255,255,255,.75); backdrop-filter:saturate(180%) blur(6px);
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    cursor:pointer;
    transition:transform .12s ease, background .12s ease;
}
.pcard .pc-like:hover{ transform:translateY(-1px); background:#fff; }
.pcard .pc-like.is-active{ color:#d01d33; }

/* ====== Bottom (متن/قیمت/دکمه/سایز/رنگ) ====== */
.pcard .pc-bottom{
    display:grid; gap:8px;
    padding:12px 12px 14px;
    pointer-events:none;   /* پیش‌فرض غیرقابل کلیک تا درگ خراب نشود */
    background:#fff;
}
.pcard:hover .pc-bottom{ pointer-events:auto; } /* روی هاور فعال شود */

.pcard .pc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

.pcard .pc-title{
    font:600 14px/1.7 ui-sans-serif,system-ui,"Segoe UI",Roboto;
    color:var(--pc-text);
    margin:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pcard .pc-price{
    font:800 15px/1.8 ui-sans-serif,system-ui;
}

/* دکمه Add to Basket */
.pcard .pc-btn{
    height:38px; min-width:180px;
    padding:0 16px; border-radius:12px; border:0; cursor:pointer;
    background:var(--pc-accent); color:#fff; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    transition:transform .1s ease, box-shadow .18s ease, background .18s ease;
}
.pcard .pc-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.16); }
.pcard .pc-btn:active{ transform:translateY(0); }

/* ====== سایزها ====== */
.pcard .pc-sizes{ display:flex; flex-wrap:wrap; gap:6px; }
.pcard .pc-sz{
    min-width:40px; height:32px; padding:0 10px;
    border-radius:10px; border:1px solid #e6e8ec; background:#fff; color:#0f1728;
    font:600 12px/30px ui-sans-serif,system-ui; text-align:center; cursor:pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s;
}
.pcard .pc-sz:hover{ border-color:#111; box-shadow:0 0 0 2px rgba(0,0,0,.06) inset; }
.pcard .pc-sz.is-oos{ opacity:.45; cursor:default; }
.pcard .pc-more{
    min-width:40px; height:32px; border-radius:10px; border:1px dashed #d0d5dd; background:var(--pc-accent-weak);
    font:700 12px/30px ui-sans-serif,system-ui; color:#111;
}

/* ====== رنگ‌ها ====== */
.pcard .pc-colors{ display:flex; align-items:center; gap:8px; }
.pcard .pc-dot{
    width:18px; height:18px; border-radius:999px; border:1px solid rgba(0,0,0,.12);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.pcard .pc-dot.is-active{ outline:2px solid rgba(0,0,0,.45); }

/* ====== Hover reveal like Pull&Bear ====== */
.pcard .pc-bottom{ opacity:0; transform:translateY(3px); transition:opacity .16s ease, transform .18s ease; }
.pcard:hover .pc-bottom{ opacity:1; transform:none; }

/* ====== کمک‌های ظاهری ====== */
.muted{ color:var(--pc-muted); }

/* ====== RTL tweaks ====== */
[dir="rtl"] .pc-row{ flex-direction:row-reverse; }
[dir="rtl"] .pc-title, [dir="rtl"] .pc-price{ text-align:right; }

/* ====== برای زمان لود بدون داده ====== */
.pcard .skeleton{
    background:linear-gradient(90deg,#f3f4f6 25%,#f8f9fb 37%,#f3f4f6 63%);
    background-size:400% 100%;
    animation:shimmer 1.2s ease-in-out infinite;
    border-radius:12px;
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ====== جلوگیری از مزاحمت Overlay با درگ ======
   (در صورت داشتن هر لایه‌ی تزیینی روی عکس) */
.pcard .pc-overlay{ pointer-events:none; }

/* کارت و مدیا */
.plp-card{position:relative; list-style:none; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(16,24,40,.06)}
.plp-card .media{position:relative}
.plp-card .swiper{--h: 320px; background:#f7f7f7}
.plp-card .swiper-slide img{width:100%; height:var(--h); object-fit:cover; display:block}

/* لینک کاور: پیشفرض روی اسلایدر است؛ در حالت هاور دسکتاپ، کلیک‌پذیر نیست تا سوایپ آزاد باشد */
.plp-card .cover-link{position:absolute; inset:0; z-index:1}
.plp-card.is-hover .cover-link{pointer-events:none}

/* Hover CTA: لایه‌ی سایه، خودِ لایه کلیک‌ناپذیر؛ فقط دکمه‌ها clickable */
.plp-card .hover-cta{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 50%);
    opacity:0; transition:.18s; z-index:2;
    pointer-events:none; display:flex; align-items:flex-end; padding:10px;
}
.plp-card .hover-cta.is-open{opacity:1}

/* نکته‌ی مهم: خود container رو non-interactive می‌کنیم، فقط کنترل‌ها فعال می‌شوند */
.plp-card .hover-cta .cta-interact{width:100%; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.plp-card .hover-cta .cta-title{color:#fff; font:600 13px/1.6 system-ui; text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none}
.plp-card .hover-cta .cta-sizes{display:flex; flex-wrap:wrap; gap:8px;direction: rtl}
.plp-card .hover-cta .cta-sz,
.plp-card .hover-cta .add-to-basket{pointer-events:auto}
.plp-card .hover-cta .cta-sz{min-width:42px; height:34px; padding:0 8px; border-radius:10px; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.12); color:#fff;align-items: center;    align-items: center;
    justify-content: center;}
.plp-card .hover-cta .cta-sz.is-selected{background:#fff; color:#111}
.plp-card .hover-cta .add-to-basket{height:40px; border-radius:10px; border:0; background:#111; color:#fff}

/* متادیتا */
.plp-card .meta{padding:10px 10px 12px;direction: rtl}

/* ردیف موبایل → فقط موبایل */
.plp-card .row-top-mobile{display:flex; align-items:center; justify-content:space-between; gap:10px}
.plp-card .title-mobile{margin:0; font:600 10px/1.5 system-ui; flex:1;text-align: right}
.plp-card .title-mobile a{color:#111; text-decoration:none;font-size: 12px}
.plp-card .top-actions{display:flex; align-items:center; gap:8px}

.plp-card .btn-add-mobile{height:32px; padding:0 12px; border-radius:10px; border:1px solid #111; background:#111; color:#fff; font:600 12px/1 system-ui}

/* ردیف عنوان دسکتاپ → فقط دسکتاپ */
.row-title-desktop{display:none; margin-top:6px}
.title-desktop{margin:0; font:600 14px/1.5 system-ui;text-align: right}
.title-desktop a{color:#111; text-decoration:none;font-size: 12px}

/* قیمت/سایز/رنگ */
.plp-card .price-row{display:flex; align-items:center; gap:10px; margin-top:6px;padding: 12px 0 0 0;}
.plp-card .price{font:700 14px/1.8 system-ui}
.plp-card .off-badge{display:inline-block; background:#d01d33; color:#fff; font:700 11px/1; padding:4px 8px; border-radius:999px}

.plp-card .sizes-row{display:flex; flex-wrap:wrap; gap:3px; margin-top:8px}
.plp-card .sz-chip{min-width:38px; height:30px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid #ddd; background:#fff; font:500 12px/1.6 system-ui; cursor:pointer}
.plp-card .sz-chip.is-selected{border-color:#111}
.plp-card .sz-more{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:30px; padding:0 8px; border-radius:10px; border:1px dashed #ddd; background:#fff; font:600 12px/1.6 system-ui; opacity:.8}

.plp-card .color-badges{display:flex; align-items:center; gap:6px; margin-top:8px}
.plp-card .color-dot{width:22px; height:22px; border-radius:999px; border:1px solid rgba(0,0,0,.15); background:var(--dot,#ccc); cursor:pointer; position:relative}
.plp-card .color-dot.is-active{box-shadow:0 0 0 3px rgb(213 61 66)}
.plp-card .color-plus{font:600 12px/1.6 system-ui; opacity:.7}

.plp-card .picked-row{margin-top:8px; font:500 12px/1.8 system-ui; opacity:.85}
.plp-card .picked-row.is-hidden{display:none}

/* فلش کوتاه */
.hz-flash{position:absolute; inset-inline:10px; bottom:10px; background:rgba(0,0,0,.78); color:#fff; padding:6px 10px; border-radius:10px; opacity:0; transform:translateY(6px); transition:.2s; pointer-events:none; z-index:3}
.hz-flash.is-on{opacity:1; transform:translateY(0)}


@media (hover:hover) and (pointer:fine){
    .plp-card:hover .hover-cta{opacity:1}
    .plp-card .row-top-mobile{display:none}
    .row-title-desktop{
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .plp-card .swiper{--h: 420px}
}
.btn{min-width: 32px}

@media screen and (max-width: 768px) {
    .plp-card .bm-btn{
        width: 25px;
        height: 25px;
    }
    .plp-card .btn-add-mobile{
        min-width: 25px;
        width: 25px;
        height: 25px;
        display: none;
    }
    .plp-card .sz-chip{
        min-width: 16px;
        width: 25px;
        height: 20px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid #ddd;
        background: #fff;
        font: 500 10px / 1.6 system-ui;
        cursor: pointer;
    }

    .plp-card .sz-more{
        min-width: 20px;
        height: 20px;
    }
}
.plp-card .card-swiper[dir="rtl"] .swiper-wrapper{ direction: rtl; }
/* قیمت با تخفیف — کارت */
.price-row .price{direction: rtl}
.price-row .prices{display:flex; align-items:center; gap:8px}
.price-row .price-old{font:600 12px/1.6 system-ui; color:#9aa3af; text-decoration:line-through}
.price-row.has-off .price{font-weight:800}

/* قیمت با تخفیف — شیت موبایل */
.mb-price .old{color:#9aa3af; text-decoration:line-through; margin-inline-end:6px; font-weight:600}
.mb-price .new{font-weight:800;display: inline-flex}
.mb-price .tag{background:#d01d33; color:#fff; padding:2px 6px; border-radius:999px; font:700 11px/1 system-ui; margin-inline-start:6px}


.plp-card .swiper{ --h: auto; }
@media (min-width:901px){ .plp-card .swiper{ --h: 420px; } }
.plp-card .swiper{cursor: grab}
.plp-card .swiper-slide img{ width:100%; height:var(--h); object-fit:cover; }
@media (hover:none) and (pointer:coarse){
    .plp-card .media .cover-link{ pointer-events:none; }
    .plp-card .swiper{cursor: grab}
}
.swiper-pagination-bullet{
    opacity: .5 !important;
}
.swiper-pagination-bullet-active{
    background: #d3060c !important;
}

.plp-card .price-row.has-off .prices{display:flex;align-items:baseline;gap:8px}
.plp-card .price-old{font:600 12px/1.6 system-ui; opacity:.6; text-decoration:line-through;display: inline-flex}
.price-off{
    position: absolute;
    top: 4px;
    z-index: 1;
    left: 4px;
    border-radius: 10px;
    line-height: 17px;
    font-size: 12px;
}
/* اسکرول‌لاک برای پشت‌شیت */
.no-scroll{ overflow:hidden !important; touch-action:none !important; }

/* متغیرهای تم */
:root{
    --mb-bg: #ffffff;
    --mb-overlay: rgba(15, 15, 15, .35);
    --mb-panel-radius: 18px;
    --mb-shadow: 0 -18px 40px rgba(0,0,0,.22);
    --mb-border: 1px solid rgba(255,255,255,.35);
    --glass-blur: 8px;
}

/* Overlay با بلور شیشه‌ای */
.mb-sheet{ position:fixed; inset:0; z-index:9999; opacity:0; pointer-events:none; transition:.2s ease; }
.mb-sheet.is-open{ opacity:1; pointer-events:auto; }
.mb-overlay{ position:absolute; inset:0; background:var(--mb-overlay); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }

/* پنل شیشه‌ای با لبه‌های نرم */
.mb-panel{
    position:absolute; left:0; right:0; bottom:0;
    background:var(--mb-bg);
    border-radius: var(--mb-panel-radius) var(--mb-panel-radius) 0 0;
    box-shadow: var(--mb-shadow);
    transform: translateY(12px);
    transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
    border-top: var(--mb-border);
    /* safe area */
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
}
.mb-sheet.is-on .mb-panel{ transform: translateY(0); }

/* گریپ */
.mb-grip{ width:44px; height:4px; border-radius:999px; margin:10px auto; background:#d9d9d9; }

/* هدر */
.mb-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 14px; }
.mb-title{ font:700 15px/1.6 system-ui; color:#0f172a; }
.mb-price{ font:700 15px/1.8 system-ui; color:#0f172a;}
.mb-price .old{ opacity:.55; text-decoration:line-through; margin-inline-start:6px; }
.mb-price .tag{ margin-inline-start:8px; font:700 11px/1 system-ui; background:#d01d33; color:#fff; padding:4px 8px; border-radius:999px; }

/* گالری */
.mb-gallery{ padding:6px 0 0; }
.mb-gallery .swiper{ --h: 52vh; height: var(--h); background:#f6f7f8; }
.mb-gallery .swiper-slide{ display:flex; align-items:center; justify-content:center; }
.mb-gallery .swiper-slide img{ width:100%; height: var(--h); object-fit: contain; }

/* بج‌ها */
.mb-badges{ display:flex; gap:8px; padding:8px 14px 0; flex-wrap:wrap; }
.mb-badges .badge{
    font:600 11px/1 system-ui; color:#0f172a; background:#f1f5f9;
    border:1px solid #e2e8f0; padding:6px 8px; border-radius:999px;
}

/* کنترل‌ها */
.mb-controls{ padding:10px 14px 12px; display:grid; gap:12px; }
.mb-row.colors, .mb-row.sizes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* دات‌های رنگ؛ حلقه‌ی انتخاب با رینگ داخلی */
.mb-row.colors .color-dot{
    width:26px; height:26px; border-radius:999px; position:relative;
    border:1px solid rgba(0,0,0,.12); background:var(--dot,#ccc); cursor:pointer;
    box-shadow: inset 0 0 0 0px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease;
}
.mb-row.colors .color-dot:hover{ transform: scale(1.05); }
.mb-row.colors .color-dot.is-active{
    box-shadow: 0 0 0 2px rgba(0,0,0,.08), inset 0 0 0 2px rgba(255,255,255,.9);
}

/* چیپ‌های سایز حرفه‌ای */
.mb-row.sizes .sz-chip{
    min-width:48px; height:38px; padding:0 12px; border-radius:12px;
    border:1px solid #e2e8f0; background:#fff;
    font:700 13px/1.8 system-ui; color:#0f172a; cursor:pointer;
    transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
    line-height: 38px;
}
.mb-row.sizes .sz-chip:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(15,23,42,.06); }
.mb-row.sizes .sz-chip.is-selected{ border-color:#0f172a; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }
.mb-row.sizes .sz-chip[disabled]{ opacity:.45; cursor:not-allowed; }

/* نوار چسبان پایین */
.mb-sticky{
    position: sticky; bottom:0; left:0; right:0;
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,.92));
    border-top:1px solid #eef2f7; padding:10px 12px 12px;
    display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center;
}
.mb-subtotal .subtotal-row{ display:flex; gap:8px; align-items:center; font:700 14px/1.8 system-ui; color:#0f172a; }
.mb-subtotal .label{ opacity:.7; font-weight:600; }

/* CTA */
.mb-actions .btn{
    min-width:160px; height:46px; border-radius:12px; border:0;
    background:#0f172a; color:#fff; font:800 14px/1 system-ui; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
    box-shadow:0 10px 30px rgba(15,23,42,.18);
}
.mb-actions .btn:hover{ transform: translateY(-1px); box-shadow:0 14px 36px rgba(15,23,42,.22); }
.mb-actions .btn:active{ transform: translateY(0); }

/* آیکن تیکِ موفقیت */
.mb-actions .btn .btn-check{
    width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,.9);
    position:relative; transform:scale(0); transition:.25s cubic-bezier(.2,.8,.2,1);
}
.mb-actions .btn .btn-check::after{
    content:''; position:absolute; left:4px; top:1px; width:6px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(45deg);
}
.mb-sheet.is-success .btn .btn-check{ transform: scale(1); }

/* حالت مشغول */
.mb-sheet.is-busy .mb-actions .btn{ opacity:.8; pointer-events:none; }

/* placeholder اسلاید */
.mb-gallery .swiper-slide .ph{
    width:100%; height: var(--h);
    background: linear-gradient(90deg,#eee,#f6f6f6,#eee);
    background-size:200% 100%; animation: sk 1.1s linear infinite;
    border-radius:12px;
}
@keyframes sk {0%{background-position:0 0}100%{background-position:-200% 0}}

/* شِیک خطا */
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.shake-x{ animation: shakeX .42s ease both; }

.subtotal-row .value{display: inline-flex}

/* SizeChart Subview (full overlay inside Sheet) */
.sc-view{
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15,15,15,.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: .2s ease;
}
.sc-view.is-open{ opacity:1; pointer-events:auto; }
.sc-view .sc-head{
    position:absolute; left:0; right:0; bottom:0;
    transform:translateY(100%);
    background:#fff; border-radius:18px 18px 0 0;
    box-shadow:0 -18px 40px rgba(0,0,0,.25);
    padding:10px 14px; display:flex; align-items:center; gap:10px;
}
.sc-view.is-on .sc-head{ transform:translateY(0); transition:.22s ease; }

.sc-title{ font:800 15px/1.6 system-ui; color:#0f172a; }
.sc-close{
    margin-inline-start:auto; width:36px; height:36px;
    border-radius:10px; border:1px solid #e2e8f0; background:#fff; cursor:pointer;
    font-size:18px; line-height:1; display:grid; place-items:center;
}

.sc-tabs{ position:absolute; left:0; right:0; bottom: calc(100% - 44px); /* روی لبه هدر */
    display:flex; gap:8px; padding:0 14px 8px; }
.sc-tab{
    list-style:none; padding:8px 12px; border-radius:999px; border:1px solid #e2e8f0;
    background:#fff; font:700 12px/1 system-ui; cursor:pointer; color:#0f172a;
}
.sc-tab.is-active{ border-color:#0f172a; box-shadow:0 2px 0 rgba(15,23,42,.06) inset; }

.sc-body{
    position:absolute; left:0; right:0; bottom: 54px; top: calc(50vh - 10px);
    background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -18px 40px rgba(0,0,0,.25);
    padding:10px 14px; overflow:auto;
}
.sc-pane{ display:none; }
.sc-pane.is-on{ display:block; }

.sc-footer-row{ display:flex; justify-content:flex-end; padding:8px 0 2px; }
.sc-confirm.btn{
    height:42px; border-radius:12px; border:0; background:#0f172a; color:#fff; font:800 13px/1 system-ui; padding:0 14px;
}

.size_guide_table{ border-collapse: collapse; width:100%; }
.size_guide_table_th, .size_guide_table_td{
    text-align:center; padding:8px 10px; border-bottom:1px solid #eef2f7; font:600 12px/1.8 system-ui; color:#0f172a;
}
.size_guide_table_tr.active{ background: #f8fafc; }

.chart_size_loader_container{ padding:20px 0; display:grid; place-items:center; }
.select_size_loader{
    width:36px; height:36px; border-radius:999px; border:3px solid #e5e7eb; border-top-color:#0f172a; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

@media (min-width: 720px){
    .sc-view .sc-head{ left: max(0px, (100% - 680px)/2); right: max(0px, (100% - 680px)/2); }
    .sc-body{ left: max(0px, (100% - 680px)/2); right: max(0px, (100% - 680px)/2); }
}
.mb-close{
    display: inline-flex;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    font-size: 22px;
    color: black;
}

/* ===== Favorites Panel styles (scoped) ===== */
#favorites-panel{
    position: fixed; inset: 0; z-index: 9998; display: grid;
    grid-template-rows: auto 1fr auto; background: #fff; transform: translateY(6px);
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
#favorites-panel.is-open{ opacity:1; pointer-events:auto; transform:none; }

#favorites-panel .header-fav-panel,
#favorites-panel .footer-fav-panel{
    display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
}
#favorites-panel .header-fav-panel{ font:700 14px/1.6 system-ui; }
#favorites-panel .main-fav-panel{ overflow:auto; padding:10px 12px 14px; }

.menu-fav-panel{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.fav-item{
    display:grid; grid-template-columns: 84px 1fr auto; gap:12px; align-items:center;
    padding:10px; border:1px solid #eee; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.06);
}
.fav-thumb{ width:84px; height:112px; border-radius:10px; overflow:hidden; background:#f6f6f6; display:grid; place-items:center; }
.fav-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fav-meta{ display:grid; gap:6px; }
.fav-title{ font:600 13px/1.6 system-ui; color:#111; }
.fav-price{ font:700 13px/1.8 system-ui; }
.fav-actions{ display:flex; align-items:center; gap:8px; }
.fav-actions .btn{ height:34px; padding:0 10px; border-radius:10px; border:1px solid #ddd; background:#fff; font:600 12px/1 system-ui; cursor:pointer; }
.fav-actions .btn-danger{ border-color:#e0245e; color:#e0245e; }

.fav-empty{ text-align:center; color:#666; display:grid; gap:8px; place-items:center; padding:18px 0; }

@media (max-width: 480px){
    .fav-item{ grid-template-columns: 74px 1fr auto; }
    .fav-thumb{ width:74px; height:98px; }
}
.no-scroll{ overflow:hidden !important; }