/* ============================================================
   Elvaro Theme — Main Stylesheet
   Defines all components (tokens.css is an enqueued dependency —
   never @import it here: the unversioned import dodges cache-busting).
   ============================================================ */

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);   /* dark canvas so no white edge peeks through at fractional zoom / sub-pixel rounding */
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 700; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 700; }

p {
  margin: 0;
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 13px;
}

::selection {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-yellow-ring);
}

/* ============================================================
   Layout utilities
   ============================================================ */
.elvaro-container {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-d);
  padding-right: var(--gutter-d);
}

@media (max-width: 979px) {
  .elvaro-container {
    padding-left: var(--gutter-t);
    padding-right: var(--gutter-t);
  }
}

@media (max-width: 719px) {
  .elvaro-container {
    padding-left: var(--gutter-m);
    padding-right: var(--gutter-m);
  }
}

.elvaro-container--wide    { max-width: var(--container-wide); }
.elvaro-container--narrow  { max-width: var(--container-narrow); }

/* Stack — vertical rhythm between direct children */
.elvaro-stack > * + * { margin-block-start: var(--sp-4); }
.elvaro-stack--sm > * + * { margin-block-start: var(--sp-2); }
.elvaro-stack--lg > * + * { margin-block-start: var(--sp-6); }

/* Cluster — horizontal flex with wrapping */
.elvaro-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Grid — responsive column grids */
.elvaro-grid { display: grid; gap: var(--sp-4); }
.elvaro-grid--cols-2 { grid-template-columns: minmax(0, 1fr); }
.elvaro-grid--cols-3 { grid-template-columns: minmax(0, 1fr); }
.elvaro-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 979px) {
  .elvaro-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .elvaro-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elvaro-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .elvaro-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Section — consistent vertical padding */
.elvaro-section    { padding-block: var(--sp-12); }
.elvaro-section--sm { padding-block: var(--sp-6); }
.elvaro-section--lg { padding-block: var(--sp-20); }

/* ============================================================
   Typography utilities
   ============================================================ */
.elvaro-overline {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}

.elvaro-price {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 600;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: all var(--dur-base) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
}

.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: 13px; }
.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-button); }

.btn-primary {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  box-shadow: var(--shadow-button);
}
.btn-primary:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-0.5px);
}
.btn-primary:active {
  background: var(--brand-yellow-press);
  transform: translateY(1px);
}
.btn-primary:focus-visible {
  box-shadow: var(--shadow-yellow-ring);
}

.btn-secondary {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid rgba(var(--fg-rgb), 0.18);
}
.btn-secondary:hover {
  background: rgba(var(--fg-rgb), 0.04);
  border-color: rgba(var(--fg-rgb), 1);
}
.btn-secondary:focus-visible {
  box-shadow: var(--shadow-yellow-ring);
}

.btn-ghost {
  background: rgba(var(--fg-rgb), 0.04);
  color: var(--fg-1);
}
.btn-ghost:hover {
  background: rgba(var(--fg-rgb), 0.08);
}

.btn-vip {
  background: var(--surface-2);
  color: var(--brand-gold-hi);
  border: 1px solid rgba(232,184,95,0.45);
}
.btn-vip:hover {
  background: rgba(232,184,95,0.08);
}

.btn:disabled {
  background: var(--surface-1);
  color: var(--fg-4);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* WooCommerce button overrides */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-body);
  transition: background var(--dur-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--brand-yellow-hover);
  color: var(--fg-on-yellow);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--brand-yellow);
}
.woocommerce a.button.alt:hover {
  background: var(--brand-yellow-hover);
}

/* ============================================================
   Cards
   ============================================================ */
.elvaro-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.elvaro-card:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}

/* ============================================================
   Chip / Badge utilities
   ============================================================ */
.elvaro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
}

.elvaro-chip--success {
  background: var(--success-soft);
  color: var(--success);
}
.elvaro-chip--warning {
  background: var(--warning-soft);
  color: var(--warning);
}
.elvaro-chip--danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.elvaro-chip--neutral {
  background: var(--surface-4);
  color: var(--fg-2);
}

.elvaro-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.elvaro-chip--success .elvaro-chip__dot { background: var(--success); }
.elvaro-chip--danger .elvaro-chip__dot { background: var(--danger); }
.elvaro-chip--warning .elvaro-chip__dot { background: var(--warning); }

/* ============================================================
   Condition badges (plugin-rendered)
   Selector: .elvaro-condition-badge [data-condition="..."]
   ============================================================ */
.elvaro-condition-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.elvaro-condition-badge[data-condition="новый"] {
  background: var(--cond-new-bg);
  color: var(--cond-new-fg);
}
.elvaro-condition-badge[data-condition="восстановленный"] {
  background: var(--cond-refurb-bg);
  color: var(--cond-refurb-fg);
}
.elvaro-condition-badge[data-condition="проверенный"] {
  background: var(--cond-tested-bg);
  color: var(--cond-tested-fg);
}
.elvaro-condition-badge[data-condition="не работает"] {
  background: var(--cond-broken-bg);
  color: var(--cond-broken-fg);
}
.elvaro-condition-badge[data-condition="отличное"] {
  background: var(--cond-excellent-bg);
  color: var(--cond-excellent-fg);
}
.elvaro-condition-badge[data-condition="хорошее"] {
  background: var(--cond-good-bg);
  color: var(--cond-good-fg);
}
/* Neutral fallback bg/fg for any badge whose condition has no specific
   [data-condition] rule above (the 6 canonical conditions override this). */
.elvaro-condition-badge {
  background: var(--surface-1);
  color: var(--fg-2);
}

/* Position badge absolutely inside card image containers */
.elvaro-rental-card-v2__img .elvaro-condition-badge,
.elvaro-product-card__image-wrap .elvaro-condition-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
}

/* ============================================================
   Form elements
   ============================================================ */
.elvaro-input,
/* EXCLUDE checkbox/radio: they live inside .woocommerce-input-wrapper too, and a
   bare `input` here painted them as text fields (padding 10/12 → border-box floor
   ~26px, appearance:none, width:100%) — the recurring "checkbox is huge / overlaps
   the label / won't align" bug. Native checkbox/radio styling is handled below. */
.woocommerce-input-wrapper input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  background: var(--surface-1);
  border: 1px solid rgba(var(--fg-rgb), 0.10);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--fg-1);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  appearance: none;
  -webkit-appearance: none;
}

.elvaro-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--fg-4);
}

.elvaro-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--brand-yellow);
}

/* Range slider */
input[type="range"] {
  accent-color: var(--brand-yellow);
}

/* WooCommerce form rows */
.woocommerce form .form-row label {
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: var(--surface-1);
  border: 1px solid rgba(var(--fg-rgb), 0.10);
  border-radius: 8px;
  color: var(--fg-1);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--danger);
}

/* ============================================================
   Top utility bar
   ============================================================ */
.elvaro-topbar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--fg-2);
}

.elvaro-topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--gutter-d);
  max-width: var(--container);
  margin: 0 auto;
}

.elvaro-topbar__left,
.elvaro-topbar__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.elvaro-topbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.elvaro-topbar__item:hover { color: var(--fg-1); }
.elvaro-topbar__item svg { color: var(--brand-yellow); }

@media (max-width: 719px) {
  .elvaro-topbar {
    display: none;
  }
}

/* ============================================================
   Main header
   ============================================================ */
.elvaro-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--dur-base) var(--ease-standard),
              backdrop-filter var(--dur-base) var(--ease-standard);
}

.elvaro-header.is-scrolled {
  background: rgba(var(--bg-rgb), 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Logo */
.elvaro-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--fg-1);
  text-decoration: none;
  flex-shrink: 0;
}

.elvaro-logo__badge {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

/* Primary nav */
.elvaro-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  overflow: hidden;
}

.elvaro-nav ul,
.elvaro-nav .elvaro-nav__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.elvaro-nav li {
  list-style: none;
  margin: 0;
}

.elvaro-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}

.elvaro-nav a:hover,
.elvaro-nav a.current-menu-item,
.elvaro-nav a[aria-current="page"] {
  color: var(--brand-yellow);
  font-weight: 700;
}

.elvaro-nav a.current-menu-item::after,
.elvaro-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-yellow);
}

/* Hamburger (mobile) */
.elvaro-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.elvaro-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg-1);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.elvaro-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.elvaro-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.elvaro-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.elvaro-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--bg);
  padding: 80px var(--gutter-m) var(--gutter-m);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-standard);
}

.elvaro-mobile-nav.is-open {
  transform: translateX(0);
}

.elvaro-mobile-nav a {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-1);
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.elvaro-mobile-nav a:hover { color: var(--brand-yellow); }

@media (max-width: 979px) {
  .elvaro-nav { display: none; }
  .elvaro-hamburger { display: flex; }
  .elvaro-mobile-nav { display: block; }
}

/* ============================================================
   Hero / Banner
   ============================================================ */
.elvaro-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-1) 100%);
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.04);
}

.elvaro-hero__social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--fg-2);
}

/* ============================================================
   Trust strip
   ============================================================ */
.elvaro-trust-strip {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  box-shadow: var(--shadow-card);
  margin-top: 0;
}

.elvaro-trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--trust-item-gap, 14px);
  min-width: 0;
}

.elvaro-trust-item__icon {
  width: var(--trust-icon-sz, 42px);
  height: var(--trust-icon-sz, 42px);
  border-radius: calc(var(--trust-icon-sz, 42px) * 0.24);
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-yellow);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.elvaro-trust-item:hover .elvaro-trust-item__icon {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  transform: scale(1.1);
}

.elvaro-trust-item__title {
  font-size: var(--trust-title-sz, 14px);
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.3;
  transition: color 0.2s ease;
}

.elvaro-trust-item:hover .elvaro-trust-item__title {
  color: var(--fg-1);
}

.elvaro-trust-item__sub {
  font-size: var(--trust-sub-sz, 11px);
  color: var(--fg-3);
  margin-top: 4px;
  line-height: 1.45;
}

@media (min-width: 720px) {
  .elvaro-trust-strip {
    grid-template-columns: 1fr 1fr;
    padding: 22px 28px;
    column-gap: var(--trust-col-gap, 48px);
    row-gap: 24px;
  }
  .elvaro-trust-item:nth-child(even) {
    margin-left: calc(-1 * var(--trust-col-gap, 48px) / 2);
    border-left: 1px solid var(--hairline-strong);
    padding-left: calc(var(--trust-col-gap, 48px) / 2);
  }
}

@media (min-width: 1180px) {
  .elvaro-trust-strip { grid-template-columns: repeat(4, 1fr); column-gap: 0; row-gap: 0; }
  .elvaro-trust-item { padding-left: var(--trust-bpad, 24px); border-left: 1px solid var(--hairline-strong); margin-left: 0; }
  .elvaro-trust-item:first-child { padding-left: 0; border-left: none; }
}

/* ============================================================
   Section headings (shared)
   ============================================================ */
.elvaro-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.elvaro-section-head h2 {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  font-weight: 800;
}

.elvaro-section-head__link {
  color: var(--brand-yellow);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.elvaro-section-head__link:hover { text-decoration: underline; }

/* ============================================================
   Popular categories
   ============================================================ */
.elvaro-categories {
  margin-top: var(--sp-16);
}

/* Popular rentals and popular tools sections follow the same rhythm */
.elvaro-popular-rentals,
.elvaro-popular-tools {
  margin-top: var(--sp-16);
}

.elvaro-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 720px) {
  .elvaro-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .elvaro-categories__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.elvaro-category-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}

.elvaro-category-card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-3);
}

/* Per-icon glow colour (--glow-c = space-sep RGB) and icon tint (--ico) */
.elvaro-category-card__icon[data-icon="drill"]     { --glow-c: 247 160 30;   --ico: #F7A820; }
.elvaro-category-card__icon[data-icon="grinder"]   { --glow-c: 255 120 60;   --ico: #FF783C; }
.elvaro-category-card__icon[data-icon="wrench"]    { --glow-c: 220 120 30;   --ico: #DC7820; }
.elvaro-category-card__icon[data-icon="battery"]   { --glow-c: 247 183 3;    --ico: #F7B703; }
.elvaro-category-card__icon[data-icon="bolt"]      { --glow-c: 255 220 60;   --ico: #FFDC3C; }
.elvaro-category-card__icon[data-icon="zap"]       { --glow-c: 100 195 255;  --ico: #64C3FF; }
.elvaro-category-card__icon[data-icon="leaf"]      { --glow-c: 72 190 72;    --ico: #48BE48; }
.elvaro-category-card__icon[data-icon="ruler"]     { --glow-c: 140 175 255;  --ico: #8CAFFF; }
.elvaro-category-card__icon[data-icon="shield"]    { --glow-c: 80 140 255;   --ico: #5080FF; }
.elvaro-category-card__icon[data-icon="lock"]      { --glow-c: 80 140 255;   --ico: #5080FF; }
.elvaro-category-card__icon[data-icon="crown"]     { --glow-c: 255 210 50;   --ico: #FFD232; }
.elvaro-category-card__icon[data-icon="award"]     { --glow-c: 255 210 50;   --ico: #FFD232; }
.elvaro-category-card__icon[data-icon="package"]   { --glow-c: 200 155 95;   --ico: #C89B5F; }
.elvaro-category-card__icon[data-icon="truck"]     { --glow-c: 200 155 95;   --ico: #C89B5F; }
.elvaro-category-card__icon[data-icon="cart"]      { --glow-c: 247 183 3;    --ico: #F7B703; }
.elvaro-category-card__icon[data-icon="tag"]       { --glow-c: 180 130 255;  --ico: #B482FF; }
.elvaro-category-card__icon[data-icon="globe"]     { --glow-c: 60 200 200;   --ico: #3CC8C8; }
.elvaro-category-card__icon[data-icon="pin"]       { --glow-c: 255 90 90;    --ico: #FF5A5A; }
.elvaro-category-card__icon[data-icon="headphones"]{ --glow-c: 180 130 255;  --ico: #B482FF; }
.elvaro-category-card__icon[data-icon="phone"]     { --glow-c: 72 190 100;   --ico: #48BE64; }
.elvaro-category-card__icon[data-icon="clock"]     { --glow-c: 140 175 255;  --ico: #8CAFFF; }
.elvaro-category-card__icon[data-icon="calendar"]  { --glow-c: 140 175 255;  --ico: #8CAFFF; }
.elvaro-category-card__icon[data-icon="search"]    { --glow-c: 200 200 200;  --ico: #C8C8C8; }
.elvaro-category-card__icon[data-icon="user"]      { --glow-c: 180 130 255;  --ico: #B482FF; }
.elvaro-category-card__icon[data-icon="arrow"]     { --glow-c: 247 183 3;    --ico: #F7B703; }

.elvaro-category-card__icon {
  aspect-ratio: 5/3;
  background:
    radial-gradient(55% 70% at 50% 62%, rgb(var(--glow-c, 247 183 3) / 0.22) 0%, rgb(var(--glow-c, 247 183 3) / 0.05) 44%, transparent 72%),
    linear-gradient(170deg, #171a1d 0%, #0d1013 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.elvaro-category-card:hover .elvaro-category-card__icon {
  background:
    radial-gradient(55% 70% at 50% 62%, rgb(var(--glow-c, 247 183 3) / 0.38) 0%, rgb(var(--glow-c, 247 183 3) / 0.10) 44%, transparent 72%),
    linear-gradient(170deg, #171a1d 0%, #0d1013 100%);
}

.elvaro-category-card__icon .elv-icon {
  width: 28px;
  height: 28px;
  color: var(--ico, rgba(247, 183, 3, 0.80));
  opacity: 0.82;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.elvaro-category-card:hover .elvaro-category-card__icon .elv-icon {
  transform: scale(1.15);
  opacity: 1;
}

.elvaro-category-card__image {
  aspect-ratio: 4/3;
  background: radial-gradient(70% 70% at 50% 60%, var(--surface-3) 0%, var(--surface-1) 80%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.elvaro-category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elvaro-category-card__name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg-1);
  line-height: 1.35;
}

.elvaro-category-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: auto;
}

.elvaro-category-card__arrow {
  color: var(--brand-yellow);
}

/* ============================================================
   Featured rental block (homepage)
   ============================================================ */
.elvaro-featured-rental {
  margin-top: var(--sp-16);
}

.elvaro-rental-showcase {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  box-shadow: var(--shadow-card);
}

.elvaro-rental-showcase__img {
  aspect-ratio: 1/1;
  background: radial-gradient(70% 70% at 50% 50%, var(--surface-4) 0%, var(--bg) 80%);
  border-radius: 10px;
  overflow: hidden;
}

.elvaro-rental-showcase__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elvaro-rental-showcase__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.elvaro-rental-showcase__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--fg-1);
  line-height: 1.2;
}

.elvaro-rental-showcase__sub {
  color: var(--fg-3);
  font-size: 13px;
}

/* Pricing matrix */
.elvaro-pricing-matrix {
  overflow: hidden;
}

.elvaro-pricing-matrix__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.elvaro-pricing-matrix__col-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  text-align: center;
}

.elvaro-pricing-matrix__col-label--vip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--brand-yellow);
}

.elvaro-pricing-matrix__days {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.elvaro-pricing-matrix__day-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.elvaro-pricing-matrix__prices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.elvaro-price-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  background: var(--surface-1);
  border-radius: 8px;
  border: 1px solid var(--hairline);
  font-weight: 800;
  font-size: 18px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.elvaro-price-cell--vip {
  background: rgba(247,183,3,0.06);
  border-color: rgba(247,183,3,0.18);
  color: var(--brand-yellow);
}

.elvaro-rental-showcase__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 720px) {
  .elvaro-rental-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    padding: 24px;
  }
  .elvaro-pricing-matrix { grid-column: 1 / -1; }
  .elvaro-rental-showcase__ctas {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }
  .elvaro-pricing-matrix__days { grid-template-columns: repeat(8, 1fr); }
  .elvaro-pricing-matrix__prices { grid-template-columns: repeat(8, 1fr); }
}

@media (min-width: 1180px) {
  .elvaro-rental-showcase { grid-template-columns: 200px 220px minmax(0, 1fr) 200px; }
  .elvaro-pricing-matrix { grid-column: auto; }
  .elvaro-rental-showcase__ctas {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   VIP Club block (homepage)
   ============================================================ */
.elvaro-vip-block {
  margin-top: var(--sp-16);
  background: radial-gradient(70% 100% at 0% 50%, rgba(232,184,95,0.10), transparent 60%), var(--surface-2);
  border: 1px solid rgba(232,184,95,0.30);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.04) inset, 0 24px 48px -16px rgba(0,0,0,0.85);
}

.elvaro-vip-block__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.elvaro-vip-block__heading h2 {
  font-size: 36px;
  letter-spacing: -0.01em;
}

.elvaro-vip-block__tagline {
  color: var(--fg-2);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 24px;
}

.elvaro-vip-benefits {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 24px;
  justify-content: start;
}

.elvaro-vip-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: var(--fg-2);
  line-height: 1.35;
  max-width: 90px;
}

.elvaro-vip-benefit__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-yellow);
}

.elvaro-vip-block__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--brand-yellow);
  line-height: 1;
  margin-bottom: 14px;
}

.elvaro-vip-block__price-sub {
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 500;
}

/* VIP membership card — styles consolidated in components.css (§20) */
.elvaro-vip-benefits { grid-template-columns: repeat(2, auto); gap: 16px; }

@media (min-width: 640px) {
  .elvaro-vip-block { padding: 36px 40px; }
  .elvaro-vip-benefits { grid-template-columns: repeat(3, auto); gap: 24px; }
}

@media (min-width: 1180px) {
  .elvaro-vip-block { grid-template-columns: 1.4fr auto auto; gap: 36px; }
  .elvaro-vip-benefits { grid-template-columns: repeat(6, auto); }
}

/* ============================================================
   How it works (homepage)
   ============================================================ */
.elvaro-how {
  margin-top: var(--sp-16);
}

.elvaro-how h2 {
  text-align: center;
  margin-bottom: 28px;
  font-size: var(--fs-h3);
}

.elvaro-how__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

.elvaro-how__step-icon {
  display: flex;
  align-items: center;
  color: rgba(var(--fg-rgb), 0.32);
}

.elvaro-how__step {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.elvaro-how__step-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.elvaro-how__step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(247,183,3,0.14);
  color: var(--brand-yellow);
  border: 1px solid rgba(247,183,3,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.elvaro-how__step-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
  line-height: 1.35;
}

.elvaro-how__step-desc {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
}

.elvaro-how__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.elvaro-how__arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid rgba(247,183,3,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-yellow);
}

.elvaro-how__arrow { display: none; }

@media (min-width: 900px) {
  .elvaro-how__steps { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (min-width: 1180px) {
  .elvaro-how__steps { grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr; gap: 0; }
  .elvaro-how__arrow { display: flex; }
}

/* ============================================================
   Bottom trust row (homepage)
   ============================================================ */
.elvaro-bottom-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: var(--sp-20);
}

/* Homepage: separate the benefits row from the "How rental works" steps above.
   The steps block (.elvaro-how) has no margin-bottom and this block no margin-top,
   so without this they sit flush. Scoped to the pairing → no effect on the trust
   row when it is used standalone on other pages. */
.elvaro-how + .elvaro-bottom-trust {
  margin-top: var(--sp-8);
}

.elvaro-bottom-trust-item {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.elvaro-bottom-trust-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-yellow);
}

.elvaro-bottom-trust-item__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.3;
}

.elvaro-bottom-trust-item__sub {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
  line-height: 1.4;
}

@media (min-width: 720px) {
  .elvaro-bottom-trust { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (min-width: 980px) {
  .elvaro-bottom-trust { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Sale catalog CTA banner (elvaro/catalog-sale-cta block)
   ============================================================ */
.elvaro-sale-cta {
  margin-bottom: 24px;
}

.elvaro-sale-cta__inner {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--dur-base) var(--ease-standard);
}

.elvaro-sale-cta__inner:hover {
  border-color: rgba(247, 183, 3, 0.35);
}

.elvaro-sale-cta__left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.elvaro-sale-cta__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-yellow);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.elvaro-sale-cta__icon svg { width: 22px; height: 22px; }
.elvaro-sale-cta__inner:hover .elvaro-sale-cta__icon {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  transform: scale(1.08);
}

.elvaro-sale-cta__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.3;
}

.elvaro-sale-cta__sub {
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 4px;
  line-height: 1.45;
}

.elvaro-sale-cta__stats {
  display: flex;
  gap: 28px;
  align-items: center;
}

.elvaro-sale-cta__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.elvaro-sale-cta__stat-num {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--brand-yellow);
  line-height: 1;
}

.elvaro-sale-cta__stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.elvaro-sale-cta__btn { width: 100%; justify-content: center; }

@media (min-width: 640px) {
  .elvaro-sale-cta__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 32px;
    row-gap: 10px;
    align-items: start;
  }
  .elvaro-sale-cta__left  { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .elvaro-sale-cta__stats { grid-column: 2; grid-row: 1; align-self: flex-end; }
  .elvaro-sale-cta__btn   { grid-column: 2; grid-row: 2; width: auto; justify-content: initial; }
}

@media (min-width: 980px) {
  .elvaro-sale-cta__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .elvaro-sale-cta__left  { align-self: unset; grid-column: unset; grid-row: unset; }
  .elvaro-sale-cta__stats { margin-left: auto; grid-column: unset; grid-row: unset; align-self: unset; }
  .elvaro-sale-cta__btn   { align-self: center; width: auto; justify-content: initial; grid-column: unset; grid-row: unset; }
}

/* ============================================================
   Catalog / Shop archive
   ============================================================ */
/* Rental catalog hero — full-bleed section */
.elvaro-rental-hero {
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  padding: 40px 0 32px;
}

.elvaro-rental-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.elvaro-rental-hero__overline {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-yellow);
}

.elvaro-rental-hero__title {
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.elvaro-rental-hero__sub {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 560px;
}

/* Regular catalog hero — contained */
.elvaro-catalog-hero {
  margin-top: 18px;
}

.elvaro-catalog-hero__title {
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.elvaro-catalog-hero__desc {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 480px;
}

.elvaro-catalog-hero__promo {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-3) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 16px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

@media (max-width: 979px) {
  .elvaro-catalog-hero__promo { display: none; }
}

/* ============================================================
   Catalog Hero v2 — rental + sale variants
   ============================================================ */
.elvaro-catalog-hero-v2 {
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  padding: 36px 0;
  overflow: hidden;
}
.elvaro-catalog-hero-v2__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.elvaro-catalog-hero-v2__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.elvaro-catalog-hero-v2__overline {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-yellow);
  margin: 0;
}
.elvaro-catalog-hero-v2__title {
  font-size: clamp(34px, 5vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.elvaro-catalog-hero-v2__title-yellow {
  color: var(--brand-yellow);
}
.elvaro-catalog-hero-v2__sub {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}
/* Feature icons row — always 3 columns, subtitle wraps inside cell */
.elvaro-catalog-hero-v2__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.elvaro-catalog-hero-v2__feature {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: default;
}
.elvaro-catalog-hero-v2__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(247, 183, 3, 0.12);
  border: 1px solid rgba(247, 183, 3, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-yellow);
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
  flex-shrink: 0;
}
.elvaro-catalog-hero-v2__feature-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}
.elvaro-catalog-hero-v2__feature:hover .elvaro-catalog-hero-v2__feature-icon {
  background: rgba(247, 183, 3, 0.24);
  border-color: rgba(247, 183, 3, 0.4);
  transform: scale(1.1);
}
.elvaro-catalog-hero-v2__feature-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.2;
}
.elvaro-catalog-hero-v2__feature-sub {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}
/* CTA button (sale hero) */
.elvaro-catalog-hero-v2__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
  align-self: flex-start;
  margin-top: 4px;
}
.elvaro-catalog-hero-v2__cta-btn:hover {
  background: #FFD24A;
  transform: translateY(-1px);
}
.elvaro-catalog-hero-v2__cta-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* Right side */
.elvaro-catalog-hero-v2__right {
  display: none;
}
.elvaro-catalog-hero-v2__right-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}
@media (min-width: 720px) {
  .elvaro-catalog-hero-v2 { padding: 44px 0; }
}
@media (min-width: 1180px) {
  .elvaro-catalog-hero-v2__inner {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .elvaro-catalog-hero-v2__left {
    flex: 0 0 46%;
    max-width: 46%;
  }
  .elvaro-catalog-hero-v2__right {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
  }
  .elvaro-catalog-hero-v2__inner--no-right .elvaro-catalog-hero-v2__left {
    flex: unset;
    max-width: 680px;
  }
}
@media (min-width: 980px) {
  .elvaro-catalog-hero-v2 { padding: 52px 0; }
}

/* Hero terminal — scales with viewport */
.elvaro-catalog-hero-v2__terminal {
  font-size: clamp(8px, 1.2vw, 13px);
  max-width: 100%;
}

/* Catalog main content wrapper */
.elvaro-catalog-main {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-10);
}

/* Catalog layout */
.elvaro-catalog-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 979px) {
  .elvaro-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .elvaro-catalog-sidebar {
    display: none;
  }
  .elvaro-catalog-sidebar.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow-y: auto;
    padding: 60px var(--gutter-m) var(--gutter-m);
  }
}

/* Filter sidebar */
.elvaro-catalog-sidebar {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  height: fit-content;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 80px;
}

.elvaro-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.elvaro-sidebar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--fg-1);
}

.elvaro-sidebar__reset {
  font-size: 12px;
  color: var(--brand-yellow);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
}

.elvaro-filter-section {
  border-top: 1px solid var(--hairline);
  padding: 14px 0;
}

.elvaro-filter-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 12px;
}

.elvaro-filter-section__label {
  font-weight: 700;
  font-size: 13px;
  color: var(--fg-1);
}

.elvaro-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
}

.elvaro-filter-row:hover .elvaro-filter-label { color: var(--fg-1); }

.elvaro-filter-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(var(--fg-rgb), 0.24);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-standard);
}

.elvaro-filter-checkbox.is-checked {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.elvaro-filter-label {
  font-size: 13px;
  color: var(--fg-2);
}

.elvaro-filter-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* Elvaro condition filter (plugin-rendered) */
.elvaro-condition-filter {
  margin-bottom: 16px;
}

.elvaro-condition-filter label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  margin-right: 8px;
}

.elvaro-condition-filter select {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--fg-1);
  padding: 8px 12px;
  font-size: 13px;
}

/* ---- Filter bar (above product grid, both catalog types) ---- */
.elvaro-filter-bar {
  margin-top: 24px;
  margin-bottom: 8px;
}

/* Mobile toggle button — hidden on desktop */
.elvaro-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

.elvaro-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Filter panel — flex row on desktop, full-screen slide-in on mobile */
.elvaro-filter-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

/* Head and foot only shown on mobile */
.elvaro-filter-panel__head { display: none; }
.elvaro-filter-panel__foot { display: none; }

/* Body — display:contents makes its children direct flex children of the panel */
.elvaro-filter-panel__body { display: contents; }

.elvaro-filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Category group always occupies its own full-width row on desktop */
@media (min-width: 980px) {
  .elvaro-filter-bar__group--cats { flex-basis: 100%; }
}

.elvaro-filter-bar__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Filter chips */
.elvaro-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.elvaro-filter-chip:hover {
  background: var(--surface-3);
  color: var(--fg-1);
}

.elvaro-filter-chip--active {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border-color: var(--brand-yellow);
  font-weight: 700;
}

/* Price range slider */
.elvaro-price-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.elvaro-price-slider__label {
  font-size: 13px;
  color: var(--fg-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.elvaro-price-slider__vals {
  font-size: 13px;
  color: var(--fg-1);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dual-range track */
.elvaro-range {
  position: relative;
  flex: 1 1 140px;
  min-width: 140px;
  height: 20px;
  display: flex;
  align-items: center;
}

.elvaro-range__track,
.elvaro-range__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}
.elvaro-range__track { background: rgba(var(--fg-rgb), 0.18); width: 100%; }
.elvaro-range__fill  { background: var(--brand-yellow); }

.elvaro-range__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  outline: none;
  z-index: 1;
}
.elvaro-range__input::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.elvaro-range__input::-moz-range-track              { background: transparent; height: 4px; border: none; }
.elvaro-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  margin-top: -7px; /* center 18px thumb on 4px track: -(18-4)/2 */
  border-radius: 50%;
  background: var(--brand-yellow);
  border: 2.5px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  cursor: pointer;
  transition: box-shadow .15s;
}
.elvaro-range__input::-moz-range-thumb {
  pointer-events: all;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-yellow);
  border: 2.5px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  cursor: pointer;
  transition: box-shadow .15s;
}
.elvaro-range__input:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(247,183,3,.4); }
.elvaro-range__input:focus::-moz-range-thumb     { box-shadow: 0 0 0 3px rgba(247,183,3,.4); }

.elvaro-price-filter__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--fg-3);
  font-size: 12px;
  text-decoration: none;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.elvaro-price-filter__clear:hover {
  background: var(--surface-3);
  color: var(--fg-1);
}

/* Backdrop overlay (mobile) */
.elvaro-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
}

.elvaro-filter-overlay.is-open { display: block; }

/* Prevent body scroll when overlay is open */
@media (max-width: 979px) {
  body.elvaro-filters-open { overflow: hidden; }
}

/* ---- Mobile: full-screen slide-in panel ---- */
@media (max-width: 979px) {
  .elvaro-filter-toggle { display: flex; }

  .elvaro-filter-panel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--bg);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .elvaro-filter-panel.is-open { transform: translateX(0); }

  .elvaro-filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
  }

  .elvaro-filter-panel__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-1);
  }

  .elvaro-filter-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg-1);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Restore box model for body on mobile */
  .elvaro-filter-panel__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .elvaro-filter-panel__body .elvaro-filter-bar__group {
    padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .elvaro-filter-panel__body .elvaro-price-slider-wrap {
    padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .elvaro-filter-panel__body .elvaro-price-slider-wrap .elvaro-range {
    flex-basis: 100%;
    min-width: 0;
    order: 10;
  }

  .elvaro-filter-panel .elvaro-filter-bar__toolbar {
    margin-left: 0;
    padding: 12px 20px;
    border-bottom: 1px solid var(--hairline);
    width: 100%;
    flex-shrink: 0;
    gap: 12px;
    justify-content: space-between;
  }

  .elvaro-filter-panel__foot {
    display: block;
    padding: 16px 20px;
    flex-shrink: 0;
    margin-top: auto;
  }

  .elvaro-filter-panel__apply { width: 100%; justify-content: center; }
}

/* ---- Catalog container (replaces sidebar+main grid) ---- */
.elvaro-catalog-container {
  padding-top: 16px;
}

/* ---- Rental list layout ---- */
.elvaro-rental-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.elvaro-rental-card {
  display: grid;
  grid-template-columns: 200px 240px minmax(0, 1fr) 200px;
  gap: 24px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  align-items: start;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
}

.elvaro-rental-card:hover {
  border-color: var(--hairline-strong);
}

.elvaro-rental-card__img-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-3);
  position: relative;
}

.elvaro-rental-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elvaro-rental-card__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.elvaro-rental-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.elvaro-rental-card__title a {
  color: var(--fg-1);
  text-decoration: none;
}

.elvaro-rental-card__title a:hover {
  color: var(--brand-yellow);
}

.elvaro-rental-card__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success);
  margin: 0;
}

.elvaro-rental-card__stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.elvaro-rental-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elvaro-rental-card__features li {
  font-size: 12px;
  color: var(--fg-2);
  padding-left: 14px;
  position: relative;
}

.elvaro-rental-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand-yellow);
  font-size: 11px;
}

.elvaro-rental-card__pricing {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

/* Price table (Regular / VIP column) */
.elvaro-price-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.elvaro-price-table--vip {
  background: rgba(247, 183, 3, 0.04);
  border-color: rgba(247, 183, 3, 0.25);
}

.elvaro-price-table__head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-2);
  border-bottom: 1px solid var(--hairline);
}

.elvaro-price-table--vip .elvaro-price-table__head {
  color: var(--brand-yellow);
  border-bottom-color: rgba(247, 183, 3, 0.15);
}

.elvaro-price-table__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
}

.elvaro-price-table__row:first-of-type {
  border-top: none;
}

.elvaro-price-table--vip .elvaro-price-table__row {
  border-top-color: rgba(247, 183, 3, 0.08);
}

.elvaro-price-table__period {
  color: var(--fg-2);
  font-size: 12px;
}

.elvaro-price-table__price {
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.elvaro-price-table__price--vip {
  color: var(--brand-yellow);
}

.elvaro-price-table__foot {
  margin-top: auto;
  padding: 9px 14px;
  font-size: 11px;
  color: var(--fg-3);
  border-top: 1px solid var(--hairline);
}

.elvaro-price-table__foot--vip {
  color: var(--success);
  border-top-color: rgba(247, 183, 3, 0.08);
}

/* Rental card CTA column */
.elvaro-rental-card__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding-top: 4px;
}

.elvaro-rental-card__vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: var(--success-soft);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  text-align: center;
}

.elvaro-rental-card__vip-promo {
  font-size: 11px;
  color: var(--brand-yellow);
  text-align: center;
  text-decoration: none;
}

.elvaro-rental-card__rent-btn {
  width: 100%;
  text-align: center;
}

.elvaro-rental-card__more-link {
  font-size: 13px;
  color: var(--fg-2);
  text-align: center;
  text-decoration: none;
}

.elvaro-rental-card__more-link:hover {
  color: var(--fg-1);
}

