/* ─── Ekspopanel Calculator Widget ─── */

#ep-calculator {
    margin-bottom: 18px;
}

/* Option group */
.ep-group {
    margin-bottom: 14px;
}

.ep-label {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin-bottom: 7px;
}

.ep-star {
    color: #c00;
}

/* Chip buttons container */
.ep-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 3-column grid for size option */
.ep-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* Base chip button */
.ep-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.3;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    cursor: pointer;
    border-radius: 4px;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    white-space: nowrap;
    text-align: center;
}

.ep-btn:hover:not(.ep-disabled):not(.ep-active) {
    border-color: #999;
    background: #fafafa;
}

/* Active (selected) state */
.ep-btn.ep-active {
    background: #222;
    color: #fff;
    border-color: #222;
    font-weight: 600;
}

.ep-btn.ep-active .ep-btn-sub {
    color: #ccc;
}

/* Disabled (unavailable) state */
.ep-btn.ep-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sub-label inside insert buttons (price per slot) */
.ep-btn-sub {
    font-size: 11px;
    font-weight: 400;
    color: #888;
    margin-top: 2px;
}

/* Insert buttons — allow wrapping for long labels */
.ep-ins-buttons {
    flex-wrap: wrap;
}

.ep-ins-btn {
    min-width: 120px;
}

/* ─── Price breakdown box ─── */

#ep-price-box {
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 6px;
}


.ep-price-em {
    font-size: 20px;
    font-weight: 700;
    color: #c00;
}

.ep-total-row {
    font-size: 15px;
    color: #222;
}

.ep-price-total {
    font-size: 26px;
    font-weight: 700;
    color: #c00;
}

/* ─── Quantity row ─── */

.ep-qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.ep-qty-row .ep-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.ep-qty-group {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.ep-qty-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    border: none;
    background: #f5f5f5;
    color: #222;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}

.ep-qty-btn:hover {
    background: #e8e8e8;
}

.ep-qty-display {
    min-width: 40px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 0 8px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    line-height: 36px;
    display: inline-block;
}

/* ─── Mobile adjustments ─── */

@media (max-width: 575px) {
    .ep-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .ep-btn {
        font-size: 13px;
        padding: 7px 10px;
    }

    .ep-ins-btn {
        min-width: 100px;
        font-size: 12px;
    }

    .ep-price-total {
        font-size: 22px;
    }

    .ep-qty-row {
        flex-wrap: wrap;
    }
}

/* ─── Hide the internal calculator tag from the product tags paragraph ─── */
.us-product-tags a[href*="tag=ekspopanel-calculator"] {
    display: none;
}

/* ─── Hide OC option form-groups used only for order data (slots/breakdown/hash) ─── */
.ep-hidden-option {
    display: none !important;
}

/* ─── Validation error banner below the price box ─── */
#ep-errors {
    background: #fff3cd;
    color: #7d6608;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
}

/* ============================================================
   ekspopanel-design Step 1: prevent FOUC of the hidden options box
   The legacy #us-product-options-box holds the material/color/size/
   step/insert radio inputs. Calculator JS runs after the DOM paints
   and calls $('#us-product-options-box').hide(), which causes a
   visible flicker. This CSS synchronously hides it for calculator
   products only. Inputs remain in the DOM so buildOcMap() can read
   them; only visibility is affected.
   ============================================================ */
.ep-calculator #us-product-options-box { display: none !important; }

/* ============================================================
   ekspopanel-design Step 6 — advantages row below tabs

   Relocates Оплата/Доставка/Гарантії from the right column of the
   product action area to a full-width 3-column strip below the
   product tabs. Only applies on calculator products — the original
   block stays in place on non-calc products.
   ============================================================ */

.ep-advantages-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 30px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.ep-advantages-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #f8f8f8;
  border-radius: 6px;
}

.ep-advantages-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #555;
  background: #fff;
  border-radius: 50%;
}

.ep-advantages-cont {
  flex: 1;
  min-width: 0;
}

