/* Brand: "Technology, precisely chosen" theme - bright blue accent on a
   near-white base, tight-letter-spaced Inter type. --ac-navy/--ac-navy-light
   are the deep-blue tone used for "dark" sections (navbar-fixed bits, hero,
   footer) that stay blue in both themes; --ac-blue-light is the bright
   accent used for glows/hovers/badges, constant across both themes on
   purpose (not redefined in the dark override below). --ac-red is a
   deliberate, narrow exception for sale/discount badges, which read better
   as red than blue. */
:root {
  --ac-navy: #062b63;
  --ac-navy-light: #0b3a82;
  --ac-blue: #0878f9;
  --ac-blue-dark: #0756b8;
  --ac-blue-light: #21a6f3;
  --ac-red: #e03131;
  --ac-orange: #f59e0b;
  --ac-teal: #0891b2;
  --ac-bg: #f6f9fd;
  --ac-card: #ffffff;
  --ac-card-hover: #f4f9ff;
  --ac-text: #101828;
  --ac-heading: #0b2f66;
  --ac-muted: #667085;
  --ac-border: #e5eaf0;
  --ac-soft-gradient: linear-gradient(135deg, #eaf5ff 0%, #d9ecff 100%);
  --ac-radius: 14px;
  --ac-radius-lg: 18px;
  --ac-shadow-soft: 0 10px 35px rgba(16, 24, 40, .07);
  --ac-shadow-lift: 0 20px 45px rgba(16, 24, 40, .14);

  /* Navbar surface/text/border. These ARE theme-aware (redefined in the dark
     block below) so the navbar reads as part of the page in both modes -
     every navbar rule must go through these tokens rather than hardcoding
     white/navy, or the bar and its contents drift apart on toggle. */
  --ac-navbar-text: #0b2f66;
  --ac-navbar-border: #e5eaf0;
  --ac-navbar-surface: rgba(255, 255, 255, .96);

  /* The hero/ad banner panel is permanently light in BOTH themes (see
     .ac-hero's hardcoded light-blue gradient), so its text must be
     permanently dark too. Using the themed --ac-heading/--ac-text/--ac-muted
     here was the bug: they flip to near-white in dark mode, which rendered
     the banner headline white-on-light-blue and effectively invisible. */
  --ac-hero-heading: #0b2f66;
  --ac-hero-text: #101828;
  --ac-hero-muted: #526071;
}

html[data-theme="dark"] {
  --ac-bg: #080d18;
  --ac-card: #121b2c;
  --ac-card-hover: #17243a;
  --ac-text: #edf3ff;
  --ac-heading: #ffffff;
  --ac-muted: #a3b0c4;
  --ac-border: #293850;
  --ac-soft-gradient: linear-gradient(135deg, #152743 0%, #12383f 100%);
  --ac-shadow-soft: 0 10px 30px rgba(0, 0, 0, .35);
  --ac-shadow-lift: 0 22px 48px rgba(0, 0, 0, .45);

  --ac-navbar-text: #e8eefb;
  --ac-navbar-border: #1e2c44;
  --ac-navbar-surface: rgba(10, 16, 28, .94);
}

html, body {
  /* Safety net: no single element (a long nav brand, a wide table, an
     un-shrinkable flex row) should ever be able to force the whole page to
     scroll sideways on mobile - that's a much worse failure mode than
     clipping the one offending element. */
  overflow-x: hidden;
}

/* Bootstrap's .container caps at 1320px even on very wide monitors, leaving
   a lot of dead margin on both sides and making rows with several inline
   items (the navbar's link+search cluster especially) feel squeezed into a
   narrower zone than the screen actually has room for. Widen it further at
   large breakpoints only - phones/tablets are untouched. */
@media (min-width: 1400px) {
  .container { max-width: 1520px; }
}
@media (min-width: 1700px) {
  .container { max-width: 1680px; }
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--ac-bg);
  background-image: radial-gradient(circle, rgba(47,111,237,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ac-text);
}

.text-muted { color: var(--ac-muted) !important; }
.text-dark { color: var(--ac-text) !important; }

.form-control,
.form-select,
.input-group-text {
  background-color: var(--ac-card);
  border-color: var(--ac-border);
  color: var(--ac-text);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--ac-card);
  border-color: var(--ac-blue);
  color: var(--ac-text);
  box-shadow: 0 0 0 .2rem rgba(47,111,237,.16);
}
.form-control::placeholder { color: var(--ac-muted); }
.dropdown-menu {
  background: var(--ac-card);
  border-color: var(--ac-border);
}

/* Bootstrap tables set their own background/text/border via --bs-table-*
   variables, which default to Bootstrap's fixed (always-white) --bs-body-bg
   and are never linked to this app's data-theme toggle. Left alone, every
   table (spec table, admin lists, orders) renders a permanently-white row
   background with theme-aware text on top - invisible in dark mode. Tying
   these to the app's own theme variables fixes every table at once. */
.table {
  --bs-table-bg: var(--ac-card);
  --bs-table-color: var(--ac-text);
  --bs-table-border-color: var(--ac-border);
  --bs-table-striped-bg: var(--ac-card-hover);
  --bs-table-hover-bg: var(--ac-card-hover);
}
.dropdown-item { color: var(--ac-text); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--ac-card-hover); color: var(--ac-text); }
.dropdown-divider { border-color: var(--ac-border); }

/* Same fix as .table above, for Bootstrap's list-group component (the
   category sidebar on /products): --bs-list-group-* also defaults to
   Bootstrap's own fixed light colors, unlinked from data-theme, so rows
   were rendering inconsistently against the dark-mode page around them. */
.list-group-item {
  --bs-list-group-color: var(--ac-text);
  --bs-list-group-bg: var(--ac-card);
  --bs-list-group-border-color: var(--ac-border);
  --bs-list-group-action-color: var(--ac-text);
  --bs-list-group-action-hover-color: var(--ac-blue);
  --bs-list-group-action-hover-bg: var(--ac-card-hover);
  --bs-list-group-action-active-color: var(--ac-text);
  --bs-list-group-action-active-bg: var(--ac-card-hover);
  --bs-list-group-active-color: #ffffff;
  --bs-list-group-active-bg: var(--ac-blue);
  --bs-list-group-active-border-color: var(--ac-blue);
}

/* Same fix again, for Bootstrap's pagination component (product listing page
   numbers): --bs-pagination-bg/-color default to Bootstrap's own fixed
   white/blue, so page-number buttons rendered as a stark white box in dark
   mode instead of matching the page around them. */
.pagination {
  --bs-pagination-bg: var(--ac-card);
  --bs-pagination-color: var(--ac-blue);
  --bs-pagination-border-color: var(--ac-border);
  --bs-pagination-hover-bg: var(--ac-card-hover);
  --bs-pagination-hover-color: var(--ac-blue);
  --bs-pagination-hover-border-color: var(--ac-border);
  --bs-pagination-focus-bg: var(--ac-card-hover);
  --bs-pagination-focus-color: var(--ac-blue);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: var(--ac-blue);
  --bs-pagination-active-border-color: var(--ac-blue);
  --bs-pagination-disabled-bg: var(--ac-card);
  --bs-pagination-disabled-color: var(--ac-muted);
  --bs-pagination-disabled-border-color: var(--ac-border);
}

