/* ==========================================================================
   MAXXCommerce Demo Store — site theme
   Loads AFTER css/ectcart.css (see incectstyle.php in header.php), so these
   rules win the cascade for shared cart classes without needing !important.
   Palette (Aug 2026 redesign): Midnight Navy #0B1220 + Electric Blue #1677FF
   + Bright Cyan #22D3EE, on white/cool-white neutrals, with Emerald success
   and Orange sale/attention accents. See "MAXXCommerce brand reference
   tokens" below for the canonical named values; every other token in this
   file resolves to one of those (directly, or as a purpose-built shade —
   hover/tint/dark-text-on-white variant — derived from it).
   ========================================================================== */

:root {
  /* -- MAXXCommerce brand reference tokens (canonical palette) ------------ */
  --color-primary:         #1677FF;  /* Electric Blue */
  --color-primary-hover:   #0D63D8;
  --color-navy:            #0B1220;  /* Midnight Navy */
  --color-cyan:            #22D3EE;  /* Bright Cyan — sparing highlight only */
  --color-white:           #FFFFFF;
  --color-background:      #F8FAFC;  /* Cool White */
  --color-text:            #111827;  /* Dark Text */
  --color-text-secondary:  #94A3B8;  /* Slate Text */
  --color-border:          #E2E8F0;  /* Border Gray */
  --color-success:         #10B981;  /* Emerald */
  --color-sale:            #F97316;  /* Orange */
  --color-header-navy:     #020817;  /* True header navy from www.maxxcommerce.com's
                                         --maxx-navy — deeper than --color-navy
                                         (#0B1220), used only for .site-header so
                                         the demo store's header matches the live
                                         marketing site's header exactly. */

  /* -- Brand (legacy names, kept so every selector below "just works") ---- */
  /* --brand      = primary interactive: links, active states, icons,
                     focus rings, filled secondary-style buttons.
     --brand-dark = hover/pressed shade of --brand.
     --brand-darker = structural dark backgrounds: header, footer, hero.
     --brand-light  = bright cyan, reserved for the hero highlight span and
                       the hero/CTA gradient's outermost stop — NOT reused
                       broadly, to keep cyan a sparing accent per spec.
     --brand-tint   = very light blue wash for hover backgrounds. */
  --brand:            var(--color-primary);
  --brand-dark:        var(--color-primary-hover);
  --brand-darker:      var(--color-navy);
  --brand-light:       var(--color-cyan);
  --brand-tint:        #eaf3ff;

  /* --accent family drives ectbutton/buybutton (the primary CTA) plus small
     icon/hover accents on dark surfaces — both are Electric Blue by spec
     ("Primary buttons: background #1677FF"; blue is the primary interactive
     color throughout). --accent-dark covers price/total emphasis text
     (blue-dark, readable on white); genuinely sale/discount-specific text
     is pointed at --color-sale-text directly at its declaration instead of
     through this token — see the Discounts note further down. */
  --accent:           var(--color-primary);
  --accent-light:     var(--color-primary);
  --accent-dark:      var(--color-primary-hover);
  --accent-tint:      #fff1e6;

  --color-sale-text:  #C2410C;  /* darker orange, WCAG-safe for text-on-white
                                    (raw #F97316 fails ~2.5:1 for small text) */
  --color-success-text: #047857; /* darker emerald, WCAG-safe for text-on-white */

  /* Ink & surfaces (light, modern, clean) */
  --text-heading:     var(--color-text);
  --text:             var(--color-text);
  --text-muted:       #64748B;   /* darker of the two spec secondary-text values — used far more heavily than --color-text-secondary, so it needs the extra contrast */
  --surface:          var(--color-white);
  --surface-alt:      var(--color-background);   /* section backgrounds */
  --surface-raised:   var(--color-white);   /* panels, cards, dropdowns */
  --surface-tile:     #F1F5F9;   /* image tiles */
  --border:           var(--color-border);
  --border-strong:    #CBD5E1;

  --success:          var(--color-success-text);
  --danger:           #b91c1c;   /* not in the brand palette — kept for
                                     out-of-stock/error states, which the
                                     brief doesn't otherwise cover */

  /* Shape & motion */
  --radius:           8px;
  --radius-lg:        14px;
  --radius-pill:      999px;
  --shadow-sm:        0 1px 2px rgba(11,18,32,0.06);
  --shadow:           0 4px 16px rgba(11,18,32,0.08);
  --shadow-lg:        0 12px 32px rgba(11,18,32,0.14);
  --transition:       0.2s ease;

  /* Type */
  --font-body:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head:        'Poppins', var(--font-body);

  /* Layout */
  --max-width:        1440px;
  --gutter:           clamp(1rem, 4vw, 3rem);
  --header-h:         150px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text-heading);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }

a { color: var(--brand); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-dark); }

