/*
Theme Name: OmicronAudio
Theme URI: https://omicronaudio.gr
Author: Omicron Electronics
Author URI: https://omicronaudio.gr
Description: WordPress theme for OmicronAudio — Used Professional Audio Equipment by Omicron Electronics.
Version: 1.0.0
Text Domain: omicron-audio
*/

/* ============================================================
   OMICRON AUDIO — Main Stylesheet  v3 (Light Theme)
   ============================================================ */

/* ── 1. CSS Variables ─────────────────────────────────────── */
:root {
  --bg-primary:    #ffffff;
  --bg-surface:    #f5f5f5;
  --bg-card:       #ffffff;
  --bg-card-hover: #fafafa;
  --accent:        #ef651a;
  --accent-hover:  #c95714;
  --accent-light:  rgba(232,105,26,.08);
  --accent-dim:    rgba(232,105,26,.2);
  --success:       #22c55e;
  --danger:        #ef4444;
  --text-primary:  #111111;
  --text-secondary:#4b4b4b;
  --text-muted:    #888888;
  --border:        #e5e5e5;
  --border-strong: #cccccc;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.07);
  --shadow:        0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.13);
  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --nav-height:    72px;
  --transition:    all .2s ease;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --container:     1280px;
  --admin-bar-height: 0px;
}

/* WP admin bar offset */
body.admin-bar { --admin-bar-height: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --admin-bar-height: 46px; }
}

/* ── 2. Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  /* min-height: 100vh; */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-hover); }

/* ── 3. Typography ───────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.15; color: var(--text-primary); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
p  { color: var(--text-secondary); }
.eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ── 4. Container & Layout ───────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.section       { padding-block: 96px; }
.section--sm   { padding-block: 56px; }
.section--xs   { padding-block: 32px; }
.d-none        { display: none !important; }

/* ── 5. Navigation ───────────────────────────────────────── */
.navbar {
  position: fixed; top: var(--admin-bar-height); left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: box-shadow .3s ease, background .3s ease;
}
.navbar.scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.navbar__logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.5px;
}
.navbar__logo:hover { color: var(--text-primary); }
.navbar__logo-img {
  max-height: 60px;
  height: auto;
  width: auto;
  flex-shrink: 0;
}
.navbar__logo-icon {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.navbar__logo-sub {
  display: block;
  font-size: .65rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* Desktop nav */
.navbar__nav {
  display: flex; align-items: center; gap: 4px;
}
.navbar__nav > a, .nav-dropdown__toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  font-size: .875rem; font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: var(--transition);
  white-space: nowrap;
}
.navbar__nav > a:hover, .nav-dropdown__toggle:hover,
.navbar__nav > a.active, .nav-dropdown__toggle.active {
  color: var(--accent);
  background: var(--accent-light);
}

/* Products dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown__toggle i {
  font-size: .6rem; color: var(--text-muted);
  transition: transform .2s;
}
.nav-dropdown:hover .nav-dropdown__toggle i { transform: rotate(180deg); }
.nav-dropdown__menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.nav-dropdown:hover .nav-dropdown__menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown__menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  font-size: .875rem; color: var(--text-secondary);
  border-radius: var(--radius);
  gap: 8px;
}
.nav-dropdown__menu a:hover { background: var(--bg-surface); color: var(--accent); }
.dropdown-divider { height: 1px; background: var(--border); margin: 6px 8px; }
.dropdown-label {
  padding: 4px 12px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted);
}

/* Flyout subcategory */
.has-sub { position: relative; }
.has-sub > a { justify-content: space-between; }
.has-sub > a::after {
  content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: .55rem; color: var(--text-muted);
}
.sub-flyout {
  position: absolute; left: calc(100% + 4px); top: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.has-sub:hover .sub-flyout {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.sub-flyout a { justify-content: flex-start !important; }

/* Third-level flyout (L3) */
.sub-flyout .has-sub { position: relative; }
.sub-sub-flyout {
  position: absolute; left: calc(100% + 4px); top: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.sub-flyout .has-sub:hover > .sub-sub-flyout {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.sub-sub-flyout a { justify-content: flex-start !important; }

/* Navbar actions */
.navbar__actions {
  display: flex; align-items: center; gap: 8px;
}
.navbar__social {
  display: flex; align-items: center; gap: 2px;
}
.navbar__social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--text-muted);
  font-size: .85rem;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s, transform .15s;
  text-decoration: none;
}
.navbar__social a:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-light);
  transform: translateY(-1px);
}
.lang-switcher {
  display: flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-switcher button,
.lang-switcher a {
  padding: 5px 10px;
  font-size: .78rem; font-weight: 600;
  color: var(--text-muted);
  transition: var(--transition);
  text-decoration: none;
  display: block;
}
.lang-switcher button.active,
.lang-switcher button:hover,
.lang-switcher a.active,
.lang-switcher a:hover {
  background: var(--accent);
  color: #fff;
}
.btn-sell {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font-size: .82rem; font-weight: 600;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  transition: var(--transition);
}
.btn-sell:hover, .btn-sell.active {
  background: var(--accent); color: #fff;
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 40px; height: 40px; gap: 5px;
  border-radius: var(--radius);
}
.navbar__hamburger span {
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition);
}
.navbar__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.open span:nth-child(2) { opacity: 0; }
.navbar__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 6. Mobile Menu ──────────────────────────────────────── */
.mobile-menu {
  position: fixed; top: calc(var(--nav-height) + var(--admin-bar-height)); left: 0; right: 0; bottom: 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 999;
  display: flex; flex-direction: column;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu nav {
  display: flex; flex-direction: column;
  padding: 16px;
  gap: 2px;
  flex: 1;
}
.mobile-menu nav a {
  padding: 12px 16px;
  font-size: 1rem; font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius);
}
.mobile-menu nav a:hover { background: var(--bg-surface); color: var(--accent); }
.mobile-menu__bottom {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}

/* ── 7. Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  font-size: .875rem; font-weight: 600;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-outline {
  background: transparent; color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline-dark {
  background: transparent; color: var(--text-primary);
  border: 2px solid var(--text-primary);
}
.btn-outline-dark:hover { background: var(--text-primary); color: #fff; }
.btn-outline-light {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.6);
}
.btn-outline-light:hover { background: rgba(255,255,255,.15); border-color: #fff; color: #fff; }
.btn-ghost { background: transparent; border: none; }
.btn-ghost:hover { background: var(--bg-surface); }
.btn-sm { padding: 7px 14px; font-size: .8rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-xl { padding: 18px 36px; font-size: 1.05rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── 8. Forms ────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label { font-size: .83rem; font-weight: 600; color: var(--text-secondary); }
.form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: .9rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .2s;
}
.form-control:focus { border-color: var(--accent); }
.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { cursor: pointer; }
.form-success {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; padding: 32px 0;
  font-weight: 600; color: var(--success);
  font-size: 1rem;
}
.form-success i { font-size: 2.5rem; }

/* ── 8b. Contact Form 7 Overrides ────────────────────────── */
.wpcf7-form p { margin: 0 0 16px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
  font-size: .83rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
}
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  width: 100%;
  padding: 10px 14px;
  font-size: .9rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
  box-sizing: border-box;
}
.wpcf7-form-control:not(.wpcf7-submit):focus { border-color: var(--accent); }
.wpcf7-form-control::placeholder { color: var(--text-muted); }
.wpcf7-textarea { resize: vertical; min-height: 100px; }
.wpcf7-select { cursor: pointer; }

