/* custom-product.css — product-card customisations (non-calc art-trade look + calc-parity overrides).
   Renamed from arttrade-card.css. Loaded via <link> in product.twig after main.css, before
   ekspopanel-calculator.css. Tracked in git normally (see .gitignore stylesheet allowlist). */
#product-product:not(.ep-calculator) .us-price-block .us-price-actual{
  font-size:28px; font-weight:700; color:#0B8700; line-height:1.1;
}
#product-product:not(.ep-calculator) .us-product-action-right{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin:8px 0 !important; padding: 0 10px;
}
#product-product:not(.ep-calculator) .us-product-advantages-item{
  border:1px solid #e4e7ec; border-radius:8px; padding:12px; gap:10px;
  align-items:flex-start; justify-content:flex-start;
}
#product-product:not(.ep-calculator) .us-product-advantages-icon{
  flex:0 0 auto; font-size:20px; color:#9aa0a6;
}
#product-product:not(.ep-calculator) .us-product-advantages-link{
  font-weight:600; display:block;
}
#product-product:not(.ep-calculator) .us-product-advantages-text{
  margin:2px 0 0; font-size:13px; color:#6b7280;
}
#product-product:not(.ep-calculator) .us-product-right > .us-product-action-right{
  order: 2;
}
/* black full-width cart button */
#product-product:not(.ep-calculator) #button-cart{
  width:100%; background:#1a1a1a; border-color:#1a1a1a; color:#fff;
}
#product-product:not(.ep-calculator) #button-cart:hover{
  background:#000; border-color:#000; color:#fff;
}
/* hide quick-order ("Швидке замовлення") */
#product-product:not(.ep-calculator) .us-product-btn.button-one-click{ display:none; }
/* hide "Знайшли дешевше?" */
#product-product:not(.ep-calculator) .oct-popup-found-cheaper-link{ display:none; }
/* click-tabs: show only the active pane */
/* Calc-parity S1: de-scoped from :not(.ep-calculator) -> applies to calc too (unified in-place tabs) */
#product-product .us-tab-pane{ display:none; }
#product-product .us-tab-pane.us-tab-active{ display:block; }
/* equal-height advantage cards (match art-trade uniform grid) */
#product-product:not(.ep-calculator) .us-product-action-right{
  grid-auto-rows: 1fr;
}
/* breathing room between cart button and one-click form */
#product-product:not(.ep-calculator) .us-product-one-click{
  margin-top: 14px;
}
/* densify: remove divider line + big gap below info/price (recon: .us-product-info border-bottom + margin-bottom) */
#product-product:not(.ep-calculator) .us-product-info{
  border-bottom: 0; margin-bottom: 8px;
}
/* densify: pull advantages up under price */
#product-product:not(.ep-calculator) .us-product-action-right{
  margin: 8px 0 0; gap: 8px;
}
/* compact advantage cards */
#product-product:not(.ep-calculator) .us-product-advantages-item{
  padding: 10px;
}
#product-product:not(.ep-calculator) .us-product-advantages-text{
  margin-top: 2px; line-height: 1.3;
}
/* --- Phase 4.3: advantage card density (cascade overrides) --- */
/* 1+2: fill the grid track, drop theme's extra row margin */
#product-product:not(.ep-calculator) .us-product-advantages-item{
  width: auto;
  margin-bottom: 0;
  /* 4: beat bootstrap inline !important — pack content top-left */
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
/* 3: let the text column use full card width */
#product-product:not(.ep-calculator) .us-product-advantages-cont{
  width: auto;
}
/* 5: retarget the actual glyph <i>, not the wrapper div */
#product-product:not(.ep-calculator) .us-product-advantages-icon i{
  font-size: 20px;
  color: #9aa0a6;
}
/* --- Phase 4.4: drop rating, keep wishlist/compare on the right --- */
#product-product:not(.ep-calculator) .us-product-rating{ display:none !important; }
#product-product:not(.ep-calculator) .us-product-rating-wishlist{ justify-content:flex-end !important; border-bottom:0; }
/* --- Phase 4.5: hide the whole top icon row (wishlist/compare) --- */
#product-product .us-product-rating-wishlist{ display:none !important; }
/* --- Phase 4.6: inline buy row [stock][qty][cart] --- */
/* lift the narrow column cap so the row fits */
#product-product:not(.ep-calculator) .us-product-action-left{ max-width:none; }
/* the row */
#product-product:not(.ep-calculator) .us-buy-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px;
}
/* stock badge (green, like art-trade "В наявності") */
#product-product:not(.ep-calculator) .us-buy-row-stock{
  display:inline-flex; align-items:center; white-space:nowrap;
  color:#0B8700; font-weight:600;
}
#product-product:not(.ep-calculator) .us-buy-row-stock.us-out-of-stock{ color:#c0392b; }
/* qty wrapper inside the row: drop its block width, hide the "Кількість:" label */
#product-product:not(.ep-calculator) .us-buy-row .us-product-quantity{ margin:0; }
#product-product:not(.ep-calculator) .us-buy-row .product-quantity-label{ display:none; }
/* cart button: stop being full-width inside the row, size to content */
#product-product:not(.ep-calculator) .us-buy-row #button-cart{
  width:auto; flex:1 1 auto; min-width:160px; margin:0;
}
/* --- Phase 4.7a: buy row — green pill + full-width spread --- */
#product-product:not(.ep-calculator) .us-buy-row{
  justify-content: space-between; gap: 12px;
}
#product-product:not(.ep-calculator) .us-buy-row-stock{
  background:#e8f5e9; border:1px solid #c8e6c9; border-radius:8px;
  padding:10px 16px; color:#0B8700; font-weight:600;
}
#product-product:not(.ep-calculator) .us-buy-row-stock::before{
  content:"\2713"; font-weight:700; margin-right:6px;
}
#product-product:not(.ep-calculator) .us-buy-row-stock.us-out-of-stock{
  background:#fdecea; border-color:#f5c6c2; color:#c0392b;
}
#product-product:not(.ep-calculator) .us-buy-row #button-cart{
  flex:0 0 auto; min-width:200px;
}

