/* ==========================================================================
   ویترین فروشگاه — زبان طراحی Elara، بازنویسی‌شده برای راست‌به‌چپ و فارسی.
   همه اندازه‌ها با ویژگی‌های منطقی (inline-start/end) نوشته شده‌اند تا جهت
   صفحه درست بماند. letter-spacing مثبت فقط روی متن لاتین استفاده می‌شود.
   ========================================================================== */
:root{
  --color-black:#141414; --color-charcoal:#2d2c2a; --color-white:#fff; --color-offwhite:#f7f5f1;
  --color-gray-700:#57534d; --color-gray-500:#726c64; --color-gray-300:#c9c3ba; --color-gray-200:#e2ddd5; --color-gray-100:#eeebe5;
  --color-beige:#d8c9b1; --color-beige-soft:#efe8dc;
  --color-green:#2f4a3a; --color-green-dark:#233a2d; --color-green-soft:#e2e9e4;
  --color-sale:#a3392c; --color-success:#3c6a4b; --color-success-soft:#e4eee7;
  --color-warning:#8a5f18; --color-warning-soft:#f5ecdb; --color-error:#a3392c; --color-error-soft:#f6e5e2;
  --color-text:var(--color-black); --color-text-muted:var(--color-gray-500);
  --color-border:var(--color-gray-200); --color-border-strong:var(--color-gray-300);
  --color-bg:var(--color-offwhite); --color-surface:var(--color-white); --color-media:var(--color-gray-100);
  --color-ink:var(--color-black); --color-on-ink:#fff;
  --header-bg:color-mix(in srgb,var(--color-bg) 94%,transparent);
  --overlay:rgb(20 20 20 / .45);
  --font:'Dana','Vazirmatn','Estedad',system-ui,sans-serif;
  --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.375rem;
  --fs-xl:clamp(1.5rem,2.4vw,2rem); --fs-2xl:clamp(1.9rem,3.8vw,2.9rem); --fs-display:clamp(2.6rem,7.5vw,6rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem;
  --space-7:3rem; --space-8:4rem; --space-section:clamp(3.5rem,8vw,6.5rem); --gutter:clamp(1.1rem,4vw,3rem);
  --container:1360px; --header-h:72px; --bottom-nav-h:62px;
  --radius-xs:2px; --radius-sm:4px;
  --shadow-float:0 20px 50px rgb(20 20 20 / .12);
  --ease:cubic-bezier(.22,.61,.36,1); --dur-fast:.2s; --dur:.35s; --dur-slow:.7s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font);font-size:var(--fs-base);
  line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--color-black);color:#fff}
:focus-visible{outline:2px solid var(--color-green);outline-offset:3px}
.skip-link{position:absolute;inset-inline-start:1rem;top:-100px;z-index:999;background:#141414;color:#fff;padding:.5rem 1rem}
.skip-link:focus{top:1rem}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.num,.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--color-text-muted)}

.icon{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:16px;height:16px} .icon.lg{width:28px;height:28px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  transition:background-color var(--dur-fast) var(--ease)}
.icon-btn:hover{background:var(--color-gray-100)}

/* ---------------------------------------------------------------- دکمه‌ها */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:50px;padding:0 var(--space-6);
  border:1px solid transparent;border-radius:var(--radius-xs);font-size:var(--fs-sm);font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn .icon{width:18px;height:18px;transition:transform var(--dur) var(--ease)}
