/* ─────────────────────────────────────────────────────────────
   تفاوت‌های ناگزیر نسخهٔ ورد‌پرس با نسخهٔ HTML.

   این تنها فایل CSS قالب است که دستی نوشته می‌شود؛ بقیه استخراج
   می‌شوند و با هر بار ساخت بازنویسی می‌شوند. هرچه اینجا می‌آید باید
   دلیل داشته باشد، نه سلیقه.
   ───────────────────────────────────────────────────────────── */

/* کارت محصول: در نسخهٔ HTML کل کارت با جاوااسکریپت کلیک‌پذیر می‌شد.
   اینجا یک <a> واقعی روی عنوان است که با ::after کل کارت را می‌پوشاند.
   نتیجه یکی است، ولی موتور جستجو لینک را می‌بیند و با کیبورد و
   صفحه‌خوان هم کار می‌کند. (.pc از قبل position:relative دارد.) */
.pc .nm h4 a,.pc .nm h3 a{color:inherit;text-decoration:none}
.pc .nm h4 a::after,.pc .nm h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:20px}
/* چیزهایی که باید بالای پوشش کلیک‌پذیر بمانند.
   ‏.off و ‎.fg از قبل absolute‌اند و گوشهٔ تصویر می‌نشینند؛ دادن
   position:relative به آن‌ها نشان تخفیف و پرچم ریجن را از گوشه
   می‌کَند و داخل جریان می‌بَرد، یعنی زیر تصویر گم می‌شوند. */
.pc .off,.pc .fg{z-index:2}
.pc .st{position:relative;z-index:2}

/* نشان ناموجود. دو بار عوض شد و هر بار کم‌رنگ ماند: اول سفیدِ
   نیمه‌شفاف، بعد شیشهٔ تیره روی تصویرِ تیره. حالا قرمزِ توپرِ سایت
   است — همان رنگی که همه‌جای سایت معنی «نه» می‌دهد — کمی درشت‌تر و
   با سایه، و خودِ تصویر هم خاکستری و تیره می‌شود تا وضعیت از دور،
   پیش از خواندنِ نشان، پیدا باشد. */
.pc .off.off-out{height:24px;padding:0 10px;background:var(--dn);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 8px 18px -8px rgba(0,0,0,.85);
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* تخفیف و ناموجود هر دو گوشهٔ بالا می‌نشینند؛ با هم، دومی یک پله پایین. */
.pc .off + .off-out{top:34px}
/* ووکامرس روی کارت کلاس outofstock می‌گذارد (wc_product_class). */
.pc.outofstock .cv img{filter:grayscale(.75) brightness(.6)}
.pc.outofstock:hover .cv img{filter:grayscale(.5) brightness(.72)}

/* ووکامرس کلاس‌های خودش را به کارت اضافه می‌کند؛ نباید display را عوض کنند */
.pc.product{display:flex;flex-direction:column}

/* نوار مرتب‌سازی ووکامرس یک <select> است، نه دکمهٔ قرصی.
   شکلش را با بقیهٔ کنترل‌های سایت یکی می‌کنیم. */
.sbar .woocommerce-ordering{margin:0}
.sbar .woocommerce-ordering select{height:34px;padding:0 12px;border:0;border-radius:99px;
  background:var(--p2);color:var(--tx2);font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;transition:background .18s,color .18s}
.sbar .woocommerce-ordering select:hover{background:var(--p3);color:var(--tx)}
.sbar .woocommerce-ordering select:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(168,85,247,.55)}

/* ابزارک‌های فیلتر ووکامرس داخل ستون فیلتر ما */
.fl .fg2 + .fg2{margin-top:16px;padding-top:16px;border-top:1px solid var(--ln)}
.fl .fh b{font-size:12.5px;font-weight:700}
.fl ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.fl ul li a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;
  font-size:12.5px;color:var(--tx2);transition:background .18s,color .18s}
.fl ul li a:hover{background:var(--p2);color:var(--tx)}
.fl ul li.chosen > a{background:rgba(139,92,246,.14);color:var(--ac3);font-weight:700}
.fl ul li .count{margin-inline-start:auto;font-size:10.5px;color:var(--mut)}

/* متن فقط برای صفحه‌خوان — ورد‌پرس این کلاس را لازم دارد */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed;top:12px;inset-inline-start:12px;z-index:9999;
  width:auto;height:auto;margin:0;padding:10px 16px;clip:auto;white-space:normal;
  border-radius:10px;background:var(--p2);color:var(--tx);
  box-shadow:0 0 0 1px var(--ln2),0 20px 40px -20px #000}

/* تصویر شاخص که ورد‌پرس با width/height می‌فرستد نباید کشیده شود */
.acard .cv2 img,.pc .cv img{width:100%;height:100%;object-fit:cover}

/* بلوک‌های ویرایشگر داخل متن نوشته و سند حقوقی */
.doc figure,.doc .wp-block-image{margin:22px 0}
.doc img{max-width:100%;height:auto;border-radius:14px}
.doc blockquote{position:relative;margin:20px 0;padding:14px 18px;border-radius:12px;
  overflow:hidden;background:var(--p2)}
.doc blockquote::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;
  width:3px;background:linear-gradient(180deg,#A855F7,#7C3AED)}
.doc pre{overflow-x:auto;padding:14px 16px;border-radius:12px;background:var(--p2);
  font-family:var(--m);font-size:12.5px;direction:ltr;text-align:left}
.doc table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13px}
.doc th,.doc td{padding:10px 12px;border-bottom:1px solid var(--ln);text-align:start}
.doc th{color:var(--tx2);font-weight:700}

/* ── صفحهٔ محصول ─────────────────────────────────────────────
   فرم واریِیشن ووکامرس را خودمان نمی‌سازیم (جاوااسکریپت خودش قیمت،
   موجودی و ترکیب‌های نامعتبر را مدیریت می‌کند). فقط شکلش را به
   منوهای کشویی طراحی نزدیک می‌کنیم. */
.dbin table.variations{width:100%;border-collapse:collapse;margin:0 0 16px;
  display:grid;gap:13px}
.dbin table.variations tbody,.dbin table.variations tr{display:contents}
.dbin table.variations th,.dbin table.variations td{display:block;padding:0;border:0;text-align:start}
.dbin table.variations th label{display:block;margin-bottom:8px;
  font-size:11px;font-weight:700;color:var(--tx2)}