/* And Bootstrap's breadcrumb divider/active-item color, which defaults to
   a fixed mid-gray that reads too low-contrast against a dark background. */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ac-muted);
  --bs-breadcrumb-item-active-color: var(--ac-muted);
}
.breadcrumb-item a { color: var(--ac-blue); }

/* Bootstrap badges default to white text (--bs-badge-color: #fff), which is
   unreadable on a bright bg-warning (amber) badge - independent of light/
   dark mode, this is just low contrast. Covers both explicit
   `badge bg-warning text-dark` markup (where our own .text-dark utility is
   theme-toggled and would otherwise go near-white in dark mode) and the
   more common `badge bg-warning` with no text class at all (e.g. "Pending"
   order status, which never set one). */
.badge.bg-warning { color: #1a1a1a !important; }

h1, h2, h3, h4, .ac-section-title, .ac-brand, .ac-admin-brand {
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--ac-blue);
  outline-offset: 3px;
}

.ac-skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 2000;
  padding: .65rem 1rem;
  border-radius: .5rem;
  background: #fff;
  color: var(--ac-navy);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .15s ease;
}
.ac-skip-link:focus { transform: translateY(0); }

::selection { background: var(--ac-blue-light); color: #ffffff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ac-bg); }
::-webkit-scrollbar-thumb { background: #40516c; border-radius: 999px; border: 3px solid var(--ac-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ac-blue); }

.btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.btn:active { transform: scale(.97); }

/* ---------- Navbar ----------
   White is the dominant surface here; blue is used only as the accent
   (logo, links-on-hover, buttons, icons) per the brand's "white first,
   blue complementary" direction. */
.ac-utility-bar {
  background: var(--ac-navy);
  color: rgba(255,255,255,.8);
  font-size: .76rem;
  letter-spacing: .01em;
  padding: .45rem 0;
}
.ac-utility-bar .bi { color: var(--ac-blue-light); }
/* Deepen the utility strip in dark mode so it steps down from the announcement
   bar into the (now dark) navbar, instead of sitting brighter than both. */
html[data-theme="dark"] .ac-utility-bar { background: #050a14; }
html[data-theme="dark"] .ac-announcement-bar {
  background: linear-gradient(90deg, #063e86, var(--ac-blue-dark));
}

.ac-announcement-bar {
  background: linear-gradient(90deg, var(--ac-blue-dark), var(--ac-blue));
  color: #ffffff;
  padding: .48rem 1rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
}

.ac-navbar {
  background: var(--ac-navbar-surface);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: none;
  border-bottom: 1px solid var(--ac-navbar-border);
}
/* Bootstrap's .navbar-light hamburger icon is a dark-stroked SVG that
   disappears against a dark bar - swap the stroke and border for the dark
   theme. Bootstrap 5.3 exposes both as CSS variables, so no !important or
   selector-weight fights needed. */
html[data-theme="dark"] .ac-navbar .navbar-toggler {
  --bs-navbar-toggler-border-color: var(--ac-navbar-border);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232,238,251,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Brand + quick-actions (cart/theme/account/hamburger) always share one row,
   never wrapping onto separate lines - the outer .navbar > .container stays
   flex-wrap so the collapsible nav-links section can still drop onto its own
   row below when toggled open (its own flex-basis:100% relies on that), but
   this inner row is forced nowrap so it isn't affected by that same wrap
   behavior. Without this, once the two didn't fit on one line at very
   narrow widths, the whole row wrapped and quick-actions rendered stacked
   and left-aligned instead of pinned to the right. */
.ac-navbar-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
}
/* At >=lg, .navbar-expand-lg already keeps everything on one row and the
   nav-links/quick-actions order is controlled by order-lg-1/order-lg-2 on
   those two elements - which only works between direct siblings. Collapsing
   this wrapper via display:contents at that breakpoint removes it from the
   box model so brand and quick-actions become direct flex children of
   .container again, restoring that ordering (nav links, then icons) instead
   of the icons jumping ahead of the nav links the way a real flex box here
   would force them to. Below lg, the wrapper stays a real nowrap flex row -
   that's the fix for brand+icons wrapping onto separate lines on mobile. */
@media (min-width: 992px) {
  .ac-navbar-top-row { display: contents; }
}
.ac-nav-quick-actions { flex-shrink: 0; }
.ac-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0; /* let this flex item shrink below its text's natural width instead of forcing the navbar row wider than the viewport */
  flex-shrink: 1;
  transition: opacity .15s ease;
}
.ac-brand:hover { opacity: .85; }

.ac-logo {
  display: block;
  width: auto;
  max-width: 100%;
}

.ac-brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-right: .55rem;
  flex-shrink: 0;
}
.ac-brand-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
/* The logo artwork carries deep-navy shading that blends into a dark navbar
   and loses its outline. A soft light disc behind it (dark theme only)
   restores separation without recoloring the mark itself - fading the
   gradient out near the edge keeps it from reading as a hard white sticker. */
html[data-theme="dark"] .ac-brand-icon {
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 60%, rgba(255,255,255,0) 73%);
}
.ac-brand-text {
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(.95rem, 4.5vw, 1.2rem);
  line-height: 1;
  color: var(--ac-navbar-text);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Homepage-only accent: a slow rotating ring in the brand's own blue gradient
   around the navbar icon, purely decorative so it's skipped on every other
   page (both to keep it special and to avoid animating on pages people stare
   at while reading, like checkout). Built from a masked conic-gradient
   rather than an SVG/JS spinner - one GPU-friendly transform, no extra
   requests. */
.ac-brand-mark-animated::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  /* A white sweep on top of the blues gives the ring a bright, visible
     "highlight" as it spins, instead of blending into the light navbar bg. */
  background: conic-gradient(from 0deg, #ffffff, var(--ac-blue-light), var(--ac-blue), var(--ac-navy), var(--ac-blue), var(--ac-blue-light), #ffffff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: ac-ring-spin 4s linear infinite;
}
@keyframes ac-ring-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-brand-mark-animated::before { animation: none; }
}

.ac-navbar .nav-link {
  position: relative;
  color: var(--ac-navbar-text) !important;
  font-weight: 500;
  border-radius: .5rem;
  padding-left: .65rem !important;
  padding-right: .65rem !important;
}
.ac-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: .65rem;
  right: .65rem;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ac-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.ac-navbar .nav-link:hover {
  color: var(--ac-blue) !important;
  background: var(--ac-card-hover);
}
.ac-navbar .nav-link:hover::after {
  transform: scaleX(1);
}
.ac-navbar .nav-link.active {
  color: var(--ac-blue) !important;
  background: var(--ac-card-hover);
  font-weight: 700;
}
.ac-navbar .nav-link.active::after {
  transform: scaleX(1);
}

.ac-search-form {
  max-width: 320px;
  flex: 1 1 auto;
}
@media (min-width: 1400px) {
  .ac-search-form { max-width: 420px; }
}
.ac-search-form .form-control {
  border-radius: 999px 0 0 999px;
  border: 1px solid var(--ac-navbar-border);
  background-color: var(--ac-card);
  color: var(--ac-navbar-text);
}
.ac-search-form .form-control::placeholder { color: var(--ac-muted); }
.ac-search-form .btn {
  border-radius: 0 999px 999px 0;
  background: var(--ac-blue);
  border: none;
  color: #ffffff;
}

.ac-cart-badge {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--ac-navbar-text) !important;
  transition: background .2s ease, color .2s ease;
}
.ac-cart-badge:hover { background: var(--ac-card-hover); color: var(--ac-blue) !important; }
.ac-cart-badge .badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--ac-red);
  color: #ffffff;
}
.ac-theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ac-blue);
  transition: transform .15s ease, background .15s ease;
}
.ac-theme-toggle:hover { background: var(--ac-card-hover); transform: rotate(12deg); }