/* Rental card responsive */
@media (max-width: 1179px) {
  .elvaro-rental-card {
    grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .elvaro-rental-card__info { grid-column: 2; }
  .elvaro-rental-card__pricing { grid-column: 1 / -1; grid-row: 2; }
  .elvaro-rental-card__cta { grid-column: 3; grid-row: 1; }
}

@media (max-width: 719px) {
  .elvaro-rental-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .elvaro-rental-card__img-wrap { aspect-ratio: 16 / 9; }
  .elvaro-rental-card__info { grid-column: 1; grid-row: auto; }
  .elvaro-rental-card__pricing { grid-column: 1; grid-row: auto; }
  .elvaro-rental-card__cta { grid-column: 1; grid-row: auto; }
}

/* Grid toolbar */
.elvaro-grid-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.elvaro-grid-toolbar__count {
  color: var(--fg-2);
  font-size: 14px;
}

.elvaro-grid-toolbar__count strong {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.elvaro-grid-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-2);
}

.elvaro-grid-toolbar__sort select {
  appearance: none;
  background: var(--surface-1);
  color: var(--fg-1);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
}

/* WooCommerce products grid */
.woocommerce .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 1179px) {
  .woocommerce .products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 979px) {
  .woocommerce .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 639px) {
  .woocommerce .products { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Rental catalog: 1→2→3 cols; minmax(0,1fr) prevents implicit auto-min from overflowing container */
.woocommerce .elvaro-popular-grid--rental.products { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 640px) {
  .woocommerce .elvaro-popular-grid--rental.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 980px) {
  .woocommerce .elvaro-popular-grid--rental.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ============================================================
   Product card (WC content-product.php)
   ============================================================ */
.elvaro-product-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

.elvaro-product-card:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}

.elvaro-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--sp-2);
}

.elvaro-product-card__image-wrap {
  aspect-ratio: 4/3;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-1);
}

.elvaro-product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elvaro-product-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elvaro-product-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  line-height: 1;
  white-space: nowrap;
}

.elvaro-product-card__badge--sale {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}

.elvaro-product-card__badge--rental {
  background: transparent;
  border: 1.5px solid rgba(var(--fg-rgb),  0.85);
  color: var(--fg-1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.elvaro-product-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(var(--fg-rgb), 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: var(--fg-2);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.elvaro-product-card__wishlist:hover { color: var(--brand-yellow); }

.elvaro-product-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.elvaro-product-card__subtitle {
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.35;
  min-height: 16px;
}

.elvaro-product-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.elvaro-product-card__price .woocommerce-Price-amount {
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
}
/* Product-card price: keep the WC Subscriptions period/"from" labels compact (the
   amount stays 24px; these would otherwise inherit it) so subscription cards match
   the uniform typography of the buy/rental cards. */
.elvaro-product-card__price .subscription-details { display: block; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-3); }
.elvaro-product-card__price .from { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-3); }
.elvaro-vip-price-hint {
  display: block;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--brand-yellow);
  line-height: 1.2;
}
.elvaro-vip-price-hint .woocommerce-Price-amount,
.elvaro-vip-price-hint .woocommerce-Price-currencySymbol {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

.elvaro-product-card__warranty {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-2);
  flex-wrap: wrap;
}

/* WooCommerce product loop overrides */
.woocommerce ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
}

.woocommerce ul.products li.product img {
  border-radius: 10px;
  margin-bottom: 0;
}

/* ============================================================
   Single product page
   ============================================================ */
.elvaro-product-single {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter-d) 64px;
}

.elvaro-product-single__breadcrumb {
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.elvaro-product-single__breadcrumb a { color: var(--fg-3); text-decoration: none; }
.elvaro-product-single__breadcrumb a:hover { color: var(--fg-1); }

.elvaro-product-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Gallery */
.elvaro-gallery {
  position: relative;
}

.elvaro-gallery__main {
  aspect-ratio: 4/3;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.elvaro-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.elvaro-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.elvaro-gallery__thumb {
  aspect-ratio: 1/1;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  padding: 8px;
  overflow: hidden;
  transition: border-color var(--dur-fast);
}
.elvaro-gallery__thumb.is-active { border-color: var(--hairline-yellow); }
.elvaro-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Product info panel */
.elvaro-product-panel {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 80px;
}

.elvaro-product-panel__title-area {
  margin-bottom: 18px;
}

.elvaro-product-panel__overline {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 8px;
}

.elvaro-product-panel h1 {
  font-size: 32px;
  margin-bottom: 6px;
}

.elvaro-product-panel__desc {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Rental pricing table */
.elvaro-rental-table {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}

.elvaro-rental-table__head {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
}

.elvaro-rental-table__head-cell {
  padding: 14px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  text-align: center;
  border-left: 1px solid var(--hairline);
}

.elvaro-rental-table__head-cell:first-child { border-left: none; }

.elvaro-rental-table__head-cell--vip {
  background: linear-gradient(180deg, rgba(232,184,95,0.10), rgba(232,184,95,0.02));
  border-color: rgba(232,184,95,0.35);
  color: var(--brand-gold-hi);
}

.elvaro-rental-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  border-top: 1px solid var(--hairline);
  align-items: stretch;
}

.elvaro-rental-table__row--popular {
  background: rgba(247,183,3,0.04);
  box-shadow: inset 0 0 0 1px rgba(247,183,3,0.45);
  position: relative;
}

.elvaro-rental-table__cell {
  padding: 14px 12px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}

.elvaro-rental-table__cell:first-child {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-2);
  border-left: none;
  text-align: left;
  justify-content: flex-start;
  padding-left: 14px;
}

.elvaro-rental-table__cell--vip {
  background: linear-gradient(180deg, rgba(232,184,95,0.06), rgba(232,184,95,0.02));
  border-color: rgba(232,184,95,0.35);
  color: var(--brand-yellow);
  flex-direction: column;
  gap: 2px;
}

.elvaro-rental-table__save {
  font-size: 10px;
  color: var(--success);
  font-weight: 700;
  font-family: var(--font-body);
}

.elvaro-rental-table__popular-badge {
  position: absolute;
  top: -9px;
  left: 14px;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* VIP gate (plugin-rendered) */
.elvaro-vip-gate {
  padding: 1.5em;
  border: 1px solid rgba(232,184,95,0.45) !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, rgba(232,184,95,0.10), rgba(232,184,95,0.02)) !important;
  margin: 16px 0 !important;
}

.elvaro-vip-gate__message {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 12px;
  line-height: 1.5;
}

.elvaro-vip-gate__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--brand-gold-hi);
  border: 1px solid rgba(232,184,95,0.45);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--dur-fast);
}
.elvaro-vip-gate__cta:hover { background: rgba(232,184,95,0.10); }

/* VIP gate: hint line for non-logged-in users */
.elvaro-vip-gate__vip-hint {
  font-size: 12px;
  color: var(--fg-3);
  margin: 10px 0 0;
}
.elvaro-vip-gate__vip-hint a {
  color: var(--brand-gold-hi);
  text-decoration: none;
}
.elvaro-vip-gate__vip-hint a:hover { text-decoration: underline; }

/* VIP upsell strip shown below the booking form for logged-in non-VIP users */
.elvaro-vip-upsell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(247,183,3,0.12);
  border: 1px solid rgba(247,183,3,0.45);
  font-size: 14px;
  color: var(--fg-1);
}
.elvaro-vip-upsell__icon {
  color: var(--brand-gold-hi);
  font-size: 14px;
  flex-shrink: 0;
}
.elvaro-vip-upsell__text a {
  color: var(--brand-gold-hi);
  text-decoration: none;
  font-weight: 600;
}
.elvaro-vip-upsell__text a:hover { text-decoration: underline; }

/* VIP CTA in loop (plugin-rendered) */
.elvaro-vip-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--brand-gold-hi) !important;
  border: 1px solid rgba(232,184,95,0.45) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 12px;
  transition: background var(--dur-fast);
}
.elvaro-vip-cta:hover { background: rgba(232,184,95,0.10); }

/* Hybrid rent CTA (plugin-rendered) */
.elvaro-hybrid-rent-cta {
  margin-top: 12px;
}

/* Specs accordion */
.elvaro-specs-accordion {
  margin-top: 32px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.elvaro-specs-accordion__header {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--fg-1);
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
}
.elvaro-specs-accordion__header[aria-expanded="true"] .elvaro-chev {
  transform: rotate(90deg);
}
.elvaro-chev { transition: transform 180ms ease; }

.elvaro-specs-accordion__body {
  padding: 0 24px 24px;
}

.elvaro-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}

.elvaro-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}

.elvaro-spec-row__key { color: var(--fg-3); }
.elvaro-spec-row__val { color: var(--fg-1); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* FAQ accordion */
.elvaro-faq {
  margin-top: 96px;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.elvaro-faq__item {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
}

.elvaro-faq__question {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--fg-1);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  text-align: left;
}

.elvaro-faq__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast);
  color: var(--fg-2);
}

.elvaro-faq__item.is-open .elvaro-faq__icon {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}

.elvaro-faq__answer {
  padding: 0 22px 20px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.65;
  display: none;
}
.elvaro-faq__item.is-open .elvaro-faq__answer { display: block; }

/* Related products */
.elvaro-related {
  margin-top: 96px;
}

.elvaro-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 979px) {
  .elvaro-product-single__layout {
    grid-template-columns: 1fr;
  }
  .elvaro-product-panel { position: static; }
  .elvaro-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .elvaro-faq { grid-template-columns: 1fr; gap: 24px; }
  .elvaro-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elvaro-specs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {
  .elvaro-product-single {
    padding-left: var(--gutter-m);
    padding-right: var(--gutter-m);
  }
  .elvaro-related__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile sticky bottom bar */
.elvaro-product-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  padding: 12px var(--gutter-m);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 719px) {
  .elvaro-product-sticky-bar { display: flex; }
}

/* ============================================================
   Cart
   ============================================================ */

/* Hide page H1 on cart/account — breadcrumbs are injected instead */
body.woocommerce-cart .elvaro-page__header { display: none; }
body.woocommerce-account .elvaro-page__header { display: none; }

/* ── Two-column layout ─────────────────────────────────────── */
.elvaro-cart-layout {
  display: grid;
  gap: var(--sp-6);
}
/* Grid items must be allowed to shrink below their content min-width,
   or a wide items-table forces page-level horizontal scroll. */
.elvaro-cart-layout > * { min-width: 0; }

/* Two-column cart only from xl: below 1280 the items table + 360px
   sidebar can't both fit (the table needs ~820px with booking meta). */
@media (min-width: 1280px) {
  .elvaro-cart-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }
  .elvaro-cart-layout__sidebar {
    position: sticky;
    top: 90px;
  }
}

/* ── Items table ───────────────────────────────────────────── */
.woocommerce-cart-form {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.woocommerce-cart-form table.cart {
  width: 100%;
  border-collapse: collapse;
}

/* Base (<900px): each item is a stacked card.
   Exactly ONE hairline per item — on the row, never on cells. */
.woocommerce-cart-form table.cart,
.woocommerce-cart-form table.cart tbody,
.woocommerce-cart-form table.cart tr,
.woocommerce-cart-form table.cart td {
  display: block;
  width: 100%;
}
.woocommerce-cart-form table.cart thead { display: none; }

.woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "thumb"
    "name"
    "price"
    "quantity"
    "subtotal"
    "remove";
  align-items: start;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}

.woocommerce-cart-form table.cart td {
  padding: 0;
  border: none;
  color: var(--fg-1);
}
.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-quantity,
.woocommerce-cart-form table.cart td.product-subtotal { margin-top: var(--sp-3); }

.woocommerce-cart-form table.cart td::before {
  content: attr(data-title);
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4);
}
.woocommerce-cart-form table.cart td.product-remove::before,
.woocommerce-cart-form table.cart td.product-thumbnail::before,
.woocommerce-cart-form table.cart td.product-name::before,
.woocommerce-cart-form table.cart td.actions::before { content: none; }

/* Grid placement of the item card cells (mobile): image on its own top
   row, fields stacked below, the remove action as the card's last row. */
.woocommerce-cart-form table.cart td.product-thumbnail { grid-area: thumb; width: auto; }
.woocommerce-cart-form table.cart td.product-name      { grid-area: name; margin-top: var(--sp-3); }
.woocommerce-cart-form table.cart td.product-price     { grid-area: price; }
.woocommerce-cart-form table.cart td.product-quantity  { grid-area: quantity; }
.woocommerce-cart-form table.cart td.product-subtotal  { grid-area: subtotal; }
.woocommerce-cart-form table.cart td.product-remove    { grid-area: remove; width: auto; margin-top: var(--sp-4); }

/* Remove action (mobile): explicit ghost button with × + label,
   full-width touch target, danger accent on press. */
.woocommerce-cart-form table.cart a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px var(--sp-4);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-3) !important;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.woocommerce-cart-form table.cart a.remove .elvaro-remove-x { font-size: 18px; line-height: 1; }
.woocommerce-cart-form table.cart a.remove:hover,
.woocommerce-cart-form table.cart a.remove:active {
  background: var(--danger-soft);
  border-color: var(--danger-soft);
  color: var(--danger) !important;
}

/* Header cells (rendered ≥900px only — thead is hidden below) */
.woocommerce-cart-form table.cart th {
  background: var(--surface-1);
  color: var(--fg-3);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--sp-3) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}

/* Reliable square thumb: the global `img { max-width:100% }` reset used to
   clamp the rendered width below the forced 100px inside squeezed table
   cells (max-width beats width even with !important) while the fixed
   height stayed — producing portrait/sliver thumbs. `max-width: none` +
   `aspect-ratio` keeps it square at every width without !important. */
.woocommerce-cart-form table.cart td.product-thumbnail img {
  width: 144px;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  display: block;
}

.woocommerce-cart-form table.cart td.product-name a {
  color: var(--fg-1);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.woocommerce-cart-form table.cart td.product-name a:hover { color: var(--brand-yellow); }

/* Booking/deposit meta (dl.variation) inside the name cell: values must
   wrap freely so they never set the name column's min-content width and
   can never force the table past the clipping form container. */
.woocommerce-cart-form table.cart td.product-name dl.variation dt,
.woocommerce-cart-form table.cart td.product-name dl.variation dd {
  white-space: normal;
  overflow-wrap: anywhere;
}

.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-subtotal {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 700;
  font-size: 15px;
}
/* Keep the amount itself unbroken, but allow the subscription
   "/ month" suffix to wrap to its own line on narrow columns. */
.woocommerce-cart-form table.cart td .woocommerce-Price-amount { white-space: nowrap; }
.woocommerce-cart-form table.cart td .subscription-details { white-space: normal; }
.woocommerce-cart-form table.cart td.product-subtotal { color: var(--fg-1); }
.woocommerce-cart-form table.cart td.product-price    { color: var(--fg-2); }

/* Quantity input */
.woocommerce-cart-form .quantity .qty {
  width: 64px;
  padding: var(--sp-2) var(--sp-2);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast);
}
.woocommerce-cart-form .quantity .qty:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: var(--shadow-yellow-ring);
}

/* Fixed-quantity items (sold individually / bookings): the template
   renders only a hidden input, so a visible "1" is echoed alongside it
   (see woocommerce/global/quantity-input.php) — the QUANTITY field/
   column is never empty. */
.woocommerce-cart-form .elvaro-qty-fixed {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  color: var(--fg-2);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Actions row (coupon + update) */
.woocommerce-cart-form table.cart td.actions {
  background: var(--surface-1);
  padding: var(--sp-4);
}

.elvaro-cart-actions-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}

.coupon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.coupon .input-text {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
  transition: border-color var(--dur-fast);
}
.coupon .input-text::placeholder { color: var(--fg-4); }
.coupon .input-text:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: var(--shadow-yellow-ring);
}

/* "Update cart" — ghost. !important beats the global .button rule. */
.elvaro-cart-update {
  width: 100%;
  font-size: 13px !important;
  padding: 10px var(--sp-4) !important;
  color: var(--fg-3) !important;
  background: transparent !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.elvaro-cart-update:hover {
  color: var(--fg-1) !important;
  border-color: var(--hairline-strong) !important;
  background: var(--surface-3) !important;
}
.elvaro-cart-update:disabled { opacity: 0.4; cursor: not-allowed; }

/* ≥640px (sm): items stay stacked cards, but the coupon/actions row
   goes horizontal — it is plain flex on td.actions content, fully
   independent of the table-vs-card display mode. */
@media (min-width: 640px) {
  .woocommerce-cart-form table.cart td.actions { padding: var(--sp-4) var(--sp-5); }
  .elvaro-cart-actions-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .coupon { flex-direction: row; flex-wrap: wrap; }
  .coupon .input-text { min-width: 160px; }
  .elvaro-cart-update { width: auto; margin-left: auto; }
}

/* ≥900px (md): real table — borders move back onto cells, one per row.
   Below 900px the table renders crushed (name column wraps every word,
   subtotal clipped by the form's overflow:hidden), so the stacked card
   is the layout for the entire sub-900 range. */
@media (min-width: 900px) {
  .woocommerce-cart-form table.cart { display: table; }
  .woocommerce-cart-form table.cart thead { display: table-header-group; }
  .woocommerce-cart-form table.cart tbody { display: table-row-group; }

  .woocommerce-cart-form table.cart tr,
  .woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item {
    display: table-row;
    padding: 0;
    border-bottom: none;
  }

  .woocommerce-cart-form table.cart td {
    display: table-cell;
    width: auto;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
  }
  .woocommerce-cart-form table.cart td.product-price,
  .woocommerce-cart-form table.cart td.product-quantity,
  .woocommerce-cart-form table.cart td.product-subtotal { margin-top: 0; }
  .woocommerce-cart-form table.cart tr:last-child td { border-bottom: none; }

  .woocommerce-cart-form table.cart td::before { content: none; }

  /* 100px img + 2×20px cell padding = 140px column. The rigid
     (max-width:none) image makes this the column's min-content width,
     so auto table layout can never squeeze it into a sliver. */
  .woocommerce-cart-form table.cart td.product-thumbnail {
    display: table-cell;
    width: 140px;
    min-width: 140px;
  }
  .woocommerce-cart-form table.cart td.product-thumbnail img { width: 100px; }
  .woocommerce-cart-form table.cart td.product-name { padding-right: var(--sp-5); }
  .woocommerce-cart-form table.cart td.product-remove {
    position: static;
    width: 48px;
    margin-top: 0;
  }
  /* Table mode: compact square × only — hide the mobile label,
     undo the full-width ghost styling. */
  .woocommerce-cart-form table.cart a.remove {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    color: var(--fg-4) !important;
  }
  .woocommerce-cart-form table.cart a.remove .elvaro-remove-label { display: none; }
  .woocommerce-cart-form table.cart a.remove:hover {
    background: var(--danger-soft);
    color: var(--danger) !important;
  }
}

/* ── Order summary (sidebar) ───────────────────────────────── */
.cart_totals {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .cart_totals { padding: var(--sp-6); }
}

.cart_totals h2 {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--fg-1);
  margin-top: 0;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}

.cart_totals table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}

.cart_totals table th,
.cart_totals table td {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.cart_totals table th {
  font-weight: 500;
  text-align: left;
  color: var(--fg-3);
}

.cart_totals table td {
  text-align: right;
  color: var(--fg-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Shipping row + its terminal note form ONE visual group:
   no hairline inside the group; the group's own bottom hairline
   (on the note row) closes it before the grand total. */
.cart_totals table tr.woocommerce-shipping-totals th,
.cart_totals table tr.woocommerce-shipping-totals td {
  border-bottom: none;
  padding-bottom: var(--sp-1);
}

.cart_totals table .order-total th,
.cart_totals table .order-total td {
  border-bottom: none;
  padding-top: var(--sp-4);
  padding-bottom: 0;
  color: var(--fg-1);
  font-size: var(--fs-body-lg);
  font-weight: 700;
}

.cart_totals table small { font-size: 11px; color: var(--fg-3); font-weight: 400; }

/* ── Recurring totals (WooCommerce Subscriptions) ──────────────
   WCS injects extra rows after the grand total on subscription
   carts: tr.recurring-totals (section label, th[colspan=2]) and
   tr.recurring-total rows (subtotal/shipping/tax/order-total per
   recurring cart, first th may carry rowspan). They must wrap and
   stack inside the card at every width — no horizontal scroll. */

/* Section label row */
.cart_totals table tr.recurring-totals th {
  padding-top: var(--sp-5);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4);
}

/* Recurring rows follow the standard hairline-row pattern; long
   labels/amounts ("Recurring total", "€12.00 / month") may wrap.
   overflow-wrap:anywhere also removes them from the table's
   min-content width, so they can never force overflow. */
.cart_totals table tr.recurring-totals th,
.cart_totals table tr.recurring-total th,
.cart_totals table tr.recurring-total td {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Recurring "order total" rows stay regular-sized — the grand
   total above remains the single emphasized row */
.cart_totals table tr.order-total.recurring-total th,
.cart_totals table tr.order-total.recurring-total td {
  font-size: var(--fs-body-sm);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
}
.cart_totals table tr.order-total.recurring-total th {
  font-weight: 500;
  color: var(--fg-3);
}
.cart_totals table tr.order-total.recurring-total td {
  font-weight: 700;
  color: var(--fg-1);
}

/* Recurring shipping: base (<640px) stacks label above the method
   list so radios get the full card width; the th+td pair forms one
   visual group closed by a single hairline on the td. */
.cart_totals table tr.shipping.recurring-total,
.cart_totals table tr.shipping.recurring-total th,
.cart_totals table tr.shipping.recurring-total td {
  display: block;
  width: 100%;
}
.cart_totals table tr.shipping.recurring-total th {
  border-bottom: none;
  padding-bottom: var(--sp-1);
}

/* Method list — overrides WCS checkout.css indent hack */
.cart_totals table tr.shipping.recurring-total ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart_totals table tr.shipping.recurring-total ul li {
  padding: 2px 0;
  margin: 0;
  text-indent: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
}

@media (min-width: 640px) {
  .cart_totals table tr.shipping.recurring-total { display: table-row; }
  .cart_totals table tr.shipping.recurring-total th,
  .cart_totals table tr.shipping.recurring-total td {
    display: table-cell;
    width: auto;
  }
  .cart_totals table tr.shipping.recurring-total th {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: var(--sp-3);
  }
}

/* Never end the card on a stray hairline (e.g. when WCS appends
   recurring rows after the grand total). Kept last so it outranks
   the recurring-row hairline rules above. */
.cart_totals table tr:last-child th,
.cart_totals table tr:last-child td,
.cart_totals table tr.recurring-total:last-child th,
.cart_totals table tr.recurring-total:last-child td { border-bottom: none; }

/* Cart: available delivery options — informational list (not selectable) */
.elvaro-shipping-available {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.elvaro-shipping-available__item {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  padding: 2px 0;
}

/* Parcel terminal note row — closes the shipping group with the row hairline */
.elvaro-terminal-note-row td {
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-1) 0 var(--sp-3);
}
.elvaro-terminal-note {
  font-size: 12px;
  color: var(--fg-4);
  text-align: right;
}

/* Proceed to checkout button */
.wc-proceed-to-checkout {
  margin-top: var(--sp-6);
}

.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout .button {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  box-shadow: var(--shadow-button);
  letter-spacing: 0.01em;
}
.wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout .button:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-1px);
}
.wc-proceed-to-checkout a.checkout-button:active,
.wc-proceed-to-checkout .button:active {
  background: var(--brand-yellow-press);
  transform: translateY(1px);
}

/* Shipping calculator */
.cart_totals .shipping-calculator-button {
  color: var(--brand-yellow);
  font-size: 13px;
  text-decoration: none;
}
.cart_totals .shipping-calculator-button:hover { color: var(--brand-yellow-hover); }

.cart_totals .shipping-calculator-form { margin-top: var(--sp-3); }

/* ── Cross-sells ───────────────────────────────────────────── */
.cross-sells {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-12);
}

.cross-sells h2 {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: var(--sp-5);
  letter-spacing: -0.01em;
}

/* Cart-page .woocommerce-info styling lives in the shared
   checkout/cart notice rule further down (── Checkout notices). */

/* ── Empty cart ────────────────────────────────────────────── */
.return-to-shop { margin-top: var(--sp-6); }

/* ============================================================
   Checkout
   ============================================================ */
.woocommerce-checkout {
  color: var(--fg-1);
}

.woocommerce-checkout h3 {
  font-size: 22px;
  margin-bottom: 16px;
  font-family: var(--font-display);
}

/* Checkout mode notice (express / full) */
.elvaro-checkout-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}
.elvaro-checkout-notice--express {
  background: var(--success-soft);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: var(--success);
}
.elvaro-checkout-notice--full {
  background: var(--brand-yellow-soft);
  border: 1px solid var(--hairline-yellow);
  color: var(--brand-yellow);
}
.elvaro-checkout-notice__icon {
  font-style: normal;
}

/* Customer type toggle (plugin-rendered) */
.elvaro-customer-type-toggle {
  display: flex;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 6px;
  margin-bottom: 20px;
}
.elvaro-customer-type-toggle__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.elvaro-customer-type-toggle__option input[type="radio"] {
  /* visually hidden but focusable — the styled label is the visible control.
     display:none would remove the radio from the tab order (no keyboard access). */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.elvaro-customer-type-toggle__option.is-active {
  background: var(--surface-4);
  color: var(--fg-1);
  border: 1px solid var(--hairline-yellow);
}

/* VAT status indicator */
.elvaro-vat-status {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  height: 16px;
}
.elvaro-vat-status.is-loading { color: var(--fg-3); }
.elvaro-vat-status.is-valid   { color: var(--success); }
.elvaro-vat-status.is-invalid { color: var(--danger); }
.elvaro-vat-status.is-error   { color: var(--warning); }

/* ── Address autofill (OSM/Nominatim helpers) ─────────────────────────── */

/* "Use my location" + "Use registered address" affordances */
.elvaro-addr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-yellow);
  background: var(--brand-yellow-soft);
  border: 1px solid var(--hairline-yellow);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.elvaro-addr-btn:hover {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}
.elvaro-addr-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
.elvaro-addr-btn[disabled] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

.elvaro-addr-note {
  display: inline-block;
  margin-top: 6px;
  margin-left: 8px;
  font-size: 12px;
  color: var(--fg-3);
}
.elvaro-addr-note.is-error { color: var(--warning); }

/* Type-ahead suggestions dropdown */
.elvaro-addr-suggest {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
.elvaro-addr-suggest__item {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-2);
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  word-break: break-word;
}
.elvaro-addr-suggest__item:last-child { border-bottom: 0; }
.elvaro-addr-suggest__item:hover,
.elvaro-addr-suggest__item.is-active {
  background: var(--surface-4);
  color: var(--fg-1);
}
.elvaro-addr-suggest__note {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--fg-3);
}

/* OTP method row */
.elvaro-otp-method-row {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 12px;
}
.elvaro-otp-method-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  display: block;
  margin-bottom: 8px;
}
.elvaro-otp-method-options {
  display: flex;
  gap: 20px;
}
.elvaro-otp-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--fg-1);
  cursor: pointer;
}

/* OTP method wrap (legacy alias) */
.elvaro-otp-method-wrap {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 12px;
}

/* Elvaro Go pickup dropdown row (plugin-rendered in shipping table) */
.elvaro-pickup-row th {
  color: var(--fg-2) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 0 !important;
}

.elvaro-pickup-row td {
  padding: 10px 0 !important;
}

.elvaro-pickup-row select,
#elvaro_pickup_point {
  background: var(--surface-1) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--fg-1) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
}

/* Agreement checkbox */
#elvaro_rental_agreement_field {
  background: rgba(247,183,3,0.06);
  border: 1px solid rgba(247,183,3,0.25);
  border-radius: var(--radius-md);
  padding: 14px;
}

/* WooCommerce order review */
#order_review {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
}

#order_review table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#order_review table.shop_table th {
  color: var(--fg-3);
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

#order_review table.shop_table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-1);
}

#order_review table.shop_table tr.order-total th,
#order_review table.shop_table tr.order-total td {
  font-size: 18px;
  font-weight: 700;
  border-bottom: none;
  padding-top: 16px;
}

/* Agreement signing section (thank-you page) */
.elvaro-signing-section {
  background: var(--surface-2);
  border: 1px solid var(--hairline-yellow);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 32px 0;
}
.elvaro-signing-section h2 {
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 20px;
}
.elvaro-signing-section > p {
  color: var(--fg-2);
  font-size: 14px;
  margin: 0 0 20px;
}

/* PDF iframe preview */
.elvaro-agreement-preview {
  margin-bottom: 24px;
}
.elvaro-agreement-preview__label {
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.elvaro-agreement-iframe {
  width: 100%;
  height: 500px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: #fff;
}

/* Legal warning callout above I-agree checkbox */
.elvaro-warning-callout {
  background: var(--brand-yellow-soft);
  border-left: 4px solid var(--brand-yellow);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  margin: 0 0 20px;
}

.elvaro-warning-callout__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.elvaro-warning-callout__list {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elvaro-warning-callout__list li {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
}

/* I-agree checkbox row */
.elvaro-agree-row {
  margin: 0 0 16px;
}

.elvaro-agree-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-1);
  cursor: pointer;
  line-height: 1.4;
}

.elvaro-agree-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--brand-yellow);
  cursor: pointer;
}

/* OTP input row */
.elvaro-otp-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.elvaro-otp-input {
  font-size: 1.6em;
  letter-spacing: 0.3em;
  width: 9em;
  font-family: var(--font-mono);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  padding: 12px 16px;
  text-align: center;
}
.elvaro-otp-input:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
.elvaro-otp-submit {
  flex-shrink: 0;
}

/* OTP result states */
.elvaro-otp-success {
  padding: 32px;
  background: var(--success-soft);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-top: 16px;
}
.elvaro-otp-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success);
  color: var(--fg-1);
  font-size: 28px;
  line-height: 56px;
  margin: 0 auto 16px;
}
.elvaro-otp-success h3 {
  margin: 0 0 8px;
  color: var(--fg-1);
}
.elvaro-otp-success p {
  color: var(--fg-2);
  margin: 0 0 6px;
}
.elvaro-otp-success__pdf-note {
  font-size: 0.85em;
  color: var(--fg-3);
}
/* Plain agreement view-links (order-received / signing flow) stay gold + underlined.
   :not(.button) keeps that underline OFF the download BUTTON that shares the class
   on those pages — the underline-on-a-solid-button looked broken. */
.elvaro-agreement-link:not(.button) {
  color: var(--brand-yellow);
  font-size: 14px;
  text-decoration: underline;
}

/* ── Signed agreements card (My Account view-order / order-received) ──────── */
.elvaro-account-agreements__list {
  list-style: none;
  margin: var(--sp-2) 0 var(--sp-5);
  padding: 0;
}
.elvaro-agreement-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.elvaro-agreement-item:first-child { padding-top: 0; }
.elvaro-agreement-item:last-child  { padding-bottom: 0; border-bottom: none; }
.elvaro-agreement-item__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--brand-yellow);
}
.elvaro-agreement-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.elvaro-agreement-item__name {
  color: var(--brand-yellow);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.elvaro-agreement-item__name:hover { text-decoration: underline; }
.elvaro-agreement-item__date {
  color: var(--fg-3);
  font-size: 12px;
}
/* Download = secondary GHOST button (the primary gold is reserved for Pay / Renew
   now); a gold download glyph keeps the brand accent. */
.elvaro-account-agreements .elvaro-agreement-download {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--fg-1);
  border: 1px solid var(--hairline-strong);
  box-shadow: none;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.elvaro-account-agreements .elvaro-agreement-download:hover {
  border-color: var(--brand-yellow);
  background: var(--surface-3);
  color: var(--fg-1);
}
.elvaro-agreement-download svg { flex: 0 0 auto; color: var(--brand-yellow); }
#elvaro-otp-result {
  margin-top: 12px;
  font-size: 14px;
  color: var(--danger);
}

/* ── Checkout notices (login / coupon toggle) ──────────────── */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-cart .woocommerce-info {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--fg-2) !important;
  padding: 12px 18px !important;
  margin-bottom: var(--sp-6) !important;
  font-size: 14px !important;
}

/* ── Login / register / coupon inline forms ──────────────── */
.woocommerce-form-login,
.woocommerce-form-register,
.checkout_coupon {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.checkout_coupon .button {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
.checkout_coupon .button:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-0.5px);
}
.woocommerce-form-login .button:active,
.woocommerce-form-register .button:active,
.checkout_coupon .button:active {
  background: var(--brand-yellow-press);
  transform: translateY(1px);
}

/* ── Checkout two-column layout ──────────────────────────── */
/* form.checkout children: .col2-set | #order_review
   (#order_review_heading lives INSIDE #order_review — theme
   template override woocommerce/checkout/form-checkout.php)
   A balanced 50/50 layout on tablet + desktop (the
   wide order-review column is what lets the shipments use two columns). */
@media (min-width: 768px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: start;
  }
  /* WooCommerce PREPENDS validation/error notices into the form as a
     .woocommerce-NoticeGroup. As a grid child it can't fit row 1 (the two
     columns occupy it) so it auto-placed into the empty bottom-LEFT cell —
     the "account already registered" / payment-error notices appeared stranded
     far below the form. Pin any such notice full-width to row 1 and push the
     columns to row 2 (row 1 collapses to 0 height when there's no notice). */
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
  .woocommerce-checkout form.checkout > .woocommerce-error,
  .woocommerce-checkout form.checkout > .woocommerce-message,
  .woocommerce-checkout form.checkout > .woocommerce-info {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: var(--sp-4);
  }
  .woocommerce-checkout form.checkout .col2-set {
    grid-column: 1;
    grid-row: 2;
  }
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}
/* Payment (#payment) renders inside the right-hand order-review column, below
   the totals table. Its heading sits ABOVE the EveryPay iframe via the
   .payment_box stacking rule below — never beside it. */
#order_review #payment {
  margin-top: var(--sp-6);
}

/* Remove WooCommerce default 50% float widths on .col-1 / .col-2 */
#customer_details .col-1,
#customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  display: block;
  margin-right: 0 !important;
}

/* ── Billing / shipping / additional field card surfaces ─── */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}

/* ── form-row spacing + two-up at ≥640px ─────────────────── */
.woocommerce-checkout .form-row {
  margin-bottom: var(--sp-4);
}
/* Every checkout field on its OWN row — never two
   fields side by side (e.g. First name / Last name). Full-width at all widths. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none !important;
  width: 100% !important;
  clear: both;
  margin-right: 0;
}

/* ── Payment section ─────────────────────────────────────── */
#payment {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
}
#payment ul.payment_methods li {
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#payment ul.payment_methods li:first-child {
  border-top: none;
}
#payment ul.payment_methods li label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
#payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--brand-yellow);
}
/* The payment radio+label row is flex; force the gateway's payment box (the
   EveryPay iframe) onto its OWN full-width line BELOW the label — otherwise it
   becomes a flex sibling and sits awkwardly beside "Payment". */
#payment ul.payment_methods li .payment_box {
  flex: 0 0 100%;
  width: 100%;
}
#payment .payment_box {
  background: var(--surface-1) !important;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 6px 0 10px;
  color: var(--fg-2) !important;
  font-size: 13px;
  border: none !important;
}
/* Kill WooCommerce default #ddd triangle + #fefefe bg */
#payment .payment_box::before {
  display: none !important;
}
#payment .payment_method_paypal img {
  max-height: 24px;
  vertical-align: middle;
}

/* ── Place-order area ─────────────────────────────────────── */
#payment .place-order {
  padding: 20px;
}
#payment #place_order {
  display: block;
  width: 100%;
  padding: 16px var(--sp-6);
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  text-align: center;
}
#payment #place_order:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-0.5px);
}
#payment #place_order:active {
  background: var(--brand-yellow-press);
  transform: translateY(1px);
}
#payment #place_order:focus-visible {
  outline: none;
  box-shadow: var(--shadow-yellow-ring);
}

