@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
    --bg: #0c0c0c;
    --bg-soft: #131313;
    --card: #1a1917;
    --card-hover: #201f1c;
    --line: rgba(255,255,255,.09);
    --gold: #c7a06b;
    --gold-soft: #e3cda3;
    --ink: #f3f0ea;
    --ink-dim: #a7a29a;
    --ink-faint: #6f6b64;
    --danger: #d16b6b;
    --radius: 6px;
    --container: 1320px;
    --shadow: 0 16px 40px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Vazirmatn', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    direction: rtl;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 56px 0; }
.section-tight { padding: 32px 0; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
}
.section-head h2 { font-size: 22px; font-weight: 700; margin: 0; }
.section-head .see-all { font-size: 13px; color: var(--gold-soft); border-bottom: 1px solid transparent; }
.section-head .see-all:hover { border-color: var(--gold-soft); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: var(--radius);
    border: 1px solid var(--gold);
    color: var(--gold-soft);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--gold); color: #14120f; }
.btn-solid { background: var(--gold); color: #14120f; }
.btn-solid:hover { background: var(--gold-soft); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-outline-light { border-color: var(--line); color: var(--ink); }
.btn-outline-light:hover { background: var(--ink); color: var(--bg); }
.btn-ghost { border-color: var(--line); color: var(--ink-dim); background: transparent; }
.btn-ghost:hover { background: var(--card-hover); color: var(--ink); border-color: var(--line); }
.btn-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Header ---------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(12,12,12,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex; align-items: center; gap: 28px;
    height: 78px;
}
.logo { font-size: 24px; font-weight: 800; letter-spacing: 3px; color: var(--ink); }
.logo small { display: block; font-size: 9px; letter-spacing: 4px; color: var(--ink-faint); font-weight: 500; text-align: center; }

.main-nav { display: flex; align-items: center; gap: 26px; margin-inline-start: 8px; }
.main-nav a { font-size: 14px; color: var(--ink-dim); padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); border-color: var(--gold); }

/* Mega menu (root categories with subcategory dropdown) */
.mega-nav-item { position: relative; }
.mega-nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.mega-caret { font-size: 9px; color: var(--ink-faint); transition: transform .15s ease; }
.mega-nav-item:hover .mega-caret { transform: rotate(180deg); color: var(--gold-soft); }
.mega-panel {
    position: absolute; top: 100%; right: 50%; transform: translateX(50%) translateY(6px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 60;
}
.mega-nav-item:hover .mega-panel,
.mega-nav-item:focus-within .mega-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(50%) translateY(0);
}
.mega-panel-inner {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 220px; padding: 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 24px 48px rgba(0,0,0,.4);
}
.mega-panel-inner a { font-size: 13.5px; color: var(--ink-dim); padding: 9px 12px; border-radius: 9px; border-bottom: none !important; }
.mega-panel-inner a:hover { background: var(--card-hover); color: var(--gold-soft); }
.mega-panel-inner a.mega-col-title { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line) !important; border-radius: 0; margin-bottom: 4px; padding-bottom: 12px; }

/* Mobile nav: expandable category groups */
.mobile-nav-group { border-bottom: 1px solid var(--line); }
.mobile-nav-group summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding: 4px 0; }
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary a { border-bottom: none; padding: 8px 0; flex: 1; }
.mobile-nav-group > a { display: block; padding: 8px 20px; color: var(--ink-dim); font-size: 13.5px; border-bottom: none; }

.search-box {
    flex: 1; max-width: 380px;
    position: relative;
}
.search-box input {
    width: 100%; background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; padding: 10px 40px 10px 16px; color: var(--ink); font-size: 13px;
}
.search-box input::placeholder { color: var(--ink-faint); }
.search-box button {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--ink-dim); width: 30px; height: 30px;
}

.header-icons { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.icon-btn { position: relative; color: var(--ink); width: 22px; height: 22px; display: flex; }
.icon-btn svg { width: 100%; height: 100%; }
.icon-badge {
    position: absolute; top: -8px; inset-inline-start: -8px;
    background: var(--gold); color: #14120f; font-size: 10px; font-weight: 700;
    width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

.nav-toggle { display: none; background: none; border: none; color: var(--ink); width: 26px; height: 26px; }

/* ---------------- Hero ---------------- */
.hero {
    padding: 40px 0 0;
    border-bottom: 1px solid var(--line);
}
.hero-grid {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
    position: relative;
}
.hero-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: linear-gradient(160deg,#232220,#141312); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-tags { position: absolute; inset-inline-start: -6px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 0; font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; }

.hero-copy .eyebrow { color: var(--gold-soft); font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; }
.hero-copy h1 { font-size: 44px; font-weight: 800; line-height: 1.25; margin: 0 0 6px; }
.hero-copy h1 span { color: var(--gold-soft); font-weight: 700; display: block; font-size: 30px; margin-top: 4px; }
.hero-copy p { color: var(--ink-dim); margin: 18px 0 28px; max-width: 40ch; }

/* ---------------- Category strip ---------------- */
.cat-strip { padding: 40px 0; }
.cat-strip-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.cat-item { text-align: center; }
.cat-thumb {
    width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); margin-bottom: 12px;
    transition: border-color .2s ease;
}
.cat-item:hover .cat-thumb { border-color: var(--gold); }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-thumb.flame { display: flex; align-items: center; justify-content: center; font-size: 30px; }
.cat-item h3 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.cat-item .link { font-size: 11px; color: var(--ink-faint); }

/* ---------------- Product grid / card ---------------- */
.product-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.product-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; transition: transform .2s ease, border-color .2s ease;
    display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--line); transform: translateY(-3px); }
.product-media { position: relative; aspect-ratio: 3/4; background: #201f1c; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-media img { transform: scale(1.05); }

.product-badge {
    position: absolute; top: 10px; inset-inline-start: 10px;
    background: var(--gold); color: #14120f; font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
}
.product-rank {
    position: absolute; top: 10px; inset-inline-end: 10px;
    background: rgba(12,12,12,.75); color: var(--gold-soft); font-size: 11px; font-weight: 700;
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.wish-btn {
    position: absolute; top: 10px; inset-inline-start: auto; inset-inline-end: 10px;
    z-index: 5;
    background: rgba(12,12,12,.6); border: 1px solid var(--line); color: var(--ink);
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.wish-btn.is-active { color: var(--danger); border-color: var(--danger); }
/* Controls use fixed physical corners in the RTL card: badge/rank = right, wishlist = left. */
.product-badge, .product-rank { inset-inline-start: 10px; inset-inline-end: auto; }
.wish-btn, .product-badge ~ .wish-btn, .product-rank ~ .wish-btn {
    inset-inline-start: auto;
    inset-inline-end: 10px;
}
.product-media .product-badge { z-index: 6; }
.product-media .wish-btn { z-index: 7; }

.product-info { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.product-info h3 { font-size: 14px; font-weight: 600; margin: 0; min-width: 0; }
.product-info h3 a:hover { color: var(--gold-soft); }
.product-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; min-width: 0; width: 100%; }
.product-price-row.has-discount { align-items: flex-end; }
.product-price-row .add-to-cart-form { position: relative; z-index: 2; }
.product-price-row .price { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.price { font-size: 14px; font-weight: 700; color: var(--gold-soft); display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.price-current { min-width: 0; white-space: nowrap; }
.price small { font-size: 11px; font-weight: 400; color: var(--ink-faint); }
.price-old { font-size: 12px; color: var(--ink-faint); text-decoration: line-through; margin-inline-end: 0; display: block; white-space: nowrap; }
.product-price-row.has-discount .price { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.35; }
.add-to-cart-form { flex: 0 0 32px; width: 32px; margin: 0; }
.add-btn {
    width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid var(--gold);
    color: var(--gold-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background .2s ease, color .2s ease;
}
.add-btn:hover { background: var(--gold); color: #14120f; }

/* Product-card discount hardening: keep every control inside the card. */
.product-card, .product-media, .product-info { min-width: 0; }
.product-media { isolation: isolate; }
.product-badge, .product-rank, .wish-btn { z-index: 5; }
.add-btn { box-sizing: border-box; }
@media (max-width: 600px) {
    .product-info { padding: 11px 10px 12px; gap: 6px; }
    .product-info h3 { font-size: 13px; }
    .product-price-row { gap: 6px; }
    .price { font-size: 12.5px; }
    .price-old { font-size: 10.5px; }
    .price small { font-size: 9.5px; }
    .add-to-cart-form, .add-btn { width: 30px; height: 30px; }
}

/* ---------------- Promo banners ---------------- */
.promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.promo-card {
    position: relative; border-radius: var(--radius); overflow: hidden; min-height: 220px;
    display: flex; align-items: center; padding: 0 36px; background: #171512;
}
.promo-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.88) 30%, rgba(10,10,10,.15)); z-index: 1; }
.promo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-content { position: relative; z-index: 2; }
.promo-content .tag { font-size: 12px; letter-spacing: 3px; color: var(--gold-soft); margin-bottom: 6px; display: block; }
.promo-content .big { font-size: 34px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.promo-content h3 { font-size: 20px; font-weight: 700; margin: 0 0 18px; }

/* ---------------- Lookbook / special styles ---------------- */
.lookbook-grid { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 16px; }
.lookbook-intro {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px 26px; display: flex; flex-direction: column; justify-content: center;
}
.lookbook-intro h2 { font-size: 24px; margin: 0 0 12px; }
.lookbook-intro p { color: var(--ink-dim); margin: 0 0 22px; font-size: 13px; }
.lookbook-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4.6; background: #201f1c; }
.lookbook-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Trust badges ---------------- */
.trust-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--gold-soft); flex-shrink: 0; }
.trust-item h4 { font-size: 14px; margin: 0 0 3px; }
.trust-item p { font-size: 12px; color: var(--ink-faint); margin: 0; }

/* ---------------- Testimonials ---------------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testi-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.testi-stars { color: var(--gold); font-size: 13px; margin-bottom: 10px; letter-spacing: 2px; }
.testi-card p { color: var(--ink-dim); font-size: 13px; margin: 0 0 18px; }
.testi-user { display: flex; align-items: center; gap: 10px; }
.testi-user .av { width: 38px; height: 38px; border-radius: 50%; background: #2a2823; overflow: hidden; flex-shrink: 0; }
.testi-user .av img { width: 100%; height: 100%; object-fit: cover; }
.testi-user h5 { margin: 0; font-size: 13px; }
.testi-user span { font-size: 11px; color: var(--ink-faint); }

/* ---------------- Instagram strip ---------------- */
.insta-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; border-radius: var(--radius); overflow: hidden; }
.insta-row a { aspect-ratio: 1; overflow: hidden; }
.insta-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.insta-row a:hover img { transform: scale(1.08); }

/* ---------------- Footer ---------------- */
.site-footer { border-top: 1px solid var(--line); padding-top: 50px; margin-top: 30px; background: var(--bg-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr 1.3fr; gap: 30px; padding-bottom: 40px; }
.footer-grid h4 { font-size: 14px; margin: 0 0 16px; }
.footer-grid ul li { margin-bottom: 9px; }
.footer-grid ul a { font-size: 13px; color: var(--ink-dim); }
.footer-grid ul a:hover { color: var(--gold-soft); }
.footer-grid p { font-size: 13px; color: var(--ink-dim); margin: 0 0 6px; }
.trust-badge-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; width: 100px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { border-color: var(--gold); color: var(--gold-soft); }
.footer-bottom { border-top: 1px solid var(--line); padding: 18px 0; text-align: center; font-size: 12px; color: var(--ink-faint); }

/* ---------------- Breadcrumb ---------------- */
.breadcrumb { font-size: 13px; color: var(--ink-faint); padding: 18px 0; }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb .sep { margin: 0 6px; }

/* ---------------- Shop / listing ---------------- */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }
.filter-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; }
.filter-box h4 { font-size: 14px; margin: 0 0 14px; }
.filter-box label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.filter-box input[type=checkbox] { accent-color: var(--gold); }
.filter-box input[type=range] { accent-color: var(--gold); width: 100%; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.shop-toolbar select { background: var(--card); border: 1px solid var(--line); color: var(--ink); padding: 9px 12px; border-radius: var(--radius); font-size: 13px; }
.result-count { font-size: 13px; color: var(--ink-faint); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.pagination a, .pagination span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--line); font-size: 13px; color: var(--ink-dim); }
.pagination a:hover, .pagination .active { background: var(--gold); color: #14120f; border-color: var(--gold); }

/* ---------------- Product detail ---------------- */
.pd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }

/* ---------------- Cart layout ---------------- */
/* Desktop: products 75% on the right, order summary 25% on the left. */
.cart-layout {
    grid-template-columns: 3fr 1fr;
    gap: 32px;
    align-items: start;
}
.cart-layout > .summary-box {
    position: sticky;
    top: 24px;
    align-self: start;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
}

.pd-gallery-main { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); margin-bottom: 12px; }
.pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 10px; }
.pd-thumbs button { width: 76px; height: 90px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); padding: 0; }
.pd-thumbs button.active { border-color: var(--gold); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pd-info h1 { font-size: 26px; margin: 0 0 10px; }
.pd-rating { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: 13px; margin-bottom: 16px; }
.pd-rating span { color: var(--ink-faint); }
.pd-price { font-size: 26px; font-weight: 800; color: var(--gold-soft); margin-bottom: 18px; display: flex; align-items: baseline; gap: 10px; }
.pd-price .old { font-size: 15px; color: var(--ink-faint); text-decoration: line-through; font-weight: 400; }
.pd-desc { color: var(--ink-dim); font-size: 14px; margin-bottom: 22px; }
.pd-option-group { margin-bottom: 20px; }
.pd-option-group h5 { font-size: 13px; margin: 0 0 10px; color: var(--ink-dim); }
.opt-list { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-list label { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px; font-size: 13px; cursor: pointer; }
.opt-list input { display: none; }
.opt-list input:checked + span { color: var(--gold-soft); }
.opt-list label:has(input:checked) { border-color: var(--gold); }
.opt-list label.opt-disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.qty-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); width: fit-content; }
.qty-input button { background: none; border: none; color: var(--ink); width: 38px; height: 42px; font-size: 16px; }
.qty-input input { width: 46px; text-align: center; background: none; border: none; color: var(--ink); font-size: 14px; }
.pd-actions { display: flex; gap: 12px; margin-top: 24px; }
.pd-meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint); }
.pd-meta div { margin-bottom: 6px; }

/* ---------------- Cart / Checkout ---------------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: right; font-size: 12px; color: var(--ink-faint); font-weight: 600; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
.cart-prod { display: flex; align-items: center; gap: 14px; }
.cart-prod img { width: 64px; height: 78px; object-fit: cover; border-radius: var(--radius); background: var(--card); }
.cart-prod h4 { margin: 0 0 4px; font-size: 13px; }
.cart-prod span { font-size: 12px; color: var(--ink-faint); }
.remove-link { color: var(--danger); font-size: 12px; }

/* ---------------- Cart quantity stepper ---------------- */
.cart-qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 44px;
    padding: 4px;
    gap: 3px;
    box-sizing: border-box;
    direction: ltr;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cart-qty-control:focus-within,
.cart-qty-control:hover {
    border-color: rgba(199,160,107,.42);
    box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
.cart-qty-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    font: inherit;
    padding: 0;
    transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cart-qty-btn i { font-size: 10px; pointer-events: none; }
.cart-qty-btn:hover {
    color: var(--gold-soft);
    background: rgba(199,160,107,.10);
    transform: translateY(-1px);
}
.cart-qty-btn:active { transform: translateY(0) scale(.94); }
.cart-qty-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}
.cart-qty-plus { order: 3; }
.cart-qty-minus { order: 1; }
.cart-qty-value {
    order: 2;
    min-width: 34px;
    text-align: center;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 34px;
    user-select: none;
}
@media (max-width: 760px) {
    .cart-qty-control { width: 116px; }
    .cart-qty-btn { width: 32px; height: 32px; flex-basis: 32px; }
    .cart-qty-value { min-width: 30px; }
}

.summary-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.summary-box h3 { font-size: 16px; margin: 0 0 18px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-dim); margin-bottom: 12px; }
.summary-row.total { color: var(--ink); font-weight: 700; font-size: 15px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 8px; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px 14px; color: var(--ink); font-size: 14px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); }
.form-group textarea { resize: vertical; min-height: 100px; }