/* Sell/Contact form: disable textarea resize */
.sell-form-card textarea,
.contact-form-card textarea { resize: none; }

/* ── intl-tel-input theme overrides ───────────────────── */
.iti { width: 100%; }
.iti__country-container { border-right: 1.5px solid var(--border); }
.iti__search-input {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  font-family: inherit !important;
  padding: 8px 10px !important;
}
.iti__country-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 220px;
}
.iti__country {
  padding: 6px 10px;
  color: var(--text-primary);
}
.iti__country:hover,
.iti__country--highlight {
  background: var(--bg-surface);
}
.iti__dial-code { color: var(--text-muted); }

/* ── Photo upload zone ────────────────────────────────── */
.photo-upload { position: relative; }
.photo-upload .wpcf7-form-control-wrap {
  position: absolute; width: 0; height: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.photo-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: var(--text-muted);
  font-size: .85rem;
  text-align: center;
}
.photo-upload__dropzone:hover,
.photo-upload__dropzone--dragover {
  border-color: var(--accent);
  background: rgba(216,171,94,.06);
}
.photo-upload__dropzone i {
  font-size: 1.5rem;
  color: var(--accent);
}
.photo-upload__input { display: none; }
.photo-upload__previews {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.photo-upload__previews:not(:empty) { margin-top: 10px; }
.photo-upload__thumb {
  position: relative;
  width: 72px; height: 72px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.photo-upload__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.photo-upload__thumb-remove {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; line-height: 1;
}
.photo-upload__thumb-remove:hover { background: var(--danger); }
.photo-upload__dropzone--error {
  border-color: var(--danger);
  background: rgba(239,68,68,.05);
}
.photo-upload__error-msg {
  color: var(--danger);
  font-size: .8rem;
  margin-top: 6px;
}

.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: .875rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #fff;
  width: 100%;
}
.wpcf7-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.wpcf7-not-valid { border-color: var(--danger) !important; }
.wpcf7-not-valid-tip {
  color: var(--danger);
  font-size: .78rem;
  margin-top: 4px;
  display: block;
}
.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  font-size: .85rem;
  border: 1.5px solid var(--border) !important;
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--success) !important;
  color: var(--success);
  background: rgba(16, 185, 129, .08);
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
  border-color: var(--danger) !important;
  color: var(--danger);
  background: rgba(239, 68, 68, .08);
}
.wpcf7 .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

/* CF7 inside modal — tighter spacing */
.modal .wpcf7-form p { margin-bottom: 12px; }
.modal .wpcf7-submit { margin-top: 4px; }

/* CF7 two-column row helper: wrap two <p> tags in a <div class="form-row"> in CF7 markup */
.wpcf7-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpcf7-form .form-row p { margin-bottom: 0; }