/* --- Phase 4.7b: one-click form — hide header, field+button inline, dark-red button --- */
/* hide the icon + title/subtitle header (d-flex carries !important, so override needs it) */
#product-product .us-product-one-click .us-product-one-click-top{ display:none !important; }
/* bottom row spacing to match the buy row above; lift theme's 200px cap so the grid can span full width */
#product-product .us-product-one-click .us-product-one-click-bottom{ margin-top:0; max-width:none; }
/* input + button on one line, input takes the slack */
#product-product .us-product-one-click .input-group{
  display:flex; width:100%; flex-wrap:nowrap;
}
#product-product .us-product-one-click .one_click_input{
  flex:1 1 auto;
}
#product-product .us-product-one-click .input-group-btn{
  flex:0 0 auto;
}
/* dark-red button (ekowall brand) — target .us-product-one-click-btn, NOT .us-module-btn.
   color !important to beat .us-module-btn{color:#333!important}; background/border kept !important for a clean win. */
#product-product:not(.ep-calculator) .us-product-one-click-btn{
  background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; white-space:nowrap; min-width:200px;
}
#product-product:not(.ep-calculator) .us-product-one-click-btn:hover{
  background:var(--accent-bright) !important; border-color:var(--accent-bright) !important; color:#fff !important;
}
/* --- Phase 4.8: align buy-row + one-click into a shared 2-column grid --- */
/* Phase B: stock pill left the row (moved to the price block) -> tracks 1fr | 200px.
   grid-column resets to 1|2 so no empty `auto` track survives (7.1 implicit-track lesson). */