/* ── Terms & privacy text ─────────────────────────────────── */
.woocommerce-terms-and-conditions-wrapper,
#payment .payment_terms {
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}
.woocommerce-terms-and-conditions-wrapper a,
#payment .payment_terms a {
  color: var(--fg-2);
  text-decoration: underline;
}

/* ============================================================
   CHECKOUT — DS polish
   1) "Your order" heading as the order-card internal header
   2) Dark select2 + dark native selects (billing country/state)
   3) DPD Baltic terminal picker (.custom-dropdown) dark theme
   4) Omniva terminal widget + modal dark theme
   5) Shipping-method rows, terms row, agreement-code box tidy
   Theme CSS only — no vendor plugin edits.
   ============================================================ */

/* ── 1. "Your order" heading inside the order-review card ── */
/* Heading is rendered inside #order_review by the theme override
   woocommerce/checkout/form-checkout.php (DS card-header pattern). */
#order_review > #order_review_heading {
  margin: 0 0 var(--sp-4);
  padding: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  border-bottom: 1px solid var(--hairline);
}

/* ── 2a. Native selects — DS dark field + custom chevron ──── */
/* Chevron stroke is the --fg-3 literal (rgba(var(--fg-rgb), 0.48));
   CSS vars cannot be interpolated inside a data URI. */
.woocommerce-checkout select {
  height: 44px;
  padding: 10px 40px 10px 14px;
  background-color: var(--surface-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(var(--fg-rgb), 0.48)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
}
.woocommerce-checkout select:focus {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
/* Billing/shipping text fields match the 44px control height */
.woocommerce-checkout .form-row input.input-text {
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
}
.woocommerce-checkout .form-row textarea.input-text {
  height: auto;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
}

/* ── 2b. select2 — dark theme (country/state + vendor uses) ──
   The dropdown is appended to <body>, so every rule is scoped to
   body.woocommerce-checkout (matches both inline container and
   the body-attached dropdown). */
body.woocommerce-checkout .form-row .select2-container {
  width: 100% !important;
}
body.woocommerce-checkout .select2-container .select2-selection--single,
body.woocommerce-checkout .select2-container .select2-selection--multiple {
  height: 44px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding: 0 40px 0 14px;
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
}
body.woocommerce-checkout .select2-container .select2-selection__placeholder {
  color: var(--fg-4);
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px;
  right: 10px;
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: var(--fg-3) transparent transparent transparent;
}
body.woocommerce-checkout .select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--fg-3) transparent;
}
body.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
body.woocommerce-checkout .select2-dropdown {
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
body.woocommerce-checkout .select2-search--dropdown {
  padding: var(--sp-2);
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  padding: 8px 12px;
  font-size: var(--fs-body-sm);
  outline: none;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
body.woocommerce-checkout .select2-results__option {
  padding: 10px 14px;
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
}
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-results__option--highlighted[data-selected] {
  background: var(--surface-4);
  color: var(--fg-1);
}
body.woocommerce-checkout .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-results__option[data-selected="true"] {
  background: var(--brand-yellow-soft);
  color: var(--brand-yellow);
}

/* ── 3. DPD Baltic terminal picker (woo-shipping-dpd-baltic) ──
   Vendor renders a custom widget: .custom-dropdown >
   .selected-option (closed control) + .dropdown-list (panel with
   .js--pudo-search input, .group-pudo city headers, .pudo rows). */
body.woocommerce-checkout .wc_shipping_dpd_terminals th {
  color: var(--fg-2);
  font-weight: 600;
  font-size: 13px;
  vertical-align: top;
}
body.woocommerce-checkout .custom-dropdown .selected-option {
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  background-color: var(--surface-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(var(--fg-rgb), 0.48)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
}
body.woocommerce-checkout .custom-dropdown .dropdown-list {
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  max-height: 360px;
}
body.woocommerce-checkout .dropdown-list-search-input {
  padding: var(--sp-2);
}
body.woocommerce-checkout .dropdown-list .js--pudo-search {
  padding: 10px 14px !important; /* vendor inline style uses 1rem */
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
}
body.woocommerce-checkout .dropdown-list .js--pudo-search:focus {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
body.woocommerce-checkout .dropdown-list .group-pudo {
  margin: 0;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
body.woocommerce-checkout .dropdown-list .pudo {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
body.woocommerce-checkout .dropdown-list .pudo:hover {
  background-color: var(--surface-4);
  color: var(--fg-1);
}
body.woocommerce-checkout .dropdown-list #load-more-btn {
  color: var(--brand-yellow);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

/* ── 4. Omniva terminal widget + map modal (omniva-woocommerce) ── */
/* Vendor theme color → brand yellow (used for its buttons/accents) */
body.woocommerce-checkout {
  --omniva-color-main: var(--brand-yellow);
}
body.woocommerce-checkout .omnivalt_terminal_container_map {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
}
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-selected-terminal {
  color: var(--brand-yellow);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-normal);
}
/* Inline container fills the (now full-width) shipping cell with breathing
   room so the selected-terminal name + "Select in map" button aren't crushed
   in a narrow column. */
body.woocommerce-checkout .omnivalt_terminal_container,
body.woocommerce-checkout .omnivalt_terminal_container_map {
  width: 100%;
  box-sizing: border-box;
}
/* Native <select> fallback widget — DS dark field + chevron (mirrors the
   billing selects so it doesn't render as a bright OS control). */
body.woocommerce-checkout select.omnivalt_terminal_select_field {
  width: 100%;
  height: 44px;
  padding: 10px 40px 10px 14px;
  background-color: var(--surface-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(var(--fg-rgb), 0.48)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
  margin-bottom: var(--sp-2);
}
body.woocommerce-checkout select.omnivalt_terminal_select_field:focus {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
  outline: none;
}
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-open-modal-btn {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  border: none;
  color: var(--fg-on-yellow);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background var(--dur-base) var(--ease-standard);
}
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-open-modal-btn:hover,
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-open-modal-btn:focus {
  background: var(--brand-yellow-hover);
  color: var(--fg-on-yellow);
}
/* Map modal — dark panel, readable list, dark search */
body.woocommerce-checkout .omniva-modal-content {
  background-color: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  color: var(--fg-1);
}
body.woocommerce-checkout .omniva-modal-header,
body.woocommerce-checkout .omniva-modal-content .close {
  color: var(--fg-1);
}
body.woocommerce-checkout .omniva-modal-content .close:hover,
body.woocommerce-checkout .omniva-modal-content .close:focus {
  color: var(--brand-yellow);
}
body.woocommerce-checkout .omniva-search-bar {
  color: var(--fg-2);
}
body.woocommerce-checkout #omniva-search form input,
body.woocommerce-checkout .omniva-search {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  color: var(--fg-1);
}
body.woocommerce-checkout .omniva-autocomplete {
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-pop);
}
body.woocommerce-checkout .omniva-autocomplete ul li {
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-2);
}
body.woocommerce-checkout .omniva-autocomplete ul li:nth-child(even) {
  background-color: var(--surface-3);
}
body.woocommerce-checkout .omniva-autocomplete ul li:hover {
  background-color: var(--surface-4);
  color: var(--fg-1);
}
body.woocommerce-checkout .omniva-modal-content .omniva-terminals-listing,
body.woocommerce-checkout .omniva-terminals-list {
  color: var(--fg-1);
  background-color: transparent;
}
body.woocommerce-checkout .omniva-modal-content .omniva-terminals-listing li:nth-child(even) {
  background: var(--surface-3);
}
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-active {
  background-color: var(--surface-3) !important; /* vendor uses #fff !important */
}
/* tmjs map modal (terminal-mapping.css) — retheme via its own
   custom properties + the few hardcoded light surfaces */
body.woocommerce-checkout .tmjs-default-theme {
  --highlight-color: var(--brand-yellow);
  --muted-highlight-color: var(--fg-on-yellow);
  --open-modal-btn-text-color: var(--fg-on-yellow);
  --active-text-color: var(--fg-on-yellow);
  --search-input-background: var(--surface-1);
  --geolocation-text-color: var(--brand-yellow);
  --modal-close-color: var(--fg-1);
  /* Comment/info sub-line: vendor defaults this to --muted-highlight-color
     (#8e5307); our theme had remapped muted-highlight to --fg-on-yellow
     (var(--bg)) which rendered the comment near-navy on dark. Set it to a
     readable muted foreground instead. */
  --terminal-comment-text-color: var(--fg-2);
}
/* Terminal name = primary readable; comment/address sub-line = muted fg
   (never navy-on-dark); selected/active name stays dark on the yellow row. */
body.woocommerce-checkout .tmjs-terminal-name {
  color: var(--fg-1);
}
body.woocommerce-checkout .tmjs-terminal-comment {
  color: var(--fg-2);
}
body.woocommerce-checkout .tmjs-terminal.tmjs-active .tmjs-terminal-name,
body.woocommerce-checkout .tmjs-terminal.tmjs-active .tmjs-terminal-comment,
body.woocommerce-checkout .tmjs-terminal.tmjs-active .tmjs-terminal-distance {
  color: var(--fg-on-yellow);
}
body.woocommerce-checkout .tmjs-modal,
body.woocommerce-checkout .tmjs-modal-flat {
  background-color: rgba(0, 0, 0, 0.7); /* vendor uses a light overlay */
  z-index: 99999; /* clear the sticky site header */
}
body.woocommerce-checkout .tmjs-modal-content {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
body.woocommerce-checkout .tmjs-modal-header {
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--fg-1);
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-display);
}
body.woocommerce-checkout .tmjs-modal-header h2,
body.woocommerce-checkout .tmjs-modal-header h3 {
  color: var(--fg-1);
}
body.woocommerce-checkout .tmjs-terminal-sidebar {
  background-color: var(--surface-2);
  color: var(--fg-1);
}
body.woocommerce-checkout .tmjs-terminal-block {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
}
body.woocommerce-checkout .tmjs-terminal-list > li:not(.tmjs-city):hover {
  background-color: var(--surface-4);
}
body.woocommerce-checkout .tmjs-city {
  color: var(--fg-2);
}
body.woocommerce-checkout .tmjs-search-input {
  border: 1px solid var(--hairline-strong);
  color: var(--fg-1);
}
body.woocommerce-checkout .tmjs-terminal-distance {
  color: var(--fg-3);
}
body.woocommerce-checkout a.tmjs-select-btn,
body.woocommerce-checkout a:focus.tmjs-select-btn,
body.woocommerce-checkout a:hover.tmjs-select-btn {
  background-color: var(--surface-1);
  color: var(--fg-1);
}

/* ── 5a. Shipping-method rows in the order-review table ───── */
#order_review .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
#order_review .woocommerce-shipping-methods li {
  display: flex;
  flex-wrap: wrap; /* vendor terminal widgets drop to their own full-width row */
  align-items: center; /* vertically centre the radio, label and carrier logo */
  gap: var(--sp-2);
  margin: 0;
}
/* Vendor (Omniva/DPD) AND our per-package terminal picker, injected after
   the label inside the flex li, drop to their own full-width row. */
#order_review .woocommerce-shipping-methods li .omnivalt_terminal_container,
#order_review .woocommerce-shipping-methods li .terminal-container,
#order_review .woocommerce-shipping-methods li .elvaro-pkg-terminal {
  flex: 1 1 100%;
  min-width: 0;
}
#order_review .woocommerce-shipping-methods li input.shipping_method {
  flex-shrink: 0;
  margin-top: 0; /* centred by the row's align-items now */
  accent-color: var(--brand-yellow);
}
#order_review .woocommerce-shipping-methods li label {
  flex: 0 1 auto; /* content width, so the carrier logo can sit on the same row */
  min-width: 0;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--fg-1);
  cursor: pointer;
}
#order_review tr.woocommerce-shipping-totals th {
  vertical-align: top;
}
/* Carrier logo (DPD / Elvaro GO / Omniva): hidden on phones; from sm up it sits
   INLINE on the same row as the method label (not on its own line below). */
#order_review .dpd-carrier-icon-image-holder {
  display: none;
}
@media (min-width: 640px) {
  #order_review .dpd-carrier-icon-image-holder {
    display: inline-flex;
    align-items: center;
    /* The logo is INSIDE the <label> (inline flow), so align-self does nothing —
       vertical-align:middle centres it against the label text; the -1px nudges off
       the residual that `middle` leaves (the box-middle sits below the cap-height). */
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin: 0 0 0 var(--sp-2);
  }
}
#order_review img.dpd_carrier_icon {
  /* Explicit height (not max-height): SVG logos have no intrinsic size, so
     max-height alone left them at 0×0 (invisible). height + width:auto sizes
     them from their viewBox aspect ratio; PNG logos (DPD) are unaffected. */
  height: 16px;
  width: auto;
  max-width: 88px;
  display: block;
}
/* "what's in this shipment" note */
#order_review .woocommerce-shipping-contents {
  margin: var(--sp-1) 0 0;
}
#order_review .woocommerce-shipping-contents small {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}
/* Rental variation meta under line items (deposit, dates…) */
#order_review td.product-name dl.variation {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--fg-3);
}
#order_review td.product-name dl.variation dt {
  font-weight: 500;
  float: left;
  clear: left;
  margin: 0 var(--sp-1) 0 0;
}
#order_review td.product-name dl.variation dd {
  margin: 0;
}
#order_review td.product-name dl.variation dd p {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* ── 5b. Bottom of the order card — privacy / terms / button ── */
#payment .place-order {
  padding: var(--sp-5);
}
.woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 0;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
/* Terms consent — proper DS checkbox row, not a mid-sentence wrap */
.woocommerce-terms-and-conditions-wrapper .validate-required {
  margin: 0 0 var(--sp-4);
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--brand-yellow);
}
.woocommerce-terms-and-conditions-checkbox-text {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--fg-2);
  line-height: var(--lh-normal);
}
.woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--fg-1);
}
/* Agreement-code-delivery box (elvaro-checkout, any cart type) —
   DS info-box: hairline border, radius-lg, --sp-4 padding */
.elvaro-otp-method-row,
.elvaro-otp-method-wrap {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.elvaro-otp-method-row label,
.elvaro-otp-method-wrap label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: var(--sp-2);
}
.elvaro-otp-method-options {
  display: flex;
  gap: var(--sp-5);
}
.elvaro-otp-option {
  font-size: var(--fs-body-sm);
  gap: var(--sp-2);
}
.elvaro-otp-option input[type="radio"] {
  accent-color: var(--brand-yellow);
}
/* keep nested option labels regular-cased (header rule above is broad) */
.elvaro-otp-method-options label,
.elvaro-otp-method-row .elvaro-otp-option,
.elvaro-otp-method-wrap .elvaro-otp-option {
  text-transform: none;
  letter-spacing: var(--ls-normal);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--fg-1);
  margin-bottom: 0;
  display: flex;
}

/* ── 5c. Checkout validation error group ─────────
   WC prints all field errors in a single .woocommerce-error <ul> inside
   .woocommerce-NoticeGroup-checkout. The global notice rule sets
   display:flex on .woocommerce-error, which made the <li> errors spread
   horizontally as disconnected red chips at the bottom of the form.
   Restyle the checkout error group as ONE cohesive
   DS danger-soft box with the messages stacked as a tidy list, aligned
   within the form column with proper margins. */
.woocommerce-NoticeGroup-checkout {
  margin: 0 0 var(--sp-6);
}
.woocommerce-NoticeGroup-checkout .woocommerce-error {
  display: block !important;       /* override the global flex row */
  margin: 0 !important;
  padding: var(--sp-4) var(--sp-5) !important;
  list-style: none;
  background: var(--danger-soft) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-left: 3px solid var(--danger) !important;
  border-radius: var(--radius-md) !important;
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-1) 0;
  color: var(--fg-1) !important;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li + li {
  border-top: 1px solid rgba(239, 68, 68, 0.18);
}
/* Bullet marker in the danger hue (the global ::before is hidden) */
.woocommerce-NoticeGroup-checkout .woocommerce-error li::before {
  content: "•";
  display: inline-block !important;
  color: var(--danger);
  font-weight: 700;
  flex-shrink: 0;
  line-height: var(--lh-normal);
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li a {
  color: var(--brand-yellow);
}

/* ============================================================
   Thank-you / order-received page
   ============================================================ */
.woocommerce-order {
  padding: var(--sp-8) 0;
}

.woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--success);
  margin-bottom: var(--sp-6);
}

/* Order overview stat strip */
ul.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
@media (min-width: 640px) {
  ul.woocommerce-order-overview {
    grid-template-columns: 1fr 1fr;
  }
}
ul.woocommerce-order-overview li {
  font-size: 13px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
ul.woocommerce-order-overview li strong {
  display: block;
  font-size: 15px;
  color: var(--fg-1);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}

/* Order details / customer details / subscription cards. Styled like the My
   Rentals cards: a DARKER surface than the surface-2 account panel they sit on
   (so they read as distinct cards, not a flat blend), a soft card shadow for
   depth, and a hover that gently lightens the border. `.elvaro-account-card`
   wraps the view-subscription blocks (details / totals / related orders). */
.woocommerce-order-details,
.woocommerce-customer-details,
.elvaro-account-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
}
.woocommerce-order-details:hover,
.woocommerce-customer-details:hover,
.elvaro-account-card:hover {
  border-color: var(--hairline-strong);
}
.woocommerce-order-details__title,
.woocommerce-column__title,
/* WCS emits bare h2s for "Subscription totals" / "Related orders" inside these
   cards — match the order-details title scale and drop their default margins. */
.elvaro-account-card > h2,
.elvaro-account-card > header > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}
.elvaro-account-card > header {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Order details table */
table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.woocommerce-table--order-details th {
  color: var(--fg-3);
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
table.woocommerce-table--order-details td {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-1);
}
table.woocommerce-table--order-details tr.order-total th,
table.woocommerce-table--order-details tr.order-total td {
  font-size: 18px;
  font-weight: 700;
  border-bottom: none;
  padding-top: 16px;
}
/* In My Account (view-order) the generic table-th `white-space: nowrap` makes a
   long line-item / fee label (e.g. "Rental extension: Hilti …") overflow into the
   Total column (the table is table-layout:fixed). Let order-details labels wrap. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details th {
  white-space: normal;
}

/* Billing + shipping address columns */
.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 640px) {
  .woocommerce-columns--addresses {
    grid-template-columns: 1fr 1fr;
  }
}
.woocommerce-column--billing-address address,
.woocommerce-column--shipping-address address {
  color: var(--fg-2);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   My Account — mobile-first responsive layout
   ============================================================ */

/* ── 2-column grid wrapper ───────────────────────────────── */
.woocommerce-account .elvaro-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

@media (min-width: 900px) {
  .woocommerce-account .elvaro-account {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
  }
}

/* ── Navigation sidebar card ─────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 8px;
  margin-bottom: 16px;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    position: sticky;
    top: 24px;
    margin-bottom: 0;
    padding: 12px;
  }
}

/* ── User identity block (top of sidebar) ────────────────── */
.elvaro-account-identity {
  display: none; /* hidden on mobile — nav becomes pill tabs */
  padding: 12px 4px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  gap: 12px;
  align-items: center;
}

@media (min-width: 900px) {
  .elvaro-account-identity {
    display: flex;
  }
}

.elvaro-account-identity__lozenge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--brand-yellow-soft);
  color: var(--brand-yellow);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.elvaro-account-identity__info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.elvaro-account-identity__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elvaro-account-identity__email {
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elvaro-account-identity__vip {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(212,162,76,0.15);
  color: var(--brand-gold-hi);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid rgba(232,184,95,0.35);
}

/* ── Nav items — mobile: horizontal pill tabs ────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 2px;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
  display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  flex: 0 0 auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--brand-yellow-soft);
  color: var(--brand-yellow);
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a svg,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover svg {
  opacity: 1;
}

/* ── Nav items — desktop: vertical column ────────────────── */
@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
    overflow-x: visible;
    gap: 1px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: none;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    white-space: normal;
    padding: 10px 12px;
  }

  /* Logout — hairline separator + danger on hover */
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--fg-3);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: rgba(239,68,68,0.08);
    color: var(--danger);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover svg {
    opacity: 1;
  }
}

/* ── Content area ─────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-width: 0;
}

@media (min-width: 640px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 28px;
  }
}

/* ── WooCommerce notices inside account ──────────────────── */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 14px;
  list-style: none;
}

.woocommerce-account .woocommerce-message {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  color: var(--success);
}

.woocommerce-account .woocommerce-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--danger);
}

.woocommerce-account .woocommerce-info {
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.3);
  color: var(--info);
}

/* ── DS cards on Профиль page ─────────────────────────────── */
.elvaro-acc-card {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}

.elvaro-acc-card:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.elvaro-acc-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 20px;
}

/* WC password form — hide duplicate name/email rows, show only password fieldset */
.woocommerce-edit-account .elvaro-acc-card--password p:has(#account_first_name),
.woocommerce-edit-account .elvaro-acc-card--password p:has(#account_last_name),
.woocommerce-edit-account .elvaro-acc-card--password p:has(#account_display_name),
.woocommerce-edit-account .elvaro-acc-card--password p:has(#account_email) {
  display: none;
}

/* ── Billing details collapsible sub-block ───────────────── */
.elvaro-billing-details {
  margin: var(--sp-4) 0 var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.elvaro-billing-details__toggle {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--fg-3);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--dur-fast);
}

.elvaro-billing-details__toggle::-webkit-details-marker {
  display: none;
}

.elvaro-billing-details__toggle::before {
  content: '▸';
  font-size: var(--fs-caption);
  transition: transform var(--dur-fast);
}

.elvaro-billing-details[open] .elvaro-billing-details__toggle::before {
  transform: rotate(90deg);
}

.elvaro-billing-details__toggle:hover {
  color: var(--fg-2);
}

.elvaro-billing-details__body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--hairline);
}

/* ── Danger zone (Delete account) ────────────────────────── */
.elvaro-acc-danger {
  margin-top: 8px;
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.elvaro-acc-danger__summary {
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast);
}

.elvaro-acc-danger__summary::-webkit-details-marker {
  display: none;
}

.elvaro-acc-danger__summary svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.elvaro-acc-danger__summary::after {
  content: '▸';
  font-size: 11px;
  margin-left: auto;
  transition: transform var(--dur-fast);
}

.elvaro-acc-danger[open] .elvaro-acc-danger__summary::after {
  transform: rotate(90deg);
}

.elvaro-acc-danger__summary:hover {
  background: rgba(239,68,68,0.06);
}

.elvaro-acc-danger__body {
  padding: 16px;
  border-top: 1px solid rgba(239,68,68,0.15);
  background: rgba(239,68,68,0.05);
}

.elvaro-acc-danger__body .elvaro-delete-account__warning {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--fg-2);
}

.elvaro-acc-danger__body .elvaro-delete-account__submit {
  background: var(--danger);
  color: var(--fg-1);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-fast);
}

.elvaro-acc-danger__body .elvaro-delete-account__submit:hover {
  opacity: 0.88;
}

/* ── Dashboard ────────────────────────────────────────────── */
.elvaro-dashboard__greeting {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.elvaro-dashboard__vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(212,162,76,0.15);
  color: var(--brand-gold-hi);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid rgba(232,184,95,0.35);
  vertical-align: middle;
}

.elvaro-dashboard__section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Rental highlight card ───────────────────────────────── */
.elvaro-dashboard__rental-highlight {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(247,183,3,0.07);
  border: 1px solid rgba(247,183,3,0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
  color: var(--fg-2);
}

.elvaro-dashboard__rental-highlight svg {
  flex-shrink: 0;
  color: var(--brand-yellow);
}

.elvaro-dashboard__rental-highlight-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.elvaro-dashboard__rental-highlight-label {
  font-size: 12px;
  color: var(--fg-3);
}

.elvaro-dashboard__rental-highlight-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
}

.elvaro-dashboard__rental-highlight-action {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast);
  white-space: nowrap;
}

.elvaro-dashboard__rental-highlight-action:hover {
  background: var(--brand-yellow-hover);
}

/* ── Rental CTA (no active rentals) ─────────────────────── */
.elvaro-dashboard__rental-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--fg-3);
}

.elvaro-dashboard__rental-cta svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.elvaro-dashboard__rental-cta span {
  flex: 1;
}

.elvaro-dashboard__rental-cta a {
  color: var(--brand-yellow);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.elvaro-dashboard__rental-cta a:hover {
  text-decoration: underline;
}

/* ── Stat cards ──────────────────────────────────────────── */
.elvaro-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.elvaro-dashboard__stat {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elvaro-dashboard__stat--vip {
  border-color: rgba(212,162,76,0.4);
}

.elvaro-dashboard__stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.elvaro-dashboard__stat--vip .elvaro-dashboard__stat-value {
  color: var(--brand-gold);
}

/* Non-member "Join VIP Club" stat — a muted, clickable invite (replaces the
   ambiguous bare "—"). Crown stays neutral until hover. */
.elvaro-dashboard__stat--join {
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.elvaro-dashboard__stat--join .elvaro-dashboard__stat-value {
  color: var(--fg-3);
}
.elvaro-dashboard__stat--join:hover {
  border-color: rgba(212,162,76,0.4);
}
.elvaro-dashboard__stat--join:hover .elvaro-dashboard__stat-value,
.elvaro-dashboard__stat--join:hover .elvaro-dashboard__stat-label {
  color: var(--brand-gold);
}

.elvaro-dashboard__stat-label {
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.4;
}

/* ── Recent orders ───────────────────────────────────────── */
.elvaro-dashboard__recent {
  margin-bottom: 28px;
}

.elvaro-dashboard__order-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elvaro-dashboard__order-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

@media (min-width: 640px) {
  .elvaro-dashboard__order-link {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 6px 14px;
    flex-wrap: unset;
  }
}

.elvaro-dashboard__order-link:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-3);
  color: var(--fg-1);
}

.elvaro-dashboard__order-num {
  font-weight: 600;
  color: var(--fg-1);
}

.elvaro-dashboard__order-date {
  color: var(--fg-3);
  font-size: 13px;
}

.elvaro-dashboard__order-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  margin-left: auto;
}

@media (min-width: 640px) {
  .elvaro-dashboard__order-total {
    margin-left: 0;
  }
}

.elvaro-dashboard__all-orders {
  font-size: 13px;
  color: var(--brand-yellow);
  text-decoration: none;
}

.elvaro-dashboard__all-orders:hover {
  text-decoration: underline;
}

/* ── Order status chips ──────────────────────────────────── */
.woocommerce-order-status-processing { color: var(--info); }
.woocommerce-order-status-completed  { color: var(--success); }
.woocommerce-order-status-cancelled,
.woocommerce-order-status-failed     { color: var(--danger); }
.woocommerce-order-status-on-hold    { color: var(--warning); }
.woocommerce-order-status-pending    { color: var(--fg-3); }

/* ── Quick-action tiles ──────────────────────────────────── */
.elvaro-dashboard__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .elvaro-dashboard__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  .elvaro-dashboard__tiles {
    grid-template-columns: repeat(5, 1fr);
  }
}

.elvaro-dashboard__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.elvaro-dashboard__tile svg {
  color: var(--fg-3);
  transition: color var(--dur-fast);
}

.elvaro-dashboard__tile:hover {
  border-color: var(--hairline-yellow);
  background: var(--surface-3);
  color: var(--brand-yellow);
}

.elvaro-dashboard__tile:hover svg {
  color: var(--brand-yellow);
}

/* ── Orders list page ────────────────────────────────────── */
.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.woocommerce-account .woocommerce-orders-table thead th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--fg-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hairline);
}

/* Hide headers on mobile — shown as card labels below */
@media (max-width: 639px) {
  .woocommerce-account .woocommerce-orders-table thead {
    display: none;
  }

  /* tbody needs display:block so the flex rows are properly width-constrained */
  .woocommerce-account .woocommerce-orders-table tbody {
    display: block;
    width: 100%;
  }

  .woocommerce-account .woocommerce-orders-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
  }

  /* WC renders the order-number cell as <th>, all others as <td> */
  .woocommerce-account .woocommerce-orders-table tbody td,
  .woocommerce-account .woocommerce-orders-table tbody th {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    font-size: 13px;
    font-weight: normal;
    text-align: left;
  }

  .woocommerce-account .woocommerce-orders-table tbody td::before,
  .woocommerce-account .woocommerce-orders-table tbody th::before {
    content: attr(data-title) ': ';
    font-weight: 600;
    color: var(--fg-3);
    margin-right: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number,
  .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-number {
    width: 100%;
    font-weight: 700;
    font-size: 15px;
    /* Stack the #number over the subscription name (they were glued inline). */
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before,
  .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-number::before {
    display: none;
  }

  /* The actions column has no data-title, so the generic ::before would render a
     stray ": " before the View / action buttons — hide it. */
  .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before,
  .woocommerce-account .woocommerce-orders-table tbody td.order-actions::before,
  .woocommerce-account .woocommerce-orders-table tbody td.subscription-actions::before {
    display: none;
  }

  /* Order-total cell: "<price> for N items". Flexbox strips the whitespace
     between the price <span> and the trailing text node, gluing them into
     "59,00 €for 1 item". A small gap restores the visual space. */
  .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-total {
    gap: 4px;
  }
  .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-total::before {
    margin-right: 0; /* gap handles spacing uniformly */
  }

  /* Actions cell — full-width so multiple buttons don't overflow */
  .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* Subscriptions table — same tbody fix */
  .woocommerce-account .woocommerce-orders-table--subscriptions tbody {
    display: block;
    width: 100%;
  }
}

.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-2);
  vertical-align: middle;
}

/* Last row: clear the divider on BOTH td and th — the order-number cell is a
   <th>, so a td-only rule left a stray hairline under the final row. */
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-orders-table tbody tr:last-child th {
  border-bottom: none;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
  font-weight: 600;
  color: var(--fg-1);
  text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--brand-yellow);
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--hairline);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

/* Actions buttons (Pay / View / Cancel) flex inside their OWN wrapper div
   (.elvaro-order-actions, added in the orders.php template) — not the <td>
   itself. Flexing the cell drops it out of the table layout and staggers the row
   dividers (the responsive breakage); a wrapper keeps the <td> a real table-cell
   while the buttons still wrap with a consistent gap. */
.woocommerce-account .woocommerce-orders-table .elvaro-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Addresses ────────────────────────────────────────────── */
.woocommerce-account .woocommerce-addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .woocommerce-account .woocommerce-addresses {
    grid-template-columns: 1fr 1fr;
  }
}

.woocommerce-account .woocommerce-Address {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px;
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}

.woocommerce-account .woocommerce-Address-title .edit {
  font-size: 12px;
  color: var(--brand-yellow);
  text-decoration: none;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
  text-decoration: underline;
}

.woocommerce-account address {
  font-style: normal;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.7;
}

/* Edit address form */
.woocommerce-account .woocommerce-address-fields fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* ── Subscriptions table card wrapper ─────────────────────── */
/* The subscriptions list sits directly in the account-content card like the
   Orders table — no extra boxed card around it (that "table-in-a-box" look was
   the non-standard bit). Keep bottom spacing only when something FOLLOWS the
   table (the "Get a subscription" CTA); when the table is the last element, the
   panel's own padding is the gap and the 24px margin was just dead space. */
.elvaro-sub-table-card {
  margin-bottom: 24px;
}
.elvaro-sub-table-card:last-child {
  margin-bottom: 0;
}

/* ── Subscriptions table ──────────────────────────────────── */
.woocommerce-account .woocommerce-orders-table--subscriptions {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.woocommerce-account .woocommerce-orders-table--subscriptions th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--fg-4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hairline);
  /* no header band — plain transparent header like the Orders table */
}

.woocommerce-account .woocommerce-orders-table--subscriptions td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-2);
  /* Top-align so the Status / Next payment / Total / View columns anchor to the
     subscription number on the first line, instead of floating in the vertical
     middle of a tall row (long, multi-line product names) — which read as uneven
     bottom whitespace even though the panel padding is symmetric. */
  vertical-align: top;
  font-size: 14px;
}

.woocommerce-account .woocommerce-orders-table--subscriptions tr:last-child td {
  border-bottom: none;
}

.elvaro-sub-name {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 400;
  margin-top: 2px;
}

/* Subscription status pills */
.elvaro-sub-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.elvaro-sub-status--active {
  background: var(--success-soft);
  color: var(--success);
}

.elvaro-sub-status--cancelled,
.elvaro-sub-status--expired {
  background: var(--surface-3);
  color: var(--fg-3);
}

.elvaro-sub-status--pending-cancel,
.elvaro-sub-status--on-hold {
  background: var(--warning-soft);
  color: var(--warning);
}

/* ── Moi-arendy (rentals) table ──────────────────────────── */
.woocommerce-account .elvaro-bookings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.woocommerce-account .elvaro-bookings-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--fg-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hairline);
}

.woocommerce-account .elvaro-bookings-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-2);
  vertical-align: middle;
}

.woocommerce-account .elvaro-bookings-table tr:last-child td {
  border-bottom: none;
}

/* ── Elvaro saved payment methods ────────────────────────── */
.woocommerce-account .elvaro-methods-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.woocommerce-account .elvaro-methods-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--fg-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hairline);
}

.woocommerce-account .elvaro-methods-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-2);
  vertical-align: middle;
}

.woocommerce-account .elvaro-methods-table tr:last-child td {
  border-bottom: none;
}

/* ── Booking extension form (plugin-rendered) ─────────────── */
.elvaro-extend-form {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px;
  /* No top margin: the form replaces the (now display:none) trigger buttons, so a
     margin here would just be dead space above the box. */
  margin-top: 0;
}

.elvaro-extend-form h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 14px;
}

/* ── Account form inputs ─────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .form-row {
  margin-bottom: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 6px;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color var(--dur-fast);
  box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}

.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
  float: none;
  width: 100%;
  clear: none;
}

@media (min-width: 640px) {
  .woocommerce-account .woocommerce-MyAccount-content .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content .form-row-last {
    width: calc(50% - 6px);
    float: left;
  }

  .woocommerce-account .woocommerce-MyAccount-content .form-row-first {
    margin-right: 12px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .form-row-last {
    clear: none;
  }
}

.woocommerce-account .woocommerce-MyAccount-content .form-row .button,
.woocommerce-account .woocommerce-MyAccount-content .form-row button[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background var(--dur-base), transform var(--dur-fast);
  clear: both;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .form-row button[type="submit"]:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-0.5px);
}

.woocommerce-account .woocommerce-MyAccount-content .form-row .button:active,
.woocommerce-account .woocommerce-MyAccount-content .form-row button[type="submit"]:active {
  background: var(--brand-yellow-press);
  transform: translateY(1px);
}

/* ── Page wrapper padding (all account pages) ───────────── */
body.woocommerce-account .elvaro-main {
  padding-top: 4px;
  padding-bottom: var(--sp-16);
}

/* ── Logged-out login/register (side-by-side at ≥900px) ─── */
.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.woocommerce-account:not(.logged-in) .elvaro-account {
  display: block;
}

.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
  float: none;
  width: 100%;
  margin: 0;
}

@media (min-width: 900px) {
  /* Login + Register as two balanced columns across the content width with a
     generous gutter between them — not two cards clustered on the left of an
     empty page (which read as "stuck together oddly"). */
  .woocommerce-account:not(.logged-in) .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10, 48px);
    max-width: none;
  }
}
/* Stacked (below 900px): clear breathing room between the two cards. */
.woocommerce-account:not(.logged-in) .u-column2 {
  margin-top: var(--sp-6);
}
@media (min-width: 900px) {
  .woocommerce-account:not(.logged-in) .u-column2 { margin-top: 0; }
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}