.auth-box { max-width: 420px; margin: 60px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; }
.auth-box h1 { font-size: 22px; margin: 0 0 6px; text-align: center; }
.auth-box p.sub { text-align: center; color: var(--ink-faint); font-size: 13px; margin: 0 0 26px; }
.auth-box .switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--ink-faint); }
.auth-box .switch a { color: var(--gold-soft); }

.alert { padding: 13px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 18px; border: 1px solid; }
.alert-success { background: rgba(120,180,120,.08); border-color: rgba(120,180,120,.3); color: #9fd39f; }
.alert-error { background: rgba(209,107,107,.08); border-color: rgba(209,107,107,.3); color: #e39a9a; }
.alert-info { background: rgba(199,160,107,.08); border-color: rgba(199,160,107,.3); color: var(--gold-soft); }

.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-faint); }
.empty-state svg { width: 60px; height: 60px; margin-bottom: 16px; opacity: .5; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1080px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .lookbook-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cat-strip-grid { grid-template-columns: repeat(3, 1fr); }
    .insta-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .main-nav, .search-box { display: none; }
    .nav-toggle { display: flex; align-items: center; justify-content: center; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy h1 { font-size: 32px; }
    .promo-row { grid-template-columns: 1fr; }
    .shop-layout { grid-template-columns: 1fr; }
    .pd-layout { grid-template-columns: 1fr; gap: 24px; }
    .cart-layout { grid-template-columns: 1fr; gap: 24px; }
    .cart-layout > .summary-box { position: static; }
    .trust-row { grid-template-columns: 1fr 1fr; }
    .testi-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .product-grid.cols-3, .product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid.cols-3, .product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .cat-strip-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .insta-row { grid-template-columns: repeat(3, 1fr); }
    .header-inner { height: 64px; }
    .logo { font-size: 19px; }
    .section { padding: 36px 0; }
    .hero-copy h1 { font-size: 26px; }
}

/* Mobile nav drawer */
.mobile-nav { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; display: none; }
.mobile-nav.open { display: block; }
.mobile-nav-panel { position: absolute; top: 0; inset-inline-end: 0; width: 280px; height: 100%; background: var(--bg-soft); padding: 24px; border-inline-start: 1px solid var(--line); }
.mobile-nav-panel a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.mobile-nav-close { background: none; border: none; color: var(--ink); font-size: 22px; margin-bottom: 10px; }

/* ================= Light theme override ================= */
html[data-theme="light"] {
    --bg: #f7f5f1;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-hover: #f1ede4;
    --line: rgba(20,18,14,.1);
    --ink: #1c1a17;
    --ink-dim: #5c5750;
    --ink-faint: #8a8478;
    --shadow: 0 16px 40px rgba(0,0,0,.08);
}
html[data-theme="light"] .site-header { background: rgba(247,245,241,.92); }
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select {
    background: #fff; color: var(--ink); border-color: var(--line);
}

.theme-toggle-btn { background: none; border: none; padding: 0; }
.theme-icon-light, .theme-icon-dark { width: 22px; height: 22px; font-size: 18px; display: flex; align-items: center; justify-content: center; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark { display: none; }

/* ================= Coupon box (checkout) ================= */
.coupon-box { display: flex; gap: 8px; margin: 16px 0; }
.coupon-box input { flex: 1; }
.coupon-msg { font-size: 12.5px; margin-top: 8px; }
.coupon-msg.ok { color: #9fd39f; }
.coupon-msg.err { color: #e39a9a; }
.coupon-applied-row { color: #9fd39f; }
.summary-row.discount span:last-child { color: #9fd39f; }

/* ================= Shipping / Payment option cards ================= */
.option-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.option-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s;
}
.option-card:hover { border-color: var(--gold); }
.option-card.selected { border-color: var(--gold); background: rgba(199,160,107,.06); }
.option-card input[type="radio"] { accent-color: var(--gold); width: 18px; height: 18px; flex-shrink: 0; }
.option-card .opt-icon {
    width: 38px; height: 38px; border-radius: 50%; background: var(--card-hover); color: var(--gold-soft);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px;
}
.option-card .opt-body { flex: 1; }
.option-card .opt-body strong { display: block; font-size: 14px; margin-bottom: 2px; }
.option-card .opt-body span { font-size: 12.5px; color: var(--ink-dim); }
.option-card .opt-cost { font-size: 13px; color: var(--gold-soft); font-weight: 600; white-space: nowrap; }

/* ================= Account panel (two-column) ================= */
.account-shell {
    display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start;
}
.account-profile-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 20px; text-align: center; position: sticky; top: 90px;
}
.account-avatar {
    width: 92px; height: 92px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px;
    border: 3px solid var(--gold); display: block; background: var(--card-hover);
}
.account-avatar-fallback {
    width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 14px; background: var(--card-hover);
    display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--gold-soft);
    border: 3px solid var(--gold);
}
.account-profile-card h3 { font-size: 16px; margin: 0 0 2px; }
.account-profile-card p { font-size: 12px; color: var(--ink-faint); margin: 0 0 18px; }
.account-nav { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.account-nav a {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius);
    font-size: 13.5px; color: var(--ink-dim); position: relative; transition: background .15s, color .15s;
}
.account-nav a i { width: 18px; text-align: center; color: var(--ink-faint); font-size: 15px; }
.account-nav a:hover { background: var(--card-hover); color: var(--ink); }
.account-nav a.active { background: var(--gold); color: #14120f; font-weight: 600; }
.account-nav a.active i { color: #14120f; }
.account-nav a .nav-badge {
    margin-inline-start: auto; background: var(--danger); color: #fff; font-size: 10.5px;
    padding: 1px 7px; border-radius: 20px; font-weight: 700;
}
.account-nav a.logout-link { color: var(--danger); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 14px; border-radius: 0; }
.account-main { min-width: 0; }
.account-widget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.account-widget {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
}
.account-widget .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--card-hover); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.account-widget h4 { font-size: 20px; margin: 0 0 2px; }
.account-widget p { font-size: 12px; color: var(--ink-faint); margin: 0; }
.account-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.account-card h3 { font-size: 15px; margin: 0 0 18px; }
.ticket-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ticket-msg { max-width: 78%; padding: 12px 15px; border-radius: 10px; font-size: 13.5px; line-height: 1.9; }
.ticket-msg.from-user { align-self: flex-end; background: var(--gold); color: #14120f; }
.ticket-msg.from-admin { align-self: flex-start; background: var(--card-hover); border: 1px solid var(--line); }
.ticket-msg .meta { font-size: 10.5px; opacity: .7; margin-top: 6px; }
.notif-list { display: flex; flex-direction: column; gap: 2px; }
.notif-item { display: flex; gap: 12px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
a.notif-item { transition: background .15s ease; border-radius: var(--radius); }
a.notif-item:hover { background: var(--card-hover); }
.notif-item.unread { background: rgba(199,160,107,.05); }
.notif-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 6px; flex-shrink: 0; }
.notif-item .dot.read { background: transparent; }
.notif-item .body strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.notif-item .body span { font-size: 12px; color: var(--ink-faint); }

@media (max-width: 900px) {
    .account-shell { grid-template-columns: 1fr; }
    .account-profile-card { position: static; }
    .account-widget-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .account-widget-grid { grid-template-columns: 1fr; }
}

/* ---- Dashboard: clickable stat widgets ---- */
.account-widget-link { display: block; }
.account-widget-link .account-widget { transition: border-color .15s ease, transform .15s ease, background .15s ease; cursor: pointer; }
.account-widget-link:hover .account-widget { border-color: var(--gold); transform: translateY(-2px); background: var(--card-hover); }
.account-widget-link .account-widget .go-arrow { float: inline-start; margin-inline-start: auto; color: var(--ink-faint); font-size: 12px; }

/* ---- Dashboard: recently viewed strip ---- */
.recent-view-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.rv-item { flex: 0 0 130px; width: 130px; }
.rv-thumb { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: var(--card-hover); border: 1px solid var(--line); margin-bottom: 8px; }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-name { font-size: 12.5px; color: var(--ink); margin-bottom: 4px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-price { font-size: 12px; color: var(--gold-soft); font-weight: 700; }

/* ---- Order list: filter tabs ---- */
.order-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

/* ---- Order detail page ---- */
.order-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.order-detail-head h3 { margin: 0; }
.order-meta-row { display: flex; flex-wrap: wrap; gap: 22px; color: var(--ink-dim); font-size: 13px; margin: 10px 0 4px; }
.order-meta-row strong { color: var(--ink); }

.order-timeline {
    --timeline-progress: 0%;
    display: flex; align-items: flex-start; justify-content: space-between;
    margin: 26px 0 6px; padding: 0 0 4px; position: relative;
    overflow: visible; direction: rtl;
}
.order-timeline .ot-track {
    position: absolute; top: 18px; left: calc(12.5% + 0px); right: calc(12.5% + 0px);
    height: 2px; background: var(--line); z-index: 0; pointer-events: none;
}
.order-timeline .ot-track span {
    display: block; width: var(--timeline-progress); height: 100%;
    margin-inline-start: 0; background: var(--gold);
    transform-origin: right center;
}
.order-timeline .ot-step {
    flex: 1; min-width: 90px; text-align: center; position: relative; z-index: 1;
}
.order-timeline .ot-icon {
    width: 38px; height: 38px; border-radius: 50%; background: var(--card-hover); border: 2px solid var(--line);
    color: var(--ink-faint); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
    position: relative; z-index: 2; font-size: 14px;
}
.order-timeline .ot-label { font-size: 11.5px; color: var(--ink-faint); }
.order-timeline .ot-step.is-done .ot-icon { background: var(--gold); border-color: var(--gold); color: #14120f; }
.order-timeline .ot-step.is-done .ot-label { color: var(--ink-dim); }
.order-timeline .ot-step.is-current .ot-icon { background: transparent; border-color: var(--gold); color: var(--gold-soft); box-shadow: 0 0 0 4px rgba(199,160,107,.15); }
.order-timeline .ot-step.is-current .ot-label { color: var(--gold-soft); font-weight: 700; }
.order-timeline .ot-step.is-cancelled .ot-icon { background: transparent; border-color: var(--danger); color: var(--danger); }
.order-timeline .ot-step.is-cancelled .ot-label { color: var(--danger); font-weight: 700; }
.order-timeline .ot-step.is-returned .ot-icon { background: transparent; border-color: var(--gold-soft); color: var(--gold-soft); }
.order-timeline .ot-step.is-returned .ot-label { color: var(--gold-soft); font-weight: 700; }
@media (max-width: 560px) {
    .order-timeline { justify-content: flex-start; gap: 26px; overflow-x: auto; padding-inline: 4px; }
    .order-timeline .ot-step { min-width: 74px; flex: 0 0 auto; }
    .order-timeline .ot-track { left: 41px; right: 41px; }
}

.order-item-row { display: flex; align-items: center; gap: 12px; }
.order-item-thumb { width: 44px; height: 54px; border-radius: 4px; overflow: hidden; background: var(--card-hover); flex-shrink: 0; }
.order-item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.finance-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-top: 8px; }
.finance-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--ink-dim); padding: 7px 0; }
.finance-row.total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
.finance-row .neg { color: var(--danger); }

.address-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-size: 13.5px; color: var(--ink-dim); line-height: 2; }
.address-box strong { color: var(--ink); }

.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.return-reason-box { margin-top: 14px; display: none; }
.return-reason-box.open { display: block; }
.return-reason-box textarea { width: 100%; margin-bottom: 10px; }

/* ================= Order status badges (front-end) ================= */
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-pending { background: rgba(199,160,107,.15); color: var(--gold-soft); }
.badge-processing { background: rgba(120,150,220,.15); color: #9fb4e0; }
.badge-shipped { background: rgba(160,120,220,.15); color: #bda0e0; }
.badge-delivered { background: rgba(120,180,120,.15); color: #7fbf7f; }
.badge-cancelled { background: rgba(209,107,107,.15); color: var(--danger); }
.badge-returned { background: rgba(199,160,107,.18); color: var(--gold-soft); }
.badge-open { background: rgba(199,160,107,.15); color: var(--gold-soft); }
.badge-answered { background: rgba(120,180,120,.15); color: #7fbf7f; }
.badge-closed { background: rgba(255,255,255,.08); color: var(--ink-faint); }
/* ZAYN profile image picker */
.profile-image-picker{position:relative;border:1px dashed rgba(199,160,107,.4);border-radius:18px;padding:14px;background:linear-gradient(145deg,rgba(199,160,107,.06),transparent);display:flex;align-items:center;gap:14px;max-width:520px}.profile-image-picker input{position:absolute;opacity:0;width:1px;height:1px}.profile-avatar-preview{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:0 0 72px;background:var(--card-hover);display:grid;place-items:center;border:1px solid var(--line)}.profile-avatar-preview img{width:100%;height:100%;object-fit:cover}.profile-image-picker-label{cursor:pointer;flex:1}.profile-image-picker-label strong{display:block;font-size:13px}.profile-image-picker-label span{display:block;font-size:11px;color:var(--ink-faint);margin-top:4px}.profile-image-picker .profile-select-btn{padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card-hover);color:var(--ink);font-size:11px;cursor:pointer;white-space:nowrap}.profile-image-picker:hover{border-color:var(--gold)}

/* ================= Checkout redesign: addresses / sticky summary ================= */
.checkout-layout {
    grid-template-columns: 3fr 1fr;
    gap: 32px;
    align-items: start;
}
.checkout-main { min-width: 0; }
.checkout-sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    z-index: 3;
}
.checkout-sidebar .summary-box { position: static; }
.checkout-section-title { margin: 0 0 16px; font-size: 18px; }
.address-picker-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}
.address-picker-head, .map-picker-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
.address-picker-head > div, .map-picker-head > div { display: flex; flex-direction: column; gap: 5px; }
.address-picker-head strong, .map-picker-head strong { font-size: 15px; }
.address-picker-head span, .map-picker-head span { color: var(--ink-faint); font-size: 12px; }
.address-picker-head > i { width: 42px; height: 42px; border-radius: 14px; background: rgba(199,160,107,.1); color: var(--gold-soft); display:flex; align-items:center; justify-content:center; font-size:17px; }
.saved-addresses { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.saved-address-card {
    appearance: none; border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); border-radius: 14px;
    padding: 14px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; text-align: right;
    cursor: pointer; transition: .18s ease; width: 100%; font-family: inherit;
}
.saved-address-card:hover { border-color: rgba(199,160,107,.65); transform: translateY(-1px); }
.saved-address-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(199,160,107,.18), 0 10px 28px rgba(0,0,0,.12); background: rgba(199,160,107,.06); }
.saved-address-radio { width: 17px; height: 17px; border: 2px solid var(--ink-faint); border-radius: 50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.saved-address-card.selected .saved-address-radio { border-color: var(--gold); }
.saved-address-radio span { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.saved-address-card.selected .saved-address-radio span { background: var(--gold); }
.saved-address-icon { width: 36px; height: 36px; border-radius: 11px; display:flex; align-items:center; justify-content:center; background: var(--card); color: var(--gold-soft); }
.saved-address-copy { min-width: 0; display:flex; flex-direction:column; gap:4px; }
.saved-address-copy strong { font-size: 13px; }
.saved-address-copy small { color: var(--ink-faint); font-size: 11px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.saved-address-card em { font-style: normal; font-size: 10px; color: var(--gold-soft); border:1px solid rgba(199,160,107,.35); border-radius: 999px; padding: 3px 7px; white-space:nowrap; }
.new-address-toggle {
    width:100%; margin-top:12px; padding: 13px 15px; border:1px dashed rgba(199,160,107,.45); border-radius: 12px; background: transparent;
    color: var(--ink); display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:inherit; font-size:13px; transition:.18s ease;
}
.new-address-toggle:hover, .new-address-toggle.open { border-color:var(--gold); background:rgba(199,160,107,.05); color:var(--gold-soft); }
.new-address-toggle span { display:flex; align-items:center; gap:8px; }
.new-address-toggle > i { transition:transform .18s ease; }
.new-address-toggle.open > i { transform:rotate(180deg); }
.new-address-panel { display:none; padding-top:18px; border-top:1px solid var(--line); margin-top:16px; }
.new-address-panel.open { display:block; }
.address-title-group { max-width: 48%; }
.map-picker-head { margin: 20px 0 10px; }
.map-locate-btn { border:1px solid var(--line); background:var(--bg-soft); color:var(--ink-dim); border-radius:10px; padding:9px 12px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.map-locate-btn:hover { border-color:var(--gold); color:var(--gold-soft); }
.map-locate-btn.loading { opacity:.6; pointer-events:none; }
.address-map { width:100%; height:310px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); z-index:1; }
.address-map .leaflet-control-attribution { font-size:9px; }
.map-coordinates { display:flex; justify-content:space-between; gap:12px; color:var(--ink-faint); font-size:11px; margin-top:8px; }
.map-coordinates span:last-child { direction:ltr; }
.save-address-check { display:flex; align-items:center; gap:9px; margin-top:14px; color:var(--ink-dim); font-size:12px; cursor:pointer; }
.save-address-check input { accent-color:var(--gold); width:16px; height:16px; }
.coupon-box-card {
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
}
.coupon-card-title { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.coupon-card-icon { width:38px; height:38px; border-radius:11px; background:rgba(199,160,107,.1); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; }
.coupon-card-title div { display:flex; flex-direction:column; gap:3px; }
.coupon-card-title strong { font-size:14px; }
.coupon-card-title small { color:var(--ink-faint); font-size:11px; }
.coupon-input-row { display:flex; gap:8px; }
.coupon-input-row input { min-width:0; flex:1; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:11px 12px; color:var(--ink); font:inherit; font-size:12px; }
.coupon-input-row input:focus { border-color:var(--gold); outline:none; }
.coupon-input-row .btn { flex:0 0 auto; }

@media (max-width: 860px) {
    .checkout-layout { grid-template-columns: 1fr; gap:24px; }
    .checkout-sidebar { position:static; }
    .saved-addresses { grid-template-columns:1fr; }
    .address-title-group { max-width:none; }
}

/* ================= Customer address book ================= */
/* Address book: keep the editor out of the initial view; it is rendered only after Add/Edit. */
.address-form-card{scroll-margin-top:90px}
.address-form-card .address-form-heading .btn-ghost{flex-shrink:0}
@media(max-width:900px){.address-form-card .address-form-heading .btn-ghost{width:100%}}

.address-book-head,.address-form-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}
.address-book-head h3,.address-form-heading h3{margin:0 0 5px}.address-book-head p,.address-form-heading p{margin:0;color:var(--ink-faint);font-size:12px;line-height:1.9}
.address-book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.saved-address-full{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;overflow:hidden;transition:.18s ease}
.saved-address-full:hover,.saved-address-full.is-default{border-color:rgba(199,160,107,.48)}
.saved-address-full.is-default{box-shadow:0 10px 30px rgba(0,0,0,.10)}
.saved-address-full-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px}
.address-book-title{display:flex;align-items:center;gap:10px;min-width:0}.address-book-title>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.address-book-title strong{font-size:14px}.address-book-title em{font-style:normal;font-size:10px;color:var(--gold-soft);border:1px solid rgba(199,160,107,.4);border-radius:99px;padding:3px 7px}
.address-book-icon{width:38px;height:38px;border-radius:12px;background:rgba(199,160,107,.09);color:var(--gold-soft);display:flex;align-items:center;justify-content:center}
.address-book-actions{display:flex;align-items:center;gap:5px}.address-book-actions a,.address-book-actions button{width:31px;height:31px;border:1px solid var(--line);background:transparent;color:var(--ink-faint);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.address-book-actions a:hover,.address-book-actions button:hover{border-color:var(--gold);color:var(--gold-soft)}.address-book-actions .danger:hover{border-color:var(--danger);color:var(--danger)}
.address-book-details{display:grid;grid-template-columns:1fr 1fr;gap:10px;color:var(--ink-dim);font-size:12px;line-height:1.8;margin-bottom:14px}.address-book-details>div{display:flex;gap:8px;align-items:flex-start}.address-book-details i{color:var(--gold-soft);width:15px;text-align:center;margin-top:3px}.address-book-details .wide{grid-column:1/-1}
.mini-map{height:135px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-soft)}.mini-map .leaflet-control-attribution{font-size:8px}.no-map{height:70px;border:1px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:11px;gap:7px}
.address-form-card{scroll-margin-top:90px}.address-form-grid{margin-top:18px}.account-address-map-wrap{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:900px){.address-book-grid{grid-template-columns:1fr}.address-book-head,.address-form-heading{align-items:flex-start;flex-direction:column}.address-book-head .btn{width:100%}}
@media(max-width:520px){.address-book-details{grid-template-columns:1fr}.address-book-details .wide{grid-column:auto}}
.order-location-panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.order-location-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.order-location-head h3{font-size:15px;margin:0 0 4px}.order-location-head h3 i{color:var(--gold-soft);margin-left:7px}.order-location-head p{margin:0;color:var(--ink-faint);font-size:11px}.shared-location-card{border:1px solid var(--line);border-radius:16px;background:var(--bg-soft);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18)}.shared-location-map-wrap{position:relative}.admin-order-map{height:320px;border:0;border-radius:0;overflow:hidden;background:var(--bg-soft)}.admin-order-map .leaflet-control-attribution{font-size:9px}.shared-location-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:42px;height:42px;border-radius:50% 50% 50% 0;transform-origin:center;rotate:-45deg;background:var(--gold);border:3px solid #fff;box-shadow:0 5px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:500}.shared-location-pin i{rotate:45deg;color:#14120f;font-size:18px}.shared-location-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--card)}.shared-location-title{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink)}.shared-location-title i{color:var(--gold-soft)}.shared-location-open{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;color:var(--gold-soft);font-size:11px;white-space:nowrap}.shared-location-open:hover{border-color:var(--gold);background:var(--card-hover)}.order-location-empty{margin-top:18px;padding:14px;border:1px dashed var(--line);border-radius:12px;color:var(--ink-faint);font-size:12px;display:flex;align-items:center;gap:8px}.order-location-empty i{color:var(--gold-soft)}

/* Hide native number spinners across the customer site; keep numeric input functionality. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ================= Shared location chooser ================= */
.shared-location-map-button{width:100%;padding:0;border:0;display:block;cursor:pointer;background:var(--bg-soft);font:inherit;color:inherit;text-align:inherit;position:relative}
.shared-location-map-button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.shared-location-map-button:hover .admin-order-map{filter:brightness(1.06)}
.shared-location-map-hint{position:absolute;inset:auto 12px 12px auto;display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(12,12,12,.78);backdrop-filter:blur(8px);color:#fff;font-size:10px;border:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(4px);transition:.2s ease;pointer-events:none}
.shared-location-map-button:hover .shared-location-map-hint{opacity:1;transform:none}
.map-app-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.map-app-modal.open{display:flex}
.map-app-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px)}
.map-app-dialog{position:relative;width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.45);animation:mapModalIn .2s ease}
@keyframes mapModalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.map-app-close{position:absolute;top:14px;left:14px;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink-dim);cursor:pointer}
.map-app-icon{width:52px;height:52px;border-radius:16px;background:rgba(199,160,107,.12);color:var(--gold);display:grid;place-items:center;font-size:20px;margin-bottom:14px}
.map-app-dialog h3{margin:0 0 7px;font-size:17px}.map-app-dialog>p{margin:0 0 18px;color:var(--ink-faint);font-size:12px;line-height:1.9}
.map-app-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.map-app-item{display:flex;align-items:center;gap:10px;padding:13px 12px;border:1px solid var(--line);border-radius:13px;background:var(--bg-soft);transition:.18s ease;color:var(--ink);font-size:12px}.map-app-item:hover{border-color:var(--gold);transform:translateY(-1px);background:rgba(199,160,107,.06)}.map-app-item>i{margin-right:auto;color:var(--ink-faint);font-size:10px}.map-app-logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--card);font-weight:800}.map-app-item.google .map-app-logo{color:#4285f4}.map-app-item.neshan .map-app-logo{color:#e5b44c}.map-app-item.balad .map-app-logo{color:#58b77c}.map-app-item.waze .map-app-logo{color:#5fc7e8}
body.map-modal-open{overflow:hidden}

/* ================= Universal animated checkbox switches ================= */
input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:44px!important;height:24px!important;min-width:44px;padding:0!important;margin:0;flex:0 0 44px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background-color:rgba(255,255,255,.08);background-image:radial-gradient(circle 8px at 12px 50%,#f7f4ed 0 99%,transparent 100%);background-repeat:no-repeat;background-size:100% 100%;background-position:0 0;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);cursor:pointer;transition:background-color .2s ease,background-position .24s cubic-bezier(.22,.61,.36,1),border-color .2s ease,box-shadow .2s ease}
input[type="checkbox"]:hover{border-color:rgba(199,160,107,.55)}
input[type="checkbox"]:checked{background-color:var(--gold);border-color:var(--gold);background-image:radial-gradient(circle 8px at 32px 50%,#14120f 0 99%,transparent 100%);box-shadow:0 0 0 3px rgba(199,160,107,.08),inset 0 1px 2px rgba(0,0,0,.15)}
input[type="checkbox"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.form-check,.save-address-check{gap:10px}
.save-address-check input{width:44px!important;height:24px!important;min-width:44px}
@media(max-width:520px){.map-app-grid{grid-template-columns:1fr}.map-app-dialog{padding:22px}.shared-location-map-hint{opacity:1;transform:none}}

/* Order success page redesign */
.order-success-page{min-height:calc(100vh - 180px);display:flex;align-items:center;justify-content:center;padding-top:35px;padding-bottom:55px}
.order-success-card{width:min(620px,100%);background:linear-gradient(145deg,var(--card),var(--bg-soft));border:1px solid var(--line);border-radius:24px;padding:38px 42px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.28);position:relative;overflow:hidden}
.order-success-card:before{content:"";position:absolute;top:-90px;left:50%;width:240px;height:180px;transform:translateX(-50%);background:rgba(199,160,107,.07);filter:blur(45px);pointer-events:none}
.success-check{position:relative;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(120,190,120,.13);border:1px solid rgba(127,191,127,.18);color:#9bd49b;box-shadow:0 0 0 8px rgba(120,190,120,.025)}
.success-kicker{font-size:10px;letter-spacing:1.4px;color:var(--gold);font-weight:700;margin-bottom:8px}
.order-success-card h1{font-size:24px;line-height:1.6;margin:0 0 13px;color:var(--ink)}
.tracking-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;background:rgba(199,160,107,.07);border:1px solid rgba(199,160,107,.14);font-size:11px;margin-bottom:24px}
.tracking-pill span{color:var(--ink-faint)}.tracking-pill strong{color:var(--gold-soft);direction:ltr}
.success-details{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:right;margin-bottom:18px}
.success-detail{min-height:84px;padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018);display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.success-detail span{font-size:10.5px;color:var(--ink-faint);display:flex;align-items:center;gap:7px}.success-detail span i{color:var(--gold)}
.success-detail strong{font-size:11.5px;color:var(--ink);line-height:1.7}.success-total{background:rgba(199,160,107,.055);border-color:rgba(199,160,107,.15)}.success-total strong{font-size:16px;color:var(--gold-soft)}.success-total small{font-size:9px;color:var(--ink-faint);font-weight:400}
.success-message{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;margin-bottom:22px;border-radius:12px;background:rgba(255,255,255,.025);color:var(--ink-dim);font-size:11px;line-height:1.8}.success-message i{color:var(--gold)}
.success-back{min-width:190px;padding:12px 20px;border-radius:12px}.success-back i{font-size:11px}
@media(max-width:620px){.order-success-card{padding:30px 18px;border-radius:18px}.order-success-card h1{font-size:20px}.success-details{grid-template-columns:1fr}.success-detail{min-height:auto;gap:8px}.success-message{align-items:flex-start;text-align:right}}

/* ================= Modern shop filters ================= */
.shop-layout { grid-template-columns: 286px minmax(0, 1fr); gap: 28px; }
.shop-filters { position: sticky; top: 96px; z-index: 10; }
.shop-filters-head { display:flex; align-items:center; justify-content:space-between; padding: 4px 4px 14px; }
.shop-filters-head > div { display:flex; flex-direction:column; gap:2px; }
.shop-filters-head strong { font-size:18px; color:var(--ink); }
.shop-filters-head span { font-size:11px; color:var(--ink-faint); }
.shop-filter-close { display:none; border:0; background:transparent; color:var(--ink-dim); font-size:25px; line-height:1; }
.filter-panel { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 12px 35px rgba(0,0,0,.08); }
.filter-section { border-bottom:1px solid var(--line); }
.filter-section:last-of-type { border-bottom:0; }
.filter-section summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 16px; color:var(--ink); font-size:13px; font-weight:700; user-select:none; }
.filter-section summary::-webkit-details-marker { display:none; }
.filter-section summary > span { display:flex; align-items:center; gap:10px; }
.filter-section summary > span > i { width:19px; color:var(--gold-soft); font-size:13px; text-align:center; }
.filter-chevron { color:var(--ink-faint); font-size:10px; transition:transform .18s ease; }
.filter-section[open] .filter-chevron { transform:rotate(180deg); }
.filter-section-body { padding:0 16px 16px; animation:filterReveal .18s ease; }
@keyframes filterReveal { from { opacity:.4; transform:translateY(-3px); } to { opacity:1; transform:none; } }
.filter-check { position:relative; display:flex; align-items:center; gap:10px; min-height:37px; cursor:pointer; color:var(--ink-dim); font-size:12.5px; border-radius:9px; padding:5px 7px; transition:.16s ease; }
.filter-check:hover { background:var(--card-hover); color:var(--ink); }
.filter-check input { position:absolute; opacity:0; pointer-events:none; }
.custom-check { width:17px; height:17px; border:1px solid var(--ink-faint); border-radius:5px; display:grid; place-items:center; flex:0 0 17px; transition:.16s ease; }
.custom-check i { opacity:0; font-size:9px; transform:scale(.7); transition:.16s ease; }
.filter-check input:checked + .custom-check { background:var(--gold); border-color:var(--gold); color:#14120f; }
.filter-check input:checked + .custom-check i { opacity:1; transform:scale(1); }
.filter-check.is-selected .filter-label { color:var(--gold-soft); font-weight:600; }
.price-inputs { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:7px; }
.price-inputs label { display:block; min-width:0; }
.price-inputs label > span { display:block; font-size:10px; color:var(--ink-faint); margin:0 0 5px; }
.price-inputs input { width:100%; min-width:0; height:40px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); border-radius:9px; padding:8px 9px; font-size:11px; outline:none; }
.price-inputs input:focus { border-color:var(--gold); }
.price-dash { color:var(--ink-faint); padding-bottom:11px; }
.filter-apply { width:100%; height:38px; margin-top:10px; border:1px solid rgba(199,160,107,.4); border-radius:9px; background:rgba(199,160,107,.08); color:var(--gold-soft); font:inherit; font-size:11px; cursor:pointer; transition:.16s ease; }
.filter-apply:hover { background:var(--gold); color:#14120f; border-color:var(--gold); }
.color-filter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:11px 7px; }
.color-filter-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; min-width:0; }
.color-filter-item input { position:absolute; opacity:0; pointer-events:none; }
.color-swatch { width:28px; height:28px; border-radius:50%; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); display:grid; place-items:center; transition:.16s ease; }
.color-swatch i { color:#fff; font-size:9px; opacity:0; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.color-filter-item small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-faint); font-size:9.5px; }
.color-filter-item:hover .color-swatch { transform:scale(1.08); }
.color-filter-item.is-selected .color-swatch { border-color:var(--gold); box-shadow:0 0 0 2px var(--card),0 0 0 4px rgba(199,160,107,.32); }
.color-filter-item.is-selected .color-swatch i { opacity:1; }
.color-filter-item.is-selected small { color:var(--gold-soft); }
.filter-switch-row { display:grid; grid-template-columns:36px minmax(0,1fr) 42px; align-items:center; gap:10px; padding:10px 0; cursor:pointer; }
.filter-switch-row + .filter-switch-row { border-top:1px solid var(--line); }
.filter-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--line); color:var(--ink-faint); font-size:12px; }
.filter-icon.gold { color:var(--gold-soft); background:rgba(199,160,107,.08); border-color:rgba(199,160,107,.18); }
.filter-icon.sale { color:#ef9b48; background:rgba(239,155,72,.07); border-color:rgba(239,155,72,.15); }
.filter-copy { min-width:0; display:flex; flex-direction:column; gap:1px; }
.filter-copy strong { font-size:11.5px; color:var(--ink); font-weight:600; }
.filter-copy small { font-size:9.5px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.switch { position:relative; width:38px; height:21px; display:block; }
.switch input { position:absolute; opacity:0; }
.switch i { position:absolute; inset:0; border:1px solid var(--ink-faint); border-radius:999px; background:transparent; transition:.18s ease; }
.switch i:after { content:""; position:absolute; width:13px; height:13px; top:3px; inset-inline-start:3px; border-radius:50%; background:var(--ink-faint); transition:.18s ease; }
.switch input:checked + i { background:var(--gold); border-color:var(--gold); }
.switch input:checked + i:after { background:#14120f; transform:translateX(-17px); }
.filter-clear { display:flex; align-items:center; justify-content:center; gap:7px; margin:13px; padding:10px; border:1px dashed var(--line); border-radius:9px; color:var(--ink-faint); font-size:11px; transition:.16s ease; }
.filter-clear:hover { color:var(--gold-soft); border-color:rgba(199,160,107,.45); background:rgba(199,160,107,.05); }
.shop-mobile-filter-bar { display:none; }
.shop-toolbar-copy { display:flex; align-items:center; gap:12px; }
.active-filter-note { display:inline-flex; align-items:center; gap:5px; color:var(--gold-soft); font-size:10.5px; }
.active-filter-note i { font-size:9px; }
.sort-form label { display:flex; align-items:center; gap:8px; color:var(--ink-faint); font-size:11px; }
.sort-form select { min-width:150px; }

html[data-theme="light"] .filter-panel { box-shadow:0 12px 35px rgba(20,18,14,.06); }
html[data-theme="light"] .color-swatch { box-shadow:inset 0 0 0 1px rgba(20,18,14,.1); }

@media (max-width: 860px) {
    .shop-mobile-filter-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; color:var(--ink-faint); font-size:11px; }
    .shop-filter-toggle { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; font-size:12px; }
    .shop-filter-toggle i { color:var(--gold-soft); }
    .shop-filter-toggle b { min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:var(--gold); color:#14120f; font-size:9px; }
    .shop-filters { position:fixed; inset:0; z-index:1000; display:none; background:rgba(0,0,0,.55); padding:0; }
    .shop-filters.is-open { display:block; }
    .shop-filters:before { content:""; position:absolute; inset:0; }
    .shop-filters .shop-filters-head, .shop-filters .filter-panel { position:relative; z-index:1; width:min(340px,92vw); margin-inline-start:auto; }
    .shop-filters .shop-filters-head { margin-top:0; padding:18px 18px 13px; background:var(--card); border-inline-start:1px solid var(--line); }
    .shop-filters .filter-panel { height:calc(100vh - 71px); overflow:auto; border-radius:0; border-inline-start:1px solid var(--line); border-top:0; }
    .shop-filter-close { display:block; }
    .shop-layout { display:block; }
    .shop-results { min-width:0; }
}

@media (max-width: 600px) {
    .shop-toolbar { align-items:flex-start; gap:10px; }
    .shop-toolbar-copy { display:block; }
    .active-filter-note { margin-top:3px; }
    .sort-form label > span { display:none; }
    .sort-form select { min-width:132px; }
    .color-filter-grid { grid-template-columns:repeat(5,1fr); }
}

/* =====================================================================
   ZAYN THEME SYSTEM — FINAL POLISH
   Centralized light/dark palette so every public-page component follows
   the same visual language instead of mixing hard-coded dark colors.
   ===================================================================== */
:root {
    color-scheme: dark;
    --surface-1: var(--bg);
    --surface-2: var(--bg-soft);
    --surface-3: var(--card);
    --surface-4: var(--card-hover);
    --text-strong: var(--ink);
    --text-normal: var(--ink-dim);
    --text-muted: var(--ink-faint);
    --control-bg: var(--card);
    --control-border: var(--line);
    --overlay: rgba(0,0,0,.62);
    --white-strong: #fff;
    --on-gold: #14120f;
    --success: #7fbf7f;
    --success-soft: #9fd39f;
}

html[data-theme="light"] {
    color-scheme: light;
    --surface-1: #f7f5f1;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --surface-4: #f0ece4;
    --text-strong: #1c1a17;
    --text-normal: #5c5750;
    --text-muted: #847e73;
    --control-bg: #ffffff;
    --control-border: rgba(28,26,23,.12);
    --overlay: rgba(28,26,23,.42);
    --white-strong: #1c1a17;
    --on-gold: #17130e;
}

html, body { background: var(--surface-1); color: var(--text-strong); }
body, .site-header, .site-footer, .mobile-nav-panel,
.search-box input, .filter-panel, .product-card, .category-card,
.cart-card, .checkout-card, .account-card, .address-card, .modal-box,
.option-card, .coupon-box, .order-card, .ticket-card, .review-card,
.login-box, .contact-card, .faq-item, .pagination a, .sort-select,
.shop-toolbar, .shop-sidebar, .lookbook-intro, .testi-card, .trust-item .ic,
.news-card, .blog-card, .wishlist-card {
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

/* Controls */
input, textarea, select {
    background-color: var(--control-bg);
    color: var(--text-strong);
    border-color: var(--control-border);
    color-scheme: inherit;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
select option { background: var(--control-bg); color: var(--text-strong); }
input:focus, textarea:focus, select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(199,160,107,.10);
    outline: none;
}

/* Buttons and generic surfaces */
.btn-outline-light { border-color: var(--control-border); color: var(--text-strong); }
.btn-outline-light:hover { background: var(--text-strong); color: var(--surface-1); }
.btn-ghost { background: transparent; border-color: var(--control-border); color: var(--text-normal); }
.btn-ghost:hover { background: var(--surface-4); color: var(--text-strong); }

/* Header / navigation */
.site-header { background: color-mix(in srgb, var(--surface-1) 92%, transparent); }
.search-box input { background: var(--surface-3); }
.mobile-nav { background: var(--overlay); }
.mobile-nav-panel { background: var(--surface-2); }

/* Hard-coded dark media placeholders become theme aware */
.hero-media, .product-media, .lookbook-photo, .testi-user .av,
.product-image-placeholder { background: var(--surface-4); }

/* Cards, panels, filters and commerce areas */
.product-card, .category-card, .filter-panel, .shop-sidebar,
.cart-card, .checkout-card, .account-card, .address-card,
.option-card, .order-card, .ticket-card, .review-card, .contact-card,
.login-box, .modal-box, .coupon-box, .testi-card, .lookbook-intro {
    background: var(--surface-3);
    border-color: var(--control-border);
}
.product-card:hover, .filter-option:hover, .option-card:hover { background: var(--surface-4); }

/* Status colors */
.coupon-msg.ok, .coupon-applied-row, .summary-row.discount span:last-child { color: var(--success-soft); }
.coupon-msg.err { color: #d98787; }

/* Theme toggle is intentionally visible in both themes */
.theme-toggle-btn { color: var(--text-normal); }
.theme-toggle-btn:hover { color: var(--gold); }
html[data-theme="dark"] .theme-icon-light,
html[data-theme="light"] .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-dark,
html[data-theme="light"] .theme-icon-light { display: flex; }

/* Light-mode fixes for components that previously used white-on-dark values */
html[data-theme="light"] .promo-card::after { background: linear-gradient(90deg, rgba(20,18,14,.60) 30%, rgba(20,18,14,.05)); }
html[data-theme="light"] .shared-location-map-hint,
html[data-theme="light"] .map-app-backdrop { background: rgba(28,26,23,.42); }
html[data-theme="light"] .shared-location-map-hint { color: #fff; }
html[data-theme="light"] .map-app-dialog { box-shadow: 0 24px 70px rgba(28,26,23,.16); }
html[data-theme="light"] .map-app-item { background: var(--surface-4); }
html[data-theme="light"] input[type="checkbox"] {
    border-color: rgba(28,26,23,.18);
    background-color: #e7e3db;
    background-image: radial-gradient(circle 8px at 12px 50%, #ffffff 0 99%, transparent 100%);
}
html[data-theme="light"] input[type="checkbox"]:checked {
    background-color: var(--gold);
    background-image: radial-gradient(circle 8px at 32px 50%, #17130e 0 99%, transparent 100%);
}
html[data-theme="light"] .filter-panel,
html[data-theme="light"] .shop-sidebar { box-shadow: 0 14px 40px rgba(28,26,23,.07); }

/* Keep the palette coherent for browser autofill */
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] textarea:-webkit-autofill,
html[data-theme="light"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-strong);
    -webkit-box-shadow: 0 0 0 1000px var(--control-bg) inset;
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-strong);
    -webkit-box-shadow: 0 0 0 1000px var(--control-bg) inset;
}

@media (prefers-reduced-motion: reduce) {
    body, .site-header, .site-footer, .mobile-nav-panel,
    .search-box input, .filter-panel, .product-card, .category-card,
    .cart-card, .checkout-card, .account-card, .address-card, .modal-box,
    .option-card, .coupon-box { transition: none !important; }
}

/* ZAYN cart tabs + saved cart */
.cart-tabs{display:flex;align-items:center;gap:8px;padding:6px;margin-bottom:24px;width:max-content;max-width:100%;background:var(--surface-3);border:1px solid var(--control-border);border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.cart-tab{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border-radius:10px;color:var(--text-muted);font-size:12px;font-weight:700;transition:.2s ease}
.cart-tab i{font-size:12px}.cart-tab b{min-width:22px;height:22px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--surface-4);color:var(--text-muted);font-size:10px}.cart-tab:hover{color:var(--text-strong);background:var(--surface-4)}.cart-tab.active{background:var(--gold);color:var(--on-gold);box-shadow:0 7px 18px rgba(199,160,107,.18)}.cart-tab.active b{background:rgba(20,18,15,.12);color:var(--on-gold)}
.cart-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}.cart-row-actions form,.cart-step-form,.saved-cart-actions form{margin:0}.save-later-btn,.cart-remove-btn,.saved-remove-btn{border:1px solid var(--control-border);background:var(--surface-3);color:var(--text-muted);cursor:pointer;min-height:34px;border-radius:9px;padding:0 9px;font:inherit;font-size:10px;display:inline-flex;align-items:center;gap:6px;transition:.18s ease}.save-later-btn:hover{color:var(--gold-soft);border-color:rgba(199,160,107,.42);background:var(--surface-4);transform:translateY(-1px)}.cart-remove-btn:hover,.saved-remove-btn:hover{color:var(--danger);background:var(--surface-4)}
.saved-cart-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.saved-cart-head h2{margin:0 0 6px;font-size:19px}.saved-cart-head p{margin:0;color:var(--text-muted);font-size:11px}.saved-cart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.saved-cart-card{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px;background:var(--surface-3);border:1px solid var(--control-border);border-radius:var(--radius);transition:.2s ease}.saved-cart-card:hover{border-color:rgba(199,160,107,.28);transform:translateY(-2px);box-shadow:0 14px 35px rgba(0,0,0,.06)}.saved-cart-image{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:11px;background:var(--surface-4)}.saved-cart-image img{width:100%;height:100%;object-fit:cover;display:block}.saved-cart-info{min-width:0;display:flex;flex-direction:column;padding:4px 0}.saved-cart-info h3{margin:0 0 7px;font-size:13px;color:var(--text-strong)}.saved-cart-meta{color:var(--text-muted);font-size:10px}.saved-cart-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px}.saved-cart-bottom strong{color:var(--gold-soft);font-size:13px}.saved-cart-bottom span{color:var(--text-muted);font-size:10px}.saved-cart-actions{display:flex;align-items:center;gap:7px;margin-top:12px}.saved-cart-actions .btn{min-height:36px;padding:0 12px;font-size:10px}.saved-remove-btn{width:36px;height:36px;padding:0;justify-content:center}.cart-empty-next .cart-empty-icon{width:56px;height:56px;margin:0 auto 15px;display:grid;place-items:center;border-radius:16px;background:var(--surface-4);color:var(--gold-soft);font-size:20px}
.cart-clear-form{margin-top:14px}.cart-clear-btn{border:1px solid var(--control-border);background:var(--surface-3);color:var(--text-muted);border-radius:10px;min-height:38px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:10px;cursor:pointer;transition:.18s ease}.cart-clear-btn:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--control-border));background:var(--surface-4);transform:translateY(-1px)}
@media(max-width:760px){.cart-tabs{width:100%}.cart-tab{flex:1;justify-content:center;padding:0 10px}.saved-cart-grid{grid-template-columns:1fr}.saved-cart-head{align-items:flex-start;flex-direction:column}.saved-cart-head .cart-clear-btn{width:100%;justify-content:center}.cart-row-actions{flex-direction:column;align-items:flex-end}.save-later-btn span{display:none}.save-later-btn{width:34px;padding:0;justify-content:center}}