#product-product:not(.ep-calculator) .us-buy-row{
  display:grid; grid-template-columns:1fr 200px; gap:12px; align-items:center;
}
#product-product:not(.ep-calculator) .us-buy-row .us-product-quantity{ grid-column:1; justify-self:start; margin:0; }
#product-product:not(.ep-calculator) .us-buy-row #button-cart{ grid-column:2; width:100%; min-width:0; margin:0; }
/* one-click row: [input][button] -> tracks 1fr | 200px (button aligns under cart) */
/* S6: de-scoped to ALL products (was :not(.ep-calculator)) so calc's one-click uses the same 1fr 200px grid —
   input under the qty cell, Купити under the cart. Calc's cart is no longer full-width, so 200px now aligns.
   Wins over the S3 inline-flex (.input-group display:flex) by equal specificity + later source order. */
#product-product .us-product-one-click .input-group{
  display:grid; grid-template-columns:1fr 200px; gap:12px; align-items:center; width:100%;
}
#product-product .us-product-one-click .one_click_input{ grid-column:1; width:100%; }
#product-product .us-product-one-click .input-group-btn{ grid-column:2; }
#product-product .us-product-one-click-btn{ width:100%; min-width:0; }
#product-product .us-product-one-click{ margin-top:12px; }
/* --- Phase 6.1: out-of-stock option values greyed, visual only (no purchase block) --- */
#product-product:not(.ep-calculator) .options-box .radio label.oos,
#product-product:not(.ep-calculator) option.oos{
  opacity:.45; pointer-events:none; cursor:not-allowed;
  text-decoration:line-through; background:#f3f4f6; color:#9aa0a6;
}
/* --- Phase 7.1: related products carousel (slick) --- */
/* neutralize bootstrap col widths once slick controls slide sizing + gutter */
#product-product .us-pcarousel.slick-initialized .us-item{
  max-width:none; flex:0 0 auto; padding-left:8px; padding-right:8px;
}
/* contain any row negative-margin overflow */
#product-product .us-pcarousel.slick-initialized{
  margin-left:0; margin-right:0;
}
/* container positions arrows */
#product-product .us-pcarousel{ position:relative; }
/* arrows (slick-theme.css not loaded -> style our own) */
#product-product .us-pcarousel .us-rel-arrow{
  position:absolute; top:40%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border:1px solid #e4e7ec; border-radius:50%;
  background:#fff; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
#product-product .us-pcarousel .us-rel-arrow:hover{ background:#f3f4f6; }
#product-product .us-pcarousel .slick-prev.us-rel-arrow{ left:-8px; }
#product-product .us-pcarousel .slick-next.us-rel-arrow{ right:-8px; }
#product-product .us-pcarousel .slick-prev.slick-disabled,
#product-product .us-pcarousel .slick-next.slick-disabled{ opacity:.35; cursor:default; }
/* --- Phase 7.2: carousel polish --- */
/* side padding so first/last card aren't flush to the edges + room for arrows */
#product-product .us-pcarousel.slick-initialized{
  padding-left:48px; padding-right:48px;
}
/* keep arrows inside the new padding gutter, not overlapping cards */
#product-product .us-pcarousel .slick-prev.us-rel-arrow{ left:4px; }
#product-product .us-pcarousel .slick-next.us-rel-arrow{ right:4px; }
/* center product image within each slide (real wrapper = .us-module-img)
   + Phase A: mirror the catalog 4:3 aspect-ratio box (main.css L8512-8535, .product-grid
   scope doesn't reach the carousel). No !important: this (1,4,0) selector beats the global
   .us-module-img / .us-module-row img rules by specificity. */
#product-product .us-pcarousel .us-item .us-module-img{
  display:flex; align-items:center; justify-content:center;
  height:auto; aspect-ratio:1 / 1; max-width:240px;
  margin-left:auto; margin-right:auto; overflow:hidden;
}
#product-product .us-pcarousel .us-item .us-module-img img{
  margin-left:auto; margin-right:auto;
  width:100%; height:100%; object-fit:contain;
}