/* -------------------------------------------------------------------------- */
/* Layout helpers                                                             */
/* -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--alt { background: var(--surface-alt); }
.section--brand { background: var(--brand-darker); color: #dbe6f2; }
.section--brand h2, .section--brand h3 { color: #fff; }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 2.75rem; }
.section-head .eyebrow { display: inline-block; margin-bottom: 0.75rem; }
.section-head p { color: var(--text-muted); font-size: 1.05rem; }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* -------------------------------------------------------------------------- */
/* Buttons (also themes ECT input.ectbutton / button.ectbutton)               */
/*                                                                             */
/* css/ectcart.css declares input[type="button"].ectbutton /                  */
/* input[type="submit"].ectbutton with an attribute selector (incl.           */
/* font-family:FontAwesome,sans-serif — an icon font), which outranks a plain */
/* "input.ectbutton" class selector on specificity regardless of cascade      */
/* order. imageorbutton()/imageorsubmit() in vsadmin/inc/incfunctions.php     */
/* render as <input type="button">/<input type="submit"> (checkout button,    */
/* "View Details", etc.) — only imageorbuttontag() uses a real <button>. Every */
/* rule here repeats the attribute-qualified selectors so ours wins on        */
/* specificity, not just source order.                                       */
/* -------------------------------------------------------------------------- */
.btn,
input.ectbutton,
button.ectbutton,
input[type="button"].ectbutton,
input[type="submit"].ectbutton,
.buybutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-align: center;
}
.btn-primary,
input.ectbutton,
button.ectbutton,
input[type="button"].ectbutton,
input[type="submit"].ectbutton,
.buybutton {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover,
input.ectbutton:hover,
button.ectbutton:hover,
input[type="button"].ectbutton:hover,
input[type="submit"].ectbutton:hover,
.buybutton:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn-secondary {
  background: var(--brand);
  color: #fff;
}
.btn-secondary:hover { background: var(--brand-light); color: #fff; transform: translateY(-1px); }
.btn:active,
input.ectbutton:active,
button.ectbutton:active,
input[type="button"].ectbutton:active,
input[type="submit"].ectbutton:active,
.buybutton:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.btn-ghost-light {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.22); color: #fff; }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

/* -------------------------------------------------------------------------- */
/* Demo notice banner (top of every page)                                     */
/* -------------------------------------------------------------------------- */
.demo-banner {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  color: #fff;
  font-size: 0.82rem;
  text-align: center;
}
.demo-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding-block: 0.5rem;
  flex-wrap: wrap;
}
.demo-banner strong { font-weight: 700; }
.demo-banner a { color: #fff; text-decoration: underline; font-weight: 600; }
.demo-banner a:hover { color: #fff; opacity: 0.85; }
.demo-banner i { font-size: 0.9rem; }

/* -------------------------------------------------------------------------- */
/* Utility strip (navy): search + account + admin                             */
/* -------------------------------------------------------------------------- */
.util-bar {
  background: var(--color-header-navy);  /* matches .site-header below it */
  color: rgba(255,255,255,.82);
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.util-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}
.util-bar .util-note { display: inline-flex; align-items: center; gap: 0.45rem; }
.util-bar .util-note i { color: var(--accent-light); }
.util-bar-right { display: flex; align-items: center; gap: 1.25rem; }
.util-link { color: #cdd9e8; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.util-link:hover { color: #fff; }
.util-link i { color: var(--accent-light); }

/* Search bar — segmented layout (matches the FLM/OSE header search):
   the input carries its own rounded-left box with the icon inset on its
   left edge; the clear "x" and the colored Go button are separate
   segments butted up against it, forming one continuous pill. */
.util-search-wrap { position: relative; }
.util-search {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 345px;
  transition: width var(--transition);
}
.util-search:focus-within { width: 405px; }
.util-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9fb2c9;
  font-size: 0.85rem;
  pointer-events: none;
}
.util-search:focus-within .util-search-icon { color: var(--brand); }
.util-search input[type="text"] {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-right: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: 0.5rem 0.75rem 0.5rem 2.15rem;
  color: #fff;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.util-search input[type="text"]:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22,119,255,0.25);
}
.util-search:focus-within input[type="text"] { color: var(--text-heading); }
.util-search input::placeholder { color: #9fb2c9; }
.util-search:focus-within input::placeholder { color: var(--text-muted); }
.util-search button {
  width: 0; height: 0; padding: 0; border: none;
  overflow: hidden; position: absolute; opacity: 0;
}
/* Selectors below are deliberately more specific than ".util-search button"
   above so the clear/submit buttons win the cascade and stay visible. */
.util-search button.util-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: auto; padding: 0; flex-shrink: 0;
  position: static; overflow: visible; opacity: 1;
  background: rgba(255,255,255,0.1);
  border: none; border-top: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  color: #9fb2c9; cursor: pointer;
}
.util-search-clear:hover { color: #fff; }
.util-search-clear[hidden] { display: none; }
/* Belt-and-suspenders: never show the X unless the bar is actually
   focused, regardless of what the JS "hidden" attribute is doing. */
.util-search:not(:focus-within) .util-search-clear { display: none; }

.util-search button.util-search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: auto; padding: 0; flex-shrink: 0;
  position: static; overflow: visible; opacity: 1;
  border: none; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--accent); color: #fff; cursor: pointer;
  transition: background var(--transition);
}
.util-search-submit i { font-size: 0.8rem; }
.util-search-submit:hover { background: var(--accent-light); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Live search suggestion dropdown */
.search-suggest-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
  /* z-index 1000: must beat the sticky header (100) AND the vendor
     .ectdp_minicartmainwrapper_ct stacking context in css/ectcart.css
     (z-index: 997) — a smaller "plenty high" value renders behind the
     mini-cart button. Don't lower this without re-checking that rule. */
  z-index: 1000;
}
.ssr-section-label {
  padding: 8px 12px 4px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}
.ssr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; transition: background var(--transition); min-height: 44px; box-sizing: border-box; }
.ssr-row:hover, .ssr-row.is-selected { background: var(--brand-tint); }
.ssr-thumb {
  width: 46px; height: 46px; flex-shrink: 0;
  background: var(--surface-tile); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ssr-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ssr-cat-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1rem;
}
.ssr-info { flex: 1; min-width: 0; }
.ssr-name { color: var(--text-heading); font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssr-price { color: var(--accent); font-size: 0.78rem; font-weight: 700; margin-top: 2px; }
.ssr-match { background: none; color: var(--brand); font-weight: 700; }
.ssr-empty { padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.ssr-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 12px; color: var(--text-muted); font-size: 0.85rem;
}
.ssr-spinner {
  width: 14px; height: 14px; border: 2px solid var(--border);
  border-top-color: var(--brand); border-radius: 50%;
  display: inline-block; animation: ssr-spin 0.6s linear infinite;
}
@keyframes ssr-spin { to { transform: rotate(360deg); } }
.ssr-footer { padding: 9px 12px; border-top: 1px solid var(--border); text-align: center; background: var(--surface-alt); }
.ssr-footer a { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; display: inline-block; padding: 6px 0; }
.ssr-footer a:hover { color: var(--accent); }

/* "Previously Searched" empty-focus panel (Step 8) — same dropdown box,
   shown when the search input is focused with no query typed yet. */
.ssr-section-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; }
.ssr-section-header .ssr-section-label { padding: 0; }
.ssr-clear-recent {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-muted); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ssr-clear-recent:hover { color: var(--accent); }
.ssr-recent-row .ssr-name { flex: 1; min-width: 0; font-weight: 400; }

/* "Recently Viewed" strip within the same empty-focus panel — server/
   session-tracked (recently-viewed-suggest.php), paged with prev/next
   arrows rather than a bare scrollbar since the vendor cap (50) is well
   above what fits in the dropdown's width. */
.ssr-rv-section { padding-top: 6px; padding-bottom: 10px; }
.ssr-rv-section:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; }
.ssr-rv-nav-wrap { display: flex; align-items: center; gap: 4px; padding: 0 6px; }
.ssr-rv-viewport {
  flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.ssr-rv-viewport::-webkit-scrollbar { display: none; }
.ssr-rv-track { display: flex; gap: 8px; padding: 0 4px; width: max-content; }
.ssr-rv-arrow {
  flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: var(--text-muted); font-size: 0.8rem; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.ssr-rv-arrow:hover { background: var(--brand-tint); color: var(--brand); }
.ssr-rv-arrow[hidden] { display: none; }
.ssr-rv-card {
  scroll-snap-align: start;
  flex-direction: column; align-items: stretch; gap: 6px;
  width: 84px; min-height: 0; padding: 6px; flex-shrink: 0;
}
.ssr-rv-thumb {
  width: 72px; height: 72px; border-radius: var(--radius);
}
.ssr-rv-name {
  font-size: 0.72rem; font-weight: 400; white-space: normal;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.3;
}

/* -------------------------------------------------------------------------- */
/* Main header                                                                */
/* -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-navy);   /* solid, matches live site's header bg exactly — no translucency so it's identical to the color behind the logo */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
/* .is-scrolled is toggled by js/site-enhance.js once the page scrolls past
   the very top — deepens the shadow so the glass header reads as "lifted"
   over page content instead of only on hover. Purely additive: the header
   is fully correct and usable with this class never applied (no-JS). */
.site-header.is-scrolled { box-shadow: var(--shadow-lg); border-bottom-color: rgba(255,255,255,0.14); }
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* Logo */
/* demo_logo.webp has a transparent background (its own checkerboard-free
   preview only *looks* white — that's just how image viewers render
   transparency). .site-header is solid navy (see above), so no separate
   background is needed here — it just inherits the header's color. */
.site-logo { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
/* demo_logo.webp is a wide wordmark lockup (~3:1) rather than a square mark —
   sized up so "MAXX COMMERCE" reads clearly; --header-h grows to match
   since .site-header uses min-height, not a fixed height. */
.site-logo img, .site-logo svg { height: 130px; width: auto; display: block; }
.site-logo .logo-text { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: #fff; letter-spacing: -0.02em; }
.site-logo .logo-text b { color: var(--accent); }

/* Desktop nav — links stay centered independent of cart width */
#main-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.nav-menu-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-menu-links a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(255,255,255,.82);  /* matches www.maxxcommerce.com's .nav-links a */
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}
.nav-menu-links a:hover,
.nav-menu-links a.is-active { color: #fff; background: rgba(255,255,255,0.08); }

/* Cart hover mini-cart — pulled out of flow so it never shifts the centered links */
.nav-cart-dropdown {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}
/* Neutralize ECT's stock positioning for the widget wrappers */
.nav-cart-dropdown .ectdp_minicartmainwrapper_ct { position: relative; width: auto; }
.nav-cart-dropdown .ectdp_minicartmainwrapper { position: static; right: auto; width: auto; background: transparent; }
.nav-cart-dropdown .ectdp_minicartopen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  float: none; clear: none; width: auto;
  cursor: pointer;
  white-space: nowrap;
  background: var(--accent);
  border-radius: var(--radius);
  padding: 0.6rem 1.15rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background var(--transition);
}
.nav-cart-dropdown .ectdp_minicartopen:hover { background: var(--accent-dark); }  /* darken on hover, matches live site's .nav-cta:hover */
.nav-cart-dropdown .ectdp_minicartopen a,
.nav-cart-dropdown .ectdp_minicartopen .ectMCquant { color: #fff !important; text-decoration: none; }
.nav-cart-dropdown .ectdp_minicartopen img { filter: brightness(0) invert(1); } /* arrow icon -> white */
.nav-cart-dropdown .ectdp_minicartopen a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f07a";            /* shopping cart */
  color: #fff;
  margin-right: 0.4rem;
}
/* Dropdown panel */
.nav-cart-dropdown .ectdp_minicartcontainer {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 120;
  margin-top: 0.5rem;
  width: 340px;               /* 297px vendor floats + border-box padding buffer */
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  text-transform: none;
}
.nav-cart-dropdown .ectdp_pincart {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-heading);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.nav-cart-dropdown .ectdp_pincart::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f07a";           /* shopping cart, matches trigger icon */
  color: var(--accent);
  margin-right: 0.4rem;
}
/* Empty state: centered icon + message instead of a bare line of text */
.nav-cart-dropdown .ectdp_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  padding: 1.1rem 0 0.6rem;
  text-align: center;
}
.nav-cart-dropdown .ectdp_empty::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f07a";
  font-size: 1.4rem;
  color: var(--border-strong);
}
.nav-cart-dropdown .ectdp_minicartitemName { color: var(--text-heading); }
.nav-cart-dropdown .ectMCtot { color: var(--accent-dark); font-weight: 600; }

/* Item rows only — never the intro/shipping/discount/total rows, which reuse
   the same bare .minicartcnt_dp class */
.nav-cart-dropdown .mcLNitems .minicartcnt_dp {
  border-radius: var(--radius);
  transition: background var(--transition);
}
.nav-cart-dropdown .mcLNitems .minicartcnt_dp:hover { background: var(--surface-alt); }

/* Shipping / discount lines */
.nav-cart-dropdown .ecHidDsc,
.nav-cart-dropdown .minicartcnt_dp:has(.ectMCship) {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.2rem 0;
}
.nav-cart-dropdown .minicartdsc { font-weight: 600; color: var(--text); }
.nav-cart-dropdown .mcMCdsct { color: var(--color-sale-text); font-weight: 600; } /* discount amount — sale/orange, not a plain price */
.nav-cart-dropdown .ectMCship { color: var(--text); font-weight: 600; }

.nav-cart-dropdown .ectdp_minicarttotal {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-heading);
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
.nav-cart-dropdown .ectdp_minicarttotal .ectMCtot {
  color: var(--accent-dark);
  font-size: 1.05rem;
}
.nav-cart-dropdown .ectdp_minicartImg { max-width: 56px; border-radius: 6px; border: 1px solid var(--border); }