/* ---------- Hero ---------- */
/* Rounded corners + clipping live on #heroCarousel .carousel-inner (a static
   element that never moves), not on .ac-hero itself. Putting border-radius +
   overflow:hidden on the element Bootstrap slides with `transform` is what
   caused the seam/pixelation at its edges during the animation. */
/* Light blue radial-gradient panel, matching the "Technology, precisely
   chosen" reference theme - a contained card (not full-bleed), sitting
   inside .ac-hero-grid alongside two promo tiles (see below). */
.ac-hero-frame {
  border-radius: var(--ac-radius-lg);
  overflow: hidden;
}
.ac-hero {
  background:
    radial-gradient(circle at 82% 15%, rgba(255,255,255,.85) 0%, transparent 45%),
    linear-gradient(135deg, #e9f5ff 0%, #d5ecff 100%);
  color: var(--ac-hero-text);
  padding: 3rem 2.75rem;
  min-height: 460px;
  display: flex;
  align-items: center;
  position: relative;
}
.ac-hero h1 {
  font-weight: 800;
  font-size: clamp(2.5rem, 3.2vw + 1.3rem, 3.35rem);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--ac-hero-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ac-hero .lead {
  color: var(--ac-hero-muted);
  font-size: 1.1rem;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Hero grid: carousel + 2 static promo tiles ---------- */
.ac-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 225px);
  gap: .65rem;
}
.ac-hero-grid > .ac-hero-frame { grid-row: span 2; }
.ac-hero-promos { display: contents; }
.ac-promo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ac-radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ac-text);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ac-promo-card:hover { transform: translateY(-3px); box-shadow: var(--ac-shadow-soft); }
.ac-promo-card-blue {
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue-light) 100%);
  color: #fff;
}
.ac-promo-card-light { background: var(--ac-soft-gradient); }
.ac-promo-icon {
  position: absolute;
  right: -.25rem;
  bottom: -.75rem;
  font-size: 5.5rem;
  opacity: .16;
}
.ac-promo-card-blue .ac-promo-icon { opacity: .22; }
.ac-promo-eyebrow {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: .3rem;
  display: block;
}
.ac-promo-card h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .25rem; }
.ac-promo-card p { font-size: .74rem; opacity: .8; max-width: 12rem; margin-bottom: .6rem; }
.ac-promo-link { font-size: .74rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; position: relative; z-index: 1; }
@media (max-width: 991.98px) {
  .ac-hero-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .ac-hero-grid > .ac-hero-frame { grid-row: auto; }
  .ac-hero-promos { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
  .ac-promo-card { min-height: 160px; }
}
@media (max-width: 575.98px) {
  .ac-hero-promos { grid-template-columns: 1fr; }
}

/* Every slide must render at the exact same height, or the carousel resizes the
   page layout on every auto-advance (visible as page/navbar jitter). */
@media (max-width: 991.98px) {
  .ac-hero {
    min-height: 0;
    padding: 2rem 1.5rem;
  }
  .ac-hero h1 {
    font-size: clamp(1.9rem, 6vw, 2.55rem);
    -webkit-line-clamp: 3;
  }
  /* Bound the subtitle at 4 lines. Unbounded, one wordy ad sets the height
     for every other slide, and the short ones end up padded out with dead
     space to match it. 4 lines is past what any current ad uses, so nothing
     is actually cut - it only stops a runaway. */
  .ac-hero .lead {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  /* Height set by JS from the tallest slide's natural height, so every slide
     matches without the carousel resizing the page on each advance. Content
     centres in whatever slack a shorter slide has rather than sitting at the
     top of an over-tall box. */
  #heroCarousel .carousel-item > .ac-hero {
    min-height: var(--ac-hero-min, 0px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ac-hero-visual { margin-top: 1.5rem; }
  .ac-navbar .navbar-collapse {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--ac-radius);
    background: var(--ac-navbar-surface);
    border: 1px solid var(--ac-navbar-border);
  }
  .ac-search-form { max-width: none !important; }
}
@media (max-width: 575.98px) {
  .ac-hero { padding: 1.65rem 1.1rem; }
  .ac-hero h1 { font-size: clamp(1.75rem, 8vw, 2.15rem); }
  .ac-hero .lead { font-size: 1rem; }
  .ac-hero-visual { margin-top: 1.15rem; }
}
.ac-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(8,120,249,.1);
  border: 1px solid rgba(8,120,249,.25);
  color: var(--ac-blue-dark);
  padding: .35rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ac-hero-ad .ac-hero-badge {
  background: #ffffff;
  border-color: rgba(8,120,249,.25);
  color: var(--ac-blue-dark);
}

/* Badge colour presets. Each ships a matched tint/border/text triple so the
   badge stays legible whatever an admin picks - the reason this is a preset
   list and not a free colour picker. The .ac-hero-ad override above sets a
   white ground for ad slides, so these re-assert their own tint after it. */
.ac-hero-badge.ac-badge-blue,
.ac-hero-ad .ac-hero-badge.ac-badge-blue {
  background: rgba(8,120,249,.12); border-color: rgba(8,120,249,.3); color: #0756b8;
}
.ac-hero-badge.ac-badge-red,
.ac-hero-ad .ac-hero-badge.ac-badge-red {
  background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.3); color: #b91c1c;
}
.ac-hero-badge.ac-badge-green,
.ac-hero-ad .ac-hero-badge.ac-badge-green {
  background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.3); color: #15803d;
}
.ac-hero-badge.ac-badge-amber,
.ac-hero-ad .ac-hero-badge.ac-badge-amber {
  background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.32); color: #b45309;
}
.ac-hero-badge.ac-badge-purple,
.ac-hero-ad .ac-hero-badge.ac-badge-purple {
  background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.3); color: #6d28d9;
}
.ac-hero-badge.ac-badge-dark,
.ac-hero-ad .ac-hero-badge.ac-badge-dark {
  background: rgba(16,24,40,.08); border-color: rgba(16,24,40,.22); color: #101828;
}
/* Dark theme: the tints hold up, but the text needs lifting off the dark
   ground or the darker presets fall below contrast. */