/* Uniform gap between every direct child of the form */
.woocommerce-account:not(.logged-in) .woocommerce-form-login > *,
.woocommerce-account:not(.logged-in) .woocommerce-form-register > * {
  margin-bottom: var(--sp-3);
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login > *:last-child,
.woocommerce-account:not(.logged-in) .woocommerce-form-register > *:last-child {
  margin-bottom: 0;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-row label {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  display: block;
  margin-bottom: var(--sp-1);
}

/* h2 is a sibling of the form, not a child — target u-column > h2 */
.woocommerce-account:not(.logged-in) .u-column1 > h2,
.woocommerce-account:not(.logged-in) .u-column2 > h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--fg-1);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

/* "Remember me" checkbox + submit button on same horizontal row */
.woocommerce-account:not(.logged-in) .woocommerce-form-login p.form-row:not(.woocommerce-form-row) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.woocommerce-account:not(.logged-in) .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  white-space: nowrap;
}

.woocommerce-account:not(.logged-in) .woocommerce-form__input-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--brand-yellow);
}

/* Register — "A link to set..." helper text */
.woocommerce-account:not(.logged-in) .woocommerce-form-register > p:not([class]) {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

.woocommerce-account:not(.logged-in) .lost_password a {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  text-decoration: none;
}

.woocommerce-account:not(.logged-in) .lost_password a:hover {
  color: var(--brand-yellow);
}

.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text {
  font-size: var(--fs-caption);
  color: var(--fg-4);
}

.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a {
  color: var(--fg-3);
}

/* ── Lost-password form card ─────────────────────────────── */
body.woocommerce-lost-password .woocommerce-ResetPassword {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  max-width: 100% !important;
  width: 100% !important;
}

body.woocommerce-lost-password .woocommerce-ResetPassword .clear {
  display: none;
}

body.woocommerce-lost-password .woocommerce-ResetPassword > p:first-child {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-4);
}

body.woocommerce-lost-password .woocommerce-ResetPassword > p.woocommerce-form-row {
  margin-bottom: var(--sp-3);
}

body.woocommerce-lost-password .woocommerce-ResetPassword > p:last-of-type {
  margin-bottom: 0;
}

body.woocommerce-lost-password .woocommerce-ResetPassword label {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  display: block;
  margin-bottom: var(--sp-1);
}

/* ── View order page ─────────────────────────────────────── */
/* Breathing room between the "Order #N was placed on … Status" intro line
   and the first card (item 2a). WC renders the intro as a bare <p> directly
   inside the account content, before .woocommerce-order-details. */
/* Any direct <p> intro (not only :first-child — a notices wrapper often
   precedes it, which is why the gap was missing). */
.woocommerce-account .woocommerce-MyAccount-content > p {
  margin: 0 0 var(--sp-6);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}
/* WooCommerce wraps the order number / date / status in bare <mark> tags,
   which render as a bright yellow highlight — wrong on the dark theme. Drop the
   highlight; just emphasise the text. */
.woocommerce-account .woocommerce-MyAccount-content mark {
  background: transparent;
  color: var(--fg-1);
  font-weight: 600;
}

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
  margin-bottom: 24px;
}
/* Guarantee space above the "Order details" card regardless of what precedes
   it (the intro line, a notices wrapper, etc.). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details {
  margin-top: var(--sp-6);
}

/* The card border + title spacing already separate the heading — the extra
   underline hairline under the title read as a doubled divider (item 2b). */
.woocommerce-account .woocommerce-order-details h2,
.woocommerce-account .woocommerce-customer-details h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  padding-bottom: 0;
  border-bottom: none;
}

.woocommerce-account .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 0;
}

.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-2);
  text-align: left;
  vertical-align: middle;
}

.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
  /* Only drop the trailing border on the final tfoot row — do NOT emphasise it.
     In Elvaro's order-details tfoot the LAST row is "Payment method", not the
     Order Total, so bold/white here wrongly highlighted the payment method (and
     only in My Account, where this rule applies). The total has its own emphasis
     via .order-total; on order-received this row is plain, so match that. */
  border-bottom: none;
}

/* Right-align the whole value column so the € figures sit UNDER the right-aligned
   "Total" header (they were left-aligned, floating mid-column) AND the Actions
   row's Pay/Cancel buttons line up flush-right with the numbers above. */
.woocommerce-account .woocommerce-table--order-details thead th:last-child,
.woocommerce-account .woocommerce-table--order-details tbody td:last-child,
.woocommerce-account .woocommerce-table--order-details tfoot td:last-child {
  text-align: right;
}
.woocommerce-account .woocommerce-table--order-details .order-actions-button + .order-actions-button {
  margin-left: var(--sp-2);
}

/* ============================================================
   My Account — shared DS components (step 6)
   ============================================================ */

/* ── Section title used by sub-pages (rentals, etc.) ─────── */
.elvaro-acc-page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 20px;
}

/* ── DS empty-state card ──────────────────────────────────── */
.elvaro-acc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--fg-3);
}

.elvaro-acc-empty svg {
  opacity: 0.35;
}

.elvaro-acc-empty__msg {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  margin: 0;
}

/* ── Status chips (rental booking statuses) ───────────────── */
.elvaro-status-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* don't stretch to full column width in a flex column */
  width: fit-content;
  max-width: max-content;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.elvaro-status-chip--confirmed,
.elvaro-status-chip--paid {
  background: rgba(34,197,94,0.12);
  color: var(--success);
  border: 1px solid rgba(34,197,94,0.25);
}

.elvaro-status-chip--pending-confirmation {
  background: rgba(247,183,3,0.12);
  color: var(--brand-yellow);
  border: 1px solid rgba(247,183,3,0.25);
}

/* ── Rental cards list ────────────────────────────────────── */
.elvaro-rentals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* NOTE: `.elvaro-rental-card` is ALSO used by the rental CATALOG card (two other
   definitions, incl. a later `display:grid` one) — same class, so those bare
   rules win by source order and turned this account card into a 4-column grid
   with the actions stranded mid-row. Scope every My Rentals rule under
   `.elvaro-rentals-list` so it wins on specificity (0,2,0 > 0,1,0) and the
   catalog grid never leaks in. */
.elvaro-rentals-list .elvaro-rental-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
}
/* Restore the card's hover (border softly lightens). The catalog card supplied
   this via the shared .elvaro-rental-card:hover (0,1,1), but scoping the base
   rule to .elvaro-rentals-list (0,2,0) started winning over it, so the effect
   disappeared here — re-add it at matching specificity. */
.elvaro-rentals-list .elvaro-rental-card:hover {
  border-color: var(--hairline-strong);
}

@media (min-width: 640px) {
  .elvaro-rentals-list .elvaro-rental-card {
    flex-direction: row;
    /* Top-align the two columns: when the actions column grows (the Extend form
       opens), a centered info column would re-center and visibly drop down. */
    align-items: flex-start;
    justify-content: space-between;
  }
}

.elvaro-rentals-list .elvaro-rental-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* Grow to fill the row so the product name has room (no over-wrapping) and
     there's no dead gap between the info and the right-hand actions/form. */
  flex: 1 1 auto;
}

/* Dates + status chip share one row (the chip wraps to its own line only if the
   card gets too narrow), instead of the chip always sitting on a third line. */
.elvaro-rental-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.elvaro-rental-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-1);
}

.elvaro-rental-card__dates {
  font-size: 13px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* Extend / Return controls. The plugin renders, in source order:
   <button.extend> <div.extend-form(hidden)> <button.return> <div.return-result>.
   Lay them out as a wrapping flex row so the two buttons sit together on the top
   line; order:1 drops the full-width form/result islands onto their own lines
   BELOW both buttons — otherwise the 100%-wide form sits between Extend and
   Return and splits them apart (the broken stacking we had). */
.elvaro-rentals-list .elvaro-rental-card__actions {
  flex-shrink: 0;
  display: flex;
  flex-flow: row wrap;
  /* Top-align so the opened Extend form sits at the top of the column (level with
     the product title), not centered. */
  align-items: flex-start;
  gap: var(--sp-2);
}
.elvaro-rentals-list .elvaro-rental-card__actions > .button.elvaro-extend-btn,
.elvaro-rentals-list .elvaro-rental-card__actions > .button.elvaro-return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 16px;
  font-size: var(--fs-button, 14px);
  font-weight: 600;
  border-radius: var(--radius-md);
  line-height: 1.1;
}
.elvaro-rentals-list .elvaro-rental-card__actions > .elvaro-extend-form,
.elvaro-rentals-list .elvaro-rental-card__actions > .return-result {
  flex: 1 0 100%;
  order: 1;
}
/* Extend form: hidden until "Extend" is pressed; opening it (.is-extending)
   hides BOTH trigger buttons and shows the form, which carries its own Submit +
   Back (Back closes it and restores the buttons). */
.elvaro-rentals-list .elvaro-rental-card__actions > .elvaro-extend-form {
  display: none;
}
.elvaro-rentals-list .elvaro-rental-card__actions.is-extending > .elvaro-extend-form {
  display: block;
}
/* Higher specificity (0,6,0) so it beats the My Rentals button-family rule's
   `display: inline-flex` (0,5,0) below and actually hides the two triggers. */
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card__actions.is-extending > .button.elvaro-extend-btn,
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card__actions.is-extending > .button.elvaro-return-btn {
  display: none;
}
/* Submit + Back row inside the form; cost line stacked above it. */
.elvaro-extend-form .extend-cost {
  display: block;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}
.elvaro-extend-form .extend-cost:empty {
  margin: 0;
}
.elvaro-extend-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.elvaro-extend-form .extend-result {
  margin-top: var(--sp-2);
}
/* After "Submit extension" the form collapses to just the result: the message
   on its own line, then a [Pay] [Back] button row below it. */
.elvaro-extend-form.is-submitted .elvaro-extend-stepper,
.elvaro-extend-form.is-submitted .extend-cost,
.elvaro-extend-form.is-submitted .elvaro-extend-form__actions {
  display: none;
}
.elvaro-extend-form.is-submitted .extend-result {
  margin-top: 0;
}
.extend-result__msg {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
}
.extend-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Buttons left-aligned under the stacked info on mobile; right-aligned next to
   the info in the desktop row. */
@media (min-width: 640px) {
  .elvaro-rentals-list .elvaro-rental-card__actions {
    justify-content: flex-end;
  }
}

/* ── Rental extend form polish ────────────────────────────── */
.elvaro-extend-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.elvaro-extend-stepper__label {
  font-size: 13px;
  color: var(--fg-2);
}

.elvaro-extend-stepper__ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.elvaro-qty-btn {
  background: var(--surface-3);
  border: none;
  color: var(--fg-2);
  font-size: 16px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.elvaro-qty-btn:hover {
  background: var(--brand-yellow-soft);
  color: var(--brand-yellow);
}

.elvaro-qty-value {
  min-width: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}

.extend-cost {
  font-size: 13px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.extend-result {
  font-size: 13px;
  color: var(--fg-2);
}

/* ============================================================
   My Account — generic table uniformity (step 5)
   Covers WC Subscriptions + Memberships output.
   DO NOT override subscriptions/memberships PHP templates.
   ============================================================ */

/* Catch-all DS table style for any table in the content area */
.woocommerce-account .woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--fg-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-content table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-2);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.woocommerce-account .woocommerce-MyAccount-content table tr:last-child td {
  border-bottom: none;
}
/* The custom "Shipment N pickup point" rows live in this table's tfoot; the rule
   above clears only the last row's TD border, leaving a stray ~half-width
   hairline under the last row's TH (label) — e.g. under "Shipment 3 pickup
   point:" in the subscription totals. Clear the final tfoot row's TH too (scoped
   to tfoot so the thead header underline is untouched). */
.woocommerce-account .woocommerce-MyAccount-content table tfoot tr:last-child th {
  border-bottom: none;
}

/* Mobile card-stack for generic account tables */
@media (max-width: 639px) {
  .woocommerce-account .woocommerce-MyAccount-content table thead {
    display: none;
  }

  .woocommerce-account .woocommerce-MyAccount-content table:not(.subscription_details):not(.order_details) tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 12px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
  }

  /* The stack-into-cards treatment + data-title labels apply ONLY to the
     column-style list tables (orders / related orders / related subscriptions /
     subscriptions list). The label|value detail tables (.subscription_details)
     and the product/total tables (.order_details — subscription & order totals)
     have NO data-title, so this would render a bare ": " on every cell; exclude
     them and let them keep their own clean mobile layout (below). */
  .woocommerce-account .woocommerce-MyAccount-content table:not(.subscription_details):not(.order_details) tbody td {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    font-size: 13px;
  }

  .woocommerce-account .woocommerce-MyAccount-content table:not(.subscription_details):not(.order_details) tbody td::before {
    content: attr(data-title) ': ';
    font-weight: 600;
    color: var(--fg-3);
    margin-right: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* The #number cell stacks the number over the subscription/order name; the
     generic td `align-items: center` (above) centred the short number, so keep
     this specific cell left-aligned. */
  .woocommerce-account .woocommerce-MyAccount-content table:not(.subscription_details):not(.order_details) tbody td.woocommerce-orders-table__cell-order-number {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* order_details (subscription & order totals): break the tfoot "Actions" row to
     full width so the Pay/Cancel (or Renew) buttons sit side by side — its value
     column is only ~76px. The table is width:100%, so a block tfoot row spans the
     card. */
  .woocommerce-account .woocommerce-MyAccount-content table.order_details {
    width: 100%;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:has(.button) {
    display: block;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:has(.button) > th,
  .woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:has(.button) > td {
    display: block;
    width: auto;
    text-align: left;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:has(.button) > td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }
  .woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:has(.button) > td:last-child .button {
    margin: 0;
    width: auto;
    flex: 0 0 auto;
  }

  /* subscription_details: re-flow as a flex definition list. A block <tr> inside a
     table won't span the full card width (table-column constraints persist), so the
     2-column data rows become "label · value" flex rows, and the Actions row stacks
     its label over a full-width buttons row. */
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details,
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody {
    display: block;
    width: 100%;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody tr:last-child {
    border-bottom: none;
  }
  /* `table.shop_table.subscription_details tbody tr > *` (the desktop row divider,
     specificity 0,4,3) outranks a plain `td` here and, on these content-width flex
     cells, draws a short underline under each label/value. Use 0,4,4 to clear the
     CELL border — the row's own border-bottom (below) is the divider. */
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table.subscription_details tbody tr td {
    display: block;
    padding: 0;
    border: none;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody td:first-child {
    flex: 0 0 auto;
    color: var(--fg-3);
  }
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody td:last-child {
    color: var(--fg-1);
    text-align: right;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody tr:has(.button) {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody tr:has(.button) td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    text-align: left;
    margin-top: var(--sp-2);
  }
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody tr:has(.button) td:last-child .button {
    margin: 0;
    width: auto; /* WCS ships width:200px on these — let them size to content */
    flex: 0 0 auto;
  }
}

/* WC Subscriptions/Memberships action buttons — consistent DS style */
.woocommerce-account .woocommerce-MyAccount-content table .button,
.woocommerce-account .woocommerce-MyAccount-content table a.button {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--hairline);
  transition: border-color var(--dur-fast), color var(--dur-fast);
  cursor: pointer;
  white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-content table .button:hover,
.woocommerce-account .woocommerce-MyAccount-content table a.button:hover {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

/* Restyle WC empty-state .woocommerce-info to match DS empty-state */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content > ul.woocommerce-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--fg-3);
  font-size: 14px;
  /* Override default blue WC notice */
  border-left: none;
}

/* ============================================================
   My Account — responsiveness fixes (step 7)
   ============================================================ */

/* Wrap overflowing tables on small screens */
.woocommerce-account .woocommerce-MyAccount-content {
  overflow-x: hidden;
}

/* Scroll-container for tables that don't stack on mobile */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-orders-table--subscriptions {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

@media (min-width: 640px) {
  .woocommerce-account .woocommerce-orders-table,
  .woocommerce-account .woocommerce-orders-table--subscriptions {
    display: table;
    overflow-x: visible;
  }
}

/* Tighter content padding on small screens */
@media (max-width: 639px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 16px;
  }

  .elvaro-acc-card {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .elvaro-dashboard__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Duration picker — rental Product Detail Page (3 buttons: 2d / 7d / 30d)
   ============================================================ */
.elvaro-duration-picker {
  margin-bottom: 12px;
}
.elvaro-duration-picker__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 16px;
}
.elvaro-duration-picker__btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.elvaro-duration-btn {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 180ms cubic-bezier(0.2,0,0,1);
}
.elvaro-duration-btn:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}
.elvaro-duration-btn.is-active {
  background: rgba(247,183,3,0.04);
  border: 1.5px solid var(--brand-yellow);
  box-shadow:
    0 0 0 3px rgba(247,183,3,0.08),
    0 1px 0 0 rgba(var(--fg-rgb), 0.04) inset;
}
.elvaro-duration-btn.is-popular::before {
  content: attr(data-popular-label);
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  line-height: 1;
  box-shadow: 0 4px 10px -2px rgba(247,183,3,0.4);
  text-transform: uppercase;
  white-space: nowrap;
}
.elvaro-duration-btn__label {
  font-size: 16px;
  font-weight: 800;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.elvaro-duration-btn__price {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.elvaro-duration-btn.is-active .elvaro-duration-btn__label { color: var(--fg-1); }
.elvaro-duration-btn.is-active .elvaro-duration-btn__price { color: var(--fg-2); }
.elvaro-duration-picker__hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--fg-3);
  min-height: 1.4em;
}

/* ============================================================
   Qty / stepper control (shared by duration picker + extension)
   ============================================================ */
.elvaro-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.elvaro-qty-row__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.elvaro-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.elvaro-qty-btn {
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--fg-1);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elvaro-qty-btn:hover { background: var(--surface-3); }
.elvaro-qty-value {
  min-width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface-1);
  padding: 0 8px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Extension-specific stepper layout */
.elvaro-extend-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.elvaro-extend-stepper__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.extend-cost {
  font-size: 13px;
  color: var(--fg-3);
  display: block;
  margin-top: 6px;
}

/* ============================================================
   VIP Club page
   ============================================================ */
.elvaro-vip-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 80% 50%, rgba(180,130,50,0.32) 0%, transparent 60%),
    radial-gradient(60% 80% at 0% 0%, rgba(247,183,3,0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface-1) 100%);
  border-bottom: 1px solid var(--hairline);
  padding: 32px var(--gutter-m) 40px;
}

.elvaro-vip-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.elvaro-vip-hero__overline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-gold-hi);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  margin-bottom: 20px;
}

.elvaro-vip-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--brand-yellow);
  text-shadow: 0 0 60px rgba(247,183,3,0.25);
  margin-bottom: 24px;
}

.elvaro-vip-hero__desc {
  font-size: 20px;
  color: var(--fg-2);
  line-height: 1.45;
  margin-bottom: 32px;
}

.elvaro-vip-hero__chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 32px;
  max-width: 560px;
}

.elvaro-vip-hero__chip {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.elvaro-vip-hero__chip:hover {
  border-color: rgba(247,183,3,0.35);
  background: rgba(247,183,3,0.04);
}

.elvaro-vip-hero__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

.elvaro-vip-hero__price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  color: var(--brand-yellow);
  letter-spacing: -0.02em;
  line-height: 1;
}

.elvaro-vip-hero__price-period {
  font-size: 18px;
  color: var(--fg-2);
  font-weight: 500;
}

.elvaro-vip-hero__cta-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.elvaro-vip-hero__card-wrap {
  display: none;
}

.elvaro-vip-hero__card {
  position: relative;
  width: 440px;
  max-width: 100%;
  aspect-ratio: 1.6/1;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(232,184,95,0.32) 0%, transparent 55%),
    linear-gradient(135deg, #0F0E0C 0%, #1B150A 60%, #2A1F0E 100%);
  border: 1px solid rgba(232,184,95,0.55);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 40px 80px -16px rgba(0,0,0,0.9), 0 0 0 1px rgba(232,184,95,0.15) inset;
  transform: rotate(-3deg);
  z-index: 2;
}

@media (min-width: 720px) {
  .elvaro-vip-hero { padding: 48px var(--gutter-t) 64px; }
  .elvaro-vip-hero__title { font-size: clamp(64px, 8vw, 128px); }
  .elvaro-vip-hero__chips { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 980px) {
  .elvaro-vip-hero { padding: 48px var(--gutter-d) 64px; }
  .elvaro-vip-hero__inner { grid-template-columns: 1fr 1fr; gap: 64px; }
  .elvaro-vip-hero__card-wrap {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* VIP Benefits section — display:block overrides the old .elvaro-vip-benefits repeat(6,auto) grid rule above */
.elvaro-vip-benefits {
  display: block;
  padding: 40px var(--gutter-m) 32px;
  max-width: var(--container);
  margin: 0 auto;
}

.elvaro-vip-benefits h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: var(--fs-h2);
}

.elvaro-vip-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.elvaro-vip-benefit-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.04) inset;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.elvaro-vip-benefit-card:hover {
  border-color: rgba(247,183,3,0.4);
  transform: translateY(-2px);
}

.elvaro-vip-benefit-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-yellow);
}

.elvaro-vip-benefit-card__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.3;
}

.elvaro-vip-benefit-card__desc {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
}

@media (min-width: 720px) {
  .elvaro-vip-benefits { padding: 64px var(--gutter-t); }
  .elvaro-vip-benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 980px) {
  .elvaro-vip-benefits { padding: 64px var(--gutter-d); }
  .elvaro-vip-benefits__grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   Legal pages
   ============================================================ */
.elvaro-legal-content {
  max-width: 760px;
  margin: 48px auto;
  padding: 0 var(--gutter-m);
  color: var(--fg-2);
  line-height: 1.65;
}

.elvaro-legal-content h1 {
  font-size: var(--fs-h2);
  margin-bottom: 24px;
}

.elvaro-legal-content h2 {
  font-size: var(--fs-h3);
  margin: 32px 0 12px;
}

.elvaro-legal-content p { margin-bottom: 16px; }
.elvaro-legal-content ul, .elvaro-legal-content ol {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}
.elvaro-legal-content li { margin-bottom: 8px; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.elvaro-breadcrumb {
  margin: 0 0 14px;
}
.single-product .elvaro-breadcrumb {
  margin-top: 20px;
}

.elvaro-breadcrumb ol,
.woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--fg-3);
}

.elvaro-breadcrumb ol li,
.woocommerce-breadcrumb > * {
  display: inline-flex;
  align-items: center;
}

/* Current page (last crumb, no link) */
.elvaro-breadcrumb ol li:last-child,
.woocommerce-breadcrumb > *:last-child {
  color: var(--fg-2);
}

.elvaro-breadcrumb a,
.woocommerce-breadcrumb a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.elvaro-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover { color: var(--fg-1); }

.elvaro-breadcrumb__sep {
  color: var(--fg-4);
  padding: 0 2px;
  user-select: none;
}

/* ============================================================
   Notices
   ============================================================ */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-radius: var(--radius-md) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.woocommerce-error {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
}

.woocommerce-message {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
}

.woocommerce-info {
  background: var(--info-soft) !important;
  color: var(--info) !important;
  border: 1px solid rgba(59,130,246,0.3) !important;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  display: none !important;
}

/* ============================================================
   WooCommerce Bookings calendar overrides
   ============================================================ */
/* Our duration picker replaces the WC Bookings calendar entirely.
   Hide the whole form div — the submit button is outside it and still works.
   !important overrides the inline style WC Bookings JS sets on the element. */
#wc-bookings-booking-form { display: none !important; }

/* ============================================================
   Plugin: Cookie banner overrides
   Uses inline styles from plugin — we style via ID
   ============================================================ */
#elvaro-cookie-banner {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border-top: 1px solid var(--hairline) !important;
  font-size: 13px !important;
  padding: 14px 24px !important;
}

/* ============================================================
   Plugin: Language switcher overrides
   ============================================================ */
#elvaro-lang-switcher {
  background: rgba(19,23,26,0.95) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 6px 10px !important;
}

#elvaro-lang-switcher a {
  color: var(--fg-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#elvaro-lang-switcher a:hover { color: var(--fg-1) !important; }

/* ============================================================
   Plugin: Footer legal pill overrides
   ============================================================ */
#elvaro-footer-legal {
  background: rgba(19,23,26,0.96) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  color: var(--fg-2) !important;
}

#elvaro-footer-legal a {
  color: var(--fg-2) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

#elvaro-footer-legal a:hover {
  color: var(--fg-1) !important;
}

/* ============================================================
   Plugin: VIP-only CTA (elvaro-vip / elvaro-rental)
   ============================================================ */
.elvaro-vip-only-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
  font-size: var(--fs-button);
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
  box-shadow: var(--shadow-button);
}
.elvaro-vip-only-cta:hover { background: var(--brand-yellow-hover); }
.elvaro-vip-only-cta:active { background: var(--brand-yellow-press); }

/* ============================================================
   Plugin: Express badge (elvaro-checkout)
   ============================================================ */
.elvaro-express-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--brand-yellow-soft);
  color: var(--brand-yellow);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ============================================================
   Plugin: Agreement consent wrapper (elvaro-checkout)
   ============================================================ */
.elvaro-agreement-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: rgba(var(--fg-rgb), 0.03);
  border: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

/* ============================================================
   Plugin: Pickup point select (elvaro-shipping)
   ============================================================ */
.elvaro-pickup-point-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  padding: var(--sp-2) var(--sp-3);
  appearance: none;
  cursor: pointer;
}
.elvaro-pickup-point-select:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: var(--shadow-yellow-ring);
}

/* ============================================================
   Plugin: OTP form wrapper (elvaro-checkout)
   ============================================================ */
.elvaro-otp-form {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

/* ============================================================
   Pagination
   ============================================================ */
.woocommerce-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 32px 0 0;
  flex-wrap: wrap;
}

.woocommerce-pagination .page-numbers li {
  margin: 0;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb), 0.10);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--dur-fast);
}

.woocommerce-pagination .page-numbers li span.current,
.woocommerce-pagination .page-numbers li a:hover {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border-color: var(--brand-yellow);
}

/* Prev/Next-only pager (WC account Orders / Subscriptions endpoints) */
.woocommerce-pagination.woocommerce-pagination--without-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 0 0;
  flex-wrap: wrap;
}

.woocommerce-pagination.woocommerce-pagination--without-numbers .woocommerce-button {
  min-width: 44px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.woocommerce-pagination.woocommerce-pagination--without-numbers .woocommerce-button:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
  color: var(--fg-1);
}

/* ============================================================
   Rental catalog (separate design)
   ============================================================ */
.elvaro-rental-page {
  background: var(--bg);
}

.elvaro-rental-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.elvaro-rental-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 200px 250px minmax(0, 1fr) 200px;
  gap: 24px;
  align-items: stretch;
  box-shadow: var(--shadow-card);
}

.elvaro-rental-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border-radius: 10px;
  overflow: hidden;
}

.elvaro-rental-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elvaro-rental-card__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.elvaro-rental-card__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--fg-1);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.elvaro-rental-card__model {
  font-size: 13px;
  color: var(--fg-3);
}

.elvaro-rental-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
}

.elvaro-rental-card__stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

.elvaro-rental-card__pricing {
  display: flex;
  gap: 12px;
}

.elvaro-price-table {
  flex: 1;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.elvaro-price-table--vip {
  background: rgba(247,183,3,0.04);
  border-color: rgba(247,183,3,0.25);
}

.elvaro-price-table__head {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-2);
}

.elvaro-price-table--vip .elvaro-price-table__head {
  border-bottom-color: rgba(247,183,3,0.25);
  background: rgba(247,183,3,0.06);
  color: var(--brand-yellow);
}

.elvaro-price-table__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
}

.elvaro-price-table--vip .elvaro-price-table__row {
  border-color: rgba(247,183,3,0.15);
}

.elvaro-price-table__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.elvaro-price-table--vip .elvaro-price-table__value { color: var(--brand-yellow); }

.elvaro-price-table__period {
  font-size: 13px;
  color: var(--fg-3);
}

.elvaro-price-table__deposit {
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--fg-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.elvaro-price-table--vip .elvaro-price-table__deposit {
  border-color: rgba(247,183,3,0.25);
  background: rgba(247,183,3,0.06);
  color: var(--success);
  font-weight: 700;
}

.elvaro-rental-card__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
}

@media (max-width: 1179px) {
  .elvaro-rental-card {
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .elvaro-rental-card__pricing { grid-column: 1 / -1; }
  .elvaro-rental-card__ctas { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

@media (max-width: 719px) {
  .elvaro-rental-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
    gap: 16px;
  }
  .elvaro-rental-card__img { max-width: 200px; height: 160px; }
  .elvaro-rental-card__pricing { flex-direction: column; }
  .elvaro-rental-card__ctas { flex-direction: column; }
}

/* ============================================================
   Rental info banner
   ============================================================ */
.elvaro-rental-info-banner {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--fg-2);
  margin-bottom: var(--sp-4);
}

.elvaro-rental-info-banner svg {
  flex-shrink: 0;
  color: var(--brand-yellow);
}

.elvaro-rental-info-banner a {
  color: var(--brand-yellow);
  text-decoration: none;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================
   SVG Icons (inline sprite)
   ============================================================ */
.elvaro-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============================================================
   404 page
   ============================================================ */
.elvaro-404 {
  text-align: center;
  padding: 96px var(--gutter-m);
}

.elvaro-404__code {
  font-family: var(--font-display);
  font-size: 128px;
  font-weight: 800;
  color: var(--brand-yellow);
  line-height: 1;
  margin-bottom: 16px;
}

.elvaro-404__title {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
}

.elvaro-404__text {
  color: var(--fg-2);
  font-size: 16px;
  margin-bottom: 32px;
}

.elvaro-404__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Search results
   ============================================================ */
.elvaro-search-header {
  padding: 32px var(--gutter-d);
  max-width: var(--container);
  margin: 0 auto;
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .elvaro-header,
  .elvaro-topbar,
  #elvaro-cookie-banner,
  #elvaro-lang-switcher,
  #elvaro-footer-legal {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ============================================================
   Lucide icon via SVG (referenced inline in PHP)
   ============================================================ */
.lucide {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ============================================================
   Utility helpers
   ============================================================ */
.elvaro-text-yellow { color: var(--brand-yellow); }
.elvaro-text-link {
  color: var(--fg-3);
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  margin-top: 2px;
  display: block;
}
.elvaro-text-link:hover { color: var(--fg-2); text-decoration: underline; }

/* ============================================================
   Stock availability chip
   ============================================================ */
.elvaro-stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
}
.elvaro-stock-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
/* Backorder is not "in stock" — the goods are not here yet, so the chip must
   not read as the green all-clear. */
.elvaro-stock-chip--backorder {
  background: var(--warning-soft);
  color: var(--warning);
}
.elvaro-stock-chip--backorder .elvaro-stock-chip__dot {
  background: var(--warning);
}

/* Caveat under the rental price table when WC Bookings pricing rules mean the
   advertised figures are only indicative. */
.elvaro-rental-pricing__note {
  margin: 8px 0 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-3, var(--fg-2));
}

/* ============================================================
   Rental showcase bullet list
   ============================================================ */
.elvaro-rental-showcase__bullets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--fg-2);
}
.elvaro-rental-showcase__bullets li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.elvaro-rental-showcase__bullets li svg {
  color: var(--brand-yellow);
  flex-shrink: 0;
}

/* ============================================================
   VIP block price label
   ============================================================ */
.elvaro-vip-block__price-label {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  margin-bottom: var(--sp-1);
}

.elvaro-vip-block__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-caption);
  color: var(--fg-2);
}

.elvaro-vip-block__checklist-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ============================================================
   Homepage section spacing helpers (used by categories/how/etc)
   ============================================================ */
.elvaro-categories.elvaro-container,
.elvaro-featured-rental.elvaro-container,
.elvaro-vip-block.elvaro-container,
.elvaro-how.elvaro-container,
.elvaro-bottom-trust.elvaro-container {
  /* containers already have horizontal padding; section spacing handled by
     the individual component margin-top rules */
}

/* ============================================================
   VIP Club page — benefit cards grid
   ============================================================ */
.elvaro-vip-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 719px) {
  .elvaro-vip-benefits-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   VIP page — CTA block
   ============================================================ */
.elvaro-vip-cta-block {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  background: var(--surface-2);
  border: 1px solid rgba(232,184,95,0.2);
  border-radius: var(--radius-xl);
  margin-bottom: var(--sp-20);
}
.elvaro-vip-cta-block h2 { margin-bottom: 12px; }
.elvaro-vip-cta-block p { color: var(--fg-2); margin-bottom: 24px; }

/* ============================================================
   VIP hero — elements used in page-vip-club.php
   ============================================================ */
.elvaro-vip-hero__price-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 20px 0 28px;
  flex-wrap: wrap;
}
.elvaro-vip-hero__checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--fg-2);
}
.elvaro-vip-hero__checks li::before {
  content: '✓ ';
  color: var(--brand-yellow);
  font-weight: 700;
}
.elvaro-vip-hero__card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-gold-hi);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.elvaro-vip-hero__card-bottom { margin-top: auto; }

/* ============================================================
   Product gallery — main image counter
   ============================================================ */
.elvaro-gallery { position: relative; }
.elvaro-gallery__main {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elvaro-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.elvaro-gallery__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.elvaro-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.elvaro-gallery__thumbs::-webkit-scrollbar { display: none; }
.elvaro-gallery__thumb {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border: 2px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-2);
  padding: 0;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.elvaro-gallery__thumb.is-active { border-color: var(--brand-yellow); }
.elvaro-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Rental pricing table (single product)
   ============================================================ */
.elvaro-rental-pricing {
  margin: 20px 0;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.elvaro-rental-pricing__header,
.elvaro-rental-pricing__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.elvaro-rental-pricing__header {
  position: relative;
  background: var(--surface-1);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}
.elvaro-rental-pricing__col-head {
  display: flex;
  align-items: center;
  justify-content: center;
}
.elvaro-rental-pricing__col-head:first-child { justify-content: flex-start; }
.elvaro-rental-pricing__help-btn { display: flex; align-items: center; }
.elvaro-rental-pricing__col-head--vip {
  gap: 6px;
  color: var(--brand-yellow);
}
.elvaro-rental-pricing__col-head--vip svg { width: 14px; height: 14px; }
.elvaro-rental-pricing__row {
  padding: 18px 20px;
  border-top: 1px solid var(--hairline);
  align-items: center;
}
.elvaro-rental-pricing__row > div:first-child {
  font-size: 18px;
  font-weight: 500;
  color: var(--fg-1);
}
.elvaro-rental-pricing__row.is-popular {
  background: linear-gradient(90deg, rgba(247,183,3,0.06) 0%, rgba(247,183,3,0.10) 50%, rgba(247,183,3,0.06) 100%);
  border-top: 1px solid rgba(247,183,3,0.15);
  border-bottom: 1px solid rgba(247,183,3,0.15);
  position: relative;
}
.elvaro-rental-pricing__popular-tag {
  position: absolute;
  top: -10px;
  right: 60px;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px -2px rgba(247,183,3,0.4);
}
.elvaro-rental-pricing__price {
  font-size: 20px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: center;
}
.elvaro-rental-pricing__price--vip {
  color: var(--brand-yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.elvaro-rental-pricing__save {
  font-size: 11px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.18);
  color: var(--success);
  padding: 3px 7px;
  border-radius: 5px;
  line-height: 1;
}
.elvaro-rental-deposit {
  font-size: 12px;
  color: var(--fg-3);
  margin: 8px 0 20px;
}

/* ============================================================
   Single product page layout
   ============================================================ */
.elvaro-single-product__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 24px 0 8px;
}
.elvaro-single-product__title { font-size: var(--fs-h2); margin-bottom: 12px; }
.elvaro-single-product__category { color: var(--fg-2); font-size: 15px; margin-bottom: 16px; }
.elvaro-single-product__price { margin-bottom: 20px; }
.elvaro-single-product__lower { padding-bottom: 64px; }
.elvaro-booking-form { margin-top: 12px; }
.elvaro-booking-form .elvaro-qty-stepper { margin-top: 12px; }

/* Rental with no bookable periods — DS info box shown in place of the
   booking form (mirrors the VIP upsell note, neutral palette) */
.elvaro-rental-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}
.elvaro-rental-unavailable svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--fg-3);
}
@media (max-width: 979px) {
  .elvaro-single-product__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ============================================================
   Specs table
   ============================================================ */
.elvaro-specs-accordion {
  margin-top: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.elvaro-specs-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  color: var(--fg-1);
  font-size: 14px;
  font-weight: 700;
}
.elvaro-specs-accordion__body { background: var(--surface-1); }
.elvaro-specs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.elvaro-specs-table th,
.elvaro-specs-table td { padding: 10px 16px; text-align: left; border-top: 1px solid var(--hairline); }
.elvaro-specs-table th { color: var(--fg-3); font-weight: 500; width: 45%; }
.elvaro-specs-table td { color: var(--fg-1); font-weight: 600; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.elvaro-faq { margin-top: 48px; }
.elvaro-faq__title { font-size: var(--fs-h3); margin-bottom: 24px; }
.elvaro-faq__item { border-bottom: 1px solid var(--hairline); }
.elvaro-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-1);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.elvaro-faq__icon { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-standard); color: var(--fg-3); }
.elvaro-faq__item.is-open .elvaro-faq__icon { transform: rotate(180deg); }
.elvaro-faq__answer { display: none; padding: 0 0 18px; }
.elvaro-faq__item.is-open .elvaro-faq__answer { display: block; }
.elvaro-faq__answer p { color: var(--fg-2); font-size: 14px; line-height: var(--lh-relaxed); }