/* Close / Checkout hierarchy — Checkout is the primary action, Close is ghost */
.nav-cart-dropdown .ectdp_minicartcontainer .minicartcnt_dp:has(.dpminicartcheckout) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0.6rem;
  border: none;
  padding: 0;
}
.nav-cart-dropdown .dpminicartcheckout.ectbutton { flex: 1; }
.nav-cart-dropdown .dpminicartclose.ectbutton {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.nav-cart-dropdown .dpminicartclose.ectbutton:hover { background: var(--surface-alt) !important; }
/* Delete icon — vendor's images/delete.png is a tiny generic stock glyph;
   hide it (kept clickable so the onclick handler still fires) and draw a
   themed FA trash icon in its place for visual consistency with the rest
   of the panel. */
.nav-cart-dropdown .ectdp_minicartitemDelete { position: relative; }
.nav-cart-dropdown .cartdelete { opacity: 0; }
.nav-cart-dropdown .ectdp_minicartitemDelete::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f2ed";           /* trash-can */
  color: var(--text-muted);
  position: absolute;
  top: 12px; right: 4px;
  pointer-events: none;
  transition: color var(--transition);
}
.nav-cart-dropdown .ectdp_minicartitemDelete:hover::before { color: var(--accent); }

/* Mobile controls (hidden on desktop) */
.nav-toggle, .mobile-icons { display: none; }
.mobile-icons a { color: #fff; font-size: 1.15rem; padding: 0.35rem; }
.nav-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; color: #fff; padding: 0.35rem;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(circle at 80% -10%, rgba(34,211,238,0.18), transparent 45%),
    linear-gradient(160deg, var(--brand-darker), var(--brand) 60%, var(--brand-light));
  color: #dbe6f2;
  position: relative;
  overflow: hidden;
}
/* Decorative-only texture + icon watermark, same visual language as the
   generated category/product placeholder art (soft diagonal grain + a large
   faint icon). Pure background layers on the ::before/::after of .hero
   itself — no new DOM nodes, so nothing here can interfere with real
   content or interactive elements (see the reverted-JS lesson above). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 2px, transparent 2px, transparent 26px);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -110px;
  width: 460px;
  height: 460px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M160%2080c0-35.3%2028.7-64%2064-64s64%2028.7%2064%2064l0%2048-128%200%200-48zm-48%2048l-64%200c-26.5%200-48%2021.5-48%2048L0%20384c0%2053%2043%2096%2096%2096l256%200c53%200%2096-43%2096-96l0-208c0-26.5-21.5-48-48-48l-64%200%200-48c0-61.9-50.1-112-112-112S112%2018.1%20112%2080l0%2048zm24%2048a24%2024%200%201%201%200%2048%2024%2024%200%201%201%200-48zm152%2024a24%2024%200%201%201%2048%200%2024%2024%200%201%201%20-48%200z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero h1 .hl { color: var(--brand-light); }
.hero-lead { font-size: 1.2rem; color: #c3d3e6; max-width: 34ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; }
.hero-badge { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: #aebfd4; }
.hero-badge i { color: var(--accent-light); }
.hero-visual { display: grid; gap: 1rem; }
.hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  backdrop-filter: blur(6px);
}
.hero-card h3 { color: #fff; margin-bottom: 0.35rem; }
.hero-card p { color: #b9c9dd; font-size: 0.92rem; margin: 0; }
.hero-card .hero-card-ico {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 0.9rem;
}

/* -------------------------------------------------------------------------- */
/* Feature grid / cards                                                        */
/* -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card .card-ico {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 1.1rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* Category tiles */
.cat-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-darker);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0) 35%, rgba(11,18,32,0.82));
}
.cat-tile .cat-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.1rem 1.25rem;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.cat-tile .cat-label i { color: var(--accent-light); transition: transform var(--transition); }
.cat-tile:hover .cat-label i { transform: translateX(4px); }

/* Steps (test-drive) */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 4.25rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--accent); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.step h3 { margin-bottom: 0.3rem; }
.step p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* Admin peek CTA */
.admin-peek {
  background:
    radial-gradient(circle at 15% 20%, rgba(22,119,255,0.22), transparent 40%),
    linear-gradient(140deg, var(--brand-darker), var(--brand));
  color: #dbe6f2;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.admin-peek h2 { color: #fff; }
.admin-peek ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.admin-peek li { display: flex; align-items: center; gap: 0.7rem; color: #c3d3e6; font-size: 0.95rem; }
.admin-peek li i { color: var(--accent-light); }
.admin-peek .admin-peek-cta { text-align: center; }
.admin-peek .admin-screen {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.admin-peek .admin-screen .bar { height: 10px; border-radius: 4px; background: rgba(255,255,255,0.16); margin-bottom: 0.6rem; }
.admin-peek .admin-screen .bar.accent { background: var(--accent); width: 55%; }
.admin-peek .admin-screen .bar.short { width: 70%; }
.admin-peek .admin-screen .bar.shorter { width: 40%; }

/* -------------------------------------------------------------------------- */
/* Page hero / breadcrumb for interior pages                                  */
/* -------------------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(circle at 85% 0%, rgba(22,119,255,0.2), transparent 45%),
    linear-gradient(150deg, var(--brand-darker), var(--brand));
  color: #dbe6f2;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-hero h1 { color: #fff; margin-bottom: 0.5rem; }
.page-hero p { color: #b9c9dd; max-width: 60ch; margin: 0; font-size: 1.05rem; }
.breadcrumb { font-size: 0.82rem; color: #9fb2c9; margin-bottom: 0.9rem; }
.breadcrumb a { color: #cdd9e8; }
.breadcrumb a:hover { color: var(--accent-light); }

/* Prose (static content pages) */
.prose { max-width: 820px; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; color: var(--brand); }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose a:hover { color: var(--brand-dark); }
.prose .lead { font-size: 1.15rem; color: var(--text); }

/* FAQ */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
  overflow: hidden;
  background: var(--surface-raised);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.35rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-heading);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent); font-size: 0.85rem; transition: transform var(--transition); }