/* ── 9. Badges ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: .9rem; font-weight: 700;
  border-radius: 50px;
  letter-spacing: .3px;
}
.badge-excellent  { background: rgba(255, 255, 255, 0.8); color: #16a34a; }
.badge-very-good  { background: rgba(255, 255, 255, 0.8); color: #2563eb; }
.badge-good       { background: rgba(255, 255, 255, 0.8); color: #ca8a04; }
.badge-fair       { background: rgba(255, 255, 255, 0.8); color: #dc2626; }
.badge-for-parts  { background: rgba(255, 255, 255, 0.8); color: #78716c; }
.badge-stock      { background: rgba(255, 255, 255, 0.8); color: #16a34a; }
.badge-arrival    { background: var(--accent); color: #fff; }

/* ── 10. Section Heading ─────────────────────────────────── */
.section-heading { text-align: center; margin-bottom: 56px; }
.section-heading__label {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.section-heading p { color: var(--text-muted); max-width: 560px; margin-inline: auto; margin-top: 10px; }

/* ── 11. HERO — Full Viewport ────────────────────────────── */
.hero-full {
  position: relative;
  margin-top: calc(var(--nav-height) + var(--admin-bar-height));
  margin-top: calc(var(--nav-height));
  height: calc(100vh - var(--nav-height) - var(--admin-bar-height));
  min-height: 560px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-full__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 100%);
}
.hero-full__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-full__sound-btn {
  position: absolute; bottom: 24px; right: 24px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7); font-size: .85rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .15s, color .15s;
}
.hero-full__sound-btn:hover { background: rgba(0,0,0,.65); color: #fff; }
.hero-full__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 20px;
}
.hero-eyebrow::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent);
}
.hero-full__content h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 28px;
}
.hero-full__content h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-full__ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 8px;
}
.hero-newsletter {
  display: flex; gap: 8px; margin-top: 24px;
  max-width: 440px;
}
.hero-newsletter__input {
  flex: 1; min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: .9rem; outline: none;
  -webkit-appearance: none; appearance: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: border-color .15s, background .15s;
}
.hero-newsletter__input::placeholder { color: rgba(255,255,255,.55); }
.hero-newsletter__input:focus { border-color: var(--accent); background: rgba(255,255,255,.15); }
.hero-scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  animation: heroScroll 2s ease-in-out infinite;
}
.hero-scroll-hint i { font-size: 1.1rem; }
@keyframes heroScroll {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ── 12. Trust Bar ───────────────────────────────────────── */
.trust-bar {
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  padding-block: 18px;
}
.trust-bar__items {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.trust-bar__item {
  display: flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 600;
  color: var(--text-secondary);
}
.trust-bar__item i { color: var(--accent); font-size: 1rem; }

/* ── 12b. Page Header (inner pages) ─────────────────────── */
.page-header {
  margin-top: var(--nav-height);
  padding-top: 52px;
  padding-bottom: 52px;
  background-color: #111111;
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.72) 0%, rgba(20,20,20,.62) 50%, rgba(42,26,14,.68) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-header::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 120%, rgba(232,105,26,.2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.page-header h1 {
  color: #ffffff;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.page-header p {
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  max-width: 540px;
  margin-inline: auto;
  position: relative; z-index: 1;
}
/* ── 13. Split Sections ─────────────────────────────────── */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
  overflow: hidden;
}
.split-section__img {
  overflow: hidden;
}
.split-section__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.split-section:hover .split-section__img img { transform: scale(1.03); }
.split-section__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px);
  background: var(--bg-primary);
}
.split-section--alt { background: var(--bg-surface); }
.split-section--alt .split-section__content { background: var(--bg-surface); }
.split-section--reverse .split-section__img { order: 2; }
.split-section--reverse .split-section__content { order: 1; }
.split-section__content .eyebrow { margin-bottom: 10px; }
.split-section__content h2 { margin-bottom: 16px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.split-section__content p { color: var(--text-muted); line-height: 1.75; margin-bottom: 28px; max-width: 460px; }

/* ── 14. Categories Grid ─────────────────────────────────── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
}
.category-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.category-card__icon { font-size: 2.2rem; margin-bottom: 25px; display: flex; justify-content: center; align-items: center; }
.category-card__icon img { width: 48px; height: 48px; object-fit: contain; }
.category-card__name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  min-height: 35px;
}
.category-card__count { font-size: .78rem; color: var(--text-muted); margin-bottom: 10px; display: block; }

/* ── 15. Product Cards ───────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.product-card {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.product-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-surface);
  background: transparent;
  flex-shrink: 0;
}
.product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-card__img img { transform: scale(1.06); }
.product-card__badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.product-card__body { padding: 10px 18px 18px 18px; flex: 1; }
.product-card__category { display: none; }
.product-card__name { display: block; font-size: .95rem; font-weight: 700; color: var(--text-primary); text-decoration: none; margin-bottom: 7px; line-height: 1.3; }
.product-card__brand { font-size: .8rem; color: var(--text-muted); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: color .2s; }
.product-card__brand:hover { color: var(--accent); }
.product-card__brand:hover .product-card__brand-logo { opacity: 1; }
.product-card__brand-logo { max-height: 25px; max-width: 70px; object-fit: contain; opacity: .6; transition: opacity .2s; }
.product-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.product-card__pricing { display: flex; flex-direction: column; gap: 2px; }
.product-card__price-type { font-size: calc(.68rem - 1px); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); line-height: 1.3; }
.product-card__price { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.product-card__vat { font-size: .68rem; color: var(--text-muted); font-weight: 400; }
.product-card__price-poa { font-size: .8rem; font-weight: 600; color: var(--text-muted); font-style: italic; }
.product-card__meta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.product-card__stock { font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.product-card__stock--in { color: var(--success, #22c55e); }
.product-card__stock--out { color: var(--text-muted); }
.product-card__stock-qty { font-weight: 400; }
.product-card__actions { display: flex; gap: 6px; }

/* ── 15b. Product Carousel ──────────────────────────────── */
.product-carousel {
  position: relative;
}
.product-carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.product-carousel__track::-webkit-scrollbar { display: none; }
.product-carousel__slide {
  flex: 0 0 280px;
}
.product-carousel__slide .product-card {
  height: 100%;
}
.product-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  z-index: 2;
}
.product-carousel__btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.product-carousel__btn--prev { left: -22px; }
.product-carousel__btn--next { right: -22px; }
.product-carousel__btn.hidden { opacity: 0; pointer-events: none; }

/* ── 16. Products Listing Layout ─────────────────────────── */
.listing-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 80px;
  align-items: start;
}
.listing-layout > main { min-width: 0; }
.listing-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--admin-bar-height) + 20px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: calc(100vh - var(--nav-height) - var(--admin-bar-height) - 40px);
  overflow-y: auto;
}
.listing-sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.listing-sidebar__header h3 {
  font-size: .7rem; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-muted); margin: 0;
}
.sidebar-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar-section:last-child { border-bottom: none; }

/* Collapsible filter sections (native <details>) */
details.sidebar-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
details.sidebar-section:last-child { border-bottom: none; }
.sidebar-section__toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  font-size: .68rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
  list-style: none;
}
.sidebar-section__toggle::-webkit-details-marker { display: none; }
.sidebar-section__toggle i {
  font-size: .6rem; transition: transform .25s;
}
details.sidebar-section:not([open]) .sidebar-section__toggle {
  margin-bottom: 0;
}
details.sidebar-section:not([open]) .sidebar-section__toggle i {
  transform: rotate(-90deg);
}