/* ================= Category / Blog refresh ================= */
.cat-strip { padding: 42px 0; }
.category-showcase-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.category-showcase-head h2 { margin:5px 0 0; font-size:22px; }
.category-showcase-head > span { color:var(--ink-faint); font-size:11px; }
.section-kicker { display:inline-block; color:var(--gold-soft); font-size:10px; letter-spacing:2px; font-weight:700; }
.cat-strip-grid { grid-template-columns:repeat(3,1fr); gap:14px; }
.cat-item { text-align:initial; }
.cat-thumb.text-only { aspect-ratio:2.15/1; border-radius:18px; position:relative; display:flex; align-items:center; justify-content:center; background:
    radial-gradient(circle at 75% 20%, rgba(199,160,107,.16), transparent 38%), var(--card);
    border:1px solid var(--line); overflow:hidden; }
.cat-thumb.text-only > i { font-size:38px; color:var(--gold-soft); transition:transform .25s ease; }
.cat-item:hover .cat-thumb.text-only > i { transform:translateY(-4px) scale(1.04); }
.cat-index { position:absolute; top:14px; inset-inline-start:15px; color:var(--ink-faint); font-size:10px; letter-spacing:1px; }
.cat-arrow { position:absolute; bottom:14px; inset-inline-end:15px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--ink-dim); border:1px solid var(--line); }
.cat-item h3 { font-size:16px; margin:12px 2px 4px; }
.cat-item .link { font-size:11px; color:var(--ink-faint); }
.cat-item .link i { margin-inline-start:5px; }
.category-empty-home { grid-column:1/-1; border:1px dashed var(--line); border-radius:14px; padding:28px; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; gap:10px; }