.btn:hover .icon-arrow{transform:translateX(-4px)}
.btn-primary{background:var(--color-black);color:#fff}
.btn-primary:hover{background:var(--color-green)}
.btn-primary:active{background:var(--color-green-dark)}
.btn-secondary{border-color:var(--color-black);color:var(--color-black)}
.btn-secondary:hover{background:var(--color-black);color:#fff}
.btn-light{background:#fff;color:var(--color-black)}
.btn-light:hover{background:var(--color-beige-soft)}
.btn-ghost-light{border-color:rgb(255 255 255 / .7);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--color-black)}
.btn-telegram{background:#229ED9;color:#fff}
.btn-telegram:hover{background:#1b83b5}
.btn-sm{min-height:40px;padding:0 var(--space-4);font-size:var(--fs-xs)}
.btn-block{width:100%}
.btn:disabled{background:var(--color-gray-200);border-color:var(--color-gray-200);color:var(--color-gray-500);cursor:not-allowed}
.btn.is-loading{pointer-events:none;opacity:.85}
.spin{width:16px;height:16px;border:2px solid rgb(255 255 255 / .35);border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);padding-bottom:2px;border-bottom:1px solid currentColor;
  font-size:var(--fs-sm);font-weight:500;transition:color var(--dur-fast),gap var(--dur)}
.link-arrow:hover{gap:var(--space-3);color:var(--color-green)}

/* ---------------------------------------------------------------- فرم */
.form{display:grid;gap:var(--space-5)}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.field{display:grid;gap:var(--space-2);align-content:start}
.field-label{font-size:var(--fs-sm);font-weight:500;display:flex;justify-content:space-between;gap:var(--space-3)}
.field-label .optional{font-weight:400;color:var(--color-text-muted)}
.input,.select,.textarea{width:100%;min-height:50px;padding:0 var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-xs);background:var(--color-surface);font-size:var(--fs-base);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.textarea{padding:var(--space-3) var(--space-4);min-height:110px;resize:vertical;line-height:1.8}
.input:hover,.select:hover,.textarea:hover{border-color:var(--color-border-strong)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--color-black);box-shadow:0 0 0 3px rgb(20 20 20 / .08)}
.input.is-error{border-color:var(--color-error)}
.field-hint{font-size:var(--fs-xs);color:var(--color-text-muted)}
.field-error{font-size:var(--fs-xs);color:var(--color-error)}
.hp{position:absolute!important;inset-inline-start:-9999px!important;width:1px;height:1px;overflow:hidden}
.choice{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-xs);background:var(--color-surface);cursor:pointer;transition:border-color var(--dur-fast)}
.choice:hover{border-color:var(--color-border-strong)}
.choice:has(input:checked){border-color:var(--color-black);box-shadow:inset 0 0 0 1px var(--color-black)}
.choice input{accent-color:var(--color-black);margin-top:.35rem;width:18px;height:18px;flex:none}
.choice b{display:block;font-weight:500}
.choice span{display:block;font-size:var(--fs-sm);color:var(--color-text-muted)}

/* ---------------------------------------------------------------- نشان و قیمت */
.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);font-size:var(--fs-2xs);font-weight:500;
  border-radius:var(--radius-xs);background:#fff;color:var(--color-black)}
.badge-soldout{background:var(--color-black);color:#fff}
.badge-low{background:var(--color-warning-soft);color:var(--color-warning)}
.badge-new{background:var(--color-green);color:#fff}
.status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:500}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-ok{background:var(--color-success-soft);color:var(--color-success)}
.status-warn{background:var(--color-warning-soft);color:var(--color-warning)}
.status-bad{background:var(--color-error-soft);color:var(--color-error)}
.status-info{background:var(--color-green-soft);color:var(--color-green)}
.price{font-size:var(--fs-base);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.price small{font-size:var(--fs-xs);font-weight:400;color:var(--color-text-muted);margin-inline-start:4px}
.alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-xs);font-size:var(--fs-sm)}
.alert-info{background:var(--color-green-soft);color:var(--color-green)}
.alert-warn{background:var(--color-warning-soft);color:var(--color-warning)}
.alert-error{background:var(--color-error-soft);color:var(--color-error)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);height:50px}
.qty button{width:46px;height:100%;display:grid;place-items:center;color:var(--color-gray-700)}
.qty button:hover:not(:disabled){color:var(--color-black);background:var(--color-gray-100)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty output{min-width:36px;text-align:center;font-weight:500;font-variant-numeric:tabular-nums}
.qty.sm{height:40px} .qty.sm button{width:38px}

/* ---------------------------------------------------------------- سربرگ */
.announcement{padding:.55rem var(--gutter);background:var(--color-ink);color:var(--color-on-ink);font-size:var(--fs-xs);text-align:center}
.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border)}
.header-inner{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:var(--space-5);height:var(--header-h)}
.menu-btn{display:none}
.logo{display:inline-flex;align-items:center;gap:var(--space-3);font-size:1.45rem;font-weight:500;line-height:1;white-space:nowrap}
.logo img{height:36px;width:auto}
.nav-list{display:flex;justify-content:center;gap:clamp(1.1rem,2.4vw,2.4rem)}
.nav-link{position:relative;display:block;padding-block:var(--space-2);font-size:var(--fs-sm);font-weight:500}
.nav-link::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);
  transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);transform-origin:right}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1);margin-inline-end:calc(var(--space-3) * -1)}
