/* ==========================================================================
   KDD UI FIX — v20260902
   1) header user dropdown (was completely unstyled)
   2) product detail desktop layout
   3) cart desktop layout
   4) checkout order (summary -> install -> terms -> gateway -> pay)
   Load this LAST, after kdd-product-fix.css
   ========================================================================== */

/* ---------- 1. HEADER : USER DROPDOWN ---------- */
.public-user{
  position:absolute!important; left:0!important; right:auto!important;
  display:flex!important; align-items:center!important; gap:8px!important;
  z-index:60!important;
}
.public-user .language-button{display:none!important}

.user-dropdown{position:relative!important; display:inline-block!important}

.user-trigger{
  display:inline-flex!important; align-items:center!important; gap:7px!important;
  max-width:190px!important; height:36px!important; padding:0 13px!important;
  border:1px solid rgba(0,174,239,.42)!important; border-radius:9px!important;
  background:rgba(0,174,239,.07)!important; color:#dff4ff!important;
  font:700 11px/1 Vazirmatn,Tahoma,Arial,sans-serif!important;
  white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
  cursor:pointer!important; transition:.18s!important;
}
.user-trigger:hover{border-color:#72d9ff!important;background:rgba(0,174,239,.14)!important}
.user-trigger span{
  flex:0 0 auto!important; font-size:13px!important; line-height:1!important;
  color:#72d9ff!important; transition:transform .2s!important;
}
.user-dropdown.open .user-trigger span{transform:rotate(180deg)!important}

.user-menu{
  position:absolute!important; z-index:200!important;
  top:calc(100% + 8px)!important; left:0!important; right:auto!important;
  display:none!important; width:212px!important; padding:7px!important;
  border:1px solid rgba(186,222,242,.20)!important; border-radius:12px!important;
  background:rgba(6,13,21,.99)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.62)!important;
  text-align:right!important;
}
.user-dropdown.open .user-menu{display:block!important}
.user-menu a{
  display:block!important; padding:11px 13px!important; border-radius:8px!important;
  border-bottom:1px solid rgba(186,222,242,.09)!important;
  color:#c9dbe6!important; font-size:11.5px!important; white-space:nowrap!important;
  transition:.15s!important;
}
.user-menu a:last-child{border-bottom:0!important}
.user-menu a:hover{background:rgba(0,174,239,.11)!important;color:#72d9ff!important}
.user-menu a.is-logout{color:#ff9a9a!important;margin-top:3px!important;border-top:1px solid rgba(186,222,242,.12)!important}
.user-menu a.is-logout:hover{background:rgba(255,90,90,.11)!important;color:#ffbcbc!important}
.user-menu .menu-count{
  display:inline-grid!important; place-items:center!important;
  min-width:18px!important; height:18px!important; margin-right:6px!important;
  padding:0 5px!important; border-radius:9px!important;
  color:#00131c!important; background:#72d9ff!important;
  font-size:9px!important; font-weight:800!important;
}
@media(max-width:760px){
  .user-trigger{max-width:132px!important;height:33px!important;padding:0 10px!important;font-size:10px!important}
  .user-menu{width:196px!important}
}

/* ---------- 2. PRODUCT DETAIL : DESKTOP ---------- */
@media(min-width:761px){
  .detail-wrap{width:min(1180px,calc(100% - 40px))!important;padding:70px 0 96px!important}

  /* image column stretches to match text column instead of a hard 620px */

  .product-specs{margin-top:auto!important;padding-top:22px!important}
  .product-specs .spec-table{width:100%!important;border-collapse:collapse!important}
  .product-purchase-bar{
    display:flex!important; align-items:center!important; gap:14px!important;
    margin-top:22px!important; padding-top:20px!important;
    border-top:1px solid rgba(186,222,242,.15)!important;
  }
  .product-purchase-bar .price-box{flex:1 1 auto!important;margin:0!important;min-width:0!important}
  .product-purchase-bar .primary{flex:0 0 auto!important;white-space:nowrap!important;padding:13px 26px!important}
}
/* narrow desktop / tablet */
@media(min-width:761px) and (max-width:1080px){

  .product-purchase-bar{flex-direction:column!important;align-items:stretch!important}
  .product-purchase-bar .primary{width:100%!important;text-align:center!important;justify-content:center!important}
}

/* ---------- 3. CART : DESKTOP ---------- */
@media(min-width:901px){
  .cart-wrap{width:min(1180px,calc(100% - 40px))!important;margin:auto!important}
  .cart-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 340px!important;
    gap:20px!important; align-items:start!important;
  }
  .cart-card{min-width:0!important;overflow:hidden!important;border-radius:14px!important}
  .cart-row{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr) 118px 130px 34px!important;
    gap:16px!important; align-items:center!important; padding:18px 20px!important;
  }
  .cart-item{min-width:0!important}
  .cart-item h3{margin:0 0 4px!important;font-size:14px!important;line-height:1.6!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .cart-item span{font-size:11px!important;color:#91a6b5!important}
  .cart-price{text-align:left!important;font-size:13px!important;font-weight:700!important;
    color:#72d9ff!important;white-space:nowrap!important}
  .qty{justify-content:center!important}
  .remove{justify-self:center!important}
  .cart-actions{
    display:flex!important; justify-content:space-between!important;
    gap:12px!important; padding:18px 20px!important;
    border-top:1px solid rgba(186,222,242,.12)!important;
  }
  .summary-card{position:sticky!important;top:100px!important;border-radius:14px!important;padding:24px!important}
}
@media(min-width:901px) and (max-width:1120px){
  .cart-layout{grid-template-columns:minmax(0,1fr) 300px!important}
  .cart-row{grid-template-columns:64px minmax(0,1fr) 108px 112px 30px!important;gap:12px!important}
}

/* ---------- 4. CHECKOUT : ORDER + DESKTOP ---------- */
.checkout-wrap{width:min(1180px,calc(100% - 40px))!important;margin:auto!important}
@media(min-width:901px){
  .checkout-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 360px!important;
    gap:20px!important; align-items:start!important;
  }
  .checkout-card{min-width:0!important;border-radius:14px!important;padding:28px!important}
  .checkout-side{position:sticky!important;top:100px!important;display:grid!important;gap:14px!important}
}
@media(max-width:900px){
  .checkout-layout{display:flex!important;flex-direction:column!important;gap:14px!important}
  .checkout-side{display:grid!important;gap:14px!important}
}

/* summary card inside checkout */
.summary-card .summary-line{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:12px!important;padding:9px 0!important;color:#a9bdcb!important;font-size:11.5px!important;
  border-bottom:1px dashed rgba(186,222,242,.10)!important;
}
.summary-card .summary-line:last-of-type{border-bottom:0!important}
.summary-card .summary-line b{color:#dff0f8!important;font-size:12.5px!important;white-space:nowrap!important}
.summary-card .summary-line.total{
  margin-top:8px!important;padding-top:14px!important;
  border-top:1px solid rgba(0,174,239,.30)!important;border-bottom:0!important;
}
.summary-card .summary-line.total span{color:#eef8fc!important;font-size:13px!important;font-weight:700!important}
.summary-card .summary-line.total b{color:#72d9ff!important;font-size:16px!important}

/* option blocks: install / terms / gateway */
.opt-block{
  display:grid!important;gap:10px!important;padding:18px!important;
  border:1px solid rgba(186,222,242,.15)!important;border-radius:14px!important;
  background:linear-gradient(145deg,#102130,#070c12)!important;
}
.opt-block>h4{
  margin:0 0 2px!important;color:#eef8fc!important;
  font-size:12.5px!important;font-weight:700!important;
}
.opt-row{
  display:flex!important;align-items:flex-start!important;gap:10px!important;
  padding:12px 13px!important;border:1px solid rgba(186,222,242,.14)!important;
  border-radius:10px!important;background:rgba(7,17,28,.55)!important;
  color:#c2d5e1!important;font-size:11.5px!important;line-height:1.9!important;
  cursor:pointer!important;transition:.18s!important;
}
.opt-row:hover{border-color:rgba(0,174,239,.42)!important;background:rgba(0,174,239,.06)!important}
.opt-row input{
  flex:0 0 auto!important;width:18px!important;height:18px!important;
  margin-top:2px!important;accent-color:#00aeef!important;cursor:pointer!important;
}
.opt-row.is-on{border-color:#00aeef!important;background:rgba(0,174,239,.11)!important}
.opt-row .gw-logo{
  flex:0 0 auto!important;width:34px!important;height:34px!important;
  display:grid!important;place-items:center!important;border-radius:8px!important;
  background:rgba(0,174,239,.13)!important;border:1px solid rgba(0,174,239,.32)!important;
  color:#72d9ff!important;font-size:9px!important;font-weight:800!important;letter-spacing:.5px!important;
}
.opt-row .gw-text{min-width:0!important}
.opt-row .gw-text b{display:block!important;color:#eef8fc!important;font-size:12px!important}
.opt-row .gw-text small{color:#8ea3b3!important;font-size:10px!important}

/* pay button + disabled state */
.pay-button{
  width:100%!important;margin-top:4px!important;padding:15px 20px!important;
  border:0!important;border-radius:11px!important;
  color:#00131c!important;background:linear-gradient(135deg,#00aeef,#63d5ff)!important;
  font:800 13.5px/1 Vazirmatn,Tahoma,Arial,sans-serif!important;
  cursor:pointer!important;transition:.2s!important;
}
.pay-button:hover:not(:disabled){transform:translateY(-2px)!important;box-shadow:0 14px 30px -14px rgba(0,174,239,.75)!important}
.pay-button:disabled{
  opacity:.42!important;cursor:not-allowed!important;transform:none!important;
  background:#1b2a38!important;color:#7f95a5!important;box-shadow:none!important;
}
.pay-hint{
  margin:0!important;color:#7f95a5!important;font-size:10px!important;
  line-height:1.9!important;text-align:center!important;
}
.pay-hint.is-error{color:#ffb0b0!important}

/* ---------- FIX A : missing button classes ---------- */
.button{
  display:inline-flex!important; min-height:45px!important;
  align-items:center!important; justify-content:center!important;
  gap:7px!important; padding:10px 20px!important;
  border:1px solid transparent!important; border-radius:8px!important;
  font:700 12px/1 Vazirmatn,Tahoma,Arial,sans-serif!important;
  text-align:center!important; cursor:pointer!important;
  transition:.2s!important; white-space:nowrap!important;
}
.button.primary,.button.primary:visited{
  color:#00121a!important; background:#00aeef!important; border-color:#00aeef!important;
}
.button.primary:hover{background:#63d5ff!important;border-color:#63d5ff!important}
.button.outline,.button.outline:visited{
  color:#dff4ff!important; background:rgba(4,12,18,.30)!important;
  border-color:rgba(0,174,239,.45)!important;
}
.button.outline:hover{border-color:#72d9ff!important;background:rgba(0,174,239,.10)!important}

/* ---------- FIX B : tablet / small-desktop band 761–900px ---------- */
@media(min-width:761px) and (max-width:900px){
  .cart-layout,.checkout-layout{
    display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:16px!important;
  }
  .summary-card,.checkout-side{position:static!important;width:100%!important}
  .checkout-side{display:grid!important;gap:14px!important}
  .cart-row{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) 104px 118px 30px!important;
    gap:12px!important; align-items:center!important; padding:16px!important;
  }
  .cart-actions{display:flex!important;flex-direction:row!important;gap:12px!important}
  .cart-actions>*{width:auto!important;flex:1 1 0!important}
}

/* ---------- FIX C : cart action bar on real desktop ---------- */
@media(min-width:901px){
  .cart-actions{
    display:flex!important; flex-direction:row!important;
    justify-content:space-between!important; align-items:center!important;
    gap:14px!important; padding:18px 20px!important;
  }
  .cart-actions>*{width:auto!important;flex:0 0 auto!important;min-width:170px!important}
}

/* ---------- product detail: force equal columns on desktop ---------- */

/* spec table must never overflow its column */
.spec-table{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important}
.spec-table td,.spec-table th{
  word-break:break-word!important; overflow-wrap:anywhere!important; vertical-align:middle!important;
}
.spec-table td:last-child,.spec-table th:last-child{text-align:left!important;direction:ltr!important}
.spec-table td:first-child,.spec-table th:first-child{width:46%!important;text-align:right!important}

/* price box shouldn't squash its number */
.price-box{flex-wrap:nowrap!important;gap:12px!important}
.price-box strong{white-space:nowrap!important;direction:ltr!important;unicode-bidi:embed!important}

/* cart numbers stay LTR so 275,000,000 never reverses */
.cart-price,.summary-line b,.catalog-price{direction:ltr!important;unicode-bidi:embed!important;text-align:left!important}
.summary-line span{text-align:right!important}

/* neutralise every hard height on the product image, at every width */

/* cart + checkout: single band from 761 up, no 901 gap */
@media(min-width:761px){
  html body .cart-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 330px!important;
    gap:20px!important; align-items:start!important;
  }
  html body .checkout-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 350px!important;
    gap:20px!important; align-items:start!important;
  }
  html body .cart-card,html body .checkout-card{min-width:0!important;overflow:hidden!important}
  html body .summary-card,html body .checkout-side{position:sticky!important;top:96px!important}
  html body .checkout-side{display:grid!important;gap:14px!important}

  html body .cart-row{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr) 112px 124px 32px!important;
    gap:14px!important; align-items:center!important; padding:16px 18px!important;
  }
  html body .cart-actions{
    display:flex!important; flex-direction:row!important;
    justify-content:space-between!important; align-items:center!important;
    gap:14px!important; padding:18px 20px!important;
  }
  html body .cart-actions>*{width:auto!important;flex:0 0 auto!important;min-width:165px!important}
}

/* narrow desktop 761-1000: give the side column less room */
@media(min-width:761px) and (max-width:1000px){
  html body .cart-layout{grid-template-columns:minmax(0,1fr) 280px!important;gap:16px!important}
  html body .checkout-layout{grid-template-columns:minmax(0,1fr) 300px!important;gap:16px!important}
  html body .cart-row{grid-template-columns:60px minmax(0,1fr) 100px 108px 28px!important;gap:10px!important}

  html body .cart-actions>*{min-width:0!important;flex:1 1 0!important}
}

/* text column paints above everything and owns its own background */

/* image column is a normal, clipped, self-contained block */

/* plain in-flow image, no absolute, cannot escape the column */

/* the card itself must clip anything that tries to overflow */

/* mobile: image sits on top, fixed sensible height, still clipped */



/* ==========================================================================
   v5 — 20260903c   PRODUCT IMAGE = FIXED SQUARE, RIGHT SIDE
   Requirement (confirmed with user):
     - image stays on the RIGHT
     - fixed SQUARE frame with definite dimensions
     - fills the frame completely (cover), crop allowed
     - must work for ANY image later uploaded from the admin panel
   Previous versions wrongly tried to stretch the image to match the text
   column height. That is abandoned. The frame is now a fixed square and
   the text column is independent of it.
   ========================================================================== */

/* ---- card: text right-to-left order preserved, image column square ---- */
@media(min-width:761px){
  html body .detail-wrap .detail-card{
    display:grid!important;
    /* text column flexible, image column a fixed square */
    grid-template-columns:420px minmax(0,1fr)!important;
    align-items:start!important;
    gap:0!important;
    overflow:hidden!important;
    border-radius:16px!important;
    position:relative!important;
  }
  /* image is the 2nd column = right side in RTL source order */
  html body .detail-wrap .detail-card .detail-image{
    grid-column:1!important;
    width:420px!important;
    height:420px!important;      /* SQUARE */
    min-height:420px!important;
    max-height:420px!important;
    align-self:start!important;
    margin:28px 28px 28px 0!important; /* right edge */
    padding:0!important;
    position:relative!important;
    overflow:hidden!important;
    border-radius:14px!important;
    border:1px solid rgba(186,222,242,.16)!important;
    background:#0a121b!important;
  }
  html body .detail-wrap .detail-card .detail-copy{
    grid-column:2!important;
    display:flex!important; flex-direction:column!important;
    min-width:0!important;
    padding:34px 30px 34px 34px!important;
    position:relative!important; z-index:2!important;
  }
}

/* narrow desktop: smaller square, still square */
@media(min-width:761px) and (max-width:1040px){
  html body .detail-wrap .detail-card{grid-template-columns:330px minmax(0,1fr)!important}
  html body .detail-wrap .detail-card .detail-image{
    width:330px!important;height:330px!important;
    min-height:330px!important;max-height:330px!important;
    margin:22px 22px 22px 0!important;
  }
  html body .detail-wrap .detail-card .detail-copy{padding:26px 22px!important}
}

/* mobile: square, centred, image first */
@media(max-width:760px){
  html body .detail-wrap .detail-card{display:flex!important;flex-direction:column!important}
  html body .detail-wrap .detail-card .detail-image{
    order:-1!important;
    width:min(300px,calc(100% - 32px))!important;
    height:min(300px,calc(100vw - 32px))!important;
    min-height:0!important;max-height:none!important;
    aspect-ratio:1/1!important;
    margin:16px auto!important;
    border-radius:14px!important; overflow:hidden!important;
    border:1px solid rgba(186,222,242,.16)!important;
  }
}

/* ---- the image itself: fill the square, crop, never escape ---- */
html body .detail-wrap .detail-card .detail-image img{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important; max-width:100%!important;
  min-height:0!important; max-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  inset:auto!important;top:auto!important;left:auto!important;
  right:auto!important;bottom:auto!important;
  transform:none!important; margin:0!important; padding:0!important;
  border-radius:0!important;
}


/* ---- v5.1: box-sizing + margin-free square (fixes 22px column overlap) ---- */
html body .detail-wrap .detail-card,
html body .detail-wrap .detail-card .detail-image,
html body .detail-wrap .detail-card .detail-copy,
html body .detail-wrap .detail-card .detail-image img{
  box-sizing:border-box!important;
}
@media(min-width:761px){
  /* the COLUMN carries the padding; the image fills it with no margin */
  html body .detail-wrap .detail-card .detail-image{
    width:100%!important;
    height:auto!important;
    min-height:0!important; max-height:none!important;
    aspect-ratio:1/1!important;      /* guarantees a perfect square */
    margin:0!important;
    padding:0!important;
  }
  /* padding moves onto the grid track via the card */
  html body .detail-wrap .detail-card{
    padding:26px!important;
    gap:26px!important;
    grid-template-columns:380px minmax(0,1fr)!important;
    align-items:start!important;
  }
  html body .detail-wrap .detail-card .detail-copy{
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media(min-width:761px) and (max-width:1040px){
  html body .detail-wrap .detail-card{
    grid-template-columns:300px minmax(0,1fr)!important;
    padding:20px!important; gap:20px!important;
  }
}
@media(max-width:760px){
  html body .detail-wrap .detail-card{padding:16px!important;gap:16px!important}
  html body .detail-wrap .detail-card .detail-image{
    width:100%!important;height:auto!important;aspect-ratio:1/1!important;margin:0!important;
  }
  html body .detail-wrap .detail-card .detail-copy{padding:0!important}
}

/* ---- v5.2: keep the image column visually anchored, tidy the specs ---- */
@media(min-width:761px){
  /* image sticks near the top while the long spec table scrolls past it */
  html body .detail-wrap .detail-card .detail-image{
    position:sticky!important;
    top:96px!important;
  }
  /* spec table breathes a little less so the card is not so tall */
  html body .detail-copy .spec-table td,
  html body .detail-copy .spec-table th{
    padding:9px 12px!important;
    font-size:12px!important;
    line-height:1.7!important;
  }
  html body .detail-copy .product-specs{margin-top:18px!important}
  html body .detail-copy .product-specs h2{margin:0 0 12px!important;font-size:15px!important}
  html body .detail-copy h1{margin:10px 0 12px!important}
}

/* ==========================================================================
   v6 — CONVERSION REDESIGN (product -> cart -> checkout)
   Principles applied:
     - one primary action visible per screen, never competing
     - specs collapsed: buyer scans 4 decision chips, full table on demand
     - trust signals placed adjacent to the price and the pay button
     - reduced visual noise: fewer borders, calmer type scale
   ========================================================================== */

/* ---------- decision chips: the 4 specs a buyer actually decides on ------- */
html body .kdd-highlights{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important; margin:18px 0 0!important; padding:0!important;
  list-style:none!important;
}
html body .kdd-highlights li{
  display:flex!important; flex-direction:column!important; gap:3px!important;
  padding:11px 13px!important; border-radius:10px!important;
  background:rgba(0,174,239,.06)!important;
  border:1px solid rgba(0,174,239,.16)!important;
}
html body .kdd-highlights .hl-k{color:#8ea3b3!important;font-size:10px!important;line-height:1.5!important}
html body .kdd-highlights .hl-v{color:#eef8fc!important;font-size:12.5px!important;font-weight:700!important;line-height:1.5!important}

/* ---------- collapsed full spec table ------------------------------------ */
html body .kdd-specs-fold{
  margin-top:18px!important; border-top:1px solid rgba(186,222,242,.12)!important;
  padding-top:14px!important;
}
html body .kdd-specs-fold summary{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:10px!important; cursor:pointer!important; list-style:none!important;
  padding:10px 12px!important; border-radius:9px!important;
  background:rgba(255,255,255,.02)!important;
  color:#c9dbe6!important; font-size:12px!important; font-weight:700!important;
  transition:.18s!important; user-select:none!important;
}
html body .kdd-specs-fold summary::-webkit-details-marker{display:none!important}
html body .kdd-specs-fold summary::after{
  content:'▾'!important; color:#72d9ff!important; font-size:13px!important; transition:transform .2s!important;
}
html body .kdd-specs-fold[open] summary::after{transform:rotate(180deg)!important}
html body .kdd-specs-fold summary:hover{background:rgba(0,174,239,.08)!important;color:#eef8fc!important}
html body .kdd-specs-fold .fold-count{
  color:#7f95a5!important;font-size:10px!important;font-weight:600!important;margin-inline-start:auto!important;
  margin-inline-end:8px!important;
}
html body .spec-grid{
  display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:1px!important; margin-top:12px!important;
  background:rgba(186,222,242,.09)!important;
  border:1px solid rgba(186,222,242,.09)!important;
  border-radius:10px!important; overflow:hidden!important;
}
html body .spec-cell{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:10px!important; padding:9px 12px!important; background:#0b1521!important;
  font-size:11.5px!important; line-height:1.7!important;
}
html body .spec-cell .sc-k{color:#8ea3b3!important;flex:0 0 auto!important}
html body .spec-cell .sc-v{color:#dfeef7!important;font-weight:600!important;text-align:left!important;
  direction:ltr!important;unicode-bidi:plaintext!important;min-width:0!important;overflow-wrap:anywhere!important}

/* ---------- trust row under the buy button -------------------------------- */
html body .kdd-trust{
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important; margin:14px 0 0!important; padding:0!important; list-style:none!important;
}
html body .kdd-trust li{
  display:flex!important; flex-direction:column!important; gap:2px!important;
  padding:10px 8px!important; border-radius:9px!important; text-align:center!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(186,222,242,.10)!important;
  color:#8ea3b3!important; font-size:9.5px!important; line-height:1.6!important;
}
html body .kdd-trust b{color:#72d9ff!important;font-size:11.5px!important;font-weight:800!important}

/* ---------- calmer purchase bar: price left, one clear CTA ---------------- */
html body .product-purchase-bar{
  display:grid!important; grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important; gap:14px!important;
  margin-top:20px!important; padding:16px!important;
  border:1px solid rgba(0,174,239,.26)!important; border-radius:13px!important;
  background:linear-gradient(135deg,rgba(0,174,239,.10),rgba(0,174,239,.03))!important;
}
html body .product-purchase-bar .price-box{
  margin:0!important; padding:0!important; border:0!important; background:none!important;
  display:flex!important; flex-direction:column!important; gap:2px!important; align-items:flex-start!important;
}
html body .product-purchase-bar .price-box span{color:#8ea3b3!important;font-size:10.5px!important}
html body .product-purchase-bar .price-box strong{
  color:#eef8fc!important;font-size:19px!important;font-weight:800!important;
  direction:ltr!important;unicode-bidi:embed!important;white-space:nowrap!important;
}
html body .product-purchase-bar .primary{
  min-height:50px!important; padding:0 26px!important; border-radius:11px!important;
  font-size:13px!important; font-weight:800!important; white-space:nowrap!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:8px!important;
  box-shadow:0 10px 26px -12px rgba(0,174,239,.7)!important;
}

@media(max-width:760px){
  html body .kdd-highlights{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .spec-grid{grid-template-columns:minmax(0,1fr)!important}
  html body .product-purchase-bar{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  html body .product-purchase-bar .primary{width:100%!important}
  html body .kdd-trust{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .kdd-trust li{font-size:8.5px!important;padding:8px 5px!important}
}

/* ---------- CHECKOUT: reassurance at the moment of doubt ------------------ */
html body .kdd-steps{
  display:flex!important; align-items:center!important; justify-content:center!important;
  gap:0!important; margin:0 0 22px!important; padding:0!important; list-style:none!important;
}
html body .kdd-steps li{
  display:flex!important; align-items:center!important; gap:8px!important;
  color:#63778a!important; font-size:11px!important; font-weight:700!important;
}
html body .kdd-steps li::after{
  content:''!important; width:38px!important; height:1px!important;
  background:rgba(186,222,242,.18)!important; margin:0 10px!important;
}
html body .kdd-steps li:last-child::after{display:none!important}
html body .kdd-steps .st-n{
  display:grid!important; place-items:center!important;
  width:22px!important; height:22px!important; border-radius:50%!important;
  background:rgba(186,222,242,.10)!important; color:#8ea3b3!important;
  font-size:10px!important; font-weight:800!important;
}
html body .kdd-steps li.done .st-n{background:rgba(0,174,239,.22)!important;color:#72d9ff!important}
html body .kdd-steps li.done{color:#9fd8f0!important}
html body .kdd-steps li.now .st-n{background:#00aeef!important;color:#00131c!important}
html body .kdd-steps li.now{color:#eef8fc!important}

/* secure strip directly above the pay button */
html body .kdd-secure{
  display:flex!important; align-items:center!important; justify-content:center!important;
  gap:7px!important; margin:0 0 10px!important; padding:10px 12px!important;
  border-radius:10px!important; background:rgba(46,204,113,.07)!important;
  border:1px solid rgba(46,204,113,.22)!important;
  color:#8fd9ae!important; font-size:10.5px!important; line-height:1.7!important; text-align:center!important;
}
html body .kdd-secure svg{flex:0 0 auto!important;width:14px!important;height:14px!important}

/* guarantee list in the checkout side column */
html body .kdd-assure{
  display:grid!important; gap:7px!important; margin:0!important; padding:14px!important;
  list-style:none!important; border-radius:12px!important;
  background:rgba(255,255,255,.022)!important;
  border:1px solid rgba(186,222,242,.11)!important;
}
html body .kdd-assure li{
  display:flex!important; align-items:flex-start!important; gap:8px!important;
  color:#a9bdcb!important; font-size:10.5px!important; line-height:1.85!important;
}
html body .kdd-assure li::before{
  content:'✓'!important; flex:0 0 auto!important; color:#5fd39a!important;
  font-size:11px!important; font-weight:800!important; margin-top:1px!important;
}

/* quieter option blocks so the pay button is the only loud thing */
html body .opt-block{background:rgba(255,255,255,.022)!important;border-color:rgba(186,222,242,.11)!important}
html body .checkout-card{background:rgba(255,255,255,.018)!important}

/* cart page: reassurance under the summary */
html body .summary-card .kdd-assure{margin-top:12px!important}

/* ---------- v7: centred page title on checkout (mobile + desktop) -------- */
html body .checkout-wrap .cart-title{
  text-align:center!important;
  display:flex!important; flex-direction:column!important; align-items:center!important;
  gap:6px!important; margin-bottom:22px!important;
}
html body .checkout-wrap .cart-title .eyebrow{
  display:block!important; width:100%!important; text-align:center!important;
  letter-spacing:2px!important;
}
html body .checkout-wrap .cart-title h1{
  width:100%!important; text-align:center!important; margin:2px 0 6px!important;
}
html body .checkout-wrap .cart-title p{
  width:100%!important; max-width:560px!important; margin:0 auto!important;
  text-align:center!important; line-height:2!important;
}

/* ---------- v7: payment result page (success / failed) + print ----------- */
html body .pay-result{
  width:min(760px,calc(100% - 32px))!important; margin:46px auto 80px!important;
}
html body .pr-card{
  border:1px solid rgba(186,222,242,.14)!important; border-radius:16px!important;
  background:linear-gradient(145deg,#102130,#070c12)!important;
  padding:30px!important; text-align:center!important;
}
html body .pr-badge{
  display:grid!important; place-items:center!important;
  width:74px!important; height:74px!important; margin:0 auto 16px!important;
  border-radius:50%!important; font-size:36px!important; font-weight:800!important;
}
html body .pr-ok .pr-badge{background:rgba(46,204,113,.14)!important;border:1px solid rgba(46,204,113,.42)!important;color:#5fd39a!important}
html body .pr-fail .pr-badge{background:rgba(255,90,90,.12)!important;border:1px solid rgba(255,90,90,.40)!important;color:#ff8f8f!important}
html body .pr-card h1{margin:0 0 8px!important;font-size:22px!important;color:#eef8fc!important}
html body .pr-ok h1{color:#8fe8b8!important}
html body .pr-fail h1{color:#ffb0b0!important}
html body .pr-card>p{margin:0 auto 20px!important;max-width:520px!important;color:#a9bdcb!important;font-size:12.5px!important;line-height:2!important}
html body .pr-table{
  width:100%!important; margin:20px 0 0!important;
  border:1px solid rgba(186,222,242,.12)!important; border-radius:12px!important;
  overflow:hidden!important; border-collapse:collapse!important; text-align:right!important;
}
html body .pr-table tr{border-bottom:1px solid rgba(186,222,242,.09)!important}
html body .pr-table tr:last-child{border-bottom:0!important}
html body .pr-table th{
  width:42%!important; padding:12px 14px!important; background:rgba(255,255,255,.022)!important;
  color:#8ea3b3!important; font-size:11.5px!important; font-weight:600!important; text-align:right!important;
}
html body .pr-table td{
  padding:12px 14px!important; color:#eef8fc!important; font-size:12.5px!important; font-weight:700!important;
  text-align:left!important; direction:ltr!important; unicode-bidi:plaintext!important; overflow-wrap:anywhere!important;
}
html body .pr-actions{
  display:flex!important; flex-wrap:wrap!important; gap:11px!important;
  justify-content:center!important; margin-top:24px!important;
}
html body .pr-actions .button{min-width:170px!important}
@media(max-width:760px){
  html body .pr-card{padding:22px 16px!important}
  html body .pr-table th{width:46%!important;padding:10px!important;font-size:10.5px!important}
  html body .pr-table td{padding:10px!important;font-size:11.5px!important}
  html body .pr-actions .button{width:100%!important;min-width:0!important}
}

/* print: clean white receipt, no site chrome */
@media print{
  header,footer,.public-header,.public-footer,.pr-actions,.hamburger,.public-user{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  html body .pay-result{width:100%!important;margin:0!important}
  html body .pr-card{
    background:#fff!important;border:1px solid #bbb!important;color:#000!important;
    border-radius:0!important;padding:18px!important;box-shadow:none!important;
  }
  html body .pr-card h1,html body .pr-card>p{color:#000!important}
  html body .pr-badge{border-color:#666!important;background:#fff!important;color:#000!important}
  html body .pr-table{border-color:#999!important}
  html body .pr-table th{background:#f2f2f2!important;color:#000!important;border-color:#ccc!important}
  html body .pr-table td{color:#000!important}
  html body .pr-table tr{border-color:#ccc!important}
}

/* ==========================================================================
   v10 — products.php card image must show the WHOLE banner
   Cause: .catalog-visual has a fixed 220px height + object-fit:cover, so a
   wide banner (headline top, icon strip bottom) gets cropped on both edges.
   Fix: give the frame the banner's own aspect ratio and use object-fit
   contain, so nothing is cut. Also remove the dark gradient overlay that
   was washing out the bottom icon row.
   ========================================================================== */
html body .catalog-visual{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/9!important;
  position:relative!important;
  overflow:hidden!important;
  background:#0a121b!important;
  display:block!important;
}
html body .catalog-visual img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;      /* show the entire banner, never crop */
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
}
/* the gradient sat on top of the icon strip and dimmed it */
html body .catalog-visual:after{
  background:linear-gradient(0deg,rgba(4,10,16,.35),transparent 45%)!important;
  pointer-events:none!important;
}
/* keep the status badge readable above the image */
html body .catalog-status{z-index:3!important}

@media(max-width:760px){
  html body .catalog-visual{aspect-ratio:16/10!important}
}


/* ==========================================================================
   v11 — NOTHING IS EVER CROPPED, ON EITHER PAGE
   User requirement: the banner must be shown whole on products.php AND on
   product.php (detail). Previously the detail page used a fixed SQUARE frame
   with object-fit:cover, which cut both sides of a wide banner.
   Fix: both frames now follow the image's own shape (contain), so the full
   artwork — headline, device, icon strip — is always visible.
   ========================================================================== */

/* ---------- DETAIL PAGE: frame follows the banner, no square crop -------- */
@media(min-width:761px){
  html body .detail-wrap .detail-card{
    grid-template-columns:minmax(0,460px) minmax(0,1fr)!important;
    align-items:start!important;
  }
  html body .detail-wrap .detail-card .detail-image{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;      /* stop forcing 1:1 */
    align-self:start!important;
    background:#0a121b!important;
    border-radius:14px!important;
    overflow:hidden!important;
    padding:0!important;
    display:block!important;
  }
  html body .detail-wrap .detail-card .detail-image img{
    width:100%!important;
    height:auto!important;            /* natural height => no crop */
    max-height:none!important;
    object-fit:contain!important;
    display:block!important;
  }
}
@media(min-width:761px) and (max-width:1040px){
  html body .detail-wrap .detail-card{
    grid-template-columns:minmax(0,360px) minmax(0,1fr)!important;
  }
}
@media(max-width:760px){
  html body .detail-wrap .detail-card .detail-image{
    width:100%!important;
    height:auto!important;
    min-height:0!important; max-height:none!important;
    aspect-ratio:auto!important;
    margin:0!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:#0a121b!important;
  }
  html body .detail-wrap .detail-card .detail-image img{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
}

/* ---------- PRODUCTS PAGE: same rule, frame hugs the banner -------------- */
html body .catalog-visual{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;        /* no forced 16:9 either */
  background:#0a121b!important;
  overflow:hidden!important;
  position:relative!important;
  display:block!important;
}
html body .catalog-visual img{
  width:100%!important;
  height:auto!important;              /* the frame takes the image's shape */
  max-height:none!important;
  object-fit:contain!important;
  display:block!important;
}
/* no dark veil over the icon strip */
html body .catalog-visual:after{
  background:linear-gradient(0deg,rgba(4,10,16,.30),transparent 40%)!important;
  pointer-events:none!important;
}
html body .catalog-status{z-index:3!important}

/* cards in a row stay tidy even when banners differ in height */
html body .catalog-grid{align-items:start!important}

/* ==========================================================================
   v13 — upcoming products get a gentle blur
   Cards for future products render WITHOUT the .active class, so
   :not(.active) targets them safely. Blur is deliberately light (3px) —
   enough to read as "not released yet", still recognisable.
   ========================================================================== */
html body .catalog-card:not(.active) .catalog-visual img{
  filter:blur(3px) saturate(.85) brightness(.82)!important;
  transform:scale(1.04)!important;   /* hides soft edges from the blur */
  transition:filter .3s ease!important;
}
/* slight veil so the badge stays readable over the blurred art */
html body .catalog-card:not(.active) .catalog-visual::before{
  content:''!important;
  position:absolute!important; inset:0!important; z-index:2!important;
  background:rgba(6,13,21,.22)!important;
  pointer-events:none!important;
}
html body .catalog-card:not(.active) .catalog-visual{overflow:hidden!important}
html body .catalog-card:not(.active) .catalog-status{z-index:4!important}

/* detail page: same treatment when the product is upcoming */
html body .detail-card.is-upcoming .detail-image img{
  filter:blur(3px) saturate(.85) brightness(.82)!important;
  transform:scale(1.04)!important;
}
html body .detail-card.is-upcoming .detail-image{overflow:hidden!important;position:relative!important}
html body .detail-card.is-upcoming .detail-image::before{
  content:'به‌زودی'!important;
  position:absolute!important; z-index:3!important;
  top:50%!important; left:50%!important; transform:translate(-50%,-50%)!important;
  padding:9px 20px!important; border-radius:999px!important;
  background:rgba(6,13,21,.80)!important;
  border:1px solid rgba(114,217,255,.45)!important;
  color:#9fd8f0!important; font:700 12px/1 Vazirmatn,Tahoma,Arial,sans-serif!important;
  white-space:nowrap!important;
}

/* ---------- v13.1: interest form (notify-me page) ------------------------ */
html body .interest-form{
  display:grid!important; gap:13px!important;
  max-width:420px!important; margin:20px auto 6px!important; text-align:right!important;
}
html body .interest-form label{
  display:grid!important; gap:6px!important;
  color:#a9bdcb!important; font-size:11.5px!important; font-weight:600!important;
}
html body .interest-form input,
html body .interest-form textarea{
  width:100%!important; box-sizing:border-box!important;
  padding:12px 13px!important; border-radius:10px!important;
  border:1px solid rgba(186,222,242,.20)!important;
  background:rgba(7,17,28,.65)!important; color:#eef8fc!important;
  font:400 12.5px/1.9 Vazirmatn,Tahoma,Arial,sans-serif!important;
  outline:none!important; transition:.18s!important;
}
html body .interest-form input:focus,
html body .interest-form textarea:focus{
  border-color:#00aeef!important; background:rgba(0,174,239,.06)!important;
}
html body .interest-form input[name="mobile"]{direction:ltr!important;text-align:left!important}
html body .interest-form textarea{resize:vertical!important;min-height:74px!important}
html body .interest-form .button{width:100%!important;margin-top:4px!important;min-height:48px!important}
html body .pr-card .notice-error{
  margin:10px auto!important; max-width:420px!important; text-align:right!important;
  padding:10px 13px!important; border-radius:9px!important; font-size:11.5px!important;
  background:rgba(255,90,90,.10)!important; border:1px solid rgba(255,90,90,.32)!important;
  color:#ffb0b0!important;
}

/* ==========================================================================
   v15 — HOME PAGE DESKTOP POLISH
   public-home.css only ever had @media(max-width:700px) and (max-width:760px):
   no desktop rules at all. On a wide monitor everything stretched, the hero
   text ran edge-to-edge, the value strip drifted apart and the product block
   kept a hard 390px image next to a much taller copy column.
   These rules only apply from 761px up, so mobile is untouched.
   ========================================================================== */
@media(min-width:761px){

  /* --- shared container: a real reading width, centred --- */
  html body .container{
    width:min(1180px,calc(100% - 48px))!important;
    margin-inline:auto!important;
  }

  /* --- hero: text column capped so lines stay readable --- */
  html body .hero{
    height:min(660px,86vh)!important;
    min-height:520px!important;
    align-items:center!important;
  }
  html body .hero-media img{
    width:100%!important; height:100%!important;
    object-fit:cover!important; object-position:center!important;
  }
  html body .hero-copy{
    max-width:640px!important;
    padding-top:0!important;
  }
  html body .hero-copy h1{
    font-size:clamp(30px,3.4vw,50px)!important;
    line-height:1.45!important;
    margin:10px 0 14px!important;
  }
  html body .hero-copy .intro{
    max-width:520px!important;
    font-size:14px!important; line-height:2.1!important;
  }
  html body .hero-copy .actions{
    display:flex!important; flex-wrap:wrap!important;
    gap:12px!important; margin-top:22px!important;
  }

  /* --- section rhythm: consistent vertical breathing --- */
  html body .section{padding:74px 0!important}
  html body .section h2{
    font-size:clamp(21px,2.2vw,31px)!important;
    line-height:1.7!important; margin:0 0 14px!important;
  }

  /* --- value strip: equal columns instead of drifting apart --- */
  html body .values{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important; margin-top:40px!important;
  }
  html body .value{
    min-width:0!important;
    padding:22px 26px!important;
    text-align:center!important;
  }
  html body .value:first-child{border-left:1px solid var(--line)!important}
  html body .value:last-child{border-left:0!important}

  /* --- product block: image and copy the same height, no hard 390px --- */
  html body .product{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:stretch!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  html body .product-image{
    height:auto!important; min-height:100%!important;
    align-self:stretch!important; overflow:hidden!important;
  }
  html body .product-image img{
    width:100%!important; height:100%!important;
    object-fit:cover!important; display:block!important;
  }
  html body .product-copy{
    display:flex!important; flex-direction:column!important;
    justify-content:center!important;
    padding:44px 42px!important; min-width:0!important;
  }
  html body .product-copy .actions{margin-top:20px!important}

  /* --- guide links: three even cards --- */
  html body .seo-guide-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important; align-items:stretch!important;
  }
  html body .seo-guide-grid a{
    display:flex!important; flex-direction:column!important; gap:8px!important;
    padding:22px!important; border-radius:14px!important;
    border:1px solid var(--line)!important;
    background:rgba(255,255,255,.022)!important;
    transition:.2s!important; height:100%!important; box-sizing:border-box!important;
  }
  html body .seo-guide-grid a:hover{
    border-color:rgba(0,174,239,.45)!important;
    background:rgba(0,174,239,.06)!important;
    transform:translateY(-2px)!important;
  }
  html body .seo-guide-grid a b{font-size:14px!important;line-height:1.7!important}
  html body .seo-guide-grid a span{font-size:11.5px!important;line-height:1.9!important;margin-top:auto!important}

  /* --- closing CTA: centred, not stretched --- */
  html body .cta{padding:72px 0!important;text-align:center!important}
  html body .cta .container{max-width:760px!important}
  html body .cta .actions{justify-content:center!important;display:flex!important;gap:12px!important}
}

/* wide monitors: stop the hero text hugging the edge */
@media(min-width:1500px){
  html body .container{width:min(1280px,calc(100% - 64px))!important}
}

/* ---------- v30: live cart (no manual update button) ---------- */
html body form.cart-live{position:relative!important}
html body form.cart-live.is-saving .cart-price,
html body form.cart-live.is-saving .qty input{opacity:.55!important;transition:opacity .15s!important}
html body #cartSubtotal,
html body #cartTotal{transition:color .2s ease!important}
html body .cart-actions .button.outline{min-width:180px!important}
/* the quantity box reads as interactive */
html body .qty input{
  width:52px!important; text-align:center!important;
  direction:ltr!important; -moz-appearance:textfield!important;
}
html body .qty input::-webkit-outer-spin-button,
html body .qty input::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important}
html body .qty button{cursor:pointer!important;user-select:none!important}

/* v30.1 — .button uses display:inline-flex!important, which beat the inline
   style JS was setting. Hide via a class with equal weight instead. */
html body .button.is-hidden,
html body button.is-hidden,
html body .cart-actions .button.is-hidden{display:none!important}

/* ---------- v32: coupon box + discount line ---------- */
html body .summary-line b.is-minus{color:#8fe8b8!important}
html body .coupon-box{
  display:grid!important; gap:8px!important; margin-top:14px!important;
  padding-top:14px!important; border-top:1px dashed rgba(186,222,242,.16)!important;
}
html body .coupon-box label{color:#a9bdcb!important;font-size:11px!important;font-weight:600!important}
html body .coupon-row{display:flex!important;gap:8px!important}
html body .coupon-row input{
  flex:1 1 auto!important; min-width:0!important; box-sizing:border-box!important;
  padding:11px 12px!important; border-radius:9px!important;
  border:1px solid rgba(186,222,242,.20)!important;
  background:rgba(7,17,28,.65)!important; color:#eef8fc!important;
  font:600 12px Vazirmatn,Tahoma,Arial!important;
  direction:ltr!important; text-align:left!important; text-transform:uppercase!important;
}
html body .coupon-row input:focus{border-color:#00aeef!important;outline:none!important}
html body .coupon-btn{
  flex:0 0 auto!important; padding:0 18px!important; border-radius:9px!important;
  border:1px solid rgba(0,174,239,.45)!important; background:rgba(0,174,239,.10)!important;
  color:#72d9ff!important; font:700 11.5px Vazirmatn,Tahoma,Arial!important; cursor:pointer!important;
}
html body .coupon-btn:hover{background:rgba(0,174,239,.20)!important}
html body .coupon-ok{color:#8fe8b8!important;font-size:10.5px!important}
html body .coupon-bad{color:#ffb0b0!important;font-size:10.5px!important}
html body .check-inline{display:flex!important;align-items:center!important;gap:8px!important;font-size:11.5px!important}

/* ---------- v36: money reads as  «12,000 تومان» not «تومان 12,000» ---------- */
html body .summary-line b{
  display:inline-flex!important; align-items:baseline!important;
  gap:5px!important; direction:rtl!important; white-space:nowrap!important;
}
html body .summary-line b .amt{
  direction:ltr!important; unicode-bidi:bidi-override!important;
  font-variant-numeric:tabular-nums!important; font-weight:800!important;
}
html body .summary-line b .cur{
  font-size:.82em!important; font-weight:600!important; opacity:.72!important;
}
html body .summary-line.total b .amt{font-size:1.18em!important}
html body .summary-line.total b .cur{font-size:.72em!important}

/* checkout summary rows: label right, amount left, no crowding */
html body .summary-card .summary-line{
  display:flex!important; align-items:center!important;
  justify-content:space-between!important; gap:14px!important;
}
html body .summary-card .summary-line > span:first-child{
  flex:1 1 auto!important; min-width:0!important;
  overflow:hidden!important; text-overflow:ellipsis!important;
}
html body .summary-card .summary-line b{flex:0 0 auto!important}

/* desktop: give the checkout a calmer, wider rhythm */
@media(min-width:901px){
  html body .checkout-layout{
    grid-template-columns:minmax(0,1fr) 380px!important;
    gap:22px!important; align-items:start!important;
  }
  html body .checkout-card{padding:30px!important}
  html body .checkout-side{position:sticky!important;top:96px!important;gap:14px!important}
  html body .summary-card{padding:22px!important}
  html body .summary-card .summary-line{padding:10px 0!important;font-size:12px!important}
  html body .checkout-card .form-row{gap:16px!important}
}
@media(min-width:1200px){
  html body .checkout-layout{grid-template-columns:minmax(0,1fr) 400px!important}
}

/* ---------- v36: checkout money + desktop balance ---------- */
html body .summary-line b .amt{
  direction:ltr!important; unicode-bidi:bidi-override!important;
  font-variant-numeric:tabular-nums!important; display:inline-block!important;
}
html body .cur-note{
  font-size:10px!important; font-weight:500!important;
  color:#8ea3b3!important; margin-inline-start:6px!important;
}
html body .summary-card .summary-line{
  display:flex!important; align-items:center!important;
  justify-content:space-between!important; gap:14px!important;
}
html body .summary-card .summary-line > span:first-child{
  flex:1 1 auto!important; min-width:0!important;
  overflow:hidden!important; text-overflow:ellipsis!important;
}
html body .summary-card .summary-line b{flex:0 0 auto!important;white-space:nowrap!important}

/* install + terms now sit under the form */
html body .checkout-opts{display:grid!important;gap:12px!important;margin-top:18px!important}
html body .checkout-opts .opt-block{margin:0!important}

@media(min-width:901px){
  html body .checkout-layout{
    grid-template-columns:minmax(0,1fr) 380px!important;
    gap:22px!important; align-items:start!important;
  }
  html body .checkout-card{padding:30px!important}
  html body .checkout-side{position:sticky!important;top:96px!important;gap:14px!important}
  html body .summary-card{padding:22px!important}
  html body .summary-card .summary-line{padding:10px 0!important;font-size:12px!important}
}
@media(min-width:1200px){
  html body .checkout-layout{grid-template-columns:minmax(0,1fr) 400px!important}
}
@media(max-width:900px){
  html body .checkout-layout{display:flex!important;flex-direction:column!important;gap:14px!important}
}


/* ==========================================================================
   v38 — CHECKOUT: one calm panel
   Six floating cards read as clutter at the exact moment the buyer needs
   certainty. Everything on the right column now lives in ONE panel divided
   by hairlines, so the eye travels top to bottom without interruption.
   ========================================================================== */

/* ---------- the single panel ---------- */
html body .pay-panel{
  display:block!important; padding:0!important; overflow:hidden!important;
  border:1px solid rgba(186,222,242,.14)!important;
  border-radius:18px!important;
  background:linear-gradient(160deg,rgba(21,41,58,.78),rgba(6,12,19,.92))!important;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important;
}
html body .pp-sec{
  padding:18px 20px!important;
  border-bottom:1px solid rgba(186,222,242,.09)!important;
}
html body .pp-sec:last-child{border-bottom:0!important}
html body .pp-head{
  display:flex!important; align-items:baseline!important;
  justify-content:space-between!important; gap:10px!important; margin-bottom:12px!important;
}
html body .pp-head h3{margin:0!important;color:#eef8fc!important;font-size:14px!important;font-weight:700!important}
html body .cur-note{color:#7f95a5!important;font-size:9.5px!important;font-weight:500!important}
html body .pp-label{
  display:block!important; margin-bottom:10px!important;
  color:#8ea3b3!important; font-size:10px!important; font-weight:600!important;
  letter-spacing:.3px!important;
}

/* ---------- summary rows ---------- */
html body .pay-panel .summary-line{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:14px!important; padding:8px 0!important; border:0!important;
  color:#a9bdcb!important; font-size:11.5px!important;
}
html body .pay-panel .summary-line > span:first-child{
  flex:1 1 auto!important; min-width:0!important;
  overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important;
}
html body .pay-panel .summary-line b{
  flex:0 0 auto!important; color:#dff0f8!important; font-size:12.5px!important; white-space:nowrap!important;
}
html body .pay-panel .summary-line b.soft{color:#8ea3b3!important;font-size:11px!important;font-weight:500!important}
html body .pay-panel .summary-line b .amt{
  direction:ltr!important; unicode-bidi:bidi-override!important;
  font-variant-numeric:tabular-nums!important; display:inline-block!important; font-weight:700!important;
}
html body .pay-panel .summary-line b.is-minus .amt{color:#8fe8b8!important}
html body .pay-panel .summary-line.total{
  margin-top:8px!important; padding-top:14px!important;
  border-top:1px solid rgba(0,174,239,.26)!important;
}
html body .pay-panel .summary-line.total span{color:#c9dbe6!important;font-size:12.5px!important;font-weight:600!important}
html body .pay-panel .summary-line.total b .amt{
  color:#72d9ff!important; font-size:20px!important; font-weight:800!important;
  text-shadow:0 0 24px rgba(0,174,239,.4)!important;
}

/* ---------- coupon ---------- */
html body .pay-panel .coupon-box{
  margin-top:12px!important; padding-top:12px!important; display:grid!important; gap:7px!important;
  border-top:1px dashed rgba(186,222,242,.14)!important;
}
html body .pay-panel .coupon-row{display:flex!important;gap:7px!important}
html body .pay-panel .coupon-row input{
  flex:1 1 auto!important; min-width:0!important; box-sizing:border-box!important;
  padding:10px 12px!important; border-radius:9px!important;
  border:1px solid rgba(186,222,242,.16)!important;
  background:rgba(4,10,17,.7)!important; color:#eef8fc!important;
  font:600 11.5px Vazirmatn,Tahoma,Arial!important;
  direction:ltr!important; text-align:left!important; text-transform:uppercase!important;
  outline:none!important; transition:.18s!important;
}
html body .pay-panel .coupon-row input:focus{
  border-color:rgba(0,174,239,.6)!important; box-shadow:0 0 0 3px rgba(0,174,239,.12)!important;
}
html body .pay-panel .coupon-btn{
  flex:0 0 auto!important; padding:0 16px!important; border-radius:9px!important;
  border:1px solid rgba(0,174,239,.42)!important; background:rgba(0,174,239,.1)!important;
  color:#72d9ff!important; font:700 11px Vazirmatn,Tahoma,Arial!important; cursor:pointer!important;
  transition:.18s!important;
}
html body .pay-panel .coupon-btn:hover{background:rgba(0,174,239,.2)!important}

/* ---------- checkboxes ---------- */
html body .pay-panel .optc{
  display:flex!important; align-items:center!important; gap:10px!important;
  padding:9px 10px!important; border-radius:10px!important; margin:0 -4px!important;
  cursor:pointer!important; transition:background .16s!important;
  color:#b7cad6!important; font-size:11.5px!important; line-height:1.7!important;
}
html body .pay-panel .optc:hover{background:rgba(0,174,239,.055)!important}
html body .pay-panel .optc input{position:absolute!important;opacity:0!important;width:0!important;height:0!important}
html body .pay-panel .optc-box{
  flex:0 0 auto!important; width:18px!important; height:18px!important;
  border-radius:6px!important; border:1.5px solid rgba(186,222,242,.28)!important;
  background:rgba(4,10,17,.6)!important; position:relative!important; transition:.18s!important;
}
html body .pay-panel .optc-box::after{
  content:''!important; position:absolute!important;
  left:5px!important; top:1.5px!important; width:5px!important; height:9px!important;
  border:solid #00131c!important; border-width:0 2px 2px 0!important;
  transform:rotate(45deg) scale(0)!important; transition:transform .16s!important;
}
html body .pay-panel .optc input:checked ~ .optc-box{
  background:#00aeef!important; border-color:#00aeef!important;
  box-shadow:0 0 12px rgba(0,174,239,.42)!important;
}
html body .pay-panel .optc input:checked ~ .optc-box::after{transform:rotate(45deg) scale(1)!important}
html body .pay-panel .optc input:checked ~ .optc-text{color:#eef8fc!important}

/* ---------- gateway ---------- */
html body .pay-panel .gwc{
  display:flex!important; align-items:center!important; gap:11px!important;
  padding:11px 12px!important; border-radius:11px!important; cursor:pointer!important; margin:0!important;
  border:1px solid rgba(186,222,242,.13)!important;
  background:rgba(4,10,17,.5)!important; transition:.18s!important;
}
html body .pay-panel .gwc:hover{border-color:rgba(0,174,239,.4)!important}
html body .pay-panel .gwc input{position:absolute!important;opacity:0!important;width:0!important;height:0!important}
html body .pay-panel .gwc-dot{
  flex:0 0 auto!important; width:17px!important; height:17px!important; border-radius:50%!important;
  border:1.5px solid rgba(186,222,242,.3)!important; position:relative!important; transition:.18s!important;
}
html body .pay-panel .gwc-dot::after{
  content:''!important; position:absolute!important; inset:3.5px!important; border-radius:50%!important;
  background:#00aeef!important; transform:scale(0)!important; transition:transform .16s!important;
}
html body .pay-panel .gwc input:checked ~ .gwc-dot{border-color:#00aeef!important}
html body .pay-panel .gwc input:checked ~ .gwc-dot::after{transform:scale(1)!important}
html body .pay-panel .gwc-logo{
  height:26px!important; width:auto!important; flex:0 0 auto!important;
  padding:7px 12px!important; border-radius:9px!important; background:#fff!important;
  box-shadow:0 3px 12px -5px rgba(0,0,0,.7)!important; transition:.18s!important;
}
html body .pay-panel .gwc-note{
  color:#7f95a5!important; font-size:10px!important; line-height:1.6!important;
  margin-inline-start:auto!important; text-align:left!important;
}
html body .pay-panel .gwc:has(input:checked){
  border-color:rgba(0,174,239,.5)!important; background:rgba(0,174,239,.07)!important;
}

/* ---------- pay ---------- */
html body .pp-pay{background:rgba(0,174,239,.035)!important}
html body .pay-panel .kdd-secure{margin-bottom:11px!important}
html body .pay-panel .pay-button{
  width:100%!important; box-shadow:0 14px 34px -14px rgba(0,174,239,.8)!important;
}

/* ---------- guarantees, inside the panel ---------- */
html body .pp-grid4{
  display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:1px!important; background:rgba(186,222,242,.09)!important;
  border-top:1px solid rgba(186,222,242,.09)!important;
}
html body .pp-grid4 .g4{
  display:grid!important; gap:3px!important; padding:14px 12px!important; text-align:center!important;
  background:linear-gradient(160deg,rgba(18,35,50,.9),rgba(6,12,19,.95))!important;
}
html body .pp-grid4 .g4 b{color:#8fe8b8!important;font-size:12px!important;font-weight:800!important}
html body .pp-grid4 .g4 span{color:#8ea3b3!important;font-size:9.5px!important;line-height:1.7!important}

/* ---------- buyer form matches the panel ---------- */
html body .checkout-card{
  border:1px solid rgba(186,222,242,.14)!important;
  border-radius:18px!important; padding:26px!important;
  background:linear-gradient(160deg,rgba(21,41,58,.78),rgba(6,12,19,.92))!important;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important;
}
html body .checkout-card h3{
  margin:0 0 18px!important; padding-bottom:14px!important;
  border-bottom:1px solid rgba(186,222,242,.1)!important;
  color:#eef8fc!important; font-size:14px!important; font-weight:700!important;
}
html body .checkout-card label{
  display:block!important; color:#93a9b8!important;
  font-size:10.5px!important; font-weight:600!important; margin-bottom:13px!important;
}
html body .checkout-card input,
html body .checkout-card select,
html body .checkout-card textarea{
  width:100%!important; box-sizing:border-box!important; margin-top:6px!important;
  padding:12px 13px!important; border-radius:11px!important;
  border:1px solid rgba(186,222,242,.14)!important;
  background:rgba(4,10,17,.72)!important; color:#eef8fc!important;
  font:500 12.5px Vazirmatn,Tahoma,Arial!important;
  outline:none!important; transition:border-color .2s, box-shadow .2s, background .2s!important;
}
html body .checkout-card input::placeholder,
html body .checkout-card textarea::placeholder{color:#5d7183!important}
html body .checkout-card input:hover,
html body .checkout-card select:hover,
html body .checkout-card textarea:hover{border-color:rgba(114,217,255,.28)!important}
html body .checkout-card input:focus,
html body .checkout-card select:focus,
html body .checkout-card textarea:focus{
  border-color:rgba(0,174,239,.62)!important;
  background:rgba(0,174,239,.05)!important;
  box-shadow:0 0 0 3px rgba(0,174,239,.13)!important;
}
html body .checkout-card textarea{resize:vertical!important}

/* ---------- desktop: two balanced columns ---------- */
@media(min-width:901px){
  html body .checkout-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 372px!important;
    gap:20px!important; align-items:start!important;
  }
  html body .checkout-side{position:sticky!important;top:94px!important}
  html body .checkout-card{
    display:flex!important; flex-direction:column!important;
  }
  html body .checkout-card .form-row{
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:13px!important;
  }
  html body .checkout-card .form-row > label{margin-bottom:0!important}
  html body .checkout-card > label:last-of-type{
    display:flex!important; flex-direction:column!important; flex:1 1 auto!important; margin-bottom:0!important;
  }
  html body .checkout-card > label:last-of-type textarea{flex:1 1 auto!important;min-height:130px!important}
}
@media(min-width:1200px){
  html body .checkout-layout{grid-template-columns:minmax(0,1fr) 390px!important}
}
@media(max-width:900px){
  html body .checkout-layout{display:flex!important;flex-direction:column!important;gap:14px!important}
  html body .checkout-side{position:static!important}
}

/* v40 — reason line on a failed receipt */
html body .pr-reason{
  margin:0 auto 16px!important; max-width:520px!important;
  padding:10px 14px!important; border-radius:10px!important;
  background:rgba(255,90,90,.09)!important;
  border:1px solid rgba(255,90,90,.3)!important;
  color:#ffb0b0!important; font-size:12px!important; line-height:1.9!important;
}

/* ==========================================================================
   v41 — MY ORDERS: three clear groups
   One flat list mixed paid, unpaid and failed orders together. The customer
   could not tell what still needed action. Now each state has its own card.
   ========================================================================== */
html body .ord-groups{display:grid!important;gap:16px!important;margin-top:8px!important}

html body .ord-card{
  border:1px solid rgba(186,222,242,.13)!important;
  border-radius:16px!important; overflow:hidden!important;
  background:linear-gradient(160deg,rgba(21,41,58,.72),rgba(6,12,19,.9))!important;
  box-shadow:0 18px 46px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html body .ord-card-head{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:12px!important; padding:16px 18px!important;
  border-bottom:1px solid rgba(186,222,242,.1)!important;
  background:rgba(255,255,255,.022)!important;
}
html body .ord-card-head b{display:block!important;color:#eef8fc!important;font-size:13px!important;font-weight:700!important}
html body .ord-card-head span{display:block!important;color:#8ea3b3!important;font-size:10px!important;margin-top:2px!important}
html body .ord-card-head em{
  flex:0 0 auto!important; min-width:28px!important; height:28px!important;
  display:grid!important; place-items:center!important; padding:0 9px!important;
  border-radius:999px!important; font-style:normal!important;
  background:rgba(186,222,242,.12)!important; color:#c9dbe6!important;
  font-size:12px!important; font-weight:800!important;
}
html body .ord-card-head em.is-ok{background:rgba(46,204,113,.16)!important;color:#8fe8b8!important}
html body .ord-card-head em.is-bad{background:rgba(255,90,90,.14)!important;color:#ffb0b0!important}

html body .ord-row{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:14px!important; flex-wrap:wrap!important;
  padding:14px 18px!important; border-bottom:1px solid rgba(186,222,242,.07)!important;
}
html body .ord-row:last-child{border-bottom:0!important}
html body .ord-row:hover{background:rgba(0,174,239,.035)!important}

html body .ord-info{display:grid!important;gap:3px!important;min-width:0!important;flex:1 1 200px!important}
html body .ord-num{
  color:#72d9ff!important; font-size:10.5px!important; font-weight:700!important;
  direction:ltr!important; text-align:right!important;
}
html body .ord-amt{
  color:#eef8fc!important; font-size:15px!important; font-weight:800!important;
  direction:ltr!important; text-align:right!important; unicode-bidi:plaintext!important;
}
html body .ord-info small{color:#8ea3b3!important;font-size:10px!important;line-height:1.7!important}
html body .ord-ref{direction:ltr!important;text-align:right!important;unicode-bidi:plaintext!important}
html body .ord-reason{color:#ffb0b0!important}

html body .ord-act{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
html body .ord-del{margin:0!important;display:inline!important}
html body .ord-btn{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  padding:9px 15px!important; border-radius:9px!important; cursor:pointer!important;
  font:700 11px Vazirmatn,Tahoma,Arial!important; white-space:nowrap!important;
  border:1px solid transparent!important; transition:.18s!important;
}
html body .ord-btn.primary{background:#00aeef!important;color:#00121a!important;border-color:#00aeef!important}
html body .ord-btn.primary:hover{background:#63d5ff!important}
html body .ord-btn.ghost{
  background:rgba(4,12,18,.4)!important; color:#c9dbe6!important;
  border-color:rgba(186,222,242,.2)!important;
}
html body .ord-btn.ghost:hover{border-color:#72d9ff!important;color:#eef8fc!important}
html body .ord-btn.danger{
  background:rgba(255,90,90,.09)!important; color:#ff9a9a!important;
  border-color:rgba(255,90,90,.32)!important;
}
html body .ord-btn.danger:hover{background:rgba(255,90,90,.2)!important;color:#ffc4c4!important}

html body .ord-pill{
  padding:6px 12px!important; border-radius:999px!important;
  font-size:10px!important; font-weight:700!important; white-space:nowrap!important;
}
html body .ord-pill.ok{background:rgba(46,204,113,.13)!important;color:#8fe8b8!important;border:1px solid rgba(46,204,113,.3)!important}
html body .ord-pill.bad{background:rgba(255,90,90,.1)!important;color:#ffb0b0!important;border:1px solid rgba(255,90,90,.28)!important}

html body .ord-empty{padding:22px!important;text-align:center!important;color:#7f95a5!important;font-size:11.5px!important}
html body .ord-notice{
  margin:14px 0!important; padding:12px 15px!important; border-radius:11px!important;
  font-size:11.5px!important; line-height:1.9!important;
}
html body .ord-notice.is-ok{background:rgba(46,204,113,.09)!important;border:1px solid rgba(46,204,113,.3)!important;color:#8fe8b8!important}
html body .ord-notice.is-bad{background:rgba(255,90,90,.09)!important;border:1px solid rgba(255,90,90,.32)!important;color:#ffb0b0!important}

@media(min-width:1000px){
  html body .ord-groups{gap:18px!important}
}
@media(max-width:620px){
  html body .ord-row{flex-direction:column!important;align-items:stretch!important;gap:11px!important}
  html body .ord-act{width:100%!important}
  html body .ord-act > *,
  html body .ord-del{flex:1 1 auto!important}
  html body .ord-del .ord-btn{width:100%!important}
  html body .ord-pill{text-align:center!important;flex:1 1 100%!important}
}

/* ==========================================================================
   v42 — MY ACCOUNT
   Same surface language as checkout and my-orders so the customer area
   feels like one product, not a set of unrelated pages.
   ========================================================================== */
html body .acc-page{padding-bottom:40px!important}
html body .acc-grid{
  display:grid!important; grid-template-columns:minmax(0,1fr)!important;
  gap:16px!important; margin-top:8px!important;
}
html body .acc-side{display:grid!important;gap:16px!important;align-content:start!important}

html body .acc-card{
  border:1px solid rgba(186,222,242,.13)!important;
  border-radius:16px!important; padding:22px!important;
  background:linear-gradient(160deg,rgba(21,41,58,.72),rgba(6,12,19,.9))!important;
  box-shadow:0 18px 46px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html body .acc-head{
  margin-bottom:16px!important; padding-bottom:13px!important;
  border-bottom:1px solid rgba(186,222,242,.1)!important;
}
html body .acc-head b{display:block!important;color:#eef8fc!important;font-size:13.5px!important;font-weight:700!important}
html body .acc-head span{display:block!important;color:#8ea3b3!important;font-size:10px!important;margin-top:3px!important}

html body .acc-form{display:grid!important;gap:14px!important}
html body .acc-form label{
  display:block!important; color:#93a9b8!important;
  font-size:10.5px!important; font-weight:600!important; margin:0!important;
}
html body .acc-form label em{color:#7f95a5!important;font-style:normal!important;font-size:9.5px!important}
html body .acc-form input,
html body .acc-form select{
  width:100%!important; box-sizing:border-box!important; margin-top:6px!important;
  padding:12px 13px!important; border-radius:11px!important;
  border:1px solid rgba(186,222,242,.14)!important;
  background:rgba(4,10,17,.72)!important; color:#eef8fc!important;
  font:500 12.5px Vazirmatn,Tahoma,Arial!important;
  outline:none!important; transition:border-color .2s, box-shadow .2s, background .2s!important;
}
html body .acc-form input:hover,
html body .acc-form select:hover{border-color:rgba(114,217,255,.28)!important}
html body .acc-form input:focus,
html body .acc-form select:focus{
  border-color:rgba(0,174,239,.62)!important;
  background:rgba(0,174,239,.05)!important;
  box-shadow:0 0 0 3px rgba(0,174,239,.13)!important;
}
html body .acc-form input.ltr{direction:ltr!important;text-align:left!important}
html body .acc-form small{
  display:block!important; margin-top:5px!important;
  color:#7f95a5!important; font-size:9.5px!important; font-weight:400!important;
}
html body .acc-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important}

html body .acc-btn{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  min-height:46px!important; padding:0 22px!important; border-radius:11px!important;
  border:1px solid transparent!important; cursor:pointer!important;
  font:800 12.5px Vazirmatn,Tahoma,Arial!important; transition:.2s!important; margin-top:4px!important;
}
html body .acc-btn.primary{
  background:linear-gradient(135deg,#00aeef,#63d5ff)!important; color:#00131c!important;
  box-shadow:0 12px 30px -14px rgba(0,174,239,.75)!important;
}
html body .acc-btn.primary:hover{transform:translateY(-1px)!important}

html body .acc-note{
  margin-bottom:12px!important; padding:11px 14px!important; border-radius:10px!important;
  font-size:11.5px!important; line-height:1.9!important;
}
html body .acc-note.is-ok{background:rgba(46,204,113,.09)!important;border:1px solid rgba(46,204,113,.3)!important;color:#8fe8b8!important}
html body .acc-note.is-bad{background:rgba(255,90,90,.09)!important;border:1px solid rgba(255,90,90,.32)!important;color:#ffb0b0!important}

html body .acc-facts{display:grid!important;gap:9px!important}
html body .acc-facts > div{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:12px!important; padding:10px 12px!important; border-radius:10px!important;
  background:rgba(255,255,255,.022)!important; border:1px solid rgba(186,222,242,.09)!important;
}
html body .acc-facts span{color:#8ea3b3!important;font-size:10.5px!important}
html body .acc-facts b{color:#eef8fc!important;font-size:11.5px!important}
html body .acc-facts b.ltr{direction:ltr!important;text-align:left!important}
html body .acc-facts b.is-green{color:#8fe8b8!important}

@media(min-width:1000px){
  html body .acc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:18px!important;align-items:start!important}
}
@media(max-width:620px){
  html body .acc-row{grid-template-columns:minmax(0,1fr)!important}
  html body .acc-btn{width:100%!important}
}

/* ==========================================================================
   v44 — products on the home page (for shoppers and for crawlers)
   Same visual language as the rest of the site: dark glass, hairline border,
   blue accent. Nothing about the existing layout changes.
   ========================================================================== */
html body .home-shop-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
  gap:16px!important; margin-top:26px!important;
}
html body .hs-card{
  display:flex!important; flex-direction:column!important; overflow:hidden!important;
  border:1px solid rgba(186,222,242,.14)!important; border-radius:16px!important;
  background:linear-gradient(160deg,rgba(21,41,58,.72),rgba(6,12,19,.9))!important;
  box-shadow:0 18px 46px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05)!important;
  transition:transform .2s, border-color .2s!important;
}
html body .hs-card:hover{transform:translateY(-3px)!important;border-color:rgba(0,174,239,.4)!important}
html body .hs-media{
  display:block!important; background:#0a121b!important; overflow:hidden!important;
  aspect-ratio:16/10!important;
}
html body .hs-media img{
  width:100%!important; height:100%!important;
  object-fit:contain!important; display:block!important;
}
html body .hs-body{
  display:flex!important; flex-direction:column!important; gap:8px!important;
  padding:16px!important; flex:1 1 auto!important;
}
html body .hs-body h3{margin:0!important;font-size:13.5px!important;line-height:1.7!important}
html body .hs-body h3 a{color:#eef8fc!important;font-weight:700!important}
html body .hs-body h3 a:hover{color:#72d9ff!important}
html body .hs-body p{
  margin:0!important; color:#8ea3b3!important;
  font-size:11px!important; line-height:1.9!important;
}
html body .hs-foot{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:10px!important; margin-top:auto!important; padding-top:12px!important;
  border-top:1px solid rgba(186,222,242,.1)!important;
}
html body .hs-price{
  color:#72d9ff!important; font-size:14px!important; font-weight:800!important;
  direction:ltr!important; unicode-bidi:plaintext!important; white-space:nowrap!important;
}
html body .hs-price small{font-size:9.5px!important;font-weight:600!important;opacity:.75!important;margin-inline-start:3px!important}
html body .hs-soon{color:#8ea3b3!important;font-size:11.5px!important;font-weight:600!important}
html body .hs-buy{
  flex:0 0 auto!important; padding:9px 15px!important; border-radius:9px!important;
  background:#00aeef!important; color:#00121a!important; border:1px solid #00aeef!important;
  font:800 10.5px Vazirmatn,Tahoma,Arial!important; white-space:nowrap!important; transition:.18s!important;
}
html body .hs-buy:hover{background:#63d5ff!important;border-color:#63d5ff!important}
html body .hs-buy.ghost{
  background:rgba(4,12,18,.4)!important; color:#c9dbe6!important;
  border-color:rgba(186,222,242,.22)!important;
}
html body .hs-buy.ghost:hover{border-color:#72d9ff!important;color:#eef8fc!important}
html body .home-shop .actions{margin-top:22px!important;display:flex!important;justify-content:center!important}
@media(max-width:620px){
  html body .home-shop-grid{grid-template-columns:minmax(0,1fr)!important;gap:13px!important}
}

/* ==========================================================================
   v50 — SEO: footer links, related articles, blog
   ========================================================================== */
html body .footer-links{display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0!important}
html body .footer-links a{
  color:#91a6b5!important;font-size:11px!important;line-height:1.9!important;transition:.16s!important;
}
html body .footer-links a:hover{color:#72d9ff!important}

/* related block at the end of every guide */
html body .seo-related{
  width:min(1180px,calc(100% - 40px))!important;margin:36px auto 0!important;
  padding-top:26px!important;border-top:1px solid rgba(186,222,242,.12)!important;
}
html body .seo-related h2{margin:0 0 16px!important;color:#eef8fc!important;font-size:16px!important}
html body .seo-related-grid{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:12px!important;
}
html body .seo-related-grid a{
  display:grid!important;gap:5px!important;padding:15px!important;border-radius:13px!important;
  border:1px solid rgba(186,222,242,.13)!important;
  background:linear-gradient(160deg,rgba(21,41,58,.6),rgba(6,12,19,.85))!important;transition:.18s!important;
}
html body .seo-related-grid a:hover{border-color:rgba(0,174,239,.45)!important;transform:translateY(-2px)!important}
html body .seo-related-grid b{color:#eef8fc!important;font-size:12.5px!important}
html body .seo-related-grid span{color:#8ea3b3!important;font-size:10.5px!important;line-height:1.8!important}
html body .seo-related-cta{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:14px!important;flex-wrap:wrap!important;margin-top:16px!important;padding:18px!important;
  border-radius:14px!important;border:1px solid rgba(0,174,239,.26)!important;
  background:linear-gradient(135deg,rgba(0,174,239,.1),rgba(0,174,239,.03))!important;
}
html body .seo-related-cta b{color:#eef8fc!important;font-size:13.5px!important;display:block!important}
html body .seo-related-cta span{color:#a9bdcb!important;font-size:11px!important;flex:1 1 200px!important}

/* blog index */
html body .blog-wrap{width:min(1180px,calc(100% - 40px))!important;margin:40px auto 70px!important}
html body .blog-head{margin-bottom:26px!important}
html body .blog-head h1{margin:8px 0 8px!important;color:#eef8fc!important;font-size:clamp(24px,3vw,36px)!important}
html body .blog-head p{margin:0!important;color:#8ea3b3!important;font-size:13px!important}
html body .blog-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:18px!important}
html body .blog-card{
  display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:16px!important;
  border:1px solid rgba(186,222,242,.13)!important;
  background:linear-gradient(160deg,rgba(21,41,58,.72),rgba(6,12,19,.9))!important;transition:.2s!important;
}
html body .blog-card:hover{transform:translateY(-3px)!important;border-color:rgba(0,174,239,.4)!important}
html body .bc-media{display:block!important;aspect-ratio:16/10!important;background:#0a121b!important;overflow:hidden!important}
html body .bc-media img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
html body .bc-body{display:flex!important;flex-direction:column!important;gap:8px!important;padding:16px!important;flex:1 1 auto!important}
html body .bc-body h2{margin:0!important;font-size:14px!important;line-height:1.75!important}
html body .bc-body h2 a{color:#eef8fc!important;font-weight:700!important}
html body .bc-body h2 a:hover{color:#72d9ff!important}
html body .bc-body p{margin:0!important;color:#8ea3b3!important;font-size:11px!important;line-height:1.9!important}
html body .bc-foot{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin-top:auto!important;padding-top:12px!important;border-top:1px solid rgba(186,222,242,.1)!important;
}
html body .bc-foot span{color:#7f95a5!important;font-size:10px!important;direction:ltr!important}
html body .bc-foot a{color:#72d9ff!important;font-size:11px!important;font-weight:700!important}
html body .blog-empty{
  padding:48px 20px!important;text-align:center!important;border-radius:16px!important;
  border:1px solid rgba(186,222,242,.13)!important;color:#8ea3b3!important;font-size:13px!important;
  background:linear-gradient(160deg,rgba(21,41,58,.6),rgba(6,12,19,.85))!important;
}

/* single article */
html body .art-page{width:min(820px,calc(100% - 40px))!important;margin:34px auto 70px!important}
html body .art-crumbs{display:flex!important;gap:8px!important;margin-bottom:14px!important;font-size:11px!important}
html body .art-crumbs a{color:#8ea3b3!important}
html body .art-crumbs a:hover{color:#72d9ff!important}
html body .art-crumbs span{color:#4a5c6b!important}
html body .art-meta{color:#7f95a5!important;font-size:11px!important;margin-bottom:16px!important;direction:ltr!important;text-align:right!important}
html body .art-cover{border-radius:16px!important;overflow:hidden!important;margin:18px 0!important;background:#0a121b!important}
html body .art-cover img{width:100%!important;height:auto!important;display:block!important}
html body .art-body{color:#c2d5e1!important;font-size:14px!important;line-height:2.3!important;margin-top:18px!important}
html body .art-cta{
  display:grid!important;gap:8px!important;margin-top:30px!important;padding:20px!important;
  border-radius:15px!important;border:1px solid rgba(0,174,239,.26)!important;
  background:linear-gradient(135deg,rgba(0,174,239,.1),rgba(0,174,239,.03))!important;
}
html body .art-cta b{color:#eef8fc!important;font-size:14px!important}
html body .art-cta span{color:#a9bdcb!important;font-size:11.5px!important;line-height:1.9!important}
html body .art-cta .primary{justify-self:start!important;margin-top:6px!important}
html body .art-more{margin-top:26px!important;padding-top:20px!important;border-top:1px solid rgba(186,222,242,.12)!important}
html body .art-more b{display:block!important;color:#eef8fc!important;font-size:13px!important;margin-bottom:10px!important}
html body .art-more ul{margin:0!important;padding:0!important;list-style:none!important;display:grid!important;gap:8px!important}
html body .art-more a{color:#9fd8f0!important;font-size:12px!important}
html body .art-more a:hover{color:#72d9ff!important}

/* admin article form */
html body .art-form{display:grid!important;gap:16px!important}
html body .af-label{display:block!important;color:#93a9b8!important;font-size:11px!important;font-weight:600!important;margin-bottom:14px!important}
html body .af-label em{color:#7f95a5!important;font-style:normal!important;font-size:9.5px!important}
html body .af-label input[type=text],html body .af-label input:not([type]),
html body .af-label textarea,html body .af-label select,html body .art-form input[name]{
  width:100%!important;box-sizing:border-box!important;margin-top:6px!important;
  padding:12px 13px!important;border-radius:11px!important;
  border:1px solid rgba(186,222,242,.14)!important;
  background:rgba(4,10,17,.72)!important;color:#eef8fc!important;
  font:500 12.5px Vazirmatn,Tahoma,Arial!important;outline:none!important;transition:.2s!important;
}
html body .art-form textarea{resize:vertical!important;line-height:2!important}
html body .af-label input:focus,html body .af-label textarea:focus,html body .af-label select:focus{
  border-color:rgba(0,174,239,.62)!important;background:rgba(0,174,239,.05)!important;
  box-shadow:0 0 0 3px rgba(0,174,239,.13)!important;
}
html body .af-label small{display:block!important;margin-top:5px!important;color:#7f95a5!important;font-size:9.5px!important;font-weight:400!important}
html body .af-cover{margin-bottom:14px!important;border-radius:12px!important;overflow:hidden!important;max-width:280px!important}
html body .af-cover img{width:100%!important;height:auto!important;display:block!important}

@media(max-width:760px){
  html body .final-footer{grid-template-columns:minmax(0,1fr)!important}
  html body .seo-related-cta{flex-direction:column!important;align-items:stretch!important}
}