.home-blog-section { padding-top:12px; }
.home-blog-section .section-head { align-items:flex-end; }
.home-blog-section .section-head h2 { margin-top:5px; }
.home-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.home-blog-card { min-height:265px; position:relative; overflow:hidden; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; transition:transform .22s ease,border-color .22s ease; }
.home-blog-card:hover { transform:translateY(-4px); border-color:rgba(199,160,107,.38); }
.home-blog-number { color:var(--gold-soft); font-size:11px; letter-spacing:1px; }
.home-blog-content { margin-top:auto; }
.home-blog-content time { color:var(--ink-faint); font-size:10px; }
.home-blog-content h3 { font-size:18px; line-height:1.55; margin:8px 0; max-width:17ch; }
.home-blog-content p { color:var(--ink-dim); font-size:12px; line-height:1.9; margin:0 0 16px; }
.home-blog-content > span { color:var(--gold-soft); font-size:11px; }
.home-blog-corner { position:absolute; top:17px; inset-inline-end:17px; color:var(--ink-faint); }
.home-blog-empty { padding:28px; border:1px dashed var(--line); border-radius:14px; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; gap:10px; }

/* Public blog */
.blog-hero { padding:56px 0 42px; border-bottom:1px solid var(--line); }
.blog-hero-inner { min-height:260px; border:1px solid var(--line); border-radius:20px; background:
    radial-gradient(circle at 12% 18%, rgba(199,160,107,.16), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(255,255,255,.04), transparent 25%), var(--card);
    display:flex; align-items:center; justify-content:space-between; padding:40px 50px; overflow:hidden; }