/* ============================================================
   Related products carousel ("Also bought/rented with this",
   "Add to subscription") — pure CSS, no JS sizing.

   Tracks are DEFINITE (% of container), never content-sized:
   bare 1fr tracks have an auto minimum equal to the item's
   min-content, so a lazy srcset image swapping to a larger
   candidate mid-resize used to inflate one track to the image's
   intrinsic width (feedback loop; reload picked the small
   candidate again). Definite grid-auto-columns + min-width: 0
   on cards make layout independent of image intrinsic size.
   ============================================================ */
.elvaro-related-products { margin-top: 64px; padding-bottom: 64px; }
.elvaro-related-products__title { font-size: var(--fs-h3); margin-bottom: 20px; }
.elvaro-related-products__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%; /* ~1.4 cards visible — peek hints scrollability */
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.elvaro-related-products__grid::-webkit-scrollbar { display: none; }
.elvaro-related-products__grid > * {
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  /* exactly 2 cards per view (1 gap shared) */
  .elvaro-related-products__grid { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (min-width: 980px) {
  /* exactly 4 cards per view (3 gaps shared) — 4 items fit without scrolling */
  .elvaro-related-products__grid { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}
.elvaro-related-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.elvaro-related-card:hover { border-color: var(--hairline-strong); }
.elvaro-related-card__img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.elvaro-related-card__img { width: 100%; height: 100%; object-fit: cover; }
.elvaro-related-card__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.elvaro-related-card__name { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.elvaro-related-card__price { font-size: 14px; font-weight: 700; color: var(--brand-yellow); }
.elvaro-related-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--fg-3);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
/* Rental related card (DS PDRelatedCard — rent mode) */
.elvaro-related-rental-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.elvaro-related-rental-card:hover { border-color: var(--hairline-strong); }
.elvaro-related-rental-card__img-wrap {
  aspect-ratio: 1 / 1;
  background: var(--surface-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.elvaro-related-rental-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.elvaro-related-rental-card__body { display: flex; flex-direction: column; gap: 2px; min-height: 42px; }
.elvaro-related-rental-card__title { font-size: 14px; font-weight: 700; color: var(--fg-1); line-height: 1.3; }
.elvaro-related-rental-card__sub { font-size: 12px; color: var(--fg-3); }
.elvaro-related-rental-card__pricing {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.elvaro-related-rental-card__price-col { display: flex; flex-direction: column; }
.elvaro-related-rental-card__price-col--vip { align-items: flex-end; }
.elvaro-related-rental-card__label {
  font-size: var(--fs-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--fg-3);
  line-height: 1.2;
}
.elvaro-related-rental-card__label--vip {
  color: var(--brand-yellow);
  display: flex;
  align-items: center;
  gap: 3px;
}
.elvaro-related-rental-card__label--vip svg { width: 10px; height: 10px; }
.elvaro-related-rental-card__price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.elvaro-related-rental-card__price--vip { color: var(--brand-yellow); }
.elvaro-related-rental-card__price .woocommerce-Price-amount { font: inherit; color: inherit; }

/* ============================================================
   Mobile sticky bar (single product)
   ============================================================ */
.elvaro-mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-2);
  border-top: 1px solid var(--hairline);
  padding: 12px var(--gutter-m);
  z-index: 200;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 719px) {
  .elvaro-mobile-sticky-bar { display: flex; }
}
.elvaro-mobile-sticky-bar__price { font-size: 18px; font-weight: 800; color: var(--fg-1); }
.elvaro-mobile-sticky-bar__oos { font-size: 13px; font-weight: 600; color: var(--danger); }
.elvaro-mobile-sticky-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ============================================================
   Post grid (archive / home / index fallback)
   ============================================================ */
.elvaro-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-16);
}
@media (min-width: 720px) { .elvaro-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .elvaro-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.elvaro-post-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.elvaro-post-card:hover { border-color: rgba(247,183,3,0.35); transform: translateY(-2px); }
.elvaro-post-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.elvaro-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.elvaro-post-card:hover .elvaro-post-card__thumb img { transform: scale(1.04); }
.elvaro-post-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 10px; }
.elvaro-post-card__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body-sm); color: var(--fg-3); }
.elvaro-post-card__cat { font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-yellow); text-decoration: none; }
.elvaro-post-card__cat:hover { text-decoration: underline; }
.elvaro-post-card__title { font-size: var(--fs-h4); }
.elvaro-post-card__title a { text-decoration: none; color: inherit; }
.elvaro-post-card__title a:hover { color: var(--brand-yellow); }

/* ============================================================
   Single post
   ============================================================ */
.elvaro-single-post {
  max-width: 760px;
  margin-inline: auto;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-16);
}
.elvaro-single-post__header { margin-bottom: var(--sp-6); }
.elvaro-single-post__title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
@media (min-width: 720px) { .elvaro-single-post__title { font-size: var(--fs-h1); } }
.elvaro-single-post__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body-sm); color: var(--fg-3); }
.elvaro-single-post__thumb { margin: var(--sp-6) 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; }
.elvaro-single-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.elvaro-single-post__content { margin-top: var(--sp-6); }

/* ============================================================
   Archive / page headers
   ============================================================ */
/* Breadcrumb-only strip on archive/blog pages (title suppressed) */
.elvaro-archive-crumb { padding-top: 20px; padding-bottom: 4px; }
.elvaro-archive__header { padding: 32px 0 24px; }
.elvaro-archive__title { font-size: var(--fs-h2); }
.elvaro-archive__desc { color: var(--fg-2); margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
/* Breadcrumb-only strip on generic pages (title suppressed) */
.elvaro-page-crumb {
  padding-top: 20px;
  padding-bottom: 4px;
}
.elvaro-page__header { padding: 32px 0 24px; }
.elvaro-page__title { font-size: var(--fs-h2); }
.elvaro-page__content { padding-top: var(--sp-6); padding-bottom: var(--sp-16); }
/* My Account: the global page top-padding (24px) stacks with the breadcrumb band's
   own spacing, leaving an oversized ~46px gap between the breadcrumb and the account
   cards. Drop it here — the breadcrumb band already separates them. */
.woocommerce-account .elvaro-page__content { padding-top: 0; }

/* Prose content area — used on generic WP pages (rental agreement, etc.) */
.elvaro-prose h1 { font-size: var(--fs-h2); font-weight: 700; color: var(--fg-1); line-height: var(--lh-snug); margin-bottom: var(--sp-4); }
.elvaro-prose h2 { font-size: var(--fs-h3); font-weight: 700; color: var(--fg-1); line-height: var(--lh-snug); margin: var(--sp-8) 0 var(--sp-3); }
.elvaro-prose h3 { font-size: var(--fs-body-lg); font-weight: 600; color: var(--fg-1); line-height: var(--lh-snug); margin: var(--sp-6) 0 var(--sp-2); }
.elvaro-prose h2:first-child, .elvaro-prose h3:first-child { margin-top: 0; }
.elvaro-prose p { margin-bottom: var(--sp-4); color: var(--fg-2); line-height: var(--lh-relaxed); }
.elvaro-prose p:last-child { margin-bottom: 0; }
.elvaro-prose ul, .elvaro-prose ol { padding-left: 1.5rem; margin-bottom: var(--sp-4); color: var(--fg-2); }
.elvaro-prose li { margin-bottom: var(--sp-1); line-height: var(--lh-relaxed); }
.elvaro-prose strong { color: var(--fg-1); font-weight: 600; }
.elvaro-prose em { color: var(--fg-2); font-style: italic; }
.elvaro-prose hr { border: none; border-top: 1px solid var(--hairline); margin: var(--sp-6) 0; }
.elvaro-prose a { color: var(--brand-yellow); text-decoration: none; }
.elvaro-prose a:hover { text-decoration: underline; }
.elvaro-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-6); font-size: var(--fs-body-sm); }
.elvaro-prose thead th { background: var(--surface-3); color: var(--fg-3); font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--hairline); }
.elvaro-prose tbody td { color: var(--fg-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--hairline); line-height: var(--lh-normal); vertical-align: top; }
.elvaro-prose tbody tr:nth-child(even) td { background: var(--surface-2); }

/* ============================================================
   Search form
   ============================================================ */
.elvaro-search-form { margin: 0 0 32px; }
.elvaro-search-form__row { display: flex; gap: 10px; }
.elvaro-search-form__input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
}
.elvaro-search-form__input:focus { border-color: var(--brand-yellow); box-shadow: var(--shadow-yellow-ring); }

/* ============================================================
   VIP Club — Pricing Comparison Table
   ============================================================ */
.elvaro-vip-price-table {
  max-width: 680px;
  margin: 0 auto;
}

.elvaro-vip-price-table__head,
.elvaro-vip-price-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-radius: 0;
}

.elvaro-vip-price-table__head {
  background: var(--surface-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 12px 20px;
}

.elvaro-vip-price-table__row {
  position: relative;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-1);
  transition: background var(--dur-fast);
}
.elvaro-vip-price-table__row:last-of-type { border-bottom: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.elvaro-vip-price-table__row.is-popular { background: rgba(232,184,95,0.06); border: 1px solid rgba(232,184,95,0.25); border-radius: var(--radius-md); margin: 4px 0; }

.elvaro-vip-price-table__popular {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--brand-yellow);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.elvaro-vip-price-table__cell {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.elvaro-vip-price-table__cell--label { color: var(--fg-2); font-weight: 500; }

.elvaro-vip-price-table__head .elvaro-vip-price-table__cell {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

.elvaro-vip-price-table__head .elvaro-vip-price-table__cell--vip {
  color: var(--brand-gold-hi);
  gap: 5px;
}

.elvaro-vip-price-table__cell--regular s { color: var(--fg-4); font-weight: 400; }
.elvaro-vip-price-table__cell--vip { color: var(--brand-gold-hi); font-weight: 700; }

.elvaro-vip-price-table__save-chip {
  background: rgba(34,197,94,0.12);
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.elvaro-vip-price-table__note {
  font-size: 12px;
  color: var(--fg-4);
  margin-top: 12px;
  text-align: center;
}

/* ============================================================
   VIP Club — Savings Example
   ============================================================ */
.elvaro-vip-savings {
  background: var(--surface-2);
  border: 1px solid rgba(232,184,95,0.2);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-10);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.elvaro-vip-savings__label {
  display: inline-block;
  background: rgba(232,184,95,0.12);
  color: var(--brand-gold-hi);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.elvaro-vip-savings__title {
  font-size: var(--fs-h3);
  margin-bottom: 10px;
}

.elvaro-vip-savings__sub {
  color: var(--fg-2);
  font-size: 15px;
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.elvaro-vip-savings__compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.elvaro-vip-savings__col {
  background: var(--surface-3);
  border-radius: var(--radius-lg);
  padding: 20px 32px;
  min-width: 160px;
}

.elvaro-vip-savings__col--vip {
  background: rgba(232,184,95,0.08);
  border: 1px solid rgba(232,184,95,0.3);
}

.elvaro-vip-savings__col-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.elvaro-vip-savings__col--vip .elvaro-vip-savings__col-label { color: var(--brand-gold-hi); }

.elvaro-vip-savings__col-amount {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--fg-1);
}

.elvaro-vip-savings__col-amount--vip { color: var(--brand-gold-hi); }

.elvaro-vip-savings__col-period {
  font-size: 12px;
  color: var(--fg-4);
  margin-top: 4px;
}

.elvaro-vip-savings__arrow { color: var(--fg-4); }

.elvaro-vip-savings__badge {
  display: inline-block;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
  color: var(--success);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.elvaro-vip-savings__note {
  font-size: 13px;
  color: var(--fg-4);
  margin: 0;
}

/* ============================================================
   VIP Club — How it works steps
   ============================================================ */
.elvaro-vip-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .elvaro-vip-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .elvaro-vip-steps { grid-template-columns: 1fr; }
}

.elvaro-vip-step {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  position: relative;
}

.elvaro-vip-step__num {
  font-size: 36px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--surface-4);
  line-height: 1;
  margin-bottom: 12px;
}

.elvaro-vip-step__icon {
  width: 40px;
  height: 40px;
  background: rgba(232,184,95,0.08);
  border: 1px solid rgba(232,184,95,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold-hi);
  margin-bottom: 14px;
}

.elvaro-vip-step__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.elvaro-vip-step__desc {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   No results
   ============================================================ */
.elvaro-no-results { color: var(--fg-3); padding: 32px 0; }

/* ============================================================
   Page hero (FAQ, Contact, generic pages)
   ============================================================ */
.elvaro-page-hero {
  padding-top: 40px;
  padding-bottom: 32px;
}
.elvaro-page-hero .elvaro-breadcrumb,
.elvaro-page-hero .woocommerce-breadcrumb { margin-bottom: 12px; }
.elvaro-page-hero__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1.1;
  margin-bottom: 12px;
}
.elvaro-page-hero .elvaro-prose { margin-top: 8px; }

/* ============================================================
   FAQ page
   ============================================================ */
.elvaro-faq-section {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-16);
}

/* ── Search bar ─────────────────────────────── */
.elvaro-faq-search {
  position: relative;
  margin-bottom: var(--sp-6);
}

.elvaro-faq-search__icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
}

.elvaro-faq-search input.elvaro-faq-search__input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 18px + var(--sp-2));
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--fg-1);
  transition: border-color 0.15s;
}
.elvaro-faq-search input.elvaro-faq-search__input::placeholder { color: var(--fg-4); }
.elvaro-faq-search input.elvaro-faq-search__input:focus {
  outline: none;
  border-color: rgba(247, 183, 3, 0.5);
}
.elvaro-faq-search input.elvaro-faq-search__input::-webkit-search-cancel-button { cursor: pointer; }

/* ── Empty state ─────────────────────────────── */
.elvaro-faq-empty {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  padding: var(--sp-6) 0;
  text-align: center;
  margin: 0;
}

/* ── Accordion ──────────────────────────────── */
.elvaro-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.elvaro-accordion__item {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}
.elvaro-accordion__item[open] {
  border-color: rgba(247, 183, 3, 0.5);
}

.elvaro-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--fg-1);
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.elvaro-accordion__question::-webkit-details-marker { display: none; }
.elvaro-accordion__question:hover { background: var(--surface-3); }
.elvaro-accordion__item[open] .elvaro-accordion__question {
  color: var(--brand-yellow);
}

.elvaro-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
  color: var(--fg-3);
}
.elvaro-accordion__item[open] .elvaro-accordion__chevron {
  transform: rotate(180deg);
  color: var(--brand-yellow);
}

.elvaro-accordion__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}
.elvaro-accordion__answer p:first-child { margin-top: 0; }
.elvaro-accordion__answer p:last-child  { margin-bottom: 0; }

/* ============================================================
   Contact page
   ============================================================ */
/* Breadcrumb-only strip at top of contact page (no page title) */
.elvaro-contact-crumb {
  padding-top: 20px;
  padding-bottom: 4px;
}

.elvaro-contact-map {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  line-height: 0;
}
.elvaro-contact-map iframe {
  display: block;
  width: 100%;
  height: var(--elvaro-map-h, 380px);
  border: 0;
}
/* Responsive: shrink the free map on small screens so it never dominates. */
@media (max-width: 640px) {
  .elvaro-contact-map iframe {
    height: clamp(240px, 60vw, var(--elvaro-map-h, 380px));
  }
}

/* Two-column layout: info sidebar + form */
.elvaro-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-10);
  align-items: start;
}
@media (min-width: 720px) {
  .elvaro-contact-layout {
    grid-template-columns: 260px 1fr;
    gap: var(--sp-12);
    padding-top: var(--sp-8);
  }
}
@media (min-width: 980px) {
  .elvaro-contact-layout { grid-template-columns: 300px 1fr; gap: var(--sp-16); }
}

/* Info sidebar */
.elvaro-contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.elvaro-contact-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.elvaro-contact-card:hover {
  border-color: rgba(247,183,3,0.35);
  transform: translateY(-1px);
}
.elvaro-contact-card--link {
  text-decoration: none;
  color: inherit;
}
.elvaro-contact-card--link:hover .elvaro-contact-card__value--link { color: var(--brand-yellow); }

.elvaro-contact-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--brand-yellow-soft);
  border: 1px solid var(--brand-yellow-ring);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-yellow);
}
.elvaro-contact-card__icon .elv-icon,
.elvaro-contact-card__icon svg { width: 20px; height: 20px; }

.elvaro-contact-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-bottom: 4px;
}

.elvaro-contact-card__value {
  font-size: 14px;
  color: var(--fg-1);
  line-height: 1.5;
  margin: 0;
}
.elvaro-contact-card__value--link {
  text-decoration: none;
  color: var(--fg-1);
  transition: color var(--dur-fast);
}
.elvaro-contact-card__value--link:hover { color: var(--brand-yellow); }

/* Form column */
.elvaro-contact-form-wrap { min-width: 0; }

/* Success / error notices */
.elvaro-contact-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: var(--sp-6);
}
.elvaro-contact-notice svg { flex-shrink: 0; margin-top: 1px; }
.elvaro-contact-notice--success {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: var(--success);
}
.elvaro-contact-notice--error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: var(--danger);
}

/* Form */
.elvaro-contact-form { display: flex; flex-direction: column; gap: var(--sp-4); }

.elvaro-contact-form__row { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 640px) {
  .elvaro-contact-form__row--2col { flex-direction: row; }
}

.elvaro-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.elvaro-contact-form__field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.elvaro-contact-form__field label span { color: var(--brand-yellow); }
.elvaro-contact-form__field input,
.elvaro-contact-form__field textarea {
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: 15px;
  font-family: inherit;
  padding: 12px var(--sp-4);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.elvaro-contact-form__field input::placeholder,
.elvaro-contact-form__field textarea::placeholder { color: var(--fg-4); }
.elvaro-contact-form__field input:focus,
.elvaro-contact-form__field textarea:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
.elvaro-contact-form__field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

.elvaro-contact-form__consent {
  font-size: 12px;
  color: var(--fg-4);
  line-height: 1.5;
}

/* "About" footer link */
.elvaro-contact-about {
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
  text-align: center;
}
.elvaro-contact-about p {
  color: var(--fg-3);
  font-size: 14px;
  margin: 0;
}
.elvaro-contact-about a {
  color: var(--brand-yellow);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur-fast);
}
.elvaro-contact-about a:hover { color: var(--brand-yellow-hover); }

/* ============================================================
   Subscriptions page
   ============================================================ */
.elvaro-subscriptions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.elvaro-subscriptions__card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.elvaro-subscriptions__card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.elvaro-subscriptions__card--active {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 2px rgba(247,183,3,.25);
}

.elvaro-subscriptions__status {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  z-index: 1;
}

.elvaro-subscriptions__type-badge {
  display: inline-block;
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin: 12px 12px 0;
}

.elvaro-subscriptions__image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.elvaro-subscriptions__card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.elvaro-subscriptions__card-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.elvaro-subscriptions__card-title a {
  color: var(--fg-1);
  text-decoration: none;
}
.elvaro-subscriptions__card-title a:hover { color: var(--brand-yellow); }

.elvaro-subscriptions__card-desc {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
  flex: 1;
}

.elvaro-subscriptions__card-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
}

.elvaro-subscriptions__card-actions { margin-top: auto; }

.elvaro-subscriptions__login-hint {
  margin-top: 32px;
  font-size: 14px;
  color: var(--fg-2);
  text-align: center;
}
.elvaro-subscriptions__login-hint a { color: var(--brand-yellow); }

.elvaro-subscriptions__empty {
  margin-top: 32px;
  color: var(--fg-2);
  text-align: center;
}

/* ============================================================
   Popular Grid (rental + tools homepage sections)
   ============================================================ */

/* minmax(0, 1fr), never bare 1fr (DS §3.5): a card must be able to
   shrink below its image's intrinsic min-content width. */
.elvaro-popular-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 640px) {
  .elvaro-popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .elvaro-popular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   Shared utility: text "Details" link
   ============================================================ */

.elvaro-more-link {
  color: var(--fg-1);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 0 4px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.elvaro-more-link:hover { color: var(--brand-yellow); }

/* ============================================================
   Rental Card v2 — DS vertical grid card (popular + catalog)
   ============================================================ */

.elvaro-rental-card-v2 {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base) var(--ease-standard);
  /* Size container so the pricing grid responds to card width, not viewport —
     a 2-col card at 646px is as narrow as a 1-col card, so viewport queries can't tell them apart. */
  container-type: inline-size;
}
.elvaro-rental-card-v2:hover { border-color: var(--hairline-strong); }

.elvaro-rental-card-v2__img {
  position: relative;
  aspect-ratio: 1 / 0.85;
  background:
    radial-gradient(50% 50% at 50% 55%, rgba(34,80,90,0.22) 0%, var(--surface-1) 80%),
    linear-gradient(180deg, #14181C 0%, #0B0F12 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Absolutely positioned so it never drives the container height — aspect-ratio
   on the parent is the sole source of truth regardless of natural image dimensions. */
.elvaro-rental-card-v2__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.elvaro-rental-card-v2__img-ph {
  color: var(--fg-4);
}
.elvaro-rental-card-v2__img .elvaro-product-card__placeholder {
  color: var(--fg-4);
}

.elvaro-rental-card-v2__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
}
.elvaro-rental-card-v2__badge--sale {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}

.elvaro-rental-card-v2__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--fg-1);
  line-height: 1.2;
}
.elvaro-rental-card-v2__sub {
  color: var(--fg-3);
  font-size: 13px;
  margin-top: 2px;
}
.elvaro-rental-card-v2__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
}
.elvaro-rental-card-v2__stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Price columns: stacked when the card is narrow, side by side once it has room.
   At a ~290px card the two nowrap price lines can't fit two abreast without overflowing;
   threshold is on the card's content width (≈ card − 42px), so 290px cards stack and ≥340px cards split. */
.elvaro-rental-card-v2__pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
@container (min-width: 280px) {
  .elvaro-rental-card-v2__pricing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.elvaro-rental-card-v2__col {
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--hairline);
  min-width: 0;
}
.elvaro-rental-card-v2__col--regular { background: rgba(var(--fg-rgb), 0.02); }
.elvaro-rental-card-v2__col--vip {
  background: rgba(247,183,3,0.06);
  border-color: rgba(247,183,3,0.30);
}

.elvaro-rental-card-v2__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.elvaro-rental-card-v2__col-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.elvaro-rental-card-v2__col--vip .elvaro-rental-card-v2__col-name {
  color: var(--brand-yellow);
}
.elvaro-rental-card-v2__save {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.elvaro-rental-card-v2__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  flex-wrap: nowrap;
  min-width: 0;
}
.elvaro-rental-card-v2__price-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-1);
  line-height: 1.2;
  white-space: nowrap;
}
.elvaro-rental-card-v2__price-num .woocommerce-Price-amount,
.elvaro-rental-card-v2__price-num bdi { font-size: inherit; font-weight: inherit; color: inherit; white-space: nowrap; display: inline; }
.elvaro-rental-card-v2__col--vip .elvaro-rental-card-v2__price-num { color: var(--brand-yellow); }
.elvaro-rental-card-v2__price-per { font-size: 11px; color: var(--fg-3); white-space: nowrap; }

.elvaro-rental-card-v2__deposit {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--fg-2);
}
.elvaro-rental-card-v2__deposit--vip {
  border-top-color: rgba(247,183,3,0.18);
  color: var(--success);
  font-weight: 700;
}
.elvaro-rental-card-v2__deposit b { color: var(--fg-1); font-weight: 700; }

/* Actions row: rent btn (1fr) + details link (auto) */
.elvaro-rental-card-v2__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: auto;
}
.elvaro-rental-card-v2__rent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ============================================================
   Product card updates — 1-row actions (buy + details)
   ============================================================ */

.elvaro-product-card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
}

.elvaro-product-card__img-ph {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px;
  text-align: center;
}

/* ============================================================
   Category Tile Row — horizontal carousel for catalog
   ============================================================ */

.elvaro-cat-tile-row-wrap {
  position: relative;
  margin: var(--sp-6) 0 var(--sp-4);
}

.elvaro-cat-tile-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  cursor: grab;
  user-select: none;
}
.elvaro-cat-tile-row::-webkit-scrollbar { display: none; }
.elvaro-cat-tile-row.is-dragging { cursor: grabbing; }

/* Scrollbar always visible after hint is dismissed.
   overflow-x: scroll (not auto) forces the scrollbar space to be reserved.
   Non-transparent track switches WebKit macOS from overlay to persistent mode. */
.elvaro-cat-tile-row.scroll-hint-seen {
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--fg-rgb), 0.18) rgba(var(--fg-rgb), 0.04);
  padding-bottom: 10px;
}
.elvaro-cat-tile-row.scroll-hint-seen::-webkit-scrollbar {
  display: block;
  height: 4px;
}
.elvaro-cat-tile-row.scroll-hint-seen::-webkit-scrollbar-track {
  background: rgba(var(--fg-rgb), 0.04);
  border-radius: 2px;
}
.elvaro-cat-tile-row.scroll-hint-seen::-webkit-scrollbar-thumb {
  background: rgba(var(--fg-rgb), 0.18);
  border-radius: 2px;
}

/* Scroll hint arrow button */
.elvaro-cat-scroll-hint {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, transparent 0%, var(--bg) 60%);
  border: none;
  padding: 0 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: opacity 200ms ease;
  pointer-events: all;
  z-index: 2;
}
.elvaro-cat-scroll-hint__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-1);
  flex-shrink: 0;
  transition: background var(--dur-fast);
}
.elvaro-cat-scroll-hint:hover .elvaro-cat-scroll-hint__icon {
  background: var(--surface-2);
}
.elvaro-cat-scroll-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.elvaro-cat-tile {
  flex: 0 0 auto;
  width: 130px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 10px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  user-select: none;
  -webkit-user-drag: none;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.elvaro-cat-tile-row.is-dragging .elvaro-cat-tile { cursor: grabbing; }
.elvaro-cat-tile:hover { border-color: var(--hairline-strong); }
.elvaro-cat-tile.is-active {
  border-color: rgba(247,183,3,0.55);
  box-shadow: 0 0 0 1px rgba(247,183,3,0.20);
}

.elvaro-cat-tile__icon {
  aspect-ratio: 5/3;
  background:
    radial-gradient(55% 70% at 50% 62%, rgb(var(--glow-c, 247 183 3) / 0.20) 0%, rgb(var(--glow-c, 247 183 3) / 0.04) 44%, transparent 72%),
    linear-gradient(170deg, #171a1d 0%, #0d1013 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elvaro-cat-tile__icon .elv-icon {
  width: 22px;
  height: 22px;
  color: var(--ico, rgba(247,183,3,0.80));
  opacity: 0.82;
}
.elvaro-cat-tile.is-active .elvaro-cat-tile__icon .elv-icon { opacity: 1; }

.elvaro-cat-tile__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.3;
}
.elvaro-cat-tile__count {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
}
.elvaro-cat-tile.is-active .elvaro-cat-tile__count { color: var(--brand-yellow); }

/* All-categories tile — center icon + label both axes */
.elvaro-cat-tile--all {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.elvaro-cat-tile--all .elvaro-cat-tile__icon {
  aspect-ratio: auto;
  background: none;
  color: var(--fg-2);
  padding: 4px;
}

@media (min-width: 640px) {
  .elvaro-cat-tile { width: 155px; }
}
@media (min-width: 900px) {
  .elvaro-cat-tile-row { gap: 12px; }
  .elvaro-cat-tile { width: 178px; }
}

/* Cat tile icon glow colours — mirrors category card icon rules */
.elvaro-cat-tile__icon[data-icon="drill"]     { --glow-c: 247 160 30;   --ico: #F7A820; }
.elvaro-cat-tile__icon[data-icon="grinder"]   { --glow-c: 255 120 60;   --ico: #FF783C; }
.elvaro-cat-tile__icon[data-icon="wrench"]    { --glow-c: 220 120 30;   --ico: #DC7820; }
.elvaro-cat-tile__icon[data-icon="battery"]   { --glow-c: 247 183 3;    --ico: #F7B703; }
.elvaro-cat-tile__icon[data-icon="bolt"]      { --glow-c: 255 220 60;   --ico: #FFDC3C; }
.elvaro-cat-tile__icon[data-icon="zap"]       { --glow-c: 100 195 255;  --ico: #64C3FF; }
.elvaro-cat-tile__icon[data-icon="leaf"]      { --glow-c: 72 190 72;    --ico: #48BE48; }
.elvaro-cat-tile__icon[data-icon="ruler"]     { --glow-c: 140 175 255;  --ico: #8CAFFF; }
.elvaro-cat-tile__icon[data-icon="shield"]    { --glow-c: 80 140 255;   --ico: #5080FF; }
.elvaro-cat-tile__icon[data-icon="lock"]      { --glow-c: 80 140 255;   --ico: #5080FF; }
.elvaro-cat-tile__icon[data-icon="crown"]     { --glow-c: 255 210 50;   --ico: #FFD232; }
.elvaro-cat-tile__icon[data-icon="award"]     { --glow-c: 255 210 50;   --ico: #FFD232; }
.elvaro-cat-tile__icon[data-icon="package"]   { --glow-c: 200 155 95;   --ico: #C89B5F; }
.elvaro-cat-tile__icon[data-icon="truck"]     { --glow-c: 200 155 95;   --ico: #C89B5F; }
.elvaro-cat-tile__icon[data-icon="cart"]      { --glow-c: 247 183 3;    --ico: #F7B703; }
.elvaro-cat-tile__icon[data-icon="tag"]       { --glow-c: 180 130 255;  --ico: #B482FF; }
.elvaro-cat-tile__icon[data-icon="globe"]     { --glow-c: 60 200 200;   --ico: #3CC8C8; }
.elvaro-cat-tile__icon[data-icon="pin"]       { --glow-c: 255 90 90;    --ico: #FF5A5A; }
.elvaro-cat-tile__icon[data-icon="headphones"]{ --glow-c: 180 130 255;  --ico: #B482FF; }
.elvaro-cat-tile__icon[data-icon="phone"]     { --glow-c: 72 190 100;   --ico: #48BE64; }
.elvaro-cat-tile__icon[data-icon="clock"]     { --glow-c: 140 175 255;  --ico: #8CAFFF; }
.elvaro-cat-tile__icon[data-icon="calendar"]  { --glow-c: 140 175 255;  --ico: #8CAFFF; }
.elvaro-cat-tile__icon[data-icon="search"]    { --glow-c: 200 200 200;  --ico: #C8C8C8; }
.elvaro-cat-tile__icon[data-icon="user"]      { --glow-c: 180 130 255;  --ico: #B482FF; }
.elvaro-cat-tile__icon[data-icon="arrow"]     { --glow-c: 247 183 3;    --ico: #F7B703; }

/* ============================================================
   DS Catalog Filter Bar (replaces old elvaro-filter-bar)
   ============================================================ */

.elvaro-ds-filter-wrap {
  padding: var(--sp-4) 0;
}

.elvaro-ds-filter-bar {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.04) inset;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 900px) {
  .elvaro-ds-filter-bar {
    display: grid;
    grid-template-columns: minmax(180px,220px) minmax(220px,1fr) minmax(160px,200px);
    gap: 24px;
    align-items: start;
  }
}

.elvaro-ds-filter-bar__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-3);
  margin-bottom: 6px;
}

/* Category dropdown */
.elvaro-ds-cat-dropdown {
  position: relative;
}
.elvaro-ds-cat-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--fg-1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.elvaro-ds-cat-btn:hover { border-color: rgba(var(--fg-rgb), 0.24); }
.elvaro-ds-cat-btn__chevron {
  display: inline-flex;
  color: var(--fg-3);
  transition: transform var(--dur-fast);
}
.elvaro-ds-cat-dropdown.is-open .elvaro-ds-cat-btn__chevron {
  transform: rotate(180deg);
}

.elvaro-ds-cat-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 6px;
  z-index: 20;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.85);
}
.elvaro-ds-cat-dropdown.is-open .elvaro-ds-cat-list { display: block; }

.elvaro-ds-cat-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.elvaro-ds-cat-option:hover { background: rgba(var(--fg-rgb), 0.04); color: var(--fg-1); }
.elvaro-ds-cat-option.is-active {
  background: rgba(247,183,3,0.10);
  color: var(--brand-yellow);
  font-weight: 600;
}
.elvaro-ds-cat-option__count {
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* Condition chips */
.elvaro-ds-cond-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.elvaro-ds-cond-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.elvaro-ds-cond-chip:hover { border-color: rgba(var(--fg-rgb), 0.24); color: var(--fg-1); }
.elvaro-ds-cond-chip.is-active {
  background: rgba(247,183,3,0.12);
  border-color: rgba(247,183,3,0.55);
  color: var(--fg-1);
}
.elvaro-ds-cond-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Condition custom select (shown when chips wrap to 2 rows) ── */
.elvaro-ds-cond-select { position: relative; }

.elvaro-ds-cond-select__trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.elvaro-ds-cond-select__trigger:hover { border-color: rgba(var(--fg-rgb), 0.24); color: var(--fg-1); }
.elvaro-ds-cond-select__trigger.is-active {
  background: rgba(247,183,3,0.12);
  border-color: rgba(247,183,3,0.55);
  color: var(--fg-1);
}

.elvaro-ds-cond-select__label { flex: 1; }

.elvaro-ds-cond-select__chevron {
  flex-shrink: 0;
  color: var(--fg-4);
  transition: transform var(--dur-fast);
}
.elvaro-ds-cond-select.is-open .elvaro-ds-cond-select__chevron { transform: rotate(180deg); }

.elvaro-ds-cond-select__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  min-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 4px;
  margin: 0;
  list-style: none;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.elvaro-ds-cond-select.is-open .elvaro-ds-cond-select__dropdown { display: block; }

.elvaro-ds-cond-select__all-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(var(--fg-rgb), 0.15);
  border: 1px solid var(--hairline-strong);
}

.elvaro-ds-cond-select__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.elvaro-ds-cond-select__opt:hover { background: rgba(var(--fg-rgb), 0.06); color: var(--fg-1); }
.elvaro-ds-cond-select__opt.is-selected { color: var(--fg-1); font-weight: 600; }

/* Price + reset */
.elvaro-ds-price-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}
.elvaro-ds-price-vals {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.elvaro-ds-reset-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-yellow);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.elvaro-ds-reset-link:hover { text-decoration: underline; }

/* Toolbar (result count + per-page + sort) */
.elvaro-ds-filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.elvaro-ds-filter-toolbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  width: 100%;
}

@media (min-width: 640px) {
  .elvaro-ds-filter-toolbar__right { width: auto; }
  .elvaro-ordering { flex: none; }
  .elvaro-ordering__select-wrap { flex: none; }
  .elvaro-ordering__select-wrap .orderby { width: auto; }
}

@media (min-width: 720px) {
  .elvaro-ds-filter-toolbar { flex-wrap: nowrap; }
}

/* Result count */
.elvaro-result-count {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1;
}
.elvaro-result-count strong {
  color: var(--fg-1);
  font-weight: 700;
}

/* Ordering form */
.elvaro-ordering {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.elvaro-ordering__label {
  font-size: 14px;
  color: var(--fg-2);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
}

.elvaro-ordering__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.elvaro-ordering__select-wrap .orderby {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 36px 8px 14px;
  color: var(--fg-1);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast);
  width: 100%;
  min-width: 0;
}
.elvaro-ordering__select-wrap .orderby:hover,
.elvaro-ordering__select-wrap .orderby:focus {
  border-color: var(--hairline-strong);
}

.elvaro-ordering__chevron {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--fg-3);
}

/* Per-page select — same visual as ordering */
.elvaro-per-page {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.elvaro-per-page__label {
  font-size: 14px;
  color: var(--fg-2);
  white-space: nowrap;
  cursor: default;
}
.elvaro-per-page__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.elvaro-per-page__select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 36px 8px 14px;
  color: var(--fg-1);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast);
  min-width: 64px;
}
.elvaro-per-page__select:hover,
.elvaro-per-page__select:focus {
  border-color: var(--hairline-strong);
}
.elvaro-per-page__chevron {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--fg-3);
}

/* Product card — no-image placeholder */
.elvaro-product-card__image-wrap--no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.elvaro-product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--fg-4);
}

/* ============================================================
   VIP Club Block — new DS design
   ============================================================ */

.elvaro-vip-club-wrap {
  margin-top: var(--sp-16);
}

.elvaro-vip-club {
  background:
    radial-gradient(70% 100% at 0% 50%, rgba(232,184,95,0.10), transparent 60%),
    var(--surface-2);
  border: 1px solid rgba(232,184,95,0.30);
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.04) inset, 0 24px 48px -16px rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 3-column grid only once it actually fits; below this the section
   uses the stacked/centered flex layout (no horizontal overflow). */
@media (min-width: 1080px) {
  .elvaro-vip-club {
    display: grid;
    grid-template-columns: 1.4fr auto auto;
    gap: 36px;
    align-items: center;
  }
}

/* Left: heading + benefits grid */
.elvaro-vip-club__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.elvaro-vip-club__heading h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.1;
}
.elvaro-vip-club__heading .elv-icon {
  width: 32px;
  height: 32px;
  color: var(--brand-yellow);
  flex-shrink: 0;
}
.elvaro-vip-club__tagline {
  color: rgba(var(--fg-rgb), 0.78);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 22px;
}

.elvaro-vip-club__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 639px) {
  .elvaro-vip-club__benefits { grid-template-columns: repeat(2, 1fr); }
}

.elvaro-vip-club__benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.elvaro-vip-club__benefit:hover {
  border-color: rgba(232,184,95,0.30);
  background: var(--surface-2);
}
.elvaro-vip-club__benefit-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(247,183,3,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-standard);
}
.elvaro-vip-club__benefit:hover .elvaro-vip-club__benefit-icon {
  background: rgba(247,183,3,0.20);
}
.elvaro-vip-club__benefit-icon .elv-icon {
  width: 18px;
  height: 18px;
  color: var(--brand-yellow);
}
.elvaro-vip-club__benefit-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--fg-rgb), 0.86);
  line-height: 1.3;
}

/* Middle: pricing column */
.elvaro-vip-club__pricing {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 200px;
}
.elvaro-vip-club__price-label {
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.elvaro-vip-club__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--brand-yellow);
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.elvaro-vip-club__price-sub {
  font-size: 14px;
  color: var(--fg-3);
  font-weight: 500;
}
.elvaro-vip-club__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--fg-2);
}
.elvaro-vip-club__checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.elvaro-vip-club__checklist-item svg { flex-shrink: 0; }

/* Right: membership card */
.elvaro-vip-club__card {
  width: 240px;
  aspect-ratio: 1.6 / 1;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(232,184,95,0.32) 0%, transparent 55%),
    linear-gradient(135deg, #0F0E0C 0%, #1B150A 60%, #2A1F0E 100%);
  border: 1px solid rgba(232,184,95,0.40);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 32px 64px -16px rgba(0,0,0,0.85);
  transform: rotate(-3deg);
  flex-shrink: 0;
}
.elvaro-vip-club__card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-gold-hi);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.elvaro-vip-club__card-top .elv-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-gold-hi);
}
.elvaro-vip-club__card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--fg-1);
  letter-spacing: 0.04em;
}
.elvaro-vip-club__card-member {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  color: var(--brand-gold-hi);
  letter-spacing: 0.10em;
  margin-top: 6px;
}

/* Stacked: card on top, centered layout (everything below the 3-col grid) */
@media (max-width: 1079px) {
  .elvaro-vip-club {
    padding: 24px 20px;
    align-items: center;
    text-align: center;
  }
  .elvaro-vip-club__card {
    width: 100%;
    max-width: 240px;
    transform: none;
    order: -1;
  }
  .elvaro-vip-club__heading { justify-content: center; }
  .elvaro-vip-club__tagline { text-align: center; }
  .elvaro-vip-club__checklist { align-items: flex-start; align-self: stretch; }
  .elvaro-vip-club__pricing { align-items: center; }
}

/* ============================================================
   How It Works — hover effects + 5-step grid variants
   ============================================================ */

/* Step hover: icon brightens, title goes white, border lifts */
.elvaro-how__step {
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
  cursor: default;
}
.elvaro-how__step:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-3);
}
.elvaro-how__step-icon {
  transition: color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.elvaro-how__step:hover .elvaro-how__step-icon {
  color: var(--brand-yellow);
  transform: scale(1.12);
}
.elvaro-how__step-title {
  transition: color var(--dur-base) var(--ease-standard);
}
.elvaro-how__step:hover .elvaro-how__step-title { color: var(--fg-1); }

/* 3-step and 5-step grid columns at desktop */
@media (min-width: 1180px) {
  .elvaro-how__steps--3 { grid-template-columns: 1fr 36px 1fr 36px 1fr; }
  .elvaro-how__steps--5 { grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr 36px 1fr; }
}

/* ============================================================
   Trust Row — hover effects
   ============================================================ */

.elvaro-bottom-trust-item {
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
  cursor: default;
}
.elvaro-bottom-trust-item:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-3);
}
.elvaro-bottom-trust-item__icon {
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.elvaro-bottom-trust-item:hover .elvaro-bottom-trust-item__icon {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  transform: scale(1.1);
}
.elvaro-bottom-trust-item__title {
  transition: color var(--dur-base) var(--ease-standard);
}
.elvaro-bottom-trust-item:hover .elvaro-bottom-trust-item__title { color: var(--fg-1); }

/* 3, 5, 6 item variants at larger breakpoints */
@media (min-width: 980px) {
  .elvaro-bottom-trust--3 { grid-template-columns: repeat(3, 1fr); }
  .elvaro-bottom-trust--5 { grid-template-columns: repeat(5, 1fr); }
  .elvaro-bottom-trust--6 { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   Pagination
   ============================================================ */

.elvaro-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-8) 0 var(--sp-6);
  flex-wrap: wrap;
}

.elvaro-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  user-select: none;
}

