/* =========================================================
   Turbo Tech Engineers — Global Stylesheet
   Palette (from logo — do not introduce other hues):
   Primary Red #C60808 | Secondary Red #BC1B19
   Gold #F9BE0B | Gray #5B5555 | White / Off-white
   Style direction: bold, industrial, confident typography
   ========================================================= */

:root {
  --primary-red: #C60808;
  --secondary-red: #BC1B19;
  --gold: #F9BE0B;
  --gray: #5B5555;
  --white: #FFFFFF;
  --off-white: #F7F5F3;

  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 4px 20px rgba(91, 85, 85, 0.14);
  --shadow-hover: 0 10px 30px rgba(198, 8, 8, 0.2);
  --max-width: 1200px;
  --header-h: 84px;
  --header-h-compact: 62px;
  --topbar-h: 34px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--gray);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

body.drawer-locked { overflow: hidden; }

/* Content protection (deterrent only, see js/content-protection.js) —
   text selection is disabled site-wide except inside form fields, so
   contact forms / search / etc. keep working normally. */
body.content-protected {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body.content-protected input,
body.content-protected textarea,
body.content-protected select,
body.content-protected [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

body.content-protected img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

img { max-width: 100%; display: block; }

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

ul { list-style: none; }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Wider container for the shop sidebar+grid layout only (Shop All,
   category pages, brand pages) — gives the product grid room to use
   large cards next to the filter sidebar instead of a cramped column.
   Header/footer/hero on these pages keep the standard .container width. */
.container--wide { max-width: 1400px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--gray);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-red);
  margin-bottom: 10px;
  font-family: var(--font-heading);
}

.section { padding: 80px 0; }
.section--off { background: var(--off-white); }
.section--tight { padding: 64px 0; }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 46px;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  margin-bottom: 12px;
}

.section-head p {
  color: var(--gray);
  opacity: 0.9;
  font-weight: 500;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
  color: var(--white);
  box-shadow: 0 8px 20px rgba(198, 8, 8, 0.3);
}
.btn--primary:hover { box-shadow: 0 12px 26px rgba(198, 8, 8, 0.4); transform: translateY(-2px); }

.btn--gold {
  background: var(--gold);
  color: #3a2c00;
  box-shadow: 0 8px 20px rgba(249, 190, 11, 0.35);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(249, 190, 11, 0.45); }

.btn--outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white); }

.btn--full { width: 100%; }

.btn--sm {
  padding: 7px 16px;
  font-size: 0.68rem;
  gap: 5px;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--white);
  box-shadow: 0 2px 14px rgba(91, 85, 85, 0.12);
}

.top-bar {
  background: linear-gradient(90deg, var(--primary-red), var(--secondary-red));
  color: var(--white);
  max-height: var(--topbar-h);
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

.site-header.is-scrolled .top-bar { max-height: 0; opacity: 0; }

.top-bar .container {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-bar span {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header-grid {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
  transition: height 0.3s ease;
}

.site-header.is-scrolled .header-grid { height: var(--header-h-compact); }

/* Burger */
.burger-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.burger-btn:hover { background: rgba(198, 8, 8, 0.06); }

.burger-btn span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--gray);
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}

.burger-btn:hover span { background: var(--primary-red); }

body.drawer-open .burger-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); background: var(--primary-red); }
body.drawer-open .burger-btn span:nth-child(2) { opacity: 0; }
body.drawer-open .burger-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background: var(--primary-red); }

/* Logo */
.brand { flex-shrink: 0; display: flex; align-items: center; height: 100%; }
.brand img { height: 54px; width: auto; transition: height 0.3s ease; }
.site-header.is-scrolled .brand img { height: 40px; }

/* Persistent nav links (desktop) */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 500px;
  opacity: 1;
  transition: max-width 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}

.site-header.is-scrolled .nav-links {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.nav-links li { flex-shrink: 0; }

.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--primary-red); background: rgba(198, 8, 8, 0.06); }

.nav-links > li > a .chev { width: 14px; height: 14px; transition: transform 0.2s ease; }

.nav-item--products { position: relative; }

.nav-item--products:hover .nav-products-link .chev,
.nav-item--products.is-open .nav-products-link .chev,
.nav-item--products:focus-within .nav-products-link .chev { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: 460px;
  max-width: 80vw;
  background: var(--white);
  border-radius: 10px;
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-hover);
  padding: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.nav-item--products:hover .nav-dropdown,
.nav-item--products.is-open .nav-dropdown,
.nav-item--products:focus-within .nav-dropdown {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.nav-dropdown-inner {
  display: flex;
  flex-direction: column;
}

.nav-dropdown-group + .nav-dropdown-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(91, 85, 85, 0.12);
}

.nav-dropdown-group-heading {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-red);
  opacity: 0.85;
  padding: 6px 12px 8px;
}

.nav-dropdown-group-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.nav-dropdown-inner a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gray);
  border-radius: 7px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-inner a:hover { background: var(--off-white); color: var(--primary-red); }
.nav-dropdown-inner a svg { width: 18px; height: 18px; color: var(--primary-red); flex-shrink: 0; }

/* Compact nav search bar (category select + input + search button) */
.nav-search {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  width: 300px;
  max-width: 300px;
  height: 42px;
  border: 1.5px solid rgba(91, 85, 85, 0.18);
  border-radius: 999px;
  background: var(--off-white);
  opacity: 1;
  transition: max-width 0.3s ease, opacity 0.25s ease, border-color 0.15s ease;
}

.nav-search:focus-within { border-color: var(--primary-red); }

.site-header.is-scrolled .nav-search {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  border-width: 0;
}

.nav-search-select { position: relative; flex-shrink: 0; }

.nav-search-select-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 10px;
  max-width: 130px;
  background: none;
  border: none;
  border-right: 1.5px solid rgba(91, 85, 85, 0.18);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
}

.nav-search-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-search-select-btn .chev { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s ease; }
.nav-search-select.open .nav-search-select-btn .chev { transform: rotate(180deg); }

.nav-search-select-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.14);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}

.nav-search-select.open .nav-search-select-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-search-select-menu li {
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-search-select-menu li:hover { background: rgba(198, 8, 8, 0.07); color: var(--primary-red); }
.nav-search-select-menu li[aria-selected="true"] { color: var(--primary-red); background: rgba(249, 190, 11, 0.14); }

.nav-search-select-group-label {
  padding: 8px 11px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-red);
  opacity: 0.85;
  pointer-events: none;
  cursor: default;
}

.nav-search-select-group-label:not(:first-child) {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(91, 85, 85, 0.12);
}

.nav-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--gray);
}

.nav-search-input::placeholder { color: rgba(91, 85, 85, 0.55); }

.nav-search-btn {
  flex-shrink: 0;
  width: 42px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0 999px 999px 0;
  background: var(--primary-red);
  color: var(--white);
  transition: background 0.15s ease;
}