html[data-theme="dark"] .ac-hero-badge.ac-badge-blue   { color: #7cc0ff; }
html[data-theme="dark"] .ac-hero-badge.ac-badge-red    { color: #fca5a5; }
html[data-theme="dark"] .ac-hero-badge.ac-badge-green  { color: #86efac; }
html[data-theme="dark"] .ac-hero-badge.ac-badge-amber  { color: #fcd34d; }
html[data-theme="dark"] .ac-hero-badge.ac-badge-purple { color: #c4b5fd; }
html[data-theme="dark"] .ac-hero-badge.ac-badge-dark   { color: #e5eaf0; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.ac-hero-product-frame {
  width: clamp(280px, 33vw, 430px);
  height: auto;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 20px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(8,120,249,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Dashed border only applies when there's no real product photo yet (icon
   fallback) - a placeholder affordance, not a style real product photos
   should ever be framed in. */
.ac-hero-product-frame-empty {
  border-style: dashed;
  border-color: rgba(8,120,249,.4);
}
.ac-hero-product-frame img,
.ac-hero-product-frame picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 20px 25px rgba(20,70,120,.16));
}
.ac-hero-product-frame picture { display: block; }
/* Video ads get a 16:9 frame rather than the image ad's 4:3. Phone and
   camera footage is overwhelmingly 16:9, and forcing that into a 4:3 box
   under object-fit: cover crops a quarter off each side - which is exactly
   what "the video is cut off at the edges" looks like. Applies at every
   breakpoint, including the narrow-mobile 4:3 override below. */
.ac-hero-product-frame.has-video { aspect-ratio: 16 / 9; }

/* Video fills the same frame as an image ad. object-fit (rather than
   width/height stretching) is what keeps an arbitrary-aspect MP4 from being
   visibly distorted. */
.ac-hero-video {
  /* contain, not cover: a hero video is the whole message, so letterboxing an
     odd ratio is better than silently cutting the product out of frame. With
     a 16:9 source in the 16:9 frame above there are no bars at all. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0a0f1c;
}
.ac-hero-product-frame .bi {
  font-size: 8rem;
  color: var(--ac-blue);
  opacity: .75;
}

/* A full-width media area lets every banner size fill the mobile design.
   `cover` preserves a polished crop instead of letterboxing small images. */
@media (max-width: 991.98px) {
  .ac-hero-visual {
    width: 100%;
    margin-top: 1.5rem;
  }
  .ac-hero-product-frame {
    width: min(100%, 560px);
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-radius: 20px;
  }
  .ac-hero-product-frame img { object-position: center; }
  .ac-hero-product-frame .bi { font-size: clamp(5rem, 18vw, 8rem); }
}
@media (max-width: 575.98px) {
  .ac-hero-visual { margin-top: 1.15rem; }
  .ac-hero-product-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}

#heroCarousel .carousel-inner {
  overflow: hidden;
}
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  width: 5%;
}
#heroCarousel .carousel-indicators {
  margin-bottom: .25rem;
}
#heroCarousel .carousel-indicators button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
}
#heroCarousel .carousel-item {
  transition: transform .9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Category pills ---------- */
.ac-cat-card {
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  padding: 1.85rem 1rem;
  text-align: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  color: var(--ac-text) !important;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.ac-cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(47,111,237,.08), transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
}
.ac-cat-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--ac-shadow-lift);
  border-color: var(--ac-blue);
}
.ac-cat-card:hover::before { opacity: 1; }
.ac-cat-card:hover .ac-cat-icon {
  transform: scale(1.06);
  box-shadow: 0 10px 22px rgba(47,111,237,.4);
}
.ac-cat-card .bi {
  font-size: 2.2rem;
  color: var(--ac-blue);
  margin-bottom: .5rem;
  display: block;
}
.ac-cat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .75rem;
  background: var(--ac-blue);
  color: #ffffff;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Ensure category text is readable in all themes; force inherit from theme tokens */
.ac-cat-card .fw-semibold,
.ac-cat-card .small,
a.ac-cat-card {
  color: var(--ac-text) !important;
}
.ac-cat-icon .bi { margin-bottom: 0; font-size: 1.5rem; color: #ffffff; }

.ac-benefit-card {
  height: 100%;
  padding: 1.5rem 1rem;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-card);
  box-shadow: 0 8px 22px rgba(11,18,32,.04);
}
.ac-benefit-card p {
  margin: .4rem 0 0;
  color: var(--ac-muted);
  font-size: .82rem;
}