.faq-item[open] summary::after { content: "\f068"; }
.faq-item .faq-body { padding: 0 1.35rem 1.2rem; color: var(--text-muted); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.contact-info .info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.contact-info .info-item i {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.contact-info .info-item h4 { margin: 0 0 0.15rem; }
.contact-info .info-item p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.form-field { margin-bottom: 1.15rem; }
.form-field label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.4rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-heading);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22,119,255,0.14);
}
.form-note { font-size: 0.82rem; color: var(--text-muted); }
.alert { padding: 0.9rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.92rem; }
.alert-success { background: #ecfdf3; color: var(--success); border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-darker);
  color: #a9bace;
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-col h4 {
  color: #fff; font-size: 0.95rem; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a { color: #a9bace; font-size: 0.92rem; }
.footer-col a:hover { color: var(--accent-light); }
.footer-brand .site-logo .logo-text { color: #fff; }
.footer-brand p { font-size: 0.9rem; color: #8ea3ba; margin: 1rem 0 1.25rem; max-width: 32ch; }
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: #cdd9e8;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.footer-social a:hover { background: var(--accent); color: #fff; }

/* Newsletter */
.footer-newsletter p { font-size: 0.9rem; color: #8ea3ba; line-height: 1.5; margin-bottom: 1rem; }
.footer-newsletter form { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-newsletter-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  width: 100%;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.footer-newsletter-input::placeholder { color: #7f95ad; }
.footer-newsletter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,119,255,0.2); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: #7f95ad;
}
.footer-bottom a { color: #a9bace; }
.footer-bottom a:hover { color: var(--accent-light); }
.footer-bottom .fb-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* -------------------------------------------------------------------------- */
/* ECT storefront wrapper (products / detail / cart / search render here)     */
/* -------------------------------------------------------------------------- */
.store-wrap { padding-block: clamp(2rem, 5vw, 3.5rem); min-height: 50vh; }
.store-wrap .container { display: block; }
/* Reduced top padding — the trust bar (below) already sits flush under the
   header, so this only needs to separate it from the actual page content,
   not recreate the header-to-content gap the trust bar was added to fill. */
.store-wrap { padding-top: clamp(1rem, 3vw, 1.5rem); }

/* Trust bar — shipping/returns/secure-checkout reassurance strip, included
   via trust-bar.php on the 5 storefront templates only (products,
   categories, proddetail, cart, search). Sits OUTSIDE .store-wrap's own
   padding, flush under the header, so it fills the header-to-content gap
   instead of adding to it. Kept compact — a reassurance strip, not a
   second hero. */
.trust-bar { margin-top: 0.85rem; }
.trust-bar-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 0.75rem;
  padding: 0.45rem var(--gutter);
}
/* Each item boxed as its own rectangle — same card language (border +
   radius) as the price/description/reviews boxes elsewhere on the page,
   rather than one flat shaded strip. */
.trust-item {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--text-muted); white-space: nowrap;
  background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
}
.trust-item i { color: var(--brand); font-size: 0.85rem; }
.trust-item strong { color: var(--text-heading); font-weight: 700; }
@media (max-width: 640px) {
  .trust-bar-inner { justify-content: flex-start; gap: 0.4rem 0.6rem; }
  .trust-item { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
}

/* -------------------------------------------------------------------------- */
/* ECT storefront: category grid (categories.php / vsadmin/inc/inccategories.php) */
/* -------------------------------------------------------------------------- */
div.categorymessage { color: var(--text-muted); margin: 0 0 1.2rem; }
div.catnavigation, div.navdesc {
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 1rem;
}
div.catnavigation a.ectlink { color: var(--text-muted); }
div.catnavigation a.ectlink:hover { color: var(--accent); }
div.catnavandcheckout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
div.allcatdiscounts, div.catdiscounts, div.allproddiscounts, div.proddiscounts {
  font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
  color: var(--color-sale-text); /* discount % — sale/orange, not a plain price */
}
div.discountsapply, div.eachcatdiscountsapply, div.eachproddiscountsapply { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; }

div.categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 0 0 2rem;
}
/* Real markup (usecsslayout=TRUE, confirmed against vsadmin/inc/inccategories.php):
   div.category > div.catimage + div.catname + div.catdesc — no hidden wrapper,
   so div.category itself can be the flex column. */
div.category {
  width: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
div.category:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
div.catimage {
  display: flex; align-items: center; justify-content: center;
  height: 180px; overflow: hidden; background: var(--surface-tile); border-radius: var(--radius);
}
div.catimage img { max-height: 90%; width: auto; object-fit: contain; transition: transform 0.5s ease; }
div.category:hover div.catimage img { transform: scale(1.05); }
div.catname {
  font-family: var(--font-head); font-weight: 700; color: var(--text-heading);
  margin-top: 0.85rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
div.catname a.ectlink { color: inherit; }
div.catname a.ectlink:hover { color: var(--accent); }
div.catdesc {
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-top: 0.4rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* ECT storefront: product grid (products.php / vsadmin/inc/incproductbody2.php) */
/*                                                                             */
/* This install's active layout is ectproductstyle=1 (Quick Buy), confirmed   */
/* via vsadmin/inc/incectstyle.php: $productpagelayout ends in "...,quickbuy" */
/* — NOT "...,options,addtocart". Each tile renders a "View Details" link     */
/* (div.detaillink) and a "Quick Buy" button (div.qbuybutton) that opens a    */
/* popup (div.qbopaque > div.qbuywrapper) re-rendering image/options/price/   */
/* add-to-cart for that one product. There is no inline div.addtocart on the  */
/* visible tile, so the equal-height/bottom-align technique targets           */
/* div.detaillink + div.qbuybutton instead.                                   */
/* -------------------------------------------------------------------------- */
div.catheader { font-family: var(--font-head); font-weight: 700; color: var(--text-heading); margin: 0 0 1rem; }
div.prodfilterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin: 0 0 1.5rem; padding: 0.85rem 1rem;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
div.prodfilter.filtertext { font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--text-muted); }
select.prodfilter {
  font-family: var(--font-body); font-size: 0.88rem; color: var(--text-heading);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
}

div.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0 0 2rem;
}
div.product {
  width: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
div.product:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
/* Confirmed in incproductbody2.php: every visible piece of the tile (image,
   name, description, detaillink, qbuybutton) prints inside an unclassed
   <form> that is div.product's only child. The form has to be the flex
   column too, or margin-top:auto below has nothing to push against. */
div.product > form {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
/* css/ectstyleproduct1.css lays the tile out as a floated 48%/52% two-column
   split (image left, everything else right) — flex items ignore "float" but
   NOT an explicit "width", so every piece kept its vendor half-width and (with
   no centering) sat pinned to the left edge instead of stacking full-width.
   Scoped to direct children of the form so it doesn't reach into the Quick
   Buy modal (div.qbuywrapper), which is nested deeper inside this same form
   and keeps its own intentional two-column float layout from
   ectstyleqbuy1.css. */
div.product > form > div.prodimage,
div.product > form > div.prodname,
div.product > form > div.proddescription,
div.product > form > div.prodmanufacturer,
div.product > form > div.prodsku,
div.product > form > div.prodid,
div.product > form > div.proddateadded,
div.product > form > div.prodinstock,
div.product > form > div.listprice,
div.product > form > div.prodprice,
div.product > form > div.prodrating,
div.product > form > div.prodcurrency,
div.product > form > div.detaillink,
div.product > form > div.addtocart,
div.product > form > div.qbuybutton,
div.product > form > div.outofstock,
div.product > form > div.configbutton {
  float: none;
  width: 100%;
}
div.prodimage {
  display: flex; align-items: center; justify-content: center;
  height: 190px; overflow: hidden; background: var(--surface-tile); border-radius: var(--radius);
}
div.prodimage { overflow: hidden; }
div.prodimage img, div.prodimage video { max-height: 90%; width: auto; object-fit: contain; transition: transform 0.5s ease; }
div.product:hover div.prodimage img { transform: scale(1.05); }
div.prodname {
  font-family: var(--font-head); font-weight: 700; color: var(--text-heading);
  margin-top: 0.85rem; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
div.prodname a.ectlink { color: inherit; }
div.prodname a.ectlink:hover { color: var(--accent); }
div.prodrating { margin: 0.3rem 0; }
div.prodinstock { color: var(--text-muted); font-size: 0.85rem; margin: 0.3rem 0; }
div.proddescription {
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0.4rem 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
div.listpricediv, div.listprice { color: var(--text-muted); text-decoration: line-through; font-size: 0.85rem; }
div.prodprice { color: var(--text-heading); font-weight: 700; font-size: 1.05rem; margin-top: 0.35rem; }
div.prodprice .prodpricelabel { display: none; }
div.prodcurrency { color: var(--text-muted); font-size: 0.85rem; }

/* View Details — pushed to the bottom of the card; secondary/outline so it
   reads as lower priority than the primary Quick Buy button below it. The
   button element itself carries the same "detaillink" class as its wrapper
   div (see incfunctions.php imageorbutton()), so these rules are scoped to
   the input/button type to avoid double-boxing the div wrapper. */
div.detaillink { margin-top: auto; padding-top: 0.75rem; }
/* input[type="button"].detaillink repeats the attribute-qualified selector
   so it beats ectcart.css's input[type="button"].ectbutton on specificity —
   same issue as the checkout button (see the Buttons section note above). */
input.detaillink, button.detaillink, input[type="button"].detaillink {
  display: block; width: 100%;
  background: transparent; color: var(--brand); border: 2px solid var(--border-strong);
}
input.detaillink:hover, button.detaillink:hover, input[type="button"].detaillink:hover { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }
div.qbuybutton { margin-top: 0.5rem; }
input.qbuybutton, button.qbuybutton { display: block; width: 100%; }
div.configbutton, div.outofstock { margin-top: auto; padding-top: 0.75rem; }
button.outofstock { width: 100%; }

/* Quick Buy popup — hidden via inline style="display:none"; displayquickbuy()
   in js/ectcart.js clears that inline style (sets it to ''), so this
   display:flex takes over once JS opens it. */
div.qbopaque {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11,18,32,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
div.qbuywrapper {
  position: relative;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
}
div.qbuywrapper div.prodimage { height: 220px; }
div.qbuywrapper div.scart.scclose {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-alt); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
div.qbuywrapper div.scart.scclose::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f00d"; color: var(--text-muted);
}
div.qbuywrapper div.scart.scclose:hover::before { color: var(--accent); }

/* -------------------------------------------------------------------------- */
/* ECT storefront: pagination                                                 */
/* Real markup is div.pagenumbers > span.pagebarnum/pagebarprevnext/          */
/* pagebarquo/pagebarsep — NOT the vendor-doc's "div.pagenums" (confirmed     */
/* against writepagebar() in vsadmin/inc/incfunctions.php).                   */
/* -------------------------------------------------------------------------- */
div.pagenumbers {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.35rem; margin: 2rem 0; font-family: var(--font-head);
}
div.pagenumbers a { text-decoration: none; }
span.pagebarnum, span.pagebarprevnext, span.pagebarquo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 0.6rem; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-weight: 600; font-size: 0.9rem; font-family: var(--font-head);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
div.pagenumbers a:hover span.pagebarnum,
div.pagenumbers a:hover span.pagebarprevnext,
div.pagenumbers a:hover span.pagebarquo { background: var(--accent); border-color: var(--accent); color: #fff; }
span.pagebarnum.currpage { background: var(--brand); border-color: var(--brand); color: #fff; }
span.pagebarsep { display: none; }

/* css/ectcart.css hardcodes a handful of vendor-default fonts on elements
   none of our other rules reach: FontAwesome as a body font (this install
   renders icons via Font Awesome 6 <i> tags from the CDN instead, so that's
   a leftover, not an icon glyph — safe to override everywhere), plus stray
   Arial/Verdana/Helvetica/sans-serif. Matched to the vendor's own selectors
   (span.pagebarquo above is the same fix) so ours wins on specificity+order:
   detail-page tabs, cart.php's checkout steps, the account/contact popup,
   the date-picker widget (date-type product options), the order-lookup
   badge, and the Square payment label at checkout. */
ul.TabbedPanelsTabGroup > li.TabbedPanelsTab { font-family: var(--font-head); }
div.cart1details, div.cart2details, div.cart3details { font-family: var(--font-body); }
div.ectsoftwrapper { font-family: var(--font-body); }
div.ectcalendar, table.ectcalselector, table.ectcalheader, table.ectcaldates { font-family: var(--font-body); }
div.ectclordcount { font-family: var(--font-body); }
.sq-label { font-family: var(--font-body); }

/* -------------------------------------------------------------------------- */
/* ECT storefront: cart page + multi-step checkout (cart.php /               */
/* vsadmin/inc/inccart.php). Real markup confirmed against inccart.php's     */
/* own print statements (showcartlines(), displaylistheader(),               */
/* displaydiscounts(), the subtotal/grandtotal/coupon block, cart2/cart3     */
/* billing+shipping+payment steps) — no prior recolor pass existed on this   */
/* site (only the font-family fix above), so this is a full pass, not an     */
/* extension. images/delete.png exists here, so the icon-fix technique from  */
/* the mini-cart prompt (hide + redraw) isn't needed.                        */
/* -------------------------------------------------------------------------- */

/* Billing/shipping/payment form fields (cart2/cart3 steps) — real markup
   confirmed against incproddetail's sibling `billformrow > .cobhl (label) +
   .cobll (field)` pattern in inccart.php's showbillingdetails-equivalent
   block: name/address/city/state/zip/phone/extra fields, plus payment
   provider radios. Generic control theming only — the label/field column
   widths (cobhl2/cobll2 % splits) are left as the vendor's own layout,
   not fought with a grid/flex rewrite. */
input.ecttextinput, select.ectselectinput {
  font-family: var(--font-body); font-size: 0.92rem; color: var(--text-heading);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 0.6rem 0.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input.ecttextinput:focus, select.ectselectinput:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,119,255,0.14);
}
input.ectcheckbox, input.ectradio { accent-color: var(--brand); width: 16px; height: 16px; vertical-align: middle; }
div.billformrow { margin-bottom: 0.9rem; }
div.cobhl { font-weight: 600; font-size: 0.88rem; color: var(--text-heading); }
label.ectlabel { color: var(--text-heading); }
span.redstar { color: var(--danger); }

/* Payment method radios — same selectable-card treatment as the shipping
   rows below, so choosing a payment method feels consistent with choosing
   a shipping method. */
label.ectlabel.cdformradio {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 1rem; margin-bottom: 0.5rem;
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
}
label.ectlabel.cdformradio:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

/* Card wrapper — one card per step (cart list, then customer details, then
   shipping/payment once you're past step 1), matching the product/category
   card language used everywhere else on the site. */
div.cartlistdiv.cartlistshop {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
div.cartlistdiv.cartlistshop div.ectdivhead {
  margin: 0; border: none; border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 0.9rem 1.1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
/* Numbered step badge — same visual language as the homepage "how to
   test-drive" step circles (.step::before), so the checkout doesn't invent
   a second badge style. Plain "&nbsp;" (no cartlistnumber==2) collapses to
   a small dot instead of an empty circle. */
div.checkoutstep {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
div.checkoutstep:empty,
div.checkoutstep:not(.checkoutstepof3) { width: 8px; height: 8px; background: var(--border-strong); }
div.cartname {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--text-heading); flex: 1;
}
div.cartlistimg { display: flex; align-items: center; }
div.cartlistimg img { width: 18px; height: 18px; opacity: 0.6; }
div.cartlistcontents { padding: 0.25rem 1.1rem 1.1rem; }

/* "Step X of 3" headings that print above the customer-details/shipping
   forms — otherwise bare vendor text with no visual weight. */
div.checkoutsteps {
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 0.75rem;
}

/* Column-label header row above the item list */
div.cartdetails_cntnr {
  display: flex; align-items: center; gap: 0.75rem;
  text-transform: uppercase; font-family: var(--font-head);
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem; margin-bottom: 0.25rem;
}

/* Item rows */
div.cartandoptsline { padding: 0.85rem 0; border-bottom: 1px solid var(--border); transition: background var(--transition); }
div.cartandoptsline:last-child { border-bottom: none; }
div.cartandoptsline:hover { background: var(--surface-alt); }
img.cartimage {
  width: 72px; height: 72px; object-fit: contain;
  background: var(--surface-tile); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px;
}
div.cartlinename { font-family: var(--font-head); font-weight: 700; color: var(--text-heading); }
div.cartlineprice, div.cartlinetotal { color: var(--text); font-weight: 600; }
div.cartlinetotal { color: var(--accent-dark); font-weight: 700; }
input.ecttextinput.cartquant {
  width: 3.2rem; text-align: center; font-family: var(--font-body); font-size: 0.92rem;
  color: var(--text-heading); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 0.4rem;
}
/* Line-item options (selected option group + value + price diff) */
div.cartoptionsline { font-size: 0.85rem; color: var(--text-muted); padding: 0.2rem 0 0.2rem 84px; }
div.cartoptiongroup { font-weight: 600; color: var(--text); }
div.ectwarning { color: var(--danger); }

/* Delete control — images/delete.png exists here, so it's only recolored
   via a hover/opacity treatment rather than hidden-and-redrawn. */
div.cartdelete { opacity: 0.55; transition: opacity var(--transition); }
div.cartdelete:hover { opacity: 1; }

/* Stock / backorder warnings */
div.cartstockbackorder_cntnr { margin-bottom: 1rem; }
div.cartoutstock {
  background: #fef2f2; border: 1px solid #fecaca; color: var(--danger);
  border-radius: var(--radius); padding: 0.75rem 1rem; text-align: center; font-weight: 600;
}
div.cartbackorder {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: var(--radius); padding: 0.75rem 1rem;
}

/* Discounts / loyalty points / subtotal / grand total / coupon */
div.cartdiscounts_cntnr, div.cartloyaltypoint_cntnr, div.cartsubtotal_cntnr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0; color: var(--text);
}
div.cartdiscountstext, div.cartsubtotaltext { color: var(--text-muted); }
div.cartdiscounts { color: var(--color-sale-text); font-weight: 700; } /* discount amount — sale/orange */
div.cartsubtotal { font-weight: 600; }
div.cartgrandtotal_cntnr {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 2px solid var(--border); margin-top: 0.5rem; padding-top: 0.85rem;
}
div.cartgrandtotaltext { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--text-heading); }
div.cartgrandtotal { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--accent-dark); }

div.cartcoupon_cntnr { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
div.cartcoupontext { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem; }
div.cartcoupon { display: flex; gap: 0.5rem; flex-wrap: wrap; }
div.cartcoupon input.ecttextinput.cpncart1 {
  flex: 1 1 auto; min-width: 160px; font-family: var(--font-body); font-size: 0.9rem;
  color: var(--text-heading); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 0.55rem 0.75rem;
}
div.cartcouponapplied { color: var(--success); font-weight: 700; }

div.sharecart { margin-top: 1rem; }

/* Empty-cart state */
div.emptycart {
  text-align: center; padding: 3.5rem 1.5rem;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
div.emptycart::before {
  content: "\f07a"; /* shopping cart — same glyph as the mini-cart trigger */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  display: block; font-size: 2.6rem; color: var(--border-strong); margin-bottom: 1rem;
}
div.sorrycartempty, div.emptycartemptylist {
  font-family: var(--font-head); font-size: 1.3rem; font-weight: 700;
  color: var(--text-heading); margin-bottom: 0.5rem;
}
div.cartemptyclickhere { color: var(--text-muted); }
div.cartemptyclickhere a { font-weight: 700; }

/* Step 2/3: shipping method rows — selectable "cards" instead of bare
   radio + text on one line. shipratemethodselected is the vendor's own
   "first/default option" class, reused here purely as a visual anchor. */
div.shiprateline, div.shipline {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.75rem 1rem; margin-bottom: 0.6rem;
  transition: border-color var(--transition), background var(--transition);
}
div.shiprateline:has(input:checked), div.shipline:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint);
}
span.shipratemethod { font-weight: 600; color: var(--text-heading); }
div.cart3servicecommitment { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.2rem; margin-left: 1.75rem; }
div.cart3shiphead { font-family: var(--font-head); font-weight: 700; color: var(--text-heading); margin-bottom: 0.5rem; }

/* Row rhythm on the billing/shipping (cart2) and payment/review (cart3)
   steps — otherwise bare label+field pairs with no vertical spacing system. */
div.cart3row { margin-bottom: 0.9rem; }
div.cart3row label.ectlabel { font-weight: 600; font-size: 0.88rem; color: var(--text-heading); }

/* -------------------------------------------------------------------------- */
/* Cart page redesign (Aug 18, 2026): simplified two-column layout — product   */
/* rows left, sticky order summary right, one dominant blue checkout CTA.      */
/* vsadmin/inc/inccart.php prints div.cartcontentsdiv > [stock/discount        */
/* warnings, div.cartdetails_cntnr, div.cartlineitems, div.cartshippingand-    */
/* totals, div.tofreeshipping, div.cartcheckoutbuttons, div.sharecart] as      */
/* flat siblings, same pattern as the product-detail hero grid above — no      */
/* vendor markup changes needed, just explicit grid-column placement.          */
/* js/cart-enhance.js additionally GROUPS the last four of those into one      */
/* new div.cart-order-summary wrapper (all still inside the same <form>, see   */
/* that file's header comment) so the whole panel can be one real sticky       */
/* element instead of several independently-sticky siblings fighting for the   */
/* same offset. If JS fails to load, the grid still lays the same elements     */
/* out in column 2 as separate (non-sticky, non-merged-card) blocks — a        */
/* strictly less-polished but fully functional fallback, never a broken one.   */
/* -------------------------------------------------------------------------- */
div.catnavigation { margin-top: 1rem; }

div.cartcontentsdiv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: 2rem;
  align-items: start;
}
div.carterror,
div.cartstockbackorder_cntnr,
div.pricechanged,
div.cartminquant_cntnr,
div.cartdetails_cntnr,
div.cartlineitems {
  grid-column: 1;
}
/* Fallback (no JS): the same four pieces still land in column 2 as loose
   blocks if div.cart-order-summary never gets created. */
div.cartshippingandtotals,
div.tofreeshipping,
div.cartcheckoutbuttons,
div.sharecart,
div.cart-order-summary {
  grid-column: 2;
}

/* Heading + item-count badge — js/cart-enhance.js splits the vendor's plain
   "Shopping Cart (3)" text into these two spans; CSS alone can't split a
   text node, so this rule only takes effect once that script has run (see
   its own header comment for why that's a safe, additive-only change). If
   JS fails, .cartname still renders as a big heading with plain "(3)" text
   inline — degraded but never blank. */
div.ectdivhead.cartlistcart {
  background: transparent;
  border-bottom: none;
  padding: 0.4rem 1.1rem 0.9rem;
  cursor: default;
}
div.ectdivhead.cartlistcart div.checkoutstep { display: none; }
div.ectdivhead.cartlistcart div.cartlistimg { display: none; } /* collapse arrow — page no longer needs the toggle affordance once the header reads as a plain heading */
div.ectdivhead.cartlistcart div.cartname {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--text-heading);
}
span.cart-count-badge {
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  color: var(--accent-dark); background: var(--brand-tint);
  border-radius: var(--radius-pill); padding: 0.3rem 0.8rem;
}
/* Clear Cart — de-emphasized plain-text link, pushed to the far right of the
   heading row so it reads as a secondary utility, never competing with the
   heading or the checkout CTA (added by js/cart-enhance.js). */
a.cart-clear-link {
  margin-left: auto; font-size: 0.82rem; font-weight: 600;
  color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--transition);
}
a.cart-clear-link:hover { color: var(--danger); }

/* Order summary panel — one sticky card. Merges the four grouped pieces
   (totals/coupon, free-shipping nudge, checkout button, share cart) into a
   single visual block by giving the wrapper the card chrome and stripping
   any of its own from the pieces inside. */
div.cart-order-summary {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.25rem 1.5rem;
}
div.cart-order-summary::before {
  content: "Order Summary";
  display: block; margin: 0 0 1rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
  color: var(--text-heading);
}
div.cart-order-summary div.cartshippingandtotals { margin: 0; }
div.cart-order-summary div.cartcheckoutbuttons { margin-top: 1rem; }
div.cart-order-summary div.sharecart { margin-top: 0.75rem; }

/* Free-shipping emphasis — vendor prints "Free" as plain text in
   div.shippingtotal once the threshold is met (see the estimator logic in
   inccart.php); style it to stand out instead of reading like any other
   line-item amount. */
div.shippingtotal_cntnr { color: var(--text); }
div.shippingtotal { font-weight: 700; }
/* CSS can't match on text content — js/cart-enhance.js adds .is-free to
   div.shippingtotal when the vendor's own text is exactly the localized
   "Free" string (see its own header comment for why that's a safe,
   additive-only class toggle). Plain bold text above is the fallback if JS
   doesn't run. */
div.shippingtotal.is-free { color: var(--success); }

/* Free-shipping nudge banner ("Add $12.50 more for free shipping"),
   div.tofreeshipping — printed only while the threshold hasn't been met
   yet, i.e. exactly opposite div.shippingtotal showing "Free" above, so
   the two states are naturally mutually exclusive with no extra markup. */
div.tofreeshipping {
  margin: 0.85rem 0 0; padding: 0.7rem 0.9rem;
  background: var(--brand-tint); border: 1px solid var(--brand);
  border-radius: var(--radius); color: var(--brand-dark);
  font-size: 0.85rem; font-weight: 600; text-align: center;
}

/* Checkout button — the single dominant CTA on the page. .ectbutton already
   carries the brand-blue fill/hover lift from the base button rules above;
   this just makes the checkout instance full-width and taller so it reads
   as the obvious next step next to the smaller Continue Shopping/Clear Cart
   links. */
div.cartcheckoutbuttons input.ectbutton.checkoutbutton1,
div.cartcheckoutbuttons button.ectbutton.checkoutbutton1 {
  width: 100%; height: 52px; font-size: 1.0625rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(22,119,255,0.35);
}

/* Quantity steppers — added by js/cart-enhance.js around the existing
   input.cartquant (never reparented, just wrapped with sibling buttons
   inside its own existing div.cartlinequant). Degrades to the plain text
   input alone if JS doesn't run. */
div.cartlinequant.qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  overflow: hidden;
}
div.cartlinequant.qty-stepper input.ecttextinput.cartquant {
  border: none; border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong); border-radius: 0;
  width: 2.75rem;
}
button.qty-btn {
  width: 1.9rem; border: none; background: var(--surface-alt);
  color: var(--text-heading); font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
button.qty-btn:hover { background: var(--brand-tint); color: var(--brand-dark); }

/* Continue Shopping — cart.php's own markup, printed after inccart.php's
   output. Only relevant when the cart has items; hidden on the empty-cart
   state, which already prints its own vendor "Continue Shopping" button
   inside div.emptycartcontinue. */
div.cart-continue-shopping-row { margin-top: 1.25rem; }
.container:has(div.emptycart) div.cart-continue-shopping-row { display: none; }
a.cart-continue-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--text-heading);
  transition: color var(--transition);
}
a.cart-continue-link:hover { color: var(--brand); }
a.cart-continue-link i { color: var(--brand); font-size: 0.85rem; }

@media (max-width: 900px) {
  div.cartcontentsdiv { grid-template-columns: 1fr; }
  div.cartshippingandtotals, div.tofreeshipping, div.cartcheckoutbuttons,
  div.sharecart, div.cart-order-summary { grid-column: 1; }
  div.cart-order-summary { position: static; margin-top: 1.25rem; }
}

/* -------------------------------------------------------------------------- */
/* ECT storefront: product detail (proddetail.php / vsadmin/inc/incproddetail.php) */
/*                                                                             */
/* Full-width two-column hero (image left / buy-box right). This site's       */
/* $detailpagelayout (vsadmin/includes.php) is:                               */
/*   navigation, productname, discounts, productimage, listprice, price,      */
/*   options, instock, addtocartquant, description, previousnext,            */
/*   quantitypricing, reviews, reviewstars, reviewstarslarge, searchwords,    */
/*   shortdescription, sreviews                                              */
/* incproddetail.php prints these as flat siblings of #mainbodyspan.proddetail*/
/* > form#ectform0 with no shared row wrapper, so the hero is built with CSS  */
/* Grid: explicitly place navigation/name/image/buy-box fields, then let      */
/* everything else (description onward) auto-place as full-width rows below  */
/* in the vendor's own DOM order.                                            */
/* -------------------------------------------------------------------------- */
div.proddetail { padding: 0.5rem 0 2rem; position: relative; }

/* Dress-up pass (Aug 15, 2026): the plain-white detail page got a soft
   background wash + decorative accent behind the whole hero so the white
   image/description cards actually read as cards instead of blending into
   the page. Scoped to body.page-proddetail (set in proddetail.php) so it
   never touches products/categories/cart/search, which share .store-wrap. */
body.page-proddetail .store-wrap {
  background:
    radial-gradient(circle at 12% 0%, rgba(22,119,255,0.07), transparent 42%),
    linear-gradient(180deg, var(--surface-alt) 0%, var(--surface-alt) 420px, var(--surface) 420px);
}

/* Back to a plain CSS Grid over the vendor's own flat siblings — no DOM
   manipulation of any kind on this page (see js/site-enhance.js's header
   comment: an earlier version wrapped these elements via JS for a unified
   outline and that broke the option selects / add-to-cart button). */
#mainbodyspan.proddetail > form#ectform0 {
  display: grid;
  grid-template-columns: 58% 42%;
  column-gap: 32px;
  row-gap: 0.85rem;
  align-items: start;
  position: relative;
}

/* Breadcrumb strip — plain (no border/card), tight to the hero below it.
   Inherits display:flex/align-items:center from the shared
   div.catnavandcheckout rule (categories/products pages) — but that alone
   doesn't vertically center the breadcrumb against the checkout button
   unless the breadcrumb's own bottom margin (set generally further up,
   for the stacked category-page case) is zeroed here too, since
   align-items:center centers each child's full margin box. */
div.catnavandcheckout.catnavdetail {
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 0.2rem !important;
}
div.catnavandcheckout.catnavdetail div.catnavigation { margin: 0; line-height: 1.2; }
/* Title moved into the buy column, right above the price (was full-width
   above the hero) — see the "order" scheme below div.detailoptions for why
   it needs order:1 (always first in the buy column; title is never
   conditional, unlike discounts/listprice) and why the image's own
   grid-row shifted from row 3 to row 2 to make room for it. */
div.detailname { grid-column: 2; margin: 0 0 0.3rem !important; position: relative; z-index: 1; order: 1; }
div.detailname h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }

/* Unified hero panel: ONE border/shadow around the product image + the
   entire buy column (price/availability/options/qty/add-to-cart), drawn
   via a positioned ::before rather than a real wrapping <div> — wrapping
   these vendor elements in a new DOM element previously broke the option
   selects and Add to Cart button (see js/site-enhance.js's header comment
   and js/product-stock.js's), because vendor inline JS depends on the
   original flat sibling structure. A position:absolute pseudo-element can
   still be sized/positioned by the SAME grid lines as a normal grid item
   (grid-column/grid-row on an absolutely-positioned grid child sizes it to
   that grid area without it taking up track space or entering
   auto-placement) — so this stays pure CSS, no DOM change.
   z-index:0 + pointer-events:none keeps it purely decorative and behind
   the real content; every element inside the framed area gets
   position:relative + z-index:1 below so paint order never depends on
   default stacking context edge cases.
   Row math (desktop): nav is now the ONLY order:0 full-width item → row 1.
   Image is explicit at row 2 (col 1). Title/price/availability/options/cart
   are auto-placed into col 2 starting row 2 (title, order:1, is always
   present so it reliably lands right at the image's top) through row 6 —
   5 rows, matching the image's own `span 5`. Mobile is DIFFERENT: image
   loses its explicit position at ≤980px (reset to auto, single column), so
   it becomes one more sequential row ahead of title/price/etc rather than
   sharing their row range — needs its own `span 6` override, see the
   ≤980px media query. If a product prints BOTH discounts and a list price
   at once, the panel can fall one row short on either breakpoint (existing,
   accepted limitation — same one already noted below for the image's own
   span). */
#mainbodyspan.proddetail > form#ectform0::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2 / span 5;
  position: absolute;
  inset: -1rem -0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  z-index: 0;
  pointer-events: none;
}

