/* ============================================================================
   TOPCINTO — LUXURY DARK THEME
   Child theme of PrestaShop Classic (9.x)
   ----------------------------------------------------------------------------
   Architecture:
     1. Design tokens (custom properties)
     2. Base & reset
     3. Typography
     4. Layout & helpers
     5. Buttons
     6. Forms
     7. Header (topbar, logo, search, nav, icons)
     8. Hero
     9. Product cards
    10. Category / listing / faceted search
    11. Product page
    12. Footer
    13. Animations & utilities
   Methodology: BEM for custom components, low-specificity overrides.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Surfaces */
  --lx-black: #0E0E0E;
  --lx-deep: #111111;
  --lx-graphite: #1B1B1B;
  --lx-surface: #161616;
  --lx-surface-2: #1F1F1F;
  --lx-elevated: #232323;
  --lx-line: rgba(255, 255, 255, 0.08);
  --lx-line-strong: rgba(255, 255, 255, 0.14);

  /* Metals */
  --lx-gold: #C8A646;
  --lx-gold-soft: #D4AF37;
  --lx-gold-dim: rgba(200, 166, 70, 0.16);
  --lx-silver: #C0C0C0;
  --lx-silver-cool: #E5E5E5;

  /* Text */
  --lx-white: #FFFFFF;
  --lx-text: #DDDDDD;
  --lx-muted: #AFAFAF;
  --lx-faint: #7C7C7C;

  /* Gradients */
  --lx-gold-grad: linear-gradient(135deg, #D4AF37 0%, #C8A646 45%, #A8863A 100%);
  --lx-glass: rgba(14, 14, 14, 0.72);

  /* Typography */
  --lx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lx-font-display: 'Manrope', 'Inter', sans-serif;

  /* Radii */
  --lx-r-sm: 6px;
  --lx-r-md: 10px;
  --lx-r-lg: 16px;
  --lx-r-pill: 999px;

  /* Shadows (soft, never harsh) */
  --lx-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --lx-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --lx-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Motion */
  --lx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lx-t-fast: 160ms;
  --lx-t-base: 240ms;
  --lx-t-slow: 340ms;

  /* Layout */
  --lx-header-h: 128px;
  --lx-header-h-shrink: 84px;
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--lx-black);
  color: var(--lx-text);
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.1px;
}

#wrapper,
#main,
.page-content,
#content-wrapper,
.page-wrapper {
  background-color: transparent;
}

/* Contain full-bleed hero breakout so it never triggers horizontal scroll.
   #header sits outside #wrapper, so its sticky behaviour is unaffected. */
#wrapper { overflow-x: hidden; }

body#index #wrapper {
  padding-top: 0;
}

::selection {
  background: var(--lx-gold);
  color: var(--lx-black);
}

a {
  color: var(--lx-text);
  text-decoration: none;
  transition: color var(--lx-t-fast) var(--lx-ease);
}
a:hover,
a:focus {
  color: var(--lx-gold);
  text-decoration: none;
}

hr {
  border-color: var(--lx-line);
}

img {
  max-width: 100%;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--lx-elevated) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--lx-deep); }
*::-webkit-scrollbar-thumb { background: var(--lx-elevated); border-radius: var(--lx-r-pill); }
*::-webkit-scrollbar-thumb:hover { background: #333; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
  font-family: var(--lx-font-display);
  color: var(--lx-white);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3, .h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

p { color: var(--lx-text); }

.lx-eyebrow {
  font-family: var(--lx-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lx-gold);
}

/* Section title used on home blocks */
.featured-products .h2,
.products-section-title,
h2.products-section-title {
  font-family: var(--lx-font-display);
  color: var(--lx-white);
  text-transform: none;
  text-align: center;
  border: 0;
  margin-bottom: 2.4rem;
  position: relative;
  padding-bottom: 1rem;
}
.products-section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--lx-gold-grad);
}

/* ==========================================================================
   4. LAYOUT & HELPERS
   ========================================================================== */
.container { max-width: 1320px; }

#main > .page-header,
.page-header h1 {
  color: var(--lx-white);
}

/* Generic content cards / blocks on dark */
.card,
.block-category,
.page-content.card,
#content.card {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  color: var(--lx-text);
  box-shadow: none;
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  padding-left: 0;
}
.breadcrumb li a,
.breadcrumb li::after { color: var(--lx-muted); }
.breadcrumb li:last-child span { color: var(--lx-white); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  font-family: var(--lx-font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--lx-r-md);
  transition: transform var(--lx-t-fast) var(--lx-ease),
              background-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease),
              border-color var(--lx-t-base) var(--lx-ease);
  border: 1px solid transparent;
  text-transform: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--lx-gold); outline-offset: 2px; }

.btn-primary,
.btn-primary:visited {
  background: var(--lx-gold-grad);
  color: #1a1407;
  border: none;
  box-shadow: 0 6px 18px rgba(200, 166, 70, 0.22);
}
.btn-primary:hover,
.btn-primary:focus {
  color: #1a1407;
  box-shadow: 0 10px 26px rgba(200, 166, 70, 0.34);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-tertiary,
.btn-outline-primary {
  background: transparent;
  color: var(--lx-white);
  border: 1px solid var(--lx-line-strong);
}
.btn-secondary:hover,
.btn-tertiary:hover,
.btn-outline-primary:hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold);
  background: var(--lx-gold-dim);
}

/* Luxury CTA (custom, BEM) */
.lx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  font-family: var(--lx-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  border-radius: var(--lx-r-pill);
  cursor: pointer;
  transition: transform var(--lx-t-fast) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease);
}
.lx-btn--gold {
  background: var(--lx-gold-grad);
  color: #1a1407;
  box-shadow: 0 8px 24px rgba(200, 166, 70, 0.28);
}
.lx-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(200, 166, 70, 0.4); color: #1a1407; }
.lx-btn--ghost {
  background: transparent;
  color: var(--lx-white);
  border: 1px solid rgba(255,255,255,0.35);
}
.lx-btn--ghost:hover { border-color: var(--lx-gold); color: var(--lx-gold); }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background-color: var(--lx-surface-2);
  border: 1px solid var(--lx-line);
  color: var(--lx-white);
  border-radius: var(--lx-r-md);
  transition: border-color var(--lx-t-base) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease);
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: var(--lx-surface-2);
  border-color: var(--lx-gold);
  box-shadow: 0 0 0 3px var(--lx-gold-dim);
  color: var(--lx-white);
  outline: none;
}
.form-control::placeholder,
input::placeholder { color: var(--lx-faint); }

label,
.form-control-label { color: var(--lx-muted); }

.custom-checkbox input[type="checkbox"] + span,
.custom-radio { border-color: var(--lx-line-strong); }
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-radio input:checked + span { background: var(--lx-gold); }

/* ==========================================================================
   7. HEADER
   ========================================================================== */
#header {
  background: var(--lx-black);
  color: var(--lx-text);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--lx-line);
  transition: background var(--lx-t-base) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease),
              backdrop-filter var(--lx-t-base) var(--lx-ease);
}
/* Glassmorphism (very light) applied when scrolled */
#header.lx-scrolled {
  background: var(--lx-glass);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: var(--lx-shadow-md);
}

/* ==========================================================================
   DESKTOP HEADER — single compact row (logo · search · language/account/cart)
   ========================================================================== */
#header .lx-dh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.75rem;
  row-gap: 0;
  padding: 20px 0;
  transition: padding var(--lx-t-base) var(--lx-ease);
}
#header.lx-scrolled .lx-dh { padding: 12px 0; }
/* Desktop order: logo · search (centre, grows) · nav (right) */
#header .lx-dh__logo { order: 1; flex: 0 0 auto; margin: 0; }
/* Logo: kill the font-metric descent space so the wordmark sits on the same
   baseline as the search bar and the account/cart (was ~9px too low). */
#header .lx-dh__logo { display: flex; align-items: center; line-height: 0; }
#header .lx-dh__logo .lx-logo-h1,
#header .lx-dh__logo > a {
  display: inline-flex; align-items: center; margin: 0; padding: 0; line-height: 1;
}
#header .lx-dh__logo .lx-logo { display: inline-flex; align-items: center; line-height: 1; }
#header .lx-dh__logo .lx-logo__mark { line-height: 1; display: block; }
#header .lx-dh__search { order: 2; flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
#header .lx-dh__search #search_widget { margin: 0; max-width: 520px; width: 100%; }
#header .lx-dh__nav {
  order: 3;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1.1rem;
}
#header .lx-dh__nav a { color: var(--lx-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
#header .lx-dh__nav a:hover { color: var(--lx-gold); }
/* the utility band is empty now — hide it everywhere */
#header .header-nav { display: none !important; }

/* --- Mobile: logo + actions on row 1, full-width search on row 2 --- */
@media (max-width: 767.98px) {
  #header .lx-dh {
    column-gap: 0.5rem;
    row-gap: 12px;
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--lx-line);
  }
  #header .lx-dh__logo { order: 1; }
  #header .lx-dh__nav { order: 2; margin-left: auto; gap: 0.55rem; }
  #header .lx-dh__search { order: 3; flex: 1 1 100%; }
  #header .lx-dh__search #search_widget { max-width: none; }
  #header .lx-dh__logo .lx-logo__mark { font-size: 1.1rem; letter-spacing: 0.2em; }
  /* compact account: avatar only, dropdown anchored to the right edge */
  #header .lx-dh__nav .lx-acct__id { display: none; }
  #header .lx-dh__nav .lx-acct__menu { right: 0; left: auto; max-width: calc(100vw - 20px); }
  /* don't uppercase the account link on mobile (keep it clean) */
  #header .lx-dh__nav .lx-acct__login,
  #header .lx-dh__nav .lx-acct__login .lx-acct__title { font-size: 0.8rem; }
  /* language flag toggle: no hover tooltip, dropdown anchored right */
  #header .lx-dh__nav .lx-lang-tip { display: none !important; }
  #header .lx-dh__nav .language-selector .dropdown-menu { right: 0; left: auto; }
}

/* Top utility bar */
#header .header-top {
  background: transparent;
  padding: 0;
  border: 0;
}
/* Slightly tighten the main row so the two bands read as one header */
#header .header-top .container > .row { padding-top: 6px; }
#header .header-nav {
  background: transparent;      /* unify with the main header row */
  border-bottom: none;          /* no divider → reads as one header */
  padding: 10px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#header .header-nav a { color: var(--lx-muted); }
#header .header-nav a:hover { color: var(--lx-gold); }
#header .header-nav .right-nav { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }

/* Header main row */
#header .header-top .container > .row {
  align-items: center;
  padding: 14px 0;
  transition: padding var(--lx-t-base) var(--lx-ease);
}
#header.lx-scrolled .header-top .container > .row { padding: 8px 0; }

/* Logo — clean logotype */
#_desktop_logo h1,
#_desktop_logo { margin: 0; }
#_desktop_logo a,
#_mobile_logo a {
  display: inline-flex;
  align-items: center;
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lx-white);
  line-height: 1;
}
#_desktop_logo a:hover,
#_mobile_logo a:hover { color: var(--lx-white); }
#_desktop_logo img,
#_mobile_logo img { max-height: 46px; width: auto; }

/* Text logotype (BEM) */
.lx-logo-h1 { margin: 0; line-height: 1; }
.lx-logo { display: inline-flex; align-items: center; }
.lx-logo__mark {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lx-white);
  padding-left: 0.28em; /* optical balance for tracking */
  transition: color var(--lx-t-fast) var(--lx-ease);
}
.lx-logo:hover .lx-logo__mark { color: var(--lx-gold); }
#_mobile_logo .lx-logo__mark { font-size: 1.15rem; letter-spacing: 0.22em; }

/* Search widget — override Classic's own selectors for a guaranteed win.
   Classic ships: #search_widget form i {position:absolute;padding:.5rem}
                  #search_widget form i.clear {right:15px}
                  #search_widget form input {background:#f1f1f1;border-radius:5px} */
#search_widget { width: 100%; max-width: 440px; margin: 0 auto; position: relative; }
#search_widget form { position: relative; display: block; }

#search_widget form input,
#search_widget input[type="text"] {
  width: 100%;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line-strong);
  color: var(--lx-white);
  border-radius: var(--lx-r-pill);
  padding: 11px 44px 11px 46px; /* room for magnifier (left) + clear (right) */
  font-size: 0.85rem;
  line-height: 1.2;
  outline: none;
}
#search_widget form input:focus,
#search_widget input[type="text"]:focus {
  border-color: var(--lx-gold);
  box-shadow: 0 0 0 3px var(--lx-gold-dim);
}
#search_widget form input::placeholder { color: var(--lx-faint); }

/* Both icons: vertically centered inside the pill */
#search_widget form i,
#search_widget form i.material-icons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--lx-muted);
}
/* Magnifier — left */
#search_widget form i.search {
  left: 15px;
  right: auto;
  pointer-events: none;
}
/* Clear — right (shown by JS when typing) */
#search_widget form i.clear {
  left: auto;
  right: 15px;
  font-size: 18px;
  color: var(--lx-faint);
  cursor: pointer;
}
#search_widget form i.clear:hover { color: var(--lx-gold); }

/* Main navigation / mega menu */
#_desktop_top_menu,
.js-top-menu {
  background: transparent;
}
.menu > ul,
.top-menu {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}
.top-menu > li > a,
.menu .top-menu a.dropdown-item {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-text);
  padding: 14px 18px;
  position: relative;
}
.top-menu > li > a::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 8px;
  height: 1.5px;
  background: var(--lx-gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lx-t-base) var(--lx-ease);
}
.top-menu > li > a:hover { color: var(--lx-white); }
.top-menu > li > a:hover::after { transform: scaleX(1); }

/* Mega menu / sub */
.top-menu .sub-menu,
.top-menu .popover {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-top: 2px solid var(--lx-gold);
  box-shadow: var(--lx-shadow-lg);
  border-radius: 0 0 var(--lx-r-md) var(--lx-r-md);
}
.top-menu .sub-menu a { color: var(--lx-muted); text-transform: none; letter-spacing: 0.02em; }
.top-menu .sub-menu a:hover { color: var(--lx-gold); }

/* Top utility bar: contact / account / cart -------------------------------- */
#header .header-nav .row > .hidden-sm-down { display: flex; width: 100%; align-items: center; }
#header .header-nav .right-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
}
#header #_desktop_contact_link #contact-link a,
#header .header-nav a { text-transform: uppercase; letter-spacing: 0.12em; }

/* Make each top-bar block a centered flex item of equal height */
#header .header-nav .right-nav > div,
#header #_desktop_user_info,
#header #_desktop_cart { display: flex; align-items: center; }
#header #_desktop_user_info .user-info,
#header #_desktop_cart .blockcart,
#header #_desktop_cart .blockcart .header {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  height: auto;
}

/* Account + cart links: icon + label, cleanly aligned on one baseline */
#header #_desktop_user_info .user-info > a,
#header #_desktop_cart .blockcart .header > a,
#header #_desktop_cart .blockcart .header {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--lx-muted);
  line-height: 1;
  white-space: nowrap;
  padding: 0;
  transition: color var(--lx-t-fast) var(--lx-ease);
}
#header #_desktop_user_info .user-info > a:hover,
#header #_desktop_cart .blockcart .header > a:hover { color: var(--lx-gold); }
/* Cart is always clickable now */
#header #_desktop_cart .blockcart .header > a { cursor: pointer; }

/* Icon sizing in the top bar */
#header .header-nav .material-icons,
#header #_desktop_user_info .material-icons,
#header #_desktop_cart .material-icons {
  font-size: 20px;
  color: currentColor;
  line-height: 1;
  vertical-align: middle;
}

/* Cart container reset (kill default light bg/padding) */
.blockcart,
.blockcart.active,
.blockcart.inactive,
.header-nav .blockcart { background: transparent !important; color: var(--lx-muted); }

/* Cart counter as a subtle gold accent, not a blob */
#header .blockcart .cart-products-count {
  display: inline-block;
  background: transparent;
  color: var(--lx-gold);
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  min-width: auto;
}
/* When items are present, elevate the whole cart link */
#header .blockcart:not(.inactive) a { color: var(--lx-white); }
#header .blockcart:not(.inactive) .cart-products-count { color: var(--lx-gold); font-weight: 700; }

/* Generic material-icons colour inheritance across header */
.header-nav .material-icons,
#header .material-icons { color: currentColor; }
#header .material-icons { vertical-align: middle; }

/* Header dropdowns & overlays (default PS renders these light) ------------- */
/* Account dropdown (when logged in) */
.user-info .account-list,
#_desktop_user_info .account-list {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-top: 2px solid var(--lx-gold);
  border-radius: 0 0 var(--lx-r-md) var(--lx-r-md);
  box-shadow: var(--lx-shadow-lg);
}
.user-info .account-list a { color: var(--lx-muted); text-transform: none; letter-spacing: 0; }
.user-info .account-list a:hover { color: var(--lx-gold); }

/* ==========================================================================
   Header account menu (TOPCINTO) — person trigger + premium dropdown
   ========================================================================== */
.lx-acct { position: relative; display: inline-flex; }

/* Trigger: avatar + "Hola, name" / "Mi Cuenta" */
.lx-acct__trigger,
.lx-acct__login {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: transparent; border: 0; padding: 0.25rem 0.35rem;
  margin: 0; cursor: pointer; text-decoration: none;
  font: inherit; color: var(--lx-text); line-height: 1;
  border-radius: var(--lx-r-md);
  transition: color var(--lx-t-fast) var(--lx-ease);
}
.lx-acct__trigger:hover,
.lx-acct__login:hover { color: var(--lx-gold); }

.lx-acct__ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  border: 1px solid var(--lx-line-strong);
  color: currentColor; background: var(--lx-surface-2);
  transition: border-color var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
}
.lx-acct__trigger:hover .lx-acct__ava,
.lx-acct__login:hover .lx-acct__ava { border-color: var(--lx-gold); }
.lx-acct__ava svg { width: 20px; height: 20px; }

.lx-acct__id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
/* Keep the account CTA in normal case (matches the logged-in "Hola, name / Mi Cuenta") */
#header .lx-dh__nav .lx-acct__login,
#header .lx-dh__nav .lx-acct__login .lx-acct__title,
.lx-acct__login .lx-acct__hi,
.lx-acct__login .lx-acct__title { text-transform: none !important; letter-spacing: 0.01em; }
.lx-acct__hi {
  font-size: 0.72rem; color: var(--lx-muted); letter-spacing: 0.02em;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lx-acct__title {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.92rem; font-weight: 600; color: var(--lx-white); letter-spacing: 0.01em;
  transition: color var(--lx-t-fast) var(--lx-ease);
}
.lx-acct__trigger:hover .lx-acct__title,
.lx-acct__login:hover .lx-acct__title { color: var(--lx-gold); }
.lx-acct__caret { display: inline-flex; }
.lx-acct__caret svg { width: 14px; height: 14px; transition: transform var(--lx-t-base) var(--lx-ease); }
.lx-acct.is-open .lx-acct__caret svg { transform: rotate(180deg); }

/* Dropdown panel — matches the language/currency selector look */
.lx-acct__menu {
  position: absolute; top: 100%; right: 0; z-index: 1200;
  min-width: 244px; padding: 6px; margin-top: 8px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
  box-shadow: var(--lx-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transform-origin: top right; pointer-events: none;
  transition: opacity var(--lx-t-base) var(--lx-ease),
              transform var(--lx-t-base) var(--lx-ease),
              visibility var(--lx-t-base) var(--lx-ease);
}
.lx-acct.is-open .lx-acct__menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.lx-acct__item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 0.7rem; border-radius: var(--lx-r-sm);
  color: var(--lx-silver-cool); font-size: 0.9rem; text-decoration: none;
  transition: background var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
}
.lx-acct__item svg {
  width: 18px; height: 18px; flex: none; color: var(--lx-muted);
  transition: color var(--lx-t-fast) var(--lx-ease);
}
.lx-acct__item span { line-height: 1; }
.lx-acct__item:hover { background: var(--lx-elevated); color: var(--lx-white); }
.lx-acct__item:hover svg { color: var(--lx-gold); }

.lx-acct__sep { display: block; height: 1px; margin: 0.45rem 0.3rem; background: var(--lx-line); }

.lx-acct__item--logout { color: var(--lx-muted); }
.lx-acct__item--logout:hover { background: rgba(210, 90, 80, 0.12); color: #ff6b6b; }
.lx-acct__item--logout:hover svg { color: #ff6b6b; }

/* ==========================================================================
   MOBILE HEADER BAR (TOPCINTO) — logo · language(flags) · account · cart
   Replaces the classic hamburger + white slide panel (main menu is empty).
   ========================================================================== */
/* Kill any leftover of the old mobile menu system */
#header #menu-icon,
#header #mobile_top_menu_wrapper,
#header .js-top-menu.mobile { display: none !important; }

.lx-mbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; width: 100%;
  padding: 12px 16px 14px;
}
/* Clear separation under the mobile header bar */
@media (max-width: 767.98px) {
  #header .header-nav { border-bottom: 1px solid var(--lx-line); margin-bottom: 10px; }
}
.lx-mbar__logo { flex: none; }
.lx-mbar__logo .lx-logo__mark { font-size: 1.15rem; letter-spacing: 0.22em; }
.lx-mbar__actions { display: flex; align-items: center; gap: 0.55rem; }
.lx-mbar__lang,
.lx-mbar__acct,
.lx-mbar__cart { display: flex; align-items: center; }

/* Account on mobile: compact — just the avatar, dropdown on tap */
.lx-mbar__acct .lx-acct__id { display: none; }
.lx-mbar__acct .lx-acct__trigger { padding: 0; }
.lx-mbar__acct .lx-acct__ava { width: 34px; height: 34px; }
.lx-mbar__acct .lx-acct__menu {
  right: 0; left: auto;
  max-width: calc(100vw - 20px);
}

/* Language on mobile: flag toggle in the bar (no tooltip) */
#header .lx-mbar__lang .lx-lang-toggle {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 6px 8px !important; border-radius: var(--lx-r-sm);
  background: var(--lx-surface-2); border: 1px solid var(--lx-line-strong);
}
.lx-mbar__lang .lx-lang-tip { display: none !important; }
.lx-mbar__lang .lx-lang-flag {
  width: 22px; height: 16px; border-radius: 2px; display: block;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.lx-mbar__lang .lx-lang-caret { font-size: 16px; color: var(--lx-muted); }
.lx-mbar__lang .dropdown-menu { right: 0; left: auto; }
.lx-mbar__cart .cart-products-count,
.lx-mbar__cart .blockcart { color: var(--lx-muted); }

/* Cart preview dropdown */
.blockcart .body,
.cart-preview .body {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  color: var(--lx-text);
  box-shadow: var(--lx-shadow-lg);
}

/* Search autocomplete results */
.ui-autocomplete,
.ac_results,
ul.ui-autocomplete.ui-menu {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  box-shadow: var(--lx-shadow-lg);
  border-radius: var(--lx-r-md);
  overflow: hidden;
}
.ui-autocomplete .ui-menu-item,
.ac_results li { color: var(--lx-text); }
.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-state-active,
.ac_results li.ac_over {
  background: var(--lx-gold-dim) !important;
  color: var(--lx-gold) !important;
  border: 0;
}
.ui-autocomplete .ui-menu-item .product-name,
.ui-autocomplete .price { color: inherit; }

/* Generic dropdown menus (currency / language / sort) */
#header .dropdown-menu,
.header-top .dropdown-menu {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  box-shadow: var(--lx-shadow-md);
}
#header .dropdown-menu .dropdown-item { color: var(--lx-muted); }
#header .dropdown-menu .dropdown-item:hover { background: var(--lx-gold-dim); color: var(--lx-gold); }

/* Add-to-cart confirmation modal */
#blockcart-modal .modal-content,
.modal-content {
  background: var(--lx-surface);
  color: var(--lx-text);
  border: 1px solid var(--lx-line);
}
#blockcart-modal .modal-header,
.modal-header { border-bottom-color: var(--lx-line); }
#blockcart-modal .modal-title,
.modal-title { color: var(--lx-white); }
#blockcart-modal .cart-content .btn { margin-bottom: 0.4rem; }

/* ==========================================================================
   8. HERO (rendered in template, styled here)
   ========================================================================== */
/* Hide the default PS image slider on home — replaced by the custom hero */
.page-home .homeslider-container,
.page-home #iqitmegamenu-wrapper + .homeslider,
.page-home .homeslider,
.page-home #carousel,
.page-home .slick-slider.homeslider { display: none !important; }

.lx-hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Full-bleed: break out of the content container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 3.5rem;
  background:
    radial-gradient(130% 120% at 78% 18%, #232323 0%, #141414 42%, var(--lx-black) 72%);
}
.lx-hero__media {
  position: absolute;
  inset: -6% 0 0 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  /* Subtle luxury texture built from gradients (no external image needed).
     Drop a real photo here later: background-image: url('...'); */
  background-image:
    radial-gradient(60% 80% at 80% 30%, rgba(200,166,70,0.10) 0%, rgba(200,166,70,0) 60%),
    linear-gradient(115deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 40%);
}
.lx-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.6) 42%, rgba(10,10,10,0.15) 100%),
    linear-gradient(0deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0) 35%);
}
.lx-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 5rem 0;
}
.lx-hero__eyebrow { display: inline-block; margin-bottom: 1rem; }
.lx-hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  color: var(--lx-white);
  margin: 0 0 1.3rem;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lx-hero__title em { font-style: normal; color: var(--lx-gold); }