/* ============================================================
   Phase 7.1 — MOBILE overrides. non-calc only. No !important (recon T4 clean).
   ============================================================ */
@media (max-width: 575px) {
  /* buy-row + one-click: collapse the 2/3-col tracks to a single column.
     one-click selector isolated to the form's input-group (NOT the qty stepper,
     which is .btn-group.us-product-quantity, NOR the date/time option input-groups,
     which sit in the options box, not under .us-product-one-click) */
  #product-product:not(.ep-calculator) .us-buy-row,
  #product-product:not(.ep-calculator) .us-product-one-click .input-group {
    grid-template-columns: 1fr;
  }
  /* reset child line-placements (grid-column:1/2/3) so the collapse to 1fr does not
     spawn implicit auto tracks that keep the cart button / one-click button in a 2nd-3rd
     column and overflow the row. base width:100% on .us-product-one-click-btn (L159) and
     #button-cart (L152) already make them full-width — no per-button width here. */
  #product-product:not(.ep-calculator) .us-buy-row .us-product-quantity,
  #product-product:not(.ep-calculator) .us-buy-row #button-cart,
  #product-product:not(.ep-calculator) .us-product-one-click .one_click_input,
  #product-product:not(.ep-calculator) .us-product-one-click .input-group-btn {
    grid-column: auto;
  }
  /* (Calc mobile buy-row rules moved OUT of this block — the buy-zone is now a flex layout; its base +
     mobile rules live together further down, with the @media AFTER the base so source order is correct.) */
  #product-product.ep-calculator .us-product-one-click .input-group { grid-template-columns: 1fr; }
  #product-product.ep-calculator .us-product-one-click .one_click_input,
  #product-product.ep-calculator .us-product-one-click .input-group-btn {
    grid-column: auto;
  }
  /* carousel: 48px side gutter is wasted at 1-up (arrows off =<575) -> trim */
  #product-product .us-pcarousel {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* slick dots (only rendered =<576; slick-theme.css not shipped -> style our own).
     ul.slick-dots is appended inside .us-pcarousel. Small horizontal circles,
     hide the "1 2 3..." number text, active = green #0B8700 (price/stock token). */
  #product-product .us-pcarousel .slick-dots {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    /*margin: 16px 0 0;*/
    padding: 0;
  }
  #product-product .us-pcarousel .slick-dots li {
    width: auto; height: auto; margin: 0;
  }
  #product-product .us-pcarousel .slick-dots li button {
    font-size: 0;            /* hides the "1 2 3..." number text */
    width: 10px; height: 10px;
    padding: 0; border: 0;
    border-radius: 50%;
    background: #cfcfcf;
    cursor: pointer;
    transition: background .15s;
  }
  #product-product .us-pcarousel .slick-dots li.slick-active button {
    background: #0B8700;     /* matches price/stock green token */
  }
}

/* advantages: 1fr 1fr -> 1fr on small phones. TUNABLE threshold (default 480; alt 380). */
@media (max-width: 480px) {
  #product-product:not(.ep-calculator) .us-product-action-right {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Card-parity Phase A — carousel cards (related + viewed). non-calc, no !important.
   Item 3: card buttons black (match #button-cart), OOS stays grey.
   Item 4: card border/shadow mirror the catalog .product-grid card (main.css L8553-8562).
           (image 4:3 box is merged into the Phase 7.2 .us-module-img block above.)
   ===================================================================== */
/* Item 3 — carousel "ДО КОШИКА" buttons -> black like the main cart button
   (.us-module-cart-btn base = #666 / OOS .us-no-stock = #cecece, main.css L1957/L1970;
   text is #FFF !important already, so color is left untouched). */
#product-product .us-pcarousel .us-module-cart-btn{ background:#1a1a1a; }
#product-product .us-pcarousel .us-module-cart-btn:hover{ background:#000; }
/* preserve the out-of-stock signal — keep OOS carousel buttons grey (more specific + later -> wins) */
#product-product .us-pcarousel .us-no-stock .us-module-cart-btn{ background:#cecece; }

/* Item 4 — carousel card outline/shadow mirror catalog (main.css L8553-8562).
   No !important: this (1,3,0) selector beats the global .us-module-item shadow by specificity. */
#product-product .us-pcarousel .us-module-item{
  border:1px solid #D8DEE8; border-radius:8px;
  box-shadow:0 3px 12px rgba(0,0,0,.10);
  transition:box-shadow .2s ease, transform .2s ease;
}
#product-product .us-pcarousel .us-module-item:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.14); transform:translateY(-2px);
}

