/* ==========================================================================
   CFMOTO South Africa — Accessories Shop
   Brand colours: teal #009bb4, charcoal rgb(73,73,72), white/off-white
   ========================================================================== */

:root {
  --teal: #009bb4;
  --teal-dark: #007a8c;
  --teal-light: #e3f5f8;
  --charcoal: #494948;
  --charcoal-soft: #6b6b6a;
  --white: #ffffff;
  --off-white: #f6f7f7;
  --border: #e2e5e5;
  --alert: #c8443b;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(73, 73, 72, 0.08);
  --shadow-lg: 0 12px 40px rgba(73, 73, 72, 0.22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Safety net against horizontal overflow on mobile — without it, any one
   oversized/unconstrained element (an image, a grid/flex item that won't
   shrink below its content's natural width — see the min-width:0 notes on
   .hero-text and .footer-grid below) forces the whole page wider than the
   screen. Fixed/sticky elements like .mobile-bottom-bar and .site-header
   still render pinned to the real screen edges either way, but ordinary
   block sections like .hero and .site-footer don't — they end up sized to
   that wider forced-open document, so relative to the actual visible
   screen they look like they stop short of the right edge (need to scroll
   right to see the rest). This never triggers when nothing overflows, so
   it's a no-op fix for the common case and a fix for the rare one. */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--charcoal);
  background: var(--off-white);
  line-height: 1.5;
}

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

a { color: var(--teal); }

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

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Test banner (temporary — see partials/header.html) ---------- */

.test-banner {
  background: var(--alert);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 8px 12px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  /* Without this, .brand (and the logo inside it) is just another
     flex-shrink:1 item in the header row — on narrow phones the row has
     nowhere else to take space from (the title text is already at its
     wrapped min-content width, the Login button and hamburger don't
     shrink at all), so the logo was the one item that gave, shrinking
     all the way to 0x0 (confirmed by testing down to ~320px). Fixing its
     own size here means something else has to wrap instead, which is the
     point of the mobile-only overrides below. */
  flex-shrink: 0;
}
.brand img { height: 32px; width: auto; }

.brand-title {
  font-weight: 700;
  font-size: larger;
  color: var(--teal-dark);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.main-nav a,
.nav-link {
  text-decoration: none;
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.nav-link:hover,
.nav-link:focus-visible {
  background: var(--teal-light);
  color: var(--teal-dark);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item.active .nav-link {
  background: var(--teal-light);
  color: var(--teal-dark);
}

/* .nav-caret-btn/.nav-caret are shared with #accountCaretBtn in
   .header-actions below (see the comment there for why that dropdown
   isn't built on .nav-item/.nav-dropdown) — the category nav items
   themselves are plain links now, no dropdown/caret of their own. */
.nav-caret-btn {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--radius);
  color: var(--charcoal);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-caret-btn:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
}

.nav-caret {
  font-size: 0.65em;
  transition: transform 0.15s ease;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "My Account" dropdown — its own rules rather than shared with the
   category nav items, which are now plain links with no dropdown at all
   (see the comment in header.html for the full reasoning). */
.account-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.account-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  /* Anchored to the trigger's right edge, expanding leftward — this item
     sits near the right end of the header, so a left-aligned dropdown
     would risk overflowing off-screen on narrow viewports. */
  right: 0;
  margin-top: 6px;
  width: 240px;
  max-width: calc(100vw - 24px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 200;
}

.account-nav.open .account-dropdown { display: block; }
.account-nav.open .nav-caret { transform: rotate(180deg); }

.account-dropdown-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  text-decoration: none;
}

.account-dropdown-link:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
}

.account-dropdown-logout:hover { color: var(--alert); }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--charcoal);
  padding: 9px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover { border-color: var(--teal); color: var(--teal-dark); }

/* Account icon, header only (matches .icon-account on the mobile bottom
   bar). A ::before pseudo-element rather than a real child <span> — script.js
   sets loginBtn.textContent = 'My Account' on login, which would wipe out
   any actual child node; a pseudo-element isn't a DOM child, so it survives
   that unaffected. */
#loginBtn {
  position: relative;
  padding-left: 32px;
}

#loginBtn::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-color: currentColor;
  mask-image: url('../img/icons/account.svg');
  -webkit-mask-image: url('../img/icons/account.svg');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.icon-btn.primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--alert);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  margin: 5px 0;
}