.lx-hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--lx-muted);
  max-width: 46ch;
  margin-bottom: 2.2rem;
}
.lx-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Scroll indicator */
.lx-hero__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--lx-r-pill);
  display: flex; justify-content: center;
  z-index: 2;
}
.lx-hero__scroll-line {
  width: 2px; height: 8px;
  margin-top: 8px;
  background: var(--lx-gold);
  border-radius: 2px;
  animation: lx-scroll 1.6s var(--lx-ease) infinite;
}
@keyframes lx-scroll {
  0% { opacity: 0; transform: translateY(-4px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

/* ==========================================================================
   9. PRODUCT CARDS
   ========================================================================== */
.product-miniature {
  margin-bottom: 1.5rem;
}
.product-miniature .thumbnail-container,
.product-miniature .card {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--lx-t-base) var(--lx-ease-out),
              border-color var(--lx-t-base) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease);
  height: 100%;
}
.product-miniature:hover .thumbnail-container,
.product-miniature:hover .card {
  transform: translateY(-6px);
  border-color: var(--lx-line-strong);
  box-shadow: var(--lx-shadow-md);
}

.product-miniature .thumbnail-container .thumbnail,
.product-thumbnail {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--lx-graphite);
}
.product-miniature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lx-t-slow) var(--lx-ease-out), opacity var(--lx-t-base) var(--lx-ease);
}
.product-miniature:hover img { transform: scale(1.06); }

/* Product body */
.product-miniature .product-description,
.product-miniature .thumbnail-container .product-description {
  padding: 1rem 1.1rem 1.2rem;
  background: var(--lx-surface);
  text-align: left;
}
.product-miniature .product-title a {
  font-family: var(--lx-font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--lx-white);
}
.product-miniature .product-title a:hover { color: var(--lx-gold); }

/* Price */
.product-price-and-shipping { margin-top: 0.35rem; }
.product-miniature .price,
.product-price-and-shipping .price {
  color: var(--lx-gold);
  font-weight: 700;
  font-size: 1.05rem;
}
.product-miniature .regular-price {
  color: var(--lx-faint);
  text-decoration: line-through;
  font-size: 0.85rem;
  font-weight: 400;
  margin-right: 0.4rem;
}

/* Flags / badges */
.product-flags { top: 0.75rem; left: 0.75rem; margin: 0; }
.product-flag {
  background: rgba(20,20,20,0.85);
  backdrop-filter: blur(4px);
  color: var(--lx-white);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--lx-r-pill);
  padding: 5px 12px;
  box-shadow: none;
  border: 1px solid var(--lx-line-strong);
}
.product-flag.new {
  background: rgba(200, 166, 70, 0.14);
  border-color: rgba(200, 166, 70, 0.55);
  color: var(--lx-gold-soft);
}
.product-flag.discount,
.product-flag.on-sale {
  background: var(--lx-gold-grad);
  color: #1a1407;
  border: none;
}

/* Quick actions (wishlist / cart) */
.product-miniature .highlighted-informations,
.product-miniature .variant-links { background: transparent; }
.product-miniature .product-list-actions,
.product-miniature .add-to-cart-or-refresh { margin-top: 0.6rem; }

/* Rating stars */
.product-miniature .star_content,
.comments_note { color: var(--lx-gold); }
.star_content .star { color: var(--lx-faint); }
.star_content .star.star_on,
.star_content .star_on { color: var(--lx-gold); }

/* ==========================================================================
   10. CATEGORY / LISTING / FACETED SEARCH
   ========================================================================== */
.block-category {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  color: var(--lx-text);
}
/* Listing title (NEW PRODUCTS / category name) — no grey box, clean heading */
#js-product-list-header {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--lx-white);
}
/* The mobile "Filter" toggle is redundant (our category/brand menu covers it) */
#search_filter_toggler,
.js-search-toggler,
#search_filter_controls .btn { display: none !important; }
/* New-products (and other non-category listings): drop the faceted "Filter by"
   panel and run the grid full-width for a cleaner look. */
.page-new-products #left-column,
.page-best-sales #left-column,
.page-prices-drop #left-column { display: none !important; }
.page-new-products #content-wrapper,
.page-best-sales #content-wrapper,
.page-prices-drop #content-wrapper {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}
/* Full-width listings have room for more per row: 4 on desktop, 5 on wide screens */
@media (min-width: 992px) {
  .page-new-products #js-product-list .products > .js-product,
  .page-new-products #js-product-list .products > .product,
  .page-best-sales #js-product-list .products > .js-product,
  .page-prices-drop #js-product-list .products > .js-product {
    flex: 0 0 25% !important; max-width: 25% !important;
  }
}
@media (min-width: 1600px) {
  .page-new-products #js-product-list .products > .js-product,
  .page-new-products #js-product-list .products > .product,
  .page-best-sales #js-product-list .products > .js-product,
  .page-prices-drop #js-product-list .products > .js-product {
    flex: 0 0 20% !important; max-width: 20% !important;
  }
}
/* No real manufacturers assigned yet → hide the empty "Brands / No brand" block */
#left-column #search_filters_brands,
#search_filters_brands { display: none !important; }
/* Hide the breadcrumb on listing pages (Home / Loewe reads poorly here) */
.page-category .breadcrumb,
.page-category nav.breadcrumb,
.page-new-products .breadcrumb,
.page-best-sales .breadcrumb,
.page-prices-drop .breadcrumb,
.page-manufacturer .breadcrumb,
.page-supplier .breadcrumb,
.page-search .breadcrumb,
#cms .breadcrumb,
.page-cms .breadcrumb,
.page-contact .breadcrumb { display: none !important; }

/* Contact page: drop the store-info sidebar and centre the form nicely */
.page-contact #left-column { display: none !important; }
.page-contact #content-wrapper {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}
.page-contact #content {
  max-width: 760px;
  margin: 0 auto !important;
}
/* ==========================================================================
   FOOTER — shorter: drop "My account" column, split "Our company" into 2 cols
   ========================================================================== */
/* Remove the "SU CUENTA" column */
#footer #block_myaccount_infos { display: none !important; }
/* Remove the "Stores" link (online-only shop) */
#footer a[href*="/tiendas"],
#footer a[href*="/stores"] { display: none !important; }
/* Flow the tall "Our company" list into 2 columns (its column is already wide) */
@media (min-width: 768px) {
  #footer_sub_menu_2 { column-count: 2; column-gap: 2.5rem; }
  #footer_sub_menu_2 li { break-inside: avoid; margin-bottom: 0.55rem; }
}
/* Remove the odd card/box around the "Store information" block (comes from the
   parent classic theme; force it to match the other footer columns) */
#footer .block-contact,
#footer .links.wrapper.block-contact {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* Centre the footer content and give the link columns even breathing room */
#footer .footer-container {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide the raw file input before bootstrap-filestyle turns it into a button,
   so the native "Choose file / no file selected" never flashes on load. */
input.filestyle {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; overflow: hidden;
  clip: rect(0 0 0 0);
}
.block-category h1,
#category #left-column h1 { color: var(--lx-white); }

/* ==========================================================================
   FACETED SEARCH (TOPCINTO) — premium filter panel
   ========================================================================== */
#search_filters {
  background: linear-gradient(180deg, var(--lx-surface) 0%, var(--lx-graphite) 100%) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg) !important;
  padding: 1.35rem 1.3rem !important;
  position: relative; overflow: hidden;
  color: var(--lx-text);
}
#search_filters::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--lx-gold-grad);
}
/* Panel title ("Filter by") */
#search_filters .facets-title,
#search_filters > .h1, #search_filters > p.h6,
.facets-title {
  color: var(--lx-white) !important;
  font-family: var(--lx-font-display);
  font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase;
  margin: 0 0 1rem !important; padding-bottom: 0.85rem !important;
  border-bottom: 1px solid var(--lx-line);
}
/* Each facet block */
#search_filters .facet {
  border-bottom: 1px solid var(--lx-line);
  padding: 0 0 1rem !important;
  margin: 0 0 1rem !important;
}
#search_filters .facet:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* Facet titles */
#search_filters .facet .facet-title,
#search_filters .facet .h6 {
  color: var(--lx-white) !important;
  font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 0.03em;
  margin: 0 0 0.8rem !important;
}
/* Option rows — control + label on one baseline */
#search_filters .facet ul,
#search_filters .facet .collapse { list-style: none; margin: 0; padding: 0; }
#search_filters .facet li { margin: 0 0 0.5rem; }
#search_filters .facet li:last-child { margin-bottom: 0; }
#search_filters .facet-label {
  display: flex !important; align-items: center; gap: 0.6rem;
  margin: 0 !important; cursor: pointer; line-height: 1.3;
}
#search_filters .facet-label a,
#search_filters .facet .facet-label a {
  color: var(--lx-silver-cool) !important; text-decoration: none; font-weight: 500;
  margin: 0 !important; padding: 0 !important;  /* kill the module's margin-top:.4375rem that pushed the text down */
  display: inline-flex !important; align-items: center; gap: 0.35rem;
  line-height: 1.3; flex: 1 1 auto;
  transition: color var(--lx-t-fast) var(--lx-ease);
}
#search_filters .facet-label:hover a,
#search_filters .facet-label a:hover { color: var(--lx-gold) !important; }
#search_filters .magnitude { color: var(--lx-faint); font-size: 0.82rem; font-weight: 400; }

/* Custom radio / checkbox — gold when active, centred with the label.
   Every property is !important to beat the ps_facetedsearch module CSS. */
#search_filters .custom-checkbox,
#search_filters .custom-radio {
  position: relative !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 18px !important; width: 18px !important; height: 18px !important;
  margin: 0 !important; padding: 0 !important; float: none !important;
  vertical-align: middle !important; word-break: normal !important;
}
/* native control: transparent overlay covering the whole box */
#search_filters .custom-checkbox input[type="checkbox"],
#search_filters .custom-radio input {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important; opacity: 0 !important; cursor: pointer; z-index: 2;
}
/* the visual box — in normal flow, fills the 18px flex parent */
#search_filters .custom-checkbox input[type="checkbox"] + span,
#search_filters .custom-radio input + span,
#search_filters .custom-radio span {
  position: static !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--lx-line-strong) !important;
  background: var(--lx-surface-2) !important;
  border-radius: 5px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  vertical-align: middle !important; box-shadow: none !important; pointer-events: none;
  transition: border-color var(--lx-t-fast) var(--lx-ease), background var(--lx-t-fast) var(--lx-ease);
}
#search_filters .custom-radio input + span,
#search_filters .custom-radio span { border-radius: 50% !important; }
#search_filters .custom-checkbox input[type="checkbox"]:checked + span,
#search_filters .custom-radio input:checked + span {
  background: var(--lx-gold) !important; border-color: var(--lx-gold) !important;
}
/* checkmark: hidden until checked, centred inside the box */
#search_filters .custom-checkbox span .checkbox-checked,
#search_filters .custom-checkbox span .material-icons { display: none !important; margin: 0 !important; }
#search_filters .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked,
#search_filters .custom-checkbox input[type="checkbox"]:checked + span .material-icons {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
  color: #1a1407 !important; font-size: 13px !important; line-height: 1 !important;
}
#search_filters .custom-radio input:checked + span::after {
  content: "" !important; width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: #1a1407 !important;
}
/* Classic floats the checkbox to the top-left, which broke the vertical centring.
   Force the label into a clean centred flex row. */
#search_filters .facet li,
#search_filters .facet-label,
#search_filters .facet-label > *,
#search_filters .custom-checkbox,
#search_filters .custom-radio { float: none !important; }
#search_filters .facet-label {
  display: flex !important; align-items: center !important;
  gap: 0.6rem; margin: 0 !important; padding: 0 !important;
}
#search_filters .facet-label a { flex: 1 1 auto; }
#search_filters .custom-checkbox,
#search_filters .custom-radio { align-self: center; }

/* "Clear all" — the #_desktop_… element is just a CONTAINER (no box), the
   actual pill is the .js-search-filters-clear-all button inside it. */
#_desktop_search_filters_clear_all {
  display: block !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 0 1.35rem !important;
}
.js-search-filters-clear-all {
  display: inline-flex !important; align-items: center; gap: 0.35rem;
  margin: 0 !important; padding: 0.45rem 1rem !important;
  background: var(--lx-surface-2) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-radius: var(--lx-r-pill) !important;
  color: var(--lx-muted) !important;
  font-size: 0.78rem !important; font-weight: 600; letter-spacing: 0.03em;
  cursor: pointer; box-shadow: none !important;
  transition: color var(--lx-t-fast) var(--lx-ease), border-color var(--lx-t-fast) var(--lx-ease);
}
.js-search-filters-clear-all:hover { color: var(--lx-gold) !important; border-color: var(--lx-gold) !important; }
.js-search-filters-clear-all .material-icons { font-size: 16px !important; }

/* Price slider (jQuery UI) — dark track, gold range + handles */
#search_filters .faceted-slider { margin-top: 0.35rem; }
#search_filters .ps-shown-by-js .ui-slider,
#search_filters .ui-slider {
  background: var(--lx-surface-2) !important; border: 1px solid var(--lx-line-strong) !important;
  height: 5px; border-radius: 3px; margin: 0.65rem 8px 0.35rem; position: relative;
}
#search_filters .ui-slider .ui-slider-range {
  background: var(--lx-gold-grad) !important; height: 100%; border-radius: 3px;
}
#search_filters .ui-slider .ui-slider-handle {
  width: 16px; height: 16px; border-radius: 50%; top: -6px; margin-left: -8px;
  background: var(--lx-gold) !important; border: 2px solid var(--lx-black) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45); cursor: grab; outline: none;
}
#search_filters .ui-slider .ui-slider-handle:focus,
#search_filters .ui-slider .ui-slider-handle:active { box-shadow: 0 0 0 4px var(--lx-gold-dim); }
/* current price value text */
#search_filters .faceted-slider p,
#search_filters [id^="facet_label"] { color: var(--lx-white) !important; font-weight: 600; margin: 0 0 0.2rem; }

.active_filters { background: var(--lx-surface-2); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); }
.active_filters .filter-block { background: var(--lx-elevated); color: var(--lx-text); border-radius: var(--lx-r-pill); }

/* Sort / top bar */
.products-sort-order .select-title,
.products-sort-order .dropdown-menu {
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line);
  color: var(--lx-text);
}
.pagination .page-list { background: transparent; }
.pagination a { color: var(--lx-muted); }
.pagination .current a,
.pagination a:hover { color: var(--lx-gold); }

/* ==========================================================================
   11. PRODUCT PAGE
   ========================================================================== */
#product #content { background: transparent; }
.product-container { color: var(--lx-text); }

.product-cover,
.images-container .product-cover {
  background: var(--lx-graphite);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  overflow: hidden;
}
.product-cover img { border-radius: var(--lx-r-lg); }
.js-qv-mask .thumb-container .thumb,
.product-thumbnails .thumb {
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
}
.product-thumbnails .thumb.selected,
.thumb.js-thumb.selected { border-color: var(--lx-gold); }

.product-information,
.product-information .product-description { color: var(--lx-text); }
.product-prices .current-price .price,
.current-price span { color: var(--lx-gold); font-weight: 700; }
.product-prices .regular-price { color: var(--lx-faint); }
.product-discount .discount { background: var(--lx-gold-grad); color: #1a1407; border-radius: var(--lx-r-pill); }

/* Variants */
.product-variants .product-variants-item { margin-bottom: 1.25rem; }
.product-variants .input-container .radio-label {
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line-strong);
  color: var(--lx-text);
  border-radius: var(--lx-r-md);
}
.product-variants input:checked + .radio-label,
.input-color:checked + span,
.input-container input:checked ~ .radio-label {
  border-color: var(--lx-gold);
  color: var(--lx-white);
  box-shadow: 0 0 0 2px var(--lx-gold-dim);
}

.product-add-to-cart {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  padding: 1.25rem;
}
.product-quantity .qty .input-group,
#quantity_wanted { background: var(--lx-surface-2); color: var(--lx-white); }

.tabs,
.product-tabs .nav-tabs {
  border-color: var(--lx-line);
}
.tabs .nav-tabs .nav-link {
  color: var(--lx-muted);
  border: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tabs .nav-tabs .nav-link.active {
  color: var(--lx-white);
  background: transparent;
  border-bottom: 2px solid var(--lx-gold);
}

.product-features .data-sheet .name,
.product-features .data-sheet .value {
  background: var(--lx-surface-2);
  color: var(--lx-text);
}

/* Reassurance block */
.block-reassurance {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
}
.block-reassurance li { border-color: var(--lx-line) !important; }
.block-reassurance span { color: var(--lx-text); }
.block-reassurance img { filter: invert(78%) sepia(30%) saturate(500%) hue-rotate(2deg); }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
#footer {
  background: var(--lx-deep);
  border-top: 1px solid var(--lx-line);
  color: var(--lx-muted);
  padding-top: 3.5rem;
  margin-top: 4rem;
}
#footer .footer-container { background: transparent; box-shadow: none; }
#footer h3,
#footer .h3,
.footer-container li.h3 { color: var(--lx-white); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }
#footer a,
#footer .links a { color: var(--lx-muted); }
#footer a:hover { color: var(--lx-gold); }
#footer .links ul > li { border-color: var(--lx-line); }

/* Newsletter */
.block_newsletter,
#footer .block_newsletter {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  padding: 1.5rem;
}
.block_newsletter input[type="email"] {
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line-strong);
  color: var(--lx-white);
  border-radius: var(--lx-r-pill);
}
.block_newsletter .btn { border-radius: var(--lx-r-pill); }

/* Social */
.social-icons li a,
.social-icons a {
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line);
  border-radius: 50%;
  transition: all var(--lx-t-base) var(--lx-ease);
}
.social-icons li a:hover { background: var(--lx-gold-dim); border-color: var(--lx-gold); }

/* Copyright bar */
#footer .text-sm-center a { color: var(--lx-faint); }

/* ==========================================================================
   12b. SITEWIDE DARK COVERAGE (cart, checkout, account, cms, tables, alerts)
   ========================================================================== */

