/*
 * MoodMineral
 *
 * Amrys font for Armenian – place .ttf files in image/fonts/
 * Weights: Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900)
 */

@font-face {
  font-family: 'Amrys';
  src: url('/image/fonts/Amrys-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amrys';
  src: url('/image/fonts/Amrys-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amrys';
  src: url('/image/fonts/Amrys-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amrys';
  src: url('/image/fonts/Amrys-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amrys';
  src: url('/image/fonts/Amrys-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amrys';
  src: url('/image/fonts/Amrys-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Design variables */
:root {
  --color-primary: #510D02;
  --color-secondary: #F7CFC8;
  --color-tertiary: #FDFDFD;
  --color-quaternary: #181818;
  --color-transparent-primary: #FFF0F0;
  --color-transparent-secondary: #EDEDED;
  --color-background-primary: #FAFAFA;
  --color-background-secondary: #F4F5F9;
  --color-background-tertiary: #FEFEF2;
  --color-text-primary: #FDFDFD;
  --color-text-secondary: #181818;
  --color-icon-primary: #FDFDFD;
  --color-icon-secondary: #181818;
  --color-icon-tertiary: #EB5454;
  --color-icon-quaternary: #48C546;
  --color-border-primary: #FFF0F0;
  --color-border-secondary: #EDEDED;
  --color-border-tertiary: #B2B2B2;
  /* Swiper prev/next: pressed state (see `.swiper-button-*:active`). Override per theme if needed. */
  --swiper-nav-active-bg: var(--color-transparent-primary);
  --font: "Amrys", serif;
  --p-shadows-inset-button-pressed: inset 0px 4.02278px 0px rgba(0, 0, 0, 0.05);
  --p-shadow-button: 0px 2.01139px 0px rgba(0, 0, 0, 0.05);
  --p-shadow-card: 0px 4.02278px 2.01139px rgba(0, 0, 0, 0.05), 0px 0px 2.01139px rgba(0, 0, 0, 0.25);
  --p-shadow-popover: 0px 0px 5px rgba(0, 0, 0, 0.05), 0px 3px 15px rgba(0, 0, 0, 0.1);
  --p-shadow-modal: 0px 0px 2.01139px rgba(0, 0, 0, 0.2), 0px 52.2961px 100px rgba(0, 0, 0, 0.1);
  --p-shadow-base: 0px 2.01139px 6.03417px rgba(63, 63, 68, 0.1), 0px 0px 0px 2px rgba(63, 63, 68, 0.05);
  /* Shared form control metrics (checkout + site) */
  --mm-form-py: 10px;
  --mm-form-px: 16px;
  /* <select>: same outer height as text inputs (fixed box — avoids one dropdown growing taller in WebKit) */
  --mm-form-select-padding-right: 2.5rem;
  --mm-form-line-height: 1.5;
  /* Slightly taller floor so native <select> matches text inputs when appearance is removed */
  --mm-form-min-height: 2.875rem;
  /* Custom select caret (slightly larger stroke for parity with control size) */
  --mm-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23181818' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* `red`/`blue` are dummy colors for @supports only — they test browser `color-mix()` support, not site palette */
@supports (background: color-mix(in srgb, red, blue)) {
  :root {
    --swiper-nav-active-bg: color-mix(in srgb, var(--color-primary) 18%, var(--color-tertiary));
  }
}

html,
html body {
  font-family: var(--font) !important;
}

/* Menus in Armenian: override theme Poppins so menu uses Amrys */
html .top-menu,
html .top-menu .j-menu,
html .top-menu .j-menu li a,
html .top-menu .dropdown-toggle,
html .top-menu .language-title,
html .top-menu .language-title-dropdown,
html .top-menu .currency-title,
html .top-menu .currency-title-dropdown,
html .top-menu,
html .top-menu .j-menu,
html .top-menu .j-menu li a,
html .top-menu .dropdown-toggle,
html .top-menu .language-title,
html .top-menu .language-title-dropdown,
html .top-menu .currency-title,
html .top-menu .currency-title-dropdown,
html .main-menu .j-menu li a,
html .main-menu .links-text,
html .main-menu .j-menu li a,
html .main-menu .links-text,
html header .j-menu,
html header .j-menu a,
html header .links-text,
html .navbar-nav,
html .navbar-nav a,
html header .j-menu,
html header .j-menu a,
html header .links-text,
html .navbar-nav,
html .navbar-nav a,
html .module-item-1 .module-title,
html .module-item-1 .module-title,
html block-content,
html .info-block-title,
html .info-block-title,
html .head-title,
.post-grid .post-thumb .name a {
  font-family: var(--font) !important;
}

br {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

a:focus,
.btn:focus {
  outline: none !important;
}

/* Base components — high specificity vs Journal3 style.min.css (!important + layout roots) */
.title.section-title {
  font-family: var(--font) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Quick checkout + cart: Journal `content_bottom` / footer `bottom` — no frame; collapse empty wrapper */
.route-checkout-checkout .mm-journal-region,
.route-checkout-cart .mm-journal-region {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.route-checkout-checkout .mm-journal-region:not(:has(*)),
.route-checkout-cart .mm-journal-region:not(:has(*)) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Bootstrap: `.input-group .form-control:focus { z-index: 3 }` — keep stack unchanged on focus */
html body .input-group .form-control:focus {
  z-index: 2 !important;
}

/*
 * Quick checkout — coupon / voucher / reward (`.section-cvr`): Journal can lay out `.form-group` as a flex row
 * so a tall/wrapped label stretches `.input-group`; default `align-items: stretch` then makes the submit button
 * match that height. Stack label above the field and keep the input row a single comfortable line height.
 */
html body .quick-checkout-wrapper .section-cvr .form-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px;
}

html body .quick-checkout-wrapper .section-cvr .form-group .control-label {
  flex: 0 0 auto !important;
  width: 100%;
  margin-bottom: 0 !important;
}

html body .quick-checkout-wrapper .section-cvr .input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100%;
}

html body .quick-checkout-wrapper .section-cvr .input-group .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .quick-checkout-wrapper .section-cvr .input-group-btn {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  width: auto !important;
}

html body .quick-checkout-wrapper .section-cvr .input-group-btn .btn {
  height: auto !important;
  min-height: var(--mm-form-min-height) !important;
  align-self: center !important;
  white-space: nowrap;
}

/*
 * Journal3 (style.min): `.form-group .control-label+div { flex: 1 1 200px }` inflates the field row (coupon, address, etc.).
 */
html body .quick-checkout-wrapper .form-group .control-label + div,
html body #checkout-checkout .form-group .control-label + div {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/*
 * Form controls: text inputs only (flat background; no gradients from theme).
 */
html body .site-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.stepper input),
html body .quick-checkout-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.stepper input),
html body .modal input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.stepper input) {
  color: var(--color-quaternary) !important;
  -webkit-text-fill-color: var(--color-quaternary) !important;
  caret-color: var(--color-quaternary) !important;
  background-color: var(--color-tertiary) !important;
  background-image: none !important;
  border: 1px solid rgba(24, 24, 24, 0.3) !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: var(--mm-form-py) var(--mm-form-px);
  line-height: var(--mm-form-line-height) !important;
  min-height: var(--mm-form-min-height) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

/*
 * <textarea>: same hard reset as <select> (UA tint / WebKit) — no caret graphic.
 */
html body .site-wrapper textarea,
html body .quick-checkout-wrapper textarea,
html body .modal textarea,
html body #checkout-checkout textarea {
  color: var(--color-quaternary) !important;
  -webkit-text-fill-color: var(--color-quaternary) !important;
  caret-color: var(--color-quaternary) !important;
  background-color: var(--color-tertiary) !important;
  background-image: none !important;
  border: 1px solid rgba(24, 24, 24, 0.3) !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: var(--mm-form-py) var(--mm-form-px);
  line-height: var(--mm-form-line-height) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
  color-scheme: only light !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/*
 * Native <select>: Chromium often ignores background until appearance is removed; add SVG caret.
 * (border-radius left to you elsewhere.)
 */
html body .site-wrapper select,
html body .quick-checkout-wrapper select,
html body .modal select,
html body #checkout-checkout select {
  color: var(--color-quaternary) !important;
  -webkit-text-fill-color: var(--color-quaternary) !important;
  caret-color: var(--color-quaternary) !important;
  background-color: var(--color-tertiary) !important;
  border: 1px solid rgba(24, 24, 24, 0.3) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  line-height: var(--mm-form-line-height) !important;
  min-height: var(--mm-form-min-height) !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
  color-scheme: only light !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: var(--mm-select-caret) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--mm-form-px) center !important;
  background-size: 1.35rem 1.35rem !important;
  background-clip: padding-box !important;
}

/*
 * Quick checkout — viewports ≤991px: enforce select padding (text can sit flush; caret needs right inset).
 */
@media (max-width: 991px) {
  html body .quick-checkout-wrapper select.form-control,
  html body #checkout-checkout select.form-control,
  html body .quick-checkout-wrapper select.form-control:-webkit-autofill,
  html body .quick-checkout-wrapper select.form-control:-webkit-autofill:hover,
  html body .quick-checkout-wrapper select.form-control:-webkit-autofill:focus,
  html body #checkout-checkout select.form-control:-webkit-autofill,
  html body #checkout-checkout select.form-control:-webkit-autofill:hover,
  html body #checkout-checkout select.form-control:-webkit-autofill:focus {
    padding: 0 var(--mm-form-px) !important;
    padding-right: var(--mm-form-select-padding-right) !important;
    box-sizing: border-box !important;
  }
}

/*
 * Quick checkout — mobile: stack label above field in payment/shipping address (Journal uses row layout on small screens).
 */
@media (max-width: 767px) {
  html body .quick-checkout-wrapper .checkout-section .form-group,
  html body .quick-checkout-wrapper .shipping-address .form-group {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px;
  }

  html body .quick-checkout-wrapper .checkout-section .form-group .control-label,
  html body .quick-checkout-wrapper .shipping-address .form-group .control-label {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    margin-bottom: 0 !important;
  }

  html body .quick-checkout-wrapper .checkout-section .form-group > .form-control,
  html body .quick-checkout-wrapper .checkout-section .form-group > input.form-control,
  html body .quick-checkout-wrapper .checkout-section .form-group > select.form-control,
  html body .quick-checkout-wrapper .checkout-section .form-group > textarea.form-control,
  html body .quick-checkout-wrapper .shipping-address .form-group > .form-control,
  html body .quick-checkout-wrapper .shipping-address .form-group > input.form-control,
  html body .quick-checkout-wrapper .shipping-address .form-group > select.form-control,
  html body .quick-checkout-wrapper .shipping-address .form-group > textarea.form-control {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }

  html body .quick-checkout-wrapper .checkout-section .form-group > .text-danger,
  html body .quick-checkout-wrapper .shipping-address .form-group > .text-danger {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* Undo narrower select cap from the ≤991px rule when address fields are full-width stacked */
  html body .quick-checkout-wrapper .checkout-section select.form-control,
  html body .quick-checkout-wrapper .shipping-address select.form-control {
    max-width: 100% !important;
    padding: var(--mm-form-py) var(--mm-form-px) !important;
    padding-right: var(--mm-form-select-padding-right) !important;
  }
}

/* Armenian storefront: Journal can leave <select> on system UI font — match Amrys with inputs */
html body .quick-checkout-wrapper select,
html body .site-wrapper select,
html body #checkout-checkout select,
html body .quick-checkout-wrapper select,
html body .site-wrapper select,
html body #checkout-checkout select {
  font-family: var(--font) !important;
}

html body .site-wrapper select::-ms-expand,
html body .quick-checkout-wrapper select::-ms-expand,
html body .modal select::-ms-expand,
html body #checkout-checkout select::-ms-expand {
  display: none !important;
}

html body .site-wrapper select option,
html body .quick-checkout-wrapper select option,
html body .modal select option {
  background-color: var(--color-tertiary) !important;
  color: var(--color-quaternary) !important;
}

/* WebKit autofill (often paints yellow on inputs & selects) */
html body .site-wrapper input:-webkit-autofill,
html body .site-wrapper input:-webkit-autofill:hover,
html body .site-wrapper input:-webkit-autofill:focus,
html body .site-wrapper textarea:-webkit-autofill,
html body .site-wrapper textarea:-webkit-autofill:hover,
html body .site-wrapper textarea:-webkit-autofill:focus,
html body .quick-checkout-wrapper input:-webkit-autofill,
html body .quick-checkout-wrapper input:-webkit-autofill:hover,
html body .quick-checkout-wrapper input:-webkit-autofill:focus,
html body .quick-checkout-wrapper textarea:-webkit-autofill,
html body .quick-checkout-wrapper textarea:-webkit-autofill:hover,
html body .quick-checkout-wrapper textarea:-webkit-autofill:focus,
html body .modal input:-webkit-autofill,
html body .modal input:-webkit-autofill:hover,
html body .modal input:-webkit-autofill:focus,
html body .modal textarea:-webkit-autofill,
html body .modal textarea:-webkit-autofill:hover,
html body .modal textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-quaternary) !important;
  caret-color: var(--color-quaternary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-tertiary) inset !important;
  box-shadow: 0 0 0 1000px var(--color-tertiary) inset, 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(24, 24, 24, 0.3) !important;
  padding: var(--mm-form-py) var(--mm-form-px);
  transition: background-color 99999s ease-out 0s !important;
}

/* WebKit autofill — <select> only (inset + caret; inputs/textarea above) */
html body .site-wrapper select:-webkit-autofill,
html body .site-wrapper select:-webkit-autofill:hover,
html body .site-wrapper select:-webkit-autofill:focus,
html body .quick-checkout-wrapper select:-webkit-autofill,
html body .quick-checkout-wrapper select:-webkit-autofill:hover,
html body .quick-checkout-wrapper select:-webkit-autofill:focus,
html body .modal select:-webkit-autofill,
html body .modal select:-webkit-autofill:hover,
html body .modal select:-webkit-autofill:focus,
html body #checkout-checkout select:-webkit-autofill,
html body #checkout-checkout select:-webkit-autofill:hover,
html body #checkout-checkout select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-quaternary) !important;
  caret-color: var(--color-quaternary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-tertiary) inset !important;
  box-shadow: 0 0 0 1000px var(--color-tertiary) inset, 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(24, 24, 24, 0.3) !important;
  transition: background-color 99999s ease-out 0s !important;
  box-sizing: border-box !important;
  padding: .5rem 1.5rem !important;
  min-height: var(--mm-form-min-height) !important;
  line-height: var(--mm-form-line-height) !important;
  background-image: var(--mm-select-caret) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--mm-form-px) center !important;
  background-size: 1.35rem 1.35rem !important;
  background-clip: padding-box !important;
}