/* ---------- Mobile bottom bar ----------
   Hidden by default (display:none); shown only below the 860px breakpoint
   (see the media query further down) alongside #cartBtn being hidden in
   the top header — Account stays in the top header at every width (that's
   the whole point of making it more prominent), Cart and Logout only live
   here on mobile. */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(73, 73, 72, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-bottom-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  background: none;
  border: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--charcoal-soft);
}

.mobile-bottom-bar-item:hover,
.mobile-bottom-bar-item:active { color: var(--teal-dark); }

.bottom-bar-icon-wrap { position: relative; }

.bottom-bar-icon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.bottom-bar-cart-count { top: -6px; right: -10px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--charcoal) 0%, #2f2f2e 100%);
  color: var(--white);
  padding: 56px 0;
}

/* Slimmer variant for utility pages (Privacy Policy, My Orders, ...) that
   just need a title over the background, not the full marketing hero with
   a tagline/CTA row. */
.hero-page-header { padding: 40px 0; }
.hero-page-header .hero-text h1 { margin: 0; }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  animation: heroFade 24s infinite;
}

/* 3 slides, 6s "on screen" share each — keep in sync with the keyframe below */
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s; }
.hero-slide:nth-child(5) { animation-delay: 21s; }

@keyframes heroFade {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  29%   { opacity: 1; }
  37%   { opacity: 0; }
  100%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:first-child { opacity: 1; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(31, 31, 30, 0.88) 0%, rgba(47, 47, 46, 0.78) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Flex items default to min-width:auto, not 0 — meaning a flex child won't
   shrink below its own content's natural (min-content) width. Harmless
   most of the time, but on a borderline-narrow phone (text metrics differ
   slightly by device/OS, so this genuinely varies by phone brand) that can
   force .hero-text wider than the flex row has room for, pushing .hero
   wider than the screen. min-width:0 lets it shrink and wrap normally
   instead. */
.hero-text { min-width: 0; }

.hero-text h1 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.hero-text p {
  margin: 0 0 20px;
  color: #d5d6d5;
  max-width: 520px;
}

.hero-text .accent { color: var(--teal); }

.hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-badges span {
  background: rgba(0, 155, 180, 0.18);
  border: 1px solid var(--teal);
  color: var(--white);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.1s ease, background 0.15s ease;
}

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

.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }

.btn-block { width: 100%; }

/* ---------- Section heading (shared by home + category pages) ---------- */

.section-heading {
  text-align: center;
  margin-bottom: 28px;
}

.section-heading h1,
.section-heading h2 {
  margin: 0 0 8px;
  font-size: 1.8rem;
}

.section-heading p { color: var(--charcoal-soft); margin: 0; }

/* ---------- Category model pages (motorcycle.html, atv.html, utv.html, ssv.html) ---------- */

.model-page { padding: 40px 0 72px; }

/* In-page model picker (motorcycle.html etc.) — an image-card grid per
   model, grouped by family, with a search box to filter within the
   category. Modelled on the PSGDealerPortal PAC/accessories.html reference
   page's card grid, adapted to keep this project's per-family grouping
   (that page is flat + category filter chips instead, since it spans every
   vehicle type on one page — here each page is already scoped to one). */
.model-picker {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 24px;
  margin-bottom: 28px;
}

.model-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 20px;
  background: var(--off-white);
  transition: border-color 0.15s ease;
}

.model-picker-search:focus-within { border-color: var(--teal); }

.model-picker-search svg { flex-shrink: 0; color: var(--charcoal-soft); }

.model-picker-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 0;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--charcoal);
}

.model-picker-search-input::placeholder { color: #aaa; }

.model-card-group { margin-bottom: 22px; }
.model-card-group:last-child { margin-bottom: 0; }

.model-card-group h4 {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
}

.model-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.model-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 12px 10px;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.model-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--teal);
}

.model-card-img {
  width: 100%;
  height: 84px;
  object-fit: contain;
}

.model-card-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
}

.model-card.active {
  background: var(--teal-light);
  border-color: var(--teal);
}

.model-card.active .model-card-label { color: var(--teal-dark); }

/* Shown instead of the picker once a model's chosen — see changeModelBtn
   in script.js, which toggles .model-picker's visibility without a page
   reload. flex-wrap so the button drops below the title on narrow screens
   rather than squeezing it. */
.catalogue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.catalogue-title {
  margin: 0;
  font-size: 1.3rem;
  color: var(--charcoal);
}

/* Caspio JS-embedded DataPage — content is injected directly into this div
   (no iframe box/scrollbar), so it flows as native page content. */
.datapage-embed { min-height: 200px; }