/* ===== Card-parity A.2 — tab nav grid =====
   Restyle the product tab nav as an art-trade button grid, active tab dark, inactive light grey.
   Calc-parity S1: de-scoped from :not(.ep-calculator) -> applies to BOTH calc and non-calc (unified
   tabs). Grid is now count-agnostic (grid-auto-flow:column / auto-columns:1fr) so any N tabs make one
   even row — calc has a different tab count (Характеристики hidden), and this also closes the A.2
   repeat(4,1fr) caveat for non-calc. */
#product-product .us-product-description-nav {
  display: grid !important; /* one justified !important: beats bootstrap .d-flex on the <ul>; flex-direction utils go inert under grid. Same pattern as L67/68/124/140. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* N tabs -> N even columns, one row (was repeat(4,1fr)) */
  gap: 1px;
  background: #d8dee8;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  #product-product .us-product-description-nav { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; } /* 2-up, wraps */
}
#product-product .us-product-nav-item {
  margin: 0;
  padding: 12px 10px;
  /* A.2 fix: flex-center the label and stretch the cell to the grid-row height so the
     dark active <li> covers a row made tall by a 2-line neighbour (no #d8dee8 gap below).
     No !important: the <li> carries no bootstrap flex utility (those are on the <ul> only). */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  text-align: center; /* centers the lines INSIDE a wrapped 2-line label (flex centers the span as a block, not its inner lines) */
  background: #f5f6f7;
  cursor: pointer;
}
#product-product .us-product-nav-item span {
  color: #333;
  font-size: 15px;
  font-weight: 600; /* CLAUDE.md: weight 500 is NOT loaded — use 600 (prompt said 500) */
  text-decoration: none;
  /* S2 Step 0: kill the inherited `transition: all .15s` (main.css:3354). The active-text-white rule
     (#product-product .us-product-nav-item-active span{color:#fff}) already WINS at rest — verified live —
     but `all` was animating color #333->#fff over .15s on click, so a snapshot mid-switch showed an
     intermediate grey (~rgb(202,202,202)). Removing the transition makes the active text snap to white
     instantly. Shared rule -> fixes calc and non-calc. */
  transition: none;
}
#product-product .us-product-nav-item span:after { display: none; } /* kill the red underline indicator */
#product-product .us-product-nav-item:not(.us-product-nav-item-active):hover { background: #eceef0; }
#product-product .us-product-nav-item-active { background: #3a3f4a; }
#product-product .us-product-nav-item-active span { color: #fff; }
/* Calc-parity S1 reconcile: keep the Характеристики tab hidden on calc. The old hide in
   ekspopanel-calculator.css (L549) keyed on :has(span[onclick*="us-product-attributes"]); S1
   removed that scroll onclick, so that selector no longer matches. Re-hide via the stable
   data-tab-target so the attributes pane (display:none on calc) leaves NO orphan grid cell. */
#product-product.ep-calculator .us-product-nav-item[data-tab-target="us-product-attributes"] { display: none; }