/* --- Generic content surfaces on inner pages --- */
#main .page-header,
.page-content,
.page-footer,
.card-block,
.block-categories,
.checkout-step,
.address,
.cart-summary,
.cart-grid-body .card,
.cart-grid-right .card,
#content-hook_order_confirmation,
.page-customer-account #content,
.page-addresses .address,
.cms-block,
#cms .page-content {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  color: var(--lx-text);
  border-radius: var(--lx-r-lg);
  box-shadow: none;
}

/* Page titles on inner pages */
.page-header h1,
h1.page-heading,
.page-title,
#main h1,
#main h2 { color: var(--lx-white); }

/* --- No box behind the page title (cleaner floating heading) --- */
#main .page-header,
#main > .page-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* --- Account home: drop the englobing container box, keep only the individual cards --- */
.page-customer-account #content:has(.links),
.page-customer-account .links {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --- Page footer (bottom nav): no box, just the floating pill buttons --- */
.page-footer,
#main .page-footer,
.page-customer-account .page-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Elegant "Sign out" button (ONLY the account-page footer one, never the header) --- */
.page-footer a[href*="mylogout"] {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.75rem; padding: 0.72rem 2.1rem;
  border: 1px solid var(--lx-line-strong); border-radius: var(--lx-r-pill);
  color: var(--lx-muted) !important; font-weight: 600; letter-spacing: 0.03em;
  transition: border-color var(--lx-t-base) var(--lx-ease), color var(--lx-t-base) var(--lx-ease), background var(--lx-t-base) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
}
.page-footer a[href*="mylogout"]::before {
  font-family: 'Material Icons'; content: "\e9ba"; font-size: 18px; line-height: 1;
}
.page-footer a[href*="mylogout"]:hover {
  border-color: var(--lx-gold); color: var(--lx-gold) !important;
  background: var(--lx-gold-dim); transform: translateY(-1px);
}

/* --- Tables --- */
.table,
table.table,
.table-labeled,
.cart-items {
  color: var(--lx-text);
  background: transparent;
}
.table th,
.table thead th,
.table-labeled th { color: var(--lx-white); border-color: var(--lx-line); }
.table td,
.table tbody td { border-color: var(--lx-line); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); }

/* --- Alerts / notifications --- */
.alert,
.notification,
.notifications-container .alert {
  border-radius: var(--lx-r-md);
  border: 1px solid var(--lx-line);
  background: var(--lx-surface-2);
  color: var(--lx-text);
}
.alert-success { border-left: 3px solid #4a9d6a; }
.alert-danger,
.alert-error { border-left: 3px solid #c0563f; }
.alert-warning { border-left: 3px solid var(--lx-gold); }
.alert-info { border-left: 3px solid #4a7fa5; }
.alert a { color: var(--lx-gold); }

/* --- Cart & checkout --- */
.cart-summary-line,
.cart-total,
.cart-summary-subtotals-container,
.cart-detailed-totals,
.checkout .content { color: var(--lx-text); }
.cart-summary-line .value,
.cart-total .value,
.cart-summary .cart-total { color: var(--lx-white); font-weight: 600; }
.product-line-grid,
.cart-item { border-bottom: 1px solid var(--lx-line); }
.card-block .cart-detailed-actions .btn { width: 100%; }
.checkout-step .step-title,
.checkout-step .step-number { color: var(--lx-white); }
.checkout-step.-current .content { border-color: var(--lx-gold); }
#order-summary-content,
.order-confirmation-table { color: var(--lx-text); }

/* Promo / voucher */
.block-promo .promo-code,
.cart-summary .block-promo { background: var(--lx-surface-2); border: 1px dashed var(--lx-line-strong); }
.block-promo .code { color: var(--lx-gold); }

/* --- Customer account --- */
.page-customer-account .link-item,
.links-list a,
#history .orders,
.account-links .link-item {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  color: var(--lx-text);
  border-radius: var(--lx-r-md);
  transition: border-color var(--lx-t-base) var(--lx-ease), color var(--lx-t-base) var(--lx-ease);
}
.page-customer-account .link-item:hover,
.account-links .link-item:hover { border-color: var(--lx-gold); color: var(--lx-gold); }
.page-customer-account .link-item i,
.account-links .link-item i { color: var(--lx-gold); }

/* --- CMS / textual content --- */
#cms .page-content,
.cms-block,
.rte-content { color: var(--lx-text); }
.rte-content h1, .rte-content h2, .rte-content h3 { color: var(--lx-white); }
blockquote { border-left: 3px solid var(--lx-gold); background: var(--lx-surface-2); color: var(--lx-muted); }

/* --- Misc UI --- */
.tooltip-inner { background: var(--lx-elevated); color: var(--lx-white); }
.badge { background: var(--lx-elevated); color: var(--lx-text); }
.badge-success { background: #2f5c40; color: #d5f0df; }
.well, .panel { background: var(--lx-surface); border: 1px solid var(--lx-line); }
.modal-backdrop.show { opacity: 0.72; }
hr { border-top-color: var(--lx-line); }

/* Quantity steppers */
.bootstrap-touchspin .btn,
.input-group-btn-vertical .btn,
.js-touchspin {
  background: var(--lx-surface-2);
  border-color: var(--lx-line-strong);
  color: var(--lx-white);
}

/* Category description / block-category text */
#category-description,
.category-cover + .block-category .category-description,
.block-category .category-description { color: var(--lx-muted); }

/* Empty-state / no products */
#js-product-list .alert,
.products-selection .no-products,
#product-list-bottom { color: var(--lx-muted); }

/* ==========================================================================
   12c. FIXES: quick-view, wishlist, product page contrast, reviews, newsletter
   ========================================================================== */

/* --- Quick view (the "lupa" overlay on product cards) --- */
.product-miniature .highlighted-informations {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.product-miniature .quick-view,
.product-miniature a.quick-view.js-quick-view {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 8px 16px;
  background: rgba(14, 14, 14, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r-pill);
  color: var(--lx-white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--lx-t-base) var(--lx-ease), color var(--lx-t-base) var(--lx-ease), border-color var(--lx-t-base) var(--lx-ease);
}
.product-miniature .quick-view:hover,
.product-miniature a.quick-view.js-quick-view:hover,
.highlighted-informations .quick-view:hover,
a.quick-view:hover {
  background: var(--lx-gold-grad) !important;
  border-color: transparent !important;
  color: #1a1407 !important;
}
.product-miniature .quick-view:hover .material-icons,
a.quick-view:hover .material-icons { color: #1a1407 !important; }
.product-miniature .quick-view .material-icons {
  font-size: 18px;
  line-height: 1;
  margin: 0;
  vertical-align: middle;
}

/* "All products" link → centred gold pill button that stands out */
.all-product-link {
  float: none !important;
  display: flex !important;
  width: fit-content;
  align-items: center; gap: 0.45rem;
  margin: 1.75rem auto 0.5rem !important;
  padding: 0.72rem 2rem !important;
  background: var(--lx-gold-grad) !important;
  color: #1a1407 !important;
  border: none !important;
  border-radius: var(--lx-r-pill) !important;
  font-size: 0.86rem !important; font-weight: 700 !important; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(200, 166, 70, 0.25);
  transition: transform var(--lx-t-fast) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
.all-product-link:hover,
.all-product-link:focus {
  color: #1a1407 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(200, 166, 70, 0.42);
}
.all-product-link i,
.all-product-link .material-icons { color: #1a1407 !important; font-size: 18px; }
/* Centre the Quick View over the image, fade in on hover (cleaner than the
   classic bottom-anchored chip). Only the image area, not the description. */
.product-miniature .thumbnail-top { position: relative; overflow: hidden; }
.product-miniature .thumbnail-top .highlighted-informations {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--lx-t-base) var(--lx-ease), transform var(--lx-t-base) var(--lx-ease);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.34) 100%);
}
.product-miniature:hover .thumbnail-top .highlighted-informations {
  opacity: 1;
  transform: translateY(0);
}
.product-miniature .thumbnail-top .highlighted-informations .quick-view { pointer-events: auto; }

/* --- Wishlist heart (blockwishlist, injected by JS) --- */
.wishlist-button-add,
.wishlist-button-product,
.product-miniature .wishlist-button-add,
button.wishlist-button-add {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 14, 14, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lx-line-strong);
  border-radius: 50%;
  color: var(--lx-white);
  box-shadow: none;
  transition: all var(--lx-t-base) var(--lx-ease);
  cursor: pointer;
}
.wishlist-button-add:hover,
.wishlist-button-product:hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold);
  background: var(--lx-gold-dim);
}
.wishlist-button-add .material-icons,
.wishlist-button-add i,
.wishlist-button-add svg { color: currentColor; fill: currentColor; width: 20px; height: 20px; font-size: 20px; }
.wishlist-button-add.checked,
.wishlist-button-add.active { color: var(--lx-gold); border-color: var(--lx-gold); }
/* Wishlist modal + toast on dark */
.wishlist-modal .modal-content,
.wishlist-list-container { background: var(--lx-surface); color: var(--lx-text); border: 1px solid var(--lx-line); }
.wishlist-toast { background: var(--lx-elevated); color: var(--lx-white); border: 1px solid var(--lx-line); }
.wishlist-add-to-new.text-primary { color: var(--lx-gold) !important; }

/* --- Product page: text contrast --- */
.product-information,
.product-information .product-description,
.product-description,
.product-description p,
.product-description li,
#product .product-information { color: var(--lx-text); }
#product h1.h1,
.product-actions .product-title,
.product-information h1 { color: var(--lx-white); }
.product-reference,
.product-reference span,
.product-quantities label { color: var(--lx-muted); }
.product-reference span { color: var(--lx-silver-cool); }
.product-information .product-manufacturer,
.product-manufacturer a { color: var(--lx-gold); }
.product-features .data-sheet dt.name { background: var(--lx-surface-2); color: var(--lx-white); }
.product-features .data-sheet dd.value { background: var(--lx-surface); color: var(--lx-text); }
.product-tabs .tab-pane,
#product .tabs .tab-pane { color: var(--lx-text); }
.social-sharing span { color: var(--lx-muted); }

/* --- Reviews (productcomments) --- */
#product-comments-list,
#product-comments-list-header,
#product-comments-list-footer,
.product-comments-additional-info {
  background: transparent;
  color: var(--lx-text);
}
.product-comment-list-item,
.comment {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
  color: var(--lx-text);
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
}
.product-comment-list-item .comment-author,
.product-comment-list-item .author,
.comment-infos { color: var(--lx-white); }
.product-comment-list-item .comment-date,
.comment-date { color: var(--lx-faint); }
.grade-stars,
.star-rating,
.comments-note .star-on,
.grade-stars .star-on { color: var(--lx-gold); }
.grade-stars .star,
.star-rating .star { color: var(--lx-faint); }
.comments-nb { color: var(--lx-muted); }
.product-list-reviews .grade-stars { filter: none; }

/* Review buttons */
.btn-comment,
.btn-comment-big,
.btn-comment-huge {
  background: var(--lx-gold-grad);
  color: #1a1407;
  border: none;
  border-radius: var(--lx-r-md);
  font-weight: 600;
}
.btn-comment:hover,
.btn-comment-huge:hover { color: #1a1407; box-shadow: 0 8px 20px rgba(200,166,70,0.28); }
.btn-comment-inverse {
  background: transparent;
  color: var(--lx-white);
  border: 1px solid var(--lx-line-strong);
}
.btn-comment-inverse:hover { border-color: var(--lx-gold); color: var(--lx-gold); }
.product-comment-modal .modal-content { background: var(--lx-surface); color: var(--lx-text); border: 1px solid var(--lx-line); }
.star-rating .cancel, .star-rating .star { cursor: pointer; }

/* --- Newsletter band ("Get our latest news and special sales") --- */
.block_newsletter {
  background: linear-gradient(180deg, var(--lx-graphite) 0%, var(--lx-deep) 100%);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  padding: 2rem 2.25rem;
}
.block_newsletter #block-newsletter-label,
.block_newsletter p#block-newsletter-label {
  color: var(--lx-white);
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0;
}
.block_newsletter .input-wrapper { position: relative; }
.block_newsletter input[type="email"] {
  width: 100%;
  background: var(--lx-elevated) !important;
  border: 1px solid var(--lx-line-strong);
  color: var(--lx-white);
  border-radius: var(--lx-r-pill);
  padding: 12px 20px;
  transition: border-color var(--lx-t-base) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
.block_newsletter input[type="email"]:focus {
  border-color: var(--lx-gold);
  box-shadow: 0 0 0 3px var(--lx-gold-dim);
  outline: none;
}
.block_newsletter input[type="email"]::placeholder { color: var(--lx-faint); }
.block_newsletter [type="submit"],
.block_newsletter button[type="submit"],
.block_newsletter .btn {
  background: var(--lx-gold-grad);
  color: #1a1407;
  border: none;
  border-radius: var(--lx-r-pill);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 26px;
  transition: transform var(--lx-t-fast) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
.block_newsletter [type="submit"]:hover,
.block_newsletter .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(200,166,70,0.3); color: #1a1407; }
.block_newsletter .newsletter-conditions,
.block_newsletter p:not(#block-newsletter-label) { color: var(--lx-faint); font-size: 0.78rem; }
.block_newsletter .alert { margin-top: 0.75rem; }

/* --- Newsletter footer: bulletproof against page-scoped !important input rules
   (account pages force inputs dark; re-assert gold button + elevated field here) --- */
#footer .block_newsletter input[type="email"],
#footer .block_newsletter input[type="text"],
.block_newsletter input[type="email"],
.block_newsletter input[type="text"] {
  background: var(--lx-elevated) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-radius: var(--lx-r-pill) !important;
}
#footer .block_newsletter input[type="submit"],
#footer .block_newsletter button[type="submit"],
#footer .block_newsletter .btn,
.block_newsletter input[type="submit"],
.block_newsletter button[type="submit"],
.block_newsletter .btn {
  background: var(--lx-gold-grad) !important;
  color: #1a1407 !important;
  border: none !important;
  border-radius: var(--lx-r-pill) !important;
}

/* ==========================================================================
   12d. FIELD-TESTED FIXES (from live screenshots)
   Classic's primary colour is cyan (#24b9d7). Its selectors out-specify ours,
   and some module content ships inline colours — hence the !important below.
   ========================================================================== */

/* --- Product flags: "NEW" gold-outlined, discounts solid gold --- */
.product-flags li.product-flag.new {
  background: rgba(18, 18, 18, 0.82) !important;
  border: 1px solid var(--lx-gold) !important;
  color: var(--lx-gold-soft) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.on-sale {
  background: var(--lx-gold-grad) !important;
  color: #1a1407 !important;
  border: none !important;
  font-size: 0.68rem !important;
}

/* --- Selected / hovered product thumbnail: gold, not cyan --- */
#product .thumb.selected,
#product .js-thumb.selected,
.product-images .thumb.selected,
.thumb.js-thumb.selected,
.js-thumb-selected,
#product .thumb:hover,
.product-images .thumb:hover,
.thumb.js-thumb:hover,
.js-thumb-container .thumb:hover { border: 2px solid var(--lx-gold) !important; }

/* --- Reassurance block: content ships inline color:#000 --- */
.blockreassurance_product .block-title,
.block-reassurance .block-title,
.block-reassurance-item .block-title { color: var(--lx-white) !important; font-weight: 600; }
.blockreassurance_product span,
.blockreassurance_product p,
.blockreassurance_product .block-title,
.block-reassurance span,
.block-reassurance p,
.block-reassurance li *,
[class*="blockreassurance"] span,
[class*="blockreassurance"] p { color: var(--lx-text) !important; }
.blockreassurance_product img,
.block-reassurance img {
  filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(560%) hue-rotate(2deg) brightness(92%) !important;
}

/* --- Left column: category tree + faceted search (incl. white BRANDS box) --- */
#left-column .card,
#search_filters_wrapper,
#search_filters_brands,
.block-categories,
#left-column .block-category,
.faceted-search {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important;
  box-shadow: none !important;
  border-radius: var(--lx-r-lg);
}
#search_filters_brands,
#search_filters_wrapper { padding: 1rem 1.25rem; }
#search_filters_brands *,
#search_filters *,
#search_filters_wrapper * { border-color: var(--lx-line); }

/* Facet / filter titles + labels */
#search_filters .facet-title,
#search_filters_brands .h6,
#search_filters .h6,
#left-column .facet .h6,
.facets-title { color: var(--lx-white) !important; letter-spacing: 0.06em; }
#search_filters_brands a,
#search_filters_brands label,
#search_filters .facet-label a,
#search_filters label,
.facet .facet-label { color: var(--lx-muted) !important; }
#search_filters_brands a:hover,
#search_filters .facet-label a:hover { color: var(--lx-gold) !important; }

/* Category tree links (were near-invisible dark-on-dark) */
.block-categories a,
.block-categories .category-sub-menu a,
.category-sub-menu a,
.category-sub-menu li a,
#left-column .block-category a { color: var(--lx-muted) !important; }
.block-categories a:hover,
.category-sub-menu a:hover { color: var(--lx-gold) !important; }
.block-categories .category-title,
.block-categories > .h6,
#left-column .block-category .h6 { color: var(--lx-white) !important; }

/* ==========================================================================
   CATALOG LEFT COLUMN (TOPCINTO) — premium category / brand navigation
   ========================================================================== */
/* Cards: subtle gradient + gold hairline on top */
#left-column .block-categories,
#left-column #search_filters_brands {
  background: linear-gradient(180deg, var(--lx-surface) 0%, var(--lx-graphite) 100%) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg) !important;
  padding: 1.35rem 1.25rem !important;
  position: relative; overflow: hidden;
}
#left-column .block-categories::before,
#left-column #search_filters_brands::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--lx-gold-grad);
}

/* Section heading ("HOME" / "BRANDS") */
#left-column .category-top-menu > li:first-child > a.h6,
#left-column #search_filters_brands .facet-label {
  display: block !important;
  color: var(--lx-white) !important;
  font-family: var(--lx-font-display);
  font-size: 1.05rem !important; font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  margin: 0 0 0.95rem !important; padding-bottom: 0.85rem !important;
  border-bottom: 1px solid var(--lx-line);
}

/* Category list — premium interactive rows */
#left-column .category-sub-menu { list-style: none; margin: 0; padding: 0; }
#left-column .category-sub-menu > li { margin: 0 0 0.28rem; }
#left-column .category-sub-menu > li > a {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 0.62rem 0.9rem 0.62rem 1rem;
  border-radius: var(--lx-r-md);
  color: var(--lx-silver-cool) !important;
  font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em; text-transform: none;
  transition: background var(--lx-t-fast) var(--lx-ease),
              color var(--lx-t-fast) var(--lx-ease),
              padding var(--lx-t-fast) var(--lx-ease);
}
/* growing gold accent bar on the left */
#left-column .category-sub-menu > li > a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 3px; background: var(--lx-gold-grad);
  transition: height var(--lx-t-base) var(--lx-ease);
}
/* sliding chevron on the right */
#left-column .category-sub-menu > li > a::after {
  content: "\203A"; color: var(--lx-gold); font-size: 1.2rem; line-height: 1; font-weight: 400;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--lx-t-fast) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
}
#left-column .category-sub-menu > li > a:hover {
  background: var(--lx-elevated); color: var(--lx-white) !important; padding-left: 1.15rem;
}
#left-column .category-sub-menu > li > a:hover::before { height: 58%; }
#left-column .category-sub-menu > li > a:hover::after { opacity: 1; transform: translateX(0); }
/* active / current category */
#left-column .category-sub-menu > li.current > a,
#left-column .category-sub-menu > li > a.current,
#left-column .category-sub-menu > li[aria-current] > a {
  background: var(--lx-gold-dim); color: var(--lx-gold) !important;
}
#left-column .category-sub-menu > li.current > a::before,
#left-column .category-sub-menu > li > a.current::before { height: 58%; }

/* Brands block body */
#left-column #search_filters_brands section.facet > div p,
#left-column #search_filters_brands p { color: var(--lx-muted); margin: 0; padding: 0.3rem 0.2rem; }
#left-column #search_filters_brands .facet-label:hover { color: var(--lx-gold) !important; }

/* Kill the leftover empty faceted-search card (no active filters here) */
#left-column #search_filters_wrapper:not(:has(.facet)) { display: none !important; }

/* --- Product description / details: force legible over inline colours --- */
#product .product-description,
#product .product-description p,
#product .product-description li,
#product .product-description span,
.tab-content .product-description,
.tab-content .product-description p,
.tab-content .product-description span,
#description .rte-content,
#description .rte-content p,
#description .rte-content span,
#description .rte-content li { color: var(--lx-text) !important; }
#product .product-description strong,
#product .product-description b,
.tab-content .product-description strong,
#description .rte-content strong { color: var(--lx-white) !important; }

/* Tabs: kill any white strip */
#product .tabs,
#product .nav-tabs,
#product .tab-content,
.product-tabs,
.product-tabs .tab-content { background: transparent !important; }

/* --- Pagination: cyan -> gold --- */
.pagination .page-link,
.page-link {
  color: var(--lx-muted) !important;
  background: var(--lx-surface-2) !important;
  border-color: var(--lx-line) !important;
}
.pagination .page-item.active .page-link,
.page-item.current .page-link {
  background: var(--lx-gold-grad) !important;
  color: #1a1407 !important;
  border-color: transparent !important;
}
.pagination .page-link:hover,
.page-link:hover { color: var(--lx-gold) !important; background: var(--lx-elevated) !important; }

/* --- Search: give the magnifier a touch more room (placeholder overlap) --- */
#search_widget form input,
#search_widget input[type="text"] { padding-left: 50px !important; }
#search_widget form i.search { left: 17px; }