/* Subcategory group labels */
.sidebar-sublabel {
  display: block;
  font-size: .72rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 10px 0 4px;
}
.sidebar-sublabel:first-child { margin-top: 0; }

.sidebar-section h4 {
  font-size: .68rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.sidebar-option {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 0; font-size: .875rem;
  color: var(--text-secondary); cursor: pointer;
  transition: color .15s;
}
.sidebar-option input[type="radio"],
.sidebar-option input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0;
  width: 15px; height: 15px;
}
.sidebar-option label {
  display: flex; justify-content: space-between;
  align-items: center; flex: 1; min-width: 0;
  cursor: pointer; gap: 6px;
}
.sidebar-option label span:last-child {
  color: var(--text-muted); font-size: .78rem;
  background: var(--bg-surface);
  border-radius: 50px; padding: 1px 7px;
  flex-shrink: 0;
}
.sidebar-option:hover { color: var(--accent); }
.sidebar-option--locked {
  opacity: .55; cursor: default;
}
.sidebar-option--locked input,
.sidebar-option--locked label { cursor: default; }
.sidebar-option--l1 { font-weight: 600; }
.sidebar-option--l2 label { font-size: .875rem; }
.sidebar-option--l3 label { font-size: .85rem; color: var(--text-muted); }
.cat-children {
  display: none;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  margin-left: 7px;
  margin-bottom: 2px;
}
.cat-children.open { display: block; }
.cat-children .cat-children { margin-left: 7px; }
.cat-toggle {
  flex-shrink: 0;
  background: none; border: none;
  padding: 2px 4px; margin-left: auto;
  color: var(--text-muted); cursor: pointer;
  line-height: 1; border-radius: 4px;
  transition: color .15s;
}
.cat-toggle:hover { color: var(--accent); }
.cat-toggle i { display: block; font-size: .65rem; transition: transform .2s; }
.cat-toggle.open i { transform: rotate(90deg); }
/* Price range slider */
.price-slider { padding: 8px 0 4px; }
.price-slider__values {
  display: flex; justify-content: space-between;
  font-size: .82rem; color: var(--text-secondary);
  margin-bottom: 10px;
}
.price-slider__track {
  position: relative; height: 5px;
  background: var(--border); border-radius: 3px;
}
.price-slider__fill {
  position: absolute; height: 100%;
  background: var(--accent); border-radius: 3px;
  pointer-events: none;
}
.price-slider__track input[type="range"] {
  position: absolute; top: -7px; left: 0;
  width: 100%; height: 18px;
  background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0;
}
.price-slider__track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer; pointer-events: auto;
}
.price-slider__track input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer; pointer-events: auto;
}
.listing-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.listing-count {
  font-size: .875rem; color: var(--text-muted); font-weight: 500;
}
.listing-count strong { color: var(--text-primary); font-weight: 700; }
.sort-select {
  padding: 7px 32px 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem; font-family: var(--font);
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--text-primary);
  cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.sort-select:hover { border-color: var(--accent); }
.sort-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

/* Toolbar controls group */
.listing-toolbar__controls { display: flex; align-items: center; gap: 10px; }

/* ── Brands Bar ─────────────────────────────── */
.brands-bar {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  margin-bottom: 14px;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}
.brands-bar__arrow {
  flex-shrink: 0;
  width: 36px;
  background: var(--bg-primary);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transition: color .15s, background .15s;
}
.brands-bar__arrow--next { border-right: none; border-left: 1px solid var(--border); }
.brands-bar__arrow:hover { color: var(--text-primary); background: var(--bg-surface); }
.brands-bar__track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}
.brands-bar__track:active { cursor: grabbing; }
.brands-bar__track::-webkit-scrollbar { display: none; }
.brands-bar__item {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  min-width: 90px;
  cursor: pointer;
  transition: background .15s;
}
.brands-bar__item:last-child { border-right: none; }
.brands-bar__item img {
  max-height: 43px;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%) opacity(.55);
  transition: filter .2s;
}
.brands-bar__item:hover img { filter: grayscale(0%) opacity(.85); }
.brands-bar__item--selected img { filter: grayscale(0%) opacity(1) !important; }
.brands-bar__item span {
  font-size: .95rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  white-space: nowrap;
}
.brands-bar__item--selected span { color: var(--text-primary); color: #22c55e; }
.brands-bar__check {
  display: none;
  position: absolute;
  top: 5px; right: 5px;
  color: #22c55e;
  font-size: .6rem;
  line-height: 1;
  pointer-events: none;
}
.brands-bar__item--selected .brands-bar__check { display: block; }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 32px; padding: 12px 0; flex-wrap: wrap;
}
.pagination--top { margin-top: 0; margin-bottom: 8px; }
.pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text-primary);
  font-size: .875rem; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: all .2s ease;
}
.pagination__btn:hover:not(.pagination__btn--disabled):not(.pagination__btn--active) {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-light);
}
.pagination__btn--active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.pagination__btn--disabled {
  opacity: .35; cursor: not-allowed; pointer-events: none;
}
.pagination__ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 40px;
  color: var(--text-muted); font-size: .875rem; font-weight: 600;
  user-select: none;
}

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-tag, .active-filter-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 3px 12px;
  background: var(--accent-light); color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 50px; font-size: .78rem; font-weight: 600;
}
.filter-tag button, .active-filter-tag button {
  background: none; border: none; cursor: pointer;
  color: inherit; font-size: 1.1rem; line-height: 1;
  padding: 0; opacity: .7; transition: opacity .15s;
  position: relative;
  bottom: 2px;
}
.filter-tag button:hover, .active-filter-tag button:hover { opacity: 1; }