/* Shown instead of the catalogue when the page loads with no model selected
   (e.g. arriving from the index.html category card, which links straight to
   motorcycle.html/atv.html/etc. with no ?model= — see script.js). Hidden by
   default in markup removed via inline style once a model is picked. */
.model-select-prompt {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--off-white);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  color: var(--charcoal-soft);
  font-size: 1.05rem;
}

/* Product detail / cart modals — plain iframes (see the comments in
   modals.html for why these aren't the JS-bridge embed), sized to fill the
   modal body. */
.caspio-modal-iframe {
  width: 100%;
  min-height: 70vh;
  border: none;
  display: block;
  border-radius: 0 0 var(--radius) var(--radius);
}

.account-view-all-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal-dark);
}

.account-view-all-link:hover { text-decoration: underline; }

/* ---------- Category cards (homepage "Shop by Category") ---------- */

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

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px 28px;
  text-decoration: none;
  color: var(--charcoal);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.category-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.category-card img {
  width: 100%;
  max-width: 200px;
  flex: 1;
  min-height: 110px;
  object-fit: contain;
  align-self: center;
}

.category-card h3,
.category-card p {
  margin: 0;
}

.category-card h3 { margin: 0; font-size: 1.05rem; }
.category-card p { margin: 0; color: var(--charcoal-soft); font-size: 0.85rem; }

.datapage-placeholder {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--charcoal-soft);
}

.datapage-placeholder strong { color: var(--charcoal); }

.datapage-placeholder code {
  background: var(--teal-light);
  color: var(--teal-dark);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
}

/* ---------- Info strip ---------- */

.info-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}

.info-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.info-card { text-align: center; }

.info-card .icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.info-card h3 { margin: 0 0 6px; font-size: 1rem; }
.info-card p { margin: 0; color: var(--charcoal-soft); font-size: 0.9rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: #d5d6d5;
  padding: 40px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* Same min-width:auto gotcha as .hero-text above, but for grid tracks — a
   footer-models column with a long/unbroken model name won't shrink below
   that name's width by default, which can force the whole grid (and the
   page) wider than the screen on some phones and not others depending on
   font metrics. */
.footer-grid > div { min-width: 0; }

.footer-grid h4 {
  color: var(--white);
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.footer-grid h4 a { color: inherit; }

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: #d5d6d5; text-decoration: none; font-size: 0.9rem; }
.footer-grid a:hover { color: var(--teal); }

/* Account/Contact moved below the brand column's social links, sitting
   side by side to make room for a full model column per vehicle type. */
.footer-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.social-links {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.social-links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #d5d6d5;
  transition: background 0.15s ease, color 0.15s ease;
}

.social-links a:hover {
  background: var(--teal);
  color: var(--white);
}

/* Tooltip: small label above the icon, shown on hover/keyboard focus */
.social-links a::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
}

.social-links a::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 4px solid transparent;
  border-top-color: var(--charcoal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
}

.social-links a:hover::after,
.social-links a:hover::before,
.social-links a:focus-visible::after,
.social-links a:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Icons are external .svg files shown via CSS mask, so their visible color
   is this element's background-color (which just inherits currentColor from
   the parent <a>, matching its default/hover text color). */
.social-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.icon-facebook {
  mask-image: url('../img/icons/facebook.svg');
  -webkit-mask-image: url('../img/icons/facebook.svg');
}

.icon-instagram {
  mask-image: url('../img/icons/instagram.svg');
  -webkit-mask-image: url('../img/icons/instagram.svg');
}

.icon-youtube {
  mask-image: url('../img/icons/youtube.svg');
  -webkit-mask-image: url('../img/icons/youtube.svg');
}

.icon-account {
  mask-image: url('../img/icons/account.svg');
  -webkit-mask-image: url('../img/icons/account.svg');
}

.icon-cart {
  mask-image: url('../img/icons/cart.svg');
  -webkit-mask-image: url('../img/icons/cart.svg');
}

.icon-logout {
  mask-image: url('../img/icons/logout.svg');
  -webkit-mask-image: url('../img/icons/logout.svg');
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 16px;
  font-size: 0.82rem;
  color: #a9a9a8;
  text-align: center;
}