/* Image sits inside the unified panel above — its own tint + padding gives
   the photo breathing room and a soft gradient wash, but no separate
   border/shadow of its own (that would double up with the panel border).
   Deliberately NOT position:sticky (tried and reverted per Frank's
   feedback). isolation:isolate keeps any MagicZoom/slideshow internals
   from stacking above the sticky header (see the source prompt's Step 9). */
div.detailimage.allprodimages {
  grid-column: 1; grid-row: 2 / span 5; isolation: isolate;
  position: relative; z-index: 1;
  background:
    radial-gradient(circle at 100% 0%, rgba(22,119,255,0.06), transparent 55%),
    var(--surface-tile);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-sizing: border-box;
}

/* Buy column: NO per-field padding/card treatment — the source prompt for
   this page (ECT Products Detail Layout on Full Page Width.md, Step 3) is
   explicit that ad hoc per-field spacing compounds unevenly and the grid's
   own row-gap should be the only source of vertical rhythm. An attempt to
   pad each field to visually "fit" inside a separate decorative outline
   broke alignment (price no longer lined up with the rest of the column) —
   reverted. discounts/listprice are CONDITIONAL (pdddiscounts()/
   pddlistprice() print nothing for a plain product — the common case) so
   no explicit grid-row here; Grid auto-packs whichever fields actually
   print into the earliest open row of column 2, in DOM order, so an
   absent field never leaves a dead gap. */