.ep-advantages-link {
  display: block;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  margin-bottom: 2px;
}

.ep-advantages-link:hover {
  text-decoration: underline;
}

.ep-advantages-text {
  font-size: 12px;
  color: #777;
  margin: 0;
  line-height: 1.4;
}

/* Mobile: stack vertically under 768px */
@media (max-width: 767px) {
  .ep-advantages-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================
   ekspopanel-design Step 6.5 — release left column to full width

   Step 6 hid the right column content (Оплата/Доставка/Гарантії) on
   calculator products but left the parent `.us-product-action` as a
   two-child flex container. The empty right half still reserved
   space, squeezing `.us-product-action-left` to ~243px.
   This override makes the left column take
   100% of the action area width on calculator products only.

   Two overrides needed:
   - display:block on parent nukes d-lg-flex justify-content-between
   - width/max-width:100% on child overrides main.css:3079
     `.us-product-action-left { max-width: 243px }`
   ============================================================ */

/* Override the theme's flex row on calculator products: the right
   block is gone, so the left block should span the full width. */
.ep-calculator .us-product-action {
  display: block;
}

.ep-calculator .us-product-action-left {
  width: 100%;
  max-width: 100%;
}

/* Override main.css:3179 .us-product-btn { width: 243px } so cart button fills full width */
.ep-calculator .us-product-action-left #button-cart {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
}

/* ============================================================
   ekspopanel-design Step 6.6 — hide Матеріал group in calculator

   The material (ДСП/МДФ) is already encoded in the product name, so
   the Матеріал button row is redundant. Hidden visually only — the
   underlying OC radio input elsewhere in the DOM remains for
   buildOcMap(). st.mat defaults to 'dsp' at JS init and
   selectOcRadio('material', st.mat) fires on page load, so hiding
   the UI does not affect pricing or cart submission.
   Do not remove this rule even if the widget restructures; remove
   #ep-g-mat from the widget JS builder separately if we ever want
   to drop it completely.
   ============================================================ */
.ep-calculator #ep-g-mat {
  display: none;
}

/* ============================================================
   ekspopanel-design Step 6.7-compact — Разом row: qty + price + stock

   Pre-hide the OC quantity block (.us-product-quantity) on calculator
   products — it is replaced visually by .ep-razom-row (Twig-rendered).
   JS also calls $('.us-product-quantity').hide() but this rule prevents
   a brief FOUC while JS loads.
   ============================================================ */
.ep-calculator .us-product-quantity { display: none; }

/* ─── Разом row ─── */
.ep-calculator .ep-razom-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #f8f8f8;
  border-radius: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.ep-calculator .ep-razom-label {
  font-size: 14px;
  color: #222;
  flex-shrink: 0;
}

.ep-calculator .ep-razom-qty {
  flex-shrink: 0;
}

/* ep-qty-row is injected by JS into .ep-razom-qty; strip its standalone
   margins and hide its own "Кількість:" label (the "Разом" label does
   double duty) */
.ep-razom-row .ep-qty-row {
  margin: 0;
}

.ep-razom-row .ep-qty-row .ep-label {
  display: none;
}

.ep-calculator .ep-razom-price {
  font-size: 20px;
  font-weight: 600;
  color: #c41e3a;
  flex-shrink: 0;
  white-space: nowrap;
}

.ep-calculator .ep-razom-stock {
  font-size: 11px;
  color: #22a55a;
  white-space: nowrap;
  margin-left: auto;
}

/* Mobile: on narrow screens let items wrap to second line */
@media (max-width: 575px) {
  .ep-calculator .ep-razom-row {
    gap: 10px;
    padding: 10px 12px;
  }
}