html body .site-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):hover,
html body .site-wrapper select:hover,
html body .site-wrapper textarea:hover,
html body .quick-checkout-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):hover,
html body .quick-checkout-wrapper select:hover,
html body .quick-checkout-wrapper textarea:hover,
html body .quick-checkout-wrapper .left input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]).form-control:hover,
html body .quick-checkout-wrapper .left textarea.form-control:hover,
html body .quick-checkout-wrapper .left select.form-control:hover,
html body #checkout-checkout input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):hover,
html body #checkout-checkout textarea:hover,
html body #checkout-checkout select:hover,
html body .modal input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):hover,
html body .modal select:hover,
html body .modal textarea:hover {
  border-color: rgba(81, 13, 2, 0.45) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(81, 13, 2, 0.12) !important;
}

html body .site-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):focus,
html body .site-wrapper select:focus,
html body .site-wrapper textarea:focus,
html body .quick-checkout-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):focus,
html body .quick-checkout-wrapper select:focus,
html body .quick-checkout-wrapper textarea:focus,
html body .quick-checkout-wrapper .left input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]).form-control:focus,
html body .quick-checkout-wrapper .left textarea.form-control:focus,
html body .quick-checkout-wrapper .left select.form-control:focus,
html body #checkout-checkout input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):focus,
html body #checkout-checkout textarea:focus,
html body #checkout-checkout select:focus,
html body .modal input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):focus,
html body .modal select:focus,
html body .modal textarea:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow:
    0 2px 12px rgba(81, 13, 2, 0.14),
    0 0 0 3px rgba(81, 13, 2, 0.22) !important;
}

/* :active — same ring as :focus so textarea matches input while clicking/dragging */
html body .site-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):active,
html body .site-wrapper select:active,
html body .site-wrapper textarea:active,
html body .quick-checkout-wrapper input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):active,
html body .quick-checkout-wrapper select:active,
html body .quick-checkout-wrapper textarea:active,
html body .quick-checkout-wrapper .left input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]).form-control:active,
html body .quick-checkout-wrapper .left textarea.form-control:active,
html body .quick-checkout-wrapper .left select.form-control:active,
html body #checkout-checkout input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):active,
html body #checkout-checkout textarea:active,
html body #checkout-checkout select:active,
html body .modal input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):active,
html body .modal select:active,
html body .modal textarea:active {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow:
    0 2px 12px rgba(81, 13, 2, 0.14),
    0 0 0 3px rgba(81, 13, 2, 0.22) !important;
}

/* Autofill + focus: inset fill + outer ring (inputs/textareas only — selects below keep caret) */
html body .site-wrapper input:-webkit-autofill:focus,
html body .site-wrapper textarea:-webkit-autofill:focus,
html body .quick-checkout-wrapper input:-webkit-autofill:focus,
html body .quick-checkout-wrapper textarea:-webkit-autofill:focus,
html body .modal input:-webkit-autofill:focus,
html body .modal textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-quaternary) !important;
  border-color: var(--color-primary) !important;
  box-sizing: border-box !important;
  padding: var(--mm-form-py) var(--mm-form-px);
  -webkit-box-shadow:
    0 0 0 1000px var(--color-tertiary) inset,
    0 2px 12px rgba(81, 13, 2, 0.14),
    0 0 0 3px rgba(81, 13, 2, 0.22) !important;
  box-shadow:
    0 0 0 1000px var(--color-tertiary) inset,
    0 2px 12px rgba(81, 13, 2, 0.14),
    0 0 0 3px rgba(81, 13, 2, 0.22) !important;
}

html body .site-wrapper select:-webkit-autofill:focus,
html body .quick-checkout-wrapper select:-webkit-autofill:focus,
html body .modal select:-webkit-autofill:focus,
html body #checkout-checkout select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-quaternary) !important;
  border-color: var(--color-primary) !important;
  box-sizing: border-box !important;
  padding: .5rem 1.5rem !important;
  min-height: var(--mm-form-min-height) !important;
  line-height: var(--mm-form-line-height) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--color-tertiary) inset,
    0 2px 12px rgba(81, 13, 2, 0.14),
    0 0 0 3px rgba(81, 13, 2, 0.22) !important;
  box-shadow:
    0 0 0 1000px var(--color-tertiary) inset,
    0 2px 12px rgba(81, 13, 2, 0.14),
    0 0 0 3px rgba(81, 13, 2, 0.22) !important;
  background-image: var(--mm-select-caret) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--mm-form-px) center !important;
  background-size: 1.35rem 1.35rem !important;
  background-clip: padding-box !important;
}

html body .site-wrapper input::placeholder,
html body .site-wrapper textarea::placeholder,
html body .quick-checkout-wrapper input::placeholder,
html body .quick-checkout-wrapper textarea::placeholder,
html body .modal input::placeholder,
html body .modal textarea::placeholder {
  color: var(--color-border-tertiary) !important;
  -webkit-text-fill-color: var(--color-border-tertiary) !important;
  opacity: 1 !important;
}

/* Tables: minimum readable size (>12px) */
html body .site-wrapper table caption,
html body .site-wrapper table td,
html body .site-wrapper table th,
html body .site-wrapper .table caption,
html body .site-wrapper .table > thead > tr > th,
html body .site-wrapper .table > tbody > tr > th,
html body .site-wrapper .table > tfoot > tr > th,
html body .site-wrapper .table > thead > tr > td,
html body .site-wrapper .table > tbody > tr > td,
html body .site-wrapper .table > tfoot > tr > td,
html body .quick-checkout-wrapper table caption,
html body .quick-checkout-wrapper table td,
html body .quick-checkout-wrapper table th,
html body .quick-checkout-wrapper .table caption,
html body .quick-checkout-wrapper .table > thead > tr > th,
html body .quick-checkout-wrapper .table > tbody > tr > th,
html body .quick-checkout-wrapper .table > tfoot > tr > th,
html body .quick-checkout-wrapper .table > thead > tr > td,
html body .quick-checkout-wrapper .table > tbody > tr > td,
html body .quick-checkout-wrapper .table > tfoot > tr > td,
html body .modal table caption,
html body .modal table td,
html body .modal table th,
html body .modal .table > thead > tr > th,
html body .modal .table > tbody > tr > th,
html body .modal .table > tfoot > tr > th,
html body .modal .table > thead > tr > td,
html body .modal .table > tbody > tr > td,
html body .modal .table > tfoot > tr > td {
  font-size: 15px !important;
}

/* Minor elements */
.refine-title {
  font-family: var(--font) !important;
}

.grid-row-bottom-1 {
  background: transparent !important;
}

/* Main menu dropdown chevron: custom SVG (down, hover/active rotates up) */
.desktop-main-menu-wrapper .main-menu .main-menu-item.dropdown>a::after {
  content: "" !important;
  font-family: inherit !important;
  width: 14px;
  height: 8px;
  left: 9px;
  margin-left: auto;
  /* Use mask so we can change color on hover */
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1001 0.599976L6.8501 6.84998L0.600098 0.599976' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1001 0.599976L6.8501 6.84998L0.600098 0.599976' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  /* Homepage default is white; inner pages are dark */
  background-color: #ffffff;
  transform: none;
  transition: transform 120ms ease, background-color 120ms ease;
}

/* Inner pages: simple chevron color #181818 (keep rotation behavior) */
html:not(.route-common-home) body:not(.route-common-home) .desktop-main-menu-wrapper .main-menu .main-menu-item.dropdown>a::after,
body:not(.route-common-home) .desktop-main-menu-wrapper .main-menu .main-menu-item.dropdown>a::after {
  background-color: var(--color-quaternary) !important;
}

/* Homepage: default (not rotated) chevron is white */
html.route-common-home .desktop-main-menu-wrapper .main-menu .main-menu-item.dropdown>a::after,
body.route-common-home .desktop-main-menu-wrapper .main-menu .main-menu-item.dropdown>a::after {
  background-color: #ffffff !important;
}

body .desktop-main-menu-wrapper .main-menu .main-menu-item.dropdown:hover>a::after,
body .desktop-main-menu-wrapper .main-menu .main-menu-item.dropdown.open>a::after {
  background-color: var(--color-primary) !important;
  transform: rotate(180deg);
}

/* Main menu link hover color */
.desktop-main-menu-wrapper .main-menu .main-menu-item>a:hover {
  color: var(--color-primary) !important;
}

/* Footer in Armenian: Amrys font (titles, copyright, all text) */
html footer,
html footer .module-title,
html footer .module-title.closed,
html footer .module-body,
html footer .copyright,
html footer p,
html footer,
html footer .module-title,
html footer .module-title.closed,
html footer .module-body,
html footer .copyright,
html footer p {
  font-family: var(--font) !important;
}

/* Links menu (e.g. footer) in Armenian: Amrys font */
html .links-menu a .links-text,
html .links-menu a .links-text {
  font-family: var(--font) !important;
}

/* Footer h3 / section titles (e.g. .module-title.closed) – font-weight 500 */
footer h3.title.module-title,
footer h3.module-title.closed {
  font-weight: 500 !important;
}

/* Footer Logo + Social: comfortable layout and sizes (edit values below to match design) */
footer .module-info_blocks .module-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
}

footer .module-info_blocks .info-block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Logo = first block – set width/height to what you need */
footer .module-info_blocks .module-body>div:first-child .info-block-img {
  width: 160px;
  max-width: 100%;
  height: auto;
  max-height: 44px;
  object-fit: contain;
  object-position: left center;
}

/* Social/icons = all other blocks */
footer .module-info_blocks .module-body>div:not(:first-child) .info-block-img {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}

/* Footer copyright only (links-menu-77, item 1) – different color; edit to change */
body footer .links-menu-77.links-menu .links-menu-item-1 a,
body footer .links-menu-77.links-menu .links-menu-item-1 .links-text {
  color: var(--color-tertiary) !important;
}

.mm-row {
  display: flex;
  flex-direction: row;
}
.mm-row.center {
  align-items: center;
}
.mm-row.between {
  justify-content: space-between;
}

.mm-row .mm-group {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.mm-row > .mm-col {
  flex: 1;
}

/* Site wrapper container row — only when this page uses the .mm-row toolbar block */
.one-column .container:has(> .mm-row) #content {
  flex-grow: 1;
  max-width: 100% !important;
}

.mm-row.mm-row--auto {
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  gap: clamp(0.5rem, 2.5vw, 1.25rem);
}