div.detaildiscounts, div.detaillistprice, div.listpricediv.detaillistprice,
div.detailprice, div.detailoptions, div.detailinstock, div.addtocartquant.detailaddtocartquant {
  grid-column: 2;
  margin: 0 !important;
  position: relative; z-index: 1; /* paint above the unified panel's ::before */
}
/* Visual order inside the buy column (per the brief: Price → Availability →
   Options → Quantity/Add to Cart), independent of $detailpagelayout's raw
   DOM order (price, options, instock, addtocartquant). `order` reflows grid
   auto-placement without touching grid-row, so conditional fields
   (discounts/listprice) still just vanish cleanly when absent instead of
   leaving a dead row (the documented failure mode in the source prompt). A
   subtle top divider + extra margin ahead of Options reads as a deliberate
   break between the "what/how much" cluster (price, availability) and the
   "how many, buy it" cluster (options, qty, cart), instead of one dense
   stack. */
div.detaildiscounts { order: 2; }
div.detaillistprice, div.listpricediv.detaillistprice { order: 3; }
div.detailprice { order: 4; }
div.detailinstock { order: 5; }
div.detailoptions {
  order: 6; margin-top: 0.6rem !important; padding-top: 0.6rem !important;
  border-top: 1px solid var(--border);
}
div.addtocartquant.detailaddtocartquant { order: 7; margin-top: 0.4rem !important; }