a.elvaro-pagination__btn:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
  color: var(--fg-1);
}

.elvaro-pagination__btn.is-active {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--fg-on-yellow);
  cursor: default;
}

.elvaro-pagination__btn.is-disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.elvaro-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--fg-3);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Hero Reviews Row — avatar strip below hero slider
   ============================================================ */

.elvaro-hero-reviews-row {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.elvaro-reviews {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
}

.elvaro-reviews__avatars {
  display: flex;
}

.elvaro-reviews__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-1);
  margin-left: -8px;
  flex-shrink: 0;
  user-select: none;
}

.elvaro-reviews__avatar:first-child {
  margin-left: 0;
}

.elvaro-reviews__label {
  font-size: 12px;
  color: var(--fg-2);
  white-space: nowrap;
}

.elvaro-reviews__label strong {
  color: var(--fg-1);
  font-weight: 700;
}

@media (min-width: 640px) {
  .elvaro-reviews__avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
    margin-left: -10px;
  }

  .elvaro-reviews__avatar:first-child {
    margin-left: 0;
  }

  .elvaro-reviews__label {
    font-size: 13px;
  }
}

/* ============================================================
   VIP Club page — chip interiors + card bottom
   ============================================================ */

.elvaro-vip-card__bottom {
  display: flex;
  flex-direction: column;
}

.elvaro-vip-hero__card .elvaro-vip-card__top {
  font-size: 14px;
  gap: 8px;
}

.elvaro-vip-hero__card .elvaro-vip-card__name {
  font-size: 32px;
}

.elvaro-vip-hero__card .elvaro-vip-card__member {
  font-size: 13px;
  margin-top: 4px;
}

.elvaro-vip-hero__chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-yellow);
}

.elvaro-vip-hero__chip-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.2;
}

.elvaro-vip-hero__chip-sub {
  font-size: 10px;
  color: var(--fg-3);
  line-height: 1.3;
  margin-top: 2px;
}

.elvaro-vip-hero__card-glow {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 200px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(232,184,95,0.45) 0%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}

.elvaro-vip-hero__card-shadow {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(232,184,95,0.28) 0%, transparent 70%);
}

.elvaro-vip-hero__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   VIP Club — Compare table
   ============================================================ */

.elvaro-vip-compare {
  padding: 32px var(--gutter-m) 56px;
  max-width: var(--container);
  margin: 0 auto;
}

.elvaro-vip-compare__head {
  text-align: center;
  margin-bottom: 28px;
}

.elvaro-vip-compare__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: rgba(var(--fg-rgb), 0.02);
}

.elvaro-vip-compare__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-yellow);
  box-shadow: 0 0 8px var(--brand-yellow);
  display: inline-block;
}

.elvaro-vip-compare__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.1;
}

.elvaro-vip-compare__title em {
  font-style: normal;
  color: var(--brand-yellow);
}

.elvaro-vip-compare__sub {
  font-size: 14px;
  color: var(--fg-3);
  margin: 10px 0 0;
}

.elvaro-vip-compare__card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.7);
}

.elvaro-vip-compare__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 12px;
}

.elvaro-vip-compare__col {
  padding: 14px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.elvaro-vip-compare__col--vip {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(247,183,3,0.18) 0%, transparent 70%),
    rgba(247,183,3,0.04);
  border: 1px solid rgba(247,183,3,0.55);
  color: var(--brand-yellow);
  box-shadow: 0 12px 32px -12px rgba(247,183,3,0.4);
}

.elvaro-vip-compare__col--reg {
  background: rgba(var(--fg-rgb), 0.02);
  border: 1px solid var(--hairline-strong);
  color: var(--fg-3);
}

.elvaro-vip-compare__col-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fg-4);
  flex-shrink: 0;
}

.elvaro-vip-compare__col-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.elvaro-vip-compare__col--reg .elvaro-vip-compare__col-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-3);
}

.elvaro-vip-compare__col-price {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  color: rgba(247,183,3,0.75);
}

.elvaro-vip-compare__col--reg .elvaro-vip-compare__col-price {
  color: var(--fg-4);
}

.elvaro-vip-compare__group {
  padding: 12px 24px 6px;
  font-size: 10px;
  color: var(--fg-4);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}

.elvaro-vip-compare__group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.elvaro-vip-compare__row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 14px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.05);
  transition: background var(--dur-fast);
}

.elvaro-vip-compare__row:hover {
  background: rgba(var(--fg-rgb), 0.03);
}

.elvaro-vip-compare__row.is-first {
  border-top: none;
}

.elvaro-vip-compare__row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(247,183,3,0.08);
  border: 1px solid rgba(247,183,3,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-yellow);
}

.elvaro-vip-compare__row-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-1);
}

.elvaro-vip-compare__row-prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.elvaro-vip-compare__row-vip {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--brand-yellow);
  letter-spacing: -0.01em;
  line-height: 1;
}

.elvaro-vip-compare__row-vip.is-free {
  color: var(--success);
}

.elvaro-vip-compare__row-arrow {
  color: var(--fg-4);
  font-size: 13px;
}

.elvaro-vip-compare__row-reg {
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: line-through;
  text-decoration-color: var(--fg-4);
  font-weight: 600;
}

.elvaro-vip-compare__row-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: var(--success-soft);
  border: 1px solid rgba(34,197,94,0.28);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--success);
  font-weight: 700;
  white-space: nowrap;
}

.elvaro-vip-compare__foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 8px;
  padding: 14px 20px;
  background: linear-gradient(90deg, rgba(34,197,94,0.10) 0%, rgba(247,183,3,0.10) 100%);
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 12px;
}

.elvaro-vip-compare__foot-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.elvaro-vip-compare__foot-msg strong {
  color: var(--fg-1);
  font-weight: 800;
}

.elvaro-vip-compare__foot-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--success);
}

.elvaro-vip-compare__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  padding: 11px 16px;
  border-radius: 10px;
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.18) inset, 0 8px 20px -8px rgba(247,183,3,0.6);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast);
  width: auto;
  flex-shrink: 0;
}

.elvaro-vip-compare__cta:hover {
  background: var(--brand-yellow-hover);
  color: var(--fg-on-yellow);
}

@media (min-width: 720px) {
  .elvaro-vip-compare { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
  .elvaro-vip-compare__cols { grid-template-columns: 1fr 1fr; gap: 12px; }
  .elvaro-vip-compare__row { column-gap: 16px; }
  .elvaro-vip-compare__row-label { font-size: 14px; }
  .elvaro-vip-compare__row-vip { font-size: 20px; }
  .elvaro-vip-compare__row-reg { font-size: 13px; }
}

@media (min-width: 980px) {
  .elvaro-vip-compare { padding-left: var(--gutter-d); padding-right: var(--gutter-d); }
}

/* ============================================================
   VIP Club — Savings Receipt
   ============================================================ */

.elvaro-vip-savings-section {
  padding: 32px var(--gutter-m) 56px;
}

.elvaro-vip-savings-section__head {
  text-align: center;
  margin-bottom: 28px;
}

.elvaro-vip-savings-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(247,183,3,0.08);
  border: 1px solid rgba(247,183,3,0.25);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--brand-yellow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.elvaro-vip-savings-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.1;
}

.elvaro-vip-receipt {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.04) inset, 0 24px 48px -16px rgba(0,0,0,0.7);
}

.elvaro-vip-receipt__head {
  display: grid;
  grid-template-columns: 1fr auto 16px auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--hairline-strong);
  margin-bottom: 4px;
}

.elvaro-vip-receipt__col-service {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.elvaro-vip-receipt__col-reg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.elvaro-vip-receipt__col-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fg-4);
  display: inline-block;
}

.elvaro-vip-receipt__col-vip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-yellow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.elvaro-vip-receipt__row {
  display: grid;
  grid-template-columns: 1fr auto 16px auto;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0;
  font-size: 14px;
}

.elvaro-vip-receipt__row-label {
  color: var(--fg-2);
  font-weight: 500;
}

.elvaro-vip-receipt__row-was {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-4);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}

.elvaro-vip-receipt__row-arrow {
  text-align: center;
  color: rgba(247,183,3,0.65);
  font-size: 14px;
  line-height: 1;
}

.elvaro-vip-receipt__row-now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

.elvaro-vip-receipt__row-now.is-free {
  color: var(--success);
}

.elvaro-vip-receipt__total {
  display: grid;
  grid-template-columns: 1fr auto 16px auto;
  align-items: baseline;
  gap: 8px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--hairline-strong);
  margin-top: 8px;
}

.elvaro-vip-receipt__total-label {
  font-size: 13px;
  color: var(--fg-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.elvaro-vip-receipt__total-was {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--fg-4);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}

.elvaro-vip-receipt__total-now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--brand-yellow);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

.elvaro-vip-receipt__stamp {
  position: absolute;
  right: 4px;
  bottom: -22px;
  transform: rotate(-6deg);
  padding: 10px 18px;
  background: linear-gradient(180deg, #103D24 0%, #0B2818 100%);
  border: 1.5px solid rgba(34,197,94,0.7);
  border-radius: 10px;
  box-shadow: 0 16px 32px -8px rgba(34,197,94,0.4), 0 1px 0 0 rgba(var(--fg-rgb), 0.06) inset;
  display: flex;
  align-items: baseline;
  gap: 10px;
  pointer-events: none;
}

.elvaro-vip-receipt__stamp-label {
  font-size: 10px;
  color: rgba(var(--fg-rgb), 0.7);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.elvaro-vip-receipt__stamp-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--success);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.elvaro-vip-savings-section__footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 36px;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.elvaro-text-success { color: var(--success); }

@media (min-width: 720px) {
  .elvaro-vip-savings-section { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
  .elvaro-vip-receipt { padding: 24px; }
  .elvaro-vip-receipt__stamp { right: -8px; }
  .elvaro-vip-receipt__head { grid-template-columns: 1fr auto 24px auto; gap: 16px; }
  .elvaro-vip-receipt__row { grid-template-columns: 1fr auto 24px auto; gap: 16px; }
  .elvaro-vip-receipt__total { grid-template-columns: 1fr auto 24px auto; gap: 16px; }
}

@media (min-width: 980px) {
  .elvaro-vip-savings-section { padding-left: var(--gutter-d); padding-right: var(--gutter-d); }
  .elvaro-vip-receipt { padding: 32px 36px 28px; }
  .elvaro-vip-receipt__stamp { right: -16px; }
}

/* ============================================================
   VIP Club — How it works
   ============================================================ */

.elvaro-vip-how {
  padding: 32px var(--gutter-m) 56px;
  max-width: var(--container);
  margin: 0 auto;
}

.elvaro-vip-how__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-align: center;
  margin: 0 0 32px;
}

.elvaro-vip-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.elvaro-vip-how__step {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.elvaro-vip-how__step:hover {
  border-color: rgba(247,183,3,0.4);
  transform: translateY(-2px);
}

.elvaro-vip-how__step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.elvaro-vip-how__step-num {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(247,183,3,0.14);
  color: var(--brand-yellow);
  border: 1px solid rgba(247,183,3,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}

.elvaro-vip-how__step-icon {
  color: var(--fg-4);
}

.elvaro-vip-how__step-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.3;
  margin-top: 6px;
}

.elvaro-vip-how__step-desc {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
}

.elvaro-vip-how__step-arrow {
  display: none;
  position: absolute;
  right: -12px;
  top: 36px;
  z-index: 2;
  color: var(--brand-yellow);
  font-size: 18px;
  line-height: 1;
}

@media (min-width: 640px) {
  .elvaro-vip-how__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .elvaro-vip-how { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
}

@media (min-width: 980px) {
  .elvaro-vip-how { padding-left: var(--gutter-d); padding-right: var(--gutter-d); }
  .elvaro-vip-how__grid { grid-template-columns: repeat(4, 1fr); }
  .elvaro-vip-how__step-arrow { display: block; }
}

/* ============================================================
   VIP Club — Parcel row
   ============================================================ */

.elvaro-vip-parcel-row {
  padding: 0 var(--gutter-m) 56px;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

.elvaro-vip-parcel-row__terminal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.elvaro-vip-parcel-row__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.elvaro-vip-parcel-row__item {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.elvaro-vip-parcel-row__item:hover {
  border-color: rgba(247,183,3,0.35);
  transform: translateY(-1px);
}

.elvaro-vip-parcel-row__item-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-yellow);
}

.elvaro-vip-parcel-row__item-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
  line-height: 1.3;
}

.elvaro-vip-parcel-row__item-desc {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
  margin-top: 4px;
}

@media (min-width: 720px) {
  .elvaro-vip-parcel-row { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
}

@media (min-width: 980px) {
  .elvaro-vip-parcel-row {
    padding-left: var(--gutter-d);
    padding-right: var(--gutter-d);
    grid-template-columns: 1.4fr 1fr;
  }
  .elvaro-vip-parcel-row__terminal { min-height: 280px; }
}

/* ============================================================
   VIP Club — Final CTA banner
   ============================================================ */

.elvaro-vip-final-cta {
  padding: 0 var(--gutter-m) 56px;
  max-width: var(--container);
  margin: 0 auto;
}

.elvaro-vip-final-cta__card {
  position: relative;
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(232,184,95,0.12), transparent 60%),
    radial-gradient(50% 100% at 100% 50%, rgba(247,183,3,0.10), transparent 60%),
    var(--surface-2);
  border: 1px solid rgba(247,183,3,0.35);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  overflow: hidden;
}

.elvaro-vip-final-cta__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.elvaro-vip-final-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.05;
}

.elvaro-vip-final-cta__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.elvaro-vip-final-cta__price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--brand-yellow);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.elvaro-vip-final-cta__price-period {
  font-size: 15px;
  color: var(--fg-3);
  font-weight: 500;
}

.elvaro-vip-final-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}

.elvaro-vip-final-cta__actions .btn {
  text-align: center;
  justify-content: center;
}

.elvaro-vip-final-cta__note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-3);
}

.elvaro-vip-final-cta__card-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
}

.elvaro-vip-final-cta__card-glow {
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(232,184,95,0.18), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

@media (min-width: 720px) {
  .elvaro-vip-final-cta { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
  .elvaro-vip-final-cta__card { padding: 36px 40px; }
  .elvaro-vip-final-cta__title { font-size: clamp(28px, 3.5vw, 40px); }
  .elvaro-vip-final-cta__actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .elvaro-vip-final-cta__actions .btn { text-align: left; justify-content: flex-start; }
}

@media (min-width: 980px) {
  .elvaro-vip-final-cta { padding-left: var(--gutter-d); padding-right: var(--gutter-d); }
  .elvaro-vip-final-cta__card { grid-template-columns: 1fr 280px; padding: 48px 56px; gap: 48px; }
  .elvaro-vip-final-cta__card-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
}

/* ============================================================
   VIP Club — Bottom trust row
   ============================================================ */

.elvaro-vip-bottom-trust {
  padding: 0 var(--gutter-m) 56px;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.elvaro-vip-bottom-trust__item {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.elvaro-vip-bottom-trust__item:hover {
  border-color: rgba(247,183,3,0.35);
  transform: translateY(-1px);
}

.elvaro-vip-bottom-trust__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-yellow);
}

.elvaro-vip-bottom-trust__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.3;
  margin-bottom: 4px;
}

.elvaro-vip-bottom-trust__desc {
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.4;
}

@media (min-width: 640px) {
  .elvaro-vip-bottom-trust { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .elvaro-vip-bottom-trust { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
}

@media (min-width: 980px) {
  .elvaro-vip-bottom-trust {
    padding-left: var(--gutter-d);
    padding-right: var(--gutter-d);
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   Subscription landing pages (Battery / Tool)
   ============================================================ */

.elvaro-sub-page {
  background: var(--bg);
  color: var(--fg-1);
}

/* ---- Hero ---- */
.elvaro-sub-hero {
  padding: 32px var(--gutter-m) 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.elvaro-sub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, var(--sub-accent-soft) 0%, transparent 70%);
  pointer-events: none;
}

.elvaro-sub-hero > * { position: relative; }

.elvaro-sub-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 6px 14px;
  border: 1px solid var(--sub-accent-border-soft);
  background: var(--sub-accent-softer);
  border-radius: var(--radius-pill);
  color: var(--sub-accent);
  margin-bottom: 24px;
}

.elvaro-sub-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sub-accent);
  box-shadow: 0 0 10px var(--sub-accent);
}

.elvaro-sub-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 auto;
  max-width: 920px;
}

.elvaro-sub-hero__title em {
  font-style: normal;
  color: var(--sub-accent);
}

.elvaro-sub-hero__sub {
  font-size: 14px;
  color: var(--fg-2);
  max-width: 640px;
  margin: 22px auto 0;
  line-height: 1.55;
}

.elvaro-sub-hero__cta-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 8px 8px 8px 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: rgba(var(--fg-rgb), 0.02);
}

.elvaro-sub-hero__cta-row .btn {
  border-radius: var(--radius-pill);
}

.elvaro-sub-page .btn-primary {
  background: var(--sub-accent);
  color: var(--bg);
  box-shadow: 0 0 0 0 transparent;
}
.elvaro-sub-page .btn-primary:hover {
  background: var(--sub-accent-dark);
  transform: translateY(-0.5px);
}
.elvaro-sub-page .btn-primary:active {
  background: var(--sub-accent-dark);
  transform: translateY(1px);
}
.elvaro-sub-page .btn-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--sub-accent-soft);
}

.elvaro-sub-hero__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--fg-1);
}

.elvaro-sub-hero__price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  margin-left: 4px;
}

.elvaro-sub-hero__stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--hairline);
}

.elvaro-sub-hero__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--sub-accent);
  letter-spacing: -0.02em;
}

.elvaro-sub-hero__stat-lbl {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 4px;
  line-height: 1.4;
}

/* ---- Features ---- */
.elvaro-sub-features {
  padding: 32px var(--gutter-m) 28px;
}

.elvaro-sub-features__head {
  text-align: center;
  margin-bottom: 40px;
}

.elvaro-sub-features__eyebrow {
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.elvaro-sub-features__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -0.02em;
  margin: 0;
}

.elvaro-sub-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.elvaro-sub-feat-card {
  padding: 28px 24px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.elvaro-sub-feat-card:hover {
  border-color: var(--sub-accent-border);
  transform: translateY(-2px);
}

.elvaro-sub-feat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sub-accent-soft);
  border: 1px solid var(--sub-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--sub-accent);
}

.elvaro-sub-feat-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-1);
  margin: 0 0 6px;
}

.elvaro-sub-feat-card__desc {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.45;
}

/* ---- How it works ---- */
.elvaro-sub-how {
  padding: 32px var(--gutter-m) 40px;
}

.elvaro-sub-how__head {
  text-align: center;
  margin-bottom: 40px;
}

.elvaro-sub-how__eyebrow {
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.elvaro-sub-how__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -0.02em;
  margin: 0;
}

.elvaro-sub-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  position: relative;
}

.elvaro-sub-how__step {
  padding: 32px 28px 28px;
  background: linear-gradient(180deg, var(--sub-accent-softer) 0%, transparent 100%);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  position: relative;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.elvaro-sub-how__step:hover {
  border-color: var(--sub-accent-border-soft);
  transform: translateY(-2px);
}

.elvaro-sub-how__step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  color: var(--sub-accent);
  letter-spacing: -0.04em;
  line-height: 0.85;
  margin-bottom: 22px;
  opacity: 0.9;
}

.elvaro-sub-how__step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--fg-1);
}

.elvaro-sub-how__step-desc {
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 0;
}

.elvaro-sub-how__step-arrow {
  display: none;
  position: absolute;
  right: -22px;
  top: 48px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--sub-accent-border-soft);
  color: var(--sub-accent);
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 14px;
  line-height: 1;
}

/* ---- Final CTA ---- */
.elvaro-sub-final {
  padding: 0 var(--gutter-m) 56px;
}

.elvaro-sub-final__card {
  background: linear-gradient(135deg, var(--sub-accent) 0%, var(--sub-accent-dark) 100%);
  color: var(--fg-on-yellow);
  border-radius: 24px;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  box-shadow: 0 32px 64px -24px var(--sub-glow, rgba(34,197,94,0.45));
}

.elvaro-sub-final__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--fg-on-yellow);
}

.elvaro-sub-final__sub {
  font-size: 15px;
  color: rgba(var(--bg-rgb), 0.78);
  margin: 12px 0 0;
  max-width: 480px;
  line-height: 1.5;
}

.elvaro-sub-final__btn {
  background: var(--bg);
  color: var(--sub-accent);
  padding: 18px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity var(--dur-fast);
  width: 100%;
}

.elvaro-sub-final__btn:hover { opacity: 0.85; }

/* ---- Bottom trust ---- */
.elvaro-sub-trust {
  padding: 28px var(--gutter-m) 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid var(--hairline);
}

.elvaro-sub-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.elvaro-sub-trust__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg-3);
}

.elvaro-sub-trust__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
  margin: 0 0 4px;
}

.elvaro-sub-trust__desc {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.4;
}

/* ---- Responsive ---- */
@media (min-width: 640px) {
  .elvaro-sub-features__grid { grid-template-columns: repeat(2, 1fr); }
  .elvaro-sub-trust { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .elvaro-sub-hero { padding: 40px var(--gutter-t) 48px; }
  .elvaro-sub-hero__title { font-size: clamp(40px, 6vw, 76px); }
  .elvaro-sub-hero__sub { font-size: 17px; }
  .elvaro-sub-hero__stats { flex-direction: row; justify-content: center; gap: 56px; margin-top: 56px; }
  .elvaro-sub-hero__stat-num { font-size: 36px; }
  .elvaro-sub-features { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
  .elvaro-sub-how { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
  .elvaro-sub-how__grid { grid-template-columns: repeat(3, 1fr); }
  .elvaro-sub-final { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
  .elvaro-sub-final__card { grid-template-columns: 1.4fr auto; padding: 40px; gap: 32px; }
  .elvaro-sub-final__title { font-size: clamp(24px, 3vw, 40px); }
  .elvaro-sub-final__btn { width: auto; padding: 22px 32px; }
  .elvaro-sub-trust { padding-left: var(--gutter-t); padding-right: var(--gutter-t); }
}

@media (min-width: 980px) {
  .elvaro-sub-hero { padding: 64px var(--gutter-d) 72px; }
  .elvaro-sub-features { padding-left: var(--gutter-d); padding-right: var(--gutter-d); padding-top: 48px; }
  .elvaro-sub-features__grid { grid-template-columns: repeat(4, 1fr); }
  .elvaro-sub-how { padding-left: var(--gutter-d); padding-right: var(--gutter-d); }
  .elvaro-sub-how__step-arrow { display: flex; }
  .elvaro-sub-final { padding-left: var(--gutter-d); padding-right: var(--gutter-d); }
  .elvaro-sub-final__card { padding: 56px; }
  .elvaro-sub-trust { grid-template-columns: repeat(4, 1fr); padding-left: var(--gutter-d); padding-right: var(--gutter-d); }
}

/* ============================================================
   Single product — column layout, sticky card, title block
   ============================================================ */
.elvaro-single-product__gallery-col { min-width: 0; }
.elvaro-single-product__summary-col { min-width: 0; }
.elvaro-single-product__summary-card {
  position: sticky;
  top: 24px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.elvaro-single-product__title-block { margin-top: 24px; }
.elvaro-single-product__sku {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.elvaro-single-product__sku-sep { margin-left: 2px; }
.elvaro-single-product__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
  color: var(--fg-1);
}
.elvaro-single-product__category {
  color: var(--fg-2);
  font-size: 15px;
  margin-bottom: 16px;
}
.elvaro-single-product__stock-inline {
  margin-bottom: 20px;
}
.elvaro-single-product__full-width { margin-top: 16px; }
.elvaro-single-product__desc-section { margin-top: 0; }
.elvaro-single-product__desc-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  color: var(--fg-1);
}

/* ---- Gallery arrows + counter ---- */
.elvaro-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--hairline);
  color: var(--fg-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background var(--dur-fast);
  padding: 0;
}
.elvaro-gallery__arrow:hover { background: rgba(0,0,0,0.82); }
.elvaro-gallery__arrow--prev { left: 12px; }
.elvaro-gallery__arrow--next { right: 12px; }
.elvaro-gallery__counter {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  background: rgba(0,0,0,0.55);
  padding: 3px 10px;
  border-radius: 20px;
  z-index: 3;
}

/* ---- Summary panel header ---- */
.elvaro-summary-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.elvaro-summary-panel__heading {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--fg-1);
}
.elvaro-summary-panel__how-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.elvaro-summary-panel__how-btn:hover {
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}
.elvaro-summary-panel__how-btn svg { width: 15px; height: 15px; }

/* ---- Rental pricing: deposit row + free badge ---- */
.elvaro-rental-pricing__deposit-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 18px 20px;
  border-top: 1px solid var(--hairline);
  font-size: 18px;
  align-items: center;
}
.elvaro-rental-pricing__price--free {
  color: var(--success);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.elvaro-rental-pricing__price--free svg { width: 14px; height: 14px; }

/* ---- VIP upsell button ---- */
.elvaro-vip-upsell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 20px;
  border: 1.5px solid var(--brand-yellow);
  border-radius: var(--radius-lg);
  color: var(--brand-yellow);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--dur-fast), color var(--dur-fast);
  background: transparent;
}
.elvaro-vip-upsell-btn:hover {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}
.elvaro-vip-upsell-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Subscription panel: price + includes ---- */
.elvaro-sub-price-display { margin: 16px 0; }
.elvaro-sub-includes { margin: 20px 0; }
.elvaro-sub-includes__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.elvaro-sub-includes__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--fg-1);
}
.elvaro-sub-includes__item:last-child { border-bottom: none; }
.elvaro-sub-includes__item svg { color: var(--success); flex-shrink: 0; width: 15px; height: 15px; }

/* WP-block mode: strip block padding, style list rows to match hardcoded items */
.elvaro-sub-includes--blocks ul { list-style: none; padding: 0; margin: 0; }
.elvaro-sub-includes--blocks ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--fg-1);
}
.elvaro-sub-includes--blocks ul li:last-child { border-bottom: none; }
.elvaro-sub-includes--blocks ul li::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--success);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* WC single-product add-to-cart button — matches .btn.btn-primary */
.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 600;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: all var(--dur-base) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  box-shadow: var(--shadow-button);
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}
.single_add_to_cart_button:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-0.5px);
}
.single_add_to_cart_button:active {
  background: var(--brand-yellow-press);
  transform: translateY(1px);
}
/* Disabled (e.g. variable product before a variation is chosen) —
   DS disabled spec: bg --surface-1, fg --fg-4, no shadow.
   Specificity must beat `.woocommerce button.button.alt` (0,3,1). */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button:disabled:hover,
.woocommerce button.button.single_add_to_cart_button.disabled,
.woocommerce button.button.single_add_to_cart_button:disabled,
.woocommerce button.button.single_add_to_cart_button.disabled:hover,
.woocommerce button.button.single_add_to_cart_button:disabled:hover {
  background: var(--surface-1);
  color: var(--fg-4);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Info cards row (product detail lower)
   ============================================================ */
.elvaro-pd-info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.elvaro-pd-info-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.elvaro-pd-info-card:hover {
  transform: translateY(-2px);
  border-color: rgba(247,183,3,0.35);
}
.elvaro-pd-info-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--brand-yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-yellow);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.elvaro-pd-info-card:hover .elvaro-pd-info-card__icon {
  background: var(--brand-yellow);
  color: var(--bg);
}
.elvaro-pd-info-card__icon svg { width: 20px; height: 20px; }
.elvaro-pd-info-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: 4px;
  line-height: 1.3;
}
.elvaro-pd-info-card__desc { font-size: 12px; color: var(--fg-3); }

/* ============================================================
   Specs accordion: fullwidth variant — 2-col responsive grid
   ============================================================ */
.elvaro-specs-accordion--fullwidth { margin-top: 48px; }
.elvaro-specs-accordion--fullwidth .elvaro-specs-accordion__body {
  padding: 20px 24px;
}
.elvaro-specs-accordion--fullwidth .elvaro-specs-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}
.elvaro-specs-grid__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.elvaro-specs-grid__row:last-child { border-bottom: none; }
.elvaro-specs-grid__label { color: var(--fg-3); flex-shrink: 0; }
.elvaro-specs-grid__value { color: var(--fg-1); font-weight: 600; text-align: right; }