.icon-count{position:absolute;top:4px;inset-inline-end:2px;display:grid;place-items:center;min-width:17px;height:17px;padding-inline:4px;
  border-radius:999px;background:var(--color-black);color:#fff;font-size:.625rem;font-weight:600;line-height:1}
.icon-count.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}

/* کشوی منو (موبایل) — از لبه راست باز می‌شود */
.drawer{position:fixed;inset-block:0;inset-inline-start:0;z-index:300;width:min(360px,88vw);background:var(--color-bg);
  display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
  transition:transform var(--dur) var(--ease),visibility var(--dur)}
.drawer.is-open{transform:none;visibility:visible;box-shadow:var(--shadow-float)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:var(--gutter) calc(var(--gutter) - .75rem);
  border-bottom:1px solid var(--color-border);font-size:1.2rem}
.drawer-head b{font-weight:500}
.drawer-nav{flex:1;overflow-y:auto;padding:var(--space-4) var(--gutter)}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0;font-size:var(--fs-lg);
  border-bottom:1px solid var(--color-border)}
.drawer-nav a .icon{color:var(--color-text-muted)}
.drawer-nav .sub{padding:var(--space-2) 0 var(--space-3)}
.drawer-nav .sub a{font-size:var(--fs-base);padding:var(--space-2) 0;border:0;color:var(--color-gray-700)}
.drawer-social{padding:var(--space-5) var(--gutter);border-top:1px solid var(--color-border)}
.overlay{position:fixed;inset:0;z-index:250;background:var(--overlay);animation:fade var(--dur) var(--ease)}
@keyframes fade{from{opacity:0}}
body.lock{overflow:hidden}

/* ---------------------------------------------------------------- پاورقی */
.site-footer{margin-top:var(--space-section);background:var(--color-ink);color:rgb(255 255 255 / .72);font-size:var(--fs-sm)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-7);padding-block:var(--space-8) var(--space-7)}
.footer-brand{font-size:1.5rem;color:#fff;font-weight:500}
.footer-about{margin-top:var(--space-4);max-width:36ch;line-height:1.9}
.footer-title{color:#fff;font-size:var(--fs-sm);font-weight:500;margin-bottom:var(--space-4)}
.footer-links{display:grid;gap:var(--space-2)}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding-block:var(--space-5);
  border-top:1px solid rgb(255 255 255 / .12);font-size:var(--fs-xs)}
.social-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.social-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-3);
  border:1px solid currentColor;border-radius:999px;font-size:var(--fs-xs);transition:background-color var(--dur-fast),color var(--dur-fast)}
.site-footer .social-link{border-color:rgb(255 255 255 / .25);color:#fff}
.site-footer .social-link:hover{background:#fff;color:var(--color-black)}
.drawer-social .social-link:hover,.contact-grid .social-link:hover{background:var(--color-black);color:#fff}
.social-link .h{direction:ltr;unicode-bidi:isolate}

/* ---------------------------------------------------------------- سربرگ صفحه */
.page-head{padding-block:var(--space-7) var(--space-6)}
.breadcrumb ol{display:flex;gap:var(--space-2);font-size:var(--fs-xs);color:var(--color-text-muted);flex-wrap:wrap}
.breadcrumb li+li::before{content:"/";margin-inline-end:var(--space-2);color:var(--color-gray-300)}
.breadcrumb a:hover{color:var(--color-text)}
.page-title{font-size:var(--fs-2xl);font-weight:400;line-height:1.3;margin-top:var(--space-3)}
.page-sub{color:var(--color-text-muted);margin-top:var(--space-2);max-width:60ch}
.section{padding-block:var(--space-section) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.section-kicker{font-size:var(--fs-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.section-title{font-size:var(--fs-xl);font-weight:400;line-height:1.35}

/* ---------------------------------------------------------------- خانه */
.hero{position:relative;overflow:hidden;background:var(--color-beige-soft);border-bottom:1px solid var(--color-border)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-7);align-items:center;min-height:min(78vh,700px);padding-block:var(--space-8)}
.hero-kicker{font-size:var(--fs-sm);color:var(--color-gray-700);margin-bottom:var(--space-4)}
.display{font-size:var(--fs-display);font-weight:300;line-height:1.1}
.hero-text{margin-top:var(--space-5);max-width:44ch;font-size:var(--fs-md);color:var(--color-gray-700)}
.hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
.hero-media{position:relative;aspect-ratio:4/5;background:var(--color-beige);overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:heroIn 1.4s var(--ease) both}
.hero-media .mono{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(5rem,16vw,11rem);font-weight:300;color:rgb(20 20 20 / .14)}
@keyframes heroIn{from{opacity:0;transform:scale(1.06)}}
.hero .display,.hero-kicker,.hero-text,.hero-actions{animation:rise .9s var(--ease) both}
.hero-text{animation-delay:.12s} .hero-actions{animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.trust div{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-5) var(--gutter);border-inline-start:1px solid var(--color-border);font-size:var(--fs-sm)}
.trust div:first-child{border-inline-start:0}
.trust b{display:block;font-weight:500}
.trust span{display:block;color:var(--color-text-muted);font-size:var(--fs-xs)}
.cat-chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--space-4);border:1px solid var(--color-border-strong);
  border-radius:999px;font-size:var(--fs-sm);transition:all var(--dur-fast) var(--ease);white-space:nowrap}
.chip:hover{border-color:var(--color-black)}
.chip.is-active{background:var(--color-black);border-color:var(--color-black);color:#fff}
.tg-band{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-5);align-items:center;padding:var(--space-6);
  background:var(--color-ink);color:#fff}
.tg-band .tg-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#229ED9}
.tg-band .tg-ic .icon{width:30px;height:30px;color:#fff}
.tg-band h3{font-size:var(--fs-lg);font-weight:400}
.tg-band p{color:rgb(255 255 255 / .7);font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- کارت کالا */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-7) var(--space-5)}
.product-card{display:flex;flex-direction:column}
.product-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--color-media)}
.product-media a{display:block;height:100%}
.product-img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow)}
.product-card:hover .product-img{transform:scale(1.03)}
.product-ph{width:100%;height:100%;display:grid;place-items:center;font-size:3.2rem;font-weight:300;color:rgb(20 20 20 / .16);
  background:linear-gradient(160deg,var(--color-gray-100),var(--color-beige-soft))}