/* order:7+ here is REQUIRED, not decorative — `order` on the buy-column
   fields above (order:1-6) reorders auto-placement for the ENTIRE grid, not
   just column 2. Left at the default order:0, these full-width fields would
   sort BEFORE the order:1-6 buy-column items and steal the early rows,
   shoving price/options/add-to-cart to the bottom of the page (confirmed
   live — this shipped broken once already). Every auto-placed field in this
   grid must carry an explicit order higher than the buy column's highest
   (6) so the buy box always wins the early rows. */
div.detaildescription, div.detailshortdescription { grid-column: 1 / -1; order: 8; }
/* $detailpagelayout (vsadmin/includes.php) prints BOTH "description" and
   "shortdescription" tokens, and on this catalog's data both fields hold
   the exact same text per product (confirmed live) — styling both as
   separate cards showed the same paragraph twice. div.detaildescription is
   the long/canonical field; hide the short one on this page rather than
   removing the token (which would need a vsadmin edit) or guessing which
   products might someday have genuinely different short vs. long copy. */
div.detailshortdescription { display: none; }

/* Leftover fields (previousnext, quantitypricing, reviews, reviewstars,
   reviewstarslarge, searchwords, sreviews) — no explicit grid-row, Grid
   auto-places them full-width below the hero in the vendor's DOM order
   (preserved here via ascending order values, all > 6 — see comment above). */
div.previousnext { grid-column: 1 / -1; order: 10; }
div.detailquantpricingwrap { grid-column: 1 / -1; order: 9; }
div.reviews#reviews { grid-column: 1 / -1; order: 11; }
div.largereviewstars.detailreviewstars, div.smallreviewstars.detailreviewstars {
  grid-column: 1 / -1; order: 12;
}

div.detailid, div.detailsku, div.detailmanufacturer {
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 0.3rem 0;
}
div.discountsapply.detaildiscountsapply, div.detaildiscounts { color: var(--color-sale-text); font-weight: 600; font-size: 0.85rem; } /* discount % — sale/orange */
div.detailinstock {
  margin: 0 !important;
  display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content;
  color: var(--success); font-weight: 700; font-size: 0.85rem;
  background: #ecfdf3; border: 1px solid #bbf7d0;
  border-radius: var(--radius); padding: 0.35rem 0.8rem;
}
div.detailinstock::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem;
}
/* Green + checkmark is the DEFAULT now — the plain vendor-printed badge
   ("In Stock 500", no options) is the common case and should read as a
   confident status signal, not neutral gray. State modifiers below are for
   js/product-stock.js's live per-option badge — that script only ever adds
   a new div.detailinstock or mutates one in place (see its own header
   comment), never moves/reparents anything else — and override the base
   green only while the shopper hasn't picked a stocked option yet, or
   picked one with none left. */
div.detailinstock.detailoptionstock-prompt {
  color: var(--text-muted); background: var(--surface-alt); border-color: var(--border);
}
div.detailinstock.detailoptionstock-prompt::before { content: none; }
div.detailinstock.detailoptionstock-out {
  color: var(--danger); background: #fef2f2; border-color: #fecaca;
}
div.detailinstock.detailoptionstock-out::before { content: "\f00d"; }
div.detaildescription, div.detailshortdescription {
  color: var(--text); line-height: 1.7;
  margin: 2.5rem 0 0.75rem;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
}
/* Product descriptions are admin-authored WYSIWYG HTML (the platform
   explicitly supports p/h2/h3/ul/ol/li/strong/a/table/img in there) — style
   the raw elements so any product's description reads cleanly, not just
   plain paragraph text. max-width caps line length for readability without
   shrinking the card itself. */
div.detaildescription p, div.detailshortdescription p { margin: 0 0 1em; max-width: 68ch; }
div.detaildescription h2, div.detailshortdescription h2,
div.detaildescription h3, div.detailshortdescription h3 {
  font-family: var(--font-head); color: var(--text-heading); font-weight: 700;
  margin: 1.5em 0 0.5em; line-height: 1.3;
}
div.detaildescription h2, div.detailshortdescription h2 { font-size: 1.3rem; }
div.detaildescription h3, div.detailshortdescription h3 { font-size: 1.1rem; }
div.detaildescription ul, div.detailshortdescription ul,
div.detaildescription ol, div.detailshortdescription ol {
  margin: 0 0 1em; padding-left: 1.4em; max-width: 68ch;
}
div.detaildescription li, div.detailshortdescription li { margin: 0.3em 0; }
div.detaildescription strong, div.detailshortdescription strong { color: var(--text-heading); font-weight: 700; }
div.detaildescription a, div.detailshortdescription a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
div.detaildescription a:hover, div.detailshortdescription a:hover { color: var(--brand-dark); }
div.detaildescription img, div.detailshortdescription img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 0.5em 0; }
div.detaildescription table, div.detailshortdescription table {
  width: 100%; border-collapse: collapse; margin: 0.75em 0 1.25em; font-size: 0.92rem;
}
div.detaildescription th, div.detaildescription td,
div.detailshortdescription th, div.detailshortdescription td {
  border: 1px solid var(--border); padding: 0.5em 0.75em; text-align: left;
}
div.detaildescription th, div.detailshortdescription th {
  background: var(--surface-alt); font-weight: 700; color: var(--text-heading);
}
/* Embedded iframes (e.g. a YouTube embed pasted into the WYSIWYG editor)
   ship hardcoded pixel width/height attributes the site's usual
   img{max-width:100%} reset doesn't cover — force a responsive 16:9 box so
   they can't force the whole page into horizontal scroll on mobile. */
div.detaildescription iframe, div.detailshortdescription iframe {
  width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9;
}
div.detaillistprice, div.listpricediv { color: var(--text-muted); text-decoration: line-through; }
/* Price is the single strongest visual moment in the buy column — bumped up
   in scale and given brand color instead of plain heading-dark text, so it
   reads as "the number that matters" rather than blending into body copy.
   No card treatment of its own (background/border/shadow) — it now sits
   inside the unified hero panel (see the ::before above div.detailimage),
   and a second nested card here would double up borders. */
