*{box-sizing:border-box}
:root{ --brand:#111827; --accent:#FF7931; --bg:#fff; --muted:#6b7280; --border:#e5e7eb; }
html,body{margin:0;padding:0;background:var(--bg);color:#111;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:20px}
.row{display:flex;gap:16px}
.space-between{justify-content:space-between}
.center{align-items:center}
.header{border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(6px);z-index:10}
.brand-name{font-weight:800;font-size:20px;color:var(--brand)}
.brand-url{font-size:12px;color:var(--muted)}
.nav a{margin-left:16px;color:#374151}
.nav a:hover{color:var(--accent)}
.cart-top.btn{margin-left:12px}

.product{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;margin-top:18px}
.product-media{position:relative}
.slider{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:#f9fafb}
.slider img{width:100%;height:100%;object-fit:contain;display:block;user-select:none}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.5);color:#fff;font-size:28px;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav-btn.prev{left:8px} .nav-btn.next{right:8px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dot{width:8px;height:8px;border-radius:50%;background:#d1d5db} .dot.active{background:var(--accent)}

.product-info{display:flex;flex-direction:column;gap:16px}
.product-title{font-size:28px;margin:0}
.price{font-size:28px;font-weight:700}
.controls label{display:block;margin-bottom:6px;color:#374151}
.qty{display:inline-flex;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.qty-btn{background:#f3f4f6;border:0;padding:10px 14px;font-size:18px;cursor:pointer}
.qty input{width:66px;text-align:center;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);font-size:16px;padding:10px}
.actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

.specs{margin-top:8px}
.spec-group{margin:10px 0 14px 0}
.spec-group h3{font-size:16px;margin:0 0 6px 0;color:#374151}
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{border:1px solid var(--border);padding:8px 10px;vertical-align:top}
.spec th{width:40%;background:#f9fafb;text-align:left;color:#374151}

.under-photo{margin-top:14px;line-height:1.6}
.under-photo h2{font-size:20px;margin:12px 0 8px}
.under-photo p{margin:0 0 12px 0;color:#374151}

.trust{display:flex;align-items:center;gap:10px;color:#374151}
.footer{border-top:1px solid var(--border);margin-top:40px;color:#6b7280}

.btn{border-radius:14px;padding:12px 18px;font-weight:700;border:1px solid var(--border);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.outline{background:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.muted{color:#6b7280}

@media (max-width:920px){ .product{grid-template-columns:1fr} .nav{display:none} }
@media (max-width:480px){ .actions{flex-direction:column} .actions .btn{width:100%} }
.price{display:flex;align-items:baseline;gap:10px}
.price .new{font-size:28px;font-weight:800}
.price .old{font-size:20px;color:#9ca3af;text-decoration:line-through}
.badge{font-size:12px;font-weight:700;border-radius:999px;padding:4px 8px;
       border:1px solid #34d399;color:#059669;background:#10b9811a}

/* === Mobile reflow: title + buy/add-to-cart BELOW description & specs === */
@media (max-width: 600px){
  /* Ensure column layout is consistent */
  .product-info{display:flex;flex-direction:column}

  /* Move specs above title/price/actions */
  .product-info .specs{order:1}

  /* Put title, price, and actions AFTER specs */
  .product-info .product-title{order:2}
  .product-info .price{order:3}
  .product-info .controls{order:4}

  /* Optional blocks that should remain after actions */
  .product-info .trust{order:5}
}

/* === Mobile/Tablet reflow (up to 920px): specs above; title/price/buttons below === */
@media (max-width: 920px){
  .product-info{display:flex;flex-direction:column}
  .product-info > .specs{order:1 !important}
  .product-info > .product-title{order:2 !important}
  .product-info > .price{order:3 !important}
  .product-info > .controls{order:4 !important}
  .product-info > .trust{order:5 !important}
}

/* === V3 mobile order: product-info ABOVE media; title/price/buttons BEFORE specs === */
@media (max-width: 920px){
  /* Stack the two main columns and put info first */
  .product{display:flex;flex-direction:column}
  .product .product-info{order:1 !important}
  .product .product-media{order:2 !important}

  /* Inside info: show primary CTA block first, specs below */
  .product .product-info{display:flex;flex-direction:column}
  .product .product-info .product-title{order:1 !important}
  .product .product-info .price{order:2 !important}
  .product .product-info .controls{order:3 !important}
  .product .product-info .specs{order:4 !important}
}

/* === V4 mobile: keep photos at top; title/price/buttons above specs; description moved below === */
@media (max-width: 920px){
  .product{display:flex;flex-direction:column}
  .product .product-media{order:1 !important}
  .product .product-info{order:2 !important}
  /* Under-photo section now sits after product-info in DOM; keep it last */
  .product .under-photo{order:3 !important}

  /* Inside info: CTA first, specs after */
  .product .product-info{display:flex;flex-direction:column}
  .product .product-info .product-title{order:1 !important}
  .product .product-info .price{order:2 !important}
  .product .product-info .controls{order:3 !important}
  .product .product-info .specs{order:4 !important}
}

/* === V5 mobile: Photo (top) → Description (under photo) → Title/Price/Buttons → Specs === */
@media (max-width: 920px){
  .product{display:flex;flex-direction:column}

  /* Top-level order */
  .product .product-media{order:1 !important}
  .product .under-photo{order:2 !important}
  .product .product-info{order:3 !important}

  /* Inside product-info */
  .product .product-info{display:flex;flex-direction:column}
  .product .product-info .product-title{order:1 !important}
  .product .product-info .price{order:2 !important}
  .product .product-info .controls{order:3 !important}
  .product .product-info .specs{order:4 !important}
}

/* === V7 layout === */

/* Desktop/Large (≥ 921px): two-column grid, description sits under the photo (left column) */
@media (min-width: 921px){
  .product{display:grid !important; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; grid-row-gap: 16px; grid-template-areas:
    "media info"
    "desc  info";
  }
  .product .product-media{grid-area: media;}
  .product .under-photo{grid-area: desc;}
  .product .product-info{grid-area: info;}
}

/* Mobile/Tablet (≤ 920px): v4 order — photo, then info (title/price/buttons/specs), then description */
@media (max-width: 920px){
  .product{display:flex !important; flex-direction:column !important}
  .product .product-media{order:1 !important}
  .product .product-info{order:2 !important}
  .product .under-photo{order:3 !important}

  /* Inside product-info: title → price → buttons → specs */
  .product .product-info{display:flex;flex-direction:column}
  .product .product-info .product-title{order:1 !important}
  .product .product-info .price{order:2 !important}
  .product .product-info .controls{order:3 !important}
  .product .product-info .specs{order:4 !important}
}

/* === V8 layout fix === */
/* Desktop (≥921px): 2-col grid with desc under photo */
@media (min-width: 921px){
  .product{display:grid !important; grid-template-columns: 1fr 1fr; grid-column-gap:24px; grid-row-gap:16px;
    grid-template-areas:
      "media info"
      "desc  info";
  }
  .product .product-media{grid-area: media}
  .product .under-photo{grid-area: desc}
  .product .product-info{grid-area: info}
}

/* Mobile (≤920px): strict order — media → info → desc via grid areas */
@media (max-width: 920px){
  .product{display:grid !important; grid-template-columns: 1fr; grid-row-gap:16px;
    grid-template-areas:
      "media"
      "info"
      "desc";
  }
  .product .product-media{grid-area: media !important}
  .product .product-info{grid-area: info !important; display:flex; flex-direction:column}
  .product .under-photo{grid-area: desc !important}

  /* Inside product-info */
  .product .product-info .product-title{order:1 !important}
  .product .product-info .price{order:2 !important}
  .product .product-info .controls{order:3 !important}
  .product .product-info .specs{order:4 !important}
}

/* === Support phone next to cart === */
.support-phone{display:flex;align-items:center;gap:10px;margin-right:12px;font-weight:600;white-space:nowrap}
.support-phone .icon-headset{width:20px;height:20px;flex:0 0 20px;opacity:.9;fill:currentColor}
.support-phone .phone-number{color:inherit;text-decoration:none}
.support-phone .phone-number:hover{text-decoration:underline}

@media (max-width: 480px){
  .support-phone{gap:8px;margin-right:8px}
  .support-phone .icon-headset{width:18px;height:18px}
  .support-phone .phone-number{font-size:14px}
}

/* keep header layout tight on small screens */
.header .container{gap:12px}

/* === Support phone: mobile adaptation === */
.support-phone{display:flex;align-items:center;gap:10px;margin-right:12px;font-weight:600;white-space:nowrap;
  color:inherit;text-decoration:none;padding:6px 10px;border-radius:999px;line-height:1}
.support-phone:active,.support-phone:focus{outline:none}
.support-phone .icon-headset{width:20px;height:20px;flex:0 0 20px;opacity:.95;fill:currentColor}
.support-phone .phone-number{color:inherit;text-decoration:none}

@media (max-width: 640px){
  .support-phone{gap:8px;margin-right:8px;padding:8px 10px}
  .support-phone .icon-headset{width:22px;height:22px}
  .support-phone .phone-number{display:none}  /* show icon-only on phones */
  .header .container{gap:10px}
  .cart-top{padding:8px 12px;font-size:14px}
}

@media (max-width: 360px){
  .cart-top{padding:8px 10px;font-size:13px}
}

/* === Brand logo in header === */
.brand-logo{display:inline-flex;align-items:center;gap:8px}
.brand-logo img{display:block;height:28px;width:auto}

/* Show full phone number on all widths */
.support-phone .phone-number{display:inline !important}

/* Tidy header spacing so logo + full number + cart fit */
.header .container{gap:14px}
@media (max-width: 640px){
  .brand-logo img{height:24px}
  .support-phone{gap:8px;margin-right:8px;padding:6px 8px}
  .support-phone .phone-number{font-size:14px !important; white-space:nowrap}
  .cart-top{padding:8px 12px;font-size:14px}
}
@media (max-width: 380px){
  .support-phone .phone-number{font-size:13px !important}
  .cart-top{padding:8px 10px;font-size:13px}
}


/* === Fix: mobile header — make Contacts and Cart the same size === */
@media (max-width: 640px){
  .header .contact-tab,
  .header .cart-top{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px !important;
    height:32px;
    font-size:13px !important;
    line-height:1;
    border-radius:999px;
  }
  .header .contact-tab svg,
  .header .cart-top svg,
  .header .contact-tab .icon,
  .header .cart-top .icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
  }
}

@media (max-width: 380px){
  .header .contact-tab,
  .header .cart-top{
    padding:6px 8px !important;
    height:30px;
    font-size:12px !important;
  }
}



/* === Equalize Contacts & Cart at ALL widths and align header === */
.header .container{align-items:center !important;}
.header .contact-tab,
.header .cart-top{
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
  gap:8px !important;
  padding:8px 12px !important;
  margin:0 !important;
  border-radius:999px !important;
  font-size:14px !important;
  line-height:1 !important;
  height:auto !important;
}

.header .contact-tab.btn,
.header .cart-top.btn{
  margin-left:8px !important; /* keep a small gap but same for both */
}

/* Icon sizing inside both */
.header .contact-tab svg,
.header .cart-top svg,
.header .contact-tab .icon,
.header .cart-top .icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
}

/* Tighten on tiny phones */
@media (max-width: 380px){
  .header .contact-tab,
  .header .cart-top{
    padding:6px 10px !important;
    font-size:12px !important;
  }
}


/* === Mobile header alignment hard-fix === */
@media (max-width: 640px){
  .header .container{
    align-items:center !important;
    white-space:nowrap;
  }
  .header .contact-tab,
  .header .cart-top{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    height:34px !important;
    line-height:1 !important;
    font-size:13px !important;
    padding:8px 12px !important;
    margin:0 !important;
    border-radius:999px !important;
    width:auto !important;          /* override .btn{width:100%} */
    vertical-align:middle !important;
  }
  /* make their internal icons/text consistent */
  .header .contact-tab svg,
  .header .cart-top svg,
  .header .contact-tab .icon,
  .header .cart-top .icon{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
  }
}

@media (max-width: 380px){
  .header .contact-tab,
  .header .cart-top{
    height:30px !important;
    padding:6px 8px !important;
    font-size:12px !important;
  }
}


/* =========================
   HEADER BUTTONS EQUALIZER
   Contacts & Cart → same height, font, padding, baseline
   ========================= */
.header .container{
  align-items:center !important;
}

.header .contact-tab.btn,
.header .cart-top.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;            /* override any .btn{width:100%} */
  margin:0 !important;
  border-radius:999px !important;
  font-weight:700 !important;
  line-height:1 !important;
  vertical-align:middle !important;
  text-decoration:none;
  /* Desktop defaults */
  padding:10px 14px !important;
  font-size:14px !important;
  height:36px !important;
}

/* Icons inside (if present) */
.header .contact-tab.btn svg,
.header .cart-top.btn svg,
.header .contact-tab.btn .icon,
.header .cart-top.btn .icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
}

/* Tablet/Mobile */
@media (max-width: 920px){
  .header .contact-tab.btn,
  .header .cart-top.btn{
    height:34px !important;
    padding:8px 12px !important;
    font-size:13px !important;
  }
}

/* Phones */
@media (max-width: 640px){
  .header .contact-tab.btn,
  .header .cart-top.btn{
    height:34px !important;
    padding:8px 12px !important;
    font-size:13px !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .header .contact-tab.btn,
  .header .cart-top.btn{
    height:30px !important;
    padding:6px 8px !important;
    font-size:12px !important;
  }
}


/* =======================================================
   FINAL HEADER ALIGNMENT (clean flex, no transforms)
   Makes #contactTab and #cartTop identical and centered
   ======================================================= */
.header .container{
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Reset conflicting width and vertical metrics for header buttons */
.header #contactTab.btn,
.header #cartTop.btn{
  align-self: center !important;      /* force same cross-axis alignment */
  display: inline-flex !important;    /* keep pill look, but flex inside */
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;

  height: 34px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: auto !important;             /* override any .btn { width:100% } */
  margin: 0 !important;
  vertical-align: middle !important;

  /* Aesthetic parity */
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: inherit !important;

  /* Neutralize leftover properties */
  transform: none !important;
  top: 0 !important;
}

/* Icons parity if present */
.header #contactTab.btn svg, .header #contactTab.btn .icon,
.header #cartTop.btn svg,   .header #cartTop.btn .icon{
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* Desktop stays same; on very small phones, shrink evenly */
@media (max-width: 920px){
  .header #contactTab.btn,
  .header #cartTop.btn{
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 640px){
  .header #contactTab.btn,
  .header #cartTop.btn{
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 380px){
  .header #contactTab.btn,
  .header #cartTop.btn{
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* Free up space on tiny phones so row doesn't wrap or nudge */
@media (max-width: 640px){
  .header .brand-url{ display: none !important; }
  .header .nav{ display: none !important; }
  .header .container{ gap: 12px !important; }
}

/* ============================================================
   FIX 2025‑09‑07 — Header Equalizer (Contacts & Cart)
   Причина: повторяющиеся правила ломали размеры/линию шапки.
   Решение: единые параметры и высокая специфичность + !important.
   Работает и с .btn, и без .btn в разметке.
   ============================================================ */

/* 1) Шапка — всегда в одну строку, центрирование, без переноса */
header.header .container,
.header .container{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

/* 2) Брендовые элементы могут сжиматься, чтобы кнопки не уезжали вниз */
.header .brand-logo,
.header .brand-name,
.header .brand-url{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* 3) Контакты и Корзина — одинаковые размеры (высота/паддинги/шрифт/иконки) */
:where(.header) :is(.contact-tab,#contactTab,.cart-top,#cartTop){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  height:36px !important;
  padding:0 12px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;

  border-radius:999px !important;
  border:1px solid #e5e7eb !important;
  background:#fff !important;
  color:inherit !important;

  width:auto !important;
  margin:0 !important;
  vertical-align:middle !important;
  box-sizing:border-box !important;

  text-decoration:none !important;
}

/* 3.1) Иконки — одинаковый размер */
:where(.header) :is(.contact-tab,#contactTab,.cart-top,#cartTop) :is(svg,.icon){
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  margin-right:6px !important;
}

/* 3.2) Между кнопками небольшой стабильный отступ */
:where(.header) :is(.contact-tab,#contactTab,.cart-top,#cartTop)
  + :is(.contact-tab,#contactTab,.cart-top,#cartTop){
  margin-left:8px !important;
}

/* 4) Перебиваем возможные глобальные .btn правила (ширина/маргины и т.п.) */
:where(.header) :is(.contact-tab,#contactTab,.cart-top,#cartTop).btn{
  width:auto !important;
  margin:0 !important;
  padding:0 12px !important;
}

/* 5) Мобильные ужатия: кнопки остаются на одной линии */
@media (max-width:640px){
  :where(.header) :is(.contact-tab,#contactTab,.cart-top,#cartTop){
    height:32px !important;
    padding:0 10px !important;
    font-size:13px !important;
  }
  /* скрываем второстепенное, если не помещается */
  .header .brand-url,
  .header .nav{ display:none !important; }
}
@media (max-width:380px){
  :where(.header) :is(.contact-tab,#contactTab,.cart-top,#cartTop){
    height:30px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }
}
/* ======================= /HEADER EQUALIZER ======================= */


/* === Checkout Modal === */
.checkout-modal{position:fixed;inset:0;display:none;z-index:10000}
.checkout-modal.open{display:block}
.checkout-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.checkout-card{position:relative;margin:clamp(12px,5vh,24px) auto;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);max-width:860px}
.checkout-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee}
.checkout-header h3{margin:0;font-size:20px}
.checkout-close{border:0;background:transparent;font-size:20px;cursor:pointer;line-height:1}

.checkout-body{padding:20px}
.checkout-body form label{display:block;font-size:14px;margin:0 0 12px}
.checkout-body form input[type="text"],
.checkout-body form input[type="tel"],
.checkout-body form input[type="search"]{width:100%;height:44px;border:1px solid #ddd;border-radius:10px;padding:0 12px;outline:none}
.checkout-body form input:focus{border-color:#d23c3c;box-shadow:0 0 0 3px rgba(210,60,60,.1)}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:1fr 1fr 1fr}
@media (max-width:720px){.grid.two,.grid.three{grid-template-columns:1fr}}

.delivery-method{border:1px solid #eee;border-radius:10px;padding:10px 12px;margin:12px 0}
.delivery-method legend{padding:0 6px;font-weight:600}
.delivery-method .radio{display:inline-flex;gap:8px;margin-right:16px;align-items:center}

.delivery-block{border:1px dashed #eee;border-radius:10px;padding:12px;margin:10px 0}
.pvz-actions{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.pvz-actions .small{height:38px;font-size:13px;padding:0 12px}
.pvz-list{max-height:320px;overflow:auto;border:1px solid #eee;border-radius:10px}
.pvz-item{padding:10px 12px;border-bottom:1px solid #f1f1f1;cursor:pointer}
.pvz-item:hover{background:#fafafa}
.pvz-item.selected{background:#fff1f1;border-left:4px solid #d23c3c}
.pvz-item h4{margin:0 0 6px;font-size:15px}
.pvz-item .meta{font-size:13px;opacity:.8}
.pvz-map-wrap{margin-top:10px;border:1px solid #eee;border-radius:10px;overflow:hidden}
.pvz-map-wrap iframe{width:100%;height:300px;border:0}

.agree{display:flex;align-items:flex-start;gap:10px;margin:8px 0 16px}
.agree a{color:#d23c3c;text-decoration:none;border-bottom:1px dashed #d23c3c}
.checkout-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}
.btn.primary{background:#d23c3c;color:#fff;border:0}
.btn.outline{background:#fff;border:1px solid #d23c3c;color:#d23c3c}
.btn{border-radius:10px;height:44px;padding:0 16px;cursor:pointer}

/* Error styles */
input:required:invalid{border-color:#e66}


/* === Cart review inside checkout === */
.cart-review{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:16px;background:#fff}
.cart-review h4{margin:0 0 8px 0;font-size:16px}
.cart-items{list-style:none;margin:0;padding:0}
.cart-items .item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 8px;border-top:1px solid #f3f4f6}
.cart-items .item:first-child{border-top:none}
.cart-items .name{font-weight:600}
.cart-items .unit-price{font-size:12px;color:var(--muted);margin-top:2px}
.cart-items .line-total{font-weight:700;justify-self:end}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;font-size:18px;line-height:1}
.qty-input{width:44px;height:32px;border:1px solid var(--border);border-radius:8px;text-align:center}
.cart-summary{margin-top:8px}
.cart-summary .row{display:flex;justify-content:space-between;padding-top:8px;border-top:1px dashed #e5e7eb}
.cart-empty{padding:6px 0}
@media (max-width:640px){
  .cart-items .item{grid-template-columns:1fr auto;grid-template-areas:"info remove" "qty line";}
  .cart-items .item .info{grid-area:info}
  .cart-items .item .qty{grid-area:qty}
  .cart-items .item .line-total{grid-area:line;justify-self:end}
}


/* === Checkout Modal Overflow Fix === */
.checkout-modal.open{display:flex !important; align-items:center; justify-content:center;}
.checkout-card{width:min(96vw, 860px); max-height:calc(100vh - 24px); display:flex; flex-direction:column; position:relative; z-index:1}
.checkout-body{padding:20px; overflow:auto; -webkit-overflow-scrolling:touch}
.checkout-actions{position:sticky; bottom:0; background:#fff; padding:12px 20px; margin-top:auto; border-top:1px solid #eee}

/* Mobile fullscreen layout */
@media (max-width:720px){
  .checkout-card{width:100vw; max-height:100vh; margin:0; border-radius:0}
  .checkout-body{padding:16px}
  .pvz-map-wrap iframe{height:220px}
}



/* === Pretty Quantity Controls ========================== */
:root{
  --qty-accent: #d23c3c;            /* основной цвет для +/- */
  --qty-border: #e5e7eb;
  --qty-shadow: rgba(210,60,60,.28);
}

.qty{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border:1px solid var(--qty-border);
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 10px rgba(17,24,39,.06);
  -webkit-tap-highlight-color:transparent;
}
.qty-btn{
  width:36px;height:36px;
  border:0;
  border-radius:999px;
  display:grid;place-items:center;
  background:var(--qty-accent);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease, opacity .2s ease;
  box-shadow:0 6px 16px var(--qty-shadow);
}
.qty-btn:hover{ transform:translateY(-1px); }
.qty-btn:active{ transform:translateY(0); box-shadow:0 3px 10px var(--qty-shadow); }
.qty-btn:focus-visible{ outline:none; box-shadow:0 0 0 6px rgba(210,60,60,.18), 0 6px 16px var(--qty-shadow); }

/* Поле количества */
.qty-input, #qty{
  width:56px;height:36px;
  border:0;
  background:transparent;
  text-align:center;
  font-weight:700;
  font-size:16px;
  outline:none;
  -moz-appearance:textfield;
}
/* убрать спиннеры у number */
#qty::-webkit-outer-spin-button,#qty::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Неактивное состояние */
.qty-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.qty[disabled], .qty.disabled{ opacity:.7; filter:grayscale(.1); }

/* Мобильная версия — увеличиваем тап-зоны */
@media (max-width:640px){
  .qty{ gap:8px; padding:6px; }
  .qty-btn{ width:44px;height:44px;font-size:22px; }
  .qty-input, #qty{ width:64px;height:44px;font-size:18px; }
}
/* ======================================================= */




/* === Qty Classic Reset (pixel-perfect) ==================================== */
.qty{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

.qty-btn{
  width:40px; height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:#d23c3c;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  box-shadow:none; outline:none;
  transition:transform .08s ease;
}
.qty-btn:active{ transform: translateY(1px); }

/* Поле количества — ровно по высоте как кнопки */
.qty-input, #qty{
  width:60px; height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  text-align:center;
  font-weight:700; font-size:18px; line-height:40px;
  margin:0; padding:0;
  -moz-appearance:textfield; appearance:textfield;
  font-variant-numeric: tabular-nums;
}
/* убираем спиннеры */
#qty::-webkit-outer-spin-button,#qty::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* В модалке оформления — те же размеры */
.checkout-modal .qty{ gap:8px; }
.checkout-modal .qty-btn{ width:40px; height:40px; border-radius:12px; font-size:22px; }
.checkout-modal .qty-input{ width:60px; height:40px; line-height:40px; }

@media (max-width:640px){
  .qty-btn{ width:44px; height:44px; font-size:22px; }
  .qty-input, #qty{ width:66px; height:44px; line-height:44px; font-size:18px; }
  .checkout-modal .qty-btn{ width:44px; height:44px; }
  .checkout-modal .qty-input{ width:66px; height:44px; line-height:44px; }
}
/* ========================================================================= */




/* === Mobile Modal Safe-Area Fix + Smaller Qty =========================== */
/* Ensure modal takes full small viewport height and is fully visible */
.checkout-modal.open{ display:flex !important; align-items:stretch; justify-content:center; }

/* Desktop/card defaults */
.checkout-card{ max-height: min(100dvh, 100svh); display:flex; flex-direction:column; }

/* Sticky header and safe-area paddings */
.checkout-header{ position: sticky; top: 0; background:#fff; z-index: 2; padding-top: 10px; }
.checkout-close{ z-index: 3; }

.checkout-body{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; }

.checkout-actions{
  position: sticky; bottom: 0; background:#fff; border-top:1px solid #eee;
  padding:12px 20px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 2;
}

/* Mobile fullscreen */
@media (max-width: 720px){
  .checkout-card{
    width:100vw; height:100svh; max-height:100svh; margin:0; border-radius:0;
  }
  .checkout-header{
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .checkout-close{
    position: absolute;
    right: max(12px, env(safe-area-inset-right, 0px));
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
  .checkout-body{ padding:16px; }
}

/* Smaller, pixel-perfect qty controls (both product and modal) */
.qty-btn{ width:36px; height:36px; font-size:20px; border-radius:12px; }
.qty-input, #qty{ width:56px; height:36px; line-height:36px; font-size:16px; }

@media (max-width:640px){
  .qty-btn{ width:34px; height:34px; font-size:18px; }
  .qty-input, #qty{ width:52px; height:34px; line-height:34px; font-size:16px; }
}
/* ======================================================================= */




/* --- Reviews section --- */
.section.reviews{padding:48px 0;background:#fff}
.section.reviews .section-title{font-size:28px;line-height:1.2;margin:0 0 16px}
.reviews .rating-summary{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.reviews .rating-value{font-size:36px;font-weight:700}
.reviews .rating-stars .star{display:inline-flex;vertical-align:middle;color:#F59E0B}
.review-score{margin-left:6px;color:#6B7280}
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.review-card{border:1px solid #E5E7EB;border-radius:12px;padding:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#111827}
.review-name{font-weight:600}
.review-date{font-size:12px;color:#6B7280}
.review-rating{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.stars .star{display:inline-flex;color:#F59E0B}
.review-text{color:#374151;margin:0}
.btn.show-more{margin-top:16px;display:inline-block;border:1px solid #E5E7EB;border-radius:10px;padding:10px 14px;background:#f9fafb;cursor:pointer}
.btn.show-more:hover{background:#f3f4f6}
@media (max-width: 900px){
  .reviews-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .reviews-grid{grid-template-columns:1fr}
  .section.reviews .section-title{font-size:24px}
  .reviews .rating-value{font-size:32px}
}



/* --- Review form --- */
.review-form{border:1px solid #E5E7EB;border-radius:12px;padding:16px;margin:14px 0 24px;background:#fff}
.review-form .form-title{margin:0 0 12px;font-size:20px}
.review-form .form-row{margin-bottom:12px}
.review-form .form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.review-form label{display:block;font-size:14px;margin-bottom:6px;color:#374151}
.review-form input[type="text"], .review-form textarea{width:100%;padding:10px;border:1px solid #D1D5DB;border-radius:10px;outline:none}
.review-form input[type="text"]:focus, .review-form textarea:focus{border-color:var(--accent,#FF7E0D);box-shadow:0 0 0 3px rgba(255,126,13,0.15)}
.review-form .btn.submit{display:inline-block;border:1px solid #E5E7EB;border-radius:10px;padding:10px 14px;background:#111827;color:#fff;cursor:pointer}
.review-form .btn.submit:hover{opacity:.9}
.review-form .form-note{font-size:12px;color:#6B7280;margin-top:8px}
.stars-input{display:flex;flex-direction:row-reverse;gap:4px}
.stars-input input{display:none}
.stars-input label{cursor:pointer;font-size:22px;line-height:1}
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label{color:#F59E0B}
@media (max-width: 700px){ .review-form .form-row.two{grid-template-columns:1fr} }