.product-badges{position:absolute;top:var(--space-3);inset-inline-start:var(--space-3);display:flex;gap:var(--space-1);pointer-events:none}
.quick-add{position:absolute;inset-inline:var(--space-3);bottom:var(--space-3);display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);min-height:44px;background:rgb(255 255 255 / .92);color:#141414;font-size:var(--fs-xs);font-weight:500;
  transition:opacity var(--dur),transform var(--dur),background-color var(--dur-fast),color var(--dur-fast)}
.quick-add:hover{background:#141414;color:#fff}
.quick-add:disabled{color:#726c64;cursor:not-allowed;background:rgb(255 255 255 / .92)}
@media (hover:hover){
  .quick-add{opacity:0;transform:translateY(10px)}
  .product-card:hover .quick-add,.product-card:focus-within .quick-add{opacity:1;transform:none}
}
.product-info{display:grid;gap:var(--space-1);padding-top:var(--space-4)}
.product-category{font-size:var(--fs-xs);color:var(--color-text-muted)}
.product-name{font-size:var(--fs-base);font-weight:400;line-height:1.5}
.product-name a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:100% 100%;
  background-repeat:no-repeat;transition:background-size var(--dur) var(--ease)}
.product-name a:hover{background-size:100% 1px}
.product-card.is-sold-out .product-img{opacity:.6;filter:grayscale(.35)}
.product-card.is-sold-out .price{color:var(--color-text-muted)}

/* ---------------------------------------------------------------- فروشگاه */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  padding-block:var(--space-4);margin-bottom:var(--space-6);border-block:1px solid var(--color-border)}
.shop-toolbar .select{width:auto;min-height:42px;padding-inline:var(--space-3) var(--space-6)}
.search-inline{position:relative;flex:1;max-width:420px;min-width:220px}
.search-inline .icon{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted)}
.search-inline .input{min-height:42px;padding-inline-start:44px}
.results-count{font-size:var(--fs-sm);color:var(--color-text-muted)}
.empty-state{display:grid;justify-items:center;gap:var(--space-3);text-align:center;padding:var(--space-8) var(--space-4);
  border:1px solid var(--color-border);background:var(--color-surface)}
.empty-state .icon{width:40px;height:40px;stroke-width:1.2;color:var(--color-text-muted)}
.empty-state h2{font-size:var(--fs-lg);font-weight:400}
.empty-state p{color:var(--color-text-muted);max-width:42ch}