/* ── 17. Product Detail ──────────────────────────────────── */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  padding-top: calc(var(--nav-height) + var(--admin-bar-height) + 40px);
  padding-bottom: 80px;
  align-items: start;
}
.gallery__main {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  aspect-ratio: 4/3;
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery__zoom-btn {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff;
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 1rem; transition: all .2s ease;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.gallery__zoom-btn:hover { background: rgba(0,0,0,.7); transform: scale(1.1); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox--open { opacity: 1; visibility: visible; }
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.92);
}
.lightbox__img {
  position: relative; z-index: 1;
  max-width: 90vw; max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  transition: opacity .2s ease;
}
.lightbox__close {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  background: none; border: none; color: #fff;
  font-size: 2.4rem; font-weight: 300; line-height: 1;
  cursor: pointer; opacity: .7; transition: opacity .2s;
}
.lightbox__close:hover { opacity: 1; }
.lightbox__prev,
.lightbox__next {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%; color: #fff; font-size: 1.1rem;
  cursor: pointer; transition: all .2s;
}
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255,255,255,.25); }
.lightbox__counter {
  position: absolute; bottom: 20px; left: 50%; z-index: 2;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: .85rem; font-weight: 500;
}

.gallery__thumbs {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.gallery__thumb {
  width: 72px; height: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer; transition: var(--transition);
}
.gallery__thumb.active, .gallery__thumb:hover { border-color: var(--accent); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-info { position: sticky; top: calc(var(--nav-height) + var(--admin-bar-height) + 24px); min-width: 0; }
.detail-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text-muted);
  margin-bottom: 20px; flex-wrap: wrap;
}
.detail-breadcrumb a { color: var(--text-muted); }
.detail-breadcrumb a:hover { color: var(--accent); }
.detail-breadcrumb i { font-size: .55rem; }
.detail-category { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 8px; }
.detail-title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 4px; }
.detail-brand {
  font-size: .9rem; color: var(--text-muted); margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; transition: color .2s;
}
.detail-brand:hover { color: var(--accent); }
.detail-brand__logo { height: 60px; max-width: 150px; object-fit: contain; }
.detail-price { font-size: 2rem; font-weight: 800; color: var(--text-primary); }
.detail-price-poa { font-size: 1rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.detail-price-block { margin-bottom: 20px; display: flex; gap: 10px; align-items: center; }
.detail-price-vat { display: block; font-size: calc(.8rem - 1px); color: var(--text-muted); margin-top: 2px; line-height: 1.1; }
.detail-short-desc { font-size: .9rem; line-height: 1.7; color: var(--text-secondary); overflow-wrap: break-word; word-wrap: break-word; }
.detail-short-desc p:last-child { margin-bottom: 0; }
.detail-short-desc * { white-space: normal; }
.detail-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.detail-condition-block { display: flex; align-items: start; gap: 6px; flex-wrap: wrap; flex-direction: column; }
.detail-condition-block--visual { padding: 4px 0; }
.detail-condition-image { max-height: 19px; width: 100%; height: auto; display: block; }
.detail-condition-image--x-demo,
.detail-condition-image--x-stock { max-height: 16px; }
.detail-condition { display: flex; align-items: center; gap: 8px; }
.detail-condition-stars { display: flex; align-items: center; gap: 3px; font-size: 1.3rem; }
.detail-condition-stars .fa-solid { color: #f5a623; }
.detail-condition-stars .fa-regular { color: var(--border); }
.detail-warranty { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .9rem; color: var(--text-secondary); }
.warranty-icon--standard { color: #b08d57; }
.warranty-icon--advance  { color: #a0a0a0; }
.warranty-icon--premium  { color: #d4a017; }
.badge-warranty { background: rgba(255, 255, 255, 0.8); }
.badge-warranty--standard { color: #b08d57; }
.badge-warranty--advance  { color: #a0a0a0; }
.badge-warranty--premium  { color: #d4a017; }
/* Product card warranty icon */
.product-card__body { position: relative; }
.product-card__warranty {
  position: absolute; top: 12px; right: 14px;
  font-size: 1.05rem; line-height: 1; cursor: default;
}
.detail-stock { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-secondary); }
.detail-inquiry-box { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 20px; }
.detail-inquiry-box h4 { margin-bottom: 6px; }
.detail-inquiry-box p { font-size: .85rem; color: var(--text-muted); margin-bottom: 14px; }
.detail-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab-btn { padding: 10px 16px; font-size: .875rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--transition); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.entry-content p { margin: 0 0 1em; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin: 1.4em 0 .6em; color: var(--text-primary); }
.entry-content ul, .entry-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: .35em; }
.entry-content strong { color: var(--text-primary); }
.entry-content a { color: var(--accent); text-decoration: underline; }
.entry-content blockquote { border-left: 3px solid var(--accent); padding: .5em 0 .5em 1em; margin: 0 0 1em; color: var(--text-muted); font-style: italic; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: .5em 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.entry-content th, .entry-content td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }
.entry-content th { background: var(--bg-surface); font-weight: 600; color: var(--text-primary); }
.article-body { line-height: 1.85; color: var(--text-secondary); }
.article-body h2, .article-body h3 { color: var(--text-primary); margin: 28px 0 12px; }
.article-body p { margin-bottom: 16px; }
.article-body ul, .article-body ol { padding-left: 20px; margin-bottom: 16px; }
.article-body li { margin-bottom: 6px; }
.specs-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.specs-table tr:nth-child(even) { background: var(--bg-surface); }
.specs-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.specs-table td:first-child { font-weight: 600; color: var(--text-secondary); width: 45%; }
.specs-table td:last-child { color: var(--text-primary); }
.accessories-list { list-style: none; padding: 0; margin: 0; }
.accessories-list li {
  display: flex; align-items: center; gap: 17px;
  padding: 10px 12px; font-size: .875rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.accessories-list li:nth-child(even) { background: var(--bg-surface); }
.contact-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.channel-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 10px;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.channel-btn i { font-size: 1.2rem; }
.channel-btn--email {
  background: var(--accent-light); color: var(--accent);
  border-color: var(--accent-dim);
}
.channel-btn--email:hover { background: var(--accent); color: #fff; }
.channel-btn--phone {
  background: rgba(59,130,246,.08); color: #3b82f6;
  border-color: rgba(59,130,246,.2);
}
.channel-btn--phone:hover { background: #3b82f6; color: #fff; }

/* ── 18. News Masonry ────────────────────────────────────── */
.news-masonry {
  columns: 3;
  column-gap: 24px;
}
.news-masonry__item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}
.news-masonry__item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.news-masonry__item img {
  width: 100%; display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .4s ease;
}
.news-masonry__item:first-child img { aspect-ratio: 1/1; }
.news-masonry__item:hover img { transform: scale(1.04); }
.news-masonry__item > div { padding: 18px; }
.news-masonry__item .nm-cat {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent); margin-bottom: 6px;
}
.news-masonry__item h3 {
  font-size: .95rem; line-height: 1.35;
  margin-bottom: 8px;
}
.news-masonry__item p { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
.news-masonry__item .nm-date { font-size: .72rem; color: var(--text-muted); margin-top: 10px; }
.nm-read-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 600;
  color: var(--accent); margin-top: 10px;
  transition: var(--transition);
}
.nm-read-more:hover { gap: 8px; }

/* ── 19. News Cards ───────── */
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.news-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.news-card__img { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-surface); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-card__body { padding: 18px; }
.news-card__cat {
  font-size: .72rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
}
.news-card__title { font-size: .95rem; margin-bottom: 8px; line-height: 1.35; }
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--accent); }
.news-card__excerpt { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
.news-card__date { font-size: .72rem; color: var(--text-muted); margin-top: 10px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }

/* Article layout (news-detail) */
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding-top: calc(var(--nav-height) + var(--admin-bar-height) + 40px); padding-bottom: 80px; }
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: .82rem; }
.article-cat { color: var(--accent); font-weight: 700; }
.article-title { margin-bottom: 28px; font-size: clamp(1.6rem, 4vw, 2.8rem); }
.article-sidebar { position: sticky; top: calc(var(--nav-height) + var(--admin-bar-height) + 24px); display: flex; flex-direction: column; gap: 12px; }

/* ── 20. Social Section ──────────────────────────────────── */
.social-section { background: var(--bg-surface); }
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 36px;
  max-width: 900px;
  margin-inline: auto;
}
.social-grid__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}
.social-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.social-grid__item:hover img { transform: scale(1.08); }
.social-grid__item__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s;
}
.social-grid__item:hover .social-grid__item__overlay { opacity: 1; }
.social-grid__item__overlay i { font-size: 1.8rem; color: #fff; }
.social-links-row {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.social-link-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-size: .875rem; font-weight: 600;
  color: var(--text-secondary);
  transition: var(--transition);
}
.social-link-btn i { font-size: 1.1rem; }
.social-link-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.social-link-btn--insta:hover { border-color: #e1306c; color: #e1306c; background: rgba(225,48,108,.06); }
.social-link-btn--fb:hover    { border-color: #1877f2; color: #1877f2; background: rgba(24,119,242,.06); }
.social-link-btn--tiktok:hover { border-color: #010101; color: #010101; background: rgba(1,1,1,.06); }

/* ── 21. Brand Carousel ──────────────────────────────────── */
.brand-carousel-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding-block: 28px;
  background: var(--bg-primary);
}
.brand-carousel-section__label {
  text-align: center;
  font-size: .7rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 20px;
}
.brand-carousel__wrap { overflow: hidden; }
.brand-carousel__track {
  display: flex; align-items: center;
  width: max-content;
  animation: brandScroll 35s linear infinite;
}
.brand-carousel__track:hover { animation-play-state: paused; }
.brand-item {
  font-size: 1rem; font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .2s;
  flex-shrink: 0;
  margin-right: 48px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  min-width: 100px;
}
.brand-item img {
  max-height: 40px;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.4);
  opacity: .55;
  transition: var(--transition);
}
.brand-item:hover { color: var(--accent); }
.brand-item:hover img { filter: none; opacity: 1; }
@keyframes brandScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

/* ── 22. Search Overlay ──────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 120px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-overlay__close {
  position: absolute; top: 24px; right: 28px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem; color: var(--text-muted);
  border: 1.5px solid var(--border);
  transition: var(--transition);
}
.search-overlay__close:hover { background: var(--bg-surface); color: var(--text-primary); }
.search-overlay__inner { width: 100%; max-width: 680px; padding-inline: 24px; }
.search-overlay__field {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid var(--text-primary);
  padding-bottom: 12px; margin-bottom: 14px;
}
.search-overlay__field i { font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; }
.search-overlay__field input {
  flex: 1; border: none; background: transparent;
  font-size: 1.6rem; font-weight: 300; color: var(--text-primary);
  outline: none;
}
.search-overlay__field input::placeholder { color: var(--text-muted); }
.search-overlay__hint { font-size: .78rem; color: var(--text-muted); margin-bottom: 20px; }
.search-overlay__hint kbd {
  padding: 2px 6px; border: 1px solid var(--border-strong);
  border-radius: 4px; font-size: .72rem;
  background: var(--bg-surface);
}
.search-results { display: flex; flex-direction: column; gap: 2px; }
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.search-result-item:hover { background: var(--bg-surface); }
.search-result-item__img {
  width: 56px; height: 44px;
  border-radius: var(--radius);
  overflow: hidden; flex-shrink: 0;
  background: var(--bg-surface);
}
.search-result-item__img img { width: 100%; height: 100%; object-fit: cover; }
.search-result-item__cat { font-size: .72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.search-result-item__name { font-size: .9rem; font-weight: 600; color: var(--text-primary); }
.search-result-item__price { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-left: auto; flex-shrink: 0; }
.search-no-results { text-align: center; padding: 40px 0; color: var(--text-muted); }
.search-no-results i { font-size: 2rem; margin-bottom: 10px; }

/* ── 23. Modal ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 100%; max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform .3s ease;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 12px; }
.modal__product { font-size: .82rem; color: var(--text-muted); margin-top: 3px; }
.modal__close {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-muted); font-size: .9rem;
  transition: var(--transition);
}
.modal__close:hover { background: var(--bg-surface); color: var(--text-primary); }
.modal__form { display: flex; flex-direction: column; gap: 16px; }
#inquiry-modal form,
.sell-form-card form,
.contact-form-card form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#inquiry-modal form p,
.sell-form-card form p,
.contact-form-card form p {
    margin-bottom: 0;
}

/* ── 24. Toast ───────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 3000; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: .875rem; font-weight: 500;
  color: var(--text-primary);
  animation: toastIn .3s ease;
}
.toast-success i { color: var(--success); }
.toast-error i { color: var(--danger); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

/* ── 25. Newsletter Popup ────────────────────────────────── */
.nl-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden;
}
.nl-modal--open { visibility: visible; }

.nl-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s;
}
.nl-modal--open .nl-modal__backdrop { opacity: 1; }

.nl-modal__box {
  position: relative; z-index: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  max-width: 420px; width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  transform: translateY(20px) scale(.97);
  opacity: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
.nl-modal--open .nl-modal__box { transform: translateY(0) scale(1); opacity: 1; }

.nl-modal__close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: 6px;
  line-height: 1; border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.nl-modal__close:hover { color: var(--text-primary); background: var(--bg-surface); }

.nl-modal__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 20px;
}
.nl-modal__label {
  font-size: .65rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.nl-modal__title {
  font-size: 1.4rem; font-weight: 700; margin-bottom: 10px;
  color: var(--text-primary);
}
.nl-modal__text {
  font-size: .9rem; color: var(--text-secondary);
  line-height: 1.6; margin-bottom: 24px;
}
.nl-modal__form {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.nl-modal__input {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text-primary);
  font-size: .9rem; outline: none;
  transition: border-color .15s;
}
.nl-modal__input:focus { border-color: var(--accent); }
.nl-modal__success {
  display: none;
  padding: 20px 0 8px;
  color: #22c55e; font-size: .95rem;
}
.nl-modal__success i { font-size: 2rem; display: block; margin-bottom: 10px; }
.nl-modal__skip {
  background: none; border: none; cursor: pointer;
  font-size: .8rem; color: var(--text-muted);
  padding: 8px; margin-top: 4px;
  transition: color .15s;
}
.nl-modal__skip:hover { color: var(--text-secondary); }

/* ── 26. Back to Top ─────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 500;
  width: 44px; height: 44px;
  background: var(--text-primary); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s, visibility .3s, transform .3s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); color: #fff; }

/* ── 26. Newsletter Section ──────────────────────────────── */
.newsletter-section {
  background: var(--text-primary);
  color: #fff;
  text-align: center;
  padding-block: 72px;
}
.newsletter-section .section-heading__label { color: var(--accent); }
.newsletter-section h2 { color: #fff; }
.newsletter-section p { color: rgba(255,255,255,.65); }
.newsletter-form {
  display: flex; gap: 10px; max-width: 460px;
  margin-inline: auto; margin-top: 24px; flex-wrap: wrap;
}
.newsletter-form input {
  flex: 1; min-width: 200px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: var(--radius);
  padding: 10px 16px; font-size: .9rem;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
.newsletter-form input:focus { border-color: var(--accent); }

/* ── Homepage: hide footer ───────────────────────────────── */
body.home .footer-slim { display: none; }

/* ── 27. Footer ──────────────────────────────────────────── */
/* ── Slim Footer ───────────────────────────────────────── */
.footer-slim {
  background: #fff;
  color: rgba(0,0,0,.6);
  height: 120px;
  border-top: 1px solid #e5e5e5;
}
.footer-slim__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}
.footer-slim__logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 800;
  color: #111; text-decoration: none;
  transition: color .2s;
  flex-shrink: 0;
}
.footer-slim__logo:hover { color: var(--accent); }
.footer-slim__contact {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; justify-content: flex-end;
}
.footer-slim__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; color: rgba(0,0,0,.55);
  text-decoration: none; transition: color .2s;
}
.footer-slim__link:hover { color: var(--accent); }
.footer-slim__link i { color: var(--accent); font-size: .8rem; }
.footer-slim__social {
  display: flex; gap: 8px;
}
.footer-slim__social a {
  width: 32px; height: 32px;
  background: rgba(0,0,0,.06);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.55); font-size: .8rem;
  transition: var(--transition);
}
.footer-slim__social a:hover { background: var(--accent); color: #fff; }

/* ── Old Footer (kept for backup) ─────────────────────── */
.footer {
  background: #111111;
  color: rgba(255,255,255,.6);
  padding-top: 60px;
  padding-bottom: 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 800;
  color: #fff; margin-bottom: 14px;
}
.footer__desc { font-size: .875rem; line-height: 1.7; max-width: 280px; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: .85rem;
  transition: var(--transition);
}
.footer__social a:hover { background: var(--accent); color: #fff; }
.footer__col h5 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 8px; }
.footer__links a { font-size: .875rem; color: rgba(255,255,255,.55); transition: var(--transition); }
.footer__links a:hover { color: var(--accent); }
.footer__contact-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .875rem; color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.footer__contact-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; position: relative; top: 3px; }
.footer__contact-item a { color: rgba(255,255,255,.55); }
.footer__contact-item a:hover { color: var(--accent); }
.footer__bottom {
  padding-block: 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: .8rem;
}