.nav-search-btn:hover { background: var(--secondary-red); }
.nav-search-btn svg { width: 17px; height: 17px; }

/* Drawer (mobile) variant — full width, own section like drawer-currency */
.drawer-search { padding: 22px 24px 8px; border-top: 1px solid rgba(91, 85, 85, 0.1); margin-top: 4px; }

.nav-search--drawer {
  width: 100%;
  max-width: none;
  height: 46px;
}

/* =========================================================
   Live search dropdown (autocomplete) — appears below the nav
   search bar as the user types. Works identically for the header
   and drawer search instances since both share [data-nav-search].
   ========================================================= */
.nav-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: 12px;
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-hover);
  padding: 8px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 70;
}

.nav-search.search-open .nav-search-results {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-results-section + .search-results-section {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(91, 85, 85, 0.1);
}

.search-results-heading {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-red);
  opacity: 0.85;
  padding: 8px 10px 6px;
}

.search-suggestions-list { display: flex; flex-direction: column; }

.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--gray);
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.search-suggestion-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.6; }
.search-suggestion-item strong { color: var(--primary-red); font-weight: 700; }

.search-suggestion-item:hover {
  background: rgba(198, 8, 8, 0.06);
  color: var(--primary-red);
}

.search-products-list { display: flex; flex-direction: column; gap: 2px; }

.search-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.search-result-row:hover { background: rgba(198, 8, 8, 0.06); }

.search-result-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(91, 85, 85, 0.3);
}

.search-result-thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-result-thumb svg { width: 55%; }

.search-result-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.search-result-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-result-meta .price-current { font-size: 0.86rem; }
.search-result-meta .price-current--enquire { font-size: 0.72rem; }

.search-result-stock {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(91, 85, 85, 0.55);
}

.search-results-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 10px;
  border-top: 1px solid rgba(91, 85, 85, 0.1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-red);
  border-radius: 0 0 8px 8px;
  transition: background 0.15s ease;
}

.search-results-viewall svg { width: 14px; height: 14px; }
.search-results-viewall:hover { background: rgba(198, 8, 8, 0.06); }

.search-results-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray);
  opacity: 0.75;
}

@media (max-width: 560px) {
  .search-result-thumb { width: 38px; height: 38px; }
  .search-result-name { font-size: 0.82rem; }
}

/* Currency selector */
.header-currency-wrap {
  margin-left: auto;
  flex-shrink: 0;
  max-width: 220px;
  opacity: 1;
  transition: max-width 0.3s ease, opacity 0.25s ease;
}

.site-header.is-scrolled .header-currency-wrap {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

.currency-select { position: relative; }

.currency-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--off-white);
  border: 1.5px solid rgba(91, 85, 85, 0.18);
  padding: 10px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--gray);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.currency-btn:hover { border-color: var(--primary-red); color: var(--primary-red); }

.currency-btn .chev { width: 14px; height: 14px; transition: transform 0.2s ease; }

.currency-select.open .currency-btn .chev { transform: rotate(180deg); }
.currency-select.open .currency-btn { border-color: var(--primary-red); color: var(--primary-red); }

.currency-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.14);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  min-width: 210px;
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 70;
}

.currency-select.open .currency-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.currency-menu li {
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.currency-menu li:hover { background: rgba(198, 8, 8, 0.07); color: var(--primary-red); }

.currency-menu li[aria-selected="true"] {
  color: var(--primary-red);
  background: rgba(249, 190, 11, 0.14);
}

/* =========================================================
   Language switcher (footer) — structural clone of .currency-select
   above (same open/close pattern), recolored for the dark footer
   background instead of the light header. Menu opens upward
   (bottom: 100%, not top) since this sits at the very bottom of the
   page with no room to open downward.
   ========================================================= */
.lang-switcher { position: relative; }

.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.lang-switcher-btn:hover { border-color: var(--gold); color: var(--gold); }
.lang-switcher-btn .chev { width: 13px; height: 13px; transition: transform 0.2s ease; }
.lang-switcher.open .lang-switcher-btn .chev { transform: rotate(180deg); }
.lang-switcher.open .lang-switcher-btn { border-color: var(--gold); color: var(--gold); }

.lang-switcher-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.14);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  min-width: 140px;
  padding: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}

.lang-switcher.open .lang-switcher-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-switcher-menu li {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-switcher-menu li:hover { background: rgba(198, 8, 8, 0.07); color: var(--primary-red); }

.lang-switcher-menu li[aria-selected="true"] {
  color: var(--primary-red);
  background: rgba(249, 190, 11, 0.14);
}

/* Google Website Translator — widget UI hidden entirely; only its
   underlying translation function is used, driven by .lang-switcher
   above (see initLanguageSwitcher()/setSiteLanguage() in main.js). */
/* Positioned off-screen rather than display:none — some versions of
   the widget measure/render into this container during init and can
   behave inconsistently if it's never actually in the render tree. */
#google_translate_element {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  height: 0 !important;
  overflow: hidden !important;
}
.goog-te-banner-frame, .goog-te-gadget-icon { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; visibility: hidden !important; }
/* pointer-events: none is the real fix for the hover tooltip — it stops
   the mouseover from ever reaching Google's own listener, so the
   tooltip is never created in the first place, rather than being
   hidden after the fact. background/box-shadow removal keeps translated
   text visually identical to normal text (no dotted underline). */
.goog-text-highlight { background: none !important; box-shadow: none !important; pointer-events: none !important; }
body { top: 0 !important; }

/* =========================================================
   Slide-out Nav Drawer
   ========================================================= */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(91, 85, 85, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 350;
}

body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 88vw);
  background: var(--white);
  z-index: 400;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

body.drawer-open .nav-drawer { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px;
  border-bottom: 3px solid var(--gold);
}

.drawer-logo { height: 40px; width: auto; }

.drawer-close {
  background: var(--off-white);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  transition: background 0.15s ease, color 0.15s ease;
}

.drawer-close:hover { background: var(--primary-red); color: var(--white); }
.drawer-close svg { width: 18px; height: 18px; }

.drawer-list { padding: 12px 10px 32px; }

.drawer-list > li { border-bottom: 1px solid rgba(91, 85, 85, 0.1); }

.drawer-list > li > a {
  display: block;
  padding: 20px 14px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
  transition: color 0.15s ease, padding-left 0.15s ease;
  border-left: 4px solid transparent;
}

.drawer-list > li > a:hover,
.drawer-list > li > a.active {
  color: var(--primary-red);
  border-left-color: var(--gold);
  padding-left: 20px;
}

.drawer-products-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px;
  background: none;
  border: none;
  border-left: 4px solid transparent;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
  transition: color 0.15s ease;
}