.blog-kicker { color:var(--gold-soft); font-size:10px; font-weight:800; letter-spacing:2px; }
.blog-hero h1 { font-size:44px; margin:12px 0 8px; }
.blog-hero p { color:var(--ink-dim); max-width:58ch; line-height:2; margin:0; }
.blog-hero-mark { width:110px; height:110px; border:1px solid rgba(199,160,107,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--gold-soft); flex-shrink:0; }
.blog-hero-mark span { font-size:30px; font-weight:800; line-height:1; }
.blog-hero-mark small { font-size:8px; letter-spacing:2px; text-align:center; line-height:1.4; margin-top:7px; }
.blog-list-section { padding-top:36px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.blog-card { min-height:320px; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease,border-color .2s ease; }
.blog-card:hover { transform:translateY(-4px); border-color:rgba(199,160,107,.35); }
.blog-card-top { display:flex; justify-content:space-between; padding:17px 18px; color:var(--gold-soft); font-size:11px; border-bottom:1px solid var(--line); }
.blog-card-top i { color:var(--ink-faint); }
.blog-card-body { padding:22px 20px 20px; display:flex; flex-direction:column; flex:1; }
.blog-card-body time { color:var(--ink-faint); font-size:10px; }
.blog-card-body h2 { font-size:19px; line-height:1.65; margin:10px 0 8px; }
.blog-card-body h2 a:hover { color:var(--gold-soft); }
.blog-card-body p { color:var(--ink-dim); font-size:12.5px; line-height:2; margin:0 0 18px; }
.blog-read-more { margin-top:auto; color:var(--gold-soft); font-size:11.5px; display:flex; gap:7px; align-items:center; }
.blog-read-more i { transition:transform .2s; }
.blog-card:hover .blog-read-more i { transform:translateX(-4px); }
.blog-pagination { display:flex; justify-content:center; gap:7px; margin-top:28px; }
.blog-pagination a { width:36px; height:36px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; color:var(--ink-dim); font-size:11px; }
.blog-pagination a.active,.blog-pagination a:hover { background:var(--gold); border-color:var(--gold); color:#14120f; }
.blog-empty-public { min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed var(--line); border-radius:16px; padding:30px; }
.blog-empty-public > i { font-size:34px; color:var(--gold-soft); margin-bottom:14px; }
.blog-empty-public h2 { margin:0 0 6px; }
.blog-empty-public p { color:var(--ink-faint); margin:0 0 18px; }

.blog-single { padding:28px 0 70px; }
.blog-breadcrumb { display:flex; gap:9px; align-items:center; color:var(--ink-faint); font-size:11px; margin-bottom:46px; flex-wrap:wrap; }
.blog-breadcrumb a:hover { color:var(--gold-soft); }
.blog-single-head { max-width:900px; margin:0 auto 46px; text-align:center; }
.blog-single-head h1 { font-size:42px; line-height:1.5; margin:12px auto 10px; }
.blog-single-head > p { color:var(--ink-dim); line-height:2; font-size:14px; max-width:65ch; margin:0 auto; }
.blog-single-meta { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; color:var(--ink-faint); font-size:10.5px; margin-top:18px; }
.blog-single-container { position:relative; }
.blog-single-layout { display:grid; grid-template-columns:58px minmax(0,820px); justify-content:center; gap:22px; align-items:start; }
.blog-single-aside { position:sticky; top:120px; align-self:start; display:flex; flex-direction:column; align-items:center; gap:8px; height:max-content; }
.blog-single-aside > span { writing-mode:vertical-rl; color:var(--ink-faint); font-size:9px; margin-bottom:4px; }
.blog-single-aside button,.blog-single-aside a { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink-dim); display:grid; place-items:center; cursor:pointer; }
.blog-single-aside button:hover,.blog-single-aside a:hover,.blog-single-aside button.copied { color:var(--gold-soft); border-color:rgba(199,160,107,.4); }
.blog-content { border:1px solid var(--line); border-radius:18px; background:var(--card); padding:42px 48px; font-size:15px; line-height:2.25; color:var(--ink-dim); }
.blog-content > *:first-child { margin-top:0; }
.blog-content h2,.blog-content h3,.blog-content h4 { color:var(--ink); line-height:1.7; margin:30px 0 12px; }
.blog-content h2 { font-size:25px; }
.blog-content h3 { font-size:20px; }
.blog-content p { margin:0 0 17px; }
.blog-content strong,.blog-content b { color:var(--ink); }
.blog-content blockquote { margin:24px 0; padding:15px 20px; border-inline-start:3px solid var(--gold); background:rgba(199,160,107,.06); border-radius:8px; color:var(--ink); }
.blog-content ul,.blog-content ol { padding-inline-start:24px; margin:0 0 18px; }
.blog-content li { margin:6px 0; }
.blog-content a { color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; }
.blog-single-footer { display:flex; justify-content:center; margin-top:26px; }

/* responsive */
@media (max-width: 850px) {
    .category-showcase-head { align-items:flex-start; flex-direction:column; }
    .cat-strip-grid,.home-blog-grid,.blog-grid { grid-template-columns:1fr; }
    .blog-hero-inner { padding:32px; }
    .blog-hero h1 { font-size:34px; }
    .blog-hero-mark { width:85px; height:85px; }
    .blog-single-head h1 { font-size:30px; }
    .blog-single-layout { grid-template-columns:1fr; }
    .blog-single-aside { position:static; flex-direction:row; justify-content:flex-start; }
    .blog-single-aside > span { writing-mode:initial; margin-inline-end:5px; }
    .blog-content { padding:28px 22px; }
}
@media (max-width: 520px) {
    .blog-hero-inner { min-height:220px; padding:25px; }
    .blog-hero-mark { display:none; }
    .blog-hero h1 { font-size:30px; }
    .home-blog-card,.blog-card { min-height:280px; }
}

/* v9: refined blog article */
.blog-single{position:relative;padding:0 0 80px;overflow:hidden}.blog-single-cover{height:220px;margin-bottom:-130px;background:radial-gradient(circle at 50% 0,rgba(199,160,107,.18),transparent 52%),linear-gradient(180deg,rgba(199,160,107,.08),transparent)}
.blog-single-container{position:relative}.blog-single .blog-breadcrumb{margin-bottom:28px;padding:12px 16px;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:12px;width:max-content;max-width:100%}.blog-single-head{padding:34px 32px 30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,var(--card),rgba(199,160,107,.035));box-shadow:0 20px 60px rgba(0,0,0,.10);margin-bottom:24px}.blog-single-head h1{font-size:44px;letter-spacing:-.4px}.blog-single-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.018)}
.blog-single-layout{grid-template-columns:52px minmax(0,860px);gap:18px}.blog-single-aside{padding-top:12px}.blog-content{padding:48px 54px;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.08);font-size:16px;line-height:2.35}.blog-content h2{font-size:28px;padding-bottom:7px;border-bottom:1px solid var(--line)}.blog-content h3{font-size:21px}.blog-content p{margin-bottom:20px}.blog-content hr{border:0;border-top:1px solid var(--line);margin:28px 0}.blog-single-related{max-width:860px;margin:22px auto 0;padding:20px 24px;border:1px solid rgba(199,160,107,.22);border-radius:18px;background:rgba(199,160,107,.045);display:flex;align-items:center;gap:12px}.blog-single-related span{color:var(--gold-soft);font-size:10px;letter-spacing:1px}.blog-single-related strong{font-size:13px;margin-inline-end:auto}.blog-single-footer{display:none}
@media(max-width:850px){.blog-single-cover{height:150px;margin-bottom:-80px}.blog-single-head{padding:28px 20px}.blog-single-head h1{font-size:31px}.blog-content{padding:30px 22px}.blog-single-related{flex-wrap:wrap}.blog-single-related strong{width:100%;order:2}.blog-single-related .btn{margin-inline-start:auto}}

/* ================= Blog media v12 ================= */
.blog-card-image{display:block;height:210px;overflow:hidden;background:var(--surface-3)}
.blog-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.blog-card:hover .blog-card-image img{transform:scale(1.035)}
.home-blog-image{height:160px;overflow:hidden;border-radius:14px;background:var(--surface-3);margin-bottom:14px}.home-blog-image img{width:100%;height:100%;object-fit:cover;display:block}
.blog-single-featured{max-width:1120px;height:min(48vw,480px);margin:0 auto 28px;border-radius:0 0 28px 28px;overflow:hidden;background:var(--surface-3);box-shadow:0 22px 70px rgba(0,0,0,.12)}
.blog-single-featured img{width:100%;height:100%;object-fit:cover;display:block}
.blog-content img{display:block;max-width:100%;height:auto;margin:28px auto;border-radius:16px;box-shadow:0 18px 45px rgba(0,0,0,.12)}
.blog-content figcaption{color:var(--ink-faint);font-size:11px;text-align:center;margin-top:-18px}
@media(max-width:850px){.blog-single-featured{height:260px;border-radius:0 0 20px 20px}.blog-card-image{height:180px}.home-blog-image{height:140px}}

/* ================= Blog home v16: clean editorial layout ================= */
.home-blog-section{padding-top:34px;padding-bottom:34px}
.home-blog-section .section-head{margin-bottom:18px}
.home-blog-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.78fr) minmax(240px,.78fr);gap:14px;align-items:stretch}
.home-blog-card{position:relative;overflow:hidden;min-height:0!important;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card);display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.home-blog-card:hover{transform:translateY(-3px);border-color:rgba(199,160,107,.38);background:rgba(255,255,255,.025)}
.home-blog-card.is-featured{padding:14px}
.home-blog-card.is-featured .home-blog-image{height:245px;margin-bottom:16px;border-radius:13px}
.home-blog-card.is-featured .home-blog-content h3{font-size:23px;line-height:1.55;max-width:26ch}
.home-blog-card.is-compact{min-height:100%!important}
.home-blog-card.is-compact .home-blog-content{margin-top:28px}
.home-blog-card.is-compact .home-blog-content h3{font-size:18px;line-height:1.7;margin-top:8px}
.home-blog-card.is-compact .home-blog-content p{font-size:12px;line-height:2;margin-bottom:20px}
.home-blog-image{height:160px;overflow:hidden;border-radius:14px;background:var(--surface-3);margin-bottom:14px;display:grid;place-items:center}
.home-blog-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.home-blog-card:hover .home-blog-image img{transform:scale(1.025)}
.home-blog-image.is-empty{background:radial-gradient(circle at 70% 25%,rgba(199,160,107,.16),transparent 35%),var(--surface-3);color:var(--gold-soft);font-size:34px}
.home-blog-number{color:var(--gold-soft);font-size:10px;letter-spacing:1px}
.home-blog-content{margin-top:auto}.home-blog-content time{color:var(--ink-faint);font-size:10px}.home-blog-content h3{font-size:18px;line-height:1.6;margin:8px 0}.home-blog-content p{color:var(--ink-dim);font-size:12px;line-height:1.9;margin:0 0 16px}.home-blog-content>span{color:var(--gold-soft);font-size:11px}.home-blog-corner{position:absolute;top:17px;inset-inline-end:17px;color:var(--ink-faint)}
@media(max-width:950px){.home-blog-layout{grid-template-columns:1fr 1fr}.home-blog-card.is-featured{grid-column:1/-1}.home-blog-card.is-featured .home-blog-image{height:230px}}
@media(max-width:600px){.home-blog-layout{grid-template-columns:1fr}.home-blog-card.is-featured{grid-column:auto}.home-blog-card.is-featured .home-blog-image{height:190px}.home-blog-card.is-featured .home-blog-content h3{font-size:19px}.home-blog-card.is-compact{min-height:230px!important}}

/* ================= Blog article v16 ================= */
.blog-reading-progress{position:fixed;z-index:9999;top:0;inset-inline-start:0;width:100%;height:3px;background:transparent;pointer-events:none}.blog-reading-progress span{display:block;height:100%;width:0;background:var(--gold);transition:width .08s linear}
.blog-single{padding:18px 0 80px}.blog-single-featured{max-width:1180px;height:min(46vw,520px);margin:0 auto 26px;border-radius:0 0 26px 26px;overflow:hidden;background:var(--surface-3);box-shadow:0 24px 70px rgba(0,0,0,.16)}.blog-single-featured img{width:100%;height:100%;object-fit:cover;display:block}
.blog-single-container{max-width:1120px}.blog-single .blog-breadcrumb{margin:0 0 18px;padding:10px 14px;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:10px;width:max-content;max-width:100%;font-size:10px}
.blog-single-head{max-width:980px;margin:0 auto 24px;padding:34px 38px 30px;text-align:right;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,var(--card),rgba(199,160,107,.035));box-shadow:0 18px 55px rgba(0,0,0,.10)}
.blog-single-label{display:flex;justify-content:space-between;align-items:center;gap:16px}.blog-single-index{color:var(--ink-faint);font-size:9px;letter-spacing:1.5px}.blog-single-head h1{font-size:43px;line-height:1.55;margin:15px 0 10px;max-width:25ch}.blog-single-head>p{color:var(--ink-dim);line-height:2;font-size:14px;max-width:75ch;margin:0}.blog-single-meta{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;color:var(--ink-faint);font-size:10px;margin-top:17px}.blog-single-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.018)}
.blog-single-layout{grid-template-columns:48px minmax(0,860px);gap:18px}.blog-single-aside{padding-top:12px}.blog-content{padding:46px 54px;border-radius:22px;box-shadow:0 18px 55px rgba(0,0,0,.07);font-size:16px;line-height:2.35}.blog-content p{margin:0 0 21px}.blog-content h2{font-size:27px;margin-top:36px}.blog-content h3{font-size:21px}.blog-content img{max-width:100%;height:auto;display:block;margin:30px auto;border-radius:15px}.blog-content figure{margin:30px 0}.blog-content blockquote{margin:26px 0;padding:17px 21px}
.blog-related-section{max-width:860px;margin:28px auto 0}.blog-related-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.blog-related-head h2{font-size:22px;margin:5px 0 0}.blog-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.blog-related-card{display:flex;flex-direction:column;gap:11px;padding:11px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:transform .2s ease,border-color .2s ease}.blog-related-card:hover{transform:translateY(-3px);border-color:rgba(199,160,107,.38)}.blog-related-thumb{height:125px;border-radius:11px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center;color:var(--gold-soft)}.blog-related-thumb img{width:100%;height:100%;object-fit:cover;display:block}.blog-related-card time{font-size:9px;color:var(--ink-faint)}.blog-related-card h3{font-size:13px;line-height:1.7;margin:6px 0 9px}.blog-related-card span{font-size:10px;color:var(--gold-soft)}
@media(max-width:850px){.blog-single-featured{height:300px;border-radius:0 0 20px 20px}.blog-single-head{padding:28px 22px}.blog-single-head h1{font-size:31px}.blog-single-layout{grid-template-columns:1fr}.blog-single-aside{position:static;flex-direction:row;justify-content:flex-start}.blog-single-aside>span{writing-mode:initial;margin-inline-end:5px}.blog-content{padding:30px 22px}.blog-related-grid{grid-template-columns:1fr}.blog-related-card{display:grid;grid-template-columns:110px 1fr;align-items:center}.blog-related-thumb{height:95px;grid-row:1}.blog-related-head{align-items:center}}
@media(max-width:520px){.blog-single-featured{height:230px}.blog-single-label{align-items:flex-start;flex-direction:column;gap:7px}.blog-single-head h1{font-size:27px}.blog-single-head>p{font-size:12px}.blog-related-card{grid-template-columns:90px 1fr}.blog-related-thumb{height:80px}}