/* ---------- Product cards ---------- */
.ac-product-card {
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  overflow: hidden;
  height: 100%;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
  position: relative;
}
.ac-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ac-shadow-lift);
  border-color: var(--ac-blue-light);
}
.ac-product-thumb {
  background: var(--ac-soft-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  position: relative;
}
/* Bootstrap's carousel positions .carousel-item via float/transform expecting
   block-level children - the flex centering above (meant for the single-icon
   fallback case) fights that layout and pushes slide images into a corner
   with empty space around them. Restore plain block layout when this class
   is reused as a carousel's slide container. */
.carousel-inner.ac-product-thumb {
  display: block;
  padding: 0;
}
.carousel-inner.ac-product-thumb .carousel-item {
  height: 100%;
}
.ac-product-thumb .bi {
  font-size: 4.2rem;
  color: var(--ac-blue);
  opacity: .85;
}
.ac-product-thumb .ac-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .75rem;
}
.ac-badge-sale {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 1;
  background: var(--ac-orange);
  color: #ffffff;
  font-weight: 700;
  font-size: .72rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(245,158,11,.4);
}
.ac-product-card .card-body { padding: 1.1rem; }
.ac-product-title {
  font-weight: 600;
  font-size: .98rem;
  color: var(--ac-text);
  display: block;
  min-height: 2.6em;
  overflow: hidden;
}
.ac-brand-tag {
  color: var(--ac-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ac-price {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ac-heading);
}
.ac-price-strike {
  color: var(--ac-muted);
  text-decoration: line-through;
  font-size: .85rem;
  margin-left: .4rem;
}
.ac-stars { color: var(--ac-blue); font-size: .85rem; }

.ac-stock-line {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 600;
}
.ac-stock-line .bi { font-size: .5rem; }
.ac-stock-line.is-in { color: var(--ac-success, #16a34a); }
.ac-stock-line.is-out { color: var(--ac-muted); }

/* View/Add stay a fixed 2-button row (always roomy); WhatsApp gets its own
   full-width row below rather than squeezing in as a 3rd column - a 3-across
   row was forcing "Add"'s icon+text to wrap onto two lines on narrow cards,
   which is what made the buttons look stretched/disproportionate. */
.ac-card-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ac-card-whatsapp-btn {
  width: 100%;
  padding: .3rem .5rem;
  border-radius: 8px;
  background: #e8f8ee;
  color: #1aa85b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.ac-card-whatsapp-btn:hover { background: #1aa85b; color: #fff; }
/* The light-theme green (#1aa85b) is too dark to read against its own
   translucent tint once the card behind it goes dark - lift it to a brighter
   green in dark mode rather than dimming the tint further. */
html[data-theme="dark"] .ac-card-whatsapp-btn {
  background: rgba(26,168,91,.18);
  color: #4ade80;
}

.btn-ac-primary {
  background: var(--ac-blue);
  border-color: var(--ac-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(47,111,237,.35);
}
.btn-ac-primary:hover {
  background: var(--ac-blue-dark);
  border-color: var(--ac-blue-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(47,111,237,.45);
}
.btn-lg.btn-ac-primary { border-radius: 999px; padding: .85rem 1.9rem; }

.btn-ac-outline {
  border: 1.5px solid var(--ac-blue);
  color: var(--ac-blue);
  font-weight: 600;
  background: transparent;
}
.btn-ac-outline:hover { background: var(--ac-blue); color: #fff; }

.ac-share-button {
  border: 1px solid var(--ac-border);
  background: var(--ac-card);
  color: var(--ac-text);
  font-weight: 600;
}
.ac-share-button:hover {
  background: rgba(47,111,237,.1);
  border-color: var(--ac-blue);
  color: var(--ac-blue);
}

/* ---------- Product detail page (Amazon-style layout) ---------- */
.ac-pdp-wrap {
  max-width: 1360px;
}
.ac-pdp-main-image {
  height: 380px;
}
@media (min-width: 768px) {
  .ac-pdp-main-image { height: 460px; }
}
@media (min-width: 992px) {
  .ac-pdp-main-image { height: 520px; }
}
.ac-zoomable {
  cursor: zoom-in;
  transition: transform .25s ease;
}
.ac-zoomable:hover {
  transform: scale(1.08);
}
.ac-pdp-expand-btn {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(11,18,32,.65);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  backdrop-filter: blur(2px);
  transition: background .2s ease, transform .2s ease;
}
.ac-pdp-expand-btn:hover {
  background: var(--ac-blue);
  transform: scale(1.06);
}
.ac-condition-badge {
  background: rgba(31,111,235,.12);
  color: var(--ac-blue);
  border: 1px solid rgba(31,111,235,.25);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ac-pdp-info-line {
  font-size: .92rem;
  color: var(--ac-text);
  margin-bottom: .35rem;
}
.ac-pdp-price-box {
  background: var(--ac-soft-gradient);
  border-radius: var(--ac-radius-lg);
  padding: 1rem 1.1rem;
}
.ac-whatsapp-button {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
  font-weight: 600;
}
.ac-whatsapp-button:hover {
  background: #1ebc59;
  border-color: #1ebc59;
  color: #fff;
}
.ac-spec-table th, .ac-spec-table td {
  border-color: var(--ac-border);
  padding: .55rem .5rem;
  font-size: .9rem;
}
.ac-spec-table th {
  color: var(--ac-muted);
  font-weight: 600;
  width: 40%;
}
.ac-spec-table td {
  color: var(--ac-text);
}
.ac-lightbox-content {
  background: transparent;
  border: none;
}
.ac-lightbox-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  z-index: 2;
}
.ac-lightbox-dialog {
  max-width: min(94vw, 1100px);
}
.ac-lightbox-dialog .carousel-item img.ac-lightbox-img {
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--ac-radius);
  background: var(--ac-navy);
}

/* Quick jump links */
.ac-jumplink {
  border: 1px solid var(--ac-border);
  background: var(--ac-card);
  color: var(--ac-text);
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ac-jumplink:hover {
  border-color: var(--ac-blue);
  color: var(--ac-blue);
}

/* Highlights / What's Included bullet lists */
.ac-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.ac-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: var(--ac-text);
}
.ac-bullet-list li .bi {
  flex: 0 0 auto;
  margin-top: .2rem;
}

/* Refurbished condition checklist */
.ac-checklist-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--ac-border);
  font-size: .88rem;
  height: 100%;
}
.ac-checklist-item.is-pass {
  color: var(--ac-text);
  background: rgba(25,135,84,.08);
  border-color: rgba(25,135,84,.25);
}
.ac-checklist-item.is-pass .bi { color: #198754; }
.ac-checklist-item.is-na {
  color: var(--ac-muted);
}
.ac-checklist-item.is-na .bi { color: var(--ac-muted); }

/* Star rating picker (pure CSS, no JS needed) */
.ac-star-picker {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: .2rem;
  border: none;
  padding: 0;
  margin: 0;
}
.ac-star-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ac-star-picker label {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ac-border);
  cursor: pointer;
  transition: color .15s ease;
}
.ac-star-picker input:checked ~ label,
.ac-star-picker label:hover,
.ac-star-picker label:hover ~ label {
  color: var(--ac-blue);
}

/* Customer reviews */
.ac-review-score {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--ac-heading);
  line-height: 1;
}
.ac-review-list {
  display: flex;
  flex-direction: column;
}
.ac-review-item {
  padding: 1rem 0;
  border-top: 1px solid var(--ac-border);
}
.ac-review-item:first-child {
  border-top: 1px solid var(--ac-border);
}

/* ---------- Section titles ---------- */
.ac-section-title {
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -.03em;
  color: var(--ac-heading);
}
.ac-section-sub { color: var(--ac-muted); font-size: .85rem; }

/* ---------- Footer ---------- */
.ac-footer {
  background: linear-gradient(180deg, var(--ac-navy) 0%, #081b3f 100%);
  color: rgba(255,255,255,.75);
  margin-top: 4rem;
}
/* The full logo artwork has a deep-navy "AROHI COMPUTERS" wordmark that all
   but disappears on the footer's navy background (which stays dark in BOTH
   themes). A soft light plate behind it restores legibility without
   recoloring or swapping the asset. */
.ac-footer-logo {
  height: 70px;
  width: auto;
  padding: .5rem .9rem;
  border-radius: 12px;
  background: rgba(255,255,255,.93);
}
.ac-footer h6 { color: #fff; font-weight: 700; }
.ac-footer a { color: rgba(255,255,255,.65); }
.ac-footer a:hover { color: var(--ac-blue-light); }
.ac-footer hr { border-color: rgba(255,255,255,.1); }
@media (max-width: 767.98px) {
  .ac-footer .col-md-4,
  .ac-footer .col-md-3,
  .ac-footer .col-md-2 {
    text-align: center;
  }
  .ac-footer .col-md-4 .d-flex,
  .ac-footer li {
    justify-content: center;
  }
  .ac-footer li { display: flex; }
}
.ac-footer-cta {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ac-radius-lg);
  padding: 1.75rem;
}
.ac-footer-cta h5 { color: #fff; font-family: "Poppins", sans-serif; }
.ac-footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.ac-footer-social:hover {
  background: var(--ac-blue-light);
  color: #0f2d63;
  transform: translateY(-3px);
}

/* ---------- Honeypot (bot signup trap) ---------- */
/* Invisible to real users (and screen readers via aria-hidden), but a plain
   text input rather than type="hidden" - simple bots that fill every visible
   field in a scraped form still fill this one. Any non-empty value on submit
   means it wasn't a human. */
.ac-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Auth cards ---------- */
.ac-auth-card {
  background: var(--ac-card);
  border-radius: var(--ac-radius-lg);
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-lift);
}
.ac-auth-side {
  background: linear-gradient(160deg, var(--ac-navy) 0%, #1c3a8a 100%);
  border-radius: var(--ac-radius) 0 0 var(--ac-radius);
  color: #fff;
  padding: 3rem 2rem;
}

/* ---------- Order success (thank-you page) ---------- */
.ac-success-banner {
  padding: 2rem 1rem;
}
.ac-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #198754;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 12px 28px rgba(25,135,84,.35);
  animation: ac-pop-in .4s cubic-bezier(.2,.9,.3,1.3) both;
}
/* Distinct from the green "done" icon above - an order awaiting UPI payment
   confirmation isn't actually complete yet, and shouldn't look like it is. */
.ac-success-icon-pending {
  background: var(--ac-orange);
  box-shadow: 0 12px 28px rgba(245,158,11,.35);
}
@keyframes ac-pop-in {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-success-icon { animation: none; }
}
.ac-order-ref {
  display: inline-block;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  letter-spacing: .03em;
  color: var(--ac-blue);
  background: var(--ac-soft-gradient);
  border: 1px solid var(--ac-border);
  border-radius: 999px;
  padding: .4rem 1.1rem;
  margin-top: .25rem;
}

/* ---------- Dedicated Categories page (Amazon/Flipkart "browse by
   department" pattern - distinct from the /products search-results page) ---------- */
.ac-dept-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem 1.5rem;
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  color: var(--ac-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ac-dept-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ac-shadow-lift);
  border-color: var(--ac-blue-light);
}
.ac-dept-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--ac-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.ac-dept-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .3rem; }
.ac-dept-card p { font-size: .78rem; color: var(--ac-muted); margin-bottom: .75rem; flex-grow: 1; }
.ac-dept-count {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--ac-blue-dark);
  background: var(--ac-soft-gradient);
  padding: .2rem .6rem;
  border-radius: 999px;
  margin-bottom: .6rem;
  width: fit-content;
}
.ac-dept-link { font-size: .8rem; font-weight: 700; color: var(--ac-blue); }
/* --ac-blue-dark on --ac-soft-gradient is dark-on-dark once the gradient
   flips for the dark theme; use the bright accent instead. */
html[data-theme="dark"] .ac-dept-count { color: var(--ac-blue-light); }

/* ---------- Shop page: category sidebar ---------- */
.ac-shop-catlist {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ac-shop-catlink {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  color: var(--ac-text);
  font-weight: 500;
  font-size: .92rem;
  transition: background .15s ease, color .15s ease;
}
.ac-shop-catlink:hover { background: var(--ac-card-hover); color: var(--ac-blue); }
.ac-shop-catlink.active { background: var(--ac-blue); color: #fff; }
.ac-shop-caticon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ac-soft-gradient);
  color: var(--ac-blue);
  font-size: .9rem;
}
.ac-shop-catlink.active .ac-shop-caticon {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ---------- Product video (a slide in the PDP gallery) ---------- */
.ac-pdp-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0a0f1c;
}
/* Video thumbnail in the rail: same footprint as the image thumbs so the row
   stays aligned, with a play glyph instead of a poster frame (generating a
   real poster would mean transcoding on upload). */
.ac-thumb-video {
  width: 68px;
  height: 68px;
  border-radius: .5rem;
  border: 1px solid var(--ac-border) !important;
  background: var(--ac-soft-gradient) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ac-thumb-video-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ac-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* ---------- "Best for" use-cases ---------- */
/* Sits directly under the price so it answers "is this right for my work?"
   before the customer has to scroll into the spec table. */
.ac-best-for {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  padding: .85rem 1rem;
  background: var(--ac-card);
}
.ac-best-for-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ac-blue);
  margin-bottom: .5rem;
}
.ac-best-for-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.ac-best-for-tag {
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ac-text);
  background: var(--ac-soft-gradient);
  border: 1px solid var(--ac-border);
  border-radius: 999px;
  padding: .3rem .75rem;
}