.mm-row.mm-row--auto > .mm-col {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .mm-row.mm-row--auto {
    flex-wrap: nowrap;
    align-items: center;
  }
  .mm-row.mm-row--auto > .mm-col {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .mm-row:not(.mm-row--auto) {
    flex-direction: column;
  }
}

/* The rest of layouts */
@media (max-width: 767.98px), screen and (min-width: 768px) and (max-width: 1024px) {
  .mm-row .hideable {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
  }
  .products-filter {
    justify-content: flex-end !important;
  }
  /* Filter button text hide, to be consistent with layout */
  .filter-btn .filter-btn-text {
    display: none !important;
  }
}

.phone .mm-row > .mm-col #column-left,
.phone .mm-row > .mm-col .side-column {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
}

/* Breadcrumb (base + desktop: override Bootstrap/Journal #ccc / #777 on separators & active) */
.breadcrumb {
  font-size: 17px !important;
  margin: 70px auto 70px auto!important;
  text-align: left !important;
  justify-content: flex-start;
  color: var(--color-quaternary) !important;
  padding: 0 1.5rem !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Journal paints a full-bleed strip via ::before — keep the trail flat on the page background. */
.breadcrumb::before {
  display: none !important;
}

.breadcrumb a {
  text-decoration: none !important;
  color: var(--color-quaternary) !important;
  font-size: 18px !important;
}

.breadcrumb > li + li::before,
.breadcrumb > li + li:before {
  color: var(--color-quaternary) !important;
}

.breadcrumb > .active,
.breadcrumb > li.active,
.breadcrumb > li.active > a,
.breadcrumb > li:last-child > a {
  color: var(--color-quaternary) !important;
}

/*
 * Optional abbreviated trail: add class `mm-breadcrumb--abbreviate` on the `<ul>` and emit
 * the ellipsis `<li>` only when that class is enabled (see Twig `mm_breadcrumb_abbreviate`).
 * Without it, all segments stay visible at every breakpoint.
 */
.breadcrumb.mm-breadcrumb .mm-bc-ellipsis {
  display: none !important;
}

/* Abbreviated “…” segment: plain text — no pill (overrides Journal compiled skin) */
.breadcrumb.mm-breadcrumb--abbreviate .mm-bc-ellipsis .mm-bc-ellipsis__inner {
  display: inline !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  line-height: inherit !important;
  color: var(--color-quaternary) !important;
  white-space: nowrap;
  opacity: 1 !important;
}

@media (max-width: 1024px) {
  .breadcrumb.mm-breadcrumb--abbreviate .mm-bc-mid {
    display: none !important;
  }

  .breadcrumb.mm-breadcrumb--abbreviate .mm-bc-ellipsis {
    display: inline-flex !important;
    align-items: center;
    list-style: none;
    pointer-events: none;
    flex-shrink: 0;
  }
}

/* Category */
.title.category-title {
  color: var(--color-quaternary);
  font-family: var(--font) !important;
  margin: 40px 0 40px 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 2rem;
  text-transform: uppercase;
}
.title.category-title span {
  word-wrap: break-word;
  line-height: 6rem;
}

/*
 * Category + “All products” + Journal quick checkout: breadcrumb is inside `.site-wrapper > .container`.
 * The tablet rule also applies `padding: 0 1.5rem` to `.breadcrumb`, which would double the
 * horizontal gutter next to the title/toolbar — reset horizontal padding so only the container gutter applies.
 */
.route-product-category .site-wrapper > .container > .breadcrumb,
.route-product-catalog .site-wrapper > .container > .breadcrumb,
.route-product-manufacturer-info .site-wrapper > .container > .breadcrumb,
.route-checkout-checkout .site-wrapper > .container > .breadcrumb,
.route-checkout-cart .site-wrapper > .container > .breadcrumb {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Align main column with the same inner edge (Journal sometimes adds inset on #content). */
.route-product-category .site-wrapper > .container > .row > #content,
.route-product-catalog .site-wrapper > .container > .row > #content,
.route-product-manufacturer-info .site-wrapper > .container > .row > #content,
.route-checkout-checkout .site-wrapper > .container > .row > #content,
.route-checkout-cart .site-wrapper > .container > .row > #content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*
 * Product (PDP): breadcrumb is inside `#product-product.container`. Same as category — the tablet
 * block also sets horizontal padding on `.breadcrumb`; reset so only the container gutter applies.
 */
.route-product-product:not(.popup) .site-wrapper > .container > .breadcrumb {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.route-product-product:not(.popup) #product-product > .row > #content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Journal expects `html:not(.popup) .site-wrapper > h1.page-title` when the title sits above the main container; it is now the first block inside `#product-product`. */
html:not(.popup) .route-product-product #product-product > h1.page-title > span {
  display: block;
  margin: 0;
  text-align: left;
}
html:not(.popup) .route-product-product #product-product > h1.page-title::after {
  display: none !important;
}

/* Related / bottom modules: strip extra horizontal inset so titles line up with tabs + description. */
.route-product-product:not(.popup) #product-product #content-bottom.mm-content-bottom {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.route-product-product:not(.popup) #product-product .grid-cols {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Selector */

.mm-select {
  position: relative;
  font-family: var(--font) !important;
  min-width: 200px;
}

.mm-select .select-selected.select-arrow-active::after,
.mm-select .select-selected::after {
  width: 18px !important;
  height: 18px !important;
}

.mm-select select {
  display: none !important;
}

.mm-select .mm-select-selected-label {
  display: none !important;
}

.mm-select .select-selected {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-tertiary);
  color: var(--color-icon-secondary);
  padding: 10px 20px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  font-size: 15px;
}

.mm-select .select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 14;
  overflow: hidden;
  background-color: var(--color-tertiary);
  box-shadow: var(--p-shadow-base);
  transform-origin: top center;
  transition:
    max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 1),
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 1);
}

.mm-select .select-items.select-hide {
  max-height: 0;
  opacity: 0;
  transform: scale(0.98, 0.92);
  overflow: hidden;
  pointer-events: none;
}

.mm-select .select-items:not(.select-hide) {
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  opacity: 1;
  transform: scale(1, 1);
  /* overflow-y: scroll only after open animation — set inline in custom.js */
  pointer-events: auto;
}

.mm-select .select-items div {
  color: var(--color-quaternary);
  font-size: 15px;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  transition: color .2s, background-color .2s;
}

.mm-select .select-items div:hover,
.mm-select .select-items div.same-as-selected {
  color: var(--color-text-primary);
  background-color: var(--color-primary);
}

/* Filter facilities */
.products-filter {
  background: none !important;
  background-color: none !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 1rem;
}

.filter-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-family: var(--font) !important;
  font-size: 20px;
  font-weight: 700;
  padding: 10px 30px;
  border: 1px solid #00000030;
  border-radius: 5px;
  color: var(--color-quaternary);
}

.filter-wrapper {
  position: relative;
}