.dbin table.variations select{width:100%;height:44px;padding:0 13px;border:0;border-radius:12px;
  background:var(--p2);color:var(--tx);font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;box-shadow:inset 0 0 0 1px var(--ln2);
  transition:background .18s,box-shadow .2s}
.dbin table.variations select:hover{background:var(--p3)}
.dbin table.variations select:focus{outline:none;background:var(--p3);
  box-shadow:inset 0 0 0 1px rgba(168,85,247,.6)}
.dbin .reset_variations{display:inline-block;margin-top:8px;font-size:11px;color:var(--mut)}
.dbin .reset_variations:hover{color:var(--ac3)}

/* قیمت */
.dbin .price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:2px 0 0;
  font-size:33px;font-weight:800;letter-spacing:-1.3px;line-height:1.2;color:var(--tx)}
.dbin .price del{font-size:13.5px;font-weight:600;color:var(--mut);letter-spacing:0}
.dbin .price ins{text-decoration:none}
.dbin .woocommerce-variation-price .price{font-size:28px}

/* ── ردیف تعداد + دکمهٔ خرید ──────────────────────────────────
   طراحی این دو را کنار هم دارد (.dcart با دو ستون). در ووکامرس
   جایشان به نوع محصول بستگی دارد:

     محصول ساده  → form.cart > .quantity + button
     محصول متغیر → form.cart > .single_variation_wrap
                     > .woocommerce-variation-add-to-cart
                       > .quantity + button

   قاعدهٔ قبلی فقط form.cart را می‌گرفت، پس روی محصول متغیر دکمه
   می‌افتاد زیر تعدادُ ردیف طراحی به هم می‌ریخت. */
.dbin form.cart:not(.variations_form),
.dbin .woocommerce-variation-add-to-cart{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:center;margin-top:18px}
.dbin form.variations_form{display:block;margin-top:0}
.dbin .single_variation_wrap{display:block}

.dbin .quantity{display:inline-flex;align-items:center;padding:4px;border-radius:13px;
  background:var(--p2);box-shadow:0 0 0 1px var(--hair)}
.dbin .quantity input{height:38px;border:0;background:none;color:var(--tx);
  font-family:inherit;font-size:14px;font-weight:800;text-align:center}
.dbin .quantity input::-webkit-outer-spin-button,
.dbin .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dbin .quantity input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* ووکامرس عدد تعداد را در input می‌دهد؛ طراحی <b> داشت.
   product-options.js دکمه‌های − و + را کنارش می‌گذارد و
   کلاس .dqty را روی همان ظرف می‌نشاند. */
.dbin .dqty input{width:34px;min-width:34px;padding:0}
.dbin .quantity:not(.dqty) input{width:56px}

.dbin .single_add_to_cart_button{height:46px;width:100%;padding:0 16px;
  border:0;border-radius:12px;font-family:inherit;font-size:13.5px;font-weight:700;
  color:#fff;cursor:pointer;
  background:linear-gradient(120deg,var(--ac),var(--ac2));
  box-shadow:0 10px 26px -12px rgba(139,92,246,.65);
  transition:box-shadow .22s,transform .22s var(--e)}
.dbin .single_add_to_cart_button:hover{transform:translateY(-1px);
  box-shadow:0 16px 34px -14px rgba(139,92,246,.8)}
.dbin .single_add_to_cart_button:disabled{background:var(--p3);color:var(--mut);
  box-shadow:inset 0 0 0 1px var(--ln2);cursor:not-allowed;transform:none}

@media (max-width:420px){
  .dbin form.cart:not(.variations_form),
  .dbin .woocommerce-variation-add-to-cart{grid-template-columns:1fr;gap:10px}
}

/* پیام‌های ووکامرس */
/* ── پیام‌های ووکامرس ─────────────────────────────────────────
   طراحی چنین چیزی ندارد، ولی «به سبد اضافه شد»، «حذف شد؛ بازگشت؟»
   و «آن دستگاه خارج شد» واقعاً لازم‌اند.

   کادری که سراسرش سبز باشد در صفحهٔ تیره زالووار است و همهٔ توجه
   را از خودِ صفحه می‌گیرد. پس: سطحِ هم‌رنگ کارت‌ها، یک نوار رنگی
   در لبه و یک نشانِ دایره‌ای — معنا را رنگ می‌رساند، نه مساحت.

   نشان به‌شکل data: داخل خودِ CSS است؛ نه فایلی برای بارگذاری،
   نه قالبی از ووکامرس که با هر به‌روزرسانی عوض شود.
   ───────────────────────────────────────────────────────────── */
/* فاصله روی خودِ پیام است، نه روی ظرفش.
   ووکامرس این ظرف را همه‌جا یک‌جور نمی‌گذارد — گاهی داخل
   ‎.woocommerce‎، گاهی بیرونش — و هر بار که به ظرف تکیه کردم،
   یک صفحه بی‌فاصله ماند. فاصله‌ای که روی خودِ پیام باشد، هرجا
   که پیام برود با خودش می‌برد. */
.woocommerce-notices-wrapper{display:grid;gap:0;margin:0}
.woocommerce-notices-wrapper:empty{display:none}

.woocommerce-message,.woocommerce-error,.woocommerce-info{
  position:relative;list-style:none;margin:0 0 22px;overflow:hidden;
  padding:14px 18px;padding-inline-start:54px;border-radius:15px;
  background:var(--p1);
  box-shadow:inset 0 0 0 1px var(--hair),0 14px 34px -26px #000;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;line-height:1.9;color:var(--tx);
  animation:jgnin .32s var(--e) both}
@keyframes jgnin{from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .woocommerce-message,.woocommerce-error,.woocommerce-info{animation:none}}

/* نوار لبه — تنها سطح رنگی پیام.
   دو بار با یک ‎::after‎ی مطلق ساختمش و هر بار از انحنای گوشه
   بیرون زد: عنصری که مطلق است، شعاع والدش را نمی‌شناسد و
   ‎overflow:hidden‎ هم روی گوشهٔ ۱۵ یک گُوِهٔ باریک باقی می‌گذارد.
   ‎border‎ این مشکل را ندارد؛ مرز واقعیِ جعبه است و انحنا را
   مو‌به‌مو دنبال می‌کند. */