/* ---------- Product colour dots (under the gallery, ASUS-style) ---------- */
.ac-color-dots-wrap { text-align: center; margin-top: .85rem; }
.ac-color-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.ac-color-dot {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--dot, #ccc);
  border: 1px solid rgba(0,0,0,.18);
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ac-color-dot.is-static { cursor: default; }
.ac-color-dot:hover { transform: scale(1.12); }
/* Active ring drawn outside the dot so the colour itself stays unobscured. */
.ac-color-dot.active {
  box-shadow: 0 0 0 2px var(--ac-card), 0 0 0 4px var(--ac-blue);
}
.ac-color-dot-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ac-muted);
  margin-top: .55rem;
  min-height: 1.2em;
}

/* ---------- Product color swatches (visual only - no price/stock impact) ---------- */
.ac-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.ac-color-swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--ac-border);
  border-radius: 50%;
  background: var(--ac-card);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.ac-color-swatch:hover { border-color: var(--ac-blue); transform: scale(1.08); }
.ac-color-swatch-fill {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,.08);
}

/* ---------- Checkout: payment method ---------- */
.ac-payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 575.98px) {
  .ac-payment-options { grid-template-columns: 1fr; }
}
.ac-payment-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border: 1.5px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-card);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ac-payment-option:hover { border-color: var(--ac-blue-light); }
.ac-payment-option:has(.ac-payment-radio:checked) {
  border-color: var(--ac-blue);
  background: rgba(47,111,237,.06);
}
.ac-payment-option .bi {
  font-size: 1.5rem;
  color: var(--ac-blue);
  flex-shrink: 0;
}
.ac-upi-panel {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-soft-gradient);
}
.ac-upi-panel img {
  border-radius: 10px;
  background: #fff;
  padding: .5rem;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .ac-upi-panel { flex-direction: column; text-align: center; }
}

/* ---------- Cart / checkout ---------- */
.ac-cart-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--ac-soft-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-cart-thumb .bi { font-size: 1.7rem; color: var(--ac-blue); }

.ac-summary-card {
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-soft);
}

/* ---------- Badges / status pills ---------- */
.ac-step {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ac-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ---------- Utility ---------- */
.ac-rounded-xl { border-radius: var(--ac-radius-lg); }
.text-ac-blue { color: var(--ac-blue); }
.bg-ac-navy { background: var(--ac-navy); }

/* ---------- Scroll-reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.reveal-visible > * {
  animation: ac-fade-up .6s ease both;
}
.reveal-stagger.reveal-visible > *:nth-child(2) { animation-delay: .08s; }
.reveal-stagger.reveal-visible > *:nth-child(3) { animation-delay: .16s; }
.reveal-stagger.reveal-visible > *:nth-child(4) { animation-delay: .24s; }
.reveal-stagger.reveal-visible > *:nth-child(5) { animation-delay: .32s; }
.reveal-stagger.reveal-visible > *:nth-child(6) { animation-delay: .4s; }
.reveal-stagger.reveal-visible > *:nth-child(n+7) { animation-delay: .46s; }
@keyframes ac-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Product image hover zoom ---------- */
.ac-product-card .ac-product-img { transition: transform .35s ease; }
.ac-product-card:hover .ac-product-img { transform: scale(1.08); }

/* ---------- Stats band ---------- */
/* Flat and permanently dark, like the navbar/hero/footer above and below it -
   not tied to the light/dark toggle tokens (see the file-header comment on
   --ac-navbar-* for why: this band's own background stays fixed regardless
   of the storefront theme). */
.ac-stats-band {
  background: var(--ac-navy);
  border-radius: var(--ac-radius-lg);
  position: relative;
  overflow: hidden;
}
.ac-stat-block {
  text-align: center;
  padding: 2rem 1rem;
  position: relative;
}
.ac-stat-block:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.14);
}
@media (max-width: 767.98px) {
  .ac-stat-block:nth-child(odd)::after { display: none; }
}
.ac-counter-value {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ac-teal);
  display: block;
  font-variant-numeric: tabular-nums;
}
.ac-stat-label { color: rgba(255,255,255,.7); font-size: .88rem; margin-top: .3rem; font-weight: 500; }
.ac-stat-number {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  color: var(--ac-blue-light);
  margin-bottom: .5rem;
}