/* ── 28-31. Page-specific layouts ──────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: var(--transition);
}
.step-card:hover { box-shadow: var(--shadow); }
.step-card__num {
  width: 52px; height: 52px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800;
  margin-inline: auto; margin-bottom: 16px;
}
.step-card h4 { margin-bottom: 8px; }
.step-card p { font-size: .875rem; color: var(--text-muted); }
.sell-hero {
  padding-top: calc(var(--nav-height) + var(--admin-bar-height) + 64px);
  padding-bottom: 64px;
  text-align: center;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.sell-form-card {
  max-width: 680px; margin-inline: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
}
.sell-form-card h3 { margin-bottom: 24px; }
.about-hero {
  padding-top: calc(var(--nav-height) + var(--admin-bar-height) + 64px);
  padding-bottom: 80px;
  background: #fff;
  color: var(--text-primary);
}
.about-hero p { color: var(--text-secondary); }
.about-hero__logo { width: 100%; margin-bottom: 24px; }
.about-hero__grid { display: grid; grid-template-columns: 3fr 1fr; gap: 60px; align-items: center; }
.about-hero__img { border-radius: var(--radius-xl); overflow: hidden; }
.about-hero__img img { width: 100%; display: block; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.value-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: var(--transition);
}
.value-card:hover { box-shadow: var(--shadow); }
.value-card__icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}
.value-card h4 { margin-bottom: 8px; text-align: center; }
.value-card p { font-size: .875rem; color: var(--text-muted); text-align: center; }
.brand-logo-card {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 20px;
  text-align: center; font-size: 1rem; font-weight: 700;
  color: var(--text-muted); text-decoration: none;
  transition: var(--transition);
}
.brand-logo-card img {
  max-width: 120px; max-height: 36px;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.4);
  opacity: .6;
  transition: var(--transition);
}
.brand-logo-card:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: var(--shadow);
}
.brand-logo-card:hover img {
  filter: none; opacity: 1;
}
.faq-list { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; font-size: .95rem; font-weight: 600;
  color: var(--text-primary); text-align: left; gap: 12px;
}
.faq-question:hover { color: var(--accent); }
.faq-question i { color: var(--text-muted); flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-question i { transform: rotate(45deg); color: var(--accent); }
.faq-answer { display: none; padding: 0 20px 18px; font-size: .875rem; color: var(--text-muted); line-height: 1.75; }
.faq-item.open .faq-answer { display: block; }
.breadcrumb {
  padding: 14px 0 0;
}
.breadcrumb__nav {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text-muted);
}
.breadcrumb__nav a {
  color: var(--text-muted); display: flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.breadcrumb__nav a:hover { color: var(--accent); }
.breadcrumb__sep { font-size: .55rem; color: var(--text-muted); }
.breadcrumb__current { color: var(--text-secondary); font-weight: 500; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.contact-info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.contact-map {
  margin-top: 24px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  background: var(--bg-surface);
}
.contact-map iframe { display: block; width: 100%; height: 100%; }
.contact-info-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--border);
}
.contact-info-row:last-child { border-bottom: none; }
.contact-info-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--accent-light);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.contact-info-text p:first-child { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 2px; }
.contact-info-text p:last-child { font-size: .9rem; color: var(--text-primary); }
.contact-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
}
.contact-form-card h3 {
  font-size: 1.4rem;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

/* ── 32b. Mobile Filter Drawer ───────────────────────────── */
.filter-toggle-btn {
  display: none;
}
.filter-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: .95rem;
  transition: var(--transition);
  flex-shrink: 0;
}
.filter-close-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.listing-sidebar__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.filter-overlay {
  display: none;
}