/* نشان دایره‌ای */
.woocommerce-message::before,.woocommerce-error::before,.woocommerce-info::before{
  content:"";position:absolute;inset-inline-start:15px;top:50%;margin-top:-16px;
  width:32px;height:32px;border-radius:8px;
  background-repeat:no-repeat;background-position:center;background-size:15px}

.woocommerce-message{--bc:linear-gradient(180deg,#34D399,#10B981)}
.woocommerce-message::before{background-color:rgba(52,211,153,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.6 9.5 17 4.4 12'/%3E%3C/svg%3E")}

.woocommerce-error{--bc:linear-gradient(180deg,#F87171,#EF4444)}
.woocommerce-error::before{background-color:rgba(248,113,113,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F87171' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}

.woocommerce-info{--bc:linear-gradient(180deg,#A855F7,#7C3AED)}
.woocommerce-info::before{background-color:rgba(168,85,247,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C084FC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 11.2v5M12 8h.01'/%3E%3C/svg%3E")}

/* نوار لبه — همان ساختِ ‎.bnr‎ در پنل. */
.woocommerce-message::after,.woocommerce-error::after,.woocommerce-info::after{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--bc)}

.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{
  list-style:none;width:100%;min-width:0}

/*
 * حلقهٔ سفیدِ دور پیام. ووکامرس بعد از افزودن یا حذف از سبد،
 * ‎focus()‎ را روی خودِ پیام می‌زند تا صفحه‌خوان بخواندش. پیام
 * ‎tabindex="-1"‎ دارد و با صفحه‌کلید هیچ‌وقت به آن نمی‌رسی، پس
 * حلقهٔ تمرکزش هیچ کاری نمی‌کند جز اینکه یک قاب سفید دور کادر
 * بکشد — و با اولین کلیک غیب شود.
 *
 * حلقه فقط از همین ظرف برداشته می‌شود؛ لینک و دکمهٔ داخلش
 * حلقهٔ خودشان را دارند، چون آن‌ها واقعاً با کیبورد باز می‌شوند.
 */
.woocommerce-message:focus,.woocommerce-error:focus,.woocommerce-info:focus,
.woocommerce-notices-wrapper:focus,
.woocommerce-message:focus-visible,.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible{outline:none}

/* ظرفِ متن. همهٔ فضای خالی را می‌گیرد تا ضربدر ته کادر بماند. */
.jgnt{flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* «بازگشت» یک کار است، پس دکمه می‌ماند — ولی دکمهٔ این سایت. */
.woocommerce-message .button,.woocommerce-error .button,.woocommerce-info .button{
  order:2;margin-inline-start:auto;flex-shrink:0;
  display:inline-flex;align-items:center;height:32px;padding:0 14px;
  border:1px solid var(--ln2);border-radius:99px;background:var(--p3);
  font:inherit;font-size:11.5px;font-weight:700;color:var(--tx);
  text-decoration:none;cursor:pointer;
  transition:background .18s,border-color .2s,color .18s}
.woocommerce-message .button:hover,.woocommerce-error .button:hover,
.woocommerce-info .button:hover{background:rgba(139,92,246,.2);color:var(--ac3);
  border-color:rgba(168,85,247,.45)}

@media (max-width:560px){
  .woocommerce-message,.woocommerce-error,.woocommerce-info{
    padding:12px 14px;padding-inline-start:46px;font-size:12px}
  .woocommerce-message::before,.woocommerce-error::before,.woocommerce-info::before{
    inset-inline-start:11px;width:24px;height:24px;margin-top:-12px;background-size:13px}
  .woocommerce-message .button,.woocommerce-error .button,.woocommerce-info .button{
    width:100%;justify-content:center}
}

/* تب‌های محصول */
.wc-tabs{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0 0 18px;padding:0}
.wc-tabs li{list-style:none}
.wc-tabs li a{display:inline-flex;align-items:center;height:36px;padding:0 15px;
  border-radius:99px;background:var(--p1);border:1px solid var(--ln);
  font-size:12.5px;font-weight:700;color:var(--tx3);
  transition:background .18s,color .18s,border-color .2s}
.wc-tabs li a:hover{background:var(--p2);color:var(--tx)}
.wc-tabs li.active a{background:linear-gradient(120deg,var(--ac),var(--ac2));
  color:#fff;border-color:transparent}
.woocommerce-Tabs-panel h2{font-size:17px;font-weight:800;margin:0 0 12px}

/* ── سبد خرید و تسویه ────────────────────────────────────────
   جدول سبد ووکامرس در موبایل غیرقابل استفاده است. به ردیف‌های
   کارتی تبدیلش می‌کنیم، همان چیزی که در jupitgames-cart.html بود. */
.woocommerce-cart-form__contents{width:100%;border-collapse:collapse}
.woocommerce-cart-form__contents thead{display:none}
.woocommerce-cart-form__contents tr{display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px;margin-bottom:12px;border-radius:16px;
  background:var(--p1);border:1px solid var(--ln)}
.woocommerce-cart-form__contents td{padding:0;border:0}
.woocommerce-cart-form__contents .product-thumbnail img{width:88px;height:88px;
  border-radius:12px;object-fit:cover}
.woocommerce-cart-form__contents .product-name{grid-column:2}
.woocommerce-cart-form__contents .product-name a{font-size:13.5px;font-weight:700}
.woocommerce-cart-form__contents .variation{margin-top:6px;font-size:11px;color:var(--mut)}
.woocommerce-cart-form__contents .variation dt,
.woocommerce-cart-form__contents .variation dd{display:inline;margin:0}
.woocommerce-cart-form__contents .product-price{display:none}
.woocommerce-cart-form__contents .product-subtotal{grid-column:3;text-align:end;
  font-size:14px;font-weight:800;letter-spacing:-.4px}
.woocommerce-cart-form__contents .product-quantity{grid-column:2;margin-top:10px}
.woocommerce-cart-form__contents .product-remove{grid-column:3;grid-row:1;justify-self:end}
.woocommerce-cart-form__contents .product-remove a{width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;color:var(--mut);font-size:16px;text-decoration:none;
  transition:background .18s,color .18s}
.woocommerce-cart-form__contents .product-remove a:hover{background:rgba(248,113,113,.15);color:var(--dn)}
@media (max-width:520px){
  .woocommerce-cart-form__contents tr{grid-template-columns:64px minmax(0,1fr)}
  .woocommerce-cart-form__contents .product-thumbnail img{width:64px;height:64px}
  .woocommerce-cart-form__contents .product-subtotal{grid-column:2;text-align:start}
}

/* جمع کل */
.cart_totals,.woocommerce-checkout-review-order{padding:18px;border-radius:18px;
  background:var(--p1);border:1px solid var(--ln)}
.cart_totals h2,.woocommerce-checkout-review-order h3{font-size:15px;font-weight:800;margin:0 0 14px}
.cart_totals table,.woocommerce-checkout-review-order table{width:100%;border-collapse:collapse}
.cart_totals th,.cart_totals td,
.woocommerce-checkout-review-order th,.woocommerce-checkout-review-order td{
  padding:9px 0;border-bottom:1px solid var(--ln);font-size:12.5px;text-align:start}
.cart_totals th,.woocommerce-checkout-review-order th{color:var(--tx2);font-weight:600}
.cart_totals td,.woocommerce-checkout-review-order td{text-align:end;font-weight:700}
.cart_totals .order-total td,.woocommerce-checkout-review-order .order-total td{
  font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--ac3)}
.wc-proceed-to-checkout{margin-top:16px}
.checkout-button,.woocommerce-checkout .button[name="woocommerce_checkout_place_order"]{
  display:flex;align-items:center;justify-content:center;width:100%;height:48px;
  border:0;border-radius:13px;font-family:inherit;font-size:14px;font-weight:700;
  color:#fff;cursor:pointer;text-decoration:none;
  background:linear-gradient(120deg,var(--ac),var(--ac2));
  box-shadow:0 12px 28px -14px rgba(139,92,246,.75);
  transition:box-shadow .22s,transform .22s var(--e)}
.checkout-button:hover{transform:translateY(-1px);box-shadow:0 18px 36px -14px rgba(139,92,246,.95)}

/* فرم‌های تسویه و حساب کاربری */
.woocommerce form .form-row{display:grid;gap:8px;margin:0 0 14px}
.woocommerce form .form-row label{font-size:11.5px;font-weight:700;color:var(--tx2)}
.woocommerce form .form-row .required{color:#FF8A96;text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{width:100%;min-height:44px;padding:10px 13px;border:0;
  border-radius:12px;background:var(--p2);color:var(--tx);
  font-family:inherit;font-size:12.5px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--ln2);transition:background .18s,box-shadow .2s}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;background:var(--p3);
  box-shadow:inset 0 0 0 1px rgba(168,85,247,.6)}
.woocommerce form .form-row textarea{min-height:96px;line-height:1.9;resize:vertical}

/* درگاه‌های پرداخت */
.wc_payment_methods{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.wc_payment_methods li{list-style:none;padding:13px 15px;border-radius:14px;
  background:var(--p2);box-shadow:inset 0 0 0 1px var(--ln2);
  transition:box-shadow .2s,background .18s}
.wc_payment_methods li:hover{background:var(--p3)}
.wc_payment_methods li label{font-size:12.5px;font-weight:700;cursor:pointer}
.wc_payment_methods .payment_box{margin-top:9px;font-size:11.5px;line-height:1.95;color:var(--mut)}
.wc_payment_methods .payment_box p{margin:0}

/* حساب کاربری */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.woocommerce-MyAccount-navigation li a{display:block;padding:10px 12px;border-radius:11px;
  font-size:12.5px;color:var(--tx2);text-decoration:none;
  transition:background .18s,color .18s}
.woocommerce-MyAccount-navigation li a:hover{background:var(--p2);color:var(--tx)}
.woocommerce-MyAccount-navigation li.is-active a{background:rgba(139,92,246,.14);
  color:var(--ac3);font-weight:700}
.woocommerce-account .woocommerce{display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:24px;align-items:start}
@media (max-width:820px){.woocommerce-account .woocommerce{grid-template-columns:1fr}}

/* ── فهرست‌های انتخاب محصول متغیر ──────────────────────────────
   جدول .variations خود ووکامرس باید در DOM بماند (منطق قیمت و
   موجودی رویش سوار است) ولی دیده نشود؛ product-options.js روی آن
   لیست‌باکس طراحی را می‌سازد. display:none نمی‌شود چون بعضی
   مرورگرها روی select پنهان‌شده رویداد change را جور دیگری
   می‌فرستند — پس فقط از چشم پنهانش می‌کنیم. */
.jg-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ووکامرس قیمت واریِیشن انتخاب‌شده را داخل .woocommerce-variation
   می‌گذارد؛ همان جعبهٔ قیمت طراحی را می‌گیرد. */
.dbin .woocommerce-variation-price .price{display:flex;align-items:baseline;gap:8px;
  font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--ac3)}
.dbin .woocommerce-variation-availability{font-size:11.5px;color:var(--mut);margin-top:6px}
.dbin .single_variation_wrap{display:grid;gap:10px}

/* برچسب «شروع قیمت از» بالای قیمت محصول متغیر. */
.dprice .was .from{font-size:11px;font-weight:700;color:var(--mut)}

/* ── صفحه‌بندی ────────────────────────────────────────────────
   jg_pagination() همان چیدمان طراحی را می‌سازد: بی <ul>، با پیکان
   SVG و رقم فارسی. اینجا فقط ظاهرِ دکمه‌ها تعریف می‌شود، چون
   .pgn در CSS هر صفحه جداگانه آمده بود و در بعضی صفحه‌ها اصلاً
   نبود — همان‌جاها لینک‌ها زیر هم و بی‌قالب می‌افتادند. */
.pgn,.mzmore{display:flex;align-items:center;justify-content:center;
  gap:7px;flex-wrap:wrap}
.pgn .page-numbers,.mzmore .page-numbers{
  min-width:36px;height:36px;padding:0 11px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--p1);border:1px solid var(--ln);
  font-size:12.5px;font-weight:700;color:var(--tx2);text-decoration:none;
  transition:background .18s,color .18s,border-color .18s}
.pgn a.page-numbers:hover,.mzmore a.page-numbers:hover{
  background:var(--p2);color:var(--tx)}
.pgn .page-numbers.current,.mzmore .page-numbers.current{
  background:linear-gradient(120deg,var(--ac),var(--ac2));color:#fff;
  border-color:transparent}
.pgn .page-numbers.dots,.mzmore .page-numbers.dots{
  background:none;border-color:transparent;color:var(--mut);min-width:auto;padding:0 2px}
.pgn .page-numbers svg,.mzmore .page-numbers svg{width:14px;height:14px}
.pgn:empty,.mzmore:empty{display:none}

/* قیمت واریِیشن را product-options.js داخل جعبهٔ قیمت طراحی
   می‌نویسد؛ نسخهٔ خام ووکامرس نباید دوباره دیده شود. */
.dbin .woocommerce-variation-price,
.dbin .woocommerce-variation-description{display:none}

/* ─── نشان تعداد سبد وقتی سبد خالی است ───
   در نسخهٔ HTML، جاوااسکریپت خودش نشان را برمی‌داشت. اینجا تعداد از
   سرور می‌آید و برای سبد خالی رشتهٔ خالی است — ولی .ib .n قد و عرض
   ثابت دارد، پس یک دایرهٔ بنفشِ بی‌عدد روی آیکون سبد می‌ماند. */
.ib .n:empty{display:none}

/* امتیازِ صفر: همان ستارهٔ طراحی، ولی خاموش — تا معلوم باشد
   محصول هنوز رأی نگرفته، نه اینکه رأی بدی گرفته باشد. */
.dmeta .rt.zero{color:var(--mut)}
.dmeta .rt.zero svg{opacity:.5}

/* ── اعداد ستون فیلتر ─────────────────────────────────────────
   طراحی برای این‌ها --m را گذاشته بود: "JetBrains Mono". آن فونت
   نه در قالب هست نه در خودِ فایل طراحی @font-face دارد، پس مرورگر
   به مونوی سیستم (روی ویندوز: Courier) می‌افتاد و عددها وسط یک
   صفحهٔ تماماً فارسی، بیگانه می‌شدند.

   حالا عددها فارسی‌اند و با فونت خودِ سایت نوشته می‌شوند — همان
   چیزی که همه‌جای دیگر سایت می‌بینی. */
#fl .prr input,#fl .prt span{font-family:var(--f);letter-spacing:0}

/* برچسب انگلیسی هر گروه (Price، Region…) عمداً مونو می‌ماند؛
   آن‌جا همان چیزی است که طراحی می‌خواست. */

/* ── جعبهٔ قیمت محصول متغیر ──────────────────────────────────
   ویژگی hidden با قاعدهٔ [hidden]{display:none} مرورگر کار می‌کند و
   آن قاعده هیچ وزنی ندارد؛ هر کلاسی که display بدهد شکستش می‌دهد.
   .cut و .dnote2 هر دو display دارند، پس بدون این‌ها پنهان‌شدنی
   نبودند و روی محصول بدون تخفیف، درصدِ خالی می‌ماند.
   ───────────────────────────────────────────────────────────── */
.dprice .cut[hidden],
.dprice s[hidden],
.dprice .from[hidden],
.dnote2[hidden]{display:none}

/* «شروع قیمت از» روی محصول متغیرِ هنوز انتخاب‌نشده. */
.dprice .from{font-size:12px;font-weight:700;color:var(--tx3)}

/* ── پنل کاربری ──────────────────────────────────────────────
   در طراحی، آیتم‌های منوی کاربر <button> بودند و CSS با «.uli button»
   می‌گرفتشان. زیر ورد‌پرس <a> واقعی‌اند تا لینک باشند، پس همان قاعده
   باید روی <a> هم بنشیند.
   ───────────────────────────────────────────────────────────── */
.uli .uli-a{display:flex;align-items:center;gap:var(--s3);height:var(--h2);
  padding:0 var(--s3);border:0;border-radius:var(--r1);background:transparent;
  color:var(--tx2);font-size:var(--t3);text-decoration:none}
.uli .uli-a:hover{background:var(--surf);color:var(--tx)}
.uli .uli-a svg{width:18px;height:18px;flex:none}
/* برچسب «به‌زودی» باید ته ردیف بنشیند، نه بچسبد به متن. */
.uli .uli-a > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uli .uli-a .nbd{flex:0 0 auto}
.uli .uli-a.dgr{color:var(--dn)}

/* آیتم‌های نوار کناری هم از <button> به <a> تبدیل شده‌اند. */
.nav a.ni{text-decoration:none}

/* نشان «به‌زودی» کنار نمایی که افزونه‌اش هنوز نیامده. */
.nav .nbd.soon8{background:var(--surf2);color:var(--mut);font-weight:700;
  font-size:10px;padding:0 7px;border-radius:99px;line-height:18px;height:18px}

/*
 * کارت «به‌زودی» داخل خود نما.
 *
 * اول .cd نوشته شده بود؛ ولی .cd در طراحی پنل یعنی «با قلم
 * مونواسپیس» و متن فارسی داخلش کشیده و بدشکل می‌شد. همان درسی که
 * .hd در صفحهٔ ورود داد: نام کلاس‌ها بین طراحی‌ها تکرار می‌شوند.
 */
.soon9{display:grid;justify-items:center;gap:var(--s3);padding:var(--s6) var(--s5);
  text-align:center;border-radius:var(--r3);background:var(--p1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.soon9 i{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r2);
  background:var(--surf);color:var(--ac3)}
.soon9 i svg{width:24px;height:24px}
.soon9 b{font-size:var(--t5);font-weight:800}
.soon9 p{margin:0;max-width:44ch;color:var(--tx2);font-size:var(--t3);line-height:2}

/* میز کار سه کاشی دارد نه چهار؛ شبکهٔ چهارتایی ردیف ناقص می‌سازد. */
.vw .g4.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.vw .g4.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vw .g4.g3{grid-template-columns:minmax(0,1fr)}}

/* حالت خالی، وقتی هنوز سفارشی نیست. */
.empty9{display:grid;justify-items:center;gap:var(--s3);padding:var(--s5) var(--s4);
  text-align:center}
.empty9 p{margin:0;color:var(--tx2);font-size:var(--t3)}

/*
 * زیرآیتم‌های منو، ردیف‌های جستجو و اعلان‌ها هم در طراحی <button>
 * بودند و این‌جا <a> شده‌اند. فقط زیرخط باید برداشته شود؛ بقیهٔ
 * قاعده‌ها روی هر دو عنصر یکسان می‌نشینند.
 */
.nav a.si,.smenu a.sr,.nmenu a.nt,.ntl a.nti{text-decoration:none}

/*
 * وقتی جستجو یک گروه را کامل خالی می‌کند، گروه با hidden می‌رود.
 * ولی «.sgp + .sgp» همسایهٔ پنهان را هم می‌شمارد و گروه بعدی یک
 * خط جداکنندهٔ بی‌صاحب می‌گیرد.
 */
.smenu .sgp[hidden]{display:none}
.smenu .sgp[hidden] + .sgp{margin-top:0;padding-top:0;border-top:0}

/* ── پوستهٔ پنل باید تمام‌عرض بماند ────────────────────────────
   ووکامرس خروجی کدکوتاه را در <div class="woocommerce"> می‌پیچد و
   ورد‌پرس بسته به قالب برگه ظرف‌های دیگری هم اضافه می‌کند. ‎.ap‎ یک
   گرید تمام‌قد است (‎var(--sbw)‎ و ‎minmax(0,1fr)‎)؛ هر ظرفی که عرضش
   را محدود کند یا کوچک‌شونده‌اش کند، کل چیدمان را می‌شکند — نوار
   بالا جمع می‌شود و ستون اصلی به یک نوار باریک تبدیل.

   راه‌حل همان است که ‎.aupg‎ در صفحهٔ ورود گرفت: ظرف را از چیدمان
   حذف می‌کنیم، نه اینکه با ‎!important‎ با آن بجنگیم.
   ───────────────────────────────────────────────────────────── */
body.panelpage > .woocommerce,
body.panelpage .woocommerce:has(> .ap),
body.panelpage main.wrap,
body.panelpage .doc,
body.panelpage article.page{display:contents}

/* و خودِ پوسته هم صریح تمام‌عرض، حتی اگر ظرفی از قلم افتاده باشد. */
body.panelpage .ap{width:100%;max-width:none;float:none}
body.panelpage .mn{width:100%;min-width:0}
body.panelpage .tb,
body.panelpage .ct{width:100%;box-sizing:border-box}

/*
 * با display:contents، ظرف پیام‌های ووکامرس هم‌ردهٔ .ap می‌شود.
 * پیام «حساب به‌روزرسانی شد» باید دیده شود، پس بالای پوسته
 * می‌نشیند و وقتی خالی است هیچ جایی نمی‌گیرد.
 */
body.panelpage .woocommerce-notices-wrapper:not(:empty){
  padding:0;margin:0 0 var(--s4)}


/* ── سوییچ‌های واقعی در «تنظیمات و امنیت» ──────────────────────
   در طراحی این‌ها <div data-sw> بودند و panel.js فقط کلاس .on را
   عوض می‌کرد؛ یعنی با اولین رفرش همه‌چیز به حالت اول برمی‌گشت.
   حالا <label> با چک‌باکس واقعی داخلش‌اند و همان ظاهر را از
   ‎:has(:checked)‎ می‌گیرند — بدون جاوااسکریپت و بدون دست زدن به
   CSS استخراج‌شده.

   data-sw عمداً برداشته شده: با آن، کلیک روی برچسب دو بار
   می‌خورد — یک بار چک‌باکس و یک بار panel.js — و سوییچ سر جای
   اولش برمی‌گشت.
   ───────────────────────────────────────────────────────────── */
label.sw{cursor:pointer}
label.sw .swi{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
label.sw:has(.swi:checked) .kn{background:linear-gradient(120deg,var(--ac),var(--ac2));
  box-shadow:none}
label.sw:has(.swi:checked) .kn::after{background:#fff;transform:translateX(-18px)}
.swg > label.sw:has(.swi:checked) .kn::after{transform:translateX(-16px)}
/* مسیر صفحه‌کلید نباید گم شود: چک‌باکس نامرئی است، پس حلقهٔ فوکوس
   را روی خودِ سوییچ نشان می‌دهیم. */
label.sw:has(.swi:focus-visible){outline:2px solid var(--ac2);outline-offset:2px;
  border-radius:var(--r2)}

/* ─────────────────────────────────────────────────────────────
   کادر آپلودِ انجام‌شده

   طراحی برای «انجام شد» سبز گذاشته بود — همان سبزی که در بقیهٔ
   پنل معنی «موفق» می‌دهد. ولی این‌جا کارِ کاربر تمام نشده: فایل
   فقط انتخاب شده و هنوز نه فرستاده شده نه تأیید. سبز در این
   لحظه یعنی «تمام شد» و کاربر دکمهٔ ارسال را نمی‌زند.

   بنفشِ خودِ برند، همان چیزی را می‌گوید که هست: گرفته شد، منتظر
   کار بعدی.
   ───────────────────────────────────────────────────────────── */
.upl.done{background:rgba(139,92,246,.09);
  box-shadow:inset 0 0 0 1.5px rgba(168,85,247,.42)}
.upl.done i{background:rgba(139,92,246,.16);color:var(--ac2)}

/* حالت خالیِ زنگِ هدر — طراحی نداشتش چون همیشه دو اعلان نمونه داشت. */
.nd .ntempty,
.nmenu .ntempty{padding:var(--s6) var(--s4);text-align:center;
  font-size:var(--t2);color:var(--mut);line-height:1.9}

/* ── جستجو: همان اجزای طراحی، این بار پیوند ───────────────────
   در طراحی، زبانه‌ها و چیپ‌ها و مرتب‌سازی <button> بودند چون همه‌چیز
   با جاوااسکریپت در همان صفحه عوض می‌شد. زیر ورد‌پرس هرکدام یک
   نشانی واقعی دارند و باید <a> باشند: تا با کلیک وسط در زبانهٔ
   تازه باز شوند، در تاریخچهٔ مرورگر بمانند و موتور جستجو ببیندشان.

   استایلشان همان استایل دکمه است؛ فقط انتخابگر عوض می‌شود، چون
   search.css از روی HTML ساخته می‌شود و دستی ویرایش نمی‌شود.
   ───────────────────────────────────────────────────────────── */
.qtabs a{height:36px;padding:0 15px;border-radius:99px;display:inline-flex;
  align-items:center;gap:8px;background:var(--p1);border:1px solid var(--ln);
  font-size:12.5px;font-weight:700;color:var(--tx3);text-decoration:none;
  transition:background .18s,color .18s,border-color .2s}
.qtabs a:hover{background:var(--p2);color:var(--tx)}
.qtabs a.on{background:linear-gradient(120deg,var(--ac),var(--ac2));color:#fff;
  border-color:transparent}
.qtabs a i{font-style:normal;font-size:11px;font-weight:800;line-height:1;
  padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.09)}
.qtabs a.on i{background:rgba(255,255,255,.22)}

.sbar a.sc{display:inline-flex;align-items:center;text-decoration:none}

.qhot .cz2 a{height:34px;padding:0 14px;border-radius:99px;display:inline-flex;
  align-items:center;background:var(--p1);border:1px solid var(--ln);
  font-size:12px;font-weight:600;color:var(--tx3);text-decoration:none;
  transition:background .18s,color .18s,border-color .2s}
.qhot .cz2 a:hover{background:rgba(139,92,246,.14);color:var(--ac3);
  border-color:rgba(168,85,247,.35)}

.qdym a{font-weight:800;color:var(--ac3);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(168,85,247,.45);
  transition:text-decoration-color .18s}
.qdym a:hover{text-decoration-color:var(--ac2)}

/* تأخیر پلکانیِ ورود کارت‌ها؛ در طراحی جاوااسکریپت ‎--i‎ را می‌گذاشت. */
.sgrid > *:nth-child(1){--i:0}   .sgrid > *:nth-child(2){--i:1}
.sgrid > *:nth-child(3){--i:2}   .sgrid > *:nth-child(4){--i:3}
.sgrid > *:nth-child(5){--i:4}   .sgrid > *:nth-child(6){--i:5}
.sgrid > *:nth-child(7){--i:6}   .sgrid > *:nth-child(8){--i:7}
.sgrid > *:nth-child(9){--i:8}   .sgrid > *:nth-child(10){--i:9}
.sgrid > *:nth-child(n+11){--i:10}

/* عنوانِ نتیجه، وقتی واژهٔ جستجوشده داخلش برجسته شده است. */
.qpost h3 mark{background:rgba(168,85,247,.24);color:var(--ac3);
  border-radius:4px;padding:0 3px}

/* ── نتیجهٔ جستجو: برگه‌های سایت ────────────────────────────────
   هر برگه یک کادر مستقل بود و پنج نتیجه یعنی پنج مستطیل پشت هم
   با پنج قاب — صفحه می‌شد ردیفی از خط. حالا یک کارت با خط‌های
   مویی داخلش. مقاله‌ها بالاتر کارت خودشان را دارند.
   ───────────────────────────────────────────────────────────── */
.qsec .qposts{gap:0;border-radius:15px;overflow:hidden;
  background:var(--p1);box-shadow:inset 0 0 0 1px var(--ln)}
.qsec .qposts .qpost{background:none;border:0;border-radius:0;transform:none;
  box-shadow:inset 0 -1px 0 var(--ln)}
.qsec .qposts .qpost:last-child{box-shadow:none}
.qsec .qposts .qpost:hover{background:var(--p2);transform:none;border-color:transparent}
/* وقتی بالایش شبکهٔ مقاله‌هاست، فاصله می‌خواهد. */
.qsec .qposts.is-under{margin-top:14px}

/* ── پیام کوتاه ─────────────────────────────────────────────────
   ساخته‌شدهٔ app.js. پنل ‎.tst‎ خودش را دارد؛ این برای بقیهٔ سایت
   است — سبد، صفحهٔ محصول، تسویه. */
.jgt{position:fixed;bottom:26px;left:50%;z-index:900;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;
  background:#15111F;color:#fff;font-size:13px;font-weight:600;line-height:1.7;
  box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.09);
  transition:opacity .22s ease,transform .22s ease}
.jgt.on{opacity:1;transform:translate(-50%,0)}
.jgt.bad{box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,90,90,.42)}

/* سبدی که در حال به‌روزرسانی است، نه بپرد نه دوباره کلیک بخورد */
#kGrid.is-busy{opacity:.55;pointer-events:none;transition:opacity .16s ease}

/* دکمهٔ «افزودن به سبد» وقتی کارش را کرد */
.btn.jg-added,.dbtn.jg-added{background:#1F7A4D;border-color:#1F7A4D;color:#fff}
.btn.jg-added:hover,.dbtn.jg-added:hover{background:#1F7A4D}
.btn.jg-busy,.dbtn.jg-busy{opacity:.6;pointer-events:none}

/* سبد در هدر حالا لینک است، نه دکمه */
a.ib{text-decoration:none}

/* ── صفحهٔ «سفارشت ثبت شد» ───────────────────────────────────────
   receipt.css فقط بلیت را می‌سازد؛ چیدمانِ دور آن در طراحی از
   ‎.st‎ و ‎.pg‎ می‌آمد که پوستهٔ صفحهٔ تک‌سندی بودند و این‌جا
   هدر خودِ سایت جایشان است. */
.jgrcp-page{margin-top:22px}
.jgrcp-page .rvar{display:grid;justify-items:center;gap:14px;padding-bottom:34px}
.jgrcp-page .rprint,.jgrcp-page .ract{width:min(100%,452px)}
.jgrcp-page .ract{display:grid;gap:10px}
.jgrcp-page .ract .r2{display:flex;gap:10px}
.jgrcp-page .ract .r2 .btn{flex:1 1 0;min-width:0}
/* چاپِ صفحهٔ «سفارشت ثبت شد» — همان روشِ پنل. */
@media print{
  /* بی‌حاشیه، تا صفحه تماماً رسید شود و کاغذ سفیدِ دورش نماند. */
  @page{size:A4;margin:0}

  /* مرورگر پیش‌فرض زمینه‌ها را در چاپ حذف می‌کند و تیکِ
     «Background graphics» هم پیش‌فرض خاموش است. ‎print-color-adjust‎
     تنها راهی است که بی‌آنکه کاربر چیزی را تیک بزند، رنگ چاپ شود. */
  html,body{background:#0B0913!important;margin:0!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}

  /* پنهان‌کردن با ‎visibility‎ نه ‎display‎: با ‎display:none‎ باید هر
     لایهٔ ظرف را جدا می‌شمردم و هر ظرفی که فراموش می‌شد یک تکهٔ
     ناخواسته روی کاغذ می‌ماند. */
  body *{visibility:hidden!important;box-shadow:none!important;
    text-shadow:none!important;animation:none!important}

  .jgrcp,.jgrcp *{visibility:visible!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}

  .jgrcp .ract,.jgrcp .rgo,.jgrcp .cp,.jgrcp .cp3{display:none!important}

  /* یک برگهٔ کامل، وسط‌چین، با همان زمینهٔ سایت پشتش */
  .jgrcp{position:absolute!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;min-height:297mm!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    background:#0B0913!important;padding:12mm!important}

  .jgrcp .rprint{width:100%!important;max-width:150mm!important;
    margin:0!important;padding-top:0!important}
  .jgrcp .rprint::before,.jgrcp .rprint::after{display:none!important}

  .jgrcp .rcp{border-radius:16px!important;animation:none!important}
  .jgrcp .rcp > *{animation:none!important}
}


/* ── پردهٔ «در حال به‌روزرسانی» ووکامرس ──────────────────────────
   ووکامرس موقع محاسبهٔ دوبارهٔ تسویه یک ‎.blockUI.blockOverlay‎ روی
   جعبه می‌اندازد. رنگ پیش‌فرضش سفیدِ نیمه‌شفاف است — روی طراحی
   تیره یک ورقهٔ سفید وسط صفحه می‌شد و کاربر فکر می‌کرد صفحه خراب
   شده. همان پرده می‌ماند، فقط تیره. */
.blockUI.blockOverlay{background:var(--bg)!important;opacity:.62!important;
  backdrop-filter:blur(2px);border-radius:inherit}
.blockUI.blockOverlay::before{content:"";position:absolute;top:50%;left:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:99px;
  border:2px solid rgba(255,255,255,.16);border-top-color:var(--ac);
  animation:jgspin .7s linear infinite}
@keyframes jgspin{to{transform:rotate(360deg)}}
.woocommerce .blockUI.blockOverlay{cursor:progress}

/* ── کشوهای هدر، وقتی کاری در جریان است ─────────────────────────
   حذف از سبد کوچک یا «خوانده شد» گرهٔ زیرِ موس را عوض می‌کند و
   هاور از دست می‌رود؛ کشو وسط کار می‌پرد. تا وقتی درخواست تمام
   نشده بازش نگه می‌داریم. */
.cartw.is-open .cd,.ntw.is-open .nd{opacity:1;visibility:visible;transform:none}

/* ── دکمهٔ افزودن به سبد: چرخش، بعد سبز ──────────────────────────
   طراحی (jupitgames-product.html) سه حالت داشت: عادی، ‎.ld‎ با
   یک حلقهٔ چرخان به‌جای متن، و ‎.done‎ سبز با متنِ «به سبد اضافه
   شد». دکمهٔ ووکامرس این کلاس‌ها را ندارد، پس همان‌ها را این‌جا
   روی ‎.single_add_to_cart_button‎ و نوار موبایل می‌بندیم. */
.jg-btn .jg-sp{display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:jgspin .7s linear infinite}
.jg-btn.ld{pointer-events:none}
.jg-btn.ld .jg-lb,.jg-btn.ld > svg{display:none}
.jg-btn.ld .jg-sp{display:inline-block}
.jg-btn.done{background:linear-gradient(120deg,#10B981,#34D399)!important;
  box-shadow:0 10px 26px -12px rgba(16,185,129,.6)!important}
.jg-btn.done:hover{transform:none}

/* دکمه باید بتواند آیکون و متن را کنار هم نگه دارد */
.dbin .single_add_to_cart_button.jg-btn,
#dBarAdd.jg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}

/* ضربدرِ بستن روی پیام‌های ووکامرس — live.js می‌سازدش */
/* ضربدر آخرین فرزندِ پیام است و کنارش ‎.jgnt‎ همهٔ فضای خالی را
   خورده، پس بی‌هیچ ‎auto‎ی دیگری ته کادر می‌ایستد. */
.jgx{margin-inline-start:10px;flex-shrink:0;width:30px;height:30px;border:0;
  border-radius:9px;background:transparent;color:var(--mut);cursor:pointer;
  display:grid;place-items:center;transition:background .16s,color .16s}
.jgx svg{width:14px;height:14px}
.jgx:hover{background:var(--p3);color:var(--tx)}

/* فهرست داخل توضیحات محصول. base.css نشانِ فهرست‌ها را برمی‌دارد،
   ولی این‌جا متنِ نوشته‌شده است و «مراحل فعال‌سازی» بی‌نشان به یک
   پاراگرافِ شکسته تبدیل می‌شود. */
.dbody ul,.dbody ol{margin-top:12px;padding-inline-start:20px;max-width:78ch;
  font-size:13.5px;color:var(--tx2);line-height:2.2}
.dbody ul{list-style:disc}.dbody ol{list-style:decimal}
.dbody li::marker{color:var(--ac2)}

/* جدول متغیرهای ووکامرس روی گوشی.

   ‎width:100%‎ روی جدول کفِ عرض را می‌گذارد، نه سقف را. گزینه‌ای
   با متن بلند — «مدت‌زمان اشتراک: یک‌ساله (تحویل آنی)» — عرضِ
   ذاتیِ ‎select‎ را بالا می‌برد، جدول همان‌قدر پهن می‌شود و صفحه
   افقی می‌لغزد. اندازه‌گیری روی ۳۹۰ پیکسل: جدول ۴۸۶ پیکسل.

   ‎min-width:0‎ اجازه می‌دهد عرضِ ذاتی نادیده گرفته شود؛ بی آن،
   ‎max-width‎ هم کاری نمی‌کند. */
/* جعبهٔ جدول باید بلوک شود، نه جدول.

   ‎table-layout:fixed‎ این‌جا بی‌اثر است، چون سلول‌ها بالاتر
   ‎display:block‎ شده‌اند و الگوریتم جدول اصلاً اجرا نمی‌شود. تا
   وقتی عنصر ‎table‎ بماند، عرضش را از بیشینهٔ محتوا می‌گیرد و هیچ
   ‎max-width‎ ای جلویش را نمی‌گیرد. بلوک که شد، مثل هر جعبهٔ دیگری
   به عرضِ پدرش محدود می‌شود. */
.dbin table.variations{display:block;width:100%;max-width:100%}
.dbin table.variations th,
.dbin table.variations td{min-width:0;max-width:100%}
.dbin table.variations select{max-width:100%;min-width:0;
  text-overflow:ellipsis}
.dbin table.variations th label{overflow-wrap:anywhere}