div.detailprice {
  color: var(--accent-dark); font-weight: 800; font-size: 2.1rem;
  letter-spacing: -0.01em;
}
div.detailprice .prodpricelabel { display: none; }
div.detailcurrency { color: var(--text-muted); font-size: 1rem; font-weight: 600; }

div.detailoptions div.optiontext:first-child { margin-top: 0; }

div.detailquantity { display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0; }
div.detailquantitytext { font-weight: 600; color: var(--text-heading); font-size: 0.9rem; }
div.addtocart.detailaddtocart { flex: 1 1 auto; }
div.addtocartquant.detailaddtocartquant {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
/* Add to Cart is the single most important click on the page — generous
   height/weight, plus a hover lift and a compressed "pressed" state so it
   reads as a real, responsive button rather than a flat template one. */
input.ectbutton.detailbuybutton, button.ectbutton.detailbuybutton {
  height: 52px; width: 100%;
  font-size: 1.0625rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(22,119,255,0.35);
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}
input.ectbutton.detailbuybutton:hover, button.ectbutton.detailbuybutton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(22,119,255,0.4);
}
input.ectbutton.detailbuybutton:active, button.ectbutton.detailbuybutton:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(22,119,255,0.3);
}
div.detailnotifystock, div.detailoutofstock { color: var(--text-muted); margin: 0.75rem 0; }
/* Prev/Next: a subtle top divider makes it read as an intentional
   wayfinding footer rather than raw template text floating below the
   description card. */
div.previousnext {
  margin: 2rem 0; padding-top: 1.25rem; text-align: center;
  border-top: 1px solid var(--border);
  display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
}
div.previousnext a.ectlink {
  color: var(--brand); font-weight: 700; border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
div.previousnext a.ectlink:hover { color: var(--brand-dark); border-color: var(--brand-dark); }

/* Reviews section: card treatment (matches the description card language)
   plus a heading and a de-emphasized "write a review" button — the vendor
   markup has no built-in heading or wrapper styling for div.reviews#reviews. */
div.reviews#reviews {
  scroll-margin-top: calc(var(--header-h, 0px) + 1rem);
  margin-top: 1.5rem;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
div.reviews#reviews::before {
  content: "Customer Reviews";
  display: block; margin: 0 0 1rem;
  font-family: var(--font-head); font-size: 1.375rem; font-weight: 800; color: var(--text-heading);
}
div.reviews div.noreview { color: var(--text-muted); margin: 0 0 1rem; }
div.reviews div.clickreview button.ectbutton {
  background: transparent; border: 2px solid var(--accent); color: var(--accent-dark);
  transition: background-color var(--transition), color var(--transition);
}
div.reviews div.clickreview button.ectbutton:hover { background: var(--accent); color: #fff; }

/* Star-rating badge links to #reviews (pddreviewstars() wraps only the
   star icons in <a>, not the avg/count text — see full-width prompt notes). */
div.largereviewstars.detailreviewstars > a[href*="#reviews"],
div.smallreviewstars.detailreviewstars > a[href*="#reviews"] { cursor: pointer; }

/* -------------------------------------------------------------------------- */
/* ECT storefront: option dropdowns (listing quick-buy popup + detail page)   */
/* Real markup (vsadmin/inc/incfunctions.php displayproductoptions(),         */
/* optType select branch): div.optioncontainer > div.optiontext + div.option */
/* > select.prodoption — detail page adds "detailoption"/"detailprodoption".  */
/* div.option/div.detailoption are plain full-width divs while the <select>  */
/* only takes its own intrinsic width, so both need an explicit shared box    */
/* or the custom arrow floats away from the control.                         */
/* -------------------------------------------------------------------------- */
div.optiontext { font-weight: 600; font-size: 0.85rem; color: var(--text-heading); margin: 0.75rem 0 0.3rem; }
div.option, div.detailoption { position: relative; display: inline-block; width: 100%; max-width: 320px; }
select.prodoption, select.detailprodoption {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text-heading); font-family: var(--font-body); font-size: 0.92rem;
  padding: 0.55rem 2.1rem 0.55rem 0.75rem;
  cursor: pointer; width: 100%; box-sizing: border-box;
}
div.option::after, div.detailoption::after {
  content: ""; position: absolute; right: 0.9rem; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
select.prodoption:focus, select.detailprodoption:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,119,255,0.14);
}
input.ecttextinput.quantity0input, input.ecttextinput.detailquantity0input {
  width: 3.5rem; text-align: center; font-family: var(--font-body); font-size: 0.92rem;
  color: var(--text-heading); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 0.5rem 0.4rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input.ecttextinput.quantity0input:focus, input.ecttextinput.detailquantity0input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,119,255,0.14);
}
/* Detail page only (not the listing/cart quantity boxes, which stay their
   own compact size) — match the Add to Cart button's own 52px height so the
   two controls in div.addtocartquant.detailaddtocartquant read as one
   deliberate control cluster instead of two mismatched heights. */
input.ecttextinput.detailquantity0input {
  height: 52px; width: 4.25rem; box-sizing: border-box; font-size: 1rem; font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Vendor color leaks — css/ectstyleproduct1.css / css/ectstyledetails1.css   */
/* (the active product/detail layout variants per incectstyle.php) hardcode a */
/* handful of one-off vendor blues/oranges that aren't reached by any of the  */
/* selectors above. Same specificity as the vendor rule in each case, so      */
/* cascade order (this file loads after) is enough to win — no !important.   */
/* -------------------------------------------------------------------------- */
span.yousave { background: var(--color-sale); color: #fff; border-radius: var(--radius); padding: 2px 8px; }
input.askaquestion, input.emailfriend { background: var(--accent); }
input.askaquestion:hover, input.emailfriend:hover { background: var(--accent-dark); }
hr.review { border-color: var(--border); }
div.reviewprod { background-color: var(--surface-alt); }
/* css/ectcart.css (vendor) leaks, same pattern as above */
div.largereviewstars svg.icon, div.smallreviewstars svg.icon { fill: var(--brand); }
div.origprice { color: var(--text-muted); }
div.quantity2div > div:hover { color: var(--brand); }
span.sccartdscnt { color: var(--color-sale-text); }
/* css/ectstylebase.css (vendor) leaks — global internal-link hover + cross-sell */
a.ectlink:hover { color: var(--brand-dark); }
div.csprodname a:hover { color: var(--brand-light); }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .admin-peek { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Product detail hero: collapse to one column — re-list every field
     explicitly placed above, or it silently keeps its desktop grid-row. */
  #mainbodyspan.proddetail > form#ectform0 { grid-template-columns: 1fr; }
  div.catnavandcheckout.catnavdetail, div.detailname, div.detailimage.allprodimages,
  div.detaildiscounts, div.detaillistprice, div.listpricediv.detaillistprice,
  div.detailprice, div.detailoptions, div.detailinstock, div.addtocartquant.detailaddtocartquant,
  div.detaildescription, div.detailshortdescription {
    grid-column: 1; grid-row: auto;
  }
  /* Image loses its explicit desktop position above (reset to auto here),
     so it becomes one more sequential single-column row ahead of title/
     price/etc instead of sharing their row range — the hero panel needs
     one extra row of span versus the desktop rule (span 5 → span 6). */
  #mainbodyspan.proddetail > form#ectform0::before { grid-row: 2 / span 6; }
  div.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* Mobile header: hamburger (left) · logo (center) · icons (right) */
  .site-header .container { gap: 0.75rem; }
  .nav-toggle { display: inline-flex; order: 1; }
  .site-logo { order: 2; margin-inline: auto; }
  .site-logo img, .site-logo svg { height: 80px; } /* wide wordmark — full 130px is too tall next to the hamburger/icon rows on mobile */
  .mobile-icons { display: flex; align-items: center; gap: 0.25rem; order: 3; }

  #main-nav {
    order: 4;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0.75rem var(--gutter) 1.25rem;
    display: none;
  }
  #main-nav.open { display: flex; }
  .nav-menu-links { flex-direction: column; align-items: stretch; width: 100%; gap: 0.15rem; }
  .nav-menu-links a { padding: 0.75rem 0.5rem; color: var(--text-heading); }
  .nav-menu-links a:hover,
  .nav-menu-links a.is-active { color: var(--brand); background: var(--brand-tint); }
  /* Cart lives in the mobile icon bar instead of the desktop nav */
  #main-nav .nav-cart-dropdown { display: none !important; }

  .util-bar .util-note { display: none; }
  .util-bar .container { justify-content: flex-end; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  div.products { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .util-search { width: 100%; }
  .util-bar-right { width: 100%; }
  .util-bar .util-link span { display: none; }  /* icons only on phones */
  /* .search-suggest-results has no width rule — left:0/right:0 already
     tracks .util-search-wrap's width at any viewport size. */

  /* Cart/checkout: the vendor's row layout relies on inline-block + fixed/
     percentage widths tuned for desktop. Minimal additive stacking rather
     than a grid/flex rewrite of vendor layout (see the cart styling
     prompt's rationale) — column labels are redundant once stacked. */
  div.cartdetails_cntnr { display: none; }
  div.cartline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
  div.cartlineid { width: 72px !important; flex: 0 0 auto; }
  div.cartlinenameprice { flex: 1 1 auto; width: auto !important; }
  div.cartlinequanttotal { width: 100% !important; justify-content: space-between; }
  div.cartoptionsline { padding-left: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
  .cat-tile:hover img { transform: none; }
  div.category:hover, div.product:hover { transform: none; }
  div.product:hover div.prodimage img, div.category:hover div.catimage img { transform: none; }
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-header-navy); }
}