.footer-legal-links { margin-left: 6px; }
.footer-legal-links a { color: #a9a9a8; text-decoration: underline; }
.footer-legal-links a:hover { color: var(--teal); }

/* ---------- Modals ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal.modal-wide { max-width: 640px; }

/* Product detail modal — taller than the shared .modal-wide default so the
   iframe's Caspio content has more room before the modal itself scrolls. */
#productModal .modal { max-height: 96vh; }
#productModal .caspio-modal-iframe { min-height: 85vh; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 { margin: 0; font-size: 1.15rem; }

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--charcoal-soft);
  padding: 4px 8px;
  border-radius: 6px;
}

.modal-close:hover { background: var(--teal-light); color: var(--teal-dark); }

.modal-body { padding: 22px; }

.modal-footer {
  padding: 16px 22px 22px;
  border-top: 1px solid var(--border);
}

.account-logout-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal-soft);
}

.account-logout-link:hover { color: var(--alert); }

/* Forms */

.form-row { margin-bottom: 16px; }

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

label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--charcoal);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--off-white);
  color: var(--charcoal);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}

.form-hint { font-size: 0.8rem; color: var(--charcoal-soft); margin-top: 6px; }

.form-links {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-top: 14px;
}

.register-terms {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
}

/* Checkout steps */

.checkout-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px 0;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal-soft);
}

.checkout-step .num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

.checkout-step.active { color: var(--teal-dark); }
.checkout-step.active .num { background: var(--teal); }
.checkout-step.done .num { background: var(--charcoal-soft); }

.checkout-steps .divider {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.checkout-panel { display: none; }
.checkout-panel.active { display: block; }

/* Account modal tabs */

/* Wider than the shared .modal-wide (640px, used by cart/checkout/product
   modals too) specifically so all 5 account tabs fit on one row on desktop
   instead of wrapping — scoped to this modal only, not a blanket change. */
#accountModal .modal { max-width: 760px; }

/* Desktop: buttons and panels are interleaved in the HTML (see modals.html
   for why — same markup drives both layouts), but flex "order" regroups
   them visually into a tab bar (order 0) followed by a content area
   (order 1) — equal order values keep their relative document order, so
   the 5 buttons still line up contact/delivery/billing/orders/password
   left-to-right, and only the .active panel actually takes up space in the
   content area below. */
.account-tabs-accordion {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 14px 22px 0;
}

.account-tab {
  order: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.account-tab:hover { color: var(--teal-dark); }

.account-tab.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}

.account-panel {
  order: 1;
  flex: 1 1 100%;
  display: none;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.account-panel.active { display: block; }

.account-panel-heading {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--charcoal);
  padding-top: 4px;
}

.account-panel-heading:not(:first-child) {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.form-row label .optional { font-weight: 400; color: var(--charcoal-soft); }

/* Extra breathing room between the contact fields and the delivery address
   choice pills in the checkout modal — not just the .form-row's normal
   margin, a clearer visual break. */
.checkout-address-choice-spacer { height: 12px; }

/* Below this width there isn't room for all 5 account tabs on one line.
   Tried horizontal scrolling first — it worked but felt bad in practice
   (hidden content with no visible affordance that more tabs exist off-
   screen). Accordion instead: dropping the flex "order" override here lets
   .account-tabs-accordion's children (buttons and panels, already
   interleaved in the HTML) fall back to plain document order, so each
   button sits directly above its own expanding panel — no JS changes
   needed for this, same click handling as desktop, just a different
   visual result of the same active-panel/active-button classes. */
@media (max-width: 640px) {
  .account-tabs-accordion {
    display: block;
    padding: 0;
  }

  .account-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }

  .account-tab::after {
    content: '\25BE';
    margin-left: 10px;
    font-size: 0.8rem;
    color: var(--charcoal-soft);
    transition: transform 0.15s ease;
  }

  .account-tab.active::after {
    color: var(--teal-dark);
    transform: rotate(180deg);
  }

  .account-panel {
    padding: 18px 22px 22px;
    margin-top: 0;
    border-top: none;
  }
}

.address-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.address-choice-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.address-choice-option input { width: auto; margin: 0; }

.address-choice-option.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

/* Highlighted callout for the checkout billing-type choice — deliberately
   more visible than a plain checkbox, since missing it means a customer who
   needed a VAT invoice doesn't get one. */
.billing-vat-callout {
  background: var(--teal-light);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 20px 0;
}

.billing-vat-question {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--charcoal);
}

.billing-vat-callout .address-choice { margin-bottom: 0; }

.billing-vat-callout .billing-company-fields {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 155, 180, 0.25);
}

.billing-vat-callout .billing-company-fields .form-row:last-child { margin-bottom: 0; }

.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 16px;
  cursor: pointer;
}