/* ============================================================
   Product detail FAQ (2-column layout)
   ============================================================ */
.elvaro-pd-faq {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-top: 64px;
}
.elvaro-pd-faq__eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-yellow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.elvaro-pd-faq__title { font-size: var(--fs-h3); margin-bottom: 16px; }
.elvaro-pd-faq__desc {
  font-size: 14px;
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin-bottom: 24px;
}
.elvaro-pd-faq__item {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
}
.elvaro-pd-faq__question {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--fg-1);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  text-align: left;
}
.elvaro-pd-faq__toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast);
  color: var(--fg-2);
}
.elvaro-pd-faq__item.is-open .elvaro-pd-faq__toggle {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}
.elvaro-pd-faq__toggle-icon--plus  { display: block; }
.elvaro-pd-faq__toggle-icon--minus { display: none; }
.elvaro-pd-faq__item.is-open .elvaro-pd-faq__toggle-icon--plus  { display: none; }
.elvaro-pd-faq__item.is-open .elvaro-pd-faq__toggle-icon--minus { display: block; }
.elvaro-pd-faq__answer {
  padding: 0 20px 20px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.65;
  display: none;
}
.elvaro-pd-faq__item.is-open .elvaro-pd-faq__answer { display: block; }

/* FAQ items loaded from WP block pages (Details blocks) */
.elvaro-pd-faq__items--blocks { display: flex; flex-direction: column; }
.elvaro-pd-faq__items--blocks .wp-block-details {
  border-bottom: 1px solid var(--hairline);
  padding: 0;
  margin: 0;
}
.elvaro-pd-faq__items--blocks .wp-block-details summary {
  padding: 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-1);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.elvaro-pd-faq__items--blocks .wp-block-details summary::-webkit-details-marker { display: none; }
.elvaro-pd-faq__items--blocks .wp-block-details summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--fg-3);
  flex-shrink: 0;
  line-height: 1;
}
.elvaro-pd-faq__items--blocks .wp-block-details[open] summary::after { content: '−'; }
.elvaro-pd-faq__items--blocks .wp-block-details > p,
.elvaro-pd-faq__items--blocks .wp-block-details > div { padding: 0 0 20px; color: var(--fg-2); line-height: 1.6; margin: 0; }

@media (min-width: 980px) {
  .elvaro-pd-faq__sidebar { position: sticky; top: 80px; }
  body.admin-bar .elvaro-pd-faq__sidebar { top: 112px; }
}
@media (max-width: 979px) {
  .elvaro-pd-info-cards { grid-template-columns: repeat(2, 1fr); }
  .elvaro-pd-faq { grid-template-columns: 1fr; gap: 32px; }
  .elvaro-specs-accordion--fullwidth .elvaro-specs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .elvaro-single-product__summary-card { padding: 20px; }
  .elvaro-pd-info-cards { grid-template-columns: 1fr; }
  .elvaro-gallery__arrow { display: none; }
}

/* ============================================================
   Search page — .elvaro-search
   Mobile-first, DS tokens only, breakpoints 640/900/980/1180.
   ============================================================ */

/* ---- Page wrapper ---- */
.elvaro-search {
  padding-top: 4px;
  padding-bottom: var(--sp-16);
}

/* ---- Breadcrumb strip ---- */
.elvaro-search-crumb { padding-top: 20px; padding-bottom: var(--sp-4); }

/* ---- Hero (search form area, no title) ---- */
.elvaro-search__hero {
  padding-bottom: var(--sp-6);
}
.elvaro-search__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 640px;
}
.elvaro-search__input {
  width: 100%;
  padding: 12px var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  outline: none;
  transition: border-color 0.15s;
}
.elvaro-search__input::placeholder { color: var(--fg-4); }
.elvaro-search__input:focus {
  border-color: var(--hairline-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}
.elvaro-search__hint {
  margin-top: var(--sp-4);
  color: var(--fg-3);
  font-size: var(--fs-body-sm);
}

/* ---- Type filter tabs ---- */
.elvaro-search-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--sp-5);
}
.elvaro-search-tabs::-webkit-scrollbar { display: none; }
.elvaro-search-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  padding: 7px var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  cursor: pointer;
}
.elvaro-search-tabs__tab:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
  color: var(--fg-1);
}
.elvaro-search-tabs__tab.is-active {
  border-color: var(--hairline-yellow);
  color: var(--brand-yellow);
}
.elvaro-search-tabs__count {
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  font-size: var(--fs-caption);
}
.elvaro-search-tabs__tab.is-active .elvaro-search-tabs__count {
  color: var(--brand-yellow);
  opacity: 0.75;
}

/* ---- Results stack ---- */
.elvaro-search-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Single result row ---- */
.elvaro-search-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.elvaro-search-result:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}

/* Thumb */
.elvaro-search-result__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.elvaro-search-result__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.elvaro-search-result__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-4);
}
.elvaro-search-result__thumb-placeholder .elv-icon {
  width: 28px;
  height: 28px;
}

/* Body */
.elvaro-search-result__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Type chip */
.elvaro-search-result__type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1;
}
.elvaro-search-result__type .elv-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Title */
.elvaro-search-result__title {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--fg-1);
  line-height: var(--lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}
.elvaro-search-result:hover .elvaro-search-result__title {
  color: var(--brand-yellow);
}

/* Meta */
.elvaro-search-result__meta {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
.elvaro-search-result__price {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}
.elvaro-search-result__meta-text {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}
.elvaro-search-result__excerpt {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Chevron */
.elvaro-search-result__chevron {
  flex-shrink: 0;
  color: var(--fg-4);
  display: none;
}

/* ---- Term highlight ---- */
mark.elvaro-search-mark {
  background: var(--brand-yellow-soft);
  color: var(--fg-1);
  border-radius: var(--radius-sm);
  padding: 0 2px;
  text-decoration: none;
}

/* ---- Breakpoints ---- */
@media (min-width: 640px) {
  .elvaro-search__form { flex-direction: row; }
  .elvaro-search__input { flex: 1; }
  .elvaro-search-tabs { flex-wrap: wrap; overflow-x: visible; }
  .elvaro-search-result { gap: var(--sp-4); padding: var(--sp-4); }
  .elvaro-search-result__thumb { width: 96px; height: 96px; }
  .elvaro-search-result__title { font-size: var(--fs-h4); white-space: normal; }
  .elvaro-search-result__chevron { display: block; }
}
@media (min-width: 900px) {
  .elvaro-search-result__thumb { width: 112px; height: 112px; }
  .elvaro-search-results { gap: var(--sp-4); }
}
@media (min-width: 980px) {
  .elvaro-search-tabs { padding-bottom: var(--sp-6); }
}

/* ============================================================
   My Account — DS additions
   Payment cards, empty-state CTA, subscription option cards
   ============================================================ */

/* ── Empty-state CTA button ───────────────────────────────── */
.elvaro-acc-empty__action {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast);
  margin-top: var(--sp-2);
}
.elvaro-acc-empty__action:hover {
  background: var(--brand-yellow-hover);
  color: var(--fg-on-yellow);
}
.elvaro-acc-empty__action--gold {
  background: var(--brand-gold);
  color: var(--fg-on-yellow);
}
.elvaro-acc-empty__action--gold:hover {
  background: var(--brand-gold-hi);
  color: var(--fg-on-yellow);
}

/* ── Payment cards: "saved at checkout" info note ─────────── */
.elvaro-cards-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 auto var(--sp-5);
  /* Match the cards' two-column width and centre so the note, cards and disclaimer
     read as one centred block (the cards are capped at ~360px each). */
  max-width: calc(360px * 2 + var(--sp-4));
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--fg-3);
  font-size: 14px;
  line-height: var(--lh-normal);
}
.elvaro-cards-note > svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--brand-yellow);
}

/* ── Payment cards grid ───────────────────────────────────── */
.elvaro-pay-cards {
  display: grid;
  /* Up to two real-card-width (~360px) columns, capped by max-width so it never
     goes 3-up. Driven by the actual available width (not a viewport breakpoint, so
     the sidebar joining/leaving doesn't matter): two columns only when two full
     360px cards fit, otherwise one — so the masked number never has to wrap.
     min(100%,360px) lets a single card shrink to fit narrow phones. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 360px));
  gap: var(--sp-4);
  margin: 0 auto var(--sp-4);
  max-width: calc(360px * 2 + var(--sp-4));
}

/* Each saved method = the card FACE + an actions row beneath it (so the actions
   aren't enclosed by the card's own outline). */
.elvaro-pay-card-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* Container for the card number so it can scale down on narrow (mobile-width)
     cards while staying big on the 360px desktop card. */
  container-type: inline-size;
}

.elvaro-pay-card {
  position: relative;
  /* A real-card feel: a diagonal surface gradient + a soft sheen in the top-right
     corner, on a taller card-proportioned box. */
  background:
    radial-gradient(130% 120% at 100% -10%, rgba(var(--fg-rgb),  0.05), transparent 52%),
    linear-gradient(150deg, var(--surface-3) 0%, var(--surface-1) 92%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow: hidden;
  min-height: 156px;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.elvaro-pay-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
}

/* Visa — blue corner glow */
.elvaro-pay-card--visa {
  border-color: rgba(26, 115, 232, 0.32);
  background:
    radial-gradient(130% 120% at 100% -10%, rgba(26, 115, 232, 0.16), transparent 55%),
    linear-gradient(150deg, var(--surface-3) 0%, var(--surface-1) 92%);
}
.elvaro-pay-card--visa:hover { border-color: rgba(26, 115, 232, 0.5); }

/* Mastercard — orange/red corner glow */
.elvaro-pay-card--mastercard {
  border-color: rgba(235, 75, 22, 0.32);
  background:
    radial-gradient(130% 120% at 100% -10%, rgba(235, 75, 22, 0.16), transparent 55%),
    linear-gradient(150deg, var(--surface-3) 0%, var(--surface-1) 92%);
}
.elvaro-pay-card--mastercard:hover { border-color: rgba(235, 75, 22, 0.5); }

.elvaro-pay-card__chip {
  color: var(--brand-yellow);
  line-height: 0;
}

.elvaro-pay-card__brand {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.elvaro-pay-card__number {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  /* Tight enough that the full masked number stays on one line in a 360px card. */
  letter-spacing: 0.04em;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
/* On narrow (mobile-width) cards the full 16-digit number can't fit at 1.3rem —
   scale it down so it stays on one line instead of clipping. */
@container (max-width: 330px) {
  .elvaro-pay-card__number {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
  }
}

.elvaro-pay-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.elvaro-pay-card__expiry {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.elvaro-pay-card__meta {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  text-align: right;
}

.elvaro-pay-cards__disclaimer {
  font-size: var(--fs-caption);
  color: var(--fg-4);
  margin: var(--sp-2) auto 0;
  max-width: calc(360px * 2 + var(--sp-4));
}

/* ── Subscription option cards ────────────────────────────── */
.elvaro-sub-options {
  /* Section break from whatever sits above (the "no active subscriptions" empty
     card, or the subscriptions list) — it was flush against it. */
  margin-top: var(--sp-8);
}

.elvaro-sub-options__title {
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

.elvaro-sub-options__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .elvaro-sub-options__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.elvaro-sub-option {
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.elvaro-sub-option__icon {
  color: var(--brand-yellow);
  line-height: 0;
}

.elvaro-sub-option__title {
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--fg-1);
}

.elvaro-sub-option__blurb {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.elvaro-sub-option__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast);
  margin-top: var(--sp-1);
}
.elvaro-sub-option__btn:hover {
  background: var(--brand-yellow-hover);
  color: var(--fg-on-yellow);
}

/* ── VIP membership status panel ─────────────────────────── */
.elvaro-membership-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid rgba(232,184,95,0.45);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (min-width: 640px) {
  .elvaro-membership-panel {
    padding: var(--sp-5);
  }
}
.elvaro-membership-panel__icon {
  flex-shrink: 0;
  color: var(--brand-gold-hi);
  line-height: 0;
  margin-top: 2px;
}
.elvaro-membership-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.elvaro-membership-panel__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.elvaro-membership-panel__title {
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--fg-1);
}
.elvaro-membership-panel__status {
  background: var(--success-soft);
  color: var(--success);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px var(--sp-2);
}
.elvaro-membership-panel__perks {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  margin: 0;
  line-height: 1.5;
}
.elvaro-membership-panel__link {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--brand-yellow);
  text-decoration: none;
}
.elvaro-membership-panel__link:hover {
  color: var(--brand-yellow-hover);
}

/* ============================================================
   Buy panel (DS ProductDetailBuy)
   ============================================================ */
.elvaro-buy-panel {
  display: flex;
  flex-direction: column;
}

/* Discount row */
.elvaro-buy-panel__discount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.elvaro-buy-panel__sale-end {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

/* Price row */
.elvaro-buy-panel__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.elvaro-buy-panel__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.elvaro-buy-panel__price .woocommerce-Price-amount,
.elvaro-buy-panel__price .woocommerce-Price-currencySymbol { color: inherit; }
.elvaro-buy-panel__price-aside {
  text-align: right;
  padding-bottom: 4px;
  flex-shrink: 0;
}
.elvaro-buy-panel__old-price {
  font-size: 16px;
  color: var(--fg-3);
  text-decoration: line-through;
}
.elvaro-buy-panel__savings {
  font-size: 13px;
  color: var(--success);
  font-weight: 700;
  margin-top: 3px;
}

/* WC form wrapper (qty + warranty add-on + add-to-cart button) */
.elvaro-buy-panel__form { margin-bottom: 4px; }

/* Hide WC PAO price breakdown table — we show our own Total row */
.elvaro-buy-panel__form .product-addon-totals { display: none !important; }

/* Warranty add-on radio cards (WC Product Add-ons actual output) */
.elvaro-buy-panel__form .wc-pao-fieldset {
  border: none;
  padding: 0;
  margin: 16px 0 0;
}
.elvaro-buy-panel__form legend.wc-pao-addon-name {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--fg-3);
  margin-bottom: 10px;
  float: none;
}
.elvaro-buy-panel__form .wc-pao-addon-wrap {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}
/* Each option wrapper div */
.elvaro-buy-panel__form .wc-pao-addon-wrap > div {
  position: relative;
}
/* Hide native radio input visually */
.elvaro-buy-panel__form input.wc-pao-addon-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Label = the full DS radio card */
/* Prefix with .woocommerce to beat plugin specificity (0,3,1) → our rule is (0,3,2) */
.woocommerce .elvaro-buy-panel__form .wc-pao-addon-wrap > div > label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  width: 100%;
  box-sizing: border-box;
}
/* Custom radio dot */
.elvaro-buy-panel__form .wc-pao-addon-wrap > div > label::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--fg-4);
  flex-shrink: 0;
  transition: border var(--dur-fast);
}
/* Checked state */
.elvaro-buy-panel__form input.wc-pao-addon-radio:checked + label {
  background: var(--brand-yellow-soft);
  border-color: var(--hairline-yellow);
}
.elvaro-buy-panel__form input.wc-pao-addon-radio:checked + label::before {
  border: 5px solid var(--brand-yellow);
  background: var(--bg);
}
/* Price chip on option label */
.elvaro-buy-panel__form .wc-pao-addon-price {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-3);
  white-space: nowrap;
}

/* Total row */
.elvaro-buy-panel__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
}
.elvaro-buy-panel__total-label {
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 600;
}
.elvaro-buy-panel__total-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.elvaro-buy-panel__total-value .woocommerce-Price-amount,
.elvaro-buy-panel__total-value .woocommerce-Price-currencySymbol { color: inherit; }

/* One-click button */
.elvaro-buy-panel__one-click {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.elvaro-buy-panel__one-click:hover {
  background: var(--surface-3);
  border-color: var(--fg-3);
}

/* Klarna note */
.elvaro-buy-panel__klarna {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.elvaro-buy-panel__klarna-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--success-soft);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.elvaro-buy-panel__klarna-icon svg { width: 16px; height: 16px; }
.elvaro-buy-panel__klarna-text {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.45;
}

/* One-click disabled (variable product, no variation chosen) */
.elvaro-buy-panel__one-click.disabled,
.elvaro-buy-panel__one-click:disabled,
.elvaro-mobile-sticky-bar [data-one-click].disabled,
.elvaro-mobile-sticky-bar [data-one-click]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Buy panel availability (WC prints it inside the form) ----
   The stock COUNT is suppressed server-side; in-stock renders empty.
   Out-of-stock becomes the panel's DS empty state. */
.elvaro-buy-panel__form p.stock:empty { display: none; }
.elvaro-buy-panel__form p.stock.out-of-stock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--sp-3) 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
}

/* ---- Variable product attribute selectors (table.variations) ----
   WC's table markup linearized into stacked DS blocks: caption label
   above a full-width DS select. Mobile-first, no breakpoints needed. */
.elvaro-buy-panel__form table.variations {
  display: block;
  width: 100%;
  margin: var(--sp-3) 0 var(--sp-2);
  border-collapse: collapse;
}
.elvaro-buy-panel__form table.variations tbody,
.elvaro-buy-panel__form table.variations tr,
.elvaro-buy-panel__form table.variations th,
.elvaro-buy-panel__form table.variations td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}
.elvaro-buy-panel__form table.variations tr + tr { margin-top: var(--sp-3); }
.elvaro-buy-panel__form table.variations th.label label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.elvaro-buy-panel__form table.variations td.value select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 40px 0 12px;
  background-color: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(var(--fg-rgb), 0.48)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.elvaro-buy-panel__form table.variations td.value select:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: var(--shadow-yellow-ring);
}
.elvaro-buy-panel__form table.variations td.value select option {
  background: var(--surface-2);
  color: var(--fg-1);
}
.elvaro-buy-panel__form table.variations .reset_variations {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-caption);
  color: var(--fg-3);
  text-decoration: none;
}
.elvaro-buy-panel__form table.variations .reset_variations:hover {
  color: var(--fg-1);
  text-decoration: underline;
}
/* WC variation sub-blocks inside the buy panel: price already shown in
   the panel header — keep the wrap tight */
.elvaro-buy-panel__form .woocommerce-variation-price { display: none; }
.elvaro-buy-panel__form .single_variation_wrap { margin: 0; }

/* ---- Qty stepper (custom − / + buttons, native spinner hidden) ----
   One compact visual unit: −/input/+ share height, radius and border
   token; the input does NOT stretch to the container width. */
.elvaro-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  width: auto;
}
.elvaro-qty-stepper input.qty {
  flex: 0 0 auto;
  width: 64px;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  -moz-appearance: textfield;
}
.elvaro-qty-stepper input.qty::-webkit-outer-spin-button,
.elvaro-qty-stepper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.elvaro-qty-stepper .elvaro-qty-btn {
  flex-shrink: 0;
  width: 44px;
  height: auto;
  align-self: stretch;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.elvaro-qty-stepper .elvaro-qty-btn:hover { background: var(--surface-3); color: var(--fg-1); }


/* ============================================================
   Subscription panel (DS ProductDetailSubscription)
   ============================================================ */
.elvaro-sub-panel { display: flex; flex-direction: column; }

/* Plan radio cards */
.elvaro-sub-plans {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.elvaro-sub-plan {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.elvaro-sub-plan.is-active {
  background: var(--brand-yellow-soft);
  border-color: var(--hairline-yellow);
}
.elvaro-sub-plan__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.elvaro-sub-plan__dot {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--fg-4);
  flex-shrink: 0;
  transition: border var(--dur-fast);
}
.elvaro-sub-plan.is-active .elvaro-sub-plan__dot {
  border: 5.5px solid var(--brand-yellow);
  background: var(--bg);
}
.elvaro-sub-plan__badge {
  position: absolute;
  top: -9px;
  right: 14px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}
.elvaro-sub-plan__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.elvaro-sub-plan__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.2;
}
.elvaro-sub-plan__save {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
}
.elvaro-sub-plan__price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.elvaro-sub-plan__price-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.elvaro-sub-plan.is-active .elvaro-sub-plan__price-value { color: var(--brand-yellow); }
.elvaro-sub-plan__price-unit {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 3px;
}

/* Summary box */
.elvaro-sub-summary {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.elvaro-sub-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--fg-2);
}
.elvaro-sub-summary__val {
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.elvaro-sub-summary__val--green { color: var(--success); }

/* WC form: hide native variation UI, show only the submit button */
.elvaro-sub-panel__form .variations,
.elvaro-sub-panel__form .woocommerce-variation-price,
.elvaro-sub-panel__form .woocommerce-variation-description,
.elvaro-sub-panel__form .reset_variations { display: none !important; }

/* Sub includes: add top separator to separate from form */
.elvaro-sub-panel .elvaro-sub-includes {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

/* ---- Responsive: stack price row on narrow panels ---- */
@media (max-width: 360px) {
  .elvaro-buy-panel__price { font-size: 36px; }
  .elvaro-buy-panel__price-row { flex-wrap: wrap; }
}

/* =============================================================
   My Account — payment card management + add-card form
   ============================================================= */

/* ── Card badges ─────────────────────────────────────────────── */
.elvaro-pay-card__badges {
  /* Pinned to the top-right corner so it shares the chip's row instead of stacking
     above it (which made the card too tall). */
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  z-index: 1;
}

.elvaro-pay-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.elvaro-pay-card__badge--default {
  background: var(--brand-yellow-soft);
  color: var(--brand-yellow);
}

.elvaro-pay-card__badge--expired {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ── Expired card state ──────────────────────────────────────── */
.elvaro-pay-card--expired {
  opacity: .6;
  filter: saturate(0.4);
}

/* ── Card actions ────────────────────────────────────────────── */
/* A row of real DS buttons BELOW the card face (not enclosed by the card outline).
   Order follows the My Account convention: primary positive (Set as default, gold)
   first, secondary/destructive (Remove, ghost) last. */
.elvaro-pay-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.elvaro-pay-card__actions form {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.elvaro-pay-card__action {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

/* Set as default — primary positive (solid gold). */
.elvaro-pay-card__action:not(.elvaro-pay-card__action--danger) {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}
.elvaro-pay-card__action:not(.elvaro-pay-card__action--danger):hover {
  background: var(--brand-yellow-hover);
}

/* Remove — ghost; turns danger on hover (matches the account Cancel button). */
.elvaro-pay-card__action--danger {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
  color: var(--fg-2);
  font-weight: 600;
}
.elvaro-pay-card__action--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.elvaro-pay-card__expired-prompt {
  font-size: var(--fs-caption);
  color: var(--danger);
}

/* ── Add-card form ───────────────────────────────────────────── */
.elvaro-add-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}

.elvaro-add-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4) 0;
}

.elvaro-add-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.elvaro-add-card__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.elvaro-add-card__field--full {
  grid-column: 1 / -1;
}

.elvaro-add-card__field label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--fg-2);
}

.elvaro-add-card form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.elvaro-add-card .input-text {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body-sm);
  box-sizing: border-box;
  transition: border-color var(--dur-fast);
}

.elvaro-add-card .input-text:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}

.elvaro-add-card .input-text::placeholder {
  color: var(--fg-4);
}

.elvaro-add-card__submit {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-md);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  font-size: var(--fs-button);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.elvaro-add-card__submit:hover {
  background: var(--brand-yellow-hover);
}

/* ── Notices ─────────────────────────────────────────────────── */
.elvaro-add-card__error {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-body-sm);
}

.elvaro-add-card__success {
  background: var(--success-soft);
  color: var(--success);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-body-sm);
}

/* Readonly invoice-details value (feature 3) */
.elvaro-readonly-value {
  display: block;
  padding: var(--sp-3);
  color: var(--fg-2);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  min-height: 44px;
}

.elvaro-readonly-note {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  margin-top: var(--sp-2);
}

/* ── APPEND-ONLY: subscription cart totals — "After that" block ──
   When a recurring "Subtotal" row survives (it only renders if a
   coupon/shipping/tax makes it differ from the renewal total — see
   inc/subscriptions-cart.php), demote it to caption-style so the
   renewal total stays the single emphasized recurring line. */
.cart_totals table tr.cart-subtotal.recurring-total th,
.cart_totals table tr.cart-subtotal.recurring-total td,
.woocommerce-checkout-review-order-table tr.cart-subtotal.recurring-total th,
.woocommerce-checkout-review-order-table tr.cart-subtotal.recurring-total td {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--fg-3);
}

/* ============================================================
   CHECKOUT / ORDER-RECEIVED — presentation fixes
   Theme-CSS layer only;
   markup owned by elvaro-checkout plugin / WC templates.
   ============================================================ */

/* ── 1. Order-details / order-review table rhythm ─────────────
   Tighter, aligned rows on both the checkout #order_review and the
   order-received order-details table. The product/Total columns align
   right for amounts; product names wrap instead of forcing a tall row. */
#order_review table.shop_table th,
#order_review table.shop_table td,
table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
  padding: var(--sp-3) 0;
  vertical-align: top;
  line-height: var(--lh-normal);
}
/* Fixed layout so the declared 70/30 column widths are honoured (with
   table-layout:auto the nowrap amount column stole most of the width and
   forced the table wider than its card → horizontal overflow at 390px). */
#order_review table.shop_table,
table.woocommerce-table--order-details {
  table-layout: fixed;
  width: 100%;
}
/* Column split: give the Product column the lion's share (~70%) so long
   product names ("VIP Club Membership — Annual") no longer wrap to three
   short lines, and keep the amount column compact (~30%), right-aligned. */
#order_review table.shop_table th.product-name,
#order_review table.shop_table td.product-name,
table.woocommerce-table--order-details th.product-name,
table.woocommerce-table--order-details td.product-name,
#order_review table.shop_table tfoot tr th,
table.woocommerce-table--order-details tfoot tr th {
  width: 70%;
  text-align: left;
}
#order_review table.shop_table th.product-total,
#order_review table.shop_table td.product-total,
table.woocommerce-table--order-details th.product-total,
table.woocommerce-table--order-details td.product-total,
#order_review table.shop_table tfoot tr td,
table.woocommerce-table--order-details tfoot tr td {
  width: 30%;
}
/* Shipping-method row: BREAK OUT of the fixed 70/30 grid. The carriers
   (Elvaro Go / DPD Parcel / Omniva) plus their terminal pickers need the
   full card width — a 30% column crams them into many wrapped lines.
   Stack the "Shipment" label above and give the method list 100% width.
   (Same pattern the recurring-shipping row already uses.) Applies on the
   checkout #order_review table at every width; the product/subtotal/total
   rows keep their good 70/30 widths. */
#order_review table.shop_table tr.woocommerce-shipping-totals,
#order_review table.shop_table tr.woocommerce-shipping-totals th,
#order_review table.shop_table tr.woocommerce-shipping-totals td,
#order_review table.shop_table tr.elvaro-pickup-row,
#order_review table.shop_table tr.elvaro-pickup-row th,
#order_review table.shop_table tr.elvaro-pickup-row td {
  display: block;
  width: 100%;
  text-align: left;
}
#order_review table.shop_table tr.woocommerce-shipping-totals th {
  border-bottom: none;
  padding: var(--sp-3) 0 var(--sp-1);
  color: var(--fg-3);
  font-weight: 600;
}
#order_review table.shop_table tr.woocommerce-shipping-totals td {
  padding-top: 0;
}
/* Carrier radios now read on one clean line each (label + price + logo) */
#order_review table.shop_table tr.woocommerce-shipping-totals .woocommerce-Price-amount {
  white-space: nowrap;
}
/* Pickup-summary row ("Parcel terminal — …") rides full-width under it */
#order_review table.shop_table tr.elvaro-pickup-row th {
  padding: 0;
  border-bottom: none;
}
/* Amount columns (Total / right-hand) align right; the cell may wrap its
   "(includes X VAT)" caption, but the price figure itself never breaks. */
#order_review table.shop_table td.product-total,
#order_review table.shop_table th.product-total,
table.woocommerce-table--order-details td.product-total,
table.woocommerce-table--order-details th.product-total,
#order_review table.shop_table tfoot tr td,
table.woocommerce-table--order-details tfoot tr td {
  text-align: right;
}
#order_review table.shop_table .woocommerce-Price-amount,
table.woocommerce-table--order-details .woocommerce-Price-amount {
  white-space: nowrap;
}
/* The VAT caption wraps under the total instead of forcing the table wide */
#order_review table.shop_table tfoot tr td small.includes_tax,
table.woocommerce-table--order-details tfoot tr td small.includes_tax {
  display: block;
  white-space: normal;
  font-size: var(--fs-caption);
  color: var(--fg-3);
}
/* Product name cell wraps gracefully; quantity sits inline, muted */
#order_review table.shop_table td.product-name,
table.woocommerce-table--order-details td.product-name {
  padding-right: var(--sp-4);
  word-break: break-word;
}
#order_review table.shop_table td.product-name .product-quantity,
table.woocommerce-table--order-details td.product-name .product-quantity {
  color: var(--fg-3);
  font-weight: 600;
  white-space: nowrap;
}
/* Subtotal / shipping rows: compact, not giant gaps */
#order_review table.shop_table tr.cart-subtotal th,
#order_review table.shop_table tr.cart-subtotal td,
#order_review table.shop_table tfoot tr th,
#order_review table.shop_table tfoot tr td,
table.woocommerce-table--order-details tfoot tr th,
table.woocommerce-table--order-details tfoot tr td {
  padding: var(--sp-3) 0;
}
/* Order-total row keeps its emphasis but a sane single gap above */
#order_review table.shop_table tr.order-total th,
#order_review table.shop_table tr.order-total td,
table.woocommerce-table--order-details tr.order-total th,
table.woocommerce-table--order-details tr.order-total td {
  padding-top: var(--sp-4);
}
/* ── 1b. "Related subscriptions" table (order-received) — DS design ──
   5 columns (Subscription / Status / Next payment / Total / View). Stock
   WC centres and cramps them. Make it a proper finished DS table: left-
   aligned text columns, aligned header+cells, a DS-styled "View" button
   centred in its cell, and full-width-responsive (the shop_table_responsive
   class already stacks cells with data-title labels at the WC breakpoint). */
.woocommerce-order-details .woocommerce-orders-table--subscriptions {
  width: 100%;
  margin-top: var(--sp-4);
  font-size: var(--fs-body-sm);
  border-collapse: collapse;
}
.woocommerce-order-details .woocommerce-orders-table--subscriptions th,
.woocommerce-order-details .woocommerce-orders-table--subscriptions td {
  text-align: left;
  vertical-align: middle;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--hairline);
}
.woocommerce-order-details .woocommerce-orders-table--subscriptions thead th {
  color: var(--fg-3);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline-strong);
}
/* This related-subscriptions table is embedded in .woocommerce-order-details on
   BOTH the order-received page AND the My Account view-order page. On My Account
   the generic `.woocommerce-account .woocommerce-MyAccount-content table` rules
   and the standalone subs-list header band (`--surface-1` fill, 8px padding)
   also match it, so it looked unlike the clean order-received version. Pin it
   back to that look — transparent header, consistent --sp-3 padding — at a
   higher specificity so those My Account rules don't bleed in. */
.woocommerce-account .woocommerce-order-details .woocommerce-orders-table--subscriptions th,
.woocommerce-account .woocommerce-order-details .woocommerce-orders-table--subscriptions td {
  padding: var(--sp-3) var(--sp-3);
  background: transparent;
}
/* Sensible column widths; amount + actions stay compact */
.woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-id { width: 18%; }
.woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-status { width: 16%; white-space: nowrap; }
.woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-next-payment { width: 26%; }
.woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-total { width: 24%; }
.woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-actions { width: 16%; text-align: right; }
.woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-id a {
  color: var(--fg-1);
  font-weight: 600;
}
.woocommerce-order-details .woocommerce-orders-table--subscriptions .woocommerce-Price-amount {
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
}
.woocommerce-order-details .woocommerce-orders-table--subscriptions tbody tr:last-child th,
.woocommerce-order-details .woocommerce-orders-table--subscriptions tbody tr:last-child td {
  border-bottom: none;
}
/* "View" button — DS secondary button, vertically centred in its cell */
.woocommerce-order-details .woocommerce-orders-table--subscriptions .button.view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.woocommerce-order-details .woocommerce-orders-table--subscriptions .button.view:hover,
.woocommerce-order-details .woocommerce-orders-table--subscriptions .button.view:focus {
  background: var(--surface-4);
  border-color: var(--hairline-yellow);
}
/* Responsive: at the WC stacked-table breakpoint each cell becomes a row
   with its data-title label; keep it tidy and within the card (no overflow). */
@media (max-width: 768px) {
  .woocommerce-order-details .woocommerce-orders-table--subscriptions tr {
    display: block;
    border-bottom: 1px solid var(--hairline-strong);
    padding: var(--sp-2) 0;
  }
  .woocommerce-order-details .woocommerce-orders-table--subscriptions thead {
    display: none;
  }
  .woocommerce-order-details .woocommerce-orders-table--subscriptions td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    border-bottom: none;
    padding: var(--sp-1) 0;
    text-align: right;
  }
  .woocommerce-order-details .woocommerce-orders-table--subscriptions td::before {
    content: attr(data-title);
    color: var(--fg-3);
    font-weight: 600;
    text-align: left;
  }
  .woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .woocommerce-order-details .woocommerce-orders-table--subscriptions .subscription-actions::before {
    content: "";
  }
}

/* ── 1c. Order-received vertical rhythm ─────
   Inside the .woocommerce-order-details card the children stack:
     h2 "Order details" → order-details table → <header> "Related
     subscriptions" → subs table → "Signed agreements" section.
   Problems fixed: (a) the order-details table's last tfoot row carried
   a stray bottom hairline right before the heading; (b) the "Related
   subscriptions" <header> had no gap above it; (c) the standalone
   "View the status of your subscription…" line sat cramped above the
   card. Establish consistent --sp-6/--sp-8 rhythm. */
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
}
/* Space before the "Related subscriptions" / "Related orders" heading block.
   No separator line — the bold heading + top margin already read as a clean
   section break; the hairline looked redundant straight after the last table
   row (e.g. "Payment method"). */
.woocommerce-order-details > header {
  display: block;
  margin-top: var(--sp-8);
}
.woocommerce-order-details > header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}
/* The "View the status of your subscription in your account." line —
   breathing room between the order-overview strip and the details card */
