/* ==========================================================================
   cart.css — دکمه‌ی سبد و کشوی سبد.

   بعد از base/site/mirror و پیش از fa.css بارگذاری می‌شود. همه‌ی فاصله‌ها
   منطقی‌اند (inline-start / inline-end) پس همین فایل در چپ‌چین هم درست
   می‌نشیند و لایه‌ی فارسی چیزی برای اصلاح ندارد.
   ========================================================================== */

/* ---------------------------------------------------------------- دکمه --- */

.cartbtn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.62em 1em;border:1px solid var(--line);border-radius:2px;
  background:transparent;color:var(--bone);
  font:inherit;font-size:.82rem;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.cartbtn:hover{border-color:var(--bronze);color:var(--bronze-lit)}
.cartbtn.has-items{border-color:var(--bronze)}
.cartbtn svg{flex:none}

/* دکمه‌ی حساب (js/account-link.js): هم‌شکلِ دکمه‌ی سبد، کنارِ آن. */
.acctbtn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.62em 1em;border:1px solid var(--line);border-radius:2px;
  color:var(--bone);text-decoration:none;font-size:.82rem;white-space:nowrap;
  max-width:11em;transition:border-color .25s var(--ease),color .25s var(--ease);
}
.acctbtn:hover,.acctbtn[aria-current=page]{border-color:var(--bronze);color:var(--bronze-lit)}
.acctbtn svg{flex:none}
.acctbtn-label{overflow:hidden;text-overflow:ellipsis}
.acctbtn.is-in svg{color:var(--bronze-lit)}

.cartbtn-n{
  min-width:1.5em;padding:0 .3em;border-radius:999px;
  background:var(--bronze);color:var(--black);
  font-size:.72rem;font-weight:700;line-height:1.5em;text-align:center;
}

/* اگر صفحه‌ای نوار ندارد، دکمه شناور می‌شود. safe-area را رعایت می‌کند تا
   روی آیفون زیر نوارِ خانه گم نشود. */
.cartbtn-float{
  position:fixed;z-index:60;
  inset-block-end:calc(1rem + var(--safe-b));
  inset-inline-end:1rem;
  background:var(--panel);box-shadow:0 8px 30px rgba(0,0,0,.5);
}

/* پیام کوتاه روی هر دکمه‌ی «افزودن» که نتوانست اضافه کند */
[data-flash]{position:relative}
[data-flash]::after{
  content:attr(data-flash);position:absolute;z-index:5;
  inset-block-end:calc(100% + .45rem);inset-inline-end:0;
  padding:.45em .7em;border:1px solid var(--line);border-radius:2px;
  background:var(--panel-2);color:var(--bone);
  font-size:.72rem;line-height:1.5;white-space:nowrap;pointer-events:none;
}

/* ---------------------------------------------------------------- کشو --- */

.cart-wrap{position:fixed;inset:0;z-index:200}
.cart-wrap[hidden]{display:none!important}

.cart-veil{
  position:absolute;inset:0;background:rgba(4,3,2,.72);
  opacity:0;transition:opacity .32s var(--ease);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.cart-wrap.is-open .cart-veil{opacity:1}

.cart-drawer{
  position:absolute;inset-block:0;inset-inline-end:0;
  width:min(27rem,100vw);
  display:flex;flex-direction:column;
  background:var(--panel);border-inline-start:1px solid var(--line);
  padding-block-start:var(--safe-t);padding-block-end:var(--safe-b);
  transition:transform .34s var(--ease);
  /* پیش‌فرض چپ‌چین: کشو در لبه‌ی راست، پس بیرونِ صفحه یعنی ‎+100%‎.
     transform فیزیکی است و معادل منطقی ندارد، پس جهت صریح می‌آید. */
  transform:translateX(100%);
}
[dir="rtl"] .cart-drawer{transform:translateX(-100%)}
.cart-wrap.is-open .cart-drawer,
[dir="rtl"] .cart-wrap.is-open .cart-drawer{transform:translateX(0)}
.cart-drawer:focus{outline:none}

@media (prefers-reduced-motion:reduce){
  .cart-drawer,.cart-veil{transition:none}
}

.cart-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--gut) .9rem;border-block-end:1px solid var(--line);
}
.cart-head h2{
  margin:0;font-family:var(--display);font-weight:700;font-size:1.15rem;
}
.cart-x{
  background:none;border:0;color:var(--bone-dim);cursor:pointer;
  font-size:1.6rem;line-height:1;padding:.2em .4em;
}
.cart-x:hover{color:var(--bone)}