.form-checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.account-save-note,
.register-save-note {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.account-save-note.saving,
.register-save-note.saving { background: var(--teal-light); color: var(--teal-dark); }
.account-save-note.saved,
.register-save-note.saved { background: #e6f5ea; color: #1e7a3c; }
.register-save-note.error { background: #fbe9e7; color: #b3261e; }

.order-summary {
  background: var(--teal-light);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 0.9rem;
}

.order-summary .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.order-summary .row.total {
  font-weight: 700;
  border-top: 1px solid rgba(0,155,180,0.25);
  padding-top: 8px;
  margin-top: 8px;
}

.payfast-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fbf3e6;
  border: 1px solid #eaddc0;
  color: #7a5b1f;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 16px;
}

.delivery-rate-note {
  background: #fbf3e6;
  border: 1px solid #eaddc0;
  color: #7a5b1f;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 16px;
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .hero .container { flex-direction: column; text-align: center; }
  .hero-badges, .hero-cta { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .info-strip .container { grid-template-columns: 1fr; }
  .form-row.two-col { grid-template-columns: 1fr; }
  .category-cards { grid-template-columns: 1fr 1fr; }

  /* Now that .brand won't shrink (see the comment above .brand), the
     header row needs this room back from elsewhere to still fit the
     logo + title + Login + hamburger on one line down to ~320px wide —
     tighter gaps/padding here, and a smaller title floor since a shorter
     "Accessories" min-content width is what actually saves the space. */
  .site-header .container { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .brand-title { font-size: 1rem; }

  /* Cart moves down to the bottom bar; Account (#loginBtn/.account-nav)
     stays in the header at every width, dropdown included. */
  #cartBtn { display: none; }
  .mobile-bottom-bar { display: flex; }
  /* Room for the fixed bottom bar so it never overlaps the last bit of
     page content (e.g. the footer) — approx. bar content height (~54px)
     plus its own padding, safe-area handled separately via the bar's own
     padding-bottom. */
  body { padding-bottom: 64px; }
}

@media (max-width: 860px) {
  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .nav-item { width: 100%; }
  .nav-link { flex: 1; }
}

@media (max-width: 560px) {
  .category-cards { grid-template-columns: 1fr; }
}

/* ---------- Legal pages (Privacy Policy, Terms, etc.) ---------- */

.legal-page { padding: 40px 0 72px; }

.legal-page .container { max-width: 820px; }

.legal-header { margin-bottom: 28px; }

.legal-header h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--charcoal);
}

.legal-header p { margin: 0; color: var(--charcoal-soft); font-size: 0.9rem; }

.legal-note {
  background: #fbf3e6;
  border: 1px solid #eaddc0;
  border-left: 4px solid var(--teal);
  color: #7a5b1f;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 32px;
}

.legal-placeholder {
  background: var(--teal-light);
  color: var(--teal-dark);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.95em;
}

.legal-toc {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 40px;
}

.legal-toc h2 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charcoal-soft);
  margin: 0 0 12px;
}

.legal-toc ol {
  columns: 2;
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
}

.legal-toc li { margin-bottom: 6px; }
.legal-toc a { color: var(--charcoal); text-decoration: none; }
.legal-toc a:hover { color: var(--teal-dark); text-decoration: underline; }

.legal-body h2 {
  font-size: 1.25rem;
  margin-top: 42px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  scroll-margin-top: 90px;
  color: var(--charcoal);
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body h3 {
  font-size: 1.05rem;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--charcoal);
  scroll-margin-top: 90px;
}

.legal-body p { margin: 0 0 14px; font-size: 0.95rem; color: var(--charcoal); }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; font-size: 0.95rem; }
.legal-body a.inline { color: var(--teal); }

@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
}

/* ---------- Checkout result pages (checkout-success.html, checkout-cancelled.html) ---------- */

.checkout-result-page {
  padding: 72px 0;
  display: flex;
  justify-content: center;
}

.checkout-result-page .container { max-width: 560px; }

.result-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px 40px;
  text-align: center;
}

/* Same card, reused for forgot-password.html — left-aligned instead of
   centered, since it wraps a Caspio-rendered form rather than a checkout
   confirmation message. */
.auth-embed-card { text-align: left; }
.auth-embed-card p { text-align: center; }

.result-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--white);
}

.result-icon.success { background: var(--teal); }
.result-icon.cancelled { background: var(--charcoal-soft); }

.result-card h1 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  color: var(--charcoal);
}

.result-card p {
  margin: 0 0 28px;
  color: var(--charcoal-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}