/* =====================================================================
   Phase B — non-calc card moves. No !important. Calc untouched (:not scope).
   ===================================================================== */
/* Move A — stock pill sits in the price row: [price] ......... [pill].
   .us-price-block is already `d-flex align-items-center`; just spread + full width. */
#product-product:not(.ep-calculator) .us-price-block{
  justify-content: space-between; width: 100%;
}
/* Move B — min-order notice as an understated light-green banner above the buy-row
   (matches art-trade: tinted fill + soft border, not bold solid green). 14px/600 per CLAUDE.md.
   Calc-parity: de-scoped from :not(.ep-calculator) -> ALL products, so the calc min-banner gets the
   SAME green styling (was falling back to the plain base .us-product-minimum). (1,1,0) beats base (0,1,0). */
#product-product .us-min-banner{
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 12px; padding: 12px 16px;
  background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 8px;
  color: #0B8700; font-size: 14px; font-weight: 600;
}
#product-product .us-min-banner i{ color: #0B8700; }

/* ===== Calc visual alignment (.ep-calculator) — INVERSION: targets calc, COSMETIC ONLY =====
   These rules deliberately target the CALC card to nudge it toward the non-calc art-trade look.
   ONLY color / font-weight / border / radius / background — never layout, the widget, or JS.
   Cascade: ekspopanel-calculator.css loads AFTER this file (product.twig L1322 vs L6), so these
   rules carry a #product-product.ep-calculator id-prefix to win on specificity alone. */

/* A — price: mirror non-calc green (.us-price-actual = #0B8700/700). Size kept at 20px — a 28px
   bump would grow/wrap the flex ep-razom-row (off-limits). Position untouched. */
#product-product.ep-calculator .ep-razom-price{ color:#0B8700; font-weight:700; }

/* B — stock: mirror the non-calc green + ✓. Inline ::before glyph ONLY — no padding/border/bg
   (a pill would change the flex row height / right-edge alignment). */
#product-product.ep-calculator .ep-razom-stock{ color:#0B8700; font-weight:600; }
#product-product.ep-calculator .ep-razom-stock::before{ content:"\2713\00a0"; }

/* C — advantage cards: mirror the non-calc card appearance (white #fefefe, soft #e4e7ec border,
   radius 8px, muted text #6b7280 / icon #9aa0a6). Position (below the description) + the 3-col
   strip grid are KEPT — appearance only, no padding/grid change. */
#product-product.ep-calculator .ep-advantages-item{
  background:#fefefe; border:1px solid #e4e7ec; border-radius:8px;
}
#product-product.ep-calculator .ep-advantages-text{ color:#6b7280; font-size:13px; }
#product-product.ep-calculator .ep-advantages-icon{ background:transparent; color:#9aa0a6; font-size:20px; }

/* D — buttons (recolor only; width / layout untouched).
   Cart -> black like non-calc #button-cart (beats dynamic_stylesheet_0.css .us-product-btn-active
   = rgb(162,0,0)). One-click -> non-calc red rgb(162,0,0) (background only, per brief). */
#product-product.ep-calculator #button-cart{ background:#1a1a1a; border-color:#1a1a1a; }
#product-product.ep-calculator #button-cart:hover{ background:#000; border-color:#000; }
#product-product.ep-calculator .us-product-one-click-btn{ background:var(--accent); }
/* Calc-parity S1: white text on the red one-click button. Uses the important flag (justified) to
   beat the base .us-module-btn color rule, which is itself flagged; same pattern as the non-calc
   one-click button (L140). */
#product-product.ep-calculator .us-product-one-click-btn{ color:#fff !important; }

/* ===== Calc-parity S5: buy-zone restructure (price+stock TOP, qty+cart row) — COSMETIC, no widget JS =====
   New twig containers .ep-top-price (above swatches) + .ep-buy-row (by the cart). The moved
   #ep-razom-price-slot / #ep-razom-qty-slot keep their ids → the widget JS keeps updating them. */