.filter-content {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 624px;
  font-family: var(--font) !important;
  border: 1px solid #00000030;
  background-color: var(--color-background-tertiary);
  border-radius: 5px;
  z-index: 99;
}
.filter-content h1, .filter-content h2, .filter-content h3, .filter-content h4, .filter-content h5, .filter-content h6 {
  color: var(--color-quaternary) !important;
  font-family: var(--font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.filter-content > .filter-content-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem !important;
}
.filter-content > .filter-content-head .filter-close {
  font-family: var(--font) !important;
  font-size: 18px;
  color: var(--color-quaternary) !important;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  border: none;
  cursor: pointer;
}
.filter-content .filter-content-body .panel-body {
  padding: 1.5rem !important;
}
.filter-content .reset-filter::before {
  content: none !important;
  margin: 0 !important;
}
.filter-content .reset-filter::after {
  content: "" !important;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.6001 0.600006L0.600098 20.6" stroke="%23232323" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.6001 20.6L0.600098 0.600006" stroke="%23232323" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.filter-content > .panel-heading a {
  font-family: var(--font) !important;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-quaternary);
  text-decoration: none;
}
.filter-content > .reset-filter::before {
  content: "" !important;
  margin: 0 !important;
}

.filter-content.active {
  display: block;
}

.filter-content .panel-group .panel-heading {
  border-left: none !important;
  border-right: none !important;
}

.module-filter-36 .panel-group .panel-heading {
  border-color: var(--color-text-secondary) !important;
}
.module-filter-36 .panel-group .panel-heading a {
  font-family: var(--font) !important;
  font-size: 18px !important;
  text-transform: capitalize !important;
  color: var(--color-quaternary) !important;
}

.filter-content .panel-group .panel:last-child {
  border-bottom: 1px solid var(--color-text-secondary) !important;
}

html body .module-filter-36 .panel-group .panel-heading a {
  display: flex !important;
  justify-content: space-between !important;
  padding: 2.5rem !important;
}
html body .module-filter-36 .panel-group .panel-heading a::before,
html body .module-filter-36 .panel-group .panel-active .panel-heading a::before {
  display: none !important;
  content: none !important;
}
html body .module-filter-36 .panel-group .panel-heading a::after,
html body .module-filter-36 .panel-group .panel-active .panel-heading a::after,
.mm-select .select-selected.select-arrow-active::after,
.mm-select .select-selected::after,
.mm-expand__button::before {
  content: "" !important;
  display: block !important;
  flex-shrink: 0 !important;
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26 11L16 21L6 11" stroke="%23232323" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform-origin: center !important;
  transition: transform 0.2s ease !important;
}

html body .module-filter-36 .panel-group .panel-heading a.collapsed::after,
html body .module-filter-36 .panel-group .panel-active .panel-heading a.collapsed::after {
  transform: rotate(0deg) !important;
}

html body .module-filter-36 .panel-group .panel-heading a:not(.collapsed)::after,
html body .module-filter-36 .panel-group .panel-active .panel-heading a:not(.collapsed)::after {
  transform: rotate(180deg) !important;
}

.mm-select .select-selected::after {
  transform: rotate(0deg) !important;
}

.mm-select .select-selected.select-arrow-active::after {
  transform: rotate(180deg) !important;
}

/* Language/currency dropdown: custom chevron icon (Figma SVG) */
.language-currency.top-menu .dropdown.drop-menu::after {
  content: "" !important;
  font-size: 0 !important;
  width: 13px !important;
  height: 8px !important;
  padding: 0 !important;
  margin: 0 0 0 5px !important;
  transform: none !important;
  background: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65703 7.071L2.67e-05 1.414L1.41403 0L6.36403 4.95L11.314 0L12.728 1.414L7.07103 7.071C6.8835 7.25847 6.62919 7.36379 6.36403 7.36379C6.09886 7.36379 5.84455 7.25847 5.65703 7.071Z' fill='%23F7CFC8'/%3E%3C/svg%3E") no-repeat center / contain !important;
  filter: drop-shadow(0 3px 6px #00000020) !important;
}

.top-menu .dropdown.dropdown:not(.mega-menu) .j-dropdown>.j-menu,
.secondary-menu .dropdown.dropdown:not(.mega-menu) .j-dropdown>.j-menu {
  background: #fff !important;
}

.dropdown.dropdown .j-dropdown::before,
#cart-content::before {
  border-bottom-color: #fff !important;
}

.module-newsletter .module-body .newsletter-form,
.module-newsletter .module-body .newsletter-form form {
  width: 100%;
}

.module-newsletter-67 .module-body .newsletter-form .input-group input {
  max-width: 320px !important;
}

.module-newsletter-67 .module-body .input-group {
  justify-content: space-between;
}

.module-newsletter-67 .input-group-btn .btn {
  margin: 0 !important;
}

.module-newsletter-67 .module-body .newsletter-form .checkbox {
  max-width: 250px;
}

.module-catalog-262 .subitems {
  display: none;
}

.module-catalog-119 .module-body {
  flex-direction: column;
}

.module-catalog-119 .subitems {
  display: none;
  position: absolute;
  right: -232px;
  top: 0px;
  z-index: 10;
  height: 302px;
  width: 360px !important;
  min-width: 360px;
  padding: 14px 69px 60px;
  background-color: var(--color-background-tertiary);
}

.product_tabs .nav-tabs > li > a,
.module-body .nav-tabs > li > a {
  text-transform: none !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 0 18px 0 !important;
}

.product_tabs .nav-tabs > li > a:focus,
.product_tabs .nav-tabs > li.active > a,
.product_tabs .nav-tabs > li.active > a:hover,
.product_tabs .nav-tabs > li.active > a:active,
.product_tabs .nav-tabs > li.active > a:focus,
.module-body .nav-tabs > li > a:focus,
.module-body .nav-tabs > li.active > a,
.module-body .nav-tabs > li.active > a:hover,
.module-body .nav-tabs > li.active > a:active,
.module-body .nav-tabs > li.active > a:focus {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid var(--color-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Same font size for active + inactive tab links (product page + module body) */
.product_tabs .nav-tabs > li > a,
.module-body .nav-tabs > li > a {
  font-size: 28px !important;
}

.product_tabs .nav-tabs > li.active > a, .product_tabs .nav-tabs > li.active > a:hover, .product_tabs .nav-tabs > li > a:focus, .product_tabs .nav-tabs > li.active > a:focus,
.module-body .nav-tabs > li.active > a, .module-body .nav-tabs > li.active > a:hover, .module-body .nav-tabs > li > a:focus, .module-body .nav-tabs > li.active > a:focus {
  color: var(--color-quaternary) !important;
  background: none !important;
}

div.links-menu-77 .menu-item a .links-text {
  white-space: normal !important;
  text-align: center;
}

.main-menu-3 .main-menu-item-5.mega-menu .grid-row-1 .grid-col-1 {
  position: relative;
}

.module-catalog-119 .module-item:not(.swiper-slide) {
  padding: 12.5px;
  width: calc(100% / 2) !important;
}

.module-catalog-119 .module-item:hover .subitems {
  display: block;
}

/* Desktop mega “Categories” hit-area only — must not match mobile accordion (#main-menu in .mobile-main-menu-wrapper). */
.desktop-main-menu-wrapper div.main-menu.main-menu-3 > .j-menu > .main-menu-item-5 > a,
.desktop-header-active .header-compact .desktop-main-menu-wrapper .main-menu > .j-menu > .menu-item > a {
  padding: 40px 15px !important;
  margin: -40px 0 !important;
}

/* Desktop header background/shadow on inner pages (not homepage) */
html:not(.route-common-home) body:not(.route-common-home) header,
html:not(.route-common-home) body:not(.route-common-home) .site-wrapper>header {
  background: var(--color-tertiary) !important;
  box-shadow: 0px 3px 15px 0px #0000001A, 0px 0px 5px 0px #0000000D !important;
}

html:not(.route-common-home) body:not(.route-common-home) header .secondary-menu drop-menu a:before,
html:not(.route-common-home) body:not(.route-common-home) .site-wrapper>header .secondary-menu .drop-menu>a:before,
html:not(.route-common-home) body:not(.route-common-home) .site-wrapper>header .dropdown-toggle:before,
html:not(.route-common-home) body:not(.route-common-home) .site-wrapper>header #cart>a>i::before {
  color: #181818 !important
}

.site-wrapper {
  background-color: var(--color-background-tertiary);
}

/*
 * Mobile menu / cart / filter overlays: Journal sticky mobile (journal.js) sets inline
 * padding-top on body while `.mobile-bar-sticky` is position:fixed. With `html.mobile-overlay`
 * (overflow:hidden), that padding can still offset `.site-wrapper` and show a white strip above
 * the header in the “peek” area. Clear it while any overlay is open; closing removes
 * `mobile-overlay` and the scroll handler’s inline padding applies again when still scrolled.
 */
html.mobile-overlay body {
  padding-top: 0 !important;
}

/* Homepage header: default (not scrolled) */
html.route-common-home body:not(.sticky-compact) header,
html.route-common-home body:not(.sticky-compact) .site-wrapper>header,
body.route-common-home:not(.sticky-compact) header,
body.route-common-home:not(.sticky-compact) .site-wrapper>header {
  background: #510d0269 !important;
  box-shadow: none !important;
}

/* Homepage header: scrolled/sticky */
html.route-common-home body.sticky-compact header,
html.route-common-home body.sticky-compact .site-wrapper>header,
body.route-common-home.sticky-compact header,
body.route-common-home.sticky-compact .site-wrapper>header {
  background: #2F2F2F80 !important;
  box-shadow: none !important;
}

/* Main menu link color on inner pages (not homepage) */
html:not(.route-common-home) body:not(.route-common-home) .desktop-main-menu-wrapper .main-menu .main-menu-item>a,
html:not(.route-common-home) body:not(.route-common-home) .desktop-main-menu-wrapper .main-menu .menu-item>a,
html:not(.route-common-home) body:not(.route-common-home) .desktop-logo-wrapper .main-menu-item a,
body:not(.route-common-home) .desktop-main-menu-wrapper .main-menu .main-menu-item>a,
body:not(.route-common-home) .desktop-main-menu-wrapper .main-menu .menu-item>a,
body:not(.route-common-home) .desktop-logo-wrapper .main-menu-item a {
  color: var(--color-quaternary) !important;
}

/* Override any per-item menu colors (higher specificity) */
html:not(.route-common-home) body:not(.route-common-home) div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a,
html:not(.route-common-home) body:not(.route-common-home) div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a .links-text,
body:not(.route-common-home) div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a,
body:not(.route-common-home) div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a .links-text {
  color: var(--color-quaternary) !important;
}

/* Main menu link color on homepage */
html.route-common-home body div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a,
html.route-common-home body div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a .links-text,
body.route-common-home div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a,
body.route-common-home div.main-menu.main-menu-3>.j-menu>li.main-menu-item>a .links-text {
  color: var(--color-quaternary) !important;
}

.module-catalog-119 .module-item:not(.swiper-slide) {
  width: 100% !important;
}

.first-dropdown .grid-col.grid-col-1 .grid-items {
  display: flex;
  flex-direction: row;
}

.first-dropdown .grid-col.grid-col-1 .grid-items .grid-item.grid-item-2 {
  width: 60%;
  padding-top: 33px !important;
}

.module-catalog-119 .item-assets .subitems {
  width: auto;
}

div.links-menu-205 .module-body {
  flex-wrap: wrap !important;
  row-gap: 15px;
}

.expand-block .btn {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 0 !important;
  width: 100% !important;
}

body .module-products-334 .module-item:not(.tab-pane) .mm-products-carousel__nav .swiper-button-prev {
  left: auto;
  right: 76px;
}

body .module-products-334 .swiper-button-prev,
body .module-products-334 .swiper-button-next {
  background-color: transparent;
}

.module-products-334 .product-thumb .product-labels {
  display: none !important;
}

/* Product cards: wishlist/compare overlay on image (top-right; markup in product_card.twig) */
.product-thumb {
  position: relative;
}

/*
 * Journal ships `.product-thumb { overflow: hidden }`. On category/manufacturer grids, equal-height
 * rows + caption `min-height: 0` let the text block shrink and clip titles/descriptions. Keep image
 * clipped inside `.image`; allow the card body to show full text.
 */
.main-products.product-grid > .product-layout > .product-thumb,
.product-grid:not(.swiper-wrapper) > .product-layout > .product-thumb {
  overflow: visible !important;
}

.main-products.product-grid .product-thumb .image,
.product-grid:not(.swiper-wrapper) .product-thumb .image {
  overflow: hidden;
}

.product-thumb .name,
.product-thumb .name a,
.product-thumb .description,
.product-thumb .stats,
.product-thumb .price,
.product-thumb .buttons-wrapper,
.product-thumb .extra-group {
  font-family: var(--font) !important;
}

.product-thumb .image {
  position: relative;
}

.product-thumb .price {
  text-align: center;
  width: 100%;
}

/* Beat Journal `.product-thumb .price>div { display:inline-flex; flex-wrap:wrap }` (row = side-by-side). */
.product-thumb .price > div {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.product-thumb .product-top-actions {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px;
  margin: 0;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  pointer-events: none;
}

.product-thumb .product-top-actions .wish-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  pointer-events: auto;
}

.product-thumb .product-top-actions .btn {
  flex-shrink: 0;
}

/* Cart block: full width when wish/compare sit on the image */
.product-grid .product-thumb .buttons-wrapper .button-group {
  justify-content: center;
  width: 100%;
}

@media (max-width: 767px) {
  .product-thumb .product-top-actions {
    padding: 8px;
    gap: 8px;
  }
}

html[dir="rtl"] .product-thumb .product-top-actions {
  right: auto;
  left: 0;
}

/* Product cards: title + description under image; on hover switch to stepper */
.product-thumb .product-card-meta {
  margin-top: 8px;
  margin-bottom: 2px;
  min-height: 34px;
  /* reserve space to avoid layout shift */
}

.product-thumb .product-card-desc {
  overflow: visible;
  display: block;
  text-align: center;
  margin: 5px 0 15px;
  line-height: 1.4;
}

.product-thumb .product-card-stepper {
  display: none;
  justify-content: center;
  margin: 15px 0;
}

.product-thumb:hover .product-card-desc {
  display: none;
}

.product-thumb:hover .product-card-stepper {
  display: flex;
}

/* Blog post carousel: description single line */
.swiper-slide .post-thumb .description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-thumb .read-time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Homepage module-blocks-331: button border + max width */
.module-blocks-331 .btn,
.module-blocks-329 .btn {
  border: 1px solid var(--color-primary) !important;
  max-width: 300px !important;
  width: 100%;
  background-color: transparent !important;
  color: var(--color-quaternary) !important;
}

.module-blocks-331 .btn:hover,
.module-blocks-329 .btn:hover {
  background-color: #510d01 !important;
  color: #fff !important;
}

.module-blocks-331 .btn:hover:after,
.module-blocks-329 .btn:hover:after {
  color: #fff !important
}


.product-thumb .product-hover-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 28px;
  /* reserve space to avoid layout shift */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.product-thumb:hover .product-hover-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-thumb .product-hover-actions .btn {
  margin: 0 !important;
}

/* Product card "Buy" button typography */
.product-thumb .btn-cart,
.product-thumb .btn-cart .btn-text {
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  padding: 1rem !important;
}

.btn-cart:hover {
  box-shadow: none !important;
}

/* (removed) keep add-to-cart after price */

/* Single product page: wishlist/compare on image top-right */
#product-product .product-left .product-image,
.product-info .product-left .product-image {
  position: relative !important;
}

#product-product .product-left .wishlist-compare-image,
.product-info .product-left .wishlist-compare-image {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  display: flex !important;
  flex-direction: row-reverse;
  gap: 24px !important;
}

.wishlist-compare,
.wishlist-compare .btn,
.wishlist-compare a {
  border: none !important;
  border-width: 0 !important;
}

.head-title {
  font-size: 40px;
  color: #181818;
  margin-bottom: 20px;
}

.head-subtitle {
  font-size: 18px;
  color: #181818;
  margin-bottom: 30px !important;
}

.head-small {
  font-size: 22px;
  color: #510D02;
  margin-bottom: 10px;
  display: block;
}

.product-info .button-group-page .stepper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.product-hover-actions {
  position: absolute;
  right: 0
}

.swiper-container {
  padding-bottom: 20px;
}

.module-blog_posts-grid .post-thumb .post-stats {
  position: relative !important;
  transform: none !important;
  background-color: transparent;
  display: none;
}

.read-time {
  color: var(--color-primary);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
}

.category-thumb .name a {
  font-family: var(--font) !important;
}

.module-products-344 .product-card-meta,
.module-products-345 .product-card-meta {
  padding: 0 !important
}

.module-products-344 .caption,
.module-products-345 .caption {
  padding: 0 !important;
}

.module-products-344 .product-card-meta .product-card-title,
.module-products-345 .product-card-meta .product-card-title {
  order: 2;
  text-align: left !important;
}

.module-products-344 .product-card-meta .product-card-desc,
.module-products-345 .product-card-meta .product-card-desc {
  order: 1;
  text-align: left;
}

.module-products-344 .product-card-meta,
.module-products-345 .product-card-meta {
  flex-direction: column;
  display: flex;
}

.module-products-344 .product-thumb:hover .product-card-desc,
.module-products-345 .product-thumb:hover .product-card-desc {
  display: block;
}

.module-products-344 .product-thumb:hover .product-card-stepper,
.module-products-345 .product-thumb:hover .product-card-stepper {
  display: none;
}

.module-products-344 .price,
.module-products-345 .price {
  padding: 0 !important
}

.module-products-344 .product-grid.product-grid .product-thumb .button-group,
.module-products-345 .product-grid.product-grid .product-thumb .button-group {
  border: 0 !important;
}

.module-products-344 .product-layout.swiper-slide,
.module-products-345 .product-layout.swiper-slide {
  box-shadow: none;
}

.module-products-344 .product-card-desc,
.module-products-345 .product-card-desc {
  margin: 38px 0 0;
}

.module-products-344 .product-card-title a,
.module-products-345 .product-card-title a {
  font-family: var(--font);
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 130% !important;
  letter-spacing: 0%;
}

/* Product module grids: block price, left-aligned, no margins (ref. module-products-253) */
.module-products-253 .product-grid .product-thumb .price,
.module-products-343 .product-grid .product-thumb .price,
.module-products-344 .product-grid .product-thumb .price,
.module-products-345 .product-grid .product-thumb .price {
  display: block;
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px !important;
  line-height: 1.35 !important;
  width: auto;
  margin: 0 !important;
  text-align: left;
  padding: 8px;
  padding-top: 0;
  box-sizing: border-box;
}

.module-products-253 .product-grid .product-thumb .price > div,
.module-products-343 .product-grid .product-thumb .price > div,
.module-products-344 .product-grid .product-thumb .price > div,
.module-products-345 .product-grid .product-thumb .price > div {
  display: block !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  align-content: unset !important;
  align-items: unset !important;
  justify-content: unset !important;
  margin: 0 !important;
}

.module-products-253 .product-grid .product-thumb .price .price-new,
.module-products-253 .product-grid .product-thumb .price .price-old,
.module-products-253 .product-grid .product-thumb .price .price-normal,
.module-products-253 .product-grid .product-thumb .price .price-tax,
.module-products-343 .product-grid .product-thumb .price .price-new,
.module-products-343 .product-grid .product-thumb .price .price-old,
.module-products-343 .product-grid .product-thumb .price .price-normal,
.module-products-343 .product-grid .product-thumb .price .price-tax,
.module-products-344 .product-grid .product-thumb .price .price-new,
.module-products-344 .product-grid .product-thumb .price .price-old,
.module-products-344 .product-grid .product-thumb .price .price-normal,
.module-products-344 .product-grid .product-thumb .price .price-tax,
.module-products-345 .product-grid .product-thumb .price .price-new,
.module-products-345 .product-grid .product-thumb .price .price-old,
.module-products-345 .product-grid .product-thumb .price .price-normal,
.module-products-345 .product-grid .product-thumb .price .price-tax {
  margin: 0 !important;
}

.module-products-253 .product-grid .product-thumb .price .price-new,
.module-products-253 .product-grid .product-thumb .price .price-old,
.module-products-253 .product-grid .product-thumb .price .price-normal,
.module-products-343 .product-grid .product-thumb .price .price-new,
.module-products-343 .product-grid .product-thumb .price .price-old,
.module-products-343 .product-grid .product-thumb .price .price-normal,
.module-products-344 .product-grid .product-thumb .price .price-new,
.module-products-344 .product-grid .product-thumb .price .price-old,
.module-products-344 .product-grid .product-thumb .price .price-normal,
.module-products-345 .product-grid .product-thumb .price .price-new,
.module-products-345 .product-grid .product-thumb .price .price-old,
.module-products-345 .product-grid .product-thumb .price .price-normal {
  display: block;
  font-size: inherit !important;
  line-height: inherit !important;
}

.module-products-344 .tab-container .nav-tabs,
.module-products-345 .tab-container .nav-tabs {
  margin: 0 auto;
  max-width: 1030px;
}

.module-products-344 .product-thumb .product-hover-actions,
.module-products-345 .product-thumb .product-hover-actions,
.module-products-343 .product-thumb .product-hover-actions {
  opacity: 1 !important;
  right: 27px;
  top: 25px;
}

.module-products-344 .product-thumb .wish-group,
.module-products-345 .product-thumb .wish-group,
.module-products-343 .product-thumb .wish-group {
  gap: 32px;
}

.module-products-344 .product-thumb .image,
.module-products-344 .product-grid .product-thumb .product-img>div,
.module-products-344 .product-grid .product-thumb .product-img>div img {
  height: 382px !important;
  object-fit: cover;
}

.module-products-345 .product-grid .product-thumb .btn-compare::before,
.module-products-345 .product-grid .product-thumb .btn-wishlist::before {
  background-color: #000000 !important;
}

.module-products .mm-products-carousel__nav div::before {
  font-size: 20px !important;
}

/* Blocks/accordion carousels: sit beside module title row (not tab-header layout) */
.module-products .module-item:not(.tab-pane) .mm-products-carousel__nav {
  top: -46px !important;
}

.module-products .module-item:not(.tab-pane) .mm-products-carousel__nav .swiper-button-prev {
  right: 72px !important;
}

.module-products-343 .btn-wishlist,
.module-products-343 .btn-compare {
  background-color: transparent;
}

.module-products-343 .product-thumb .product-card-title,
.module-products-343 .product-thumb .product-card-title a,
.module-products-343 .product-card-desc {
  text-align: left !important;
}

.module-products-343 .product-card-meta {
  margin-top: 38px;
  padding: 0 !important;
}

.module-products .module-item:not(.tab-pane) .mm-products-carousel__nav > div {
  background-color: transparent;
}

.module-products-343 .product-thumb:hover .product-card-desc {
  display: block;
}

.module-products-343 .btn.btn-wishlist,
.module-products-343 .btn.btn-compare {
  background: transparent !important;
}

/* Header container: 1589px at desktop (Figma 1728px) */
@media (min-width: 1025px) {
  .site-wrapper>header .header .top-bar,
  .site-wrapper>header .header .mid-bar {
    max-width: 1589px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Homepage fullscreen slider: match Figma layout (1589px, vertical bullets left, 3-panel look) */
@media (min-width: 1025px) {

  .site-wrapper .fullscreen-slider,
  .site-wrapper .module-fullscreen_slider.fullscreen-slider {
    max-width: 1589px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }

  .site-wrapper .fullscreen-slider .master-slider,
  .site-wrapper .module-fullscreen_slider .master-slider {
    max-width: 1589px;
    margin: 0 auto;
  }

  .desktop-header-active header:not(.header-slim) .header-compact .mid-bar {
    max-width: 1589px;
    z-index: 99;
  }

  /* Vertical bullets on the left with white line + dot (selected: reddish outline) */
  .site-wrapper .fullscreen-slider .ms-bullets,
  .site-wrapper .module-fullscreen_slider .ms-bullets {
    left: 24px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .site-wrapper .fullscreen-slider .ms-bullets::before,
  .site-wrapper .module-fullscreen_slider .ms-bullets::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
    z-index: 0;
  }

  .site-wrapper .fullscreen-slider .ms-bullet,
  .site-wrapper .module-fullscreen_slider .ms-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
    float: none;
  }

  .site-wrapper .fullscreen-slider .ms-bullet-selected,
  .site-wrapper .module-fullscreen_slider .ms-bullet-selected {
    background: transparent;
    border-color: #e8a39b;
    box-shadow: 0 0 0 1px rgba(232, 163, 155, 0.5);
  }
}

/* Custom Mood megamenu (full-width background, inner container, left categories + right panels) */
@media (min-width: 1025px) {
  .mood-megamenu {
    width: 100vw;
    background: #fdf7ec;
  }

  .mood-megamenu-inner {
    max-width: 1589px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    padding: 32px 0 40px;
  }

  .mood-megamenu-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 260px;
  }

  .mood-megamenu-cat {
    margin-bottom: 6px;
  }

  .mood-megamenu-cat>a {
    display: block;
    font-family: var(--font);
    font-weight: 600;
    color: #1b1917;
  }

  .mood-megamenu-sub {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 0 0 0 14px;
  }

  .mood-megamenu-sub a {
    font-weight: 400;
    color: #1b1917;
  }

  .mood-megamenu-panels {
    flex: 1;
  }

  .mood-megamenu-panel {
    display: none;
  }

  .mood-megamenu-panel.is-active {
    display: block;
  }

  .mood-megamenu-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .mood-megamenu-panel-item img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mood-megamenu-panel-item span {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-family: var(--font);
  }
}

/* Social icons – PNG backgrounds (original behavior) */
body .top-menu .j-menu li.social-instagram>a::before,
body .top-menu .j-menu li.social-facebook>a::before,
body .top-menu .j-menu li.social-youtube>a::before,
body .top-menu .j-menu li.social-tiktok>a::before,
body .top-menu .j-menu li.social-pinterest>a::before,
body .top-menu .j-menu li.social-linkedin>a::before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  max-height: 20px !important;
  height: 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

body .top-menu .j-menu li.social-instagram>a::before {
  background-image: url('/image/social/instagram.png') !important;
}

body .top-menu .j-menu li.social-facebook>a::before {
  background-image: url('/image/social/facebook.png') !important;
}

body .top-menu .j-menu li.social-youtube>a::before {
  background-image: url('/image/social/youtube.png') !important;
}

body .top-menu .j-menu li.social-tiktok>a::before {
  background-image: url('/image/social/tiktok.png') !important;
}

body .top-menu .j-menu li.social-pinterest>a::before {
  background-image: url('/image/social/pinterest.png') !important;
}

body .top-menu .j-menu li.social-linkedin>a::before {
  background-image: url('/image/social/linkedin.png') !important;
}

.product_tabs .nav-tabs {
  justify-content: space-between !important;
  border: none !important;
  border-bottom: 1px solid #d0d0d0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.module-body .nav-tabs {
  justify-content: flex-start !important;
  border: none !important;
  border-bottom: 1px solid #d0d0d0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.product_tabs .nav-tabs > li,
.module-body .nav-tabs > li {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Journal tabs.json can add borders / ::after indicators on li — remove stray vertical edges */
.product_tabs .nav-tabs > li::before,
.product_tabs .nav-tabs > li::after,
.module-body .nav-tabs > li::before,
.module-body .nav-tabs > li::after {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

.product_tabs .tabs-container,
.module-body .tabs-container {
  border: none !important;
  box-shadow: none !important;
}

.route-product-product:not(.popup) .product_tabs {
  margin-top: 100px !important;
}

.product_tabs .tab-content {
  padding-top: 40px !important;
}

.desktop-header-active.route-common-home .header .mid-bar,
.desktop-header-active.route-common-home .desktop-main-menu-wrapper,
.desktop-header-active.route-common-home .mega-menu-content,
.desktop-header-active.route-common-home .mega-menu-content .grid-cols {
  max-width: 100%;
}

.product_extra .nav.nav-tabs a {
  font-size: 28px;
  color: #00000080;
  font-family: var(--font) !important;
  padding: 0 0 2rem 0 !important;
}

.product_extra .block-body {
  margin: 0 0 2rem 0 !important;
}

.expand-block .block-wrapper {
  font-size: 20px;
}

.mega-menu-content .grid-cols {
  max-width: 1589px !important;
}

.mega-menu-content {
  max-width: 100%;
}

.product-details .page-title {
  font-family: var(--font) !important;
}

.product-left .btn-wishlist,
.product-left .btn-compare {
  text-decoration: none;
}

.product-left .btn-compare::before,
.product-left .compare-btn::before {
  color: #232323;
  font-size: 20px;
}

/* Product page: custom compare icon (replace default ::before icon) */
.product-left .wishlist-compare-image .btn-compare::before,
.product-left .wishlist-compare .btn-compare::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  -webkit-mask: url("/image/icons/compare-custom.svg") no-repeat center / contain !important;
  mask: url("/image/icons/compare-custom.svg") no-repeat center / contain !important;
  background-color: var(--color-quaternary) !important;
  color: transparent !important;
  font-size: 0 !important;
  vertical-align: middle;
}

/* Product page: custom wishlist icon (replace default ::before icon) */
.product-left .wishlist-compare-image .btn-wishlist::before,
.product-left .wishlist-compare .btn-wishlist::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  -webkit-mask: url("/image/icons/wishlist-custom.svg") no-repeat center / contain !important;
  mask: url("/image/icons/wishlist-custom.svg") no-repeat center / contain !important;
  background-color: var(--color-quaternary) !important;
  color: transparent !important;
  font-size: 0 !important;
  vertical-align: middle;
}

/* Product grid/cards: custom wishlist icon */
.product-thumb .btn-wishlist::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  -webkit-mask: url("/image/icons/wishlist-custom.svg") no-repeat center / contain !important;
  mask: url("/image/icons/wishlist-custom.svg") no-repeat center / contain !important;
  background-color: var(--color-quaternary) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
}

/* Product grid/cards: custom compare icon */
.product-thumb .btn-compare::before,
.product-thumb .compare-btn::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  -webkit-mask: url("/image/icons/compare-custom.svg") no-repeat center / contain !important;
  mask: url("/image/icons/compare-custom.svg") no-repeat center / contain !important;
  background-color: var(--color-quaternary) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
}

/* Homepage (module-products-334): use background-image icons (not mask) */
body.route-common-home .module-products-334 .product-thumb a.btn.btn-wishlist::before,
html.route-common-home body .module-products-334 .product-thumb a.btn.btn-wishlist::before,
body.route-common-home .module-products-334.module-products-grid a.btn.btn-wishlist::before,
html.route-common-home body .module-products-334.module-products-grid a.btn.btn-wishlist::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background: url("/image/icons/wishlist-custom.svg") no-repeat center / contain !important;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
}