/* --- Sort-by / top toolbar: compact, coordinated with the theme --- */
.products-selection { align-items: center; margin-bottom: 1.25rem; }
.products-selection .total-products { margin: 0; }
.products-selection .total-products p { margin: 0; color: var(--lx-muted); }
/* the real container is .sort-by-row (label + dropdown live here) */
.sort-by-row {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
  gap: 0.7rem; margin: 0;
}
.sort-by-row .sort-by {
  flex: 0 0 auto; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0;
  color: var(--lx-muted); font-weight: 600; white-space: nowrap; line-height: 1;
}
.sort-by-row .products-sort-order {
  flex: 0 1 240px; width: auto !important; max-width: 240px !important; padding: 0 !important; margin: 0;
}
@media (max-width: 767px) {
  .sort-by-row { justify-content: flex-start; }
  .sort-by-row .products-sort-order { flex: 1 1 auto; max-width: 100% !important; }
}
.products-sort-order .select-title {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%;
  background: var(--lx-surface-2) !important; border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important; border-radius: var(--lx-r-pill); padding: 0.6rem 1.15rem;
  font-weight: 500; transition: border-color var(--lx-t-base) var(--lx-ease), background var(--lx-t-base) var(--lx-ease);
}
.products-sort-order .select-title:hover,
.products-sort-order.show .select-title { border-color: var(--lx-gold) !important; background: var(--lx-elevated) !important; }
.products-sort-order .select-title .material-icons { color: var(--lx-gold); font-size: 20px; }
.products-sort-order .dropdown-menu {
  background: var(--lx-elevated) !important; border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important; border-radius: var(--lx-r-md); padding: 0.35rem;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45); min-width: 100%;
}
.products-sort-order .dropdown-menu a,
.products-sort-order .select-list {
  display: block; background: transparent !important; border: none !important;
  color: var(--lx-text) !important; border-radius: var(--lx-r-sm); padding: 0.55rem 0.8rem; font-size: 0.9rem;
}
.products-sort-order .select-list:hover,
.products-sort-order .dropdown-item:hover { background: var(--lx-gold-dim) !important; color: var(--lx-gold) !important; }
.products-sort-order .select-list.current { color: var(--lx-gold) !important; font-weight: 600; }

/* --- Empty category / no-products state (uses the 404 template → force dark) --- */
#js-product-list .page-not-found,
#js-product-list #content.page-not-found,
#js-product-list .page-content.page-not-found {
  background: var(--lx-surface) !important; border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg); color: var(--lx-text) !important; box-shadow: none !important;
  padding: 2.5rem 2rem;
}
#js-product-list .page-not-found h4 { color: var(--lx-white) !important; }
#js-product-list .page-not-found p { color: var(--lx-muted) !important; }

/* ==========================================================================
   12e. QUICK VIEW MODAL + IMAGE HARMONISATION
   ========================================================================== */

/* --- Quick view / modals: force dark (Bootstrap ships white) --- */
.quickview .modal-content,
.modal-content {
  background: var(--lx-surface) !important;
  color: var(--lx-text) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg) !important;
  box-shadow: var(--lx-shadow-lg);
}
.quickview .modal-body,
.modal-body { background: transparent !important; color: var(--lx-text); }
.quickview .modal-header,
.modal-header { border-bottom: 1px solid var(--lx-line) !important; }
.quickview .modal-footer,
.modal-footer { border-top: 1px solid var(--lx-line) !important; }
.modal .close,
.quickview .close {
  color: var(--lx-white) !important;
  opacity: 0.7;
  text-shadow: none;
  transition: opacity var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
}
.modal .close:hover,
.quickview .close:hover { opacity: 1; color: var(--lx-gold) !important; }
.quickview .h1,
.quickview .product-title,
.modal .h1 { color: var(--lx-white) !important; }
.quickview #product-description-short,
.quickview .product-additional-info,
.quickview .product-actions { color: var(--lx-text); }
.quickview .product-prices .current-price,
.quickview .current-price span { color: var(--lx-gold) !important; }
/* Modal image panel + arrows */
.quickview .images-container,
.quickview .product-cover,
.quickview .product-images {
  background: var(--lx-graphite);
  border-radius: var(--lx-r-md);
}
.quickview .arrows .material-icons,
.quickview .js-arrow-up,
.quickview .js-arrow-down { color: var(--lx-muted); }
.quickview .arrows .material-icons:hover { color: var(--lx-gold); }

/* --- Fullscreen product image zoom modal (#product-modal) → clean wide lightbox ---
   NOTE: PrestaShop core applies margin-left:-35%, flex-direction:column and fixed
   image widths with high specificity, so the layout props below MUST use !important. */
#product-modal { text-align: left !important; }
#product-modal .modal-dialog {
  max-width: 1080px !important; width: 94vw !important; margin: 2.5vh auto !important;
  display: flex !important; align-items: center !important; min-height: 0 !important;
}
#product-modal .modal-content {
  background: var(--lx-surface) !important; border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg) !important; box-shadow: var(--lx-shadow-lg) !important;
  padding: 1.5rem !important; width: 100% !important;
}
#product-modal .modal-content .modal-body {
  display: flex !important; flex-direction: row !important; margin-left: 0 !important;
  gap: 1.5rem !important; align-items: flex-start !important; padding: 0 !important;
  background: transparent !important;
}
/* main cover — deliberate light frame (product shots are on white) */
#product-modal .modal-content .modal-body figure {
  flex: 1 1 58% !important; max-width: 58% !important; min-width: 0; margin: 0 !important;
  display: flex !important; flex-direction: column;
}
#product-modal figure > picture { display: flex; background: #fff; border-radius: var(--lx-r-md); overflow: hidden; }
#product-modal .modal-content .modal-body .product-cover-modal {
  width: 100% !important; height: auto !important; max-height: 76vh !important;
  object-fit: contain !important; display: block; background: #fff; border-radius: var(--lx-r-md);
}
#product-modal .modal-content .modal-body .image-caption {
  background: transparent !important; border: none !important; padding: 0.85rem 0 0 !important; width: 100%;
}
#product-modal #product-description-short { color: var(--lx-muted); font-size: 0.9rem; }
/* thumbnails → tidy square grid, no white letterbox, no core offsets */
#product-modal .modal-content .modal-body .thumbnails { flex: 0 0 300px !important; max-width: 40% !important; margin: 0 !important; }
#product-modal .modal-content .modal-body .mask,
#product-modal .js-modal-mask {
  max-height: 76vh !important; margin-top: 0 !important; overflow: visible !important; background: transparent !important;
}
#product-modal .modal-content .modal-body .product-images {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.55rem !important;
  align-content: start; list-style: none; margin: 0 !important; padding: 0 !important;
  max-height: 76vh; overflow-y: auto;
}
#product-modal .thumb-container { width: auto !important; float: none !important; margin: 0 !important; background: transparent !important; }
#product-modal .modal-content .modal-body .product-images img,
#product-modal .js-modal-thumb {
  width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover !important; display: block;
  border-radius: var(--lx-r-sm); border: 2px solid var(--lx-line); cursor: pointer; background: #fff;
  transition: border-color var(--lx-t-base) var(--lx-ease), transform var(--lx-t-base) var(--lx-ease);
}
#product-modal .modal-content .modal-body .product-images img:hover,
#product-modal .js-modal-thumb:hover { border: 2px solid var(--lx-gold) !important; transform: translateY(-2px); }
#product-modal .js-modal-thumb.selected { border-color: var(--lx-gold); }
#product-modal .modal-content .modal-body .arrows { display: none !important; }
@media (max-width: 767px) {
  #product-modal .modal-dialog { width: 96vw !important; }
  #product-modal .modal-content { padding: 1rem !important; }
  #product-modal .modal-content .modal-body { flex-direction: column !important; }
  #product-modal .modal-content .modal-body figure { flex: 1 1 auto !important; max-width: 100% !important; }
  #product-modal .modal-content .modal-body .thumbnails { flex: 1 1 auto !important; width: 100%; max-width: 100% !important; }
  #product-modal .modal-content .modal-body .product-cover-modal { max-height: 58vh !important; }
  #product-modal .modal-content .modal-body .product-images { grid-template-columns: repeat(5, 1fr) !important; max-height: none; }
}

/* --- Quantity input (modal + product page): was white --- */
#quantity_wanted,
.product-quantity #quantity_wanted,
.product-quantity .input-group input,
.quickview input.js-cart-line-product-quantity,
.quickview .product-quantity input,
.bootstrap-touchspin input {
  background: var(--lx-surface-2) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
}
.bootstrap-touchspin .btn-touchspin,
.product-quantity .btn-touchspin {
  background: var(--lx-elevated) !important;
  border-color: var(--lx-line-strong) !important;
  color: var(--lx-white) !important;
}
.bootstrap-touchspin .btn-touchspin:hover { color: var(--lx-gold) !important; }

/* --- Image harmonisation: calm the vivid photos on dark, revive on hover --- */
.product-miniature img,
.product-cover img,
.quickview img,
.product-images img,
.thumb img,
.product-thumbnail img {
  filter: brightness(0.93) contrast(0.97) saturate(0.92);
  transition: filter var(--lx-t-slow) var(--lx-ease),
              transform var(--lx-t-slow) var(--lx-ease-out);
}
.product-miniature:hover img,
.product-cover:hover img,
.product-miniature:hover .product-thumbnail img {
  filter: brightness(1) contrast(1) saturate(1);
}
/* Subtle inner frame so white-background photos read as intentional shots */
.product-miniature .thumbnail-top,
.product-cover,
.product-miniature .product-thumbnail {
  position: relative;
}
.product-miniature .product-thumbnail::after,
.product-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  border-radius: inherit;
}

/* ==========================================================================
   12f. FLAG ALIGNMENT · FOCUS RINGS · ACTIVE-TAB COLOUR
   ========================================================================== */

/* --- "NEW"/flags: centre text, inset from the rounded corner --- */
.product-flags {
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  align-items: flex-start;
  gap: 6px;
}
.product-flags li.product-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  line-height: 1 !important;
  border-radius: var(--lx-r-pill) !important;
  text-align: center;
}

/* --- Focus rings: none on mouse click, gold ring on keyboard only --- */
a:focus,
button:focus,
.btn:focus,
.nav-link:focus,
.nav-tabs .nav-link:focus,
.dropdown-item:focus,
.thumb:focus,
.thumb-container:focus,
.quick-view:focus,
[tabindex]:focus,
.page-link:focus,
.slick-slide:focus {
  outline: none !important;
  box-shadow: none !important;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lx-gold) !important;
  outline-offset: 2px;
}
/* Inputs keep their gold focus ring (good UX) */
.form-control:focus,
input:focus,
textarea:focus,
select:focus { box-shadow: 0 0 0 3px var(--lx-gold-dim) !important; }
/* Gold buttons keep their ambient glow on focus (no cyan ring) */
.btn-primary:focus,
.lx-btn--gold:focus,
.add-to-cart:focus { box-shadow: 0 8px 24px rgba(200, 166, 70, 0.28) !important; }

/* --- Tabs: active indicator gold, never cyan --- */
.nav-tabs { border-bottom: 1px solid var(--lx-line) !important; }
.nav-tabs .nav-link,
#product .nav-tabs .nav-link,
.product-tabs .nav-link {
  border: none !important;
  color: var(--lx-muted) !important;
  background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--lx-white) !important; }
.nav-tabs .nav-link.active,
#product .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.active {
  color: var(--lx-white) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--lx-gold) !important;
}
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link::after { background: var(--lx-gold) !important; }

/* ==========================================================================
   12g. BREADCRUMB REFINEMENT + PRODUCT INFO LABELS
   ========================================================================== */

/* --- Breadcrumb: refined, no cyan --- */
.breadcrumb {
  padding: 0.35rem 0 !important;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  background: transparent !important;
}
.breadcrumb li a { color: var(--lx-muted) !important; }
.breadcrumb li a:hover { color: var(--lx-gold) !important; }
.breadcrumb li::after { color: var(--lx-faint) !important; }
.breadcrumb li:last-child,
.breadcrumb li:last-child span {
  color: var(--lx-silver-cool) !important;
  font-weight: 500;
}

/* --- Product info labels (Reference, In stock, Quantity…) were near-black --- */
#product .label,
.product-information .label,
.product-reference .label,
.product-quantities .label,
.product-actions .control-label,
.product-variants label,
.tax-shipping-delivery-label,
.product-quantities label {
  color: var(--lx-muted) !important;
  font-weight: 500;
}
.product-reference span,
.product-quantities span,
.product-quantities .product-available,
#product-details .label + *,
#stock_availability span,
.product-availability span { color: var(--lx-white) !important; }
.product-availability .product-available,
.product-last-items { color: var(--lx-gold) !important; }

/* ==========================================================================
   12h. QUICK-VIEW · ADD-TO-CART · WISHLIST MODAL/HEART · IMAGE FRAME
   ========================================================================== */

/* --- Quick view: text + icon were cyan --- */
.product-miniature .quick-view,
.quick-view.js-quick-view,
.highlighted-informations .quick-view,
a.quick-view {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.45rem !important;
  color: var(--lx-white) !important;
}
.product-miniature .quick-view .material-icons,
.quick-view .material-icons,
.quick-view i { color: var(--lx-white) !important; }
.product-miniature .quick-view:hover,
.quick-view:hover,
.quick-view:hover .material-icons { color: #1a1407 !important; }

/* --- Add to cart: centre the cart icon with the label --- */
.btn.add-to-cart,
.product-add-to-cart .add-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem;
}
.btn.add-to-cart .material-icons,
.add-to-cart .material-icons {
  margin: 0 !important;
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
}

/* --- Wishlist / auth modals: legible title + body, correct button text --- */
.modal-title,
.modal-header .modal-title,
.modal .modal-title,
.wishlist-modal .modal-title,
#wishlist-list-modal .modal-title { color: var(--lx-white) !important; font-weight: 700; }
.modal-body,
.modal-body p,
.modal-body span,
.wishlist-modal .modal-body { color: var(--lx-text) !important; }
.modal .btn-primary,
.modal-footer .btn-primary,
.wishlist-modal .btn-primary { color: #1a1407 !important; background: var(--lx-gold-grad) !important; border: none !important; }
.modal .btn-secondary,
.modal-footer .btn-secondary,
.modal .btn-tertiary {
  background: transparent !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
}
.modal .btn-secondary:hover { border-color: var(--lx-gold) !important; color: var(--lx-gold) !important; }

/* --- Wishlist heart: keep the button as-is, turn the heart RED on hover --- */
.wishlist-button-add:hover,
.wishlist-button-product:hover,
[class*="wishlist-button"]:hover {
  border-color: var(--lx-line-strong) !important;
  background: rgba(14, 14, 14, 0.78) !important;
  color: #e0245e !important;
}
.wishlist-button-add:hover .material-icons,
.wishlist-button-add:hover i,
.wishlist-button-add:hover svg,
.wishlist-button-product:hover .material-icons,
[class*="wishlist-button"]:hover .material-icons,
[class*="wishlist-button"]:hover svg {
  color: #e0245e !important;
  fill: #e0245e !important;
}
/* Already-favourited state stays red */
.wishlist-button-add.checked,
.wishlist-button-add.active,
.wishlist-button-add[aria-pressed="true"] { color: #e0245e !important; }
.wishlist-button-add.checked .material-icons,
.wishlist-button-add.checked svg,
.wishlist-button-add.active svg { color: #e0245e !important; fill: #e0245e !important; }

/* --- Product image frame: kill the cyan border on focus/active/hover --- */
.product-miniature a.product-thumbnail,
.product-miniature a.thumbnail,
.product-miniature .thumbnail-container,
.product-miniature a.product-thumbnail:focus,
.product-miniature a.product-thumbnail:active,
.product-miniature a.product-thumbnail:focus-within,
.product-miniature .thumbnail-container:focus-within,
.product-thumbnail:focus,
.product-thumbnail:active {
  outline: none !important;
  border-color: var(--lx-line) !important;
  box-shadow: none !important;
}
.product-miniature:hover .thumbnail-container {
  border-color: var(--lx-line-strong) !important;
  box-shadow: var(--lx-shadow-md) !important;
}

/* ==========================================================================
   12i. FOOTER legibility (Classic paints titles #232323 / near-black)
   ========================================================================== */
#footer .block-contact-title,
#footer .h4,
#footer .h3,
#footer .h2,
#footer .myaccount-title,
.footer-container .h3,
.footer-container .h4,
.footer-container .title,
#footer .links .title {
  color: var(--lx-white) !important;
  letter-spacing: 0.12em;
}
#footer .block-contact,
#footer .block-contact li,
#footer .block-contact span,
#footer .block-contact,
#footer .links li a,
#footer .linklist a,
#footer li a,
#footer p,
#footer address { color: var(--lx-muted) !important; }
#footer a:hover,
#footer .links li a:hover { color: var(--lx-gold) !important; }
/* Emphasised values (email, phone) a touch brighter */
#footer .block-contact a[href^="mailto"],
#footer .block-contact a[href^="tel"] { color: var(--lx-silver-cool) !important; }

/* ==========================================================================
   12k. LANGUAGE / CURRENCY SELECTOR (header top bar)
   ========================================================================== */
#header .language-selector-wrapper,
#header .currency-selector { display: inline-flex; align-items: center; }
#header .language-selector button.btn-unstyle,
#header .currency-selector button.btn-unstyle,
#header .language-selector .expand-more,
#header .currency-selector .expand-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--lx-muted) !important;
  text-transform: none;
  letter-spacing: 0.06em;
  line-height: 1;
}
#header .language-selector button:hover,
#header .language-selector button:hover .expand-more,
#header .currency-selector button:hover { color: var(--lx-gold) !important; }
#header .language-selector .material-icons,
#header .currency-selector .material-icons { font-size: 18px; }
#header .language-selector .dropdown-menu,
#header .currency-selector .dropdown-menu {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  box-shadow: var(--lx-shadow-md);
  border-radius: var(--lx-r-md);
  min-width: 150px;
  padding: 6px;
  margin-top: 8px;
}

/* Remove redundant "Contact us" from the header top bar (it lives in the footer) */
#header .header-nav #_desktop_contact_link,
#header .header-nav #contact-link { display: none !important; }
#header .language-selector .dropdown-item,
#header .currency-selector .dropdown-item {
  color: var(--lx-muted) !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 14px;
}
#header .language-selector .dropdown-item:hover,
#header .currency-selector .dropdown-item:hover {
  background: var(--lx-gold-dim) !important;
  color: var(--lx-gold) !important;
}
#header .language-selector li.current .dropdown-item,
#header .currency-selector li.current .dropdown-item { color: var(--lx-gold) !important; }
/* Mobile select fallback */
#header .language-selector select.link,
#header .currency-selector select.link {
  background: var(--lx-surface-2) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-radius: var(--lx-r-md);
}

/* Flag toggle + hover tooltip */
#header .lx-lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 4px;
}
.lx-lang-flag {
  width: 21px; height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  display: block; /* block avoids the inline-baseline gap that misaligns it */
}

/* Align the whole language/currency selector with the rest of the top bar */
#header .header-nav .right-nav { align-items: center !important; }
#header .lx-lang-selector,
#header #_desktop_currency_selector,
#header .language-selector-wrapper,
#header .language-selector.dropdown {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  height: auto;
}
#header .lx-lang-toggle { padding: 0 !important; margin: 0 !important; line-height: 1 !important; }
#header .lx-lang-caret { font-size: 18px; color: var(--lx-muted); transition: color var(--lx-t-fast) var(--lx-ease); }
#header .lx-lang-toggle:hover .lx-lang-caret { color: var(--lx-gold); }
#header .lx-lang-toggle .lx-lang-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  color: var(--lx-text);
  padding: 4px 10px;
  border-radius: var(--lx-r-sm);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lx-t-fast) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
  z-index: 1200;
  box-shadow: var(--lx-shadow-sm);
}
#header .lx-lang-toggle:hover .lx-lang-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
#header .language-selector .lx-lang-item { display: inline-flex; align-items: center; gap: 9px; }

/* ==========================================================================
   12l. AUTH PAGES (login / registration) — premium, compact, single card
   ========================================================================== */
/* Kill the outer #content card so there is no double box */
.page-authentication #content,
.page-registration #content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
}

/* Contained page title */
.page-authentication .page-header,
.page-registration .page-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1.5rem 0 0.25rem !important;
  text-align: center;
  max-width: none;
}
.page-authentication .page-header h1,
.page-registration .page-header h1,
.page-authentication h1.page-heading,
.page-registration h1.page-heading {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  margin: 0 auto;
}
.page-authentication .page-header::after,
.page-registration .page-header::after {
  content: "";
  display: block;
  width: 56px; height: 2px;
  margin: 0.85rem auto 0;
  background: var(--lx-gold-grad);
}

/* THE card — inner section only */
.login-form,
.register-form {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-top: 3px solid var(--lx-gold);
  border-radius: var(--lx-r-lg);
  box-shadow: var(--lx-shadow-md);
  padding: 2rem 2.25rem;
  margin: 1rem auto 3rem;
}
.login-form { max-width: 440px; }
.register-form { max-width: 760px; }

/* --- Password field: seamless input + SHOW/HIDE toggle button --- */
.page-authentication #content .input-group,
.page-registration #content .input-group {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  flex-wrap: nowrap;
}
.page-authentication #content .input-group > .form-control,
.page-registration #content .input-group > .form-control {
  flex: 1 1 auto;
  width: 1%;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
.page-authentication #content .input-group .input-group-btn,
.page-registration #content .input-group .input-group-btn {
  display: flex;
  flex: 0 0 auto;
}
.page-authentication #content .input-group-btn .btn,
.page-registration #content .input-group-btn .btn,
.page-authentication #content .input-group [data-action="show-password"],
.page-registration #content .input-group [data-action="show-password"] {
  display: inline-flex;
  align-items: center;
  height: auto !important;
  margin: 0 !important;
  padding: 0 1.15rem !important;
  background: var(--lx-elevated) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-left: none !important;
  border-radius: 0 var(--lx-r-md) var(--lx-r-md) 0 !important;
  color: var(--lx-muted) !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none !important;
  cursor: pointer;
  transition: color var(--lx-t-fast) var(--lx-ease), background var(--lx-t-fast) var(--lx-ease);
}
.page-authentication #content .input-group-btn .btn:hover,
.page-registration #content .input-group-btn .btn:hover {
  color: var(--lx-gold) !important;
  background: var(--lx-surface-2) !important;
}