.drawer-products-toggle:hover,
.drawer-item-products.open .drawer-products-toggle {
  color: var(--primary-red);
  border-left-color: var(--gold);
}

.drawer-products-toggle .chev {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.drawer-item-products.open .drawer-products-toggle .chev { transform: rotate(180deg); }

.drawer-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
  background: var(--off-white);
}

.drawer-item-products.open .drawer-submenu { max-height: 640px; }

.drawer-submenu-inner {
  padding: 10px;
}

.drawer-submenu-group + .drawer-submenu-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(91, 85, 85, 0.14);
}

.drawer-submenu-group-heading {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-red);
  opacity: 0.85;
  padding: 6px 10px 6px;
}

.drawer-submenu-group-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.drawer-submenu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--gray);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.drawer-submenu a:hover { background: var(--white); color: var(--primary-red); box-shadow: var(--shadow); }

.drawer-submenu a svg { width: 17px; height: 17px; color: var(--primary-red); flex-shrink: 0; }

.drawer-currency {
  padding: 22px 24px 30px;
  border-top: 1px solid rgba(91, 85, 85, 0.1);
  margin-top: 4px;
}

.drawer-section-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
  opacity: 0.65;
  margin-bottom: 10px;
}

.drawer-currency .currency-select { width: 100%; }
.drawer-currency .currency-btn { width: 100%; justify-content: space-between; }

/* =========================================================
   Hero Carousel
   ========================================================= */
.hero {
  position: relative;
  background: url('../images/hero-guy.png') center/cover no-repeat;
  color: var(--white);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 88% 12%, rgba(249, 190, 11, 0.16), transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(198, 8, 8, 0.1), transparent 40%),
    linear-gradient(rgba(26, 26, 26, 0.66), rgba(26, 26, 26, 0.66));
  pointer-events: none;
}

.hero-head {
  position: relative;
  text-align: center;
  padding: 56px 24px 20px;
}

.hero-head .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.hero-head .hero-badge strong { color: var(--white); }

.hero-brochure { margin-bottom: 16px; }

.hero-head h1 {
  color: var(--white);
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  margin-bottom: 12px;
}

.hero-head h1 .accent-red { color: var(--white); }
.hero-head h1 .accent-gold { color: var(--white); }

.hero-head p.tagline {
  max-width: 680px;
  margin: 0 auto;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.carousel {
  position: relative;
  padding: 40px 0 64px;
}

.carousel-viewport {
  overflow: hidden;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 60px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: pan-y;
}

.carousel-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 8px 12px;
}

.slide-copy .slide-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.slide-copy h3 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 12px;
}

.slide-copy p {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  margin-bottom: 22px;
  max-width: 420px;
}

.slide-media {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.6);
}

.slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.carousel-arrow:hover { background: var(--primary-red); color: var(--white); border-color: var(--primary-red); }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow--prev { left: 4px; }
.carousel-arrow--next { right: 4px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-dots button.active {
  background: var(--gold);
  transform: scale(1.3);
}

/* =========================================================
   About section
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.about-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 18px; }
.about-copy p { margin-bottom: 16px; opacity: 0.95; font-weight: 500; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 14px;
  text-align: center;
  box-shadow: var(--shadow);
  border-bottom: 3px solid var(--gold);
}

.stat-card .num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-red);
  display: block;
}

.stat-card .label {
  font-size: 0.78rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.about-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--off-white), #ece7e4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(91, 85, 85, 0.08);
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Featured Product Spotlight (Home page) — reuses
   .product-detail-media/.product-detail-gallery-* (via
   renderProductDetailGallery() in main.js) for the left side, so only
   the right-side info column and grid shell need their own rules here.
   ========================================================= */
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.spotlight-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spotlight-name {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
}

.spotlight-price {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.spotlight-price .save-badge {
  position: static;
  order: -1;
  flex-basis: 100%;
  width: fit-content;
}

.spotlight-price .price-current { font-size: 2.1rem; }
.spotlight-price .price-current--enquire { font-size: 1.2rem; }
.spotlight-price .price-original { font-size: 1.1rem; }

.spotlight-tax-note {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray);
  opacity: 0.7;
  text-transform: none;
  margin-top: -6px;
}

.spotlight-cta { margin-top: 8px; width: fit-content; }

@media (max-width: 960px) {
  .spotlight-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .spotlight-info { align-items: center; }
  .spotlight-price { justify-content: center; }
  .spotlight-grid .product-detail-media { max-width: 480px; margin: 0 auto; width: 100%; }
}

@media (max-width: 560px) {
  .spotlight-price .price-current { font-size: 1.6rem; }
  .spotlight-cta { width: 100%; }
}

/* =========================================================
   Explore Products (empty placeholder boxes)
   ========================================================= */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.explore-card {
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.explore-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(198, 8, 8, 0.25);
}

.explore-media {
  aspect-ratio: 1 / 1;
  background: var(--off-white);
  border-bottom: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(91, 85, 85, 0.28);
}

.explore-media svg { width: 34%; }

.explore-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

.explore-card h3 {
  padding: 16px 14px;
  font-size: 0.95rem;
  text-align: center;
  color: var(--gray);
}

/* =========================================================
   Homepage search — sits directly under the hero tagline, visible at
   every breakpoint. A second entry point into the same
   [data-nav-search] component the header/drawer already use (see
   index.html) — .home-search-wrap centers and width-caps it (so the
   full-width .nav-search--drawer styling doesn't stretch edge to edge
   inside the hero) and adds the gap below the tagline text above it.
   ========================================================= */
.home-search-wrap {
  max-width: 640px;
  margin: 24px auto 0;
}

/* =========================================================
   Our Brands (empty placeholder boxes)
   ========================================================= */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 220px));
  justify-content: center;
  gap: 18px;
}