/* ── 33. Responsive ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .detail-layout { grid-template-columns: 1fr 360px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .split-section { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .navbar__nav, .navbar__actions .btn-sell { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__logo-img { max-height: 44px; }
  .listing-layout { grid-template-columns: 1fr; }

  /* Mobile filter drawer */
  .filter-toggle-btn {
    display: inline-flex;
    margin-bottom: 12px;
  }
  .filter-close-btn {
    display: flex;
  }
  .filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    z-index: 1099;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .filter-overlay.open {
    opacity: 1;
    visibility: visible;
  }
  .listing-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 320px;
    max-width: 85vw;
    max-height: none;
    z-index: 1100;
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  .listing-sidebar.open {
    transform: translateX(0);
  }
  body.filters-open {
    overflow: hidden;
  }

  .detail-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gallery"
      "info"
      "tabs";
  }
  .detail-left-col { display: contents; }
  .detail-left-col .gallery { grid-area: gallery; }
  .detail-tabs-wrapper { grid-area: tabs; margin-top: 0 !important; }
  .detail-info { grid-area: info; position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .about-hero__grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .news-masonry { columns: 2; }
  .social-grid { grid-template-columns: repeat(4, 1fr); }
  .split-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .split-section__img { aspect-ratio: 16/9; }
  .split-section--reverse .split-section__img { order: 0; }
  .split-section--reverse .split-section__content { order: 1; }
  .split-section__content { padding: 48px 24px; }
}