/* Compact stacked fields (label on top, input full width, tiny help text) */
.login-form .form-group.row,
.register-form .form-group.row {
  display: block;
  margin: 0 0 0.85rem;
}
.login-form .form-control-label,
.register-form .form-control-label,
.login-form .form-group.row > label,
.register-form .form-group.row > label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  text-align: left !important;
  padding: 0 0 0.3rem !important;
  margin: 0 !important;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-muted) !important;
}
.login-form .form-group.row > div,
.register-form .form-group.row > div,
.login-form .col-md-6.js-input-column,
.register-form .col-md-6.js-input-column,
.login-form .col-md-3.form-control-comment,
.register-form .col-md-3.form-control-comment {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
.login-form .form-control,
.register-form .form-control { padding: 0.65rem 0.9rem; }
.login-form .form-control-comment,
.register-form .form-control-comment {
  font-size: 0.68rem;
  margin-top: 0.22rem;
  color: var(--lx-faint) !important;
  line-height: 1.35;
}

/* Register: 2-column flex layout on the form to halve the height */
@media (min-width: 720px) {
  #customer-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6rem;
    align-items: flex-start;
  }
  #customer-form > .form-group.row {
    flex: 0 0 calc(50% - 0.8rem);
    max-width: calc(50% - 0.8rem);
  }
  /* Rows that must span the full width */
  #customer-form > .form-group.row:has(.radio-inline),
  #customer-form > .form-group.row:has(input[type="email"]),
  #customer-form > .form-group.row:has(input[type="checkbox"]),
  #customer-form > .form-group.row:has(textarea),
  #customer-form > .field-password-policy,
  #customer-form > .form-footer,
  #customer-form > footer {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Full-width primary action */
.login-form .form-footer,
.register-form .form-footer,
#customer-form .form-footer,
#customer-form footer.form-footer { text-align: center; margin-top: 1.2rem; }
.login-form [type="submit"],
.register-form [type="submit"],
#submit-login,
[data-link-action="save-customer"] {
  width: 100%;
  padding: 0.85rem 1.4rem;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}

/* Footer links */
.forgot-password { text-align: center; margin-top: 0.75rem; }
.forgot-password a { color: var(--lx-silver-cool); }
.forgot-password a:hover { color: var(--lx-gold) !important; }

/* "No account? Create one here" / "Log in instead" → ghost pill button */
.no-account,
.register-form .form-footer + .text-sm-center,
.register-form .login-form { text-align: center; margin-top: 1.25rem; }
.no-account a,
.register-form > p a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.75rem;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r-pill);
  color: var(--lx-white) !important;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: border-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              background var(--lx-t-base) var(--lx-ease),
              transform var(--lx-t-fast) var(--lx-ease);
}
.no-account a:hover,
.register-form > p a:hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold) !important;
  background: var(--lx-gold-dim);
  transform: translateY(-1px);
}
/* Give the register "log in instead" line spacing + centre it */
.register-form > p:first-of-type {
  text-align: center;
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--lx-line);
  color: var(--lx-muted);
}

/* ==========================================================================
   12m. CONTACT PAGE — adapt the white form to the dark theme
   ========================================================================== */
.page-contact #content,
.page-contact .contact-form {
  background: var(--lx-surface) !important;
  border-color: var(--lx-line) !important;
  color: var(--lx-text) !important;
  box-shadow: none !important;
}
.page-contact .contact-form { border: none !important; border-radius: var(--lx-r-lg); }
.page-contact .contact-form h1,
.page-contact .contact-form h3,
.page-contact .contact-form .h3,
.page-contact .contact-form .page-subheading,
.page-contact #content .h1 { color: var(--lx-white) !important; }
.page-contact .contact-rich,
.page-contact .contact-form,
.page-contact .contact-form p,
.page-contact .form-control-label,
.page-contact .contact-form label { color: var(--lx-muted) !important; }
.page-contact .form-control,
.page-contact .contact-form textarea,
.page-contact .contact-form select,
.page-contact .contact-form input[type="text"],
.page-contact .contact-form input[type="email"] {
  background: var(--lx-surface-2) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
}
.page-contact .form-control::placeholder,
.page-contact .contact-form textarea::placeholder { color: var(--lx-faint) !important; }

/* File input ("Seleccionar archivo") */
.page-contact .filestyle .form-control,
.page-contact .bootstrap-filestyle input[type="text"],
.page-contact .custom-file-label,
.page-contact .input-group .form-control[readonly] {
  background: var(--lx-surface-2) !important;
  color: var(--lx-muted) !important;
  border-color: var(--lx-line-strong) !important;
}
/* File upload (bootstrap-filestyle): one seamless control — filename field + button */
.page-contact .bootstrap-filestyle {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
}
.page-contact .bootstrap-filestyle .form-control,
.page-contact .bootstrap-filestyle input[type="text"] {
  flex: 1 1 auto; width: 1%;
  background: var(--lx-surface-2) !important;
  color: var(--lx-muted) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-right: none !important;
  border-radius: var(--lx-r-md) 0 0 var(--lx-r-md) !important;
  height: auto;
}
.page-contact .bootstrap-filestyle .group-span-filestyle,
.page-contact .filestyle .input-group-btn { display: flex; flex: 0 0 auto; }
.page-contact .bootstrap-filestyle .btn,
.page-contact .filestyle .btn,
.page-contact .custom-file .btn {
  display: inline-flex; align-items: center;
  margin: 0 !important;
  background: var(--lx-elevated) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-radius: 0 var(--lx-r-md) var(--lx-r-md) 0 !important;
  padding: 0.6rem 1.15rem !important;
  white-space: nowrap;
  transition: color var(--lx-t-fast) var(--lx-ease), background var(--lx-t-fast) var(--lx-ease);
}
.page-contact .bootstrap-filestyle .btn:hover,
.page-contact .filestyle .btn:hover {
  color: var(--lx-gold) !important; background: var(--lx-surface-2) !important;
}

/* Left "STORE INFORMATION" sidebar (was dim) */
.page-contact #left-column .block-contact,
.page-contact .block-contact {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg);
  padding: 1.25rem;
}
.page-contact .block-contact-title,
.page-contact .block-contact .h4,
.page-contact .block-contact .h3 { color: var(--lx-white) !important; }
.page-contact .block-contact,
.page-contact .block-contact span,
.page-contact .block-contact a,
.page-contact .block-contact li,
.page-contact .block-contact div { color: var(--lx-muted) !important; }
.page-contact .block-contact a:hover { color: var(--lx-gold) !important; }
.page-contact .block-contact .material-icons { color: var(--lx-gold) !important; }

/* ==========================================================================
   12n. BREADCRUMB HIDE (auth only) + CART PAGE POLISH
   ========================================================================== */
/* Hide breadcrumb ONLY on login / registration (looks unprofessional there) */
.page-authentication .breadcrumb,
.page-registration .breadcrumb,
.page-authentication nav[data-depth],
.page-registration nav[data-depth] { display: none !important; }

/* --- Cart: Checkout button gold when active, muted when disabled --- */
.checkout a.btn-primary,
.cart-detailed-actions .btn-primary,
.checkout .btn-primary,
#cart .btn-primary {
  background: var(--lx-gold-grad) !important;
  color: #1a1407 !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(200, 166, 70, 0.22) !important;
}
.checkout a.btn-primary:hover,
.cart-detailed-actions .btn-primary:hover { color: #1a1407 !important; }
/* Disabled (empty cart) → calm dark, not white */
.checkout a.btn-primary.disabled,
.cart-detailed-actions .btn-primary.disabled,
.btn-primary.disabled,
.btn-primary:disabled {
  background: var(--lx-elevated) !important;
  color: var(--lx-faint) !important;
  border: 1px solid var(--lx-line) !important;
  box-shadow: none !important;
  opacity: 0.7;
  cursor: not-allowed;
}

/* "Continue shopping" link (a.label) — more visible */
a.label {
  color: var(--lx-silver-cool) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
a.label:hover { color: var(--lx-gold) !important; }
a.label .material-icons { color: currentColor; font-size: 20px; }

/* Cart cards + totals polish */
.cart-grid-body .card,
.cart-grid-right .card,
.cart-summary,
.cart-container .card {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg);
  box-shadow: none;
}
.cart-summary-line .label,
.cart-summary-line .value { color: var(--lx-text); }
.cart-summary-line .value,
.cart-total .value,
.cart-summary .cart-total .value { color: var(--lx-white) !important; font-weight: 600; }
.cart-summary-line.cart-total { border-top: 1px solid var(--lx-line); padding-top: 0.75rem; }
#cart .page-title,
#cart h1,
.cart-grid-body h1 { color: var(--lx-white) !important; }

/* ==========================================================================
   12o. ADD-TO-CART (button + modal) · CLICK COLOUR · CATEGORY HEADER · BREADCRUMB
   ========================================================================== */

/* --- Product page "Add to cart" was cyan → gold --- */
.btn.add-to-cart,
button.add-to-cart,
.product-add-to-cart .add-to-cart,
#add-to-cart-or-refresh .add-to-cart {
  background: var(--lx-gold-grad) !important;
  color: #1a1407 !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(200, 166, 70, 0.22) !important;
}
.btn.add-to-cart:hover,
.product-add-to-cart .add-to-cart:hover { color: #1a1407 !important; transform: translateY(-1px); }
.btn.add-to-cart .material-icons,
.add-to-cart .material-icons { color: #1a1407 !important; }
.btn.add-to-cart[disabled],
.add-to-cart.disabled { opacity: 0.6; }

/* --- Wrong colour on click: kill mobile tap highlight + stray cyan active --- */
* { -webkit-tap-highlight-color: transparent; }
a:active,
button:active,
.btn:active,
.dropdown-item:active,
.nav-link:active { background-color: transparent; color: inherit; }
.btn-primary:active,
.add-to-cart:active { background: var(--lx-gold-grad) !important; color: #1a1407 !important; }

/* --- Add-to-cart confirmation modal: white header + white total + cyan title --- */
#blockcart-modal .modal-header,
#blockcart-modal .modal-content {
  background: var(--lx-surface) !important;
  border-color: var(--lx-line) !important;
}
#blockcart-modal .modal-header { border-bottom: 1px solid var(--lx-line) !important; }
#blockcart-modal .modal-title { color: var(--lx-white) !important; }
#blockcart-modal .product-name,
#blockcart-modal .product-name a,
#blockcart-modal .cart-content .product-name { color: var(--lx-white) !important; }
#blockcart-modal .product-price,
#blockcart-modal .cart-content p { color: var(--lx-text) !important; }
/* the highlighted "Total (tax incl.)" row rendered white */
#blockcart-modal .cart-content .cart-total,
#blockcart-modal .cart-total,
#blockcart-modal .cart-summary-line,
#blockcart-modal .product-total,
#blockcart-modal .cart-content > p:last-of-type {
  background: var(--lx-surface-2) !important;
  color: var(--lx-white) !important;
}
#blockcart-modal .cart-content .label,
#blockcart-modal .cart-content .value { color: var(--lx-text) !important; }
#blockcart-modal .value,
#blockcart-modal .cart-total .value { color: var(--lx-gold) !important; font-weight: 700; }
#blockcart-modal .cart-content .btn-secondary,
#blockcart-modal .continue { background: transparent !important; color: var(--lx-white) !important; border: 1px solid var(--lx-line-strong) !important; }

/* --- Category header: compact, no giant empty box --- */
#category #js-product-list-header,
#category .block-category,
.block-category.card {
  padding: 1.5rem 1.75rem !important;
  min-height: 0 !important;
  margin-bottom: 1.5rem;
}
.block-category .block-category-inner { min-height: 0 !important; }
.block-category h1 { margin-bottom: 0 !important; }
.block-category .block-category-inner:empty,
#category-description:empty { display: none !important; }
/* when the category has no description, collapse the empty space entirely */
.block-category-inner:not(:has(*)):not(:has(img)) { display: none; }

/* --- Breadcrumb hidden on New products too --- */
.page-new-products .breadcrumb,
.page-new-products nav[data-depth],
.page-best-sales .breadcrumb,
.page-prices-drop .breadcrumb { display: none !important; }

/* --- Cart line items: line total, unit price, delete, continue link --- */
/* Cart line TOTAL (right column) — was dim; force white. Covers every
   markup variant of the total cell: .price / .text-xs-right / .value / .product-price */
#cart .product-line-grid .price,
#cart .product-line-grid .price *,
#cart .product-line-grid .text-xs-right,
#cart .product-line-grid .text-xs-right *,
#cart .product-line-grid .value,
#cart .product-line-grid .product-price,
#cart .cart-item .product-price,
#cart .cart-item .text-xs-right,
.cart-overview .product-line-grid .price,
.cart-overview .product-line-grid .text-xs-right {
  color: var(--lx-white) !important;
  font-weight: 600 !important;
}
/* Keep the UNIT price (in the product body) gold */
.product-line-grid-body .current-price,
.product-line-grid-body .price,
.product-line-grid-body .price .current-price {
  color: var(--lx-gold) !important;
}

/* "Continue shopping" (the a.label WITH a chevron icon) → elegant ghost button.
   Distinguished by the icon so the product-name a.label is untouched. */
a.label:has(> .material-icons) {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r-pill);
  color: var(--lx-silver-cool) !important;
  font-weight: 600;
  font-size: 0.85rem;
  transition: border-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              background var(--lx-t-base) var(--lx-ease),
              transform var(--lx-t-fast) var(--lx-ease);
}
a.label:has(> .material-icons):hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold) !important;
  background: var(--lx-gold-dim);
  transform: translateY(-1px);
}
a.label:has(> .material-icons) .material-icons { color: currentColor; font-size: 18px; }

/* ==========================================================================
   12q. CHECKOUT PAGE (body#checkout) — full dark adaptation
   ========================================================================== */
body#checkout { background: var(--lx-black) !important; color: var(--lx-text) !important; }
body#checkout #wrapper,
body#checkout #content-wrapper,
body#checkout #content,
body#checkout #main,
body#checkout .container { background: transparent !important; }

/* Step cards */
body#checkout .checkout-step,
body#checkout #checkout-personal-information-step,
body#checkout #checkout-addresses-step,
body#checkout #checkout-delivery-step,
body#checkout #checkout-payment-step {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg) !important;
  color: var(--lx-text) !important;
  box-shadow: none !important;
  margin-bottom: 1rem;
}
body#checkout .checkout-step .content,
body#checkout .tab-content,
body#checkout .tab-pane { background: transparent !important; color: var(--lx-text) !important; }
body#checkout .step-title,
body#checkout .step-title.h3,
body#checkout .checkout-step .h1,
body#checkout .checkout-step h1 { color: var(--lx-white) !important; }
body#checkout .step-number { background: var(--lx-gold) !important; color: var(--lx-black) !important; }
body#checkout .checkout-step.-complete .step-number { background: #2f7d4f !important; color: #fff !important; }
body#checkout .step-edit,
body#checkout .step-edit.text-muted { color: var(--lx-gold) !important; }

/* Tabs: Order as a guest / Sign in */
body#checkout .nav-inline .nav-link,
body#checkout .nav-link {
  color: var(--lx-muted) !important;
  border: none !important;
  background: transparent !important;
  font-weight: 600;
}
body#checkout .nav-inline .nav-link.active,
body#checkout .nav-link.active {
  color: var(--lx-white) !important;
  border-bottom: 2px solid var(--lx-gold) !important;
}

/* Forms */
body#checkout .form-control,
body#checkout input,
body#checkout select,
body#checkout textarea {
  background: var(--lx-surface-2) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
}
body#checkout .form-control-label,
body#checkout label,
body#checkout .radio-inline,
body#checkout .checkbox,
body#checkout .custom-checkbox label,
body#checkout .col-md-3.form-control-label { color: var(--lx-muted) !important; }
body#checkout .form-control-comment { color: var(--lx-faint) !important; }
body#checkout .custom-radio,
body#checkout .custom-checkbox input[type="checkbox"] + span {
  background: var(--lx-surface-2) !important;
  border: 1px solid var(--lx-line-strong) !important;
}
body#checkout .custom-radio input:checked + span { background-color: var(--lx-gold) !important; }
body#checkout .input-group-btn .btn,
body#checkout [data-action="show-password"] {
  background: var(--lx-elevated) !important; color: var(--lx-muted) !important; border: 1px solid var(--lx-line-strong) !important;
}

/* Right order summary */
body#checkout .cart-summary,
body#checkout #cart-summary,
body#checkout .cart-summary-top,
body#checkout .cart-summary-subtotals-container,
body#checkout .cart-summary-totals,
body#checkout .cart-summary-products,
body#checkout .checkout-process ~ * .card,
body#checkout .card {
  background: var(--lx-surface) !important;
  border-color: var(--lx-line) !important;
  color: var(--lx-text) !important;
  box-shadow: none !important;
}
body#checkout .cart-summary-line,
body#checkout .cart-summary-line .label { color: var(--lx-text) !important; }
body#checkout .cart-summary-line .value { color: var(--lx-white) !important; font-weight: 600; }
body#checkout .cart-summary-line.cart-total .value,
body#checkout .cart-total .value { color: var(--lx-gold) !important; font-weight: 700; }
body#checkout .cart-summary-line.cart-total { border-top: 1px solid var(--lx-line); }
body#checkout .cart-summary-products,
body#checkout .show-details,
body#checkout .link { color: var(--lx-silver-cool) !important; }

/* Address / delivery / payment option rows */
body#checkout .delivery-option,
body#checkout .payment-option,
body#checkout .address-item,
body#checkout .address-selector .address {
  background: var(--lx-surface-2) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important;
  border-radius: var(--lx-r-md);
}
body#checkout .delivery-option.selected,
body#checkout .address-item.selected { border-color: var(--lx-gold) !important; }

/* Links + reassurance text */
body#checkout a { color: var(--lx-silver-cool); }
body#checkout a:hover { color: var(--lx-gold); }
body#checkout .block-reassurance span,
body#checkout [class*="blockreassurance"] span { color: var(--lx-text) !important; }

/* Minimal checkout header row */
body#checkout #header { background: var(--lx-black) !important; border-bottom: 1px solid var(--lx-line) !important; }

/* Reduced checkout footer (was white) */
body#checkout #footer,
body#checkout .l-footer,
body#checkout #footer .container,
body#checkout #footer .cms,
body#checkout #footer .link-block {
  background: var(--lx-black) !important;
  border-top: 1px solid var(--lx-line) !important;
  color: var(--lx-muted) !important;
  box-shadow: none !important;
}
body#checkout #footer,
body#checkout #footer p,
body#checkout #footer li,
body#checkout #footer span { color: var(--lx-muted) !important; }
body#checkout #footer a { color: var(--lx-silver-cool) !important; }
body#checkout #footer a:hover { color: var(--lx-gold) !important; }

/* Password input-group focus outline: Classic's cyan → gold (checkout/register/login) */
.input-group.js-child-focus,
.input-group.js-parent-focus.js-child-focus,
.js-parent-focus.js-child-focus,
.input-group:focus-within,
body#checkout .input-group.js-child-focus,
body#checkout .input-group:focus-within {
  border: 1px solid var(--lx-gold) !important;
  box-shadow: 0 0 0 3px var(--lx-gold-dim) !important;
  border-radius: var(--lx-r-md) !important;
  outline: none !important;
}
.input-group.js-child-focus .form-control,
.input-group:focus-within .form-control {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Custom checkboxes: visible gold tick when checked (register / checkout / all) */
.custom-checkbox input[type="checkbox"] + span,
body#checkout .custom-checkbox input[type="checkbox"] + span {
  background: var(--lx-surface-2) !important;
  border: 1px solid var(--lx-line-strong) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-checkbox input[type="checkbox"]:checked ~ span,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--lx-gold-grad) !important;
  border-color: var(--lx-gold) !important;
}
/* The check icon: hidden by default, dark & visible when checked */
.custom-checkbox input[type="checkbox"] + span .checkbox-checked,
.custom-checkbox input[type="checkbox"] + span .material-icons { opacity: 0; font-size: 1rem; line-height: 1; }
.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked,
.custom-checkbox input[type="checkbox"]:checked + span .material-icons,
.custom-checkbox input[type="checkbox"]:checked ~ span .checkbox-checked,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span .material-icons {
  color: #1a1407 !important;
  opacity: 1 !important;
  display: inline-block !important;
  font-weight: 700;
}

/* ==========================================================================
   12r. CUSTOMER ACCOUNT ZONE — dashboard cards + sub-pages
   ========================================================================== */
/* Dashboard cards (Information / Addresses / Orders / …) — were white.
   Matches the exact high-specificity Classic selector to guarantee the win. */
.links .link-item,
.links a span.link-item,
.page-my-account #content .links a span.link-item,
a.link-item {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-muted) !important;
  border-radius: var(--lx-r-lg) !important;
  box-shadow: none !important;
  padding: 2rem 1rem !important;
  transition: border-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              background var(--lx-t-base) var(--lx-ease),
              transform var(--lx-t-fast) var(--lx-ease);
}
.links a:hover span.link-item,
a.link-item:hover {
  border-color: var(--lx-gold) !important;
  color: var(--lx-white) !important;
  background: var(--lx-surface-2) !important;
  transform: translateY(-3px);
}
.link-item .material-icons,
.link-item i { color: var(--lx-gold) !important; font-size: 2.2rem !important; }

/* Hide breadcrumb across the whole customer-account zone */
.page-customer-account .breadcrumb,
.page-my-account .breadcrumb,
.page-customer-account nav[data-depth],
.page-my-account nav[data-depth],
body#my-account .breadcrumb { display: none !important; }