.brand-box {
  aspect-ratio: 3 / 2;
  border: 2px dashed rgba(91, 85, 85, 0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  color: rgba(91, 85, 85, 0.45);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.brand-box:hover { border-color: var(--primary-red); color: var(--primary-red); }

.brand-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   Testimonials Marquee
   ========================================================= */
.testimonials { overflow: hidden; }

.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   Product Marquee (Contact page) — same .marquee/.marquee-track
   mechanics as the testimonials marquee above; .product-card is
   normally sized by its grid container, so it needs an explicit
   width here to behave in a flex row (same fix already used for
   .recently-viewed-card on the product detail page).
   ========================================================= */
.product-marquee-section { overflow: hidden; }

.product-marquee-track .product-card {
  flex: 0 0 260px;
  width: 260px;
}

@media (max-width: 560px) {
  .product-marquee-track .product-card { flex-basis: 220px; width: 220px; }
}

/* =========================================================
   Explore More Products Carousel (Home page) — random mix across all
   categories, auto-advance + drag/swipe + arrows. Unlike .marquee-track
   (transform-driven, no real scroll position), this is a native
   overflow-x:auto track so it can be manually scrolled (touch swipe
   natively, mouse via a small JS handler in initExploreCarousel()) as
   well as auto-advanced. scroll-behavior stays "auto" (not smooth) so
   the per-frame auto-advance and the loop-wrap correction apply
   instantly instead of fighting a CSS scroll animation; arrow clicks
   opt into smooth motion per-call via scrollBy({behavior:"smooth"}).
   ========================================================= */
.explore-carousel { position: relative; }

.explore-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: auto;
  cursor: grab;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.explore-carousel-track::-webkit-scrollbar { display: none; }
.explore-carousel-track.dragging { cursor: grabbing; }

.explore-carousel-track .product-card {
  flex: 0 0 260px;
  width: 260px;
}

/* Arrows stay visible at every breakpoint here (unlike the Recently
   Viewed row, which hides them on small screens) — required so mobile
   users have a tap alternative to swiping. */
.explore-carousel .carousel-arrow {
  background: var(--white);
  border-color: rgba(91, 85, 85, 0.18);
  color: var(--gray);
  opacity: 1;
  box-shadow: var(--shadow);
}

.explore-carousel .carousel-arrow:hover { background: var(--primary-red); color: var(--white); border-color: var(--primary-red); }
.explore-carousel .carousel-arrow--prev { left: -6px; }
.explore-carousel .carousel-arrow--next { right: -6px; }

@media (max-width: 720px) {
  .explore-carousel-track .product-card { flex-basis: 220px; width: 220px; }
  .explore-carousel .carousel-arrow--prev { left: 4px; }
  .explore-carousel .carousel-arrow--next { right: 4px; }
}

.testimonial-card {
  width: 340px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px;
  border-top: 3px solid var(--primary-red);
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  background: rgba(249, 190, 11, 0.14);
  border: 1.5px solid rgba(249, 190, 11, 0.5);
  color: var(--gray);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 11px 24px;
  border-radius: 999px;
}

.rating-badge-score { color: var(--primary-red); font-size: 1.05em; }
.rating-badge-star { color: var(--gold); font-size: 1.1em; }
.rating-badge-divider { opacity: 0.4; margin: 0 1px; }

.star-row { display: flex; gap: 3px; margin-bottom: 14px; }
.star-row svg { width: 17px; height: 17px; color: var(--gold); fill: var(--gold); }
.star-row svg.star-outline { fill: none; stroke: var(--gold); stroke-width: 1.6; }

.testimonial-card p.quote {
  font-size: 0.92rem;
  color: var(--gray);
  font-weight: 500;
  margin-bottom: 18px;
  line-height: 1.65;
}

.testimonial-author { display: flex; align-items: center; gap: 12px; }

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.testimonial-author h4 {
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0;
}

.testimonial-author span {
  font-size: 0.76rem;
  color: var(--gray);
  opacity: 0.75;
  font-weight: 600;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.category-card {
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.1);
  border-radius: var(--radius);
  padding: 30px 22px;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(198, 8, 8, 0.25);
}

.category-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.category-icon svg { width: 30px; height: 30px; }

.category-card h3 { font-size: 1.05rem; }

.category-card p {
  font-size: 0.92rem;
  color: var(--gray);
  opacity: 0.9;
  flex-grow: 1;
  text-transform: none;
  font-weight: 500;
}

.category-card .card-link {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-card .card-link svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.category-card:hover .card-link svg { transform: translateX(4px); }

.view-all-wrap { text-align: center; margin-top: 40px; }

/* =========================================================
   Blog cards — own grid + media treatment (not the generic
   .category-grid/.explore-media used for icon tiles elsewhere), since
   blog cards carry a real photo, a date, and more text. Card shell
   (.category-card) and CTA link (.card-link) are still reused as-is.
   ========================================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--off-white);
  border-bottom: 3px solid var(--gold);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-card:hover .blog-card-media img { transform: scale(1.08); }

.blog-card-date {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-red);
  opacity: 0.85;
  margin-bottom: -6px;
}

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* Blog post detail page (blog/<slug>.html) — reuses .legal-content for
   width/centering, this modifier only adjusts typography for a more
   comfortable, article-style read and turns each paragraph's leading
   <strong> (used as an inline "heading" by admin-written content, since
   the sanitizer whitelist has no real heading tags) into a proper
   heading-styled lead-in. */
.blog-post-content p {
  font-size: 1.02rem;
  line-height: 1.85;
  margin-bottom: 22px;
}

.blog-post-content p > strong:first-child {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.08em;
  color: var(--primary-red);
  margin-bottom: 6px;
}

/* =========================================================
   Product grid (category pages) — placeholder product cards
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.product-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(198, 8, 8, 0.25);
}

/* "Stretched link" — makes the whole card clickable through to the
   product detail page. Sits above the card's static content but
   below the gallery arrows/dots (z-index 2) so image-switching
   clicks still reach those controls instead of navigating away. */
.product-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--off-white);
  border-bottom: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(91, 85, 85, 0.28);
}

.product-card-media svg { width: 34%; }

/* Product image gallery/carousel — swaps images via a sliding track;
   object-fit: contain (not cover) so every image is shown in full,
   regardless of its original dimensions, instead of being cropped. */
.product-media-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.product-media-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.product-media-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--off-white);
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(91, 85, 85, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  opacity: 0;
  transition: opacity 0.2s ease, color 0.15s ease;
  cursor: pointer;
  padding: 0;
}

.gallery-arrow svg { width: 16px; height: 16px; }
.gallery-arrow--prev { left: 8px; }
.gallery-arrow--next { right: 8px; }
.gallery-arrow:hover { color: var(--primary-red); }

.product-media-gallery:hover .gallery-arrow,
.gallery-arrow:focus-visible {
  opacity: 1;
}

.gallery-dots {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 5px;
}

.gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(91, 85, 85, 0.3);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.gallery-dot.active {
  background: var(--primary-red);
  transform: scale(1.2);
}

/* Touch devices have no hover state — keep arrows visible so the
   gallery is still discoverable/usable without a pointer. */
@media (hover: none) {
  .gallery-arrow { opacity: 1; }
}

.save-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--primary-red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
}

.product-card-body {
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.product-card-name {
  font-size: 0.92rem;
  color: var(--gray);
}

.product-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}

.price-current {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary-red);
}

.price-original {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(91, 85, 85, 0.5);
  text-decoration: line-through;
  text-transform: none;
}

/* "Price on Request" — shown instead of a numeric price for the
   handful of products the catalog has no price for yet; smaller/
   lighter than a real price so it doesn't read as a broken number. */
.price-current--enquire {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.product-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gray);
  opacity: 0.75;
  font-weight: 500;
  padding: 40px 20px;
}