@media (max-width: 640px) {
  .navbar__logo-text { display: none; }
  .navbar__logo-hero { max-height: 42px; }
  .container { padding-inline: 16px; }
  .section { padding-block: 60px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
  .listing-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .listing-toolbar__controls { flex-direction: column; gap: 8px; }
  .listing-toolbar__controls select { width: 100%; }
  .pagination { gap: 4px; margin-top: 24px; }
  .pagination__btn { min-width: 36px; height: 36px; font-size: .8rem; }
  .product-carousel__slide { flex: 0 0 240px; }
  .product-carousel__btn { width: 36px; height: 36px; font-size: .75rem; }
  .product-carousel__btn--prev { left: -4px; }
  .product-carousel__btn--next { right: -4px; }
  .categories-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .wpcf7-form .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero-full__ctas { flex-direction: column; }
  .news-masonry { columns: 1; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .sell-form-card { padding: 24px 16px; }
  .modal { padding: 24px 16px; }
  .trust-bar__items { gap: 20px; }
  .values-grid { grid-template-columns: 1fr; }
  .social-links-row { flex-direction: column; align-items: center; }
  .footer-slim { height: auto; padding: 24px 0; }
  .footer-slim__inner { flex-direction: column; gap: 16px; text-align: center; }
  .footer-slim__contact { justify-content: center; }
  .footer-slim__logo img { max-height: 36px !important; height: auto !important; }
}