/* Sub-pages: content surface + headings */
/* Only these account pages get the englobing grey card. NOT my-account home,
   addresses list, history or wishlist (their cards float on black). */
.page-order-detail #content,
#address #content,
#identity #content,
#module-ps_emailalerts-account #content {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important;
  border-radius: var(--lx-r-lg);
}
/* Account HOME and ADDRESSES list: no englobing grey box — cards float, cleaner.
   body-prefixed (no :has) so it beats every surface rule regardless of browser. */
body.page-my-account #content,
body.page-addresses #content,
body.page-history #content,
body#module-blockwishlist-lists #content,
body#module-blockwishlist-view #content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --- Wishlist (blockwishlist Vue app) — dark-theme adaptation --- */
/* the big grey container box (Vue app root) → transparent; keep the list rows */
#module-blockwishlist-lists .wishlist-container,
#module-blockwishlist-view .wishlist-container,
.wishlist-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Rename / Share popup menu → dark instead of white */
#module-blockwishlist-lists .dropdown-menu,
#module-blockwishlist-view .dropdown-menu,
.wishlist-container .dropdown-menu,
.wishlist-list .dropdown-menu,
[class*="wishlist"] [class*="dropdown-menu"],
.wishlist-list [class*="menu"],
ul.wishlist-list-menu, .wishlist-list-menu {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important;
  border-radius: var(--lx-r-md) !important;
  color: var(--lx-text) !important;
}
.wishlist-container .dropdown-item,
.wishlist-list .dropdown-item,
#module-blockwishlist-lists .dropdown-item,
.wishlist-rename, .wishlist-share, .wishlist-delete {
  color: var(--lx-text) !important;
}
.wishlist-container .dropdown-item:hover,
#module-blockwishlist-lists .dropdown-item:hover,
.wishlist-rename:hover, .wishlist-share:hover {
  background: var(--lx-gold-dim) !important;
  color: var(--lx-gold) !important;
}

/* --- Wishlist rows → each one a distinct card with a clear gap (separation on all sides) ---
   structure: .wishlist-list-container > ul.wishlist-list > li.wishlist-list-item */
.wishlist-list-container,
ul.wishlist-list,
.wishlist-list {
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.wishlist-list-item {
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-md) !important;
  background: var(--lx-surface) !important;
  margin-bottom: 0.85rem !important;
  transition: border-color var(--lx-t-base) var(--lx-ease);
}
.wishlist-list-item:last-child { margin-bottom: 0 !important; }
.wishlist-list-item:hover { border-color: rgba(200, 166, 70, 0.32) !important; }

/* --- Rename/Share popup (real markup: .wishlist-list-item .dropdown-menu > button) --- */
.wishlist-list-item .dropdown-menu,
.wishlist-list-item-right .dropdown-menu {
  background: var(--lx-surface) !important; border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-md) !important; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,0.45) !important;
}
.wishlist-list-item .dropdown-menu > button,
.wishlist-list-item-right .dropdown-menu > button,
.wishlist-list-item .dropdown-menu a {
  color: var(--lx-silver-cool) !important; font-weight: 500; background: transparent !important;
}
.wishlist-list-item .dropdown-menu > button:hover,
.wishlist-list-item-right .dropdown-menu > button:hover,
.wishlist-list-item .dropdown-menu a:hover {
  background: var(--lx-gold-dim) !important; color: var(--lx-gold) !important;
}

/* --- Wishlist modals (Create / Rename): dark card + readable input (real selectors) --- */
.wishlist-modal .modal-content { background: var(--lx-surface) !important; border: 1px solid var(--lx-line) !important; }
.wishlist-modal .modal-header, .wishlist-modal .modal-footer { border-color: var(--lx-line) !important; }
.wishlist-modal .modal-header h5,
.wishlist-modal .modal-title,
.wishlist-modal .modal-text { color: var(--lx-white) !important; }
/* the input is .form-control (ships color:#000; background:none; radius:0) */
.wishlist-modal .modal-body .form-group .form-control,
.wishlist-modal .modal-body input,
.wishlist-modal input {
  background: var(--lx-elevated) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-radius: var(--lx-r-md) !important;
  padding: 0.7rem 0.95rem !important;
}
.wishlist-modal .modal-body .form-group .form-control:focus,
.wishlist-modal input:focus {
  border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px var(--lx-gold-dim) !important; outline: none;
}
.wishlist-modal .modal-body .form-group .form-control::placeholder,
.wishlist-modal input::placeholder { color: var(--lx-faint) !important; }

/* --- Wishlist VIEW page: empty text was black --- */
.wishlist-list-empty {
  color: var(--lx-muted) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* --- Skeleton loaders (Vue ContentLoader) ship white → dark, no ugly flash on load --- */
.wishlist-list-loader,
.wishlist-list-loader svg,
[class*="wishlist"] .vue-content-loader,
[class*="wishlist"] svg[class*="loader"] { background: transparent !important; }
.wishlist-list-loader rect,
.wishlist-list-loader path,
.wishlist-list-loader svg rect,
[class*="wishlist"] .vue-content-loader rect { fill: var(--lx-surface-2) !important; }
/* the gradient stops (if the loader animates a shimmer) → keep it within dark tones */
.wishlist-list-loader stop:first-child,
[class*="wishlist"] .vue-content-loader stop:first-child { stop-color: var(--lx-surface) !important; }
.wishlist-list-loader stop:last-child,
[class*="wishlist"] .vue-content-loader stop:last-child { stop-color: var(--lx-elevated) !important; }
/* --- Wishlist footer links → pill buttons matching the theme --- */
.wishlist-footer-links { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.wishlist-footer-links > a,
.wishlist-footer-links > a:not(:first-child) {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0 !important;
  padding: 0.6rem 1.3rem; border-radius: var(--lx-r-pill);
  border: 1px solid var(--lx-line-strong); color: var(--lx-text) !important;
  font-weight: 600; letter-spacing: 0.02em;
  transition: border-color var(--lx-t-base) var(--lx-ease), color var(--lx-t-base) var(--lx-ease), background var(--lx-t-base) var(--lx-ease);
}
.wishlist-footer-links > a:hover {
  border-color: var(--lx-gold); color: var(--lx-gold) !important; background: var(--lx-gold-dim);
}
.wishlist-footer-links > a i { color: currentColor !important; }
/* --- Hide breadcrumb on wishlist pages ---
   lists page body id = "module-blockwishlist-lists"; the VIEW page body id = "view"
   (its controller extends ProductListingFrontController, which rewrites the id). */
body[id^="module-blockwishlist"] .breadcrumb,
body[id^="module-blockwishlist"] nav.breadcrumb,
body#view .breadcrumb,
body#view nav.breadcrumb { display: none !important; }
.page-customer-account h1,
.page-customer-account .page-header h1,
.page-customer-account .h3 { color: var(--lx-white) !important; }

/* Tables (order history, credit slips, returns, order detail) */
.page-customer-account table,
.page-customer-account .table,
#history table,
#order-detail table,
.order-items table {
  background: transparent !important;
  color: var(--lx-text) !important;
}
.page-customer-account table th,
.page-customer-account table thead,
.page-customer-account table thead tr,
.page-customer-account .table thead,
.page-customer-account .table thead th,
#history table thead th,
#history thead,
.order-history thead th,
#order-detail table thead th,
#order-detail thead,
.page-order-detail table thead th,
.page-order-detail table thead,
.page-order-detail thead,
#order-history table thead th {
  background: var(--lx-surface-2) !important;
  color: var(--lx-white) !important;
  border-color: var(--lx-line) !important;
}
/* rounded header corners for the account tables */
.page-customer-account table { border-radius: var(--lx-r-md); overflow: hidden; border: 1px solid var(--lx-line); }
.page-customer-account table thead th:first-child { border-top-left-radius: var(--lx-r-md); }
.page-customer-account table thead th:last-child { border-top-right-radius: var(--lx-r-md); }
.page-customer-account table td,
.page-customer-account .table td { border-color: var(--lx-line) !important; color: var(--lx-text) !important; }
.page-customer-account .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
.page-customer-account .order-status,
.page-customer-account .label { color: var(--lx-text) !important; }

/* Forms on account pages — scoped to #content so the footer newsletter
   (its Subscribe <input type="submit"> + email input) is never darkened */
.page-customer-account #content .form-control-label,
.page-customer-account #content label { color: var(--lx-muted) !important; }
.page-customer-account #content .form-control,
.page-customer-account #content input,
.page-customer-account #content select,
.page-customer-account #content textarea {
  background: var(--lx-surface-2) !important;
  color: var(--lx-white) !important;
  border: 1px solid var(--lx-line-strong) !important;
}

/* Address cards */
.addresses-lists .address,
.address,
#addresses .address {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important;
  border-radius: var(--lx-r-lg);
}
.address .address-body h4,
.address h4 { color: var(--lx-white) !important; }
.address .address-footer a { color: var(--lx-gold) !important; }

/* --- Address card polish: kill the classic 9rem min-height empty gap --- */
.page-addresses .address .address-body address,
.address .address-body address {
  min-height: 0 !important;
  margin: 0 !important;
  line-height: 1.75;
  color: var(--lx-silver-cool);
}
.addresses-lists .address,
.address,
#addresses .address {
  display: flex; flex-direction: column;
  border-radius: var(--lx-r-lg) !important;
  overflow: hidden;
}
.page-addresses .address .address-body,
.address .address-body {
  padding: 1.35rem 1.5rem 1.25rem !important;
}
.page-addresses .address .address-body h4,
.address .address-body h4 {
  margin: 0 0 0.9rem !important;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--lx-line);
  font-size: 1.05rem !important; letter-spacing: 0.01em;
}
/* footer aligned with the body padding, sitting right under the content */
.page-addresses .address .address-footer,
.page-addresses .address-footer {
  margin: 0 !important;
  padding: 0.9rem 1.5rem 1.25rem !important;
  border-top: 1px solid var(--lx-line) !important;
}

/* --- Account forms (address / identity): premium inputs & layout ---
   scoped to #content so the footer newsletter (also uses .form-control) is untouched */
#address #content .form-control,
#identity #content .form-control,
.page-authentication #content .form-control {
  background: var(--lx-elevated) !important;
  border: 1px solid var(--lx-line-strong) !important;
  color: var(--lx-white) !important;
  border-radius: var(--lx-r-md) !important;
  padding: 0.72rem 1rem !important;
  height: auto !important;
  transition: border-color var(--lx-t-base) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease), background var(--lx-t-base) var(--lx-ease);
}
#address #content .form-control:hover,
#identity #content .form-control:hover { border-color: var(--lx-faint) !important; }
#address #content .form-control:focus,
#identity #content .form-control:focus,
.page-authentication #content .form-control:focus {
  border-color: var(--lx-gold) !important;
  box-shadow: 0 0 0 3px var(--lx-gold-dim) !important;
  background: var(--lx-surface-2) !important;
  outline: none;
}
#address #content .form-control::placeholder,
#identity #content .form-control::placeholder { color: var(--lx-faint) !important; }
#address #content select.form-control,
#identity #content select.form-control { color-scheme: dark; }
/* labels */
#address #content .form-control-label,
#address #content .col-form-label,
#address #content label,
#identity #content .form-control-label {
  color: var(--lx-muted) !important; font-weight: 600; letter-spacing: 0.02em;
}
/* "Optional" hints */
#address #content .form-control-comment,
#identity #content .form-control-comment {
  color: var(--lx-faint) !important; font-size: 0.82rem; font-style: italic;
}
/* field spacing + layout */
#address #content .form-group.row,
#identity #content .form-group.row { margin-bottom: 1.05rem; align-items: center; }
#address #content .form-fields { padding: 0.5rem 0; }
/* wider inputs → less dead space on the right, more balanced */
#address #content .form-group.row .col-md-6 { flex: 0 0 58%; max-width: 58%; }
/* Save button breathing room */
#address #content .form-footer { margin-top: 1.25rem; }

/* Account name in header (TEST TEST) */
#header .account,
#header .account span { color: var(--lx-text) !important; }

/* Order detail / history links + statuses */
.page-customer-account a { color: var(--lx-silver-cool); }
.page-customer-account a:hover { color: var(--lx-gold); }
.page-customer-account .btn-primary,
.page-customer-account .btn-secondary { border-radius: var(--lx-r-md); }
.product-line-grid-body .product-line-info a,
.cart-item .product-line-info.product-name,
.cart-item .label { color: var(--lx-white) !important; }
/* Delete / remove item */
.cart-line-product-actions .remove-from-cart,
.cart-item .remove-from-cart,
.cart-line-product-actions a .material-icons {
  color: var(--lx-muted) !important;
  transition: color var(--lx-t-fast) var(--lx-ease);
}
.remove-from-cart:hover,
.cart-line-product-actions .remove-from-cart:hover,
.cart-line-product-actions a:hover .material-icons { color: #e0245e !important; }
/* Continue shopping + any residual cyan links in cart */
#cart a.label,
.cart-detailed-actions a,
#cart .label a,
a.label { color: var(--lx-silver-cool) !important; }
#cart a.label:hover,
.cart-detailed-actions a:hover,
a.label:hover { color: var(--lx-gold) !important; }

/* ==========================================================================
   12p. PASSWORD RECOVERY PAGE — same premium treatment as login/register
   ========================================================================== */
.page-password .breadcrumb,
.page-password nav[data-depth] { display: none !important; }
.page-password .page-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1.5rem 0 0.25rem !important;
  text-align: center;
}
.page-password .page-header h1 { font-size: clamp(1.5rem, 3vw, 2rem) !important; margin: 0 auto; }
.page-password .page-header::after {
  content: ""; display: block; width: 56px; height: 2px;
  margin: 0.85rem auto 0; background: var(--lx-gold-grad);
}
.page-password #content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
}
.forgotten-password {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-top: 3px solid var(--lx-gold);
  border-radius: var(--lx-r-lg);
  box-shadow: var(--lx-shadow-md);
  padding: 2rem 2.25rem;
  margin: 1rem auto 1.5rem;
  max-width: 560px;
}
/* Intro text */
.forgotten-password .send-renew-password-link {
  text-align: center;
  color: var(--lx-muted);
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* The real field group is .center-email-fields (label + input + inline button) */
.forgotten-password .form-group.center-email-fields,
.forgotten-password .form-group { display: block !important; margin: 0; }
.forgotten-password .form-control-label,
.forgotten-password label {
  display: block !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  padding: 0 0 0.3rem !important;
  margin: 0 !important;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-muted) !important;
}
.forgotten-password .center-email-fields .email,
.forgotten-password .col-md-5.email,
.forgotten-password .email {
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  float: none !important;
}
.forgotten-password .center-email-fields .form-control { width: 100%; }
/* Full-width submit — WITHOUT overriding the responsive show/hide utilities,
   so only one of the two submit buttons (desktop vs mobile) is visible */
.forgotten-password .form-control-submit,
.forgotten-password button[type="submit"] {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0.85rem 1.4rem !important;
  font-size: 0.92rem;
  letter-spacing: normal;
  text-align: center !important;
  line-height: 1.2;
}
/* Only the size-appropriate button is shown, and it's flex-centred (bullet-proof) */
.forgotten-password .btn.hidden-xs-down {
  display: flex !important; align-items: center; justify-content: center;
}
.forgotten-password .btn.hidden-sm-up { display: none !important; }
@media (max-width: 575px) {
  .forgotten-password .btn.hidden-xs-down { display: none !important; }
  .forgotten-password .btn.hidden-sm-up {
    display: flex !important; align-items: center; justify-content: center;
  }
}

/* "Back to login" → ghost pill button, centred */
.page-password #back-to-login,
#back-to-login {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.75rem;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r-pill);
  color: var(--lx-white) !important;
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              background var(--lx-t-base) var(--lx-ease),
              transform var(--lx-t-fast) var(--lx-ease);
}
#back-to-login:hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold) !important;
  background: var(--lx-gold-dim);
  transform: translateY(-1px);
}
.page-password .forgotten-password ~ *,
.page-password [id="back-to-login"] { text-align: center; }
.page-password #back-to-login { margin: 0 auto; }

/* The "Back to login" sits in <footer class="page-footer"> — kill its card bg */
.page-password .page-footer,
.page-authentication .page-footer,
.page-registration .page-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 2.5rem !important;
  text-align: center;
}

/* ==========================================================================
   12j. FOOTER COLUMN ALIGNMENT · AUTH FORMS · NEWSLETTER POLISH
   ========================================================================== */

/* --- Footer: make every column title identical so they align --- */
#footer .links.wrapper .h3,
#footer .block-contact-title,
#footer .account-list-title,
#footer .wrapper .h3,
#footer [class*="col-md-3"] .h3,
#footer [class*="col-md-3"] .h4,
#footer [class*="col-md-3"] .title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 1.1rem 0 !important;
  padding: 0 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  min-height: 0 !important;
}
#footer .footer-container [class*="col-md-3"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* --- Auth forms (login / registration): labels were near-invisible --- */
.form-control-label,
.col-form-label,
.page-authentication label,
.page-customer-account label,
#login-form label,
#customer-form label,
.register-form label {
  color: var(--lx-muted) !important;
  opacity: 1 !important;
  font-weight: 500;
}
/* Field help text a touch dimmer but readable */
.form-control-comment,
.help-block,
small.form-text { color: var(--lx-faint) !important; }

/* "SHOW" password reveal button */
.input-group-btn button[data-action="show-password"],
.input-group-btn .btn,
.input-group-append .btn {
  background: var(--lx-elevated) !important;
  color: var(--lx-muted) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-left: none !important;
  box-shadow: none !important;
}
.input-group-btn button[data-action="show-password"]:hover { color: var(--lx-gold) !important; }

/* --- Custom radio / checkbox (Mr./Mrs., conditions…) --- */
.custom-radio,
.custom-checkbox input[type="checkbox"] + span {
  background: var(--lx-surface-2) !important;
  border: 1px solid var(--lx-line-strong) !important;
}
.custom-radio input[type="radio"]:checked + span {
  background-color: var(--lx-gold) !important;
  border: none;
}
.custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--lx-gold) !important;
  border-color: var(--lx-gold) !important;
}
.custom-checkbox input[type="checkbox"]:checked + span .material-icons,
.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked { color: #1a1407 !important; }

/* Bootstrap default radios/checks (Social title etc.) */
.radio-inline,
.checkbox { color: var(--lx-text) !important; }

/* --- Newsletter: vertical rhythm + equal heights --- */
.block_newsletter .row { align-items: center; }
.block_newsletter form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.block_newsletter .input-wrapper { flex: 1; min-width: 220px; }
.block_newsletter input[type="email"] { min-height: 48px; }
.block_newsletter [type="submit"],
.block_newsletter .btn { min-height: 48px; white-space: nowrap; }
.block_newsletter .newsletter-conditions,
.block_newsletter p:not(#block-newsletter-label) { width: 100%; margin-top: 0.6rem; }

/* ==========================================================================
   13. ANIMATIONS & UTILITIES
   ========================================================================== */
@keyframes lx-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lx-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lx-t-slow) var(--lx-ease-out),
              transform var(--lx-t-slow) var(--lx-ease-out);
  will-change: opacity, transform;
}
.lx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lx-fade-in { animation: lx-fade var(--lx-t-slow) var(--lx-ease) both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lx-reveal { opacity: 1; transform: none; }
}

/* Focus visibility (accessibility / WCAG) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lx-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   12s. CUSTOMER ZONE — GDPR · account-links nav · wishlist · orders
   ========================================================================== */

/* --- GDPR page (psgdpr) --- */
/* Flatten the redundant outer wrapper (card-in-card) so only the info cards show */
#content:has(.psgdprinfo17),
.page_content:has(.psgdprinfo17),
.page-customer-account #content:has(.psgdprinfo17) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Info cards → dark with a subtle gold top accent */
.psgdprinfo17,
.page_content .psgdprinfo17,
[class*="psgdprinfo"] {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  border-top: 2px solid var(--lx-gold) !important;
  color: var(--lx-text) !important;
  border-radius: var(--lx-r-lg) !important;
  padding: 2rem 2.25rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: var(--lx-shadow-sm) !important;
}
.psgdprinfo17 h1,
.psgdprinfo17 h2,
.psgdprinfo17 h3,
[class*="psgdprinfo"] h2,
.page_content h2 { color: var(--lx-white) !important; }
.psgdprinfo17 p,
[class*="psgdprinfo"] p,
.page_content p { color: var(--lx-muted) !important; }
.psgdprinfo17 a,
[class*="psgdprinfo"] a { color: var(--lx-gold) !important; }
body .psgdprinfo17 .psgdprgetdatabtn17,
body .page_content .psgdprgetdatabtn17,
body a.psgdprgetdatabtn17,
body button.psgdprgetdatabtn17,
.psgdprgetdatabtn17,
[class*="psgdprgetdatabtn"] {
  background: linear-gradient(135deg, #D4B25A 0%, #B8965A 100%) !important;
  color: #14100a !important;
  border: none !important;
  border-radius: var(--lx-r-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.75rem !important;
  box-shadow: 0 4px 14px rgba(200, 166, 70, 0.16) !important;
  text-shadow: none !important;
  transition: transform var(--lx-t-fast) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
body .psgdprgetdatabtn17,
body .psgdprgetdatabtn17 *,
body [class*="psgdprgetdatabtn"],
body [class*="psgdprgetdatabtn"] * {
  color: #14100a !important;
  opacity: 1 !important;
}
body .psgdprgetdatabtn17:hover,
body [class*="psgdprgetdatabtn"]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(200,166,70,0.26) !important; }

/* --- "Back to your account" / "Home" sub-page nav (my-account-links) --- */
.page-customer-account .page-footer,
.page-my-account .page-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1rem 0 2.5rem !important;
}
.account-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  margin: 0.25rem 0.6rem 0.25rem 0;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r-pill);
  color: var(--lx-silver-cool) !important;
  font-weight: 600;
  font-size: 0.85rem;
  transition: border-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              background var(--lx-t-base) var(--lx-ease);
}
.account-link:hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold) !important;
  background: var(--lx-gold-dim);
}
.account-link .material-icons { color: currentColor; font-size: 18px; }