/* ---------- Deal section: dark feature panel + curated product grid ---------- */
.ac-deal-section {
  background: var(--ac-bg);
  padding: 3rem 0;
}
.ac-deal-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: .85rem;
}
.ac-deal-feature {
  min-height: 300px;
  background: linear-gradient(145deg, var(--ac-navy), var(--ac-blue));
  border-radius: var(--ac-radius-lg);
  color: #fff;
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ac-deal-feature::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  right: -90px;
  bottom: -100px;
}
.ac-deal-feature h2 {
  font-size: 1.9rem;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: .4rem 0 .6rem;
  position: relative;
  z-index: 1;
}
.ac-deal-feature p {
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  max-width: 280px;
  position: relative;
  z-index: 1;
}
/* _product_card.html wraps each card in a Bootstrap col-lg-3 (4-across) -
   force 3-across specifically inside this section's row instead of adding a
   card-specific variant. */
@media (min-width: 992px) {
  .ac-deal-products > [class*="col-"] { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 767.98px) {
  .ac-deal-layout { grid-template-columns: 1fr; }
}

.btn-white {
  background: #fff;
  color: var(--ac-text);
  border: 1px solid var(--ac-border);
  font-weight: 700;
}
.btn-white:hover { border-color: var(--ac-blue); color: var(--ac-blue); }

/* ---------- Trusted brands marquee (the "running strip") ---------- */
.ac-marquee-band {
  background: var(--ac-card);
  border-top: 1px solid var(--ac-border);
  border-bottom: 1px solid var(--ac-border);
}
.ac-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ac-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ac-marquee-scroll 32s linear infinite;
  transform: translate3d(0, 0, 0);
}
.ac-marquee:hover .ac-marquee-track { animation-play-state: paused; }
.ac-marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: 3.5rem;
  padding-right: 3.5rem;
}
.ac-marquee-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ac-heading);
  white-space: nowrap;
}
.ac-marquee-item .bi { font-size: 1.3rem; color: var(--ac-blue); }
@keyframes ac-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Deal countdown ---------- */
.ac-countdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ac-hero-muted); /* lives on the permanently-light hero panel */
  font-size: .85rem;
  margin-top: .5rem;
}
.ac-countdown {
  font-variant-numeric: tabular-nums;
  color: var(--ac-blue-dark);
  font-weight: 700;
}

/* ---------- Back-to-top button ---------- */
.ac-back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ac-blue);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 8px 20px rgba(47,111,237,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
  z-index: 1040;
}
.ac-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.ac-back-to-top:hover { background: var(--ac-blue-dark); color: #fff; }
/* Stack above the floating WhatsApp button when it's present, instead of
   overlapping it - only reserves the extra space when that button actually
   renders (gated server-side on a configured WhatsApp number). */
.ac-has-whatsapp-float .ac-back-to-top { bottom: 5.5rem; }
@media (max-width: 767.98px) {
  .ac-has-whatsapp-float .ac-back-to-top { bottom: 8.75rem; }
}

/* ---------- Home: WhatsApp CTA banner ---------- */
.ac-whatsapp-box {
  background: var(--ac-soft-gradient);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  padding: 2.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.ac-whatsapp-box h2 { font-size: 1.7rem; letter-spacing: -.02em; color: var(--ac-heading); }
.ac-whatsapp-box p { color: var(--ac-muted); font-size: .88rem; }
.ac-whatsapp-cta-btn {
  background: #1aa85b;
  color: #fff;
  padding: .85rem 1.4rem;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
  display: inline-flex;
  align-items: center;
}
.ac-whatsapp-cta-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,168,91,.25); }
@media (max-width: 575.98px) {
  .ac-whatsapp-box { padding: 1.6rem 1.4rem; flex-direction: column; align-items: flex-start; }
  .ac-whatsapp-cta-btn { width: 100%; justify-content: center; }
}

/* ---------- Floating WhatsApp button ---------- */
.ac-floating-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1035;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1aa85b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 12px 25px rgba(26,168,91,.32);
  transition: transform .2s ease;
}
.ac-floating-whatsapp:hover { transform: translateY(-3px); color: #fff; }
@media (max-width: 767.98px) {
  .ac-floating-whatsapp { bottom: 4.9rem; width: 48px; height: 48px; font-size: 1.3rem; }
}

/* ---------- Mobile bottom nav ---------- */
.ac-mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 62px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--ac-border);
}
html[data-theme="dark"] .ac-mobile-bottom-nav { background: rgba(18,27,44,.97); }
.ac-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-size: .62rem;
  font-weight: 600;
  color: var(--ac-muted);
}
.ac-mobile-nav-item .bi { font-size: 1.15rem; }
.ac-mobile-nav-item.active { color: var(--ac-blue); }
.ac-mobile-nav-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ac-red);
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Body-level padding so page content (and the existing back-to-top/whatsapp
   buttons) never sit underneath the fixed bottom nav on mobile. */
@media (max-width: 767.98px) {
  body { padding-bottom: 62px; }
}

/* ---------- Cart badge pop ---------- */
.ac-cart-badge .badge { transition: transform .2s ease; }
.ac-badge-pop { transform: scale(1.5); }

