/* modern-patch-v4.css — CRITICAL: Catalog button dupe-fix + supplementary patches
   ROOT CAUSE: modern.css and modern-patch-v3.css both have UNCONDITIONAL
   #menu-vertical .btn-menu { display: inline-flex/flex !important; }
   This overrides Bootstrap 3 .hidden-md, .hidden-lg, .hidden-xs, .hidden-sm
   visibility utilities. Both catalog buttons render simultaneously.

   FIX: media-query-scoped rules with stronger specificity + display:none
   on the wrong-viewport variant.
   ============================================================================ */

/* ─────────── MOBILE / TABLET PORTRAIT (<992px) ─────────── */
@media (max-width: 991px) {
  /* show mobile button */
  #menu-vertical .btn-menu.hidden-md.hidden-lg,
  #menu-vertical .btn-menu.btn-block.hidden-md.hidden-lg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    line-height: 1 !important;
  }
  /* HIDE the desktop button */
  #menu-vertical .btn-menu.hidden-xs.hidden-sm,
  #menu-vertical .btn-menu.btn-block.hidden-xs.hidden-sm,
  .btn-menu.hidden-xs.hidden-sm {
    display: none !important;
  }
}

/* ─────────── DESKTOP (>=992px) ─────────── */
@media (min-width: 992px) {
  /* show desktop button */
  #menu-vertical .btn-menu.hidden-xs.hidden-sm,
  #menu-vertical .btn-menu.btn-block.hidden-xs.hidden-sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    line-height: 1 !important;
  }
  /* HIDE the mobile button */
  #menu-vertical .btn-menu.hidden-md.hidden-lg,
  #menu-vertical .btn-menu.btn-block.hidden-md.hidden-lg,
  .btn-menu.hidden-md.hidden-lg {
    display: none !important;
  }
}

/* Icon centering (works regardless of viewport) */
#menu-vertical .btn-menu i.fa,
#menu-vertical .btn-menu i.fa-bars {
  line-height: 1 !important;
  vertical-align: middle !important;
  margin: 0 !important;
}
#menu-vertical .btn-menu .text-category,
#menu-vertical .btn-menu span {
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ─────────── MEGAMENU DROPDOWN — Material/Декорування/Розмір section labels
   Source bug: megamenu.css:1069 — asymmetric pill border-radius 40px 20px +
   2px solid #dfd4e4 lavender border + 1.5px letter-spacing. Outdated.
   
   Fix: clean uppercase tracked labels with subtle bottom border, transparent bg,
   no asymmetric radius. Plus child link hover → accent-soft instead of #dfd4e4.
   ─────────────────────────────────────────────────────────────────── */