/* ================= Blog article v17: cover overlay, sharing, comments ================= */
.blog-cover-stage{position:relative;isolation:isolate;margin-bottom:42px;border-radius:0 0 30px 30px;box-shadow:0 28px 90px rgba(0,0,0,.24)}
.blog-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.86) 100%);z-index:1}
.blog-cover-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:34px clamp(22px,6vw,82px);color:#fff}
.blog-cover-overlay .blog-breadcrumb{align-self:flex-start;margin:0 0 auto;padding:9px 13px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);backdrop-filter:blur(12px);border-radius:10px;font-size:10px}
.blog-cover-overlay .blog-breadcrumb a{color:#fff}.blog-cover-overlay .blog-breadcrumb span{opacity:.45;margin:0 7px}
.blog-cover-overlay .blog-single-label{margin-bottom:8px}.blog-cover-overlay .blog-kicker{color:#f3d18f}.blog-cover-overlay .blog-single-index{color:rgba(255,255,255,.55)}
.blog-cover-overlay h1{font-size:clamp(30px,4.4vw,58px);line-height:1.38;letter-spacing:-.7px;max-width:900px;margin:7px 0 14px;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.blog-cover-overlay .blog-single-meta{margin-top:0}.blog-cover-overlay .blog-single-meta span{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.16);background:rgba(0,0,0,.24);backdrop-filter:blur(10px)}
.blog-single-head-noimage{margin-top:20px}.blog-single-head-noimage h1{margin-bottom:0}
.blog-content-wrap{min-width:0}.blog-single-layout{align-items:start}
.blog-single-aside .share-trigger{position:relative}
.share-popover{position:fixed;z-index:10020;inset:auto 50% 28px auto;transform:translateX(50%) translateY(14px);width:min(430px,calc(100vw - 28px));padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(25,25,25,.96);box-shadow:0 28px 80px rgba(0,0,0,.45);backdrop-filter:blur(20px);opacity:0;transition:opacity .18s ease,transform .18s ease}.share-popover.is-open{opacity:1;transform:translateX(50%) translateY(0)}
.share-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.share-popover-head strong{font-size:14px}.share-popover-head button{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink-dim);cursor:pointer}
.share-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.share-item{min-height:76px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-decoration:none;color:var(--ink);cursor:pointer;font:inherit}.share-item i{font-size:21px}.share-item span{font-size:10px}.share-telegram i{color:#229ED9}.share-whatsapp i{color:#25D366}.share-x i{color:#fff}.share-copy i{color:var(--gold-soft)}.share-item:hover{transform:translateY(-2px);border-color:rgba(199,160,107,.4)}.share-copy.done{border-color:rgba(37,211,102,.4)}.share-copy.done i{color:#25D366}
.blog-comments{max-width:930px;margin:54px auto 0;padding:30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--card),rgba(199,160,107,.025));box-shadow:0 20px 65px rgba(0,0,0,.08)}
.blog-comments-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:20px}.blog-comments-head h2{font-size:25px;margin:5px 0}.blog-comments-head p{font-size:12px;color:var(--ink-dim);margin:0}.comments-count{padding:7px 11px;border-radius:999px;border:1px solid rgba(199,160,107,.25);color:var(--gold-soft);font-size:10px}
.comment-form{padding:16px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.018);margin-bottom:24px}.comment-form textarea{width:100%;min-height:130px;resize:vertical;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--ink);padding:14px;outline:none;font:inherit;font-size:13px;line-height:2}.comment-form textarea:focus{border-color:rgba(199,160,107,.55);box-shadow:0 0 0 3px rgba(199,160,107,.07)}
.comment-form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;color:var(--ink-faint);font-size:10px}.comment-form-foot .btn{border:0;cursor:pointer}.comment-replying{display:flex;align-items:center;gap:7px;padding:8px 10px;margin-bottom:9px;border-radius:10px;background:rgba(199,160,107,.07);color:var(--ink-dim);font-size:11px}.comment-replying button{margin-inline-start:auto;border:0;background:transparent;color:var(--gold-soft);cursor:pointer;font:inherit}
.comment-list{display:flex;flex-direction:column;gap:14px}.comments-empty{text-align:center;padding:38px 15px;color:var(--ink-dim)}.comments-empty i{font-size:32px;color:var(--gold-soft)}.comments-empty h3{margin:10px 0 5px;font-size:15px}.comments-empty p{font-size:11px;margin:0}
.blog-comment{display:flex;gap:11px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.015);position:relative}.comment-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,rgba(199,160,107,.25),rgba(199,160,107,.06));color:var(--gold-soft);font-weight:700}.comment-body{min-width:0;flex:1}.comment-top{display:flex;align-items:center;gap:10px;margin-bottom:7px}.comment-top strong{font-size:12px}.comment-top time{font-size:9px;color:var(--ink-faint)}.comment-body p{font-size:12px;line-height:2;margin:0;color:var(--ink-dim);overflow-wrap:anywhere}.comment-reply{margin-top:8px;border:0;background:transparent;color:var(--gold-soft);font-size:10px;cursor:pointer;padding:0}.comment-children{margin-right:34px;padding-right:15px;border-right:1px solid rgba(199,160,107,.18);display:flex;flex-direction:column;gap:10px}.comment-children .blog-comment{background:rgba(199,160,107,.025)}
.comment-login-box{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 18px;margin-bottom:24px;border:1px solid rgba(199,160,107,.22);border-radius:16px;background:rgba(199,160,107,.045)}.comment-login-box>div{position:relative;padding-right:46px}.comment-login-box i{position:absolute;right:0;top:2px;font-size:27px;color:var(--gold-soft)}.comment-login-box strong{display:block;font-size:13px}.comment-login-box p{font-size:10px;color:var(--ink-dim);margin:5px 0 0}
.comment-alert{padding:10px 13px;margin-bottom:14px;border-radius:10px;background:rgba(220,70,70,.08);border:1px solid rgba(220,70,70,.2);color:#e8a0a0;font-size:11px}
@media(max-width:700px){.blog-cover-stage{height:430px;margin-bottom:25px;border-radius:0 0 22px 22px}.blog-cover-overlay{padding:22px 18px}.blog-cover-overlay h1{font-size:30px}.share-actions{grid-template-columns:repeat(2,1fr)}.blog-comments{padding:18px;border-radius:18px}.blog-comments-head{align-items:flex-start;flex-direction:column}.comment-form-foot,.comment-login-box{align-items:flex-start;flex-direction:column}.comment-login-box .btn{width:100%;text-align:center}.comment-children{margin-right:14px;padding-right:9px}}

/* ================= Blog editorial v18 ================= */
.blog-editorial{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:16px;align-items:stretch}.blog-featured{display:grid;grid-template-columns:1.08fr .92fr;min-height:390px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card)}.blog-featured-media{position:relative;min-height:100%;display:block;background:var(--surface-3);overflow:hidden}.blog-featured-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}.blog-featured:hover .blog-featured-media img{transform:scale(1.025)}.blog-featured-media span,.home-blog-featured-media span{position:absolute;top:15px;right:15px;padding:7px 10px;border-radius:999px;background:rgba(15,15,15,.72);border:1px solid rgba(255,255,255,.12);color:#f1cf88;font-size:9px;backdrop-filter:blur(10px)}.blog-featured-media.is-empty,.home-blog-featured-media.is-empty{display:grid;place-items:center;color:var(--gold-soft);font-size:36px}.blog-featured-copy{padding:34px 30px;display:flex;flex-direction:column;justify-content:center}.blog-featured-copy time,.blog-secondary-card time{color:var(--ink-faint);font-size:10px}.blog-featured-copy h2{font-size:27px;line-height:1.65;margin:11px 0 12px}.blog-featured-copy p{color:var(--ink-dim);font-size:13px;line-height:2.1;margin:0 0 24px}.blog-secondary-list{display:flex;flex-direction:column;gap:16px}.blog-secondary-card{display:grid;grid-template-columns:145px 1fr;gap:16px;flex:1;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.blog-secondary-media{display:block;height:100%;min-height:150px;border-radius:12px;overflow:hidden;background:var(--surface-3)}.blog-secondary-media img{width:100%;height:100%;object-fit:cover;display:block}.blog-secondary-media.is-empty{display:grid;place-items:center;color:var(--gold-soft);font-size:26px}.blog-secondary-card h2{font-size:16px;line-height:1.7;margin:7px 0}.blog-secondary-card p{color:var(--ink-dim);font-size:11px;line-height:1.9;margin:0 0 8px}.blog-secondary-card .blog-read-more{font-size:10px}.home-blog-editorial{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:16px}.home-blog-featured{display:grid;grid-template-columns:1.08fr .92fr;min-height:330px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);text-decoration:none}.home-blog-featured-media{position:relative;min-height:100%;overflow:hidden;background:var(--surface-3)}.home-blog-featured-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}.home-blog-featured:hover .home-blog-featured-media img{transform:scale(1.025)}.home-blog-featured-copy{padding:30px;display:flex;flex-direction:column;justify-content:center}.home-blog-featured-copy time,.home-blog-side-item time{font-size:10px;color:var(--ink-faint)}.home-blog-featured-copy h3{font-size:24px;line-height:1.65;margin:9px 0 11px}.home-blog-featured-copy p{font-size:12px;line-height:2;color:var(--ink-dim);margin:0 0 20px}.home-blog-link{margin-top:auto;color:var(--gold-soft);font-size:11px}.home-blog-side-list{display:flex;flex-direction:column;gap:12px}.home-blog-side-item{display:grid;grid-template-columns:112px 1fr;gap:13px;padding:11px;border:1px solid var(--line);border-radius:16px;background:var(--card);text-decoration:none;flex:1}.home-blog-side-thumb{height:100%;min-height:130px;border-radius:11px;overflow:hidden;background:var(--surface-3)}.home-blog-side-thumb img{width:100%;height:100%;object-fit:cover;display:block}.home-blog-side-thumb.is-empty{display:grid;place-items:center;color:var(--gold-soft);font-size:25px}.home-blog-side-item h3{font-size:14px;line-height:1.7;margin:6px 0 10px}.home-blog-side-item span{font-size:10px;color:var(--gold-soft)}
/* share dropdown directly below the share control */
.blog-single-aside{position:relative;overflow:visible}.share-trigger[aria-expanded="true"]{transform:rotate(180deg)}.share-panel{width:230px;margin-top:2px;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(24,24,24,.98);box-shadow:0 18px 45px rgba(0,0,0,.3);display:grid;grid-template-columns:repeat(2,1fr);gap:7px;opacity:0;transform:translateY(-6px);transition:opacity .17s ease,transform .17s ease}.share-panel.is-open{opacity:1;transform:translateY(0)}.share-panel .share-item{min-height:54px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--ink);cursor:pointer;font:inherit}.share-panel .share-item i{font-size:18px}.share-panel .share-item span{font-size:9px}.share-letter{width:21px;height:21px;border-radius:7px;display:grid;place-items:center;font-size:12px!important;font-weight:800}.share-instagram i{color:#e1306c}.share-bale .share-letter{background:#19a974;color:#fff}.share-eitaa .share-letter{background:#7b4ce2;color:#fff}.share-rubika .share-letter{background:#00a8ff;color:#fff}.share-telegram i{color:#229ed9}.share-whatsapp i{color:#25d366}.share-x i{color:#fff}.share-copy i{color:var(--gold-soft)}.share-panel .share-item:hover{border-color:rgba(199,160,107,.42);transform:translateY(-1px)}.share-panel .share-copy.done i{color:#25d366}.blog-single-container{max-width:1060px}.blog-single-layout{grid-template-columns:48px minmax(0,930px);gap:18px}.blog-content-wrap{width:100%}.blog-content{width:100%;box-sizing:border-box}.blog-comments{max-width:978px}.blog-related-section{max-width:978px}
@media(max-width:1050px){.blog-editorial,.home-blog-editorial{grid-template-columns:1fr}.blog-featured,.home-blog-featured{min-height:340px}.blog-secondary-list,.home-blog-side-list{display:grid;grid-template-columns:1fr 1fr}.blog-single-layout{grid-template-columns:42px minmax(0,1fr)}}
@media(max-width:700px){.blog-featured,.home-blog-featured{grid-template-columns:1fr}.blog-featured-media,.home-blog-featured-media{height:230px;min-height:230px}.blog-featured-copy,.home-blog-featured-copy{padding:23px}.blog-secondary-list,.home-blog-side-list{grid-template-columns:1fr}.blog-secondary-card{grid-template-columns:105px 1fr}.blog-secondary-media{min-height:120px}.home-blog-side-item{grid-template-columns:92px 1fr}.home-blog-side-thumb{min-height:105px}.blog-single-layout{grid-template-columns:1fr}.blog-single-aside{flex-direction:row;align-items:flex-start;flex-wrap:wrap}.blog-single-aside>span{writing-mode:initial;width:100%}.share-panel{width:min(300px,calc(100vw - 48px));position:absolute;top:74px;right:0;z-index:20}.blog-content{padding:30px 22px}.blog-comments,.blog-related-section{max-width:none}.blog-single-container{max-width:100%}}

/* ================= Blog article polish v19 ================= */
@media (min-width: 851px){
  .blog-single-container{max-width:1180px}
  .blog-single-layout{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .blog-content{padding:44px 48px}
  .blog-comments,.blog-related-section{max-width:none}
}
.blog-single-aside{align-items:center}
.blog-single-aside>span{font-size:8px;letter-spacing:0;white-space:nowrap}
.blog-single-aside>a[title="بازگشت به وبلاگ"]{margin-top:26px}
.share-panel{width:auto;min-width:0;margin-top:7px;padding:4px;border:0;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:10px}
.share-panel .share-item{min-height:0;width:30px;height:30px;border:0!important;border-radius:50%;background:transparent!important;padding:0;display:grid;place-items:center;gap:0;transform:none!important}
.share-panel .share-item:hover{border:0!important;background:transparent!important;transform:translateY(-2px)!important}
.share-panel .share-item i{font-size:19px}
.share-panel .share-item span:not(.share-letter){display:none}
.share-panel .share-letter{width:22px;height:22px;background:transparent!important;border-radius:0;font-size:17px!important;font-weight:900}
.share-bale .share-letter{color:#20a66a}.share-eitaa .share-letter{color:#7b4ce2}.share-rubika .share-letter{color:#00a8ff}
.share-trigger[aria-expanded="true"]{transform:none}
.blog-cover-overlay h1{font-size:clamp(28px,3.65vw,48px);max-width:820px}
.comment-avatar.has-image{overflow:hidden;padding:0;background:var(--surface-3)}
.comment-avatar.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.comment-children{margin-right:24px;padding-right:14px}

/* Admin review tabs */
.review-tabs-admin{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.review-tab-admin{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink-dim);font-size:11px;text-decoration:none}
.review-tab-admin:hover,.review-tab-admin.active{border-color:rgba(199,160,107,.45);color:var(--gold-soft);background:rgba(199,160,107,.055)}
.review-tab-admin b{min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(220,70,70,.13);color:#e9a0a0;font-size:9px}
.review-actions-admin{display:flex!important;gap:6px;align-items:center;white-space:nowrap}
.review-user-admin{display:flex;align-items:center;gap:8px;min-width:130px}
.review-user-admin img,.review-user-admin>span{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover}
.review-user-admin>span{display:grid;place-items:center;background:rgba(199,160,107,.12);color:var(--gold-soft);font-weight:800}
@media(max-width:700px){
 .share-panel{width:100%;justify-content:flex-start;padding:6px 0;gap:8px;overflow-x:auto}
 .blog-single-aside{flex-direction:row;align-items:center;gap:9px}
 .blog-single-aside>span{width:auto;margin:0;writing-mode:initial}
 .blog-single-aside>a[title="بازگشت به وبلاگ"]{margin-top:0;margin-inline-start:auto}
 .blog-single-container{max-width:100%}
 .blog-content{padding:28px 20px}
 .review-tabs-admin{display:grid;grid-template-columns:1fr}
 .review-tab-admin{justify-content:center}
 .review-actions-admin{flex-wrap:wrap}
}

/* ================= Blog article v20 - compact editorial controls ================= */
@media (min-width: 851px){
  .blog-single-container{max-width:1180px}
  .blog-single-layout{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .blog-content{padding:30px 30px;border-radius:22px;font-size:16px;line-height:2.35}
  .blog-content p{margin-bottom:20px}
  .blog-comments,.blog-related-section{max-width:none}
}
.blog-single-aside{position:sticky;top:100px;overflow:visible;gap:8px}
.blog-single-aside .share-control{position:relative;display:flex;flex-direction:column;align-items:center;width:38px;height:38px;flex:0 0 38px}
.blog-single-aside .share-trigger{width:38px;height:38px;flex:0 0 38px}
.blog-single-aside .share-trigger[aria-expanded="true"]{color:var(--gold-soft);border-color:rgba(199,160,107,.42)}
.blog-single-aside .share-panel{position:absolute;top:calc(100% + 2px);right:50%;transform:translateX(50%) translateY(-5px);width:max-content;max-width:300px;margin:0;padding:6px 8px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:14px;background:rgba(18,18,18,.97);box-shadow:0 16px 38px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.blog-single-aside .share-panel.is-open{opacity:1;transform:translateX(50%) translateY(0);pointer-events:auto}
.blog-single-aside .share-panel .share-item{width:30px;height:30px;min-height:30px;border:0!important;border-radius:50%;background:transparent!important;padding:0;display:grid;place-items:center;gap:0;transform:none!important}
.blog-single-aside .share-panel .share-item:hover{background:transparent!important;border:0!important;transform:translateY(-2px)!important}
.blog-single-aside .share-panel .share-item i{font-size:18px}
.blog-single-aside .share-panel .share-item span:not(.share-letter){display:none}
.blog-single-aside .share-panel .share-letter{width:20px;height:20px;background:transparent!important;border-radius:0;font-size:16px!important;font-weight:900}
.blog-single-aside .share-panel .share-bale .share-letter{color:#20a66a}.blog-single-aside .share-panel .share-eitaa .share-letter{color:#7b4ce2}.blog-single-aside .share-panel .share-rubika .share-letter{color:#00a8ff}
.blog-single-aside>a[title="بازگشت به وبلاگ"]{margin-top:0}
@media(max-width:850px){
  .blog-single-container{max-width:100%}
  .blog-single-layout{grid-template-columns:1fr;gap:18px}
  .blog-single-aside{position:static;display:flex;flex-direction:row;align-items:center;gap:9px}
  .blog-single-aside>span{width:auto;margin:0;writing-mode:initial}
  .blog-single-aside .share-control{width:38px;height:38px}
  .blog-single-aside .share-panel{right:0;transform:translateY(-5px);top:calc(100% + 2px);max-width:calc(100vw - 40px);overflow-x:auto;justify-content:flex-start}
  .blog-single-aside .share-panel.is-open{transform:translateY(0)}
  .blog-single-aside>a[title="بازگشت به وبلاگ"]{margin-inline-start:auto}
  .blog-content{padding:28px 20px}
}

/* ================= Blog article v21 - hero/content edge alignment ================= */
@media (min-width: 851px){
  .blog-single-container{max-width:1180px}
  .blog-single-layout{display:block;position:relative;min-width:0}
  .blog-content-wrap{width:100%;max-width:none;min-width:0}
  .blog-content{width:100%;box-sizing:border-box;margin:0;padding:30px 42px;border-radius:22px}
  .blog-single-aside{position:absolute;z-index:12;top:10px;right:10px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0}
  .blog-single-aside>span{display:none}
  .blog-single-aside .share-control{width:38px;height:38px}
  .blog-single-aside>a[title="بازگشت به وبلاگ"]{margin:0}
  .blog-single-aside .share-panel{right:0;transform:translateY(-5px);top:calc(100% + 2px)}
  .blog-single-aside .share-panel.is-open{transform:translateY(0)}
  .blog-comments,.blog-related-section{width:100%;max-width:none;box-sizing:border-box}
}
@media (max-width:850px){
  .blog-single-layout{display:block;position:relative}
  .blog-single-aside{position:relative;z-index:12}
  .blog-content-wrap{width:100%;max-width:none}
  .blog-content{width:100%;box-sizing:border-box}
}


/* ================= Blog article v22 - exact hero/content alignment + compact controls ================= */
@media (min-width: 851px){
  .blog-single-featured{
    width:min(1180px, calc(100% - 80px));
    max-width:none;
    box-sizing:border-box;
  }
  .blog-single-container{
    width:min(1180px, calc(100% - 80px));
    max-width:none;
    padding:0;
    box-sizing:border-box;
  }
  .blog-single-layout{width:100%;}
  .blog-content-wrap{width:100%;}
  .blog-content{width:100%;margin:0;box-sizing:border-box;}
  .blog-comments,.blog-related-section{width:100%;max-width:none;box-sizing:border-box;}

  /* Share + back controls sit together above the article, aligned to its right edge. */
  .blog-single-aside{
    position:absolute;
    top:-52px;
    inset-inline-end:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    padding:0;
    margin:0;
    width:auto;
    height:40px;
  }
  .blog-single-aside .share-control{
    width:38px;height:38px;flex:0 0 38px;
  }
  .blog-single-aside>a[title="بازگشت به وبلاگ"]{
    margin:0;
    width:38px;height:38px;
    display:grid;place-items:center;
    flex:0 0 38px;
  }
  .blog-single-aside .share-panel{
    top:calc(100% + 2px);
    inset-inline-end:0;
    transform:translateY(-5px);
  }
  .blog-single-aside .share-panel.is-open{transform:translateY(0);}
}

@media (max-width:850px){
  .blog-single-featured{width:100%;max-width:none;box-sizing:border-box;}
  .blog-single-container{width:100%;max-width:none;padding:0 20px;box-sizing:border-box;}
  .blog-single-aside{gap:4px;}
}

/* ================= Blog article v22 final control placement ================= */
@media (min-width: 851px){
  /* Controls sit exactly on the left edge of the article content, above it. */
  .blog-single-layout{position:relative;}
  .blog-single-aside{
    position:absolute !important;
    top:-52px !important;
    left:0 !important;
    right:auto !important;
    width:auto !important;
    height:38px;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
    z-index:30;
  }
  .blog-single-aside > span{display:none !important;}
  .blog-single-aside .share-control{
    position:relative !important;
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }
  .blog-single-aside > a[title="بازگشت به وبلاگ"]{
    width:38px !important;
    height:38px !important;
    margin:0 !important;
    flex:0 0 38px !important;
  }
  /* Keep the social list directly under the share icon. */
  .blog-single-aside .share-panel{
    top:calc(100% + 2px) !important;
    right:0 !important;
    left:auto !important;
    transform:translateY(-5px) !important;
  }
  .blog-single-aside .share-panel.is-open{
    transform:translateY(0) !important;
  }
}

/* ================= Blog article v23 - controls on the right side of content ================= */
@media (min-width: 851px){
  .blog-single-layout{position:relative;}
  .blog-single-aside{
    position:absolute !important;
    top:18px !important;
    right:-84px !important;
    left:auto !important;
    width:auto !important;
    height:38px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
    z-index:40;
  }
  .blog-single-aside > span{display:none !important;}
  .blog-single-aside .share-control{
    position:relative !important;
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }
  .blog-single-aside > a[title="بازگشت به وبلاگ"]{
    width:38px !important;
    height:38px !important;
    margin:0 !important;
    flex:0 0 38px !important;
    display:grid !important;
    place-items:center !important;
  }
  .blog-single-aside .share-panel{
    top:calc(100% + 2px) !important;
    right:0 !important;
    left:auto !important;
    transform:translateY(-5px) !important;
  }
  .blog-single-aside .share-panel.is-open{transform:translateY(0) !important;}
}

@media (max-width: 1050px) and (min-width: 851px){
  .blog-single-aside{right:-46px !important;}
}

/* ================= Blog article v26 - floating side controls, v23 visual restored ================= */
@media (min-width: 851px){
  .blog-single-layout{
    position:relative !important;
    grid-template-columns:48px minmax(0,930px) !important;
    gap:18px !important;
    align-items:start !important;
  }
  .blog-single-aside{
    position:sticky !important;
    top:28px !important;
    right:auto !important;
    left:auto !important;
    align-self:start !important;
    width:38px !important;
    height:auto !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:4px !important;
    z-index:50 !important;
    transform:translateX(84px) !important;
  }
  .blog-single-aside > span{display:none !important;}
  .blog-single-aside .share-control{
    position:relative !important;
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }
  .blog-single-aside > a[title="بازگشت به وبلاگ"]{
    width:38px !important;
    height:38px !important;
    margin:0 !important;
    flex:0 0 38px !important;
    display:grid !important;
    place-items:center !important;
  }
  .blog-single-aside .share-panel{
    position:absolute !important;
    top:calc(100% + 4px) !important;
    right:50% !important;
    left:auto !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    margin:0 !important;
    padding:7px 5px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    border:1px solid var(--line) !important;
    border-radius:14px !important;
    background:rgba(20,20,20,.97) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.32) !important;
    transform:translateX(50%) translateY(-5px) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .16s ease,transform .16s ease !important;
  }
  .blog-single-aside .share-panel.is-open{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateX(50%) translateY(0) !important;
  }
  .blog-single-aside .share-panel .share-item{
    width:30px !important;
    height:30px !important;
    min-height:30px !important;
    flex:0 0 30px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    display:grid !important;
    place-items:center !important;
  }
  .blog-single-aside .share-panel .share-item span:not(.share-letter){display:none !important;}
  .blog-single-aside .share-panel .share-item i{font-size:19px !important;}
  .blog-single-aside .share-panel .share-letter{
    width:20px !important;height:20px !important;background:transparent !important;
    border-radius:0 !important;font-size:16px !important;font-weight:900 !important;
    display:grid !important;place-items:center !important;
  }
}

@media (max-width:850px){
  .blog-single-aside{transform:none !important;position:relative !important;top:auto !important;}
  .blog-single-aside .share-panel{
    background:rgba(20,20,20,.97) !important;
    border:1px solid var(--line) !important;
    border-radius:14px !important;
    box-shadow:0 16px 38px rgba(0,0,0,.32) !important;
    padding:7px 5px !important;
  }
}

/* v27 — article action rail follows the article content while scrolling */
@media (min-width: 851px) {
  .blog-single-layout { position: relative; align-items: stretch; }
  .blog-single-aside {
    position: sticky !important;
    top: 110px !important;
    align-self: flex-start !important;
    height: fit-content !important;
    max-height: calc(100vh - 130px);
    z-index: 20;
  }
  .blog-content-wrap { min-width: 0; }
}
@media (max-width: 850px) {
  .blog-single-aside { position: relative !important; top: auto !important; }
}

/* ================= ZAYN v28 — reliable theme palette ================= */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c0c0c;
    --bg-soft: #131313;
    --card: #1a1917;
    --card-hover: #201f1c;
    --line: rgba(255,255,255,.09);
    --ink: #f3f0ea;
    --ink-dim: #a7a29a;
    --ink-faint: #6f6b64;
    --surface-1: var(--bg);
    --surface-2: var(--bg-soft);
    --surface-3: var(--card);
    --surface-4: var(--card-hover);
    --text-strong: var(--ink);
    --text-normal: var(--ink-dim);
    --text-muted: var(--ink-faint);
    --control-bg: var(--card);
    --control-border: var(--line);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f7f5f1;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-hover: #f0ece4;
    --line: rgba(28,26,23,.12);
    --ink: #1c1a17;
    --ink-dim: #5c5750;
    --ink-faint: #847e73;
    --surface-1: #f7f5f1;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --surface-4: #f0ece4;
    --text-strong: #1c1a17;
    --text-normal: #5c5750;
    --text-muted: #847e73;
    --control-bg: #ffffff;
    --control-border: rgba(28,26,23,.12);
}

html[data-theme="light"] body { background: var(--bg) !important; color: var(--ink) !important; }
html[data-theme="light"] .site-footer { background: var(--bg-soft) !important; border-color: var(--line) !important; }
html[data-theme="light"] .site-header { background: rgba(247,245,241,.94) !important; border-color: var(--line) !important; }
html[data-theme="light"] .search-box,
html[data-theme="light"] .search-box input,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; }
html[data-theme="light"] .product-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .cart-card,
html[data-theme="light"] .checkout-card,
html[data-theme="light"] .account-card,
html[data-theme="light"] .address-card,
html[data-theme="light"] .option-card,
html[data-theme="light"] .order-card,
html[data-theme="light"] .ticket-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .login-box,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .coupon-box,
html[data-theme="light"] .filter-panel,
html[data-theme="light"] .shop-sidebar,
html[data-theme="light"] .blog-content,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .news-card,
html[data-theme="light"] .wishlist-card { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; }
html[data-theme="light"] .main-nav a,
html[data-theme="light"] .header-icons .icon-btn,
html[data-theme="light"] .logo,
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .product-card h3,
html[data-theme="light"] .category-card h3,
html[data-theme="light"] .blog-content h1,
html[data-theme="light"] .blog-content h2,
html[data-theme="light"] .blog-content h3 { color: var(--ink) !important; }
html[data-theme="light"] .main-nav a:hover,
html[data-theme="light"] .header-icons .icon-btn:hover { color: var(--gold) !important; }
html[data-theme="light"] .mobile-nav { background: rgba(28,26,23,.42) !important; }
html[data-theme="light"] .mobile-nav-panel { background: #fff !important; color: var(--ink) !important; }
html[data-theme="light"] .footer-grid p,
html[data-theme="light"] .footer-grid ul a { color: var(--ink-dim) !important; }
html[data-theme="light"] .hero-copy p,
html[data-theme="light"] .section-head .see-all { color: var(--ink-dim); }

/* Ensure the footer is a normal visible block on every theme. */
.site-footer { display: block !important; width: 100%; }


/* Article actions sticky fix */
.blog-single-container,
.blog-single-layout,
.blog-single-content,
.blog-content {
    overflow: visible !important;
}

.blog-single-layout {
    align-items: start;
}

.blog-single-aside {
    position: sticky !important;
    top: 110px;
    align-self: start;
    height: fit-content;
    z-index: 30;
}

/* FINAL ARTICLE ACTIONS STICKY FIX */
.blog-single-container,
.blog-single-layout,
.blog-single-content-wrap,
.blog-content-wrap,
.blog-single-content {
    overflow: visible !important;
}

.blog-single-layout {
    position: relative !important;
    align-items: flex-start !important;
}

.blog-single-aside {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 110px !important;
    align-self: flex-start !important;
    height: max-content !important;
    overflow: visible !important;
    z-index: 50 !important;
}

@media(max-width:850px){
    .blog-single-aside {
        position: static !important;
    }
}

/* Blog archive horizontal rows redesign */
.blog-editorial{display:flex!important;flex-direction:column!important;gap:18px!important;}
.blog-featured{display:grid!important;grid-template-columns:320px 1fr!important;min-height:230px!important;}
.blog-featured-media{height:230px!important;min-height:230px!important;}
.blog-secondary-list{display:flex!important;flex-direction:column!important;gap:14px!important;}
.blog-secondary-card{display:grid!important;grid-template-columns:240px 1fr!important;min-height:170px!important;align-items:center!important;}
.blog-secondary-media{height:150px!important;min-height:150px!important;}
.blog-pagination{display:flex;justify-content:center;gap:8px;margin-top:30px;}
.blog-pagination a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);}
.blog-pagination a.active{background:var(--gold-soft);color:#111;}
@media(max-width:768px){
.blog-featured,.blog-secondary-card{grid-template-columns:1fr!important;}
.blog-featured-media,.blog-secondary-media{height:220px!important;}
}

/* ---------------- Premium customer authentication ---------------- */
.auth-section{min-height:calc(100vh - 180px);display:flex;align-items:center;padding:48px 0}.auth-layout{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.auth-visual{position:relative;padding:44px;background:radial-gradient(circle at 20% 20%,rgba(199,160,107,.22),transparent 35%),linear-gradient(145deg,#171512,#0e0e0e);display:flex;flex-direction:column;justify-content:space-between;min-height:540px}.auth-visual:before{content:"";position:absolute;inset:18px;border:1px solid rgba(227,205,163,.12);border-radius:18px;pointer-events:none}.auth-brand{position:relative;font-size:12px;letter-spacing:4px;color:var(--gold-soft);font-weight:800}.auth-visual h2{position:relative;font-size:34px;line-height:1.5;margin:0 0 12px;max-width:310px}.auth-visual p{position:relative;color:var(--ink-dim);font-size:13px;max-width:300px}.auth-points{position:relative;display:grid;gap:10px}.auth-point{display:flex;align-items:center;gap:10px;color:var(--ink-dim);font-size:12px}.auth-point i{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(199,160,107,.1);color:var(--gold-soft)}
.auth-form{padding:44px 46px}.auth-form h1{font-size:24px;margin:0 0 5px}.auth-form .sub{text-align:right;margin:0 0 25px;color:var(--ink-faint);font-size:12px}.auth-form .form-group{margin-bottom:16px}.auth-form label{display:block;font-size:12px;color:var(--ink-dim);margin-bottom:7px;font-weight:600}.auth-input{position:relative}.auth-input>i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:13px;pointer-events:none}.auth-form input{width:100%;height:48px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:0 42px 0 14px;transition:border-color .2s,box-shadow .2s,background .2s}.auth-form input:focus{border-color:var(--gold);background:var(--card-hover);box-shadow:0 0 0 4px rgba(199,160,107,.07);outline:none}.auth-form input::placeholder{color:var(--ink-faint)}.auth-submit{height:50px;border-radius:12px;margin-top:5px;box-shadow:0 12px 24px rgba(199,160,107,.1)}.auth-form .alert{border-radius:11px;font-size:11px;padding:10px 12px}.auth-form .switch{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.auth-form .switch a{font-weight:700}
@media(max-width:800px){.auth-layout{grid-template-columns:1fr;max-width:560px}.auth-visual{display:none}.auth-form{padding:34px 28px}.auth-section{padding:30px 0;min-height:auto}}

/* ================= ZAYN final global responsive/theme polish ================= */
*,*::before,*::after{box-sizing:border-box}img,video,iframe{max-width:100%}button,input,select,textarea{font:inherit}.container{width:min(1180px,calc(100% - 32px));margin-inline:auto}.section,.hero,.shop-page,.account-page,.checkout-page{overflow:clip}
.auth-layout{box-shadow:0 24px 70px rgba(0,0,0,.12)}.auth-form{min-width:0}.auth-form input{min-width:0}.auth-submit{width:100%}
html[data-theme="light"] .auth-visual{background:radial-gradient(circle at 20% 20%,rgba(199,160,107,.18),transparent 35%),linear-gradient(145deg,#f1ede4,#e8e3d8);color:#1c1a17}html[data-theme="light"] .auth-visual p,html[data-theme="light"] .auth-point{color:#5c5750}
@media(max-width:860px){.container{width:min(100% - 28px,1180px)}.header-inner{gap:10px}.header-actions{gap:8px}.hero-grid,.shop-layout,.pd-layout,.cart-layout{min-width:0}.shop-main,.filter-sidebar,.product-detail,.cart-items,.summary-box{min-width:0}.table-wrap,.orders-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.product-grid{min-width:0}}
@media(max-width:600px){.container{width:calc(100% - 24px)}.section{padding:30px 0}.form-grid{grid-template-columns:1fr!important}.auth-section{padding:20px 0}.auth-layout{border-radius:18px}.auth-form{padding:25px 18px}.auth-form h1{font-size:20px}.auth-form .sub{font-size:11px;margin-bottom:20px}.auth-input input{height:46px}.btn{max-width:100%}.footer-grid{grid-template-columns:1fr!important}.trust-row{grid-template-columns:1fr 1fr}.lookbook-grid{grid-template-columns:1fr}.hero-copy h1{font-size:25px}.hero-copy p{font-size:12px}.product-grid,.product-grid.cols-3,.product-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cat-strip-grid{grid-template-columns:repeat(2,1fr)}.insta-row{grid-template-columns:repeat(3,1fr);gap:6px}}
@media(max-width:400px){.header-inner{height:58px}.logo{font-size:17px}.product-grid,.product-grid.cols-3,.product-grid.cols-4{grid-template-columns:1fr 1fr}.trust-row{grid-template-columns:1fr}.auth-form{padding:22px 15px}}

/* =========================================================
   ZAYN — Product & Blog conversation system
   ========================================================= */
.product-reviews-section{max-width:978px;margin:56px auto 0;padding:30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--card),rgba(199,160,107,.025));box-shadow:0 20px 65px rgba(0,0,0,.08)}
.product-reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.product-reviews-head h2{font-size:25px;margin:5px 0}.product-reviews-head p{font-size:12px;color:var(--ink-dim);margin:0;line-height:1.9}.product-review-summary{min-width:118px;padding:14px 16px;border:1px solid rgba(199,160,107,.25);border-radius:16px;text-align:center;background:rgba(199,160,107,.045)}.product-review-summary strong{display:block;font-size:28px;line-height:1;color:var(--gold-soft)}.product-review-summary span{display:block;color:var(--gold);letter-spacing:1px;margin:7px 0 3px;font-size:12px}.product-review-summary small{font-size:9px;color:var(--ink-faint)}
.product-review-form{padding:17px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.018);margin-bottom:24px}.product-review-form-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;align-items:stretch}.product-review-form textarea{width:100%;min-height:132px;resize:vertical;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--ink);padding:14px;outline:none;font:inherit;font-size:13px;line-height:2}.product-review-form textarea:focus{border-color:rgba(199,160,107,.55);box-shadow:0 0 0 3px rgba(199,160,107,.07)}.product-rating-picker{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.product-rating-picker>span{font-size:10px;color:var(--ink-faint)}.star-picker{display:flex;direction:ltr;gap:1px}.star-picker input{position:absolute;opacity:0;pointer-events:none}.star-picker label{font-size:23px;color:var(--ink-faint);cursor:pointer;transition:.16s ease}.star-picker label:hover,.star-picker label:hover~label,.star-picker input:checked~label{color:var(--gold)}.product-replying{margin-bottom:11px}.product-rating-picker.is-hidden{display:none}.product-review-list{display:flex;flex-direction:column;gap:14px}.product-review-card{display:flex;gap:11px;padding:17px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.015);position:relative}.product-review-card.is-admin-reply{border-color:rgba(199,160,107,.22);background:rgba(199,160,107,.035)}.product-review-stars{font-size:10px;color:var(--gold);letter-spacing:1px;margin:0 0 5px}.product-review-children{margin-right:34px;padding-right:15px;border-right:1px solid rgba(199,160,107,.18)}.admin-reply-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:rgba(199,160,107,.11);border:1px solid rgba(199,160,107,.2);color:var(--gold-soft);font-size:8px;font-weight:700;vertical-align:middle;margin-inline-start:5px}.reply-context{display:inline-flex;align-items:center;gap:4px;color:var(--gold-soft);font-size:9px;padding:3px 7px;border-radius:999px;background:rgba(199,160,107,.07);margin-inline-start:3px}.comment-success{padding:10px 13px;margin-bottom:14px;border-radius:10px;background:rgba(83,173,110,.08);border:1px solid rgba(83,173,110,.2);color:#9ed8ad;font-size:11px}.reply-cancel-toast{position:fixed;right:50%;bottom:28px;transform:translate(50%,12px);opacity:0;z-index:9999;padding:10px 15px;border-radius:12px;background:var(--panel);border:1px solid rgba(199,160,107,.3);box-shadow:0 15px 40px rgba(0,0,0,.3);color:var(--gold-soft);font-size:11px;transition:.22s ease}.reply-cancel-toast.show{opacity:1;transform:translate(50%,0)}
@media(max-width:700px){.product-reviews-section{padding:18px;border-radius:18px}.product-reviews-head{align-items:flex-start;flex-direction:column}.product-review-summary{width:100%;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px;text-align:right}.product-review-summary strong{font-size:22px}.product-review-summary span{margin:0}.product-review-form-grid{grid-template-columns:1fr}.product-rating-picker{min-height:80px}.product-review-children{margin-right:14px;padding-right:9px}.product-review-card{padding:14px}.reply-context{display:flex;width:max-content;max-width:100%;margin-top:4px;margin-inline-start:0}.product-reviews-head h2{font-size:21px}}


/* v13 customer reviews */
.verified-buyer-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;background:rgba(67,176,108,.10);border:1px solid rgba(67,176,108,.22);color:#79c992;font-size:8px;font-weight:800;margin-inline-start:4px}
.account-reviews-head-card{display:flex;justify-content:space-between;align-items:center;gap:18px}.account-reviews-head-card h2{margin:4px 0 7px;font-size:24px}.account-reviews-head-card p{margin:0;color:var(--ink-dim);font-size:12px;line-height:1.9}.account-review-count{min-width:110px;padding:14px 16px;border:1px solid rgba(199,160,107,.22);background:rgba(199,160,107,.05);border-radius:16px;text-align:center}.account-review-count strong{display:block;color:var(--gold-soft);font-size:25px}.account-review-count span{font-size:9px;color:var(--ink-faint)}.account-reviews-list{display:flex;flex-direction:column;gap:14px}.account-review-item{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 10px 35px rgba(0,0,0,.05)}.account-review-item-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.account-review-kind{display:inline-flex;gap:5px;align-items:center;color:var(--gold-soft);font-size:9px}.account-review-item h3{margin:7px 0 0;font-size:15px}.account-review-item h3 a{color:var(--ink);text-decoration:none}.account-review-item h3 a:hover{color:var(--gold-soft)}.account-review-status{padding:5px 8px;border-radius:999px;font-size:9px;white-space:nowrap}.account-review-status.approved{background:rgba(83,173,110,.10);color:#8ed2a0;border:1px solid rgba(83,173,110,.18)}.account-review-status.pending{background:rgba(199,160,107,.09);color:var(--gold-soft);border:1px solid rgba(199,160,107,.2)}.account-review-stars{color:var(--gold);font-size:12px;letter-spacing:1px;margin-top:12px}.account-review-text{margin:12px 0 0;color:var(--ink-dim);font-size:12px;line-height:2}.account-review-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:13px;color:var(--ink-faint);font-size:9px}.account-review-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}.account-review-actions form{margin:0}.account-review-modal{width:min(620px,calc(100vw - 28px))}.account-review-modal textarea,.account-review-modal select{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:12px;padding:12px;font:inherit;outline:none}.account-review-modal textarea:focus,.account-review-modal select:focus{border-color:rgba(199,160,107,.5);box-shadow:0 0 0 3px rgba(199,160,107,.06)}.testi-avatar-img{object-fit:cover!important;display:block!important}.testi-empty{grid-column:1/-1;padding:34px;border:1px dashed var(--line);border-radius:18px;text-align:center;color:var(--ink-dim);display:flex;flex-direction:column;gap:8px}.testi-empty i{font-size:28px;color:var(--gold-soft)}.testi-empty strong{color:var(--ink)}.testi-empty span{font-size:10px}
@media(max-width:700px){.account-reviews-head-card{align-items:flex-start;flex-direction:column}.account-review-count{width:100%;box-sizing:border-box}.account-review-item-top{flex-direction:column}.account-review-status{align-self:flex-start}.account-review-actions{justify-content:stretch}.account-review-actions .btn{flex:1}.account-review-item{padding:16px}}


/* v14 customer review modal: fixed, centered, full viewport overlay */
.modal-overlay{
    position:fixed!important;inset:0!important;z-index:1200!important;display:none;align-items:center;justify-content:center;
    padding:20px;box-sizing:border-box;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.modal-overlay.open{display:flex!important}
.modal-overlay[aria-hidden="true"]{display:none!important}
.modal-overlay[aria-hidden="false"]{display:flex!important}
.modal-box{position:relative;width:min(620px,100%);max-height:min(88vh,760px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.4);padding:22px;z-index:1201}
.modal-box .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.modal-box .modal-head h3{margin:0;font-size:18px}
.modal-box .modal-head p{margin:5px 0 0;color:var(--ink-faint);font-size:11px;line-height:1.8}
.modal-box .modal-head>button{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:18px;display:grid;place-items:center}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
body.modal-open{overflow:hidden}
@media(max-width:600px){.modal-overlay{padding:12px}.modal-box{width:100%;max-height:92vh;border-radius:16px;padding:16px}.modal-actions{flex-direction:column-reverse}.modal-actions .btn{width:100%}}

/* v14 responsive navigation refresh */
.mobile-nav{background:rgba(0,0,0,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.mobile-nav-panel{width:min(360px,92vw);padding:18px 18px 26px;overflow-y:auto;overscroll-behavior:contain;box-shadow:-20px 0 60px rgba(0,0,0,.28)}
.mobile-nav-search{display:flex;align-items:center;gap:8px;margin:4px 0 16px;padding:7px;border:1px solid var(--line);background:var(--surface-3);border-radius:14px}
.mobile-nav-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;padding:8px 9px}
.mobile-nav-search button{width:38px;height:38px;border:0;border-radius:10px;background:var(--gold);color:#14120f;display:grid;place-items:center}
.mobile-nav-panel>a,.mobile-nav-group{border-bottom:1px solid var(--line)}
.mobile-nav-panel>a{padding:13px 8px;font-size:13px;transition:.18s ease}
.mobile-nav-panel>a:hover{padding-right:13px;color:var(--gold-soft);background:rgba(199,160,107,.05)}
.mobile-nav-group summary{padding:0 8px}
.mobile-nav-group summary a{border:0;padding:13px 0;font-size:13px}
.mobile-nav-group> a{padding:10px 16px;font-size:12px;color:var(--ink-dim)}
.mobile-nav-close{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface-3);display:grid;place-items:center;margin:0 0 14px;font-size:20px}
html[data-theme="light"] .mobile-nav-search{background:#f7f5f1}
html[data-theme="light"] .mobile-nav-panel{box-shadow:-20px 0 60px rgba(0,0,0,.16)}

/* v15: customer notification bell / center */
.header-notif-wrap{position:relative;display:flex;align-items:center}
.header-notif-btn{border:0;background:transparent;align-items:center;justify-content:center;cursor:pointer;font-size:17px}
.header-notif-btn.has-new{animation:zaynBell .55s ease 2}
@keyframes zaynBell{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.header-notif-dropdown{position:absolute;top:calc(100% + 14px);inset-inline-end:-12px;width:min(390px,calc(100vw - 28px));background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.25);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-7px);transition:.18s ease;z-index:800}
.header-notif-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.header-notif-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.header-notif-head strong{display:block;font-size:13px}.header-notif-head span{display:block;color:var(--ink-faint);font-size:9px;margin-top:3px}.header-notif-head>a{color:var(--gold-soft);font-size:10px;white-space:nowrap;text-decoration:none}
.header-notif-list{max-height:410px;overflow:auto}
.header-notif-item{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);position:relative;transition:.15s ease}
.header-notif-item:hover{background:var(--card-hover)}.header-notif-item.unread{background:rgba(199,160,107,.055)}
.header-notif-icon{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;background:rgba(199,160,107,.10);color:var(--gold-soft);font-size:12px}.header-notif-icon.type-order{color:#89b9e7;background:rgba(80,145,210,.11)}.header-notif-icon.type-ticket{color:#a9a1e6;background:rgba(130,115,220,.10)}.header-notif-icon.type-review{color:#d5ae6d}.header-notif-icon.type-announcement{color:#8dcf9f;background:rgba(80,175,110,.10)}
.header-notif-copy{min-width:0;display:block;flex:1}.header-notif-copy strong{display:block;font-size:11px;line-height:1.7}.header-notif-copy>span{display:block;color:var(--ink-dim);font-size:10px;line-height:1.8;margin-top:2px}.header-notif-copy small{display:block;color:var(--ink-faint);font-size:8px;margin-top:4px}
.header-notif-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:7px;flex:0 0 7px}
.header-notif-empty{padding:38px 18px;text-align:center;color:var(--ink-faint);display:flex;flex-direction:column;gap:6px;align-items:center}.header-notif-empty i{font-size:25px;color:var(--gold-soft)}.header-notif-empty strong{color:var(--ink);font-size:12px}.header-notif-empty span{font-size:9px;line-height:1.8}
.notification-count-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:rgba(199,160,107,.09);border:1px solid rgba(199,160,107,.18);color:var(--gold-soft);font-size:9px}
.notification-detail-card{max-width:760px;margin-inline:auto;padding:34px;text-align:right}.notification-detail-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(199,160,107,.10);color:var(--gold-soft);font-size:20px;margin-bottom:18px}.notification-detail-icon.type-order{color:#89b9e7;background:rgba(80,145,210,.11)}.notification-detail-icon.type-ticket{color:#a9a1e6;background:rgba(130,115,220,.10)}.notification-detail-icon.type-announcement{color:#8dcf9f;background:rgba(80,175,110,.10)}
.notification-detail-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--ink-faint);font-size:9px;margin-bottom:10px}.notification-detail-card h1{font-size:24px;margin:0 0 16px}.notification-detail-message{font-size:13px;line-height:2.2;color:var(--ink-dim);white-space:normal;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.notification-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
@media(max-width:700px){.header-notif-dropdown{position:fixed;top:68px;inset-inline:14px;width:auto}.header-notif-head{padding:13px}.notification-detail-card{padding:22px 18px}.notification-detail-card h1{font-size:20px}.notification-detail-actions{flex-direction:column}.notification-detail-actions .btn{width:100%}}

/* v15: full menu editor cards */
.site-menu-editor-config{align-items:stretch;min-height:0;padding:14px 4px 18px}.site-menu-config-card{direction:rtl;flex:0 0 235px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2);display:flex;flex-direction:column;gap:9px;box-sizing:border-box}.site-menu-config-top{display:flex;align-items:center;gap:7px;padding-bottom:8px;border-bottom:1px solid var(--line)}.site-menu-config-top strong{font-size:10px;flex:1}.site-menu-config-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(199,160,107,.10);color:var(--gold-soft);font-size:10px}.site-menu-config-card label{font-size:9px;color:var(--ink-faint);display:flex;flex-direction:column;gap:5px}.site-menu-config-card input:not([type=checkbox]){width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:9px;padding:8px 9px;font:inherit;font-size:10px;outline:none}.site-menu-config-card input:not([type=checkbox]):focus{border-color:rgba(199,160,107,.55)}.site-menu-delete{border:0;background:transparent;color:var(--danger);width:28px;height:28px;border-radius:8px;cursor:pointer}.site-menu-delete:hover{background:rgba(210,90,90,.09)}.menu-visible{flex-direction:row!important;align-items:center;gap:7px!important;color:var(--ink-dim)!important}.menu-visible input{accent-color:var(--gold)}
@media(max-width:700px){.site-menu-config-card{flex-basis:220px}.notification-count-pill{margin-inline-start:auto}}