body.route-common-home .module-products-334 .product-thumb a.btn.btn-compare::before,
html.route-common-home body .module-products-334 .product-thumb a.btn.btn-compare::before,
body.route-common-home .module-products-334.module-products-grid a.btn.btn-compare::before,
html.route-common-home body .module-products-334.module-products-grid a.btn.btn-compare::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background: url("/image/icons/compare-custom.svg") no-repeat center / contain !important;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
}

/* Homepage (module-products-334): beat theme hover priority for wishlist/compare */
body.route-common-home .module-products-334 .product-grid .product-thumb a.btn.btn-wishlist:hover::before,
html.route-common-home body .module-products-334 .product-grid .product-thumb a.btn.btn-wishlist:hover::before {
  content: "" !important;
  background: url("/image/icons/wishlist-custom.svg") no-repeat center / contain !important;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body.route-common-home .module-products-334 .product-grid .product-thumb a.btn.btn-compare:hover::before,
html.route-common-home body .module-products-334 .product-grid .product-thumb a.btn.btn-compare:hover::before {
  content: "" !important;
  background: url("/image/icons/compare-custom.svg") no-repeat center / contain !important;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.wish-group {
  flex-direction: row-reverse;
}

/*
 * Icon-only wishlist/compare (class `mm-wish-compare-icon` on anchors in twig):
 * Journal/Bootstrap `.btn` + skin often set a solid background on :focus/:active — neutralize via a dedicated hook.
 */
html body a.mm-wish-compare-icon,
html body a.mm-wish-compare-icon.btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

html body a.mm-wish-compare-icon:hover,
html body a.mm-wish-compare-icon:active,
html body a.mm-wish-compare-icon:focus,
html body a.mm-wish-compare-icon:focus:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
}

html body a.mm-wish-compare-icon:focus {
  outline: none !important;
}

html body a.mm-wish-compare-icon:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
  outline-offset: 3px;
}