/* ============================================================
   ekspopanel-design Step 5 — image-swatch grid for Вставка (option_id=47)

   Вставка has product images; we display them as styled cards instead
   of the EP text-button row (#ep-g-ins). The OC radio group lives inside
   #us-product-options-box which is hidden by line 236 + jQuery .hide()
   for all other groups on calculator products. Here we selectively
   re-show just the Вставка form-group (.ep-ins-form-group) using
   cascade — the re-show rule comes AFTER the hide rule and wins because
   CSS !important in author stylesheets overrides non-!important inline
   styles (jQuery .hide() = inline style:none without !important).
   A bridge script in product.twig maps swatch clicks → EP button clicks
   so the JS state machine (st.ins / selectOcRadio) stays in sync.
   ============================================================ */

/* Re-show OC options box on calculator products
   (overrides line 236 AND jQuery .hide() — !important beats inline style) */
.ep-calculator #us-product-options-box { display: block !important; }

/* Hide ALL direct children of the OC options box */
.ep-calculator #us-product-options-box > * { display: none !important; }

/* Show only the Вставка form-group */
.ep-calculator #us-product-options-box > .ep-ins-form-group { display: block !important; }

/* Hide EP text buttons for Вставка — replaced by OC image swatches */
.ep-calculator #ep-g-ins { display: none; }

/* Override main.css:3127 (.us-product-option .radio label.radio-img img = 0-3-2)
   Our selector is 0-5-2 — img fills card width, square crop */
.ep-calculator .us-product-option .radio label.radio-img.ep-ins-swatch img {
    width: 100%;
    height: auto;
    max-width: none; /* main.css may constrain to 30px — override */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    pointer-events: none;
}

/* Swatch card: 90-120px wide, vertical flex, 4-per-row on desktop.
   Selector raised to 0-4-1 to beat main.css:3122
   (.us-product-option .radio label.radio-img = 0-3-1) which forces
   padding:2px and margin-bottom:10px and would collapse cards to ~36px. */
.ep-calculator .us-product-option .radio label.ep-ins-swatch {
    flex: 0 0 calc(25% - 8px);
    max-width: 120px;
    min-width: 90px;
    padding: 8px;
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ep-calculator .us-product-option .radio label.ep-ins-swatch:hover {
    border-color: #999;
    background: #fafafa;
}

/* Override main.css:3133 green .selected background */
.ep-calculator .us-product-option .radio label.ep-ins-swatch.selected {
    background: #fafafa;
    color: #222;
    border-color: #222;
    box-shadow: 0 0 0 1px #222;
}

/* Short label below the thumbnail */
.ep-calculator label.ep-ins-swatch .ep-ins-swatch-label {
    display: block;
    font-size: 12px;
    color: #333;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.6em;
}

.ep-calculator label.ep-ins-swatch.selected .ep-ins-swatch-label {
    color: #222;
    font-weight: 600;
}

/* Swatch row gap */
.ep-calculator .form-group.ep-ins-form-group .options-box {
    gap: 8px;
}

/* Mobile: 2 columns */
@media (max-width: 575px) {
    .ep-calculator .us-product-option .radio label.ep-ins-swatch {
        flex: 0 0 calc(50% - 6px);
        max-width: none;
        min-width: 0;
    }
}

/* ============================================================
   ekspopanel-design final polish — hide legacy blocks
   ============================================================ */

/* Hide 1a — Характеристики tab content (only shows internal calc attribute) */
.ep-calculator #us-product-attributes {
    display: none;
}

/* Hide 1b — Характеристики tab nav item.
   :has() targets the <li> whose <span> scrolls to the attributes block.
   Requires modern browser (Chrome 105+, Firefox 121+, Safari 15.4+). */
.ep-calculator li.us-product-nav-item:has(span[onclick*="us-product-attributes"]) {
    display: none;
}

/* Hide 2 — product-tags paragraph (contains only the internal calculator tag link).
   Supercedes the narrower rule above (line ~206) that only hid the <a> child. */
.ep-calculator .us-product-tags {
    display: none;
}

/* Hide 3 — category card attribute strip.
   ep-calc-attrs is set by category.twig when any attribute.name
   contains "Калькулятор" — avoids the non-standard :contains() pseudo-class. */
.ep-calc-attrs {
    display: none;
}