/* --- Wishlist page (blockwishlist) --- */
.wishlist-list,
.wishlist-container,
.wishlist-list-item,
.page-wishlist .card,
.wishlist-products-item {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important;
}
.wishlist-list-item-title,
.page-wishlist h1,
.wishlist-title { color: var(--lx-white) !important; }
/* GLOBAL: the Classic "primary" colour (cyan) → gold. Kills residual cyan
   on .text-primary links across the whole site (wishlist nav, etc.). */
.text-primary,
a.text-primary { color: var(--lx-gold) !important; }
a.text-primary:hover { color: var(--lx-gold-soft) !important; }

/* Wishlist page (body id = module-blockwishlist-lists / -view) */
#module-blockwishlist-lists .breadcrumb,
#module-blockwishlist-view .breadcrumb { display: none !important; }
#module-blockwishlist-lists .page-footer,
#module-blockwishlist-view .page-footer { background: transparent !important; border: none !important; }
/* "Return to your account" / "Home" → elegant pill buttons */
#module-blockwishlist-lists a.text-primary,
#module-blockwishlist-view a.text-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  margin: 0.75rem 0.7rem 0 0;
  border: 1px solid var(--lx-line-strong);
  border-radius: var(--lx-r-pill);
  color: var(--lx-silver-cool) !important;
  font-weight: 600;
  font-size: 0.85rem;
  transition: border-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              background var(--lx-t-base) var(--lx-ease);
}
#module-blockwishlist-lists a.text-primary:hover,
#module-blockwishlist-view a.text-primary:hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold) !important;
  background: var(--lx-gold-dim);
}
#module-blockwishlist-lists a.text-primary .material-icons { color: currentColor; font-size: 18px; }
.wishlist-list-item { border-radius: var(--lx-r-lg); }

/* ==========================================================================
   12t. ORDER TRACKING — Amazon-style shipment tracker + CTT button
   ========================================================================== */
.lx-tracker { position: relative; margin: 1.75rem 0 2rem; padding: 0 0.5rem; }
.lx-tracker__progress {
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: var(--lx-elevated);
  border-radius: 3px;
  z-index: 0;
  overflow: hidden;
}
.lx-tracker__fill {
  display: block;
  height: 100%;
  background: var(--lx-gold-grad);
  border-radius: 3px;
  transition: width 0.6s var(--lx-ease-out);
}
.lx-tracker__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
  z-index: 1;
}
.lx-tracker__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}
.lx-tracker__dot {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lx-surface-2);
  border: 2px solid var(--lx-line-strong);
  color: var(--lx-faint);
  transition: background var(--lx-t-base) var(--lx-ease),
              border-color var(--lx-t-base) var(--lx-ease),
              color var(--lx-t-base) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease);
}
.lx-tracker__dot .material-icons { font-size: 22px; }
.lx-tracker__label {
  font-size: 0.78rem;
  color: var(--lx-faint);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.lx-tracker__step.is-done .lx-tracker__dot {
  background: var(--lx-gold-grad);
  border-color: transparent;
  color: #1a1407;
  box-shadow: 0 4px 14px rgba(200, 166, 70, 0.3);
}
.lx-tracker__step.is-done .lx-tracker__label { color: var(--lx-white); }
.lx-tracker__step.is-current .lx-tracker__dot {
  box-shadow: 0 0 0 4px var(--lx-gold-dim), 0 4px 14px rgba(200, 166, 70, 0.35);
}
.lx-tracker__step.is-current .lx-tracker__label { color: var(--lx-gold); }
/* the active-but-not-yet-completed step (next target): gold outline, not filled */
.lx-tracker__step.is-current:not(.is-done) .lx-tracker__dot {
  border-color: var(--lx-gold);
  color: var(--lx-gold);
  animation: lxPulse 1.8s var(--lx-ease) infinite;
}
@keyframes lxPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--lx-gold-dim); }
  50% { box-shadow: 0 0 0 6px rgba(200, 166, 70, 0.08); }
}

/* --- Interactive stepper (radio-tabs): click a step → its info panel --- */
.lx-tab-in { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.lx-tracker--tabs .lx-tracker__step { display: block; }
.lx-tracker__hit {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lx-tracker__hit .lx-tracker__label { transition: color var(--lx-t-base) var(--lx-ease); }
.lx-tracker__hit:hover .lx-tracker__dot { border-color: var(--lx-gold); }
/* selected (clicked) step emphasis */
#lxtab1:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(1) .lx-tracker__dot,
#lxtab2:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(2) .lx-tracker__dot,
#lxtab3:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(3) .lx-tracker__dot,
#lxtab4:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(4) .lx-tracker__dot {
  box-shadow: 0 0 0 4px var(--lx-gold-dim), 0 4px 14px rgba(200, 166, 70, 0.32);
}
#lxtab1:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(1) .lx-tracker__label,
#lxtab2:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(2) .lx-tracker__label,
#lxtab3:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(3) .lx-tracker__label,
#lxtab4:checked ~ .lx-tracker__steps .lx-tracker__step:nth-child(4) .lx-tracker__label { color: var(--lx-gold); }
/* info panels */
.lx-tracker__panels { margin-top: 1.7rem; }
.lx-tracker__panel { display: none; }
#lxtab1:checked ~ .lx-tracker__panels .lx-tp1,
#lxtab2:checked ~ .lx-tracker__panels .lx-tp2,
#lxtab3:checked ~ .lx-tracker__panels .lx-tp3,
#lxtab4:checked ~ .lx-tracker__panels .lx-tp4 { display: block; animation: lxFadeUp 0.25s var(--lx-ease-out); }
@keyframes lxFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lx-tpcard { background: var(--lx-surface-2); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: 1.1rem 1.25rem; }
.lx-tpitem { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.6rem 0; }
.lx-tpitem + .lx-tpitem { border-top: 1px solid var(--lx-line); }
.lx-tpitem:first-child { padding-top: 0; }
.lx-tpitem:last-child { padding-bottom: 0; }
.lx-tpitem__dot {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lx-surface); border: 2px solid var(--lx-line-strong); color: var(--lx-faint);
}
.lx-tpitem__dot .material-icons { font-size: 17px; }
.lx-tpitem.is-done .lx-tpitem__dot { background: var(--lx-gold-grad); border-color: transparent; color: #1a1407; box-shadow: 0 3px 12px rgba(200, 166, 70, 0.25); }
.lx-tpitem__txt { display: flex; flex-direction: column; gap: 0.12rem; padding-top: 0.2rem; }
.lx-tpitem__label { color: var(--lx-white); font-weight: 600; line-height: 1.3; }
.lx-tpitem.is-wait .lx-tpitem__label { color: var(--lx-faint); }
.lx-tpitem__meta { color: var(--lx-muted); font-size: 0.82rem; }
.lx-tpitem.is-wait .lx-tpitem__meta { font-style: italic; }
/* the CTT live block in panel 3 → EXACTLY the same card as the other panels
   (.box from the parent theme adds bg/shadow/margins we must fully neutralise) */
.lx-tracker__panel .lx-livetrack {
  background: var(--lx-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-md) !important;
  box-shadow: none !important;
  padding: 1.1rem 1.25rem !important;
  margin: 0 !important;
}
/* HARD override (ID specificity beats any parent-theme .box rule) — force both
   the CTT card and the plain panels to the exact same grey, literal values */
#order-history .lx-tpcard,
#order-history .lx-tracker__panel .lx-livetrack,
#order-history .lx-livetrack.box {
  background-color: #1F1F1F !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
/* hide the CTT branding header so the panel is just clean rows (like the other panels) */
.lx-tracker__panel .lx-livetrack__head { display: none !important; }
/* tracking number → plain line at the top, not a nested framed box */
.lx-tracker__panel .lx-livetrack__tn {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 0 0 0.9rem !important; margin: 0 0 0.5rem !important;
  border-bottom: 1px solid var(--lx-line) !important;
}
/* events → clean rows (like .lx-tpitem), no connecting line, no highlighted card */
.lx-tracker__panel .lx-events::before { display: none; }
.lx-tracker__panel .lx-event {
  display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.7rem 0;
  background: transparent; border: none; border-radius: 0; margin: 0;
}
.lx-tracker__panel .lx-event:first-of-type { padding-top: 0; }
.lx-tracker__panel .lx-event:last-child { padding-bottom: 0; }
.lx-tracker__panel .lx-event + .lx-event { border-top: 1px solid var(--lx-line); }
.lx-tracker__panel .lx-event__dot {
  position: static; left: auto; top: auto; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lx-gold-grad); border: none; color: #1a1407; box-shadow: none;
}
.lx-tracker__panel .lx-event__dot .material-icons { font-size: 15px; }
.lx-tracker__panel .lx-event--delivered .lx-event__dot { background: #4a9d6a; color: #fff; }
.lx-tracker__panel .lx-event--exception .lx-event__dot { background: #e0245e; color: #fff; }
.lx-tracker__panel .lx-event__body { padding-top: 0.25rem; }
.lx-tracker__panel .lx-event__detail { color: var(--lx-white); font-weight: 600; }
.lx-tracker__panel .lx-event:not(.is-latest) .lx-event__detail { font-weight: 500; color: var(--lx-text); }
/* kill the highlighted "latest" card so every CTT row is uniform (like the Prep panel) */
.lx-tracker__panel .lx-event.is-latest {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 0.7rem 0 !important; margin: 0 !important;
}
.lx-tracker__panel .lx-event.is-latest:first-of-type { padding-top: 0 !important; }
.lx-tracker__panel .lx-event.is-latest .lx-event__dot {
  position: static !important; left: auto !important; top: auto !important;
  width: 30px !important; height: 30px !important; box-shadow: none !important;
}

/* CTT tracking box + button */
.lx-ctt-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line);
  border-left: 3px solid var(--lx-gold);
  border-radius: var(--lx-r-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.lx-ctt-box__text {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--lx-text);
  font-weight: 500;
}
.lx-ctt-box__text .material-icons { color: var(--lx-gold); }
.lx-track-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--lx-gold-grad);
  color: #1a1407 !important;
  padding: 0.72rem 1.5rem;
  border-radius: var(--lx-r-pill);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(200, 166, 70, 0.22);
  transition: transform var(--lx-t-fast) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
.lx-track-btn:hover { transform: translateY(-2px); color: #1a1407 !important; box-shadow: 0 10px 26px rgba(200, 166, 70, 0.32); }
.lx-track-btn .material-icons { font-size: 18px; }

@media (max-width: 575px) {
  .lx-tracker__dot { width: 38px; height: 38px; }
  .lx-tracker__dot .material-icons { font-size: 18px; }
  .lx-tracker__label { font-size: 0.66rem; }
  .lx-tracker__progress { top: 18px; }
  .lx-ctt-box { flex-direction: column; align-items: stretch; text-align: center; }
  .lx-track-btn { justify-content: center; }
}

/* --- Live tracking event list (module topcintotracking) --- */
.lx-livetrack {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.5rem;
}
/* header: brand block + status chip */
.lx-livetrack__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--lx-line);
}
.lx-livetrack__brand { display: inline-flex; align-items: center; gap: 0.75rem; }
.lx-livetrack__ico {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lx-gold-dim); color: var(--lx-gold);
}
.lx-livetrack__ico .material-icons { font-size: 22px; }
.lx-livetrack__brandtxt { display: flex; flex-direction: column; line-height: 1.25; }
.lx-livetrack__title { color: var(--lx-white) !important; margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }
.lx-livetrack__sub { color: var(--lx-faint); font-size: 0.78rem; }
.lx-livetrack__status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.34rem 0.8rem; border-radius: var(--lx-r-pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--lx-surface-2); border: 1px solid var(--lx-line-strong); color: var(--lx-silver-cool);
}
.lx-livetrack__statusdot { width: 7px; height: 7px; border-radius: 50%; background: var(--lx-muted); flex: 0 0 auto; }
.lx-status--delivered { color: #6fcf97; }
.lx-status--delivered .lx-livetrack__statusdot { background: #4a9d6a; box-shadow: 0 0 0 3px rgba(74,157,106,0.2); }
.lx-status--transit, .lx-status--pickup, .lx-status--inforeceived { color: var(--lx-gold); }
.lx-status--transit .lx-livetrack__statusdot,
.lx-status--pickup .lx-livetrack__statusdot,
.lx-status--inforeceived .lx-livetrack__statusdot { background: var(--lx-gold); box-shadow: 0 0 0 3px var(--lx-gold-dim); }
.lx-status--exception { color: #e0245e; }
.lx-status--exception .lx-livetrack__statusdot { background: #e0245e; box-shadow: 0 0 0 3px rgba(224,36,94,0.18); }
/* tracking number as a labeled data chip */
.lx-livetrack__tn {
  display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: var(--lx-surface-2); border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md); padding: 0.55rem 0.9rem; margin: 0 0 1.35rem;
}
.lx-livetrack__tn-label { color: var(--lx-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lx-livetrack__tn-value { color: var(--lx-silver-cool); font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* timeline */
.lx-events { list-style: none; margin: 0; padding: 0; position: relative; }
.lx-events::before {
  content: ""; position: absolute; left: 10px; top: 14px; bottom: 12px;
  width: 2px; background: var(--lx-line-strong);
}
.lx-event { position: relative; padding: 0 0 1.25rem 2.35rem; }
.lx-event:last-child { padding-bottom: 0; }
.lx-event__dot {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lx-surface-2); border: 2px solid var(--lx-line-strong); color: transparent; z-index: 1;
}
.lx-event__dot .material-icons { font-size: 13px; }
.lx-event--delivered .lx-event__dot { background: #4a9d6a; border-color: transparent; color: #fff; }
.lx-event--exception .lx-event__dot { background: #e0245e; border-color: transparent; color: #fff; }
/* highlight the most recent event as a card */
.lx-event.is-latest {
  background: var(--lx-gold-dim); border: 1px solid rgba(200,166,70,0.28);
  border-radius: var(--lx-r-md); padding: 0.85rem 0.95rem 0.9rem 2.9rem; margin-bottom: 1.2rem;
}
.lx-event.is-latest .lx-event__dot {
  left: 0.75rem; top: 0.8rem; background: var(--lx-gold-grad); border-color: transparent; color: #1a1407;
  box-shadow: 0 0 0 4px rgba(200,166,70,0.14);
}
.lx-event.is-latest.lx-event--delivered .lx-event__dot { background: #4a9d6a; color: #fff; box-shadow: 0 0 0 4px rgba(74,157,106,0.18); }
.lx-event__detail { color: var(--lx-text); margin: 0 0 0.28rem; font-weight: 500; line-height: 1.4; }
.lx-event.is-latest .lx-event__detail { color: var(--lx-white); font-weight: 600; }
.lx-event__date { display: inline-flex; align-items: center; gap: 0.34rem; color: var(--lx-faint); font-size: 0.78rem; }
.lx-event__date .material-icons { font-size: 14px; opacity: 0.8; }

/* CTA to CTT website */
.lx-livetrack__cta { margin-top: 1.35rem; width: 100%; justify-content: center; }

/* --- Ordered product cards (order detail, Amazon-style) --- */
.lx-order-items { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.lx-order-item {
  display: flex; align-items: center; gap: 1rem;
  background: var(--lx-surface-2); border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md); padding: 0.75rem;
}
.lx-order-item__thumb {
  flex: 0 0 auto; width: 74px; height: 74px;
  border-radius: var(--lx-r-sm); overflow: hidden; background: var(--lx-graphite); display: block;
}
.lx-order-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lx-order-item__info { display: flex; flex-direction: column; gap: 0.25rem; }
.lx-order-item__name { color: var(--lx-white) !important; font-weight: 600; line-height: 1.3; }
.lx-order-item__name:hover { color: var(--lx-gold) !important; }
.lx-order-item__qty { color: var(--lx-muted); font-size: 0.82rem; }

/* --- Order-track section header (replaces the plain "step-by-step" h3) --- */
.lx-order-track { padding: 1.75rem 1.75rem 1.5rem; }
.lx-order-track__head {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--lx-line);
}
.lx-order-track__head .material-icons {
  color: var(--lx-gold); font-size: 26px;
}
.lx-order-track__title {
  margin: 0; font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--lx-white) !important;
  text-transform: none;
}
@media (max-width: 575px) {
  .lx-order-track { padding: 1.25rem 1rem; }
  .lx-order-track__title { font-size: 1rem; }
}

/* --- Unified status flow (Confirmado → Pagado → En preparación) --- */
.lx-flow {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
}
.lx-flow__item { position: relative; display: flex; align-items: flex-start; gap: 0.95rem; padding-bottom: 1.15rem; }
.lx-flow__item:last-child { padding-bottom: 0; }
/* connector line between dots */
.lx-flow__item::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -4px;
  width: 2px; background: var(--lx-line-strong);
}
.lx-flow__item:last-child::before { display: none; }
.lx-flow__item.is-done::before { background: var(--lx-gold-grad); }
.lx-flow__dot {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lx-surface); border: 2px solid var(--lx-line-strong);
  color: var(--lx-faint); z-index: 1;
  transition: background var(--lx-t-base) var(--lx-ease), border-color var(--lx-t-base) var(--lx-ease), color var(--lx-t-base) var(--lx-ease);
}
.lx-flow__dot .material-icons { font-size: 18px; }
.lx-flow__item.is-done .lx-flow__dot {
  background: var(--lx-gold-grad); border-color: transparent; color: #1a1407;
  box-shadow: 0 3px 12px rgba(200, 166, 70, 0.28);
}
.lx-flow__body { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.15rem; }
.lx-flow__label { font-weight: 600; color: var(--lx-faint); line-height: 1.3; }
.lx-flow__item.is-done .lx-flow__label { color: var(--lx-white); }
.lx-flow__date { font-size: 0.82rem; color: var(--lx-muted); }
.lx-flow__wait { color: var(--lx-faint); font-style: italic; }

/* --- "Ver más información" → a real pill button that unfolds the panel --- */
.lx-more { margin-top: 1.5rem; text-align: center; }
.lx-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.62rem 1.45rem; border-radius: var(--lx-r-pill);
  border: 1px solid rgba(200, 166, 70, 0.42); background: var(--lx-gold-dim);
  color: var(--lx-gold); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
  transition: background var(--lx-t-base) var(--lx-ease), border-color var(--lx-t-base) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
}
.lx-more > summary::-webkit-details-marker { display: none; }
.lx-more > summary:hover { background: rgba(200, 166, 70, 0.16); border-color: var(--lx-gold); transform: translateY(-1px); }
.lx-more__label { display: inline-flex; align-items: center; }
.lx-more__chev { color: var(--lx-gold); font-size: 20px; transition: transform var(--lx-t-base) var(--lx-ease); }
.lx-more[open] > summary .lx-more__chev { transform: rotate(180deg); }
.lx-more__body { text-align: left; padding-top: 1.25rem; }
.lx-more__body .lx-flow { margin-bottom: 0; }
/* flatten the CTT live block inside the panel (no double frame, more compact) */
.lx-more__body .lx-livetrack {
  background: transparent !important; border: none !important; border-left: none !important;
  border-top: 1px solid var(--lx-line) !important; border-radius: 0 !important;
  padding: 1.15rem 0 0 !important; margin: 1.15rem 0 0 !important;
}

/* --- Clickable transport icon → opens the CTT history modal --- */
.lx-flow__dot--link, .lx-tracker__dot--link { cursor: pointer; text-decoration: none; position: relative; }
.lx-flow__dot--link:hover, .lx-tracker__dot--link:hover { filter: brightness(1.08); }
.lx-flow__dot--link::after,
.lx-tracker__dot--link::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px dashed var(--lx-gold); opacity: 0; transition: opacity var(--lx-t-base) var(--lx-ease);
}
.lx-flow__dot--link:hover::after,
.lx-tracker__dot--link:hover::after { opacity: 0.75; }
.lx-flow__track {
  display: inline-flex; align-items: center; gap: 0.32rem; margin-top: 0.4rem;
  color: var(--lx-gold) !important; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  transition: filter var(--lx-t-fast) var(--lx-ease);
}
.lx-flow__track .material-icons { font-size: 15px; }
.lx-flow__track:hover { filter: brightness(1.15); }

/* --- CTT full-history modal (CSS :target, no JS) --- */
.lx-cttmodal { position: fixed; inset: 0; z-index: 4000; display: none; }
.lx-cttmodal:target { display: block; }
.lx-cttmodal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(2px); }
.lx-cttmodal__panel {
  position: relative; z-index: 1; width: 92%; max-width: 620px; margin: 7vh auto 0;
  max-height: 82vh; overflow-y: auto;
  background: var(--lx-surface); border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg); box-shadow: var(--lx-shadow-lg);
  padding: 0.5rem 1.25rem 1.25rem;
  animation: lxModalIn 0.25s var(--lx-ease-out);
}
@keyframes lxModalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lx-cttmodal__close {
  position: sticky; top: 0.4rem; float: right; margin: 0.25rem -0.5rem 0 0;
  width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lx-surface-2); border: 1px solid var(--lx-line); color: var(--lx-muted);
  transition: border-color var(--lx-t-base) var(--lx-ease), color var(--lx-t-base) var(--lx-ease);
}
.lx-cttmodal__close .material-icons { font-size: 20px; }
.lx-cttmodal__close:hover { border-color: var(--lx-gold); color: var(--lx-gold); }
.lx-cttmodal__panel .lx-livetrack {
  background: transparent !important; border: none !important; border-left: none !important;
  padding: 0.5rem 0 0 !important; margin: 0 !important;
}
@media (max-width: 575px) { .lx-cttmodal__panel { margin-top: 4vh; padding: 0.5rem 1rem 1rem; } }