/* Same hook + Journal paths (beats skin `.product-thumb .btn…` specificity on cards) */
html body .main-products.product-grid .product-thumb a.mm-wish-compare-icon:hover,
html body .main-products.product-grid .product-thumb a.mm-wish-compare-icon:active,
html body .main-products.product-grid .product-thumb a.mm-wish-compare-icon:focus,
html body .product-grid .product-thumb a.mm-wish-compare-icon:hover,
html body .product-grid .product-thumb a.mm-wish-compare-icon:active,
html body .product-grid .product-thumb a.mm-wish-compare-icon:focus,
html body .side-product a.mm-wish-compare-icon:hover,
html body .side-product a.mm-wish-compare-icon:active,
html body .side-product a.mm-wish-compare-icon:focus,
html body #product-product .wishlist-compare-image a.mm-wish-compare-icon:hover,
html body #product-product .wishlist-compare-image a.mm-wish-compare-icon:active,
html body #product-product .wishlist-compare-image a.mm-wish-compare-icon:focus,
html body .product-info .wishlist-compare-image a.mm-wish-compare-icon:hover,
html body .product-info .wishlist-compare-image a.mm-wish-compare-icon:active,
html body .product-info .wishlist-compare-image a.mm-wish-compare-icon:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
}

html body .main-products.product-grid .product-thumb a.mm-wish-compare-icon.mm-card-icon-btn:focus,
html body .product-grid .product-thumb a.mm-wish-compare-icon.mm-card-icon-btn:focus,
html body .side-product a.mm-wish-compare-icon.mm-card-icon-btn:focus {
  background-image: none !important;
}

/*
 * Journal compiles wishlist/compare from the `button` variable (see product_grid.json / product_page.json),
 * including Focus background on `.btn:focus` — often with !important. Match Journal’s route selectors:
 */
html body.route-product-product:not(.popup) #product-product .wishlist-compare-image a.mm-wish-compare-icon:focus,
html body.route-product-product:not(.popup) .product-left .wishlist-compare-image a.mm-wish-compare-icon:focus,
html body.route-product-product:not(.popup) .product-info .button-group-page .wishlist-compare a.mm-wish-compare-icon:focus,
html body.route-product-product:not(.popup) .product-info .button-group-page .wishlist-compare a.mm-wish-compare-icon.btn:focus,
html body.route-product-product:not(.popup) .product-info .button-group-page .btn-wishlist.mm-wish-compare-icon:focus,
html body.route-product-product:not(.popup) .product-info .button-group-page .btn-compare.mm-wish-compare-icon:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
  outline: none !important;
}

.product-grid .product-layout .product-thumb {
  box-shadow: var(--p-shadow-base) !important;
}

.product-info .product-details {
  gap: .5rem;
}

.product-layout.swiper-slide {
  box-shadow: 0px 0px 5px 2px #3F3F440D;
}

.product-layout .product-card-meta {
  padding: 0 25px;
}

.product-layout .caption {
  padding: 1rem 0 4rem 0;
  gap: 1rem;
  height: auto;
  justify-content: flex-start;
  min-height: 0;
}

.product-info .product-details .rating {
  border: 0 !important;
}

.product-info .product-details .stepper-group {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: none;
  gap: .5rem;
}

.product-price {
  font-family: var(--font);
  font-weight: 700;
  font-size: 28px;
  line-height: 130%;
}

/* Journal sets .name as flex — use block so titles wrap fully without clipping descenders */
.product-thumb .name {
  display: block !important;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  width: 100%;
  align-self: stretch;
  overflow: visible;
  text-align: center;
}

.product-thumb .name a {
  color: var(--color-quaternary) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  padding: 0 1rem !important;
  display: block !important;
  overflow: visible;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center !important;
  line-height: 1.35;
}

.product-list .product-thumb .name a {
  text-align: left !important;
}

.product-thumb .description {
  color: var(--color-quaternary) !important;
  font-size: 18px !important;
  padding: 0 1rem !important;
  margin: 0 !important;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: visible;
  display: block;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  border: none !important;
  line-height: 1.4;
}

.product-list .product-thumb .description {
  text-align: left !important;
}
.product-thumb .product-card-title {
  display: block !important;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

.product-thumb .product-card-title a {
  color: var(--color-quaternary) !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none;
  display: block !important;
  overflow: visible;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.product-thumb .caption .price,
.product-thumb .caption .price .price-normal,
.product-thumb .caption .price .price-new {
  color: var(--color-primary) !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 130% !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}
.product-thumb .price-old {
  font-size: 20px !important;
  line-height: 130% !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* Product cards: `mm-card-icon-btn` on anchors in product_card.twig / side_products.twig.
   Journal Skin ships `.main-products.product-grid .product-thumb .btn-wishlist.btn:hover { background … !important }`;
   `html body` + `.mm-card-icon-btn` wins in cascade for same !important. */
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-compare,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-compare,
html body .side-product a.mm-card-icon-btn.btn-wishlist,
html body .side-product a.mm-card-icon-btn.btn-compare {
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  transition: all .2s;
  background: transparent !important;
  background-color: transparent !important;
}

html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:hover,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:active,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:focus,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-compare:hover,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-compare:active,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-compare:focus,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:hover,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:active,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:focus,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-compare:hover,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-compare:active,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-compare:focus,
html body .side-product a.mm-card-icon-btn.btn-wishlist:hover,
html body .side-product a.mm-card-icon-btn.btn-wishlist:active,
html body .side-product a.mm-card-icon-btn.btn-wishlist:focus,
html body .side-product a.mm-card-icon-btn.btn-compare:hover,
html body .side-product a.mm-card-icon-btn.btn-compare:active,
html body .side-product a.mm-card-icon-btn.btn-compare:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-quaternary) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Focus (incl. mouse): strip Bootstrap/Journal `.btn:focus` fill and focus-ring shadow — not :focus-visible (keyboard below) */
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:focus,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-compare:focus,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:focus,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-compare:focus,
html body .side-product a.mm-card-icon-btn.btn-wishlist:focus,
html body .side-product a.mm-card-icon-btn.btn-compare:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-quaternary) !important;
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:focus-visible,
html body .main-products.product-grid .product-thumb a.mm-card-icon-btn.btn-compare:focus-visible,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-wishlist:focus-visible,
html body .product-grid .product-thumb a.mm-card-icon-btn.btn-compare:focus-visible,
html body .side-product a.mm-card-icon-btn.btn-wishlist:focus-visible,
html body .side-product a.mm-card-icon-btn.btn-compare:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-quaternary) !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
  outline: none !important;
  outline-offset: 3px;
}

.product-thumb .btn-wishlist.btn,
.product-thumb .btn-compare.btn {
  border: 0 !important;
  margin: 0 !important;
}

.product-grid .product-thumb .button-group {
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
  background: none !important;
}
.product-grid .product-thumb .button-group a {
  flex-grow: 1;
}

.product-thumb .central {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0 3rem;
}

/* Buy now */
.product-thumb .central .btn-cart {
  width: 100% !important;
  border-radius: 0 !important;
  color: var(--color-icon-primary) !important;
  background-color: var(--color-primary) !important;
  padding: 15.02px 41.75px !important;
}

.product-thumb .cart-group {
  width: 100% !important;
  flex-direction: row !important;
}

body .product-grid.product-grid .product-thumb .buttons-wrapper {
  position: relative !important;
  left: 0 !important;
  transform: none !important;
  overflow: unset !important;
}

.product-grid.product-grid .product-thumb .buttons-wrapper .button-group {
  opacity: 1 !important;
  visibility: visible !important;
  transform: unset !important;
  padding: 0 !important
}

.product-grid.product-grid .product-thumb .buttons-wrapper .button-group .btn-cart {
  background-color: var(--color-primary);
  color: #FDFDFD;
  border-radius: 0 !important;
  padding: 10.02px 41.75px !important;
  height: 40px;
}

/* Stepper */
html body .quick-checkout-wrapper .stepper,
.stepper {
  width: auto !important;
  border: none !important;
  border-radius: 0 !important;
  gap: 0 !important;
  border: 1px solid rgba(24, 24, 24, 0.3) !important;
  filter: drop-shadow(0px 2.41367px 1.20683px rgba(0, 0, 0, 0.05)) drop-shadow(0px 0px 1.20683px rgba(0, 0, 0, 0.25));
}
html body .quick-checkout-wrapper .stepper input.form-control,
.stepper input.form-control {
  width: 40px !important;
  max-width: 100px !important;
  padding: 4px !important;
  color: var(--color-primary) !important;
  font-size: 16px !important;
  border: none !important;
  background: rgba(255, 255, 255, 1) !important;
  background-color: rgba(255, 255, 255, 1) !important;
}
html body .quick-checkout-wrapper .stepper span,
.stepper span {
  position: relative !important;
  background: rgba(255, 255, 255, 1) !important;
  background-color: rgba(255, 255, 255, 1) !important;
  border: none !important;
  box-shadow: none !important;
}
html body .quick-checkout-wrapper .stepper span i,
.stepper span i {
  color: var(--color-primary) !important;
  background-color: transparent !important;
  font-size: 20px !important;
  padding: 4px !important;
  border: none !important;
}
html body .quick-checkout-wrapper .stepper span i:active,
.stepper span i:active {
  box-shadow: none !important;
}

/* Checkout scroll/selection artefacts: avoid filter-based shadows on stepper controls */
html.route-checkout-checkout body .quick-checkout-wrapper .stepper,
body.route-checkout-checkout .quick-checkout-wrapper .stepper {
  filter: none !important;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.25) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

html.route-checkout-checkout body .quick-checkout-wrapper .stepper span,
html.route-checkout-checkout body .quick-checkout-wrapper .stepper span i,
body.route-checkout-checkout .quick-checkout-wrapper .stepper span,
body.route-checkout-checkout .quick-checkout-wrapper .stepper span i {
  -webkit-user-select: none;
  user-select: none;
}

html.route-checkout-checkout body .quick-checkout-wrapper .cart-section .table-responsive,
html.route-checkout-checkout body .quick-checkout-wrapper .cart-section table,
body.route-checkout-checkout .quick-checkout-wrapper .cart-section .table-responsive,
body.route-checkout-checkout .quick-checkout-wrapper .cart-section table {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* Checkout: no outlines on cart/stepper controls */
html.route-checkout-checkout body .quick-checkout-wrapper .cart-section *:focus,
body.route-checkout-checkout .quick-checkout-wrapper .cart-section *:focus,
html.route-checkout-checkout body .quick-checkout-wrapper .stepper *:focus,
body.route-checkout-checkout .quick-checkout-wrapper .stepper *:focus {
  outline: none !important;
}

.route-product-product #content {
  padding: 0;
}

.route-product-product #content .page-title {
  text-align: left !important;
  padding: 1rem 0 !important;
  margin: 0 !important;
}

#product-product {
  max-width: 1588px;
}