/* ---------- Testimonials ---------- */
.ac-testimonial-card {
  height: 100%;
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  padding: 1.6rem;
  box-shadow: var(--ac-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ac-testimonial-quote-icon {
  font-size: 1.4rem;
  color: var(--ac-blue-light);
  opacity: .55;
}
.ac-testimonial-text {
  color: var(--ac-text);
  font-size: .94rem;
  line-height: 1.55;
  flex: 1;
}
.ac-testimonial-footer {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-top: .5rem;
  border-top: 1px solid var(--ac-border);
}
.ac-testimonial-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ac-soft-gradient);
  color: var(--ac-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.ac-testimonial-name { font-weight: 700; font-size: .88rem; color: var(--ac-heading); }
.ac-testimonial-product { font-size: .78rem; color: var(--ac-muted); }

/* ---------- Sticky mobile CTA (home page only) ---------- */
/* Meta-ads traffic lands on the homepage mostly on mobile mid-scroll; a
   thumb-reachable, always-visible CTA converts better than waiting for the
   visitor to scroll back to the hero button. Home page only - other pages
   already have a page-specific primary action (e.g. checkout button). */
.ac-mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  gap: .6rem;
  padding: .65rem .85rem;
  padding-bottom: max(.65rem, env(safe-area-inset-bottom));
  background: var(--ac-card);
  border-top: 1px solid var(--ac-border);
  box-shadow: 0 -8px 24px rgba(11,18,32,.12);
}
.ac-mobile-cta .btn { flex: 1; border-radius: 999px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger.reveal-visible > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Rotating brand panel (homepage hero, right column) ---------- */
/* Replaces two static category tiles. Slides are stacked and crossfaded
   rather than laid out in a track: the panel sits beside a hero of varying
   height, and absolute stacking keeps the box a fixed size no matter how
   long a given slide's copy runs. */
.ac-brand-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ac-radius-lg, 18px);
  /* .ac-hero-promos is display:contents, so this is a direct child of the
     hero grid and must claim both of its 225px rows - the two tiles it
     replaced took one each, and without this the second row collapses. */
  grid-row: span 2;
  min-height: 100%;
  padding: 1.75rem;
  display: flex;
  background: linear-gradient(150deg, #062b63 0%, #0756b8 55%, #0878f9 100%);
  color: #fff;
  isolation: isolate;
}
/* Slow drifting highlight so the panel isn't visually inert between slide
   changes. Pure decoration - sits behind content and ignores pointer input. */
.ac-brand-glow {
  position: absolute;
  inset: -40% -40% auto -40%;
  height: 150%;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  animation: ac-brand-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes ac-brand-drift {
  from { transform: translate3d(-12%, -6%, 0) scale(1); }
  to   { transform: translate3d(14%, 8%, 0) scale(1.15); }
}

.ac-brand-slide {
  position: absolute;
  inset: 0;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: 3rem;  /* clear of the dot rail pinned at the bottom */
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.ac-brand-slide.is-active { opacity: 1; visibility: visible; }

.ac-brand-watermark {
  position: absolute;
  right: -.5rem;
  bottom: -1rem;
  font-size: 8rem;
  line-height: 1;
  opacity: .13;
  pointer-events: none;
}
.ac-brand-eyebrow {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: .5rem;
}
.ac-brand-slide h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
  color: #fff;
}
.ac-brand-slide p {
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
  margin: 0 0 1rem;
  max-width: 34ch;
}
.ac-brand-link {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,.55);
  padding-bottom: 1px;
  transition: border-color .15s ease;
}
.ac-brand-link:hover { color: #fff; border-bottom-color: #fff; }

/* Content lifts in slightly after the crossfade, so a slide change reads as
   one deliberate motion instead of a hard swap. */
.ac-brand-slide.is-active .ac-brand-eyebrow,
.ac-brand-slide.is-active h3,
.ac-brand-slide.is-active p,
.ac-brand-slide.is-active .ac-brand-link {
  animation: ac-brand-rise .6s cubic-bezier(.22,.9,.3,1) both;
}
.ac-brand-slide.is-active h3            { animation-delay: .06s; }
.ac-brand-slide.is-active p             { animation-delay: .12s; }
.ac-brand-slide.is-active .ac-brand-link{ animation-delay: .18s; }
@keyframes ac-brand-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

.ac-brand-dots {
  position: absolute;
  left: 1.75rem;
  bottom: 1.15rem;
  display: flex;
  gap: .4rem;
  z-index: 2;
}
.ac-brand-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.ac-brand-dot.is-on { background: #fff; width: 20px; border-radius: 999px; }

@media (max-width: 991.98px) {
  .ac-brand-panel { grid-row: auto; min-height: 260px; }
}

/* Motion is decorative here, so honour a reduced-motion preference: no drift,
   no rise, no crossfade - the active slide simply appears. Rotation is also
   stopped in JS, so the panel becomes a static card rather than an animation
   that merely moves less. */
@media (prefers-reduced-motion: reduce) {
  .ac-brand-glow { animation: none; }
  .ac-brand-slide { transition: none; }
  .ac-brand-slide.is-active .ac-brand-eyebrow,
  .ac-brand-slide.is-active h3,
  .ac-brand-slide.is-active p,
  .ac-brand-slide.is-active .ac-brand-link { animation: none; }
}

/* ---------- Shop page: collapsed category filter (mobile) ---------- */
.ac-catfilter-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .1rem 0;
  background: none;
  border: 0;
  color: var(--ac-text);
  font-weight: 700;
  font-size: .95rem;
}
.ac-catfilter-toggle .bi-funnel { color: var(--ac-blue); }
.ac-catfilter-label { flex-shrink: 0; }
/* The active filter, so the row still answers "what am I looking at?" while
   the list itself is closed. */
.ac-catfilter-current {
  margin-left: auto;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ac-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}
.ac-catfilter-caret {
  flex-shrink: 0;
  color: var(--ac-muted);
  transition: transform .2s ease;
}
.ac-catfilter-toggle:not(.collapsed) .ac-catfilter-caret { transform: rotate(180deg); }
@media (max-width: 991.98px) {
  /* Spacing belongs to the expanded list, not the collapsed row - otherwise
     the closed filter carries a gap that looks like a rendering fault. */
  #acCatFilter .ac-shop-catlist { padding-top: .75rem; }
}

/* ---------- Brand lockup on small screens ---------- */
/* "Arohi Computer's" was ellipsising to "Arohi Comput…" on phones: the 56px
   mark plus the theme/cart/menu controls left less room than the name needs,
   and .ac-brand-text truncates rather than wraps. Reclaim the space from the
   mark - shrinking it costs nothing, losing half the shop's name does. */
@media (max-width: 575.98px) {
  .ac-brand-mark { width: 44px; height: 44px; }
  .ac-brand-text { font-size: .95rem; letter-spacing: 0; }
}
@media (max-width: 400px) {
  .ac-brand-mark { width: 38px; height: 38px; }
  .ac-brand-text { font-size: .88rem; }
}

/* ---------- Product card condition badge ---------- */
/* Mirrors .ac-badge-sale on the opposite corner. */
.ac-badge-cond {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 1;
  font-weight: 700;
  font-size: .72rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
/* Green reads as "nothing to explain" for new stock. */
.ac-badge-cond-new {
  background: #16a34a;
  box-shadow: 0 6px 14px rgba(22,163,74,.38);
}
/* Violet rather than the obvious amber: the discount pill on the opposite
   corner is already orange, and two warm pills on one card compete instead of
   reading as two separate facts. Violet still carries weight, and suits stock
   that's been through a six-point check rather than merely being cheap. */
.ac-badge-cond-refurb {
  background: #7c3aed;
  box-shadow: 0 6px 14px rgba(124,58,237,.38);
}
.ac-badge-cond-openbox {
  background: #0878f9;
  box-shadow: 0 6px 14px rgba(8,120,249,.35);
}
.ac-badge-cond-used {
  background: #64748b;
  box-shadow: 0 6px 14px rgba(100,116,139,.35);
}