.woocommerce-order .woocommerce-order-overview + p {
  margin: 0 0 var(--sp-6);
  color: var(--fg-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}

/* ── 1d. VIP savings emphasis on rental line-item meta ──
   The rental line carries two benefit rows in dl.variation:
     .variation-Deposit   → "0,00 € — VIP Club benefit (<del>25,00 €</del> waived)"
     .variation-VIPdiscount → "−30% — you save <amount> (<del>126,00 €</del>)"
   Stock styling rendered every part in flat --fg-3. Lift the live benefit
   amount (--success, stronger weight) and clearly strike the waived/original
   price in --fg-3 so the value is obvious. Applies on checkout #order_review,
   the order-received order-details table, AND the cart (.variation lives in
   all three). Other variation rows (date/duration) keep their muted style. */
#order_review td.product-name dl.variation dd.variation-Deposit,
#order_review td.product-name dl.variation dd.variation-VIPdiscount,
table.woocommerce-table--order-details td.product-name dl.variation dd.variation-Deposit,
table.woocommerce-table--order-details td.product-name dl.variation dd.variation-VIPdiscount,
.woocommerce-cart-form dl.variation dd.variation-Deposit,
.woocommerce-cart-form dl.variation dd.variation-VIPdiscount {
  color: var(--success);
  font-weight: 600;
}
/* The benefit amount(s) stay vivid; nested currency symbol inherits */
#order_review dl.variation dd.variation-Deposit .woocommerce-Price-amount,
#order_review dl.variation dd.variation-VIPdiscount .woocommerce-Price-amount,
table.woocommerce-table--order-details dl.variation dd.variation-Deposit .woocommerce-Price-amount,
table.woocommerce-table--order-details dl.variation dd.variation-VIPdiscount .woocommerce-Price-amount,
.woocommerce-cart-form dl.variation dd.variation-Deposit .woocommerce-Price-amount,
.woocommerce-cart-form dl.variation dd.variation-VIPdiscount .woocommerce-Price-amount {
  color: var(--success);
  font-weight: 700;
}
/* The struck original / waived figure: clearly crossed out, muted --fg-3 */
#order_review dl.variation dd.variation-Deposit del,
#order_review dl.variation dd.variation-VIPdiscount del,
table.woocommerce-table--order-details dl.variation dd.variation-Deposit del,
table.woocommerce-table--order-details dl.variation dd.variation-VIPdiscount del,
.woocommerce-cart-form dl.variation dd.variation-Deposit del,
.woocommerce-cart-form dl.variation dd.variation-VIPdiscount del {
  color: var(--fg-3);
  font-weight: 400;
  text-decoration: line-through;
}
#order_review dl.variation dd.variation-Deposit del .woocommerce-Price-amount,
#order_review dl.variation dd.variation-VIPdiscount del .woocommerce-Price-amount,
table.woocommerce-table--order-details dl.variation dd.variation-Deposit del .woocommerce-Price-amount,
table.woocommerce-table--order-details dl.variation dd.variation-VIPdiscount del .woocommerce-Price-amount,
.woocommerce-cart-form dl.variation dd.variation-Deposit del .woocommerce-Price-amount,
.woocommerce-cart-form dl.variation dd.variation-VIPdiscount del .woocommerce-Price-amount {
  color: var(--fg-3);
}

/* ── 2. Agreement signing panel — responsive + box rhythm ─────
   The whole panel must never overflow horizontally; the legal callout
   and OTP row reflow on narrow screens. */
.elvaro-signing-section {
  max-width: 100%;
  overflow-wrap: break-word;
  padding: var(--sp-5);
}
@media (min-width: 640px) {
  .elvaro-signing-section {
    padding: var(--sp-8);
  }
}
.elvaro-signing-section .elvaro-sig-wrapper {
  max-width: 100%;
}
/* PDF/agreement preview iframe — fully fluid so it never forces horizontal
   scroll at 390px. The iframe element defaults to a fixed ~300px width; force
   width:100% (not just max-width) so it both shrinks AND fills the container,
   with no min-width to fight the shrink. Outer wrapper is fluid too. */
.elvaro-agreement-preview {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.elvaro-agreement-iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 380px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
@media (min-width: 640px) {
  .elvaro-agreement-iframe {
    height: 500px;
  }
}
/* Empty signing-section guard: when the panel has no visible
   content — all sig-wrappers hidden and the "all done" block hidden — strip
   its card chrome so no ghost rounded box shows under the subscription hint.
   JS (elvaro.js) adds .elvaro-signing-section--empty as a belt-and-braces
   fallback for browsers without :has(). */
.elvaro-signing-section--empty,
.elvaro-signing-section:not(:has(.elvaro-sig-wrapper:not([style*="display:none"]))):not(:has(.elvaro-otp-success:not([style*="display:none"]))):not(:has(h2)) {
  display: none !important;
}
/* Legal "Important — legal consequences" callout: DS info box rhythm.
   Restyled from the light/cream vendor look to a dark DS surface so it
   reads on our dark theme; keeps the yellow accent for the heading. */
.elvaro-warning-callout {
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-left: 4px solid var(--brand-yellow);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
  max-width: 100%;
}
.elvaro-warning-callout__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.elvaro-warning-callout__body p.legal {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--fg-1);
  line-height: var(--lh-normal);
}
.elvaro-warning-callout__body ul.legal-list {
  margin: 0;
  padding: 0 0 0 var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.elvaro-warning-callout__body ul.legal-list li {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}
/* OTP hint + input row reflow on mobile (no overflow) */
.elvaro-otp-hint {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
}
.elvaro-otp-input-row {
  flex-wrap: wrap;
}
.elvaro-otp-input {
  max-width: 100%;
}
/* The top signing banner (moved to top by elvaro-checkout) — style by class */
.elvaro-signing-banner {
  background: var(--brand-yellow-soft);
  border: 1px solid var(--hairline-yellow);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
  max-width: 100%;
}
.elvaro-signing-banner__title {
  font-weight: 700;
  color: var(--brand-yellow);
  margin: 0 0 var(--sp-1);
}
.elvaro-signing-banner__text {
  color: var(--fg-2);
  font-size: var(--fs-body-sm);
  margin: 0;
}

/* Neutral subscription "thank you" message box on the order-received page.
   Replaces WC Subscriptions' bare <p> lines (re-rendered by elvaro-checkout's
   restyle_subscription_thankyou). A MESSAGE — not the amber action-required
   banner: neutral surface + hairline, clearly separated from the order-overview
   strip above and the details table below so nothing reads as cramped. */
.elvaro-thankyou-note {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0;
}
.elvaro-thankyou-note__line {
  color: var(--fg-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-2);
}
.elvaro-thankyou-note__line:last-child {
  margin-bottom: 0;
}
/* "your account" must read unambiguously as a link (the base <a> inherits
   colour + has no underline) and the PHP opens it in a new tab. */
.elvaro-thankyou-note__link {
  color: var(--brand-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.elvaro-thankyou-note__link:hover {
  color: var(--brand-yellow-hover);
}

/* ── 3. Green "signed" check icon — perfect circle at every width ─
   .elvaro-otp-success__icon is reused both as the big success badge and
   inline in each "<type> — signed" row; in a flex row it was squished
   into an oval. Force an equal-sided circle, centred glyph, no shrink. */
.elvaro-otp-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 1;
}
/* Inline variant inside the per-signature "signed" row is smaller */
.elvaro-sig-done {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.elvaro-sig-done .elvaro-otp-success__icon {
  width: 24px;
  height: 24px;
  margin: 0;
  font-size: 14px;
  background: var(--success);
  color: var(--fg-1);
}
.elvaro-sig-done__label {
  color: var(--fg-1);
  font-weight: 600;
  font-size: var(--fs-body-sm);
}

/* ── 4. Omniva map: readable selected/active terminal text ────
   The vendor marks the chosen terminal .tmjs-active. Our dark retheme
   left its text at the vendor's dark navy (#001e60) / fg-on-yellow on a
   dark surface — unreadable. Force readable DS colours: light text with
   the chosen terminal name highlighted in brand yellow. */
body.woocommerce-checkout .tmjs-default-theme {
  --active-text-color: var(--fg-1);
}
body.woocommerce-checkout .tmjs-active,
body.woocommerce-checkout .tmjs-active .tmjs-terminal-name,
body.woocommerce-checkout .tmjs-active .tmjs-terminal-distance,
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-active,
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-selected-terminal {
  color: var(--fg-1) !important;
}
body.woocommerce-checkout .tmjs-active .tmjs-terminal-name,
body.woocommerce-checkout .omnivalt_terminal_container_map .tmjs-selected-terminal {
  color: var(--brand-yellow) !important;
}

/* ── 4b. Omniva picker — "Select" buttons + list rows → DS ──
   The vendor "Select" button in the terminal-map modal is a white-on-white
   pill (.tmjs-select-btn → bg:#fff/#000); in the blocks/dropdown widget the
   selected row + search bar use the vendor orange (#f60) or navy (#001e60).
   Restyle, scoped to the Omniva widget only, to a DS brand-yellow button +
   readable dark rows. Vendor plugin untouched — pure theme overrides. */
body.woocommerce-checkout .tmjs-modal-content .tmjs-select-btn,
body.woocommerce-checkout a.tmjs-select-btn,
body.woocommerce-checkout a:focus.tmjs-select-btn {
  background-color: var(--brand-yellow) !important;
  color: var(--fg-on-yellow) !important;
  border: 1px solid var(--brand-yellow) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4) !important;
  box-shadow: var(--shadow-button);
}
body.woocommerce-checkout .tmjs-modal-content .tmjs-select-btn:hover,
body.woocommerce-checkout a:hover.tmjs-select-btn,
body.woocommerce-checkout .tmjs-modal-content .tmjs-select-btn:focus {
  background-color: var(--brand-yellow-hover) !important;
  color: var(--fg-on-yellow) !important;
  border-color: var(--brand-yellow-hover) !important;
}
/* Map-modal surfaces that stay light/vendor-orange → DS dark + yellow */
body.woocommerce-checkout .tmjs-modal-content,
body.woocommerce-checkout .tmjs-terminal-block {
  background-color: var(--surface-2) !important;
  color: var(--fg-1);
}
body.woocommerce-checkout .tmjs-search-btn {
  background-color: var(--brand-yellow) !important;
  border-radius: var(--radius-sm) !important;
}
/* Blocks/dropdown terminal list widget — recolour vendor orange/navy rows */
body.woocommerce-checkout .omnivalt-terminals-list,
body.woocommerce-checkout .omnivalt-terminals-list .inner-container {
  background-color: var(--surface-2) !important;
  border-color: var(--hairline-strong) !important;
  color: var(--fg-1);
}
body.woocommerce-checkout .omnivalt-terminals-list .dropdown {
  background-color: var(--surface-1) !important;
  border-color: var(--hairline-strong) !important;
  color: var(--fg-1);
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
}
body.woocommerce-checkout .omnivalt-terminals-list .search-input {
  background-color: var(--surface-1) !important;
  color: var(--fg-1) !important;
  border-color: var(--hairline-strong) !important;
}
body.woocommerce-checkout .omnivalt-terminals-list ul li.selected {
  background-color: var(--brand-yellow-soft) !important;
  color: var(--fg-1) !important;
}
body.woocommerce-checkout .omnivalt-terminals-list ul li:not(.city):hover,
body.woocommerce-checkout .omnivalt-terminals-list ul li.selected:hover {
  background-color: var(--surface-4) !important;
  color: var(--fg-1) !important;
}
/* Blocks open-map button (vendor orange) → brand-yellow */
body.woocommerce-checkout .omnivalt-map-select .tmjs-open-modal-btn {
  background-color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: var(--fg-on-yellow) !important;
  border-radius: var(--radius-md) !important;
}

/* ============================================================
   CHECKOUT — order-review totals borders + full-width shipment
   1) Normalise the totals-table row hairlines (one consistent
      --hairline between rows; no doubled / asymmetric lines;
      Total keeps a slightly stronger top divider).
   2) Each shipment cell spans BOTH columns (full table width)
      so methods + per-package terminal picker + contents line
      use the full width; DS-style the new psr_terminal select.
   Applies to single (buy) AND multi-package (mixed) reviews.
   ============================================================ */

/* ── 1. Consistent row hairlines on the order-review totals ──
   The product rows + every tfoot totals row share ONE bottom
   hairline. WC's default puts a 1px line on each <td>/<th> cell —
   but these rows are laid out as flex (label | amount) with a gap
   (see §"Value rows" below), so two cell-borders render as TWO
   separated segments with a hole in the middle. Fix: clear the
   border off the CELLS and put ONE continuous hairline on the ROW
   element (the full-width flex/block container) instead.
   BLANKET clear: every previous round enumerated row classes and a
   class always slipped through (e.g. the `recurring-totals` plural
   heading row kept a 91px stub from the base `th{border-bottom}` rule
   at the top of this file). Clear the border on EVERY #order_review
   th/td unconditionally so no cell can ever redraw a split segment;
   the hairlines below live only on the rows. */
#order_review table.shop_table th,
#order_review table.shop_table td {
  border-top: none;
  border-bottom: none;
}
/* ONE continuous hairline UNDER each divided row — on the ROW, not
   the cells, so it spans the full card width with no mid-row gap.
   thead header underline + every product row + each subtotal/fee +
   shipment + pickup row. */
#order_review table.shop_table > thead > tr,
#order_review table.shop_table tbody tr.cart_item,
#order_review table.shop_table tfoot tr.cart-subtotal,
#order_review table.shop_table tfoot tr.fee,
#order_review table.shop_table tfoot tr.woocommerce-shipping-totals,
#order_review table.shop_table tfoot tr.elvaro-pickup-row,
#order_review table.shop_table tfoot tr.recurring-total {
  border-bottom: 1px solid var(--hairline);
}
/* When a pickup-summary row follows a shipment row, the hairline
   lives under the pickup row instead (avoid two lines back-to-back). */
#order_review table.shop_table tfoot tr.woocommerce-shipping-totals:has(+ tr.elvaro-pickup-row) {
  border-bottom: none;
}
/* When ANY row sits directly above the Total row, drop its own bottom
   hairline: the order-total's stronger top divider (below) is the single
   clean line above Total. Without this the preceding row's border-bottom +
   the Total's border-top stack into a doubled hairline. Covers every layout:
   single-buy (shipment → Total), mixed (last pickup/shipment → Total) AND the
   fee-before-Total case (cart-subtotal / fee / shipping / pickup → Total). */
#order_review table.shop_table tfoot tr:has(+ tr.order-total) {
  border-bottom: none;
}
/* Total row: slightly stronger top divider, no bottom line — on the ROW. */
#order_review table.shop_table tfoot tr.order-total {
  border-top: 1px solid var(--hairline-strong);
  border-bottom: none;
}

/* ── 2. Shipment cell spans BOTH columns (single + multi) ─────
   Make every shipping-totals row a full-width block: the label
   stacks above and the method list / terminal picker / contents
   line get 100% of the card width instead of a cramped 30% cell.
   (The single-buy rule already existed; generalise to ALL
   woocommerce-shipping-totals rows so each mixed-cart shipment
   — Tool rental / Purchase / Subscription — spans full width.) */
#order_review table.shop_table tr.woocommerce-shipping-totals,
#order_review table.shop_table tr.woocommerce-shipping-totals > th,
#order_review table.shop_table tr.woocommerce-shipping-totals > td,
#order_review table.shop_table tr.elvaro-pickup-row,
#order_review table.shop_table tr.elvaro-pickup-row > th,
#order_review table.shop_table tr.elvaro-pickup-row > td {
  display: block;
  width: 100%;
  text-align: left;
}
#order_review table.shop_table tr.woocommerce-shipping-totals > th {
  padding: var(--sp-3) 0 var(--sp-1);
  color: var(--fg-3);
  font-weight: 600;
}
#order_review table.shop_table tr.woocommerce-shipping-totals > td {
  padding: 0 0 var(--sp-3);
}
/* Carrier radios read on one clean line each (label + price [+ logo]) */
#order_review table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-methods {
  margin: 0;
  list-style: none;
}
#order_review table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-methods > li {
  padding: var(--sp-1) 0;
}
#order_review table.shop_table tr.woocommerce-shipping-totals .woocommerce-Price-amount {
  white-space: nowrap;
}
/* Per-package contents line ("Hilti … ×1") muted, full width */
#order_review table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-contents {
  margin: var(--sp-2) 0 0;
  color: var(--fg-3);
  font-size: var(--fs-caption);
}
/* Pickup-summary row ("Parcel terminal — …") rides full width */
#order_review table.shop_table tr.elvaro-pickup-row > th {
  padding: 0;
}

/* ── 2b. Per-package terminal picker (split carts) — DS field ──
   elvaro-shipping renders <div.elvaro-pkg-terminal> with a label +
   <select.elvaro-pkg-terminal-select name="psr_terminal[i]"> under
   each terminal-carrier rate. Match the DS dark field (surface-1,
   44px, hairline-strong, custom chevron, yellow focus ring). */
#order_review .elvaro-pkg-terminal {
  margin-top: var(--sp-2);
}
#order_review .elvaro-pkg-terminal > label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--fg-3);
  font-size: var(--fs-caption);
  font-weight: 600;
}
#order_review .elvaro-pkg-terminal > label .required {
  color: var(--brand-yellow);
  border: 0;
  text-decoration: none;
}
#order_review select.elvaro-pkg-terminal-select {
  width: 100%;
  max-width: 100%;
  height: 44px;
  padding: 10px 40px 10px 14px;
  background-color: var(--surface-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(var(--fg-rgb), 0.48)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#order_review select.elvaro-pkg-terminal-select:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px var(--brand-yellow-ring);
}

/* ── 2c. TWO-COLUMN shipment layout ───
   Owner ask: stop stacking each shipment as one tall full-width
   block. Lay the shipment cell out in TWO columns when there is
   room — LEFT = the carrier radios (Elvaro Go / DPD / Omniva +
   prices + dpd logo) and the per-package pickup picker that rides
   under the chosen carrier (a <select> today, a "Select on map"
   button + chosen-terminal summary once the parallel rebuild lands
   — the right column accommodates either); RIGHT = the
   "what's in this shipment" contents line. The shipment name stays
   a clear sub-heading above (the <th>), per the brief.

   "When there is room" is gated by a CONTAINER query, not the
   viewport: the checkout #order_review and the cart .cart_totals
   both render in a NARROW (~360–380px) sidebar even at xl, so a
   viewport media query would wrongly split them. Container-query
   the shipment <td> so two columns appear only when the cell is
   actually wide enough (≥ 440px), and it stays single-column in
   the narrow sidebar and at mobile ≤640px automatically. Zero
   horizontal overflow at any width because each column min-width:0
   and the picker/select is width:100% of its column. */
/* TWO-COLUMN shipment layout. Now that checkout is 50/50, the
   order-review column is wide enough (~half the page) for two columns without
   cramping the carrier labels. Gate at ≥1080px viewport — at 50/50 that gives
   the order-review column ≈500px+, room for "Omniva parcel terminal: 4,50 €" on
   one line. Below 1080 (narrow tablet half-column + mobile) stays single-column. */
#order_review table.shop_table tr.woocommerce-shipping-totals > td > .woocommerce-shipping-methods,
#order_review table.shop_table tr.woocommerce-shipping-totals > td > .woocommerce-shipping-contents {
  min-width: 0;
}
/* ── Shipments span the FULL width of the order-review ──
   The order-review is a 2-column table (label | amount). A shipping row's
   methods/picker were stuck inside the left column (~70%), leaving the right
   half empty (visible from the half-width hairline). `display:block` on the
   <td> alone didn't free it — the surrounding table still imposes column
   widths. Fix: take the whole order-review table OUT of table layout
   (block flow), then re-lay only the value rows (product / subtotal / fee /
   total) as flex (label left, amount right). Shipping + pickup rows stay block,
   so they now occupy the FULL card width. */
#order_review table.shop_table,
#order_review table.shop_table > thead,
#order_review table.shop_table > tbody,
#order_review table.shop_table > tfoot,
#order_review table.shop_table > thead > tr,
#order_review table.shop_table > tbody > tr,
#order_review table.shop_table > tfoot > tr {
  display: block;
  width: 100%;
}
/* Value rows: label | amount on one baseline-aligned line. */
#order_review table.shop_table > thead > tr,
#order_review table.shop_table tr.cart_item,
#order_review table.shop_table tr.cart-subtotal,
#order_review table.shop_table tr.fee,
#order_review table.shop_table tr.order-total,
#order_review table.shop_table tr.recurring-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
}
#order_review table.shop_table tr.cart_item > th,
#order_review table.shop_table tr.cart_item > td,
#order_review table.shop_table tr.cart-subtotal > th,
#order_review table.shop_table tr.cart-subtotal > td,
#order_review table.shop_table tr.fee > th,
#order_review table.shop_table tr.fee > td,
#order_review table.shop_table tr.order-total > th,
#order_review table.shop_table tr.order-total > td,
#order_review table.shop_table tr.recurring-total > th,
#order_review table.shop_table tr.recurring-total > td,
#order_review table.shop_table > thead > tr > th {
  display: block;
}
/* label = first cell (grows, left); amount = last cell (fixed, right). */
#order_review table.shop_table tr.cart_item > *:first-child,
#order_review table.shop_table tr.cart-subtotal > *:first-child,
#order_review table.shop_table tr.fee > *:first-child,
#order_review table.shop_table tr.order-total > *:first-child,
#order_review table.shop_table tr.recurring-total > *:first-child,
#order_review table.shop_table > thead > tr > th:first-child {
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}
#order_review table.shop_table tr.cart_item > *:last-child,
#order_review table.shop_table tr.cart-subtotal > *:last-child,
#order_review table.shop_table tr.fee > *:last-child,
#order_review table.shop_table tr.order-total > *:last-child,
#order_review table.shop_table tr.recurring-total > *:last-child,
#order_review table.shop_table > thead > tr > th:last-child {
  flex: 0 0 auto;
  text-align: right;
}
/* Shipping + pickup rows: full-width block (the whole point — both columns). */
#order_review table.shop_table tr.woocommerce-shipping-totals,
#order_review table.shop_table tr.woocommerce-shipping-totals > th,
#order_review table.shop_table tr.woocommerce-shipping-totals > td,
#order_review table.shop_table tr.elvaro-pickup-row,
#order_review table.shop_table tr.elvaro-pickup-row > th,
#order_review table.shop_table tr.elvaro-pickup-row > td {
  display: block;
  width: 100%;
}

/* ============================================================
   My Account + order-received — cosmetic DS polish pass
   (owner: spacing/borders/alignment + grey↔yellow button parity)
   Items 3,4,5,6,7. Style plugin-rendered markup by class only.
   ============================================================ */

/* ── 3. Rental "Booking #N — <status>" summary box (order-received +
   view-order). WC Bookings ships a bright 2px #ddd border + a teal #248193
   "Paid" pill — neither is DS. Retheme to a DS hairline card and tint the
   status pills with our semantic tokens. ───────────────────────────────── */
.wc-booking-summary {
  margin: var(--sp-5) 0 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-1);
  color: var(--fg-2);
  /* Hug the content, not the cell — the card held a wide band of dead space to
     the right of its short summary. fit-content shrinks it to its widest line
     (the date range, or the "Booking #… PAID" header — whichever is wider); the
     max-width just caps a runaway value. No min-width: a floor was forcing the
     card wider than its actual content. (The badge no longer needs a wide box —
     the header is flex-start, so it sits right after the title.) */
  width: fit-content;
  max-width: 30rem;
}
/* The booking block lives inside the order-details product-name cell. On mobile
   WooCommerce's shop_table_responsive turns each row into a flex row, squeezing
   that cell to ~70px and breaking "Booking #4900"/"PAID" character-by-character.
   Let the product-name cell take the full row width so the block has room. */
@media (max-width: 768px) {
  /* The row is a flex row at this breakpoint (WC core). Force the product-name
     cell holding the booking block onto its OWN full-width line so the block
     isn't crushed to ~100px (which broke the title character-by-character). */
  /* Drop fixed-layout on a table that contains a booking block so its product
     cell can grow past the 70% column box (table-layout:fixed otherwise pins
     the cell to ~100px and crushes the booking block). */
  table.woocommerce-table--order-details:has(.wc-booking-summary) {
    table-layout: auto !important;
  }
  /* Opt the booking row OUT of WC core's responsive flex layout (which pins the
     product-name cell to ~100px). Revert it to plain block stacking so the cell
     — and the booking block inside — get the full card width. */
  table.woocommerce-table--order-details tr.order_item:has(.wc-booking-summary) {
    display: block !important;
    width: 100% !important;
  }
  table.woocommerce-table--order-details tr.order_item:has(.wc-booking-summary) > td.product-name,
  table.woocommerce-table--order-details tr.order_item:has(.wc-booking-summary) > td.product-total {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    text-align: left !important;
  }
  /* hide the responsive data-title pseudo-label on these reverted cells */
  table.woocommerce-table--order-details tr.order_item:has(.wc-booking-summary) > td::before {
    display: none !important;
  }
  .wc-booking-summary {
    max-width: 100%;
  }
  .wc-booking-summary .wc-booking-summary-number {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}
/* Header row: title + status badge sit TOGETHER on the left (badge right after
   the title), not pinned to opposite edges. Wraps cleanly at 390px. */
.wc-booking-summary .wc-booking-summary-number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2) var(--sp-3);
  color: var(--fg-1);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.wc-booking-summary .wc-booking-summary-number span {
  float: none;
  margin: 0;
  padding: 3px 10px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  /* default (unpaid / in-cart) */
  background: var(--surface-3);
  color: var(--fg-3);
}
.wc-booking-summary .wc-booking-summary-number .status-paid,
.wc-booking-summary .wc-booking-summary-number .status-confirmed,
.wc-booking-summary .wc-booking-summary-number .status-complete {
  background: var(--success-soft);
  color: var(--success);
}
.wc-booking-summary .wc-booking-summary-number .status-pending,
.wc-booking-summary .wc-booking-summary-number .status-pending-confirmation {
  background: var(--warning-soft);
  color: var(--warning);
}
.wc-booking-summary .wc-booking-summary-number .status-cancelled {
  background: var(--danger-soft);
  color: var(--danger);
}
.wc-booking-summary .wc-booking-summary-list {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}
.wc-booking-summary .wc-booking-summary-list li { margin: 0 0 var(--sp-1); }

/* ── 4. Subscriptions table — DS View button + consistent hairlines.
   The WCS table action cell uses bare .button (solid yellow); the recurring/
   next-payment rows need single continuous dividers like our other tables. ── */
.woocommerce-account .woocommerce-orders-table--subscriptions thead th {
  color: var(--fg-3);
}
.woocommerce-account .woocommerce-orders-table--subscriptions .woocommerce-orders-table__cell-subscription-actions a.button,
.woocommerce-account .woocommerce-orders-table--subscriptions td a.button.view {
  background: var(--surface-3);
  color: var(--fg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 5px 14px;
  font-size: var(--fs-caption);
  font-weight: 600;
  box-shadow: none;
}
.woocommerce-account .woocommerce-orders-table--subscriptions .woocommerce-orders-table__cell-subscription-actions a.button:hover,
.woocommerce-account .woocommerce-orders-table--subscriptions td a.button.view:hover {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
  background: var(--surface-3);
}

/* ── 5. Button grey↔yellow parity across My Account ──────────────────────
   DS rule: primary action = solid brand-yellow; secondary/destructive-soft =
   ghost (transparent fill, hairline border, light text → yellow on hover).
   Primary stays the default .button (already yellow). Mark the secondaries: */
/* ── My Rentals action buttons — one DS family ──────────────────────────────
   Extend + Submit extension = primary (solid yellow); "I've returned this" +
   Back = secondary (ghost: transparent + hairline, yellow on hover). All four
   share ONE size/shape. Scoped under .woocommerce-MyAccount-content (0,4,0) so
   the sizing beats WooCommerce's .button / .button.alt defaults — those made
   "Submit extension" 44px tall / 13px / 700 while "Extend" was 38px / 15px /
   600, so they didn't read as the same DS. (Equal height also relies on the PHP
   no longer adding inline margin-top to the Return button.) */
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .button.elvaro-extend-btn,
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .button.elvaro-return-btn,
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .extend-submit,
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .extend-pay,
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .elvaro-extend-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 16px;
  font-size: var(--fs-button, 15px);
  font-weight: 600;
  line-height: 1.1;
  border-radius: var(--radius-md);
}
/* Secondary (ghost) — "I've returned this" + Back */
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .button.elvaro-return-btn,
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .button.elvaro-extend-back {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--hairline-strong);
  box-shadow: none;
}
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .button.elvaro-return-btn:hover,
.woocommerce-account .woocommerce-MyAccount-content .elvaro-rental-card .button.elvaro-extend-back:hover {
  background: var(--surface-3);
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

/* "Subscription totals" heading: WC Subscriptions emits a bare, unclassed
   <h2> that inherits the global display scale (36px/800) — towering over the
   normalized 16px/700 "Order details"/"Billing address" h2s on view-order.
   Match the order-detail heading scale so the two detail pages are consistent. */
.woocommerce-account .woocommerce-MyAccount-content > h2:not([class]) {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

/* ── 5b. view-subscription / view-order DETAIL pages ──────────────────────
   These render via WC core (no theme template), so style by rendered class.
   The subscription "Actions" row + "Related orders/subscriptions" tables were
   ALL grey ghost buttons (random-looking). DS: the positive PRIMARY action is
   solid brand-yellow; Cancel + View stay ghost secondary. */
.woocommerce-account .woocommerce-MyAccount-content .subscription_details a.button.subscription_renewal_early,
.woocommerce-account .woocommerce-MyAccount-content table a.button.subscription_renewal_early,
.woocommerce-account .woocommerce-MyAccount-content table a.button.pay {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border: 1px solid var(--brand-yellow);
  font-weight: 700;
  box-shadow: var(--shadow-button);
}
.woocommerce-account .woocommerce-MyAccount-content .subscription_details a.button.subscription_renewal_early:hover,
.woocommerce-account .woocommerce-MyAccount-content table a.button.subscription_renewal_early:hover,
.woocommerce-account .woocommerce-MyAccount-content table a.button.pay:hover {
  background: var(--brand-yellow-hover);
  border-color: var(--brand-yellow-hover);
  color: var(--fg-on-yellow);
}
/* Cancel (destructive-soft) — explicit ghost so it never inherits a solid fill. */
.woocommerce-account .woocommerce-MyAccount-content .subscription_details a.button.cancel,
.woocommerce-account .woocommerce-MyAccount-content table a.button.cancel {
  background: var(--surface-3);
  color: var(--fg-2);
  border: 1px solid var(--hairline-strong);
  box-shadow: none;
  font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content .subscription_details a.button.cancel:hover,
.woocommerce-account .woocommerce-MyAccount-content table a.button.cancel:hover {
  border-color: var(--danger, var(--brand-yellow));
  color: var(--danger, var(--brand-yellow));
}
/* Space the "Actions" buttons (Cancel / Renew now) — WCS renders them as adjacent
   inline <a>s with only a whitespace gap, so they looked glued. Matches the 8px
   gap on the order-details Pay/Cancel. */
.woocommerce-account .woocommerce-MyAccount-content .subscription_details a.button + a.button {
  margin-left: var(--sp-2);
}

/* Subscription totals + order-details tables: continuous single hairlines, no
   missing/double dividers. The product rows (× items) had no bottom border
   while subtotal/total/shipment rows did → uneven. Normalise every body row. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.order_details tbody tr > *,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.subscription_details tbody tr > *,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody tr > * {
  border-bottom: 1px solid var(--hairline);
}
/* tfoot already carries its own hairlines; remove the body's last-row double. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.order_details tbody tr:last-child > *,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.subscription_details tbody tr:last-child > *,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody tr:last-child > * {
  border-bottom: none;
}

/* The "×" remove control in the subscription / order totals tables was a bare
   glyph — make it an obviously tappable button: a round target that fills with a
   soft-danger circle and turns red on hover/focus, so it reads as "remove this
   line". */
.woocommerce-account .woocommerce-MyAccount-content table.order_details a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--fg-4);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details a.remove:hover,
.woocommerce-account .woocommerce-MyAccount-content table.order_details a.remove:focus-visible {
  background-color: var(--danger-soft, rgba(239, 68, 68, 0.14));
  color: var(--danger);
}

/* ── 6a. "Company registration number" — first field inside the expanded
   "Invoice details" block sat flush against the summary toggle. ─────────── */
.elvaro-billing-details__body > .form-row:first-child,
.elvaro-billing-details__body > p:first-child {
  margin-top: var(--sp-4);
}

/* ── 6b. WCS "Update the Billing Address … of my active subscriptions
   (optional)" checkbox on edit-account — the checkbox + its wrapping label
   were vertically misaligned (the box sat below the first text line).
   The real markup is:
     <p id="update_all_subscriptions_billing_contact_field" class="form-row">
       <span class="woocommerce-input-wrapper">
         <label class="checkbox"><input #update_all_subscriptions_billing_contact> …text… </label>
   (an earlier rule targeted #update_all_subscriptions_addresses — a field id
   that does not exist here, so the misalignment was never fixed.)
   WC leaves the label text UNWRAPPED — "Update the … for", <strong>all</strong>,
   "future … subscriptions", <span>(optional)</span> are separate inline nodes —
   so `display:flex` on the label turned each run into its own flex item and
   scattered them across the row. Use a plain block label (text wraps as normal
   running text) with the checkbox absolutely placed in a left gutter, vertically
   centred on the first line. */
#update_all_subscriptions_billing_contact_field label.checkbox,
.woocommerce-account .woocommerce-MyAccount-content #update_all_subscriptions_billing_contact_field label.checkbox {
  display: block;
  position: relative;
  padding-left: calc(16px + var(--sp-2));
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-normal);
  margin: 0;
  cursor: pointer;
}
#update_all_subscriptions_billing_contact_field .woocommerce-input-wrapper {
  display: block;
}
.woocommerce-account .woocommerce-MyAccount-content #update_all_subscriptions_billing_contact,
#update_all_subscriptions_billing_contact {
  position: absolute;
  left: 0;
  top: calc((1em * var(--lh-normal) - 16px) / 2);
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-yellow);
}

/* ── 7. "Action required — sign your agreement / Sign now" banner.
   Banner shell already DS (yellow-soft); the "Sign now" CTA was an unstyled
   inline link mid-sentence. Make the banner a column with the CTA on its own
   right-aligned line, styled as the DS primary button. ──────────────────── */
.elvaro-signing-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.elvaro-signing-banner__cta.button {
  align-self: flex-start;
  margin-top: var(--sp-2);
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 700;
  font-size: var(--fs-button);
  box-shadow: var(--shadow-button);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard);
}
.elvaro-signing-banner__cta.button:hover {
  background: var(--brand-yellow-hover);
  color: var(--fg-on-yellow);
}
@media (min-width: 640px) {
  .elvaro-signing-banner__cta.button { align-self: flex-end; }
}

/* ============================================================
   Checkout login modal (elvaro-checkout: class-login-modal.php)
   Cart-preserving AJAX login. Dark, DS-tokened, Cyrillic-safe.
   ============================================================ */
.elvaro-login-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.elvaro-login-modal.is-open { display: flex; }
body.elvaro-login-open { overflow: hidden; }

.elvaro-login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}
.elvaro-login-modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  color: var(--fg-1);
}
.elvaro-login-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--fg-3);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.elvaro-login-modal__close:hover { color: var(--fg-1); background: var(--surface-3); }

.elvaro-login-modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  color: var(--fg-1);
}
.elvaro-login-modal__intro {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-normal);
}
.elvaro-login-modal__error {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--fg-1);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body-sm);
  margin: 0 0 var(--sp-4);
}
.elvaro-login-modal__label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--fg-3);
  margin: 0 0 var(--sp-1);
  font-weight: 600;
}
.elvaro-login-modal__input {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  margin: 0 0 var(--sp-4);
}
.elvaro-login-modal__input:focus {
  outline: none;
  border-color: var(--hairline-yellow);
  box-shadow: var(--shadow-yellow-ring);
}
.elvaro-login-modal__submit {
  width: 100%;
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-button);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background var(--dur-base) var(--ease-standard);
}
.elvaro-login-modal__submit:hover { background: var(--brand-yellow-hover); }
.elvaro-login-modal__submit:disabled { opacity: 0.6; cursor: default; }

.elvaro-login-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-4);
  gap: var(--sp-3);
}
.elvaro-login-modal__forgot {
  color: var(--brand-yellow);
  font-size: var(--fs-body-sm);
  text-decoration: none;
}
.elvaro-login-modal__forgot:hover { text-decoration: underline; }
.elvaro-login-modal__cancel {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--fg-2);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body-sm);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.elvaro-login-modal__cancel:hover { border-color: var(--hairline-yellow); color: var(--fg-1); }

/* Accessibility — skip-to-content link (visible only on keyboard focus) */
.elv-skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--brand-yellow);color:#0a0e11;padding:10px 16px;font-weight:700;border-radius:0 0 8px 0;}
.elv-skip-link:focus{left:0;outline:2px solid #0a0e11;}