.cart-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--gut)}
.cart-foot{
  border-block-start:1px solid var(--line);
  padding:1rem var(--gut) 1.2rem;background:var(--panel-2);
}

/* ------------------------------------------------------------- ردیف‌ها --- */

.cart-row{
  display:grid;align-items:center;gap:.35rem .8rem;
  grid-template-columns:4.5rem 1fr auto;
  grid-template-areas:
    "thumb info  money"
    "thumb qty   rm";
  padding:1rem 0;border-block-end:1px solid var(--line);
}
.cart-row:last-child{border-block-end:0}

.cart-thumb{grid-area:thumb;opacity:.92}
.cart-thumb svg{width:100%;height:auto}
.cart-thumb.is-empty{
  aspect-ratio:2/1;border:1px dashed var(--line);border-radius:2px;
}

.cart-info{grid-area:info;min-width:0}
.cart-info h3{
  margin:0;font-family:var(--display);font-weight:600;font-size:.94rem;
  line-height:1.35;
}
.cart-colour,.cart-size{margin:.15rem 0 0;font-size:.78rem;color:var(--bone-dim)}
.cart-size{font-family:var(--data)}

.cart-qty{
  grid-area:qty;display:inline-flex;align-items:center;gap:.15rem;
  border:1px solid var(--line);border-radius:2px;width:max-content;
}
.cart-qty button{
  background:none;border:0;color:var(--bone);cursor:pointer;
  font:inherit;font-size:1rem;line-height:1;padding:.35em .6em;
}
.cart-qty button:disabled{color:var(--bronze-dim);cursor:default}
.cart-qty span{min-width:1.6em;text-align:center;font-size:.82rem}

.cart-money{grid-area:money;text-align:end;white-space:nowrap}
.cart-line{display:block;font-size:.88rem;color:var(--bronze-lit)}
.cart-unit{display:block;font-size:.76rem;color:var(--bone-dim);margin-block-start:.1rem}
.cart-ask{font-size:.78rem;color:var(--bone-dim)}

.cart-rm{
  grid-area:rm;justify-self:end;
  background:none;border:0;color:var(--bone-dim);cursor:pointer;
  font:inherit;font-size:.8rem;padding:.3em 0;text-decoration:underline;
  text-underline-offset:.25em;
}
.cart-rm:hover{color:var(--warn)}

.cart-warn{margin:.3rem 0 0;font-size:.78rem;color:var(--warn)}
.cart-note{margin:.3rem 0 0;font-size:.78rem;color:var(--ice)}

/* -------------------------------------------------------------- خالی ---- */

.cart-empty{padding:3.5rem 0;text-align:center}
.cart-empty p{margin:0 0 .5rem;font-size:.9rem}
.cart-empty .dim{color:var(--bone-dim);font-size:.8rem;margin-block-end:1.4rem}

/* -------------------------------------------------------------- جمع‌ها --- */

.cart-sum{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-size:.82rem;padding-block:.28rem;
}
.cart-sum span{color:var(--bone-dim)}
.cart-sum b{font-weight:600}
.cart-sum .free{color:var(--bronze)}
.cart-sum.is-total{
  margin-block-start:.5rem;padding-block-start:.7rem;
  border-block-start:1px solid var(--line);font-size:1rem;
}
/* عدد در فونت تیتر نمی‌نشیند: Diodrum جداکننده‌ی هزارگان را جور دیگری
   می‌کشد و مبلغ نهایی با مبلغ ردیف‌ها ناهمخوان می‌شود — دقیقاً همان عددی
   که مشتری با دقت نگاهش می‌کند. */
.cart-sum.is-total b{font-weight:700;color:var(--bronze-lit)}

.cart-nudge{
  margin:0 0 .7rem;padding:.5em .7em;border:1px solid var(--line);border-radius:2px;
  font-size:.74rem;color:var(--bronze);text-align:center;
}