/* ---------------------------------------------------------------- صفحه کالا */
.pdp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:start;padding-top:var(--space-5)}
.pdp-media{position:relative;aspect-ratio:4/5;background:var(--color-media);overflow:hidden}
.pdp-media img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform var(--dur-slow) var(--ease)}
.pdp-media.zoom img{transform:scale(1.8);cursor:zoom-out}
.pdp-info{position:sticky;top:calc(var(--header-h) + var(--space-5));display:grid;gap:var(--space-5)}
.pdp-title{font-size:var(--fs-2xl);font-weight:400;line-height:1.3}
.pdp-price{font-size:var(--fs-lg)}
.pdp-actions{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3)}
.pdp-desc{white-space:pre-line;color:var(--color-gray-700);line-height:2;border-top:1px solid var(--color-border);padding-top:var(--space-5)}
.pdp-meta{display:grid;gap:var(--space-3);font-size:var(--fs-sm);border-top:1px solid var(--color-border);padding-top:var(--space-5)}
.pdp-meta div{display:flex;gap:var(--space-3);align-items:center;color:var(--color-gray-700)}

/* ---------------------------------------------------------------- سبد و پرداخت */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(2rem,4vw,4rem);align-items:start}
.cart-item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--space-4);padding-block:var(--space-5);
  border-bottom:1px solid var(--color-border);align-items:start}
.cart-item:first-child{border-top:1px solid var(--color-border)}
.cart-thumb{aspect-ratio:3/4;background:var(--color-media);overflow:hidden}
.cart-thumb img,.cart-thumb .product-ph{width:100%;height:100%;object-fit:cover;font-size:1.6rem}
.cart-item h3{font-size:var(--fs-base);font-weight:400}
.cart-item .row{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap}
.remove-btn{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-xs);color:var(--color-text-muted);border-bottom:1px solid transparent}
.remove-btn:hover{color:var(--color-sale);border-color:currentColor}
.summary{position:sticky;top:calc(var(--header-h) + var(--space-5));padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border)}
.summary h2{font-size:var(--fs-md);font-weight:500;margin-bottom:var(--space-4)}
.summary-row{display:flex;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-2);font-size:var(--fs-sm)}
.summary-row.total{border-top:1px solid var(--color-border);margin-top:var(--space-3);padding-top:var(--space-4);font-size:var(--fs-md);font-weight:500}
.summary-lines{display:grid;gap:var(--space-3);margin-bottom:var(--space-4);max-height:320px;overflow:auto}
.summary-line{display:grid;grid-template-columns:52px 1fr auto;gap:var(--space-3);align-items:center;font-size:var(--fs-sm)}
.summary-line .cart-thumb{width:52px}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(2rem,4vw,4rem);align-items:start}
.step{display:grid;gap:var(--space-5);padding-bottom:var(--space-6);margin-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}
.step-title{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-lg);font-weight:400}
.step-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--color-black);font-size:var(--fs-sm)}
.card-box{display:grid;gap:var(--space-2);padding:var(--space-5);border:1px dashed var(--color-border-strong);background:var(--color-surface)}
.card-box .card-no{font-size:clamp(1.05rem,5vw,1.375rem);font-weight:500;letter-spacing:.06em;direction:ltr;text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------- تأیید و پیگیری */
.confirm{max-width:720px;margin-inline:auto;text-align:center;padding-top:var(--space-7)}
.confirm-ic{display:grid;place-items:center;width:76px;height:76px;margin:0 auto var(--space-5);border-radius:50%;
  background:var(--color-success-soft);color:var(--color-success)}
.confirm-ic .icon{width:36px;height:36px}
.confirm h1{font-size:var(--fs-2xl);font-weight:400}
.confirm .order-no{display:inline-block;margin-top:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-surface);
  border:1px solid var(--color-border);font-size:var(--fs-md);font-weight:500}
.confirm-body{display:grid;gap:var(--space-5);text-align:right;margin-top:var(--space-7)}
.panel{padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border)}
.panel h2{font-size:var(--fs-md);font-weight:500;margin-bottom:var(--space-4)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin-top:var(--space-4)}
.timeline div{padding-top:var(--space-3);border-top:3px solid var(--color-gray-200);font-size:var(--fs-xs);color:var(--color-text-muted)}
.timeline div.done{border-color:var(--color-green);color:var(--color-text)}
.narrow{max-width:560px;margin-inline:auto}

/* ---------------------------------------------------------------- درباره و تماس */
.about-lead{font-size:var(--fs-xl);font-weight:300;line-height:1.7;max-width:34ch}
.about-body{white-space:pre-line;line-height:2.1;color:var(--color-gray-700);max-width:70ch;margin-top:var(--space-6)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.contact-card{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-6);background:var(--color-surface);
  border:1px solid var(--color-border);transition:border-color var(--dur-fast)}