/* .ep-top-price — mirror non-calc .us-price-block: big green price left, stock pill right, one row */
#product-product.ep-calculator .ep-top-price{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:12px; margin:0 0 16px;
}
/* S6: price mirrors non-calc .us-price-actual EXACTLY (live computed): grey box #f6f6f6, padding 5px 12px,
   28px; colour/weight (#0B8700/700) come from S1 calc-align. (Non-calc box has radius 0 → matched, no radius.) */
#product-product.ep-calculator .ep-top-price .ep-razom-price{
  font-size:28px; line-height:1.1; background:#f6f6f6; padding:5px 12px;
}
/* S6: stock pill mirrors non-calc .us-buy-row-stock EXACTLY (live computed): #e8f5e9 / 1px #c8e6c9 / radius 8px /
   padding 10px 16px / 14px / 600. Colour #0B8700 + ✓ ::before from S1 calc-align. */
#product-product.ep-calculator .ep-top-price .ep-razom-stock{
  background:#e8f5e9; border:1px solid #c8e6c9; border-radius:8px;
  padding:10px 16px; font-size:14px; font-weight:600; white-space:nowrap;
}
/* ===== Buy-zone: FLEX layout (replaces the old grid — grid's fixed 200px track + min-content button
   overflowed the 342px card on real ≤412px devices; the base grid also lost the @media override by source
   order). Structure: .ep-buy-row > [.ep-buy-main (qty + total) , #button-cart]. ===== */
/* Base: one row when it fits, AUTO-WRAP when it doesn't (no magic breakpoint — reacts to available width,
   so it also handles longer sums like "29 400 грн"). */
#product-product.ep-calculator .ep-buy-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
}
#product-product.ep-calculator .ep-buy-main{
  flex:1000 1 auto;                 /* grow-ratio 1000 hogs free space → cart stays ~200 inline */
  display:flex; align-items:center; gap:16px;
  /* NO min-width:0 → the container holds its content; the nowrap sum can never be squeezed under the cart */
}
#product-product.ep-calculator .ep-buy-main .ep-razom-qty{ flex:0 0 auto; }
#product-product.ep-calculator .ep-buy-main .ep-razom-total{ flex:1 1 auto; text-align:right; white-space:nowrap; }
#product-product.ep-calculator .ep-buy-row #button-cart{
  flex:1 0 200px;                   /* ~200px inline (main hogs free space); full-width when wrapped to its own row */
  width:auto; max-width:none; min-width:0;   /* clear prior width:100%/max-width:100% patches */
}
/* "Разом: {total}" cosmetic — secondary figure; the top per-unit price stays the dominant green one. */
#product-product.ep-calculator .ep-razom-total{
  font-size:16px; font-weight:600; color:#1a1a1a; white-space:nowrap;
}
/* Mobile (≤575): wrap — row 1 = [qty] [sum] centered (no "Разом:" label); row 2 = cart full container width.
   @media AFTER the base rules so it wins by source order (the bug that broke the old grid). */
@media (max-width:575px){
  #product-product.ep-calculator .ep-buy-row{ flex-wrap:wrap; justify-content:center; row-gap:12px; }
  #product-product.ep-calculator .ep-buy-main{ flex:0 1 auto; width:100%; justify-content:center; }
  #product-product.ep-calculator .ep-buy-main .ep-razom-total{ flex:0 0 auto; text-align:center; }
  #product-product.ep-calculator .ep-total-label{ display:none; }
  #product-product.ep-calculator .ep-buy-row #button-cart{ flex:1 0 100%; width:100%; }
}
/* re-create the qty-stepper inner rules that were .ep-razom-row-descendant-scoped in
   ekspopanel-calculator.css (L396/L400) — needed now the qty slot left .ep-razom-row */