/* =========================================================
   Shop layout (shop-all.html, category pages, brand pages) —
   sidebar filters (Availability / Price / Brand / Category),
   sort toolbar + product grid
   ========================================================= */
.shop-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.shop-sidebar { flex: 0 0 260px; width: 260px; }

.shop-filter-toggle { display: none; }

.shop-filter-panel {
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 22px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.shop-filter-section {
  padding: 18px 0;
}

.shop-filter-section + .shop-filter-section {
  border-top: 1px solid rgba(91, 85, 85, 0.1);
}

.shop-filter-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
}

.shop-filter-section-toggle .chev { width: 15px; height: 15px; transition: transform 0.2s ease; flex-shrink: 0; }
.shop-filter-section-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }

.shop-filter-section-body {
  overflow: hidden;
  max-height: 600px;
  margin-top: 16px;
  transition: max-height 0.25s ease, margin 0.25s ease;
}

.shop-filter-section-toggle[aria-expanded="false"] + .shop-filter-section-body {
  max-height: 0;
  margin-top: 0;
}

.shop-filter-list { display: flex; flex-direction: column; gap: 12px; }

.shop-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray);
  cursor: pointer;
  transition: color 0.15s ease;
}

.shop-filter-item:hover { color: var(--primary-red); }

.shop-filter-item input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--primary-red);
  cursor: pointer;
}

.shop-filter-item--disabled,
.shop-filter-item--disabled:hover { color: rgba(91, 85, 85, 0.5); cursor: not-allowed; }
.shop-filter-item--disabled input { cursor: not-allowed; accent-color: rgba(91, 85, 85, 0.4); }

.shop-price-inputs { display: flex; align-items: center; gap: 8px; }

.shop-price-inputs input {
  width: 0;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(91, 85, 85, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray);
  background: var(--off-white);
}

.shop-price-inputs span { color: rgba(91, 85, 85, 0.5); flex-shrink: 0; }

.shop-filter-note {
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(91, 85, 85, 0.5);
  text-transform: none;
}

.shop-filter-clear {
  display: block;
  width: 100%;
  margin: 18px 0 20px;
  background: none;
  border: 1px solid rgba(91, 85, 85, 0.2);
  border-radius: 8px;
  padding: 11px;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.shop-filter-clear:hover { border-color: var(--primary-red); color: var(--primary-red); }

.shop-main { flex: 1 1 auto; min-width: 0; }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.shop-result-count {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gray);
  opacity: 0.75;
}

.shop-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
}

.shop-sort select {
  border: 1px solid rgba(91, 85, 85, 0.2);
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gray);
  background: var(--white);
  cursor: pointer;
}

.shop-sort select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 28px;
}

.shop-pagination { margin-top: 40px; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination-page {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(91, 85, 85, 0.18);
  background: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gray);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pagination-page:hover { border-color: var(--primary-red); color: var(--primary-red); }

.pagination-page.active {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: var(--white);
}

.pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(91, 85, 85, 0.18);
  background: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pagination-next svg { width: 15px; height: 15px; }
.pagination-next:hover:not(:disabled) { border-color: var(--primary-red); color: var(--primary-red); }
.pagination-next:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 1024px) {
  .shop-layout { flex-direction: column; gap: 16px; }
  .shop-sidebar { width: 100%; flex: 1 1 auto; }
  .shop-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 20px; }

  .shop-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--white);
    border: 1px solid rgba(91, 85, 85, 0.15);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray);
  }

  .shop-filter-toggle .chev { width: 16px; height: 16px; transition: transform 0.2s ease; }
  .shop-filter-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

  .shop-filter-panel {
    position: static;
    max-height: 0;
    overflow: hidden;
    padding: 0 22px;
    border-width: 0;
    box-shadow: none;
    margin-top: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
  }

  .shop-filter-panel.open {
    max-height: 2000px;
    padding: 4px 22px 18px;
    border-width: 1px;
    box-shadow: var(--shadow);
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(125px, 1fr)); gap: 12px; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .shop-sort { width: 100%; }
  .shop-sort select { flex: 1 1 auto; }
}

/* Page hero (Products / Contact) */
.page-hero {
  background: linear-gradient(120deg, var(--primary-red), var(--secondary-red));
  color: var(--white);
  padding: 64px 0 56px;
  text-align: center;
}

.page-hero .eyebrow { color: var(--gold); }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 12px; }
.page-hero p { max-width: 560px; margin: 0 auto; color: rgba(255, 255, 255, 0.9); font-weight: 500; }
.page-hero p + p { margin-top: 10px; }

/* About page hero only — wider text column (matches .about-text-block's
   existing 720px, used further down this same page) so the paragraph
   isn't as tightly compressed on larger screens. No mobile override
   needed: the .container's own edge padding already constrains things
   below 560px on narrow viewports, so this only takes effect once the
   viewport is wide enough for 720px to matter. */
.page-hero--wide p { max-width: 720px; }

@media (max-width: 560px) {
  .page-hero--wide { padding: 40px 0 36px; }
}

/* Breadcrumb (category pages) */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 18px;
}

.breadcrumb a { color: var(--white); transition: color 0.15s ease; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { color: rgba(255, 255, 255, 0.45); }
.breadcrumb-current { color: var(--gold); }

.products-note {
  max-width: 780px;
  margin: 0 auto 40px;
  background: rgba(249, 190, 11, 0.12);
  border: 1px solid rgba(249, 190, 11, 0.4);
  color: var(--gray);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 14px 20px;
  border-radius: var(--radius);
  text-align: center;
}

.products-note strong { color: var(--primary-red); }

/* =========================================================
   Category page overrides (turbochargers.html, fuel-injectors.html,
   diesel-fuel-injection-pumps.html, nox-sensors.html,
   urea-dosers.html, nozzles.html, tools-electronics.html, and the 7
   brand pages) — scoped via body.catalog-page
   so the shared .page-hero / .products-note / .product-grid rules
   above stay unchanged for products.html and the rest of the site.
   ========================================================= */

/* 1. Tighter hero banner */
body.catalog-page .page-hero { padding: 34px 0 30px; }
body.catalog-page .breadcrumb { margin-bottom: 10px; }
body.catalog-page .page-hero h1 { margin-bottom: 8px; }
body.catalog-page .page-hero p + p { margin-top: 4px; }

/* 2. Wider intro text block */
body.catalog-page .page-hero p { max-width: 780px; }

/* 3. Full-width note banner (matches the product grid's width instead
      of sitting narrower and centered) */
body.catalog-page .products-note { max-width: none; }

/* 4. Bigger product card typography (grid column layout for these
      pages now lives in .shop-grid, above) */
body.catalog-page .product-card-body {
  padding: 20px 18px 22px;
  gap: 12px;
}

body.catalog-page .product-card-name { font-size: 1.02rem; }
body.catalog-page .price-current { font-size: 1.18rem; }
body.catalog-page .price-current--enquire { font-size: 0.92rem; }
body.catalog-page .price-original { font-size: 0.9rem; }
body.catalog-page .save-badge { font-size: 0.72rem; padding: 5px 10px; }

@media (max-width: 560px) {
  body.catalog-page .page-hero { padding: 26px 0 24px; }
}

/* =========================================================
   Product detail page (product.html) — auto-generated from
   PRODUCTS by initProductDetailPage() in main.js: image gallery +
   info column side by side, full description below.
   ========================================================= */
/* .product-detail is a plain block wrapper — NOT a grid. The sticky
   image + info column live in their own .product-detail-top grid,
   and .product-detail-description is a fully separate block sibling
   AFTER that grid closes. This keeps the sticky gallery's containing
   block strictly bounded to the top section, so it can never visually
   travel into the description's space while scrolling, at any screen
   size — the two are always in independent normal-flow boxes. */
.product-detail-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.product-detail-media {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  align-self: start;
}

/* Large hero gallery: big main image (frame) with always-visible
   arrows, and a row of dot indicators BELOW the image rather than
   overlaid on it — distinct from the compact hover-only card gallery. */
.product-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-detail-gallery-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border-bottom: 4px solid var(--gold);
  background: var(--off-white);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(91, 85, 85, 0.28);
}