#menu-vertical #menu-vertical-list > li .dropdown-menu-full .nsmenu-parent-title,
#menu-vertical #menu-vertical-list > li .dropdown-menu-full-image .nsmenu-parent-title {
  color: var(--ego-text, #1E1B2E) !important;
  background: transparent !important;
  padding: 8px 0 10px !important;
  margin: 0 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: 0 !important;
  text-align: left !important;
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

#menu-vertical #menu-vertical-list > li .dropdown-menu-full-image .nsmenu-parent-title,
.nsmenu-type-category-full-image .nsmenu-parent-title {
  font-size: 11px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 8px 0 10px !important;
}

/* Child link items — clean rows, no asymmetric pills */
#menu-vertical #menu-vertical-list > li .dropdown-menu-full .nsmenu-ischild li a,
#menu-vertical #menu-vertical-list > li .dropdown-menu-full-image .nsmenu-ischild li a {
  background: transparent !important;
  color: var(--ego-text, #1E1B2E) !important;
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  margin: 2px 0 !important;
  text-transform: none !important;
  transition: background .15s ease, color .15s ease !important;
}

/* Hover state — kill old #dfd4e4 background */
#menu-vertical #menu-vertical-list > li .dropdown-menu-full .nsmenu-ischild li a:hover,
#menu-vertical #menu-vertical-list > li .dropdown-menu-full-image .nsmenu-ischild li a:hover {
  background: var(--ego-accent-soft, #E9E3F5) !important;
  color: var(--ego-accent, #6B46C1) !important;
  border-radius: 4px !important;
}

/* ─────────── PDP FORM ELEMENTS — kill all asymmetric pills, unify 4px radius
   Targets:
   1. .product-sku (Код товару) — clean chip
   2. .nice-select (4 dropdowns) — boutique 4px radius, 48px height
   3. checkbox label (Так +70 грн.) — clean chip
   4. #button-cart .btn-primary (Купити) — solid accent, 4px
   5. .input-group quantity buttons (-/+) + input — 4px clean
   ────────────────────────────────────────────────────────────────────── */

/* 1. Код товару chip */
.product-sku,
.product-brand {
  background: var(--ego-surface, #fff) !important;
  outline: none !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  padding: 6px 12px !important;
  margin: 8px 0 16px !important;
  display: inline-block !important;
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ego-text, #1E1B2E) !important;
}
.product-brand { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 6px !important; }

/* 2. NICE-SELECT — boutique dropdowns */
.nice-select {
  height: 48px !important;
  line-height: 46px !important;
  padding: 0 36px 0 16px !important;
  background: var(--ego-surface, #fff) !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  box-shadow: none !important;
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 14px !important;
  color: var(--ego-text, #1E1B2E) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.nice-select:hover {
  border-color: var(--ego-accent, #6B46C1) !important;
}
.nice-select:focus,
.nice-select.open {
  border-color: var(--ego-accent, #6B46C1) !important;
  box-shadow: 0 0 0 3px var(--ego-accent-soft, #E9E3F5) !important;
  outline: none !important;
}
.nice-select:after {
  border-color: var(--ego-text-soft, #6B6685) !important;
  right: 18px !important;
  height: 8px !important;
  width: 8px !important;
}
.nice-select .list {
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  background: var(--ego-surface, #fff) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  margin-top: 4px !important;
  padding: 4px 0 !important;
}
.nice-select .option {
  padding: 10px 16px !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  font-family: var(--ego-font, "Manrope") !important;
  color: var(--ego-text, #1E1B2E) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background: var(--ego-accent-soft, #E9E3F5) !important;
  color: var(--ego-accent, #6B46C1) !important;
}
.nice-select .option.selected {
  font-weight: 600 !important;
}

/* 3. Checkbox label chip (Так +70 грн.) */
.form-group div[id^="input-option"] .checkbox {
  margin: 0 !important;
  padding: 0 !important;
}
.form-group div[id^="input-option"] .checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--ego-surface, #fff) !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  padding: 10px 16px !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ego-text, #1E1B2E) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  margin: 0 !important;
}
.form-group div[id^="input-option"] .checkbox label:hover {
  border-color: var(--ego-accent, #6B46C1) !important;
  background: var(--ego-accent-soft, #E9E3F5) !important;
}
.form-group div[id^="input-option"] .checkbox label:has(input:checked) {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border-color: var(--ego-accent, #6B46C1) !important;
}
.form-group div[id^="input-option"] .checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--ego-accent, #6B46C1) !important;
  margin: 0 !important;
  position: static !important;
}

/* 4. Купити button — solid accent, clean 4px radius */
#button-cart,
.btn-primary,
.btn.btn-primary {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ego-radius, 4px) !important;
  padding: 14px 32px !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  min-height: 48px !important;
  box-shadow: 0 2px 8px rgba(107, 70, 193, 0.16) !important;
  transition: all .15s ease !important;
}
#button-cart:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
  background: #5836A8 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(107, 70, 193, 0.28) !important;
  transform: translateY(-1px) !important;
  border: none !important;
}

/* 5. Quantity input + buttons */
.form-group .input-group:has(input[name="quantity"]) {
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  overflow: hidden !important;
  width: auto !important;
  display: inline-flex !important;
  height: 48px !important;
}
input[name="quantity"],
input#input-quantity {
  width: 60px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ego-surface, #fff) !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: var(--ego-text, #1E1B2E) !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.input-group-btn > .btn-default[data-dir],
button.btn-default[data-dir="up"],
button.btn-default[data-dir="dwn"] {
  background: var(--ego-surface, #fff) !important;
  color: var(--ego-text, #1E1B2E) !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 40px !important;
  height: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: background .15s ease !important;
}
.input-group-btn > .btn-default[data-dir]:hover,
button.btn-default[data-dir]:hover {
  background: var(--ego-accent-soft, #E9E3F5) !important;
  color: var(--ego-accent, #6B46C1) !important;
}


/* ─────────── FOOTER — kill asymmetric pills + unify palette
   Targets: Facebook/Instagram social buttons, Карта сайту, headers, links
   ────────────────────────────────────────────────────────────────────── */
/* ============================================================
 * FOOTER BOUTIQUE OVERHAUL  (append to modern-patch-v4.css)
 * Replaces asymmetric pills (.msgr) + modernises whole footer
 * Selectors are scoped to <footer> to avoid header bleed.
 * ============================================================ */

/* 1. Footer container — clean off-white surface + Manrope */
footer {
  background: var(--ego-surface, #FAF8FF) !important;
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  color: var(--ego-text, #1E1B2E) !important;
  border-top: 1px solid var(--ego-border, #E5E0EE) !important;
  padding-top: 32px !important;
  padding-bottom: 24px !important;
}

/* 2. Column headers — boutique typography (Служба підтримки / Додатково / Інформація / Ego Textile в соц. мережах) */
footer .btn-group > .h5.relative.dropdown-toggle,
footer .h5.relative.dropdown-toggle {
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ego-text, #1E1B2E) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* 3. Footer body text + links inside dropdown menus */
footer .dropdown-menu,
footer .dropdown-menu p,
footer .footer_contact,
footer .list-unstyled li {
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--ego-text-soft, #6B6685) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
footer .footer_contact a.no-anim,
footer .list-unstyled li a {
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ego-text, #1E1B2E) !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}
footer .footer_contact a.no-anim:hover,
footer .list-unstyled li a:hover {
  color: var(--ego-accent, #6B46C1) !important;
}

/* 4. THE FIX — Facebook / Instagram / Карта сайту buttons
 *    Replace asymmetric pill 40px/20px + pale grey-blue (#a9b9c3)
 *    with clean 4px boutique outlined buttons, uniform width,
 *    Manrope 14px / 500, 44px touch height, accent hover. */
footer .footer_social {
  margin: 0 0 10px 0 !important;
}
footer .footer_social a.msgr,
footer a.msgr.fcb,
footer a.msgr.wts {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: var(--ego-radius, 4px) !important;   /* kills 40px 20px */
  background: transparent !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  color: var(--ego-text, #1E1B2E) !important;
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
footer .footer_social a.msgr i.fa {
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Hover — accent fill with text inversion (uniform across all 3) */
footer .footer_social a.msgr:hover,
footer .footer_social a.msgr:focus,
footer .footer_social a.msgr:active,
footer a.msgr.fcb:hover,
footer a.msgr.fcb:focus,
footer a.msgr.fcb:active,
footer a.msgr.wts:hover,
footer a.msgr.wts:focus,
footer a.msgr.wts:active {
  background: var(--ego-accent, #6B46C1) !important;
  border-color: var(--ego-accent, #6B46C1) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
footer .footer_social a.msgr:hover i.fa,
footer a.msgr.fcb:hover i.fa,
footer a.msgr.wts:hover i.fa {
  color: #FFFFFF !important;
}
/* Kill the legacy ":after" decoration toggle */
footer a.msgr:hover:after,
footer a.msgr:focus:after,
footer a.msgr:active:after {
  content: none !important;
}

/* 5. Logo column Instagram bubble — same boutique language */
.social__header-insta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--ego-radius, 4px) !important;
  background: transparent !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  color: var(--ego-text, #1E1B2E) !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
.social__header-insta:hover,
.social__header-insta:focus {
  background: var(--ego-accent, #6B46C1) !important;
  border-color: var(--ego-accent, #6B46C1) !important;
  color: #FFFFFF !important;
}

/* 6. Copyright row — quiet baseline */
footer .copyright_footer {
  font-family: var(--ego-font, "Manrope", sans-serif) !important;
  font-size: 12px !important;
  color: var(--ego-text-soft, #6B6685) !important;
  border-top: 1px solid var(--ego-border, #E5E0EE) !important;
  padding-top: 16px !important;
  margin-top: 24px !important;
}

/* 7. Mobile — buttons remain uniform full-width, vertical stack stays tidy */
@media (max-width: 767px) {
  footer .btn-group > .h5.relative.dropdown-toggle,
  footer .h5.relative.dropdown-toggle {
    border-bottom: 1px solid var(--ego-border, #E5E0EE) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
  footer .footer_social a.msgr {
    width: 100% !important;
  }
}
/* ============================================================ */
/* ============================================================================
   EGO TEXTILE — Boutique Patch v5
   Comprehensive component-level overrides for OpenCart storefront
   Palette: --ego-* (defined in modern.css)
   Goal: retire legacy beige/cyan/lime/magenta + asymmetric radii;
         unify on lavender boutique system (4px radius, Manrope).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. ROOT — fallback tokens (in case modern.css fails to load)
   ---------------------------------------------------------------------------- */
:root {
  --ego-bg: #F8F5FB;
  --ego-surface: #FFFFFF;
  --ego-text: #1E1B2E;
  --ego-text-soft: #6B6685;
  --ego-accent: #6B46C1;
  --ego-accent-hover: #5B36B1;
  --ego-accent-soft: #E9E3F5;
  --ego-border: #E5E0EE;
  --ego-radius: 4px;
  --ego-font: 'Manrope', system-ui, -apple-system, sans-serif;
  --ego-shadow-focus: 0 0 0 3px rgba(107, 70, 193, 0.12);
  --ego-success-bg: #ECFDF5;
  --ego-success-ink: #047857;
  --ego-danger-bg: #FEF2F2;
  --ego-danger-ink: #B91C1C;
  --ego-danger: #DC2626;
  --ego-danger-soft: rgba(220, 38, 38, 0.10);
}

/* ============================================================================
   1. INPUTS — text / email / search / tel / number / textarea
   Clean 4px border, lavender focus, Manrope body, 44px boutique height
   ============================================================================ */

input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="number"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
.sc-form-control,
select.form-control,
textarea.form-control {
  font-family: var(--ego-font) !important;
  color: var(--ego-text) !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: var(--ego-radius) !important;
  box-shadow: none !important;
  background-color: var(--ego-surface) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="number"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
.sc-form-control {
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}

textarea.form-control {
  min-height: 96px;
  padding: 12px 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

input.form-control:focus,
.sc-form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--ego-accent) !important;
  box-shadow: var(--ego-shadow-focus) !important;
  outline: none !important;
}

/* placeholders read as muted hints */
input.form-control::placeholder,
.sc-form-control::placeholder,
textarea.form-control::placeholder {
  color: #9089A8 !important;
  opacity: 1 !important;
  font-style: normal !important;
}

/* ── Review form: name input ('Гість' literal default) ────────────────────── */
#ascpw2_form_work_ input[name="name"].sc-form-control {
  width: 100% !important;
  max-width: 420px;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: var(--ego-radius) !important;
  font-family: var(--ego-font) !important;
  color: var(--ego-text) !important;
}

/* Retire onfocus/onblur hack — render literal default as placeholder-style */
#ascpw2_form_work_ input[name="name"][value="Гість"]:not(:focus),
#ascpw2_form_work_ input[name="name"][value="Гость"]:not(:focus) {
  color: #9089A8 !important;
  font-style: italic !important;
}

#ascpw2_form_work_ input[name="name"].sc-form-control:focus {
  border-color: var(--ego-accent) !important;
  box-shadow: var(--ego-shadow-focus) !important;
  color: var(--ego-text) !important;
  font-style: normal !important;
}

/* ── Login popup form ─────────────────────────────────────────────────────── */
#popup-login .form-control {
  height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: var(--ego-radius) !important;
  font-family: var(--ego-font) !important;
}
#popup-login .form-control:focus {
  border-color: var(--ego-accent) !important;
  box-shadow: var(--ego-shadow-focus) !important;
}
#popup-login .control-label {
  font-family: var(--ego-font) !important;
  font-weight: 500 !important;
  color: var(--ego-text) !important;
}
.lk_link {
  color: var(--ego-accent) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.lk_link:hover { text-decoration: underline !important; }

/* ============================================================================
   2. BUTTONS — unify the Bootstrap variants into the boutique system
   Primary = accent fill; Default = outline; Inverse → outlined-pill
   ============================================================================ */

.btn {
  font-family: var(--ego-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ego-radius) !important;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Primary / Success / Info / Danger → unified lavender (kept neutral) */
.btn-primary,
.btn-success {
  background: var(--ego-accent) !important;
  border-color: var(--ego-accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background: var(--ego-accent-hover) !important;
  border-color: var(--ego-accent-hover) !important;
  color: #fff !important;
}

.btn-info {
  background: var(--ego-accent-soft) !important;
  border-color: var(--ego-accent-soft) !important;
  color: var(--ego-accent) !important;
}
.btn-info:hover,
.btn-info:focus {
  background: var(--ego-accent) !important;
  border-color: var(--ego-accent) !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--ego-danger) !important;
  border-color: var(--ego-danger) !important;
  color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* Default button → quiet outline */
.btn-default {
  background: var(--ego-surface) !important;
  border: 1px solid var(--ego-border) !important;
  color: var(--ego-text) !important;
}
.btn-default:hover,
.btn-default:focus {
  background: var(--ego-accent-soft) !important;
  border-color: var(--ego-accent-soft) !important;
  color: var(--ego-accent) !important;
}

/* Inverse (Blog "Читати →" etc.) → boutique outlined pill */
.btn-inverse,
.read_more .button.btn.btn-inverse,
aside .button.btn.btn-inverse {
  background: transparent !important;
  border: 1px solid var(--ego-text) !important;
  color: var(--ego-text) !important;
  border-radius: var(--ego-radius) !important;
  padding: 8px 14px !important;
  font-family: var(--ego-font) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.btn-inverse:hover,
.btn-inverse:focus,
.read_more .button.btn.btn-inverse:hover {
  background: var(--ego-accent) !important;
  border-color: var(--ego-accent) !important;
  color: #fff !important;
}

/* ── Home product card "Купити" CTA (no class on the button) ─────────────── */
.product-thumb .text-center > button[onclick^="cart.add"],
.product-thumb .text-center > button {
  background: var(--ego-accent) !important;
  color: #fff !important;
  border: 1px solid var(--ego-accent) !important;
  border-radius: var(--ego-radius) !important;
  font-family: var(--ego-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color .15s ease;
}
.product-thumb .text-center > button[onclick^="cart.add"]:hover,
.product-thumb .text-center > button:hover {
  background: var(--ego-accent-hover) !important;
}

/* ── Header search submit button ──────────────────────────────────────────── */
#search .input-group-btn > .btn.btn-default.btn-lg {
  width: 44px !important;
  height: 44px !important;
  background: var(--ego-accent) !important;
  border: 1px solid var(--ego-accent) !important;
  border-radius: 0 var(--ego-radius) var(--ego-radius) 0 !important;
  padding: 0 !important;
}
#search .input-group-btn > .btn.btn-default.btn-lg:hover {
  background: var(--ego-accent-hover) !important;
  border-color: var(--ego-accent-hover) !important;
}
#search .input-group-btn > .btn.btn-default.btn-lg img,
#search .input-group-btn > .btn.btn-default.btn-lg svg {
  filter: brightness(0) invert(1);
}

/* ============================================================================
   3. BADGES & LABELS — retire asymmetric pink/lime stickers
   Overrides the inline <style> so !important is mandatory
   ============================================================================ */

.xdstickers,
.xdstickers_wrapper .xdstickers,
.xdsticker_novelty,
.xdstickers_wrapper .xdsticker_novelty,
.xdsticker_sale,
.xdstickers_wrapper .xdsticker_sale {
  border-radius: var(--ego-radius) !important;
  padding: 3px 8px !important;
  font-family: var(--ego-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  /* kill asymmetric corners like 20px 0 20px 0 */
  border-top-left-radius: var(--ego-radius) !important;
  border-top-right-radius: var(--ego-radius) !important;
  border-bottom-left-radius: var(--ego-radius) !important;
  border-bottom-right-radius: var(--ego-radius) !important;
}

.xdsticker_novelty,
.xdstickers_wrapper .xdsticker_novelty {
  background: var(--ego-accent-soft) !important;
  color: var(--ego-accent) !important;
}

.xdsticker_sale,
.xdstickers_wrapper .xdsticker_sale {
  background: var(--ego-danger-soft) !important;
  color: var(--ego-danger) !important;
}

/* Bootstrap .label / .badge — neutralize */
.label,
.badge {
  font-family: var(--ego-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ego-radius) !important;
  padding: 3px 8px !important;
  letter-spacing: 0.04em;
}
.label-success, .badge-success { background: var(--ego-success-bg) !important; color: var(--ego-success-ink) !important; }
.label-warning, .badge-warning { background: #FEF3C7 !important; color: #92400E !important; }
.label-danger, .badge-danger   { background: var(--ego-danger-bg) !important; color: var(--ego-danger-ink) !important; }
.label-info,    .badge-info    { background: var(--ego-accent-soft) !important; color: var(--ego-accent) !important; }
.label-primary, .badge-primary { background: var(--ego-accent) !important; color: #fff !important; }

.new-mark {
  background: var(--ego-accent-soft) !important;
  color: var(--ego-accent) !important;
  border-radius: var(--ego-radius) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================================
   4. PANELS & CARDS — quiet, 1px border, no shadow, white fill
   ============================================================================ */

.panel,
.panel-default {
  background: var(--ego-surface) !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: var(--ego-radius) !important;
  box-shadow: none !important;
}
.panel-heading,
.panel-default > .panel-heading {
  background: var(--ego-bg) !important;
  border-bottom: 1px solid var(--ego-border) !important;
  border-top-left-radius: var(--ego-radius) !important;
  border-top-right-radius: var(--ego-radius) !important;
  color: var(--ego-text) !important;
  font-family: var(--ego-font) !important;
  font-weight: 600 !important;
}
.panel-title {
  font-family: var(--ego-font) !important;
  font-weight: 600 !important;
  color: var(--ego-text) !important;
}

.well {
  background: var(--ego-bg) !important;
  border: 1px solid var(--ego-border) !important;
  border-radius: var(--ego-radius) !important;
  box-shadow: none !important;
}

/* ============================================================================
   5. TABS — Про товар / Відгуки / Доставка
   ============================================================================ */

.nav-tabs {
  border-bottom: 1px solid var(--ego-border) !important;
}
.nav-tabs > li > a {
  font-family: var(--ego-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ego-text-soft) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  margin-right: 4px !important;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent !important;
  transition: color .15s ease, border-color .15s ease;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background: transparent !important;
  color: var(--ego-accent) !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--ego-accent-soft) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--ego-accent) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--ego-accent) !important;
}
.tab-content {
  padding: 20px 0 !important;
  font-family: var(--ego-font) !important;
  color: var(--ego-text) !important;
}

/* ============================================================================
   6. PAGINATION
   ============================================================================ */

.pagination {
  border-radius: var(--ego-radius) !important;
}
.pagination > li > a,
.pagination > li > span,
.page-link {
  font-family: var(--ego-font) !important;
  font-weight: 500 !important;
  color: var(--ego-text) !important;
  background: var(--ego-surface) !important;
  border: 1px solid var(--ego-border) !important;
  padding: 8px 14px !important;
  margin: 0 2px !important;
  border-radius: var(--ego-radius) !important;
  transition: background-color .15s ease, color .15s ease;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.page-link:hover {
  background: var(--ego-accent-soft) !important;
  color: var(--ego-accent) !important;
  border-color: var(--ego-accent-soft) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--ego-accent) !important;
  border-color: var(--ego-accent) !important;
  color: #fff !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span {
  color: #B8B0C8 !important;
  background: var(--ego-bg) !important;
  border-color: var(--ego-border) !important;
}

/* ============================================================================
   7. BREADCRUMBS
   ============================================================================ */

.breadcrumb {
  background: transparent !important;
  padding: 12px 0 !important;
  margin-bottom: 16px !important;
  border-radius: 0 !important;
  font-family: var(--ego-font) !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--ego-border) !important;
}
.breadcrumb > li,
.breadcrumb > li > a {
  color: var(--ego-text-soft) !important;
  font-weight: 500 !important;
}
.breadcrumb > li > a:hover {
  color: var(--ego-accent) !important;
  text-decoration: none !important;
}
.breadcrumb > .active {
  color: var(--ego-text) !important;
}
.breadcrumb > li + li:before {
  color: var(--ego-border) !important;
  content: "/" !important;
  padding: 0 8px !important;
}

/* ─────────── PDP TABS — align-items + clean radii + drop empty rating row */

/* 1. Tabs row — не stretch left tab nav до висоти right content */
.row-flex:has(#description_product) {
  align-items: flex-start !important;
}
/* fallback для browserіb без :has (старих) */
.tab-content.col-md-9 + #description_product,
#description_product.col-md-3 {
  align-self: flex-start !important;
}

/* 2. Modern radii на обох tab panels (kill asymmetric 20px) */
#description_product.bg-gold,
.bg-gold {
  border-radius: var(--ego-radius, 4px) !important;
  padding: 12px !important;
  background: var(--ego-accent-soft, #E9E3F5) !important;
}
.tab-content {
  border-radius: var(--ego-radius, 4px) !important;
  padding: 18px 24px !important;
  background: var(--ego-surface, #fff) !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
}

/* 3. Tab links у left nav-pills — clean rows з radius замість asymmetric */
#description_product.nav-pills > li {
  margin: 0 0 4px !important;
}
#description_product.nav-pills > li > a {
  display: block !important;
  padding: 10px 16px !important;
  border-radius: var(--ego-radius, 4px) !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ego-text, #1E1B2E) !important;
  background: transparent !important;
  transition: background .15s ease, color .15s ease !important;
}
#description_product.nav-pills > li > a:hover {
  background: var(--ego-surface, #fff) !important;
  color: var(--ego-accent, #6B46C1) !important;
  border-radius: var(--ego-radius, 4px) !important;
}
#description_product.nav-pills > li.active > a,
#description_product.nav-pills > li.active > a:hover,
#description_product.nav-pills > li.active > a:focus {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border-radius: var(--ego-radius, 4px) !important;
}

/* 4. Hide empty rating row INSIDE description tab — duplicates the Відгуки tab anyway */
#tab-description > .product-rate.rating {
  display: none !important;
}

/* 5. Margin top на h2 у description — clean spacing */
#tab-description > h2:first-of-type,
#tab-description > h2:first-child {
  margin-top: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* 6. Mobile (<992px) — tabs row stack vertically, тут align-items не потрібен */
@media (max-width: 991px) {
  #description_product.bg-gold {
    border-radius: var(--ego-radius, 4px) !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
  }
  .tab-content {
    border-radius: var(--ego-radius, 4px) !important;
    padding: 16px !important;
  }
}

/* ─────────── Catalog button — match other CTAs (4px не 999px pill) */
#menu-vertical .btn-menu,
#menu-vertical .btn-menu.btn-block {
  border-radius: var(--ego-radius, 4px) !important;
}

/* ─────────── SIMPLECHECKOUT — kill asymmetric pills + fix quantity proportions */

/* 1. Cart quantity controls — input height matches buttons, container wider */
.simplecheckout-cart .input-group.quantity,
#simplecheckout_cart .input-group.quantity {
  max-width: 150px !important;
  display: inline-flex !important;
  align-items: stretch !important;
  height: 40px !important;
  margin: 10px auto !important;
}
.simplecheckout-cart .input-group.quantity .form-control,
#simplecheckout_cart .input-group.quantity .form-control,
.input-group.quantity .form-control[name^="quantity"] {
  height: 40px !important;
  line-height: 40px !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  width: 50px !important;
}
.simplecheckout-cart .input-group.quantity .btn,
#simplecheckout_cart .input-group.quantity .btn,
.input-group.quantity .btn.btn-primary,
.input-group.quantity .btn.btn-danger {
  height: 40px !important;
  width: 38px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}
/* First button (minus) — round left corners */
.simplecheckout-cart .input-group.quantity .input-group-btn:first-child .btn,
#simplecheckout_cart .input-group.quantity .input-group-btn:first-child .btn {
  border-radius: var(--ego-radius, 4px) 0 0 var(--ego-radius, 4px) !important;
}
/* Last button (delete X) — round right corners */
.simplecheckout-cart .input-group.quantity .input-group-btn:last-child .btn:last-child,
#simplecheckout_cart .input-group.quantity .input-group-btn:last-child .btn:last-child {
  border-radius: 0 var(--ego-radius, 4px) var(--ego-radius, 4px) 0 !important;
}
/* Btn-danger (X) softer red */
.simplecheckout-cart .input-group.quantity .btn-danger,
#simplecheckout_cart .input-group.quantity .btn-danger {
  background: #E0E0E0 !important;
  color: var(--ego-text-soft, #6B6685) !important;
  border: 0 !important;
}
.simplecheckout-cart .input-group.quantity .btn-danger:hover,
#simplecheckout_cart .input-group.quantity .btn-danger:hover {
  background: #DC3545 !important;
  color: #fff !important;
}

/* 2. .simple-step (status chips) — kill 40px 20px asymmetric */
.simple-step,
.simple-step-current,
.simple-step-completed {
  border-radius: var(--ego-radius, 4px) !important;
  background-color: var(--ego-accent-soft, #E9E3F5) !important;
  color: var(--ego-text, #1E1B2E) !important;
  padding: 8px 16px !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.simple-step-current {
  background-color: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
}

/* 3. .checkout-heading (section headers Кошик/Спосіб доставки/...) — clean top corners */
.simple-content .checkout-heading,
.checkout-heading {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ego-radius, 4px) var(--ego-radius, 4px) 0 0 !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
  text-align: center !important;
}

/* 4. Shipping/Payment method radio labels — kill all asymmetric pills */
#simplecheckout_shipping label,
#simplecheckout_payment label,
.simplecheckout-shipping-method label,
.simplecheckout-payment-method label,
.simplecheckout-methods-table td.title label {
  border-radius: var(--ego-radius, 4px) !important;
  padding: 10px 16px !important;
  background: var(--ego-surface, #fff) !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ego-text, #1E1B2E) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 4px 4px 0 !important;
  transition: all .15s ease !important;
}
#simplecheckout_shipping label:hover,
#simplecheckout_payment label:hover,
.simplecheckout-shipping-method label:hover,
.simplecheckout-payment-method label:hover {
  background: var(--ego-accent-soft, #E9E3F5) !important;
  border-color: var(--ego-accent, #6B46C1) !important;
  color: var(--ego-accent, #6B46C1) !important;
}
/* Active/checked state */
#simplecheckout_shipping label:has(input:checked),
#simplecheckout_payment label:has(input:checked),
.simplecheckout-shipping-method label:has(input:checked),
.simplecheckout-payment-method label:has(input:checked) {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border-color: var(--ego-accent, #6B46C1) !important;
}

/* 5. "Оновити" button у cart — match button-cart purple style */
#simplecheckout_button_cart,
.simplecheckout-cart-buttons .btn,
a.button_oc,
.button_oc.btn-primary {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ego-radius, 4px) !important;
  padding: 12px 24px !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ─────────── VIER filter rows v2 — fix .total_product float overlap */

/* Row: full-width flex з explicit space-between */
.row_blok {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.row_blok label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  margin: 1px 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
}
.row_blok label:hover,
.row_blok.actionis label {
  background: var(--ego-accent-soft, #E9E3F5) !important;
}

/* The link checkb — takes remaining width, flex row with text+count balance */
.row_blok .checkb,
.row_blok .checka {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--ego-text, #1E1B2E) !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  min-width: 0 !important;
}
.row_blok label:hover .checkb,
.row_blok.actionis .checkb {
  color: var(--ego-accent, #6B46C1) !important;
}

/* Text — flex 1 щоб count йшов вправо */
.row_blok .text_param {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  font-size: 14px !important;
  font-family: var(--ego-font, "Manrope") !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Count chip — KILL float, clean accent-soft pill справа */
.row_blok .total_product,
.row_blok .total_product.btn_fv,
.total_product,
.btn_fv {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ego-accent-soft, #E9E3F5) !important;
  color: var(--ego-text-soft, #6B6685) !important;
  border-radius: 100px !important;
  padding: 1px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  min-width: 32px !important;
  height: auto !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  position: static !important;
}

/* Active state checkbox + count */
.row_blok.actionis .total_product,
.row_blok.actionis .total_product.btn_fv {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
}

/* Section padding — read more comfortable */
.onli_param,
.onli_param.blok,
.onli_param.scropis {
  padding: 4px 0 !important;
}

/* ─────────── GLOBAL: body bg → pure white + dark text override */
body,
html {
  background: #ffffff !important;
}

/* Containers that previously had var(--ego-bg) лавандовий → лишити прозорий */
.container,
.row {
  background: transparent !important;
}

/* ─────────── Quantity controls v2 — fix minus button width + ensure white icons */
/* Override inline max-width: 100px through higher specificity */
div.input-group.btn-block.quantity[style] {
  max-width: 160px !important;
  display: inline-flex !important;
  align-items: stretch !important;
  height: 40px !important;
}

/* ALL 3 segments — explicit equal width via flex */
.input-group.quantity .input-group-btn,
.input-group.quantity > .input-group-btn {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
.input-group.quantity .input-group-btn > .btn {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 40px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.input-group.quantity .form-control[name^="quantity"] {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 !important;
  text-align: center !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--ego-border, #E5E0EE) !important;
  border-bottom: 1px solid var(--ego-border, #E5E0EE) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: #fff !important;
  color: var(--ego-text, #1E1B2E) !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}

/* First btn (minus) — accent solid, white icon, round left */
.input-group.quantity .input-group-btn:first-child > .btn,
.input-group.quantity .input-group-btn:first-child > .btn-primary {
  background: var(--ego-accent, #6B46C1) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--ego-radius, 4px) 0 0 var(--ego-radius, 4px) !important;
}
.input-group.quantity .input-group-btn:first-child > .btn i {
  color: #ffffff !important;
}

/* Plus btn (perfect-square purple middle of last group) */
.input-group.quantity .input-group-btn:last-child > .btn-primary {
  background: var(--ego-accent, #6B46C1) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.input-group.quantity .input-group-btn:last-child > .btn-primary i {
  color: #ffffff !important;
}

/* Delete (X) — light grey, hover red */
.input-group.quantity .input-group-btn:last-child > .btn-danger {
  background: #E5E5E5 !important;
  color: var(--ego-text-soft, #6B6685) !important;
  border: 0 !important;
  border-radius: 0 var(--ego-radius, 4px) var(--ego-radius, 4px) 0 !important;
}
.input-group.quantity .input-group-btn:last-child > .btn-danger i {
  color: var(--ego-text-soft, #6B6685) !important;
}
.input-group.quantity .input-group-btn:last-child > .btn-danger:hover {
  background: #DC3545 !important;
  color: #fff !important;
}
.input-group.quantity .input-group-btn:last-child > .btn-danger:hover i {
  color: #fff !important;
}

/* ─────────── White text у ВСІХ buttons + headers на accent bg */
.checkout-heading,
.checkout-heading *,
#button-cart,
#button-cart *,
.btn-primary,
.btn-primary *,
.button_oc,
.button_oc *,
#simplecheckout_button_cart,
#simplecheckout_button_cart * {
  color: #ffffff !important;
}
/* But not whitens text inside e.g. wrapped Купити-content div which has children */
.btn-primary[href],
.btn-primary:link,
.btn-primary:visited {
  color: #fff !important;
}

/* ─────────── VIER checkbox icon — prevent shrinking under long labels */
#filter_vier .link_fv .checkb,
#filter_vier .link_fv .checka,
.row_blok .checkb,
.row_blok .checka {
  min-width: 0 !important;
}
#filter_vier .link_fv .checkb:before,
#filter_vier .link_fv .checka:before,
.row_blok .checkb:before,
.row_blok .checka:before {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
  border-radius: 3px !important;
  position: relative !important;
  top: 0 !important;
}

/* Long labels: truncate з ellipsis + title-tooltip hint via :hover (CSS-only) */
.row_blok .text_param {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
/* On hover — full text via expanding background OR opt to wrap */
.row_blok:hover .text_param {
  white-space: normal !important;
  overflow: visible !important;
}
.row_blok:hover {
  z-index: 10;
  position: relative;
}


/* ─────────── Checkout: kill green other-info bg + Так/Ні subscribe radio consistency */
.other-info,
.simplecheckout-cart .other-info,
div.other-info {
  background: transparent !important;
  padding: 0 !important;
}

/* Newsletter Так/Ні radio chips — ТІЛЬКИ label-ы що містять input[type=radio], НЕ control-label */
.row-customer_newsletter .radio label,
.row-customer_register .radio label,
#simplecheckout_customer .radio label,
label.radio-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  min-width: 64px !important;
  background: var(--ego-surface, #fff) !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ego-text, #1E1B2E) !important;
  cursor: pointer !important;
  margin: 0 6px 0 0 !important;
  transition: all .15s ease !important;
}
.row-customer_newsletter .radio label:hover,
.row-customer_register .radio label:hover,
#simplecheckout_customer .radio label:hover,
label.radio-inline:hover {
  background: var(--ego-accent-soft, #E9E3F5) !important;
  border-color: var(--ego-accent, #6B46C1) !important;
  color: var(--ego-accent, #6B46C1) !important;
}
.row-customer_newsletter .radio label:has(input:checked),
.row-customer_register .radio label:has(input:checked),
#simplecheckout_customer .radio label:has(input:checked),
label.radio-inline:has(input:checked) {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border-color: var(--ego-accent, #6B46C1) !important;
}
/* Hide native radio inside chip */
.row-customer_newsletter .radio label input[type="radio"],
.row-customer_register .radio label input[type="radio"],
#simplecheckout_customer .radio label input[type="radio"],
label.radio-inline input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Restore native label (form description) — НЕ chip */
.simplecheckout > .row > label,
.simplecheckout label.control-label,
.simplecheckout > [class*="row-"] > label,
.row-customer_newsletter > label.control-label,
.row-customer_newsletter > label:first-child {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-weight: 500 !important;
  color: var(--ego-text, #1E1B2E) !important;
  margin: 0 !important;
}

/* ─────────── Quantity controls v3 — explicit gaps + equal vertical alignment */
div.input-group.btn-block.quantity,
div.input-group.btn-block.quantity[style] {
  max-width: 180px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 40px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
div.input-group.btn-block.quantity .input-group-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 40px !important;
  margin: 0 !important;
}
/* All buttons + input — STRICT same size, individual border-radius (no shared pill) */
div.input-group.btn-block.quantity .input-group-btn > .btn,
div.input-group.btn-block.quantity .form-control[name^="quantity"] {
  height: 40px !important;
  border-radius: var(--ego-radius, 4px) !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Input separately styled — 1px border around */
div.input-group.btn-block.quantity .form-control[name^="quantity"] {
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  background: #fff !important;
}
/* First btn (minus) — independent purple chip */
div.input-group.btn-block.quantity .input-group-btn:first-child > .btn {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ego-radius, 4px) !important;
}
/* Plus btn — independent purple chip */
div.input-group.btn-block.quantity .input-group-btn:last-child > .btn-primary {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ego-radius, 4px) !important;
}
/* Delete X — independent grey chip */
div.input-group.btn-block.quantity .input-group-btn:last-child > .btn-danger {
  background: #E5E5E5 !important;
  color: var(--ego-text-soft, #6B6685) !important;
  border: 0 !important;
  border-radius: var(--ego-radius, 4px) !important;
  margin-left: 4px !important;
}
div.input-group.btn-block.quantity .input-group-btn:last-child > .btn-danger:hover {
  background: #DC3545 !important;
  color: #fff !important;
}

/* ─────────── Category toolbar — Очистити + Фільтр + Сортувати + На сторінці */

/* "Очистити" link inside VIER filter clear block */
#action_get .text_dia a,
#filter_vier #action_get .text_dia a {
  display: inline-block !important;
  padding: 8px 16px !important;
  background: transparent !important;
  border: 1px solid var(--ego-accent, #6B46C1) !important;
  border-radius: var(--ego-radius, 4px) !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ego-accent, #6B46C1) !important;
  text-decoration: none !important;
  margin: 4px 0 !important;
  transition: all .15s ease !important;
}
#action_get .text_dia a:hover {
  background: var(--ego-accent, #6B46C1) !important;
  color: #fff !important;
}

/* Toolbar buttons: Фільтр (mobile), Сортувати, На сторінці */
#open-ocfilter,
.btn.btn-cat,
.btn.btn-cat.dropdown-toggle {
  background: var(--ego-surface, #fff) !important;
  color: var(--ego-text, #1E1B2E) !important;
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  padding: 10px 18px !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all .15s ease !important;
  margin: 0 4px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
#open-ocfilter:hover,
.btn.btn-cat:hover,
.btn.btn-cat.dropdown-toggle:hover,
.btn.btn-cat.dropdown-toggle:focus,
.btn.btn-cat.dropdown-toggle:active {
  background: var(--ego-accent-soft, #E9E3F5) !important;
  color: var(--ego-accent, #6B46C1) !important;
  border-color: var(--ego-accent, #6B46C1) !important;
}
.btn.btn-cat i,
.btn.btn-cat .caret,
#open-ocfilter i {
  color: inherit !important;
}

/* Dropdown menu стилізація — clean panel */
.btn-group > .dropdown-menu {
  border: 1px solid var(--ego-border, #E5E0EE) !important;
  border-radius: var(--ego-radius, 4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  padding: 6px 0 !important;
  margin-top: 4px !important;
  background: var(--ego-surface, #fff) !important;
}
.btn-group > .dropdown-menu > li > a {
  padding: 10px 16px !important;
  font-family: var(--ego-font, "Manrope") !important;
  font-size: 14px !important;
  color: var(--ego-text, #1E1B2E) !important;
  background: transparent !important;
  transition: background .15s ease !important;
}
.btn-group > .dropdown-menu > li > a:hover {
  background: var(--ego-accent-soft, #E9E3F5) !important;
  color: var(--ego-accent, #6B46C1) !important;
}