a.contact-card:hover{border-color:var(--color-black)}
.contact-card .icon{width:26px;height:26px;margin-bottom:var(--space-2)}
.contact-card b{font-weight:500}
.contact-card span{color:var(--color-text-muted);font-size:var(--fs-sm)}
.contact-card.tg .icon{color:#229ED9}

/* ---------------------------------------------------------------- بقیه */
.page-loading{min-height:50vh;display:grid;place-items:center;color:var(--color-text-muted)}
.skeleton{background:linear-gradient(90deg,var(--color-gray-100),var(--color-beige-soft),var(--color-gray-100));background-size:200% 100%;
  animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:calc(var(--space-5) + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:400;
  display:flex;align-items:center;gap:var(--space-3);width:max-content;max-width:calc(100vw - 2rem);padding:var(--space-3) var(--space-5);
  background:#141414;color:#fff;font-size:var(--fs-sm);opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{text-decoration:underline;text-underline-offset:3px}
.toast.bad{background:var(--color-error)}
.bottom-nav{display:none}

/* ---------------------------------------------------------------- صفحه بسته */
.closed-page{min-height:100vh;background:var(--color-beige-soft)}
.closed{min-height:100vh;display:grid;place-items:center;align-content:center;gap:var(--space-5);padding:var(--space-5)}
.closed-card{width:100%;max-width:560px;padding:clamp(2rem,6vw,3.5rem);background:var(--color-surface);border:1px solid var(--color-border);text-align:center;
  animation:rise .8s var(--ease) both}
.closed-kicker{font-size:var(--fs-sm);color:var(--color-text-muted);padding-bottom:var(--space-4);margin-bottom:var(--space-5);border-bottom:1px solid var(--color-border)}
.closed-title{font-size:var(--fs-xl);font-weight:400;line-height:1.5}
.closed-text{margin-top:var(--space-4);color:var(--color-gray-700)}
.closed-links{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.closed-links:empty{display:none}
.closed-link{display:inline-flex;align-items:center;min-height:42px;padding:0 var(--space-4);border:1px solid var(--color-black);font-size:var(--fs-sm)}
.closed-link:hover{background:var(--color-black);color:#fff}
.closed-foot{font-size:var(--fs-xs);color:var(--color-text-muted)}

/* ---------------------------------------------------------------- واکنش‌گرا */
@media (max-width:1100px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr 1fr}
  .cart-layout,.checkout-grid{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:860px){
  :root{--header-h:62px}
  .header-inner{grid-template-columns:auto 1fr auto;gap:var(--space-2)}
  .menu-btn{display:inline-grid;margin-inline-start:calc(var(--space-3) * -1)}
  .main-nav{display:none}
  .logo{justify-self:center;font-size:1.25rem}
  .hide-sm{display:none!important}
  .hero-inner{grid-template-columns:1fr;min-height:0;padding-block:var(--space-7);gap:var(--space-6)}
  .hero-media{aspect-ratio:4/3}
  .trust{grid-template-columns:1fr 1fr}
  .trust div:nth-child(3){border-inline-start:0}
  .trust div:nth-child(n+3){border-top:1px solid var(--color-border)}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-3)}
  .pdp{grid-template-columns:1fr;padding-top:0}
  .pdp-media{margin-inline:calc(var(--gutter) * -1);aspect-ratio:1/1}
  .pdp-info{position:static}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .tg-band{grid-template-columns:auto 1fr;padding:var(--space-5)}
  .tg-band .btn{grid-column:1/-1}
  .footer-top{grid-template-columns:1fr;gap:var(--space-6);padding-block:var(--space-7) var(--space-6)}
  .site-footer{margin-top:var(--space-7);padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
  .quick-add{min-height:38px;inset-inline:var(--space-2);bottom:var(--space-2)}
  .cart-item{grid-template-columns:78px minmax(0,1fr)}
  .cart-item .price-col{grid-column:2}
  .timeline{grid-template-columns:repeat(2,1fr)}
  body{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
  .bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;inset-inline:0;bottom:0;z-index:120;
    height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--color-border)}
  .bottom-nav a{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;font-size:var(--fs-2xs);color:var(--color-text-muted)}
  .bottom-nav a[aria-current="page"]{color:var(--color-black)}
  .bottom-nav .icon-count{top:6px;inset-inline-end:calc(50% - 22px)}
  .toast{bottom:calc(var(--bottom-nav-h) + var(--space-3) + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}