.product-detail-gallery-frame svg { width: 30%; }

.product-detail-gallery-frame .gallery-arrow {
  opacity: 1;
  width: 44px;
  height: 44px;
}

.product-detail-gallery-frame .gallery-arrow svg { width: 20px; height: 20px; }

/* Clickable thumbnail row — replaces plain dot indicators. Each
   thumbnail is a real preview of that image; the active one gets a
   red border + gold glow so it's unambiguous which photo is showing.
   Reuses the .gallery-dot class for behavior (see initProductGalleries
   in main.js — it only cares about that class), .gallery-thumb is the
   detail-page-only visual treatment. */
.product-detail-gallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 4px;
}

.gallery-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(91, 85, 85, 0.18);
  background: var(--off-white);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-thumb:hover { border-color: rgba(198, 8, 8, 0.45); }

.gallery-thumb.active {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 2px rgba(249, 190, 11, 0.55);
}

.product-detail-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.product-detail-name {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--gray);
}

.product-detail-price {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(91, 85, 85, 0.12);
}

.product-detail-price .save-badge {
  position: static;
  order: -1;
  flex-basis: 100%;
  width: fit-content;
}

.product-detail-price .price-current {
  font-size: 1.9rem;
}

.product-detail-price .price-current--enquire {
  font-size: 1.15rem;
}

.product-detail-price .price-original {
  font-size: 1.05rem;
}

.spec-table {
  display: flex;
  flex-direction: column;
}

.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(91, 85, 85, 0.1);
}

.spec-row dt {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  opacity: 0.65;
  flex-shrink: 0;
}

.spec-row dd {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray);
  text-align: right;
}

/* Part Number only — larger for readability, everything else (weight,
   color, alignment) stays inherited from .spec-row dd above. */
.spec-row--part-number dd { font-size: 1.05rem; }

.product-detail-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.product-detail-ctas .btn { flex: 1 1 220px; }

.btn--whatsapp {
  background: #25D366;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.32);
}

.btn--whatsapp:hover { box-shadow: 0 12px 26px rgba(37, 211, 102, 0.42); transform: translateY(-2px); }
.btn--whatsapp svg { width: 18px; height: 18px; }

.btn--outline-dark {
  background: transparent;
  color: var(--gray);
  border-color: rgba(91, 85, 85, 0.28);
}

.btn--outline-dark:hover { border-color: var(--primary-red); color: var(--primary-red); }

.product-detail-description {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--white);
  max-width: 820px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(91, 85, 85, 0.12);
}

.product-detail-desc-block + .product-detail-desc-block,
.product-detail-description > p + p,
.product-detail-description > .products-note {
  margin-top: 22px;
}

.product-detail-desc-block h3 {
  font-size: 1.02rem;
  color: var(--primary-red);
  margin-bottom: 8px;
}

.product-detail-desc-block p,
.product-detail-description > p {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--gray);
  opacity: 0.95;
  line-height: 1.75;
  text-transform: none;
}

.product-detail-description > .products-note {
  text-align: left;
}

/* Watermark disclaimer — always rendered directly under the description
   (see initProductDetailPage() in main.js). Deliberately quiet: small,
   muted, italic, no border/background, so it reads as a footnote and
   never competes with the price/CTAs or the description copy above it. */
.product-detail-disclaimer {
  max-width: 820px;
  margin-top: 18px;
  font-size: 0.76rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(91, 85, 85, 0.55);
  text-transform: none;
}

.product-not-found {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.product-not-found h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 14px;
}

.product-not-found p {
  margin-bottom: 24px;
  font-weight: 500;
  color: var(--gray);
}

@media (max-width: 960px) {
  .product-detail-top { grid-template-columns: 1fr; gap: 32px; }
  .product-detail-media { position: static; max-width: 480px; margin: 0 auto; width: 100%; }
}

@media (max-width: 560px) {
  .gallery-thumb { width: 52px; height: 52px; }
  .product-detail-ctas { flex-direction: column; }
  .product-detail-ctas .btn { flex: 1 1 auto; }
  .product-detail-price .price-current { font-size: 1.5rem; }
}

/* =========================================================
   "You May Also Like" (product detail page) — sits inside
   .product-detail, right after the description. Reuses .product-grid
   (card layout/responsiveness) with a 5-column desktop override.
   ========================================================= */
.related-products-section {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(91, 85, 85, 0.12);
}

.related-products-section .section-head { margin-bottom: 32px; }

.related-products-grid { grid-template-columns: repeat(5, 1fr); }

/* =========================================================
   "You Recently Viewed" (product detail page) — light gray full-width
   band with a left-aligned heading + "Clear" action, and a horizontally
   scrollable row of cards with prev/next arrows. Reuses .carousel-arrow
   (recolored for a light background) and renderProductCard() — the
   timestamp badge / delete button are layered on top via
   .recently-viewed-card, which wraps the card rather than editing it.
   ========================================================= */
.recently-viewed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.recently-viewed-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

.recently-viewed-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-red);
  padding: 6px 2px;
  transition: opacity 0.15s ease;
}

.recently-viewed-clear:hover { opacity: 0.7; text-decoration: underline; }

.recently-viewed-wrap { position: relative; }

.recently-viewed-viewport { overflow: hidden; }

.recently-viewed-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.recently-viewed-track::-webkit-scrollbar { display: none; }

.recently-viewed-card {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  scroll-snap-align: start;
}