#product-product.ep-calculator #ep-razom-qty-slot .ep-qty-row{ margin:0; }
#product-product.ep-calculator #ep-razom-qty-slot .ep-qty-row .ep-label{ display:none; }

/* ===== S6-fix: one-click row alignment on calc =====
   The two right-column buttons (ДО КОШИКА / Купити) already align — both sit in fixed 200px grid tracks
   (verified live: left edges 997/996). The row LOOKED off because the one-click input was capped by
   `#one_click_input{max-width:200px}` (main.css), so on calc — where the 1fr cell is ~303px (wider than
   non-calc) — the input stopped at 200px and left a gap before the button column. Lift the cap on calc so
   the input fills the 1fr cell up to the button column, mirroring the non-calc main card. */
#product-product.ep-calculator #one_click_input{ max-width:none; width:100%; }

/* ep-design: remove the 20px gap above the cart button (ported from a manual main.css edit that
   commented out .us-product-btn{margin-top:20px} + flipped the whole file's line endings).
   Kept here so the theme core stays untouched and the change is version-controlled. Scoped to the
   buy-zone rows (NOT global) because .us-product-btn is also used on the wishlist page + quick-view
   popup, where the 20px spacing is intended. (0,2,0) beats main.css .us-product-btn (0,1,0).
   Non-calc cart already had margin:0 (L153); this also zeroes the calc cart in .ep-buy-row. */
.us-buy-row .us-product-btn,
.ep-buy-row .us-product-btn { margin-top: 0; }

/* ep-design: per-unit headline wrapper (the "/шт" qualifier was dropped; wrapper kept, harmless —
   .ep-top-price uses space-between so price-group stays left, stock pill right). */
#product-product.ep-calculator .ep-price-wrap{ display:inline-flex; align-items:baseline; gap:4px; }

/* Match #button-cart height to the one-click "Купити" button (.us-product-one-click-btn renders 40px:
   padding 8px / font 16px / line-height 24px). The widget CSS forces #button-cart{height:44px}
   (ekspopanel-calculator.css), 4px taller; give the cart the same padding-based box so both read 40px.
   id-prefix (2,1,0) beats the widget's (1,2,0). Black bg / width / label / weight unchanged. Global
   (calc-scoped, outside the media query) — the 44px applied on desktop too. */
#product-product.ep-calculator #button-cart{
  height: auto !important; padding: 8px 20px !important; font-size: 16px !important; line-height: 24px !important;
}

/* ===== Non-calc (min>1): buy-zone flex — per-unit top + "Разом" total near qty, calc-style responsive
   layout (one row when it fits, auto-wrap, cart ~200px inline / full-width wrapped). Appended last so it
   supersedes the earlier Phase-B grid rules on .us-buy-row by source order. ===== */
#product-product:not(.ep-calculator) .us-buy-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
#product-product:not(.ep-calculator) .us-buy-main{ flex:1000 1 auto; display:flex; align-items:center; gap:16px; }
#product-product:not(.ep-calculator) .us-buy-main .us-product-quantity{ flex:0 0 auto; }
#product-product:not(.ep-calculator) .us-buy-main .us-razom-total{ flex:1 1 auto; text-align:right; white-space:nowrap; font-size:16px; font-weight:600; color:#1a1a1a; }
#product-product:not(.ep-calculator) .us-buy-row #button-cart{ flex:1 0 200px; width:auto; max-width:none; min-width:0; }
@media (max-width:575px){
  #product-product:not(.ep-calculator) .us-buy-row{ justify-content:center; }
  #product-product:not(.ep-calculator) .us-buy-main{ flex:0 1 auto; width:100%; justify-content:center; }
  #product-product:not(.ep-calculator) .us-buy-main .us-razom-total{ flex:0 0 auto; text-align:center; }
  #product-product:not(.ep-calculator) .us-total-label{ display:none; }
  #product-product:not(.ep-calculator) .us-buy-row #button-cart{ flex:1 0 100%; width:100%; }
}