/* ==========================================================================
   12u. ORDER DETAIL — full-page premium polish (info / addresses / table / msg)
   ========================================================================== */
/* Collapsible panels for the lower half (cleaner page) */
.lx-panel {
  background: var(--lx-surface);
  border: 1px solid transparent; /* blends with the background — no visible dividing line */
  border-radius: var(--lx-r-lg);
  margin-bottom: 1rem;
  overflow: hidden;
}
.lx-panel > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem;
  color: var(--lx-white); font-weight: 600; font-size: 1rem;
  transition: background var(--lx-t-base) var(--lx-ease);
}
.lx-panel > summary::-webkit-details-marker { display: none; }
.lx-panel > summary:hover { background: var(--lx-surface-2); }
.lx-panel__title { display: inline-flex; align-items: center; gap: 0.6rem; letter-spacing: 0.01em; }
.lx-panel__title .material-icons { color: var(--lx-gold); font-size: 21px; }
.lx-panel__chev { color: var(--lx-muted); transition: transform var(--lx-t-base) var(--lx-ease); }
.lx-panel[open] > summary { border-bottom: 1px solid var(--lx-line); }
.lx-panel[open] > summary .lx-panel__chev { transform: rotate(180deg); }
.lx-panel__body { padding: 1.35rem 1.5rem 1.5rem; }
/* neutralise the inner .box chrome so panels don't double-frame */
.lx-panel__body > .box,
.lx-panel__body .addresses > div > .box {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0; margin-bottom: 1.25rem;
}
.lx-panel__body .addresses {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  align-items: start; margin: 0 0 1.25rem;
}
.lx-panel__body .addresses > div {
  float: none !important; width: auto !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
}
.lx-panel__body .addresses .clearfix { display: none; }
.lx-panel__body #delivery-address, .lx-panel__body #invoice-address {
  background: var(--lx-surface-2) !important; border: 1px solid var(--lx-line) !important;
  padding: 1.1rem 1.25rem !important; margin: 0 !important; height: auto;
}
@media (max-width: 575px) { .lx-panel__body .addresses { grid-template-columns: 1fr; } }

/* Message form (inside the panel) — clean, single-frame */
.lx-panel__body .order-message-form,
.lx-panel__body .box.messages { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
.order-message-form header h3 { display: none; } /* redundant with panel title */
.order-message-form header p {
  display: flex; align-items: flex-start; gap: 0.65rem;
  background: var(--lx-surface-2); border: 1px solid var(--lx-line);
  border-left: 3px solid var(--lx-gold); border-radius: var(--lx-r-md);
  padding: 0.9rem 1.15rem; margin: 0 0 1.5rem;
  color: var(--lx-muted); line-height: 1.55; font-size: 0.92rem;
}
.order-message-form header p::before {
  font-family: 'Material Icons'; content: "\e8fd"; /* help_outline */
  color: var(--lx-gold); font-size: 20px; line-height: 1.4; flex: 0 0 auto;
}
.order-message-form .form-group { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 1.1rem; }
.order-message-form .form-group.row { margin-left: 0; margin-right: 0; }
.order-message-form .form-group > [class*="col-"] { flex: 1 1 100%; max-width: 100%; padding: 0; }
.order-message-form label.form-control-label {
  color: var(--lx-muted); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0; text-align: left; margin: 0;
}
.order-message-form label.form-control-label:empty { display: none; }
.order-message-form select.form-control,
.order-message-form textarea.form-control {
  width: 100%; background: var(--lx-surface-2) !important;
  border: 1px solid var(--lx-line) !important; color: var(--lx-text) !important;
  border-radius: var(--lx-r-md); padding: 0.72rem 0.95rem;
  color-scheme: dark; /* native dropdown/list renders dark, not white */
  transition: border-color var(--lx-t-base) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
/* native option list — dark to match theme */
.order-message-form select.form-control option { background: var(--lx-surface-2); color: var(--lx-text); }
/* custom gold caret on the select */
.order-message-form select.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8A646' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 0.95rem center !important;
  padding-right: 2.4rem;
}
.order-message-form select.form-control:focus,
.order-message-form textarea.form-control:focus {
  border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px var(--lx-gold-dim) !important; outline: none;
}
.order-message-form textarea.form-control { min-height: 130px; resize: vertical; }
.order-message-form .form-footer { text-align: left; margin-top: 0.25rem; }
.order-message-form .btn-primary.form-control-submit {
  display: inline-flex; align-items: center; gap: 0.5rem; width: auto;
  background: var(--lx-gold-grad) !important; color: #1a1407 !important; border: none !important;
  border-radius: var(--lx-r-pill); padding: 0.72rem 2.2rem; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 6px 18px rgba(200,166,70,0.22);
  transition: transform var(--lx-t-fast) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
.order-message-form .btn-primary.form-control-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200,166,70,0.32); }
/* existing messages thread */
.box.messages .message.row { padding: 0.85rem 0; border-bottom: 1px solid var(--lx-line); }
.box.messages .message.row:last-child { border-bottom: none; }
.box.messages .message .col-sm-4 { color: var(--lx-faint); font-size: 0.85rem; }
@media (max-width: 575px) { .lx-panel__body { padding: 1rem; } .lx-panel > summary { padding: 0.9rem 1rem; font-size: 0.92rem; } }

/* Visible reference header (stays out of the panel) */
.lx-order-ref { }

/* Discreet order reference line above the tracker (must not steal focus) */
.lx-order-ref-line {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--lx-line);
}
.lx-order-ref-line__txt { color: var(--lx-faint); font-size: 0.8rem; letter-spacing: 0.02em; }
.lx-order-ref-line__txt strong { color: var(--lx-muted); font-weight: 600; }
.lx-order-ref-line__reorder {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--lx-muted) !important; font-size: 0.78rem; font-weight: 600;
  transition: color var(--lx-t-fast) var(--lx-ease);
}
.lx-order-ref-line__reorder .material-icons { font-size: 15px; }
.lx-order-ref-line__reorder:hover { color: var(--lx-gold) !important; }

/* ==========================================================================
   12v. ORDER HISTORY — Amazon-style order cards
   ========================================================================== */
.lx-hist-intro {
  display: block;
  color: var(--lx-muted);
  margin: 0.25rem 0 1.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.6;
  max-width: 620px;
}
.lx-hist-intro::before { content: none; }
.lx-hist { display: flex; flex-direction: column; gap: 1.25rem; }
.lx-hist__card {
  background: var(--lx-surface);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg);
  overflow: hidden;
  transition: border-color var(--lx-t-base) var(--lx-ease), transform var(--lx-t-base) var(--lx-ease), box-shadow var(--lx-t-base) var(--lx-ease);
}
.lx-hist__card:hover { border-color: rgba(200,166,70,0.35); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }

.lx-hist__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.35rem;
  background: var(--lx-surface-2);
  border-bottom: 1px solid var(--lx-line);
}
.lx-hist__id { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.lx-hist__label { color: var(--lx-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lx-hist__ref { color: var(--lx-gold); font-weight: 700; letter-spacing: 0.03em; }
.lx-hist__date { color: var(--lx-faint); font-size: 0.85rem; }
.lx-hist__status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line-strong) !important;
  color: var(--lx-silver-cool) !important;
  padding: 0.34rem 0.8rem 0.34rem 0.65rem !important;
  border-radius: var(--lx-r-pill) !important;
  font-size: 0.7rem !important; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap;
}
.lx-hist__status::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lx-st, var(--lx-gold));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lx-st, var(--lx-gold)) 22%, transparent);
}

.lx-hist__products { padding: 0.5rem 1.35rem; display: flex; flex-direction: column; }
.lx-hist__item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--lx-line);
  transition: opacity var(--lx-t-base) var(--lx-ease);
}
.lx-hist__item:last-child { border-bottom: none; }
.lx-hist__item:hover { opacity: 0.92; }
.lx-hist__thumb {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--lx-r-sm);
  overflow: hidden; background: var(--lx-graphite); border: 1px solid var(--lx-line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--lx-t-base) var(--lx-ease);
}
.lx-hist__item:hover .lx-hist__thumb { border-color: rgba(200,166,70,0.4); }
.lx-hist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lx-hist__thumb .material-icons { color: var(--lx-faint); font-size: 28px; }
.lx-hist__info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.lx-hist__name { color: var(--lx-white) !important; font-weight: 600; line-height: 1.3; }
.lx-hist__item:hover .lx-hist__name { color: var(--lx-gold) !important; }
.lx-hist__sku { color: var(--lx-faint); font-size: 0.78rem; letter-spacing: 0.02em; }
.lx-hist__price { color: var(--lx-silver-cool); font-size: 0.9rem; }
.lx-hist__qty { color: var(--lx-muted); }

.lx-hist__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.35rem;
  background: var(--lx-surface-2);
  border-top: 1px solid var(--lx-line);
}
.lx-hist__total { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.lx-hist__total-label { color: var(--lx-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lx-hist__total-value { color: var(--lx-gold); font-weight: 700; font-size: 1.15rem; }
.lx-hist__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.lx-hist__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: var(--lx-r-pill);
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
  border: 1px solid var(--lx-line-strong); color: var(--lx-text) !important;
  transition: all var(--lx-t-base) var(--lx-ease);
}
.lx-hist__btn .material-icons { font-size: 17px; }
.lx-hist__btn:hover { border-color: var(--lx-gold); color: var(--lx-gold) !important; }
.lx-hist__btn--primary {
  background: var(--lx-gold-grad); border-color: transparent; color: #1a1407 !important;
  box-shadow: 0 5px 15px rgba(200,166,70,0.2);
}
.lx-hist__btn--primary:hover { color: #1a1407 !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(200,166,70,0.3); }
.lx-hist__btn--ghost { border-color: var(--lx-line); color: var(--lx-muted) !important; }

@media (max-width: 575px) {
  .lx-hist__head, .lx-hist__foot { padding: 0.85rem 1rem; }
  .lx-hist__products { padding: 0.4rem 1rem; }
  .lx-hist__thumb { width: 56px; height: 56px; }
  .lx-hist__actions { width: 100%; }
  .lx-hist__btn { flex: 1 1 auto; justify-content: center; }
}

/* Reference header box (always visible) */
.lx-order-ref {
  background: linear-gradient(135deg, var(--lx-surface) 0%, var(--lx-surface-2) 100%) !important;
  border-left: 3px solid var(--lx-gold) !important;
}
.lx-order-ref strong { color: var(--lx-white); font-size: 1.02rem; letter-spacing: 0.01em; }
#order-infos .button-primary,
#order-infos a.button-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--lx-gold) !important; font-weight: 600; border: 1px solid rgba(200,166,70,0.4);
  border-radius: var(--lx-r-pill); padding: 0.4rem 1.1rem; transition: all var(--lx-t-base) var(--lx-ease);
}
#order-infos .button-primary:hover { background: var(--lx-gold-dim); border-color: var(--lx-gold); }

/* Carrier / payment method list → clean rows */
.lx-order-meta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.lx-order-meta li { display: flex; align-items: baseline; gap: 0.55rem; color: var(--lx-text); }
.lx-order-meta li strong {
  color: var(--lx-muted); font-weight: 600; letter-spacing: 0.02em;
  min-width: 130px; flex: 0 0 auto;
}
.lx-order-meta li a { color: var(--lx-gold) !important; }

/* Address cards */
#delivery-address, #invoice-address {
  height: 100%;
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  transition: border-color var(--lx-t-base) var(--lx-ease), transform var(--lx-t-base) var(--lx-ease);
}
#delivery-address:hover, #invoice-address:hover { border-color: rgba(200,166,70,0.35) !important; transform: translateY(-2px); }
#delivery-address h4, #invoice-address h4 {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--lx-white); font-size: 1rem; margin-bottom: 0.85rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--lx-line);
}
#delivery-address h4::before { font-family: 'Material Icons'; content: "\e0c8"; color: var(--lx-gold); font-size: 20px; } /* home */
#invoice-address h4::before { font-family: 'Material Icons'; content: "\e8b0"; color: var(--lx-gold); font-size: 20px; } /* receipt */
#delivery-address address, #invoice-address address { color: var(--lx-muted); line-height: 1.7; margin: 0; font-style: normal; }

/* Product / totals table */
#order-products, .order-detail-content table, #order-detail-content table { }
.page-order-detail table, #content table.table {
  border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--lx-r-md);
}
.page-order-detail table thead th, #content table.table thead th {
  background: var(--lx-surface-2) !important; color: var(--lx-gold) !important;
  text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; font-weight: 700;
  border-bottom: 1px solid var(--lx-line-strong) !important;
}
.page-order-detail table td, #content table.table td { border-color: var(--lx-line) !important; color: var(--lx-text); vertical-align: middle; }
.page-order-detail table tbody tr:hover td { background: rgba(255,255,255,0.02); }
/* emphasise the grand total row */
.page-order-detail table tfoot tr:last-child td,
.page-order-detail table tr.order_total_price td,
#content table.table tr:last-child td strong { color: var(--lx-gold) !important; font-weight: 700; }
.page-order-detail .product-line-ref, .page-order-detail small { color: var(--lx-faint); }

/* "Add a message" panel */
#order-detail-content #new_message, #order-message-form, .order-message-form,
form[action*="order-detail"] { }
#content .table + form, #new-message, .messages-block {  }
.page-order-detail form textarea,
.page-order-detail form select {
  background: var(--lx-surface-2) !important; border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important; border-radius: var(--lx-r-md);
}
.page-order-detail form textarea:focus, .page-order-detail form select:focus {
  border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px var(--lx-gold-dim) !important;
}

/* Bottom nav buttons (Volver / Inicio) */
.page-order-detail .footer_links a, .page-customer-account .footer_links a {
  border: 1px solid var(--lx-line) !important; border-radius: var(--lx-r-pill);
  transition: all var(--lx-t-base) var(--lx-ease);
}
.page-order-detail .footer_links a:hover, .page-customer-account .footer_links a:hover {
  border-color: var(--lx-gold) !important; color: var(--lx-gold) !important;
}

/* --- Breadcrumb hidden across order/account sub-pages --- */
.page-history .breadcrumb, #history .breadcrumb,
.page-order-detail .breadcrumb, #order-detail .breadcrumb,
.page-order-slip .breadcrumb, .page-order-return .breadcrumb,
.page-order-follow .breadcrumb, .page-guest-tracking .breadcrumb,
.page-discount .breadcrumb,
.page-addresses .breadcrumb, #addresses .breadcrumb,
.page-address .breadcrumb, #address .breadcrumb,
.page-identity .breadcrumb, #identity .breadcrumb,
.page-order-confirmation .breadcrumb { display: none !important; }

/* --- Order history + detail --- */
#history .order,
#history .orders,
.page-history .order { color: var(--lx-text) !important; }
.reorder-link { color: var(--lx-gold) !important; }
.label-pill { border-radius: var(--lx-r-pill); }
#order-detail .box,
.order-detail-content,
#order-detail .card,
#order-detail .order-items {
  background: var(--lx-surface) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-text) !important;
  border-radius: var(--lx-r-lg);
}
#order-detail h3,
#order-detail .h3,
.order-line .h4 { color: var(--lx-white) !important; }

/* --- Addresses: professional buttons in keeping with the theme --- */
/* "Create new address" → dashed card that turns solid gold on hover */
.addresses-footer { margin-top: 1.25rem; }
.addresses-footer a[data-link-action="add-address"],
.addresses-footer > a {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: center; gap: 0.5rem;
  width: auto !important; height: auto !important; min-height: 0 !important;
  color: var(--lx-gold) !important; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border: 1px dashed var(--lx-line-strong); border-radius: var(--lx-r-md);
  transition: border-color var(--lx-t-base) var(--lx-ease), background var(--lx-t-base) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
}
.addresses-footer a[data-link-action="add-address"]:hover,
.addresses-footer > a:hover {
  border-color: var(--lx-gold) !important; border-style: solid;
  background: var(--lx-gold-dim) !important; transform: translateY(-2px);
}
.addresses-footer a .material-icons { color: currentColor !important; font-size: 20px; }
/* neutralise the classic theme's offsets that misalign the "+" and the text */
.page-addresses .addresses-footer a span,
.addresses-footer a span {
  margin-top: 0 !important; font-size: 1rem; line-height: 1; vertical-align: middle;
}
.page-addresses .addresses-footer a i,
.page-addresses .addresses-footer a .material-icons {
  font-size: 20px !important; margin: 0 !important; line-height: 1 !important;
}

/* Address card Update / Delete → pill buttons */
.address .address-footer,
.address-footer {
  display: flex !important; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lx-line);
}
.address .address-footer a,
.address-footer a {
  display: inline-flex !important; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.15rem; border-radius: var(--lx-r-pill);
  border: 1px solid var(--lx-line-strong);
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
  color: var(--lx-gold) !important;
  transition: border-color var(--lx-t-base) var(--lx-ease), color var(--lx-t-base) var(--lx-ease), background var(--lx-t-base) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
}
.address .address-footer a .material-icons,
.address-footer a .material-icons { color: currentColor !important; font-size: 16px; }
/* Update → gold fill on hover */
.address .address-footer a[data-link-action="edit-address"]:hover,
.address-footer a[data-link-action="edit-address"]:hover {
  border-color: var(--lx-gold); background: var(--lx-gold-dim); color: var(--lx-gold) !important; transform: translateY(-1px);
}
/* Delete → muted, red destructive on hover */
.address .address-footer a[data-link-action="delete-address"],
.address-footer a[data-link-action="delete-address"],
.address-footer a[href*="delete"] { color: var(--lx-muted) !important; }
.address .address-footer a[data-link-action="delete-address"]:hover,
.address-footer a[data-link-action="delete-address"]:hover,
.address-footer a[href*="delete"]:hover {
  border-color: #e0245e !important; color: #e0245e !important; background: rgba(224, 36, 94, 0.1); transform: translateY(-1px);
}

/* Addresses page: drop the englobing container box, keep the address cards floating */
.page-customer-account #content:has(.addresses-footer) {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}

/* ==========================================================================
   MOBILE CATALOG (TOPCINTO) — 2-col grid · sort label · collapsible nav menu
   ========================================================================== */

/* ---- Two products per row on phones (default theme showed only one) ---- */
@media (max-width: 575.98px) {
  #js-product-list .products.row,
  .featured-products .products.row { margin-left: -6px !important; margin-right: -6px !important; }
  #js-product-list .products > .js-product,
  #js-product-list .products > .product,
  .products > .js-product.product {
    flex: 0 0 50% !important; max-width: 50% !important;
    padding-left: 6px !important; padding-right: 6px !important;
  }
  /* tighten the miniature so two fit cleanly */
  .product-miniature .product-title a { font-size: 0.82rem; line-height: 1.25; }
  .product-miniature .price { font-size: 0.95rem; }
  .product-miniature .product-flags .product-flag,
  .product-miniature .product-flag { font-size: 0.62rem !important; padding: 3px 8px !important; }
  .product-miniature .highlighted-informations,
  .product-miniature .variant-links { display: none; }
}

/* ---- Sort area: robust layout below desktop (tablet + mobile) — never overflows.
   The Bootstrap .row negative margins pushed the flex-end content past the
   viewport; neutralise them and stack the translated label + full-width dropdown. ---- */
@media (max-width: 991.98px) {
  #js-product-list .products-selection { margin-left: 0 !important; margin-right: 0 !important; }
  #js-product-list .products-selection > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .sort-by-row {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }
  .sort-by-row .sort-by,
  .sort-by-row .sort-by.hidden-sm-down {
    display: block !important;
    flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
    margin: 0 0 6px !important; padding: 0 !important;
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--lx-muted); text-align: left; white-space: normal;
  }
  .sort-by-row .products-sort-order {
    flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
}

/* ---- Category + brand navigation as a compact collapsible menu (mobile) ---- */
.lx-navtoggle { display: none; }
@media (max-width: 767.98px) {
  .lx-navtoggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin: 0 0 1rem; padding: 0.85rem 1.1rem;
    background: var(--lx-surface); border: 1px solid var(--lx-line);
    border-radius: var(--lx-r-lg); color: var(--lx-white);
    font-weight: 600; letter-spacing: 0.02em; font-size: 0.92rem; cursor: pointer;
    transition: border-color var(--lx-t-fast) var(--lx-ease);
  }
  .lx-navtoggle:hover { border-color: var(--lx-gold); }
  .lx-navtoggle__label { display: inline-flex; align-items: center; gap: 0.55rem; }
  .lx-navtoggle__label svg { width: 20px; height: 20px; color: var(--lx-gold); }
  .lx-navtoggle__caret { width: 18px; height: 18px; color: var(--lx-gold);
    transition: transform var(--lx-t-base) var(--lx-ease); }
  #left-column.lx-open .lx-navtoggle__caret { transform: rotate(180deg); }

  /* collapse the nav blocks by default; expand when open */
  #left-column .block-categories,
  #left-column #search_filters_brands {
    overflow: hidden; max-height: 0; opacity: 0;
    margin-top: 0 !important; margin-bottom: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    border-width: 0 !important;
    transition: max-height var(--lx-t-base) var(--lx-ease),
                opacity var(--lx-t-base) var(--lx-ease),
                padding var(--lx-t-base) var(--lx-ease);
  }
  #left-column.lx-open .block-categories,
  #left-column.lx-open #search_filters_brands {
    max-height: 640px; opacity: 1;
    margin-bottom: 0.85rem !important;
    padding-top: 1rem !important; padding-bottom: 1rem !important;
    border-width: 1px !important;
  }
  #left-column { margin-bottom: 0.4rem; }
  /* keep the faceted-filter wrapper hidden on mobile (it already is) */
  #left-column #search_filters_wrapper { display: none !important; }
}