.recently-viewed-timestamp {
  position: absolute;
  top: 40px;
  left: 10px;
  z-index: 3;
  background: rgba(26, 26, 26, 0.72);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
}

.recently-viewed-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(91, 85, 85, 0.15);
  color: var(--gray);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.recently-viewed-delete svg { width: 14px; height: 14px; }
.recently-viewed-delete:hover { background: var(--primary-red); color: var(--white); border-color: var(--primary-red); }

/* .carousel-arrow's default look is tuned for the dark hero background —
   recolor for this light gray section, keep everything else (size, hover
   transition, mobile downsizing) shared. */
.recently-viewed-wrap .carousel-arrow {
  background: var(--white);
  border-color: rgba(91, 85, 85, 0.18);
  color: var(--gray);
  opacity: 1;
  box-shadow: var(--shadow);
}

.recently-viewed-wrap .carousel-arrow:hover { background: var(--primary-red); color: var(--white); border-color: var(--primary-red); }
.recently-viewed-wrap .carousel-arrow--prev { left: -6px; }
.recently-viewed-wrap .carousel-arrow--next { right: -6px; }

@media (max-width: 560px) {
  .recently-viewed-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .recently-viewed-wrap .carousel-arrow { display: none; }
  .recently-viewed-card { flex-basis: 200px; width: 200px; }
}

/* =========================================================
   Browse Other Categories (category + brand pages) — quick-link pill
   buttons at the bottom of the page linking to sibling categories (or
   sibling brands, on brand pages), so users don't have to scroll back
   up to the nav dropdown to jump elsewhere. Filled in by
   renderBrowseCategories() in main.js.
   ========================================================= */
.browse-categories-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.browse-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  background: var(--white);
  border: 1.5px solid rgba(91, 85, 85, 0.18);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.browse-category-pill svg { width: 16px; height: 16px; color: var(--primary-red); flex-shrink: 0; }

.browse-category-pill:hover {
  border-color: var(--primary-red);
  color: var(--primary-red);
  background: rgba(198, 8, 8, 0.05);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

@media (max-width: 560px) {
  .browse-category-pill { padding: 11px 16px; font-size: 0.76rem; }
}

/* Slim breadcrumb strip above the product detail grid — replaces the
   heavy red page-hero banner so the page starts directly with the
   image + info layout, matching a standard product-page reference. */
.product-breadcrumb-bar {
  background: var(--off-white);
  border-bottom: 1px solid rgba(91, 85, 85, 0.1);
  padding: 16px 0;
}

.breadcrumb--light {
  justify-content: flex-start;
  margin-bottom: 0;
}

.breadcrumb--light a { color: var(--gray); }
.breadcrumb--light a:hover { color: var(--primary-red); }
.breadcrumb--light .breadcrumb-sep { color: rgba(91, 85, 85, 0.35); }
.breadcrumb--light .breadcrumb-current { color: var(--primary-red); }

/* =========================================================
   About page — locations & tag pills
   ========================================================= */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.location-card {
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
  border-top: 3px solid var(--primary-red);
}

.location-card .icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.location-card .icon-badge svg { width: 26px; height: 26px; }
.location-card h3 { font-size: 1.2rem; margin-bottom: 12px; }

.location-card p {
  font-size: 0.92rem;
  color: var(--gray);
  margin-bottom: 6px;
  text-transform: none;
  font-weight: 500;
}

.location-card p strong { color: var(--gray); }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.tag-list--center { justify-content: center; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--off-white);
  border: 1.5px solid rgba(91, 85, 85, 0.15);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tag-pill:hover { border-color: var(--primary-red); color: var(--primary-red); background: var(--white); }

.about-text-block { max-width: 720px; margin: 0 auto; text-align: center; }
.about-text-block p { margin-bottom: 16px; font-weight: 500; }

/* =========================================================
   Achievements & Trust (About page) — certificates, exhibition
   gallery, owner portrait. Trust badge uses green deliberately: the
   site's palette is otherwise strictly red/gold/gray, but green is the
   universal "verified" color and distinct from the CTA/pricing red on
   purpose here.
   ========================================================= */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.achievement-card {
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.achievement-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.achievement-card img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--off-white);
  border-bottom: 3px solid var(--gold);
}

.achievement-card figcaption {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.achievement-card h3 { font-size: 1rem; }

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #16803d;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trust-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

.exhibition-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.exhibition-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-bottom: 3px solid var(--gold);
}

.exhibition-item figcaption {
  margin-top: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray);
  text-align: center;
}

.owner-portrait {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.owner-portrait img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow);
  margin: 0 auto 14px;
}

.owner-portrait figcaption {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gray);
}

@media (max-width: 960px) {
  .achievement-grid, .exhibition-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .achievement-grid, .exhibition-gallery { gap: 18px; margin-bottom: 36px; }
  .achievement-card figcaption { padding: 16px 18px 20px; gap: 10px; }
  /* Bumps the certificate CTA's tap height toward the ~44px commonly
     recommended for mobile touch targets, without touching .btn--sm
     itself (used elsewhere on the site, e.g. the hero's "Download
     Brochure", where this isn't needed). */
  .achievement-card .btn {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
  }
}

/* =========================================================
   Legal pages (Privacy Policy, Terms & Conditions)
   ========================================================= */
.legal-content { max-width: 780px; margin: 0 auto; }

.legal-updated {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.legal-disclaimer {
  background: rgba(249, 190, 11, 0.12);
  border: 1px solid rgba(249, 190, 11, 0.4);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: 36px;
}

.legal-disclaimer strong { color: var(--primary-red); }

.legal-content h2 {
  font-size: 1.15rem;
  margin-top: 36px;
  margin-bottom: 14px;
}

.legal-content h2:first-of-type { margin-top: 0; }

.legal-content p {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--gray);
  opacity: 0.95;
  line-height: 1.75;
  margin-bottom: 14px;
}

.legal-content ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 14px;
}

.legal-content li {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--gray);
  opacity: 0.95;
  line-height: 1.7;
  margin-bottom: 8px;
}

.legal-content a { color: var(--primary-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.legal-address {
  font-style: normal;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--gray);
  line-height: 1.8;
  background: var(--off-white);
  border-left: 3px solid var(--primary-red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
}

.legal-address strong { display: block; margin-bottom: 4px; color: var(--gray); }
.legal-address a { color: var(--primary-red); }

/* =========================================================
   Blog page — empty state
   ========================================================= */
.empty-state {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--off-white);
  border: 2px dashed rgba(91, 85, 85, 0.25);
  border-radius: var(--radius);
  padding: 64px 40px;
}

.empty-state .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  color: rgba(91, 85, 85, 0.35);
}

.empty-state .icon svg { width: 100%; height: 100%; }
.empty-state h2 { margin-bottom: 12px; }
.empty-state p { margin-bottom: 28px; color: var(--gray); font-weight: 500; }