.cart-go{width:100%;margin-block-start:1rem;justify-content:center}
.cart-go:disabled{opacity:.45;cursor:not-allowed}
.cart-fine{margin:.6rem 0 0;font-size:.76rem;color:var(--bone-dim);text-align:center}

/* -------------------------------------------------------------- موبایل --
   برگه‌ی پایین روی **همه‌ی** صفحه‌ها (آینه هم، که mobile.css را بار نمی‌کند).
   ‎dvh‎: با ‎vh‎ وقتی نوارِ آدرسِ سافاری پیداست، برگه از زیرِ صفحه بیرون
   می‌زد و دکمه‌ی «ادامه و پرداخت» دیده نمی‌شد. */
@media (max-width:760px){
  .cart-drawer,[dir="rtl"] .cart-drawer{
    inset:auto 0 0 0;width:100%;max-height:90vh;max-height:90dvh;
    border-radius:26px 26px 0 0;border:1px solid rgba(201,160,99,.18);border-bottom:0;
    transform:translateY(100%);touch-action:pan-y;
  }
  .cart-wrap.is-open .cart-drawer,
  [dir="rtl"] .cart-wrap.is-open .cart-drawer{transform:none}
  .cart-drawer::before{content:'';display:block;width:44px;height:5px;border-radius:3px;
    margin:8px auto 0;background:rgba(242,237,228,.22);flex:none}
  .cart-head{padding:.35rem var(--gut) .45rem}
  /* پایه‌ی برگه فشرده: پیشتر ۳۲۴ تا ۳۴۶ پیکسل بود و روی گوشیِ کوتاه (۵۶۸) یا
     افقی، فهرستِ اقلام را به صفر می‌رساند. */
  .cart-foot{padding:.7rem var(--gut) .8rem}
  .cart-sum{padding-block:.1rem;font-size:.84rem}
  .cart-sum.is-total{margin-block-start:.3rem;padding-block-start:.5rem}
  .cart-nudge{margin-block-end:.5rem}
  .cart-go{margin-block-start:.6rem;min-height:50px}
  .cart-fine{margin-block-start:.45rem}
  .cart-row{
    grid-template-columns:3.6rem 1fr auto;gap:.15rem .8rem;padding:.8rem 0;
    grid-template-areas:"thumb info info" "thumb money money" "thumb qty rm";
  }
  .cart-thumb{align-self:start;margin-block-start:.2rem}
  .cart-money{text-align:start}
  .cart-qty{margin-block-start:.2rem}
}
/* کم‌ارتفاع (۵۶۸ و کوتاه‌تر): تکرار و توضیحِ اضافه می‌افتد تا فهرست جا بماند.
   ‎is-dup‎: بدونِ مالیات «جمع اقلام» و «قابل پرداخت» یک عددند.
   ‎is-why‎ (دلیلِ غیرفعالیِ دکمه) هیچ‌وقت پنهان نمی‌شود. */
@media (max-width:760px) and (max-height:700px){
  .cart-sum.is-dup,.cart-fine:not(.is-why){display:none}
}
/* گوشیِ افقی: دو ستون — اقلام کنارِ جمع‌ها. وگرنه سرتیتر + جمع‌ها کلِ ۳۹۰ پیکسل
   را می‌خوردند و فهرست ارتفاعِ صفر داشت. */
@media (orientation:landscape) and (max-height:520px){
  .cart-drawer,[dir="rtl"] .cart-drawer{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,40%);grid-template-rows:auto minmax(0,1fr);
    height:100vh;height:100dvh;max-height:none;border-radius:0;
  }
  .cart-drawer::before{display:none}
  .cart-head{grid-column:1/-1;padding-block:.3rem}
  .cart-x{margin-inline-end:0}
  .cart-body{grid-row:2;grid-column:1;min-height:0}
  .cart-foot{grid-row:2;grid-column:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    border-block-start:0;border-inline-start:1px solid var(--line)}
  .cart-sum.is-dup,.cart-fine:not(.is-why){display:none}
  .cart-go{margin-block-start:.5rem}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:761px){
  .cart-drawer,[dir="rtl"] .cart-drawer{width:min(46rem,96vw)}
}

/* ردیفی که دیگر فروختنی نیست: می‌ماند تا مشتری ببیند چه شد، ولی آشکارا
   از جمع بیرون است. */