/* Journal layout regions (content_bottom.twig, bottom.twig): same max width as #product-product / main column */
.mm-content-bottom.mm-journal-region,
.mm-bottom.mm-journal-region {
  max-width: 1588px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* PDP: no extra horizontal padding on Journal regions — `#product-product` / `#content` gutters are enough */
.route-product-product:not(.popup) .mm-journal-region {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Product page: Journal modules in `content_bottom` — grid strip + Products module spacing (Figma) */
.route-product-product:not(.popup) #product-product .mm-content-bottom .grid-items > .grid-item:has(.module-products),
.route-product-product:not(.popup) #product-product .mm-content-bottom .grid-items > div:has(.module-products) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Row `width` in Journal becomes max-width on .grid-cols (e.g. 1280px) — fill the 1588px region, not a narrower strip */
.route-product-product:not(.popup) #product-product .mm-content-bottom .grid-cols,
.mm-bottom .grid-cols {
  max-width: 100% !important;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.product-info {
  max-width: 1471px;
  margin: 0 auto;
}

/* PDP: full-width product column — do not center a narrower strip vs breadcrumb / container gutter */
.route-product-product:not(.popup) .product-info {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#product-product .product-labels {
  left: 0 !important;
  position: absolute;
}

.route-product-product:not(.popup) .product-info .product-left {
  background-color: transparent !important;
  padding:0
}
.product-info .product-details .brand-image a{
  padding: 0!important;
}
.product-info .product-manufacturer.brand-image{
  margin:0
}

.route-product-product:not(.popup) .product-info .product-price-group {
  padding:0!important;
  margin:0!important;
}

.route-product-product:not(.popup) .product-info .button-group-page .btn-cart .btn-text, 
.product-info .button-group-page .extra-group .btn:first-child .btn-text{
  font-size: 14px;
}

.route-product-product:not(.popup) .product-info .button-group-page .btn-cart {
  color: var(--color-background-primary) !important;
  background-color: var(--color-primary) !important;
  border-radius: 0 !important;
  border-color: var(--color-primary) !important;
}
.route-product-product:not(.popup) .product-info .button-group-page .btn-cart::before {
  display: none !important;
}

.module-newsletter-67 .input-group .input-group-btn .btn {
  font-family: var(--font) !important;
}

.nav-tabs a {
  font-family: var(--font) !important;
}

.product-layout.swiper-slide {
  box-shadow: none;
}

.module-products-343 .product-layout .caption {
  display: none;
}

.swiper-buttons>div {
  background-color: transparent;
}

/*
 * Swiper prev/next: chevrons as mask + `background-color` so tint follows `--color-primary` (set in Journal / theme).
 * SVG strokes must be black for mask alpha; color is not embedded in the data URL.
 */
.swiper-button-prev,
.swiper-button-next {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  --swiper-nav-color: var(--color-primary, #510d02);
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:focus,
.swiper-button-next:focus,
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  background-image: none !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.swiper-button-prev:active:not(.swiper-button-disabled),
.swiper-button-next:active:not(.swiper-button-disabled) {
  background-color: var(--swiper-nav-active-bg) !important;
  background: var(--swiper-nav-active-bg) !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important;
  display: none !important;
}

.swiper-button-next::before {
  content: "" !important;
  display: inline-block;
  width: 15px;
  height: 27px;
  vertical-align: middle;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.600098 0.600006L10.6001 10.6L0.600098 20.6' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.600098 0.600006L10.6001 10.6L0.600098 20.6' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  background-color: var(--swiper-nav-color) !important;
}

.swiper-button-prev::before {
  content: "" !important;
  display: inline-block;
  width: 15px;
  height: 27px;
  vertical-align: middle;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6001 20.6L0.600097 10.6L10.6001 0.600006' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6001 20.6L0.600097 10.6L10.6001 0.600006' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  background-color: var(--swiper-nav-color) !important;
}

/* Swiper: Journal sets `pointer-events: auto` on disabled arrows — keep them visible (dimmed) but inert so gestures/clicks pass through */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.5 !important;
  visibility: visible !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Product extra */
.product_extra-300 .block-content {
  max-width: 100% !important;
}

/* Expander */
.mm-expand {
  width: 100%;
  font-family: var(--font) !important;
}

/* Collapsed teaser height — keep in sync with `MM_EXPAND_COLLAPSED_PX` in journal3/js/custom.js */
.mm-expand .mm-expand__content {
  max-height: 64px;
  overflow: hidden;
  transition: max-height .5s ease;
}

.mm-expand__toggle {
  display: none;
}

.mm-expand__button {
  display: inline-flex;
  gap: .5rem;
  margin-top: 1rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}
.mm-expand__button::before {
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26 11L16 21L6 11" stroke="%23ffffff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.mm-expand__button:hover::before {
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26 11L16 21L6 11" stroke="%23232323" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  filter: brightness(0.85);
}
.mm-expand__toggle:checked ~ .mm-expand__button::before {
  transform: rotate(180deg);
}

/* With JS (.mm-expand--js), open/close heights are set inline from scrollHeight so max-height animates over real pixels. */
.mm-expand:not(.mm-expand--js) .mm-expand__toggle:checked + .mm-expand__content {
  max-height: none;
  overflow: visible;
}

/* Label text lives in Twig (bilingual spans); toggled by checkbox */
.mm-expand__label-less {
  display: none;
}

.mm-expand__toggle:checked ~ .mm-expand__button .mm-expand__label-more {
  display: none;
}

.mm-expand__toggle:checked ~ .mm-expand__button .mm-expand__label-less {
  display: inline;
}

/* Which language: matches <html lang="hy-am"> (and other hy-*) — edit strings in product_tabs.twig */
.mm-expand__txt--hy {
  display: none !important;
}

html[lang|="hy"] .mm-expand__txt--en {
  display: none !important;
}

html[lang|="hy"] .mm-expand__txt--hy {
  display: inline !important;
}

/* Desktop */
@media (min-width: 1025px) {

  /* Full-width dropdown background */
  .desktop-main-menu-wrapper .mega-menu>.j-dropdown {
    position: absolute;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
  }

  /* Inner container aligned with header width */
  .desktop-main-menu-wrapper .mega-menu>.j-dropdown .mega-menu-content {
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  .module-master_slider-26 .ms-slide {
    position: relative;
  }

  /* Middle text layer (module-subitem-2) as a designed card */
  .module-master_slider-26 .module-item-1 .module-subitem-2.ms-layer-text {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, calc(100% - 48px)) !important;
    max-width: 520px !important;
    z-index: 10 !important;
    padding: 28px 32px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10) !important;
  }

  /* If you also have a separate "shape" layer for the middle block, force it behind the text */
  .module-master_slider-26 .module-item-1 .module-subitem-2.ms-layer-shape {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9 !important;
  }

  /* If your button is a separate layer, keep it above the card */
  .module-master_slider-26 .module-item-1 .ms-btn-container .ms-layer-button {
    z-index: 11 !important;
  }
}

/* Tablet */
@media (max-width: 1250px) {
  /* Was 90% + centered — breadcrumb/title use full padded width; keep #content flush to that column */
  .route-product-product #content {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .module-products-344 .nav-tabs>li:not(:last-child){
    margin-right:40px!important;
  }

  .product_extra .nav.nav-tabs a {
    font-size: 18px !important;
    padding-bottom: 20px;
    line-height: 100%;
  }

  .product_tabs .nav-tabs>li:not(:last-child),
  .module-body .nav-tabs>li:not(:last-child){
    margin: 0 !important;
    border: none !important;
  }

  .product_tabs .nav-tabs > li > a,
  .product_tabs .nav-tabs > li > a:hover,
  .product_tabs .nav-tabs > li > a:active,
  .product_tabs .nav-tabs > li > a:focus,
  .module-body .nav-tabs > li > a,
  .module-body .nav-tabs > li > a:hover,
  .module-body .nav-tabs > li > a:active,
  .module-body .nav-tabs > li > a:focus {
    box-shadow: none !important;
  }
  .product_tabs .nav-tabs > li > a,
  .module-body .nav-tabs > li > a {
    font-size: 18px !important;
  }

  .product_tabs .nav-tabs > li.active > a, .product_tabs .nav-tabs > li.active > a:hover, .product_tabs .nav-tabs > li > a:focus, .product_tabs .nav-tabs > li.active > a:focus,
  .module-body .nav-tabs > li.active > a, .module-body .nav-tabs > li.active > a:hover, .module-body .nav-tabs > li > a:focus, .module-body .nav-tabs > li.active > a:focus {
    color: var(--color-quaternary) !important;
    background: none !important;
    border-bottom: 2px solid var(--color-primary) !important;
  }

  .product-info .btn-compare {
    display: none;
  }

  .breadcrumb {
    margin: 30px 0 0 0 !important;
    font-size: 14px !important;
    padding: 0 15px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    color: var(--color-quaternary) !important;
    box-sizing: border-box;
  }

  /* Match link size to trail (base `.breadcrumb a` is 18px — was skipped on category/catalog). */
  .breadcrumb a {
    color: var(--color-quaternary) !important;
    font-size: inherit !important;
  }

  /*
   * PDP (769–1250px): base `.breadcrumb` here is `margin: 30px 0 0` — no bottom gap, so the gallery row
   * sits flush; flexible order / stacking can make added margin look like it goes “under” the image.
   * Nudge the trail above the product column and reserve space below it.
   */
  .route-product-product:not(.popup) #product-product > .breadcrumb {
    margin-bottom: 24px !important;
    position: relative;
    z-index: 2;
  }

  .route-product-product:not(.popup) #product-product > .row {
    position: relative;
    z-index: 1;
  }

  .title.category-title {
    text-align: left;
    box-sizing: border-box;
  }

  .wrapper, .mega-menu-content, .site-wrapper > .container, .desktop-header-active .is-sticky .header .desktop-main-menu-wrapper, .desktop-header-active .is-sticky .sticky-fullwidth-bg, .boxed-layout .site-wrapper, .breadcrumb, .title-wrapper, .page-title > span, .desktop-header-active .header .top-bar, .desktop-header-active .header .mid-bar, .desktop-main-menu-wrapper {
    max-width: 100% !important;
    padding: 0 1.5rem;
  }

  /* .grid-cols was grouped with .container — nested grids then doubled horizontal padding; keep full-width + padding only when not inside product main container */
  .grid-cols {
    max-width: 100% !important;
    padding: 0 1.5rem;
  }

  /* Journal regions: same as `.site-wrapper > .container` here — full width + 1.5rem gutters (pre-footer `bottom` is not inside that container) */
  .mm-bottom.mm-journal-region {
    max-width: 100% !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* #product-product.container already has the container padding above — do not double inset */
  .route-product-product #product-product .mm-content-bottom.mm-journal-region {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Journal quick checkout + cart: same as PDP — full-width main column, no extra horizontal margin */
  .route-checkout-checkout #content,
  .route-checkout-cart #content {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .route-checkout-checkout #checkout-checkout .mm-content-bottom.mm-journal-region,
  .route-checkout-cart #checkout-cart .mm-content-bottom.mm-journal-region {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .breadcrumb {
    padding: 0 1.5rem !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .head-title {
    font-size: 22px;
  }

  .head-subtitle {
    font-size: 14px;
    margin-bottom: 20px !important;
  }

  .head-small {
    font-size: 16px;
    margin-bottom: 20px;
    display: block;
  }

  .ms-layer-image {
    width: 100% !important;
    object-fit: cover !important;
    left: 0 !important;
    height: 160 !important;
  }

  .ms-slide-layers {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
  }

  .product_tabs .nav-tabs,
  .module-body .nav-tabs {
    border: none !important;
  }

  .module-newsletter-67 .module-body .input-group {
    height: auto !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .module-newsletter-67 .input-group .input-group-btn .btn {
    position: relative;
  }

  .module-products .module-item:not(.tab-pane) .mm-products-carousel__nav {
    top: -36px !important;
  }

  .module-products-344 .nav-tabs>li:not(:last-child) {
    margin-right: 0 !important
  }

  .product-image.direction-horizontal.position-bottom {
    float: none
  }

  .product_extra .nav.nav-tabs a {
    font-size: 14px !important;
  }

  .product-thumb .central {
    padding: 0;
  }
  .product-thumb .btn-cart::before {
    display: none !important;
  }
  .product-thumb .btn-cart .btn-text {
    display: block !important;
  }

  .breadcrumb {
    font-size: 14px !important;
    padding: 0 15px!important;
    text-align: left !important;
    justify-content: flex-start !important;
    color: var(--color-quaternary) !important;
    box-sizing: border-box;
  }

  .breadcrumb a {
    color: var(--color-quaternary) !important;
    font-size: inherit !important;
  }

  .breadcrumb>li+li:before{
    padding:0 6px!important;
  }

  .breadcrumb span {
    font-size: 14px;
    color: var(--color-quaternary);
  }

  .wish-group {
    gap: 4px;
  }
  .wish-group .btn-compare,
  .wish-group .btn-wishlist {
    margin: 0 !important;
    padding: .75rem !important;
  }
  .wish-group .btn-compare::before,
  .wish-group .btn-wishlist::before {
    width: 16px !important;
    height: 16px !important;
  }

  .product-info {
    max-width: 100%;
   }

  .product-blocks {
    max-width: 100%;
    padding: 0;
  }
  .mobile .product-blocks .expand-block{
      margin-bottom: 0;
  }

  #product-product .product-left .product-image,
  .product-info .product-left .product-image {
    width: 100% !important;
  }

  .product-image .swiper.main-image .swiper-pagination{
    display: none;
  }
  .panel-body p{
    font-size:14px;
    line-height: 130%;
  }
  .route-product-product:not(.popup) .product-info .product-details .price-group{
    padding: 0!important;
    border-bottom:0!important
  }
  .product-price {
    font-size: 26px;
  }
  .product_tabs .nav-tabs>li:not(:last-child),
  .module-body .nav-tabs>li:not(:last-child){
    margin: 0 !important;
  }

  .product_tabs .nav-tabs > li > a,
  .module-body .nav-tabs > li > a {
    font-size: 14px !important;
  }

  .product_tabs .nav-tabs > li.active > a, .product_tabs .nav-tabs > li.active > a:hover, .product_tabs .nav-tabs > li > a:focus, .product_tabs .nav-tabs > li.active > a:focus,
  .module-body .nav-tabs > li.active > a, .module-body .nav-tabs > li.active > a:hover, .module-body .nav-tabs > li > a:focus, .module-body .nav-tabs > li.active > a:focus {
    color: var(--color-quaternary) !important;
    background: none !important;
    border-bottom: 2px solid var(--color-primary) !important;
  }

  .product-info .product-details .rating {
    margin:0;
    padding-top: 0;
  }
  .product-info .product-details .product-stats {
    border: 0;
  }
  .btn-extra {
    width: 100%;
  }

  .product-info .button-group-page .extra-group .btn-extra:first-child {
    width: 100%;
    margin-left: 0 !important;
  }
  .product-info .product-details .rating {
    padding-top: 0 !important;
    border-bottom: 0 !important;
  }

  .product-info .product-details .product-stats {
    border-bottom:0;
    padding-bottom:0;
  }

  /* Small screens: comfortable type scale (base grid no longer line-clamps titles) */
  .product-thumb .name {
    overflow: visible !important;
    margin: 1rem 0 0 0 !important;
  }

  .product-thumb .name a {
    font-size: 16px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    -webkit-box-orient: unset !important;
  }

  .product-thumb .description {
    font-size: 13px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    -webkit-box-orient: unset !important;
  }
  .product-thumb .caption .price, .product-thumb .caption .price .price-normal, .product-thumb .caption .price .price-new {
    margin: 0 !important;
    font-size: 14px !important;
  }
  .product-grid .product-thumb .price-old {
    font-size: 12px !important;
  }

  .product_accordion.panel-group .panel-heading a {
      font-size: 14px !important;
      padding-bottom: 20px !important;
      padding-top: 0 !important;
      text-transform: capitalize !important;
  }

  /* Module carousels only (PDP gallery uses `.product-image`, not `.mm-products-carousel__nav`) */
  .module-products .module-item:not(.tab-pane) .mm-products-carousel__nav {
    top: -12px !important;
  }

  .product-thumb .product-card-title {
    font-size: 16px !important;
    display: block !important;
    min-width: 0;
    overflow: visible !important;
  }

  .product-thumb .product-card-title a {
    font-size: 16px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    -webkit-box-orient: unset !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .tab-container .nav-tabs {
    gap: 20px;
  }
  .product-layout .product-card-meta {
    padding:0 10px!important;
  }
  .route-product-product:not(.popup) .product_tabs {
    margin-top:40px!important;
  }

  /* Was .route-product-product .tab-content (80px) — too broad; clashed with .product_tabs spacing */
  .route-product-product:not(.popup) .product_tabs .tab-content {
    padding-top: 24px !important;
  }
  .block-wrapper p {
    font-size: 14px;
  }
  .route-product-product:not(.popup) .product-info .product-details .button-group-page {
    margin-bottom:0
  }
  .route-product-product:not(.popup) .product-info .button-group-page .stepper {
    margin: 0 !important;
  }
  .product-info .product-details .product-stats {
    padding-bottom: 10px;
    border-width: 0;
    border-bottom-width: 0px!important;

  }
  .product_tabs .nav-tabs > li > a, 
  .product_tabs .nav-tabs>li.active>a,
  .module-body .nav-tabs > li > a, 
  .module-body .nav-tabs>li.active>a {
    text-transform: capitalize!important;
  }
  .product-grid.product-grid .product-thumb .buttons-wrapper .button-group .btn-cart {
    padding: 7px 20px !important;
    width: 100%!important;
    margin-top:11px!important;
    height: 40px;
  }
  .product-thumb .btn-cart, .product-thumb .btn-cart .btn-text{
    font-size: 14px !important;
    font-weight: 400 !important;
  }
  .buttons-wrapper{
    margin: 0!important;
  }

  .product-layout .caption {
    padding: 0 0 20px 0;
    justify-content: flex-start;
    height: auto !important;
    flex-shrink: 0;
    min-height: min-content;
  }
  .module-blocks-331 .btn, .module-blocks-329 .btn{
    font-size: 16px;
  }
  .swiper-button-next::before,
  .swiper-button-prev::before {
    width: 14px;
    height: 24px;
  }

  .product-info .btn-compare {
    display: none;
  }

  .route-product-product .breadcrumb {
    font-size: 14px !important;
    margin: 70px 0 24px 0 !important;
    text-align: left;
    justify-content: flex-start;
    color: var(--color-quaternary);
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  .route-product-product .breadcrumb a {
    color: var(--color-quaternary);
    font-size: 14px !important;
  }

  .route-checkout-checkout .site-wrapper > .container > .breadcrumb,
  .route-checkout-cart .site-wrapper > .container > .breadcrumb {
    font-size: 14px !important;
    margin: 70px 0 70px 0 !important;
    text-align: left;
    justify-content: flex-start;
    color: var(--color-quaternary);
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  .route-checkout-checkout .site-wrapper > .container > .breadcrumb a,
  .route-checkout-cart .site-wrapper > .container > .breadcrumb a {
    color: var(--color-quaternary);
    font-size: 14px !important;
  }
}

/* PDP main gallery: keep prev/next centered on image (module carousels use `.mm-products-carousel__nav`) */
.route-product-product:not(.popup) .product-image .swiper-controls .swiper-buttons {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/*
 * Products module — tabbed carousels (products.twig): controls stay in normal flow under the tab row,
 * right-aligned (Figma), not absolutely layered over tab labels.
 */
.module-products .tab-container {
  position: relative;
}

.module-products .tab-container .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px;
  row-gap: 8px;
  margin-bottom: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  box-sizing: border-box;
  list-style: none;
}

.module-products .tab-container .nav-tabs > li {
  float: none;
  margin-right: 0 !important;
  margin-bottom: 0;
}

/* Nav is first in DOM (products.twig) — no flex/order on `.swiper` (that broke Swiper height + slides). */
.module-products .tab-container .mm-products-carousel {
  position: relative;
}

.module-products .tab-container .mm-products-carousel__nav {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto;
  z-index: auto;
}

.module-products .tab-container .mm-products-carousel__nav > div {
  pointer-events: auto;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 36px;
  min-height: 36px;
  padding: 6px;
  border-radius: 0;
  transition: opacity 0.2s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.module-products .tab-container .mm-products-carousel__nav > div:active {
  background-color: transparent !important;
  opacity: 0.85;
}

/* Figma: thin maroon chevrons (same tint as `--color-primary`), module carousels only */
.module-products .mm-products-carousel__nav > .swiper-button-prev::before,
.module-products .mm-products-carousel__nav > .swiper-button-next::before {
  width: 11px !important;
  height: 20px !important;
  background-color: var(--color-primary, #510d02) !important;
}

.module-products .tab-container .tab-content {
  margin-top: 8px;
  padding-top: 16px;
  clear: both;
}

.route-product-product:not(.popup) .product_extra > [class*="product_extra-"] + [class*="product_extra-"] {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Product extras: remove large gap between share block and tabs block */
.route-product-product:not(.popup) .product_tabs {
  margin-top: 0 !important;
}

.route-product-product:not(.popup) #product-product .product_extra + .product_extra,
.route-product-product:not(.popup) #product-product .product-blocks + .tabs-container.product_extra {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/*
 * Product “default” blocks (share buttons, etc.): remove inner horizontal gutters from Journal
 * `.grid-rows` / `.grid-cols` / `.grid-col` and module body so content lines up with main column.
 */
.route-product-product:not(.popup) #product-product .product-blocks.blocks-default {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.route-product-product:not(.popup) #product-product .product-blocks.blocks-default .grid-rows,
.route-product-product:not(.popup) #product-product .product-blocks.blocks-default .grid-row,
.route-product-product:not(.popup) #product-product .product-blocks.blocks-default .grid-cols,
.route-product-product:not(.popup) #product-product .product-blocks.blocks-default .grid-col,
.route-product-product:not(.popup) #product-product .product-blocks.blocks-default .grid-items,
.route-product-product:not(.popup) #product-product .product-blocks.blocks-default .grid-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.route-product-product:not(.popup) #product-product .product-blocks.blocks-default .module-blocks .module-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .route-product-category .main-products.product-grid .product-layout:not(.swiper-slide),
  .route-product-catalog .main-products.product-grid .product-layout:not(.swiper-slide),
  .route-product-manufacturer-info .main-products.product-grid .product-layout:not(.swiper-slide) {
    flex: 0 0 calc(100% / 3 - 0.01px) !important;
    width: calc(100% / 3 - 0.01px) !important;
    max-width: calc(100% / 3 - 0.01px) !important;
  }
}

.product-grid.product-grid .product-thumb .buttons-wrapper .button-group .btn-wishlist {
  background-color: transparent;
}

/* Mobile header */
.mobile-header-active .mobile-bar {
  background: none !important;
  background-color: var(--color-tertiary) !important;
}

.mobile-header-active .menu-trigger::before,
.mobile-header-active .mini-search .search-trigger::before,
.mobile-header-active #cart>a>i::before {
  font-size: 24px !important;
  color: var(--color-primary) !important;
}

.mobile-header-active .mobile-wrapper-header {
  background: none !important;
  justify-content: flex-end;
}
.mobile-header-active .mobile-wrapper-header span {
  display: none !important;
}

.mobile-main-menu-wrapper .main-menu.accordion-menu .main-menu-item {
  border-bottom: 1px solid rgba(51, 51, 51, 1);
}
.mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu>li>a {
  color: var(--color-quaternary) !important;
}

/* Match Journal top-level labels: mixed-case in admin → same visual weight as ALL CAPS items. */
.mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu > li.main-menu-item > a > .links-text {
  text-transform: uppercase;
}
.mobile-main-menu-wrapper .main-menu .j-menu > li > div .j-menu>li>div>.j-menu>li>a {
  padding-left: 0 !important;
  font-size: 15px !important;
  color: var(--color-quaternary) !important;
}
.mobile-main-menu-wrapper .main-menu-3 .main-menu-item-5.mega-menu .grid-row-1 {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.mega-menu-content {
  border: none !important;
  z-index: 97;
}

/* Responsibility fields */
@media (max-width: 1300px) {
  .side-column {
    padding: 0 !important;
  }
  .grid-cols {
    padding: 0 !important;
  }
  .grid-col-column-left-1-2 {
    margin: 0 !important;
  }

  /* Align journal region cap with `.container`-style fluid width (see tablet block for gutters) */
  .mm-content-bottom.mm-journal-region,
  .mm-bottom.mm-journal-region {
    max-width: 100% !important;
  }
}

/*
 * Journal3: `.quick-checkout-wrapper > div { display:flex }` also applies to the loader overlay
 * appended by `loader('.quick-checkout-wrapper', true)` — it becomes a flex sibling of `.quick-checkout`
 * and the spinner sits at the gutter / sidebar edge. Pin overlay to the viewport and center.
 */
html body .quick-checkout-wrapper > .journal-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  align-self: auto !important;
  margin: 0 !important;
}

html body .quick-checkout-wrapper > .journal-loading-overlay .journal-loading {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Payment AJAX overlay: inline `position:absolute` — fill parent and center spinner */
html body .quick-checkout-payment {
  position: relative;
}

html body .quick-checkout-payment .journal-loading-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .quick-checkout-payment .journal-loading-overlay .journal-loading {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.quick-checkout-wrapper .section-body:not(.mm-shipping-carrier),
.quick-checkout-wrapper .section-body:not(.mm-shipping-carrier) div {
  gap: 1rem;
  flex-wrap: nowrap;
}
.quick-checkout-wrapper .section-shipping .section-body > .mm-shipping-carrier[data-shipping-ext="pickup"] { display: inline-flex !important; }
.quick-checkout-wrapper .section-shipping .section-body > .mm-shipping-carrier[data-shipping-ext="free"] { display: inline-flex !important; }

/* SEO brand description */
.brand-desc-wrapper p {
  font-family: var(--font) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--color-quaternary) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  text-wrap: pretty !important;
  text-wrap: balance !important;
  text-wrap: wrap !important;
  text-wrap: wrap-balance !important;
  text-wrap: wrap-balance-balance !important;
  text-wrap: wrap-balance-balance-balance !important;
}

.quick-checkout-wrapper .cart-section .table-responsive+table tfoot td+td {
  width: 40% !important;
}