/* =========================================================
   Contact page
   ========================================================= */
.contact-map-embed {
  width: 100%;
  height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.contact-map-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 720px) {
  .contact-map-embed { height: 300px; }
}

.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: flex-start; }

.contact-info {
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}

.contact-info h3 { margin-bottom: 8px; font-size: 1.2rem; }
.contact-info > p { margin-bottom: 24px; font-size: 0.94rem; font-weight: 500; }

.info-row { display: flex; gap: 14px; margin-bottom: 22px; }

.info-row .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(198, 8, 8, 0.08);
  color: var(--primary-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-row .icon svg { width: 20px; height: 20px; }
.info-row h4 { font-size: 0.85rem; margin-bottom: 3px; }
.info-row p { font-size: 0.88rem; color: var(--gray); opacity: 0.9; font-weight: 500; text-transform: none; }

.contact-form {
  background: var(--white);
  border: 1px solid rgba(91, 85, 85, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 8px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 8px;
  border: 1.5px solid rgba(91, 85, 85, 0.22);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gray);
  background: var(--off-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(198, 8, 8, 0.12);
  background: var(--white);
}

.field textarea { resize: vertical; min-height: 130px; }

.field .error-msg { display: none; color: var(--primary-red); font-size: 0.78rem; margin-top: 6px; font-weight: 600; text-transform: none; }
.field.invalid input, .field.invalid textarea { border-color: var(--primary-red); }
.field.invalid .error-msg { display: block; }

/* Honeypot field — off-screen rather than display:none, since some spam
   bots specifically skip display:none fields to look more human. */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success {
  display: none;
  align-items: flex-start;
  gap: 14px;
  background: rgba(249, 190, 11, 0.14);
  border: 1px solid rgba(249, 190, 11, 0.45);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.form-success.show { display: flex; }

.form-success .icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-success .icon svg { width: 18px; height: 18px; }
.form-success h4 { font-size: 0.95rem; margin-bottom: 3px; color: var(--gray); text-transform: none; }
.form-success p { font-size: 0.85rem; color: var(--gray); opacity: 0.9; font-weight: 500; text-transform: none; }

/* Same shell as .form-success, recolored for an error state */
.form-error {
  display: none;
  align-items: flex-start;
  gap: 14px;
  background: rgba(198, 8, 8, 0.08);
  border: 1px solid rgba(198, 8, 8, 0.3);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.form-error.show { display: flex; }

.form-error .icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-error .icon svg { width: 18px; height: 18px; }
.form-error h4 { font-size: 0.95rem; margin-bottom: 3px; color: var(--gray); text-transform: none; }
.form-error p { font-size: 0.85rem; color: var(--gray); opacity: 0.9; font-weight: 500; text-transform: none; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--gray); color: var(--white); padding: 56px 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.9fr 0.9fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-brand .brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}

.footer-brand .since {
  display: inline-block;
  background: var(--gold);
  color: #3a2c00;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.footer-brand p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); max-width: 280px; font-weight: 500; }

.footer h4 {
  color: var(--white);
  font-size: 0.9rem;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.footer-col p, .footer-col address {
  font-style: normal;
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 14px;
  line-height: 1.6;
  font-weight: 500;
  text-transform: none;
}

.footer-col address strong {
  display: block;
  color: var(--white);
  font-size: 0.88rem;
  margin-bottom: 3px;
}

.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 0.87rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); transition: color 0.15s ease; }
.footer-links a:hover { color: var(--gold); }

.social-row { display: flex; gap: 10px; margin-top: 6px; }

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.social-row a:hover { background: var(--gold); color: #3a2c00; transform: translateY(-3px); }
.social-row svg { width: 17px; height: 17px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px 24px;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.footer-bottom span { color: var(--gold); }

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; gap: 12px; }
}

/* Reassurance note next to the New Delhi phone/address — styled as a
   pill badge: color/text treatment matches .save-badge (same red,
   white bold heading-font text used for "Save X%" on product cards),
   shape matches .tag-pill/.rating-badge (border-radius: 999px, the
   site's actual "pill" convention). Two-class selector so it wins over
   the more general ".footer-col p" rule (more specific than a bare
   ".footer-reply-note" alone). */
.footer-col .footer-reply-note {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--primary-red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .nav-links, .header-currency-wrap, .nav-search:not(.nav-search--drawer) { display: none; }
  .header-grid { gap: 14px; }
}

@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; max-width: 480px; margin: 0 auto; width: 100%; }
  .category-grid, .explore-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(3, minmax(120px, 180px)); gap: 16px; }
  .locations-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .carousel-slide { grid-template-columns: 1fr; text-align: center; }
  .slide-copy p { margin-left: auto; margin-right: auto; }
  .slide-media { max-width: 360px; margin: 0 auto; order: -1; }
}

@media (max-width: 720px) {
  .top-bar span { font-size: 0.62rem; letter-spacing: 0.08em; }
  .brand img { height: 42px; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .carousel-viewport { padding: 0 44px; }
  .carousel-arrow { width: 38px; height: 38px; }
}

/* =========================================================
   Floating WhatsApp "Chat with us" button (site-wide)
   ========================================================= */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  height: 58px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: #25D366;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 320;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s ease;
}

.whatsapp-float.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.whatsapp-float svg { width: 28px; height: 28px; flex-shrink: 0; }

.whatsapp-float-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--white);
  white-space: nowrap;
}

@media (max-width: 960px) {
  .whatsapp-float { height: 52px; padding: 0 16px 0 12px; gap: 8px; right: 20px; bottom: 20px; }
  .whatsapp-float svg { width: 25px; height: 25px; }
  .whatsapp-float-text { font-size: 0.8rem; }
}

@media (max-width: 560px) {
  .category-grid, .explore-grid, .product-grid { grid-template-columns: 1fr 1fr; }
  .brands-grid { grid-template-columns: repeat(2, minmax(120px, 150px)); gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; width: 100%; }
  .about-stats { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px 8px; }
  .stat-card .num { font-size: 1.3rem; }
  .testimonial-card { width: 280px; }
  .whatsapp-float { height: 48px; padding: 0 14px 0 10px; gap: 6px; right: 16px; bottom: 16px; }
  .whatsapp-float svg { width: 22px; height: 22px; }
  .whatsapp-float-text { font-size: 0.74rem; }
}

/* =========================================================
   Content protection toast (site-wide) — small non-blocking
   notification shown by js/content-protection.js instead of a
   native alert() when right-click / selection / a blocked
   shortcut is attempted.
   ========================================================= */
.content-protection-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 500;
  max-width: calc(100vw - 40px);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  background: rgba(26, 26, 26, 0.94);
  color: var(--white);
  border-top: 3px solid var(--gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 22px;
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.content-protection-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}