.cart-row.is-off .cart-thumb,
.cart-row.is-off .cart-info h3{opacity:.5}
.cart-row.is-off .cart-money{opacity:.5}

/* ------------------------------------------------------- تخفیف ---- */
.cart-was{display:block;font-size:.76rem;color:var(--bone-dim);opacity:.7;
  text-decoration-thickness:1px;margin-block-start:.1rem}
.cart-off{font-size:.76rem;letter-spacing:.06em;color:var(--bronze);
  margin-block-start:.15rem}
/* ردیفِ تخفیف در جمع‌ها — تنها عددِ منفیِ سبد، و باید دیده شود. */
.cart-sum.is-off b{color:var(--bronze)}
.cart-n{font-size:.76rem;opacity:.7;margin-inline-start:.4em}

/* --------------------------------------------------- انتخابِ سایز ---
   پنجره‌ی کوچک کنارِ دکمه‌ی «افزودن به سبد». روی صفحه‌ی باریک، از پایین
   بالا می‌آید تا شست به آن برسد. */
.sizepick{position:absolute;z-index:90;min-width:15rem;max-width:min(22rem,calc(100vw - 16px));
  background:var(--panel,#16130f);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);padding:.7rem;display:grid;gap:.55rem}
.sp-head{display:flex;justify-content:space-between;align-items:center;font-size:.86rem}
.sp-x{appearance:none;background:none;border:0;color:var(--bone-dim);font-size:1.2rem;cursor:pointer;line-height:1;padding:.1rem .3rem}
.sp-list{display:grid;gap:.35rem}
.sp-opt{appearance:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;
  text-align:start;font:inherit;padding:.6rem .75rem;border:1px solid var(--line);border-radius:3px;
  background:transparent;color:var(--bone);cursor:pointer}
.sp-opt:hover:not([disabled]),.sp-opt:focus-visible{border-color:var(--bronze);outline:none}
.sp-opt[disabled]{opacity:.45;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.sp-size{font-size:.95rem;font-weight:600}
.sp-meta{font-size:.72rem;color:var(--bone-dim)}
.sp-state{font-size:.7rem;color:var(--bronze);white-space:nowrap}
.sp-opt[disabled] .sp-state{color:var(--warn);text-decoration:none}
.sp-opt[data-flash]::after{content:attr(data-flash);grid-column:1/-1;font-size:.7rem;color:var(--warn)}
.sp-help{font-size:.74rem;color:var(--bronze);text-decoration:none}
@media (max-width:640px){
  .sizepick{position:fixed;inset:auto 0 0 0 !important;top:auto !important;left:0 !important;
    max-width:none;border-radius:10px 10px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
}

/* سایز در ردیفِ سبد */
.cart-sizesel{display:flex;align-items:center;gap:.4rem;margin:0}
.cart-sizesel span{font-size:.78rem;color:var(--bone-dim)}
.cart-sizesel select{font:inherit;font-size:.78rem;direction:ltr;background:var(--panel-2,#1c1813);
  color:var(--bone);border:1px solid var(--line);border-radius:2px;padding:.2em .4em}

/* نوارِ آینه: دکمه‌ی حساب کنارِ سبد، نه وسطِ نوار؛ روی گوشی فقط آیکون. */
.mirror .bar .acctbtn{margin-inline-start:auto}
@media(max-width:640px){
  .mirror .bar .acctbtn{padding:.62em .75em}
  .mirror .bar .acctbtn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* انگشت، نه فقط عرضِ کم: گوشیِ افقی (۸۴۴) هم لمسی است. */
@media (pointer:coarse){
  .cart-x{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;margin-inline-end:-.6rem}
  .cart-qty button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;font-size:1.15rem;touch-action:manipulation}
  .cart-qty span{min-width:2em;font-size:.95rem}
  .cart-rm{min-width:44px;min-height:44px;padding:0 .3em;touch-action:manipulation}
  /* ۱۶px: کمتر از آن iOS هنگامِ فوکوس صفحه را زوم می‌کند */
  .cart-row .cart-sizesel select{font-size:16px;min-height:44px;padding:.2em .5em}
  .sp-x{min-width:44px;min-height:44px}
  .sp-help{display:flex;align-items:center;min-height:44px}
}