/*
Theme Name: DigiSphereX Store
Description: A professional, mobile-first WooCommerce storefront for battery and accessory shops. Fast, secure and multilingual (EN/DE/AR) with built-in SEO schema, WebP-ready imagery, localisation, payment, legal and order-email modules — theme-options driven and translation-ready. Upgradeable description on the Theme Options > General tab.
Author: DigiSphereX
Version: 1.2.141
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: digispherex
*/

:root {
  --at-blue: #0b5cab;
  --at-blue-dark: #094a8a;
  --at-navy: #10365e;
  --at-dark: #0c2947;
  --at-orange: #f68b1f;
  --at-orange-dark: #dd7708;
  /* Primary action fill is the vivid brand orange, with NEAR-BLACK ink.
     Measured 2026-10-03: #111827 on #f68b1f is 7.29:1 (WCAG AAA) and
     5.96:1 on the #e07c12 hover - both above the 4.5:1 AA floor for normal
     body text. White on that same orange is 2.43:1, which is exactly why this
     file used to carry a second, browner fill (#b35c00 / #8f4900, 4.72:1)
     that visibly drifted from the accent the brand actually uses.
     --at-orange stays #f68b1f for purely decorative work (underlines, icon
     accents, section rules, the star fill, the glow); --at-fill now points at
     that same value for anything that carries ink. One orange, one look. */
  --at-fill: #f68b1f;
  --at-fill-hover: #e07c12;
  --at-fill-ink: #111827;
  --at-bg: #f4f7fb;
  --at-line: #e2e9f2;
  --at-text: #22303f;
  --at-muted: #5c6c7d;
  --at-green: #1e9e4a;
  --at-radius: 10px;
  --at-shadow: 0 6px 24px rgba(16, 54, 94, 0.08);

  /* Surfaces used by cards/panels. Kept separate from --at-bg (the page
     canvas) so a card can be lifted off the page in either theme. */
  --at-card-bg: #fff;
  --at-text-primary: #22303f;

  /* Filled-star shape used as a CSS mask by the aggregate rating renderer.
     Five stars as one path, filled, so it can be clipped to a percentage
     width for a genuine fractional average. Encoded inline (single quotes and
     # left unescaped inside the url()) to stay valid in a custom property. */
  --at-star-mask: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'><path d='M11 1.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L11 16.4 5.2 19.5l1.1-6.5L1.6 8.4l6.5-.9zM33 1.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L33 16.4 27.2 19.5l1.1-6.5-4.7-4.6 6.5-.9zM55 1.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L55 16.4 49.2 19.5l1.1-6.5-4.7-4.6 6.5-.9zM77 1.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L77 16.4 71.2 19.5l1.1-6.5-4.7-4.6 6.5-.9zM99 1.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L99 16.4 93.2 19.5l1.1-6.5-4.7-4.6 6.5-.9z'/></svg>");
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Horizontal overflow guard. The nav row is contained by its own
     scroller (see .at-nav .container), so this is a backstop: it
     guarantees no element — past or future — can widen the document
     and make a phone shrink-to-fit and zoom the whole site out.
     `clip` rather than `hidden` on purpose: `hidden` on the root
     creates a scroll container and breaks `position: sticky` on the
     header, while `overflow-x: clip` clips with no such side effect. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--at-text);
  background: #fff;
  line-height: 1.55;
  font-size: 15px;
}

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

a { color: var(--at-blue); text-decoration: none; }
a:hover { color: var(--at-blue-dark); }

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 16px;
}

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute !important; word-wrap: normal !important;
}

.skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto;
  position: absolute !important; top: 4px; inset-inline-start: 4px;
  background: #fff; padding: 8px 14px; z-index: 100000; border-radius: 6px;
}

/* ---------- Top bar ---------- */
.at-topbar {
  background: var(--at-dark);
  color: #cfe0f2;
  font-size: 12.5px;
}
.at-topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 34px; gap: 16px;
}
.at-topbar-contact { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; min-width: 0; }
.at-topbar-contact a,
.at-topbar-contact > span { color: #e8f0f9; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.at-topbar-contact a:hover { color: #fff; }
.at-topbar-contact svg { color: var(--at-orange); flex: none; }
.at-topbar-contact .at-topbar-wa { font-weight: 600; }

/* hover caption for the top-bar contact items (CSS only, no JS).
   The top bar is dark in both colour modes, so one dark bubble is correct
   for light mode and dark mode alike. */
.at-tb-item[data-tip]::after {
	content: attr(data-tip);
	position: absolute; bottom: calc(100% + 10px); left: 50%;
	transform: translateX(-50%) translateY(5px);
	background: #0a1a2e; color: #e9f2fc;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 8px; padding: 6px 11px;
	font-size: 11.5px; font-weight: 600; line-height: 1.35; letter-spacing: .01em;
	white-space: nowrap; text-transform: none;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	box-shadow: 0 10px 26px rgba(0,0,0,.34);
	z-index: 60;
}
.at-tb-item[data-tip]:hover::after,
.at-tb-item[data-tip]:focus-visible::after {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.at-tb-item[data-tip]::before {
	content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%;
	transform: translateX(-50%) translateY(5px) rotate(45deg);
	width: 8px; height: 8px; background: #0a1a2e;
	border-right: 1px solid rgba(255,255,255,.16);
	border-bottom: 1px solid rgba(255,255,255,.16);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 60;
}
.at-tb-item[data-tip]:hover::before,
.at-tb-item[data-tip]:focus-visible::before {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) rotate(45deg);
}
@media (max-width: 768px) {
	.at-tb-item[data-tip]::after, .at-tb-item[data-tip]::before { display: none; }
}
/* Mobile: the four contact links become icon-only. Their order is untouched
   (Support, Call, WhatsApp, Email) because only the label is hidden, never a
   link, and .at-topbar-contact is a plain flex row.

   The label uses the visually-hidden pattern rather than display:none on
   purpose: these anchors carry no aria-label, only data-tip, and data-tip is
   already suppressed at this width for touch. display:none would strip them
   from the accessibility tree and leave four unlabelled icon links. */
@media (max-width: 768px) {
	.at-topbar-contact { gap: 12px; }
	.at-topbar-contact a { gap: 0; }
	.at-topbar-contact a > span {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
	}
	.at-topbar-contact svg { width: 16px; height: 16px; }
}
.at-topbar-right { display: flex; align-items: center; gap: 14px; }
.at-topbar-right a { color: #e8f0f9; display: inline-flex; align-items: center; gap: 6px; }
.at-topbar-right a:hover { color: #fff; }
.at-topbar-right .at-theme-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #e8f0f9; display: inline-flex; align-items: center;
  line-height: 1; transition: color .2s;
}
.at-topbar-right .at-theme-toggle:hover { color: #fbbf24; }
.at-topbar-right .at-theme-toggle span { display: flex; align-items: center; }
.at-lang-switch { position: relative; display: inline-flex; }
.at-lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 4px 11px; cursor: pointer;
  color: #cfe0f2; font-size: 12px; font-weight: 600; line-height: 1.2;
  font-family: inherit;
}
.at-lang-btn:hover { background: rgba(255,255,255,.17); color: #fff; }
.at-lang-btn:focus-visible { outline: 2px solid var(--at-orange); outline-offset: 2px; }
.at-lang-name { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.at-lang-caret {
  width: 0; height: 0; flex: none; margin-top: 3px;
  border-inline: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform .2s ease;
}
.at-lang-switch.is-open .at-lang-caret { transform: rotate(180deg); margin-top: -2px; }
.at-flag {
  width: 20px; height: 13px; flex: none; display: block;
  border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.at-lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 182px; z-index: 1100; text-align: start;
  background: #fff; border: 1px solid var(--at-line); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(10,20,40,.18); padding: 6px;
}
.at-lang-menu[hidden] { display: none; }
.at-topbar-right .at-lang-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  color: #1d2733; font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
.at-topbar-right .at-lang-opt:hover { background: #f2f6fb; color: #1d2733; }
.at-topbar-right .at-lang-opt.is-current { background: var(--at-fill); color: var(--at-fill-ink); }
[data-theme="dark"] .at-lang-menu { background: #16202c; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .at-lang-opt { color: #dce6f2; }
[data-theme="dark"] .at-lang-opt:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- Header ---------- */
.at-headwrap { position: sticky; top: 0; z-index: 900; transition: transform .4s cubic-bezier(.25,1,.5,1); will-change: transform; overflow-anchor: none; }
.at-header {
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid var(--at-line);
position: static;
}
.at-header .container {
  display: flex; align-items: center; gap: 22px;
  min-height: 88px;
  transition: min-height .4s cubic-bezier(.25,1,.5,1);
}
.at-header-main { display: contents; }
.at-header .at-logo { order: 1; }
.at-header .at-search { order: 2; }
.at-header .at-actions { order: 3; }
.at-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--at-navy);
}
.at-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.at-logo img { max-height: 80px; width: auto; transition: max-height .35s cubic-bezier(.25,1,.5,1); }
.at-logo-text {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--at-navy);
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
}
.at-logo-text .bolt {
  background: linear-gradient(135deg, var(--at-orange), #ffb056);
  color: #111827; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(246,139,31,.35);
}
.at-logo-text em { font-style: normal; color: var(--at-blue); }
/* Desktop search: fluid, and genuinely centred between the logo and the
 * account/cart actions.
 *
 * `margin-inline: auto` is what centres it. `.at-actions` must NOT keep an
 * `auto` inline-start margin here (see line ~340): an auto margin absorbs
 * free space BEFORE flex-grow does, so the actions block would claim all of
 * it and `flex: 1` on the search would never expand - which is what pinned
 * the field against the logo. `min-width: 0` lets the input shrink instead
 * of forcing the row wider. */
.at-search {
  flex: 1 1 auto; min-width: 0; max-width: 560px;
  margin-inline: auto; position: relative;
}
.at-search form {
  display: flex; border: 2px solid var(--at-blue); border-radius: 999px;
  overflow: hidden; background: #fff; transition: box-shadow .15s ease;
}
.at-search form:focus-within { box-shadow: 0 0 0 3px rgba(16,54,94,.14); }
.at-search input[type="search"] {
  flex: 1; border: 0; outline: none; padding: 10px 18px; font-size: 14px;
  background: transparent; color: var(--at-text); min-width: 0;
}
.at-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.at-search button {
  border: 0; background: var(--at-blue); color: #fff; cursor: pointer;
  padding: 0 20px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}
.at-search button:hover { background: var(--at-blue-dark); }

/* ---------- v1.1.1 AJAX search suggestions ---------- */
@keyframes at-spin { to { transform: rotate(360deg); } }
/* The loader replaces the magnifier inside the button: the button is inline-flex
   with gap:8px, so a 16px ::before occupies exactly the svg box and the label
   does not move. Painting it with the button's own #fff keeps it legible on
   --at-blue in both palettes. 1.2.85 replaced an absolutely positioned ::after
   that sat at inset-inline-end:86px and collided with the 119px button. */
.at-search form.at-searching button > svg { display: none; }
.at-search form.at-searching button::before {
  content: ''; flex: none; width: 16px; height: 16px;
  border: 2.5px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%;
  animation: at-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .at-search form.at-searching button::before { animation: none; }
}
.at-sugg {
  position: absolute; top: 100%; inset-inline: 0; z-index: 1200;
  pointer-events: auto;
  background: #fff; border-radius: 0 0 14px 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(12,41,71,.24);
  border: 1px solid var(--at-line, #e5ecf3); border-top: 0;
}
.at-sugg[hidden] { display: none; }
.at-sugg-cats {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid #eef3f8;
  background: #f8fbfe; font-size: 12px;
}
.at-sugg-cats > span { font-weight: 700; color: #64798d; margin-inline-end: 4px; }
.at-sugg-cats a {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--at-bg, #f2f7fc); color: var(--at-blue);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600;
  transition: all .13s ease;
}
.at-sugg-cats a:hover { background: var(--at-blue); color: #fff; }
.at-sugg-cats em {
  font-style: normal; font-size: 10.5px; opacity: .75;
  background: rgba(255,255,255,.75); border-radius: 999px; padding: 0 6px;
}
.at-sugg ul { list-style: none; margin: 0; padding: 6px; }
.at-sugg li a {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  gap: 12px; padding: 8px 10px; border-radius: 9px;
}
.at-sugg li a:hover,
.at-sugg li.active a { background: var(--at-bg, #f2f7fc); }
.at-sugg li img {
  width: 44px; height: 44px; object-fit: contain;
  background: #fff; border: 1px solid #edf2f7; border-radius: 8px; padding: 2px;
}
.at-sugg-t {
  font-size: 13.5px; color: var(--at-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.at-sugg-t mark { background: #ffe9c9; color: inherit; border-radius: 3px; padding: 0 1px; }
.at-sugg-sku {
  font-style: normal; font-size: 11px; color: #8598ab;
  background: #eef3f8; border-radius: 5px; padding: 1px 5px; margin-inline-start: 4px;
}
.at-sugg-badge {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  color: #fff; background: #64798d; border-radius: 5px;
  padding: 2px 6px; margin-inline-end: 3px;
}
.at-sugg-p { text-align: end; font-size: 13.5px; font-weight: 800; color: var(--at-navy); white-space: nowrap; }
.at-sugg-p del { opacity: .45; font-weight: 500; font-size: 12px; margin-inline-end: 4px; }
.at-sugg-p ins { text-decoration: none; }
.at-sugg-p b {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: var(--at-fill-ink); background: var(--at-fill); border-radius: 999px;
  padding: 1px 8px; margin-top: 3px;
}
.at-sugg-empty { padding: 22px 18px; font-size: 13.5px; color: #7d93a9; text-align: center; }
.at-sugg-all {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 16px; border-top: 1px solid #eef3f8; background: #f8fbfe;
  font-size: 13px; font-weight: 800; color: var(--at-blue);
  transition: background .13s ease;
}
.at-sugg-all:hover { background: #eaf3fd; }
/* No `margin-inline-start: auto` here - the search owns the centring.
 * The tablet/mobile override further down the file restores `auto` so the
 * actions stay hard against the edge once the search takes its own row. */
.at-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.at-action {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; gap: 2px; color: var(--at-navy);
  font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px;
}
.at-action:hover { background: var(--at-bg); color: var(--at-blue); }
.at-cart-count {
  position: absolute; top: 0; inset-inline-end: 2px;
  background: var(--at-fill); color: var(--at-fill-ink); font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- Navigation ---------- */
.at-nav { background: var(--at-blue); }
/* The nav row shares the STORE container width, not the full viewport.
   Measured 2026-10-02 at 1440px: the store containers resolve to 1240px
   (`--at-cw`, body class atw-auto) while this one was `max-width: none` and
   measured the full 1440px, so the menu floated in a visibly wider bar than the
   product grid underneath it. `var(--at-cw, 1240px)` is the same declaration the
   store-layout presets use (body.atw-auto/.atw-wide/... at style.css:2488), so the
   two track each other automatically: change the Store Layout Size option and the
   nav bar follows. `none` is still reachable - the atw-full preset sets
   `--at-cw: none` - and then both go full-bleed together.

   Do NOT reintroduce a hard pixel cap here. The row measures 928.3px and needs
   928.3 + 32px of inline padding = 961px, so the 1025px collapse floor still
   fits with ~50px of slack; the cap only binds above ~993px of container width.

   `overflow-x: clip` stays and is load-bearing: it contains a row that outgrows
   the bar instead of widening the document. `clip`, not `auto` - per the overflow
   spec making one axis non-visible forces the other to `auto`, and `auto` turned
   this into a scroll container that CLIPPED the mega panels below the bar.
   `clip` truncates without a scroll container, so the panels stay visible. */
.at-nav .container {
  display: flex; align-items: stretch; position: relative;
  max-width: var(--at-cw, 1240px); padding-inline: 16px;
  overflow-x: clip;
}
.at-nav-toggle { display: none; }
/* The nav bar must stay on a single row: if the top-level items wrapped to a
 * second line the drop-down panels (positioned at top:100% of each item) would
 * detach from their trigger when the pointer crosses the row gap, hiding the
 * submenu before it can be reached. nowrap + horizontal scroll keeps every
 * submenu attached to its parent and reachable in one continuous hover line. */
.at-menu {
  display: flex; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
  /* Never shrink: a flex row narrower than its scroller must keep its natural
     width and let the scroller do the scrolling, otherwise flex squashes the
     items and we are back to a compressed menu. */
  flex-shrink: 0; width: max-content;
  /* Centre the row in the bar. `margin-inline: auto` rather than
     `justify-content: center` on the container: auto margins resolve to 0 when
     there is no free space, so if the row is ever wider than the bar it degrades
     to start-aligned (clipping one edge) instead of overflowing BOTH edges, which
     is what `justify-content: center` would do. */
  margin-inline: auto;
}
.at-menu > li { position: static; }
.at-menu > li > a {
  display: flex; align-items: center; gap: 4px;
  color: #fff; font-size: 13.5px; font-weight: 600;
  /* 9px, not the 15px this was: the 11-item row measures 1126.6px at 15px and
     the desktop/laptop floor is 1025px, so the row has to fit 1025 - 32px of
     padding = 993px. 9px + gap 4px brings it to ~975px, which leaves ~18px of
     slack at 1025. Do not raise these without re-measuring; see
     09-THEME-MODULE-MAP.md. */
  padding: 13px 9px; white-space: nowrap;
  transition: padding .35s cubic-bezier(.25,1,.5,1);
}
.at-menu > li > a:hover,
.at-menu > li.current-menu-item > a { background: var(--at-blue-dark); }
.at-menu > li.menu-item-has-children > a::after {
  content: ""; width: 7px; height: 7px; border-inline-end: 2px solid rgba(255,255,255,.7);
  border-bottom: 2px solid rgba(255,255,255,.7);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.at-menu > li:hover > a::after { transform: rotate(225deg) translateY(-2px); }
.at-submenu {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 950;
  background: #fff; min-width: 230px; list-style: none; margin: 0; padding: 8px 0;
  border-radius: 0 0 10px 10px; box-shadow: 0 14px 34px rgba(12,41,71,.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .18s ease;
}
.at-menu li:hover > .at-submenu,
.at-menu li:focus-within > .at-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.at-submenu a {
  display: block; padding: 8px 18px; color: var(--at-text); font-size: 13.5px;
}
.at-submenu a:hover { background: var(--at-bg); color: var(--at-blue); }
.at-submenu .at-submenu { top: -8px; inset-inline-start: 100%; border-radius: 10px; }
.at-menu .at-highlight > a { background: var(--at-orange); color: #111827; }
.at-menu .at-highlight > a:hover { background: var(--at-orange-dark); color: #111827; }

/* ---------- Hero ---------- */
.at-hero {
  background:
    radial-gradient(700px 340px at 85% -10%, rgba(246,139,31,.25), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(11,92,171,.35), transparent 60%),
    linear-gradient(120deg, var(--at-dark) 0%, var(--at-navy) 55%, var(--at-blue) 100%);
  color: #fff; overflow: hidden;
}
.at-hero .container {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px;
  align-items: center; padding-block: 56px;
}
.at-hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #ffd9ae;
}
.at-hero h1 {
  font-size: clamp(28px, 4vw, 44px); line-height: 1.12; margin: 18px 0 14px;
  font-weight: 800; letter-spacing: -.02em;
}
.at-hero h1 em { font-style: normal; color: var(--at-orange); }
/* ---------- Hero typewriter ----------
 * The rotating phrase sits on its own line inside the h1. Its height is pinned
 * to exactly two lines of the h1 line-box, because the phrases have very
 * different lengths and some of them (notably the German "Hochwertige Akkus &
 * Elektronik" on narrow screens) wrap onto a second line. Without a fixed
 * height, every phrase change re-flowed the paragraph and the CTA row below it,
 * which is a visible layout shift on the most-read page. min-height is used
 * rather than height so a phrase is never clipped if a translation is longer
 * than the box; the block is bottom-aligned so growth never moves the line
 * above it. */
.at-hero-typewriter {
  display: block;
  min-height: calc(1.12em * 2);
  text-wrap: balance;
}
.at-tw-caret {
  display: inline-block;
  width: .06em; height: .82em;
  margin-inline-start: .06em;
  vertical-align: -.1em;
  background: currentColor;
  animation: at-tw-blink 1.05s steps(2, start) infinite;
}
@keyframes at-tw-blink { to { visibility: hidden; } }
/* Respect the OS setting: show the finished phrase statically with no caret
 * rather than animating. main.js checks the same media query and never starts. */
@media (prefers-reduced-motion: reduce) {
  .at-tw-caret { display: none; }
}
.at-hero p { color: #d7e4f2; font-size: 16px; max-width: 52ch; margin: 0 0 26px; }
.at-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.at-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  transition: all .18s ease; border: 2px solid transparent; cursor: pointer;
  /* Both were missing, which is why "the same button" rendered in two
   * typefaces: a <button class="at-btn"> fell back to the UA font stack while
   * an <a class="at-btn"> inherited the body font, and the anchors also kept
   * the UA underline. font-family/text-decoration must be declared for the
   * element to render the metrics the class implies. */
  font-family: inherit; text-decoration: none; line-height: 1.35;
}
.at-btn-primary { background: var(--at-fill); color: var(--at-fill-ink); box-shadow: 0 8px 20px rgba(246,139,31,.32); }
/* Hover glow. The resting state keeps the tight offset shadow above; on hover the
   offset collapses to 0 and a wide, low-opacity orange glow takes over, which reads
   as light around the button rather than a hard drop shadow underneath it. */
.at-btn-primary:hover {
  background: var(--at-fill-hover); color: var(--at-fill-ink); transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(246,139,31,.34), 0 0 22px 6px rgba(246,139,31,.3);
}
@media (prefers-reduced-motion: reduce) {
  .at-btn-primary:hover { transform: none; }
}
/* WooCommerce renders its own add-to-cart button with NO theme class
 * (single_add_to_cart_button button alt), and style.css had no rule for it at
 * all - so the product page's primary CTA was wearing WooCommerce's default
 * .button metrics while the inquiry controls wore .at-btn. Pulling it onto the
 * same tokens is what makes "match the Add to Cart button" literally true
 * rather than a coincidence. */
.single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  font-family: inherit; line-height: 1.35; border: 2px solid transparent;
  background: var(--at-fill); color: var(--at-fill-ink);
  box-shadow: 0 8px 20px rgba(246,139,31,.32);
  transition: all .18s ease; cursor: pointer;
}
.single_add_to_cart_button:hover {
  background: var(--at-fill-hover); color: var(--at-fill-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(246,139,31,.34), 0 0 22px 6px rgba(246,139,31,.3);
}
.single_add_to_cart_button:focus-visible { outline: 3px solid var(--at-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .single_add_to_cart_button:hover { transform: none; }
}
.at-btn-ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.at-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.at-hero-art { display: flex; justify-content: center; }
.at-hero-art svg { width: min(380px, 100%); height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }

/* ---------- Trust row ---------- */
.at-trust { background: #fff; border-bottom: 1px solid var(--at-line); }
.at-trust .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-block: 22px;
}
.at-trust-item { display: flex; align-items: center; gap: 12px; }
.at-trust-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, #eef4fb, #dfeafa); color: var(--at-blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.at-trust-item strong { display: block; font-size: 13.5px; color: var(--at-navy); }
.at-trust-item span { font-size: 12.5px; color: var(--at-muted); }

/* ---------- Sections ---------- */
.at-section { padding-block: 46px; }
.at-section.alt { background: var(--at-bg); }
.at-section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.at-section-head h2 {
  margin: 0; font-size: 24px; font-weight: 800; color: var(--at-navy);
  letter-spacing: -.01em; position: relative; padding-bottom: 10px;
}
.at-section-head h2::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
  width: 46px; height: 4px; border-radius: 4px; background: var(--at-orange);
}
.at-more {
  font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}

/* ---------- Category tiles ---------- */
.at-cats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.at-cat-tile {
  background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-radius);
  padding: 22px 16px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 12px; transition: all .18s ease; color: var(--at-navy);
}
.at-cat-tile:hover {
  transform: translateY(-4px); box-shadow: var(--at-shadow);
  border-color: #cfdcf0; color: var(--at-blue);
}
.at-cat-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--at-blue), #3d84d1); color: #fff;
  box-shadow: 0 8px 18px rgba(11,92,171,.25);
}
.at-cat-tile strong { font-size: 14.5px; font-weight: 700; }
.at-cat-tile span { font-size: 12px; color: var(--at-muted); }

/* ---------- WooCommerce ---------- */
.woocommerce ul.products,
.wc-block-grid ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 18px; margin: 0 0 16px !important; padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

/* ================================================================
   Product card v2
   ============================================================== */
/* neutralise WooCommerce default column widths inside the grid */
.woocommerce ul.products li.product,
.wc-block-grid ul.products li.product {
  width: auto !important; float: none !important;
  margin: 0 !important; text-align: start;
}
.atc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--at-line);
  border-radius: 12px; overflow: hidden;
  /* Scoped, not `all`: the hover rule below animates only these three.
   * Keeps the compositor on transform/box-shadow and avoids transitionning
   * inherited or layout properties the card never changes. Same 0.3s feel. */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}
li.product:hover > .atc,
.atc:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: #cfdcf0;
}

/* media */
.atc-media { position: relative; padding: 14px 14px 8px; }
.atc-img {
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border-radius: 9px; aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 120% at 50% 0%, #f8fafc 60%, #eef2f7 100%);
}
/* last-resort placeholder: sits behind the photo, so a photo that fails to decode
   (0-byte derivative, missing source, CDN error) shows the store placeholder
   instead of an empty or broken-image box. */
.atc-img::before {
  content: ''; position: absolute; inset: 12px; z-index: 0;
  background: url(assets/img/product-placeholder.svg) center / contain no-repeat;
  opacity: .85; pointer-events: none;
}
.atc-img img {
  position: relative; z-index: 1;
  width: 100% !important; height: 100% !important;
  object-fit: contain; margin: 0 !important; padding: 12px;
  transition: transform .35s ease;
}
/* server-side fallback markup, and the client-side swap in assets/js/main.js */
.atc-img img.at-img--fallback { padding: 22%; opacity: .9; }
@media (prefers-color-scheme: dark) {
  .atc-img img.at-img--fallback { opacity: .55; }
}
li.product:hover .atc-img img { transform: scale(1.05); }
li.product:hover .atc-img img.at-img--fallback { transform: none; }

/* product badges - single unified top-left stack, absolute, zero layout impact.
   Position is LOCKED: every corner modifier resolves to the same top-left
   anchor so a stale preset can never move a badge. 10px inset keeps clear of
   the image edge; z-index 5 sits above the image but beside .atc-actions,
   which keeps the top-right corner for wishlist/cart buttons. */
.special-tags {
  position: absolute; z-index: 5; pointer-events: none;
  top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start;
  max-width: calc(100% - 20px);
}
.special-tags.p-2 { padding: 4px; }
.special-tags--tl,
.special-tags--tr,
.special-tags--bl,
.special-tags--br {
  top: 10px; left: 10px; right: auto; bottom: auto;
  inset-inline-start: 10px; inset-inline-end: auto;
  align-items: flex-start;
}
.special-tags .badge {
  display: inline-block; max-width: 100%;
  font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 4px rgba(16,54,94,.24);
}

/* action buttons */
.atc-actions {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 7px;
}
.atc-actions button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #e3e9f0; background: rgba(255,255,255,.94);
  color: #4a5b6d; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(16,54,94,.10);
  opacity: 0; transform: translateX(-4px);
  transition: all .18s ease;
}
[dir="rtl"] .atc-actions button { transform: translateX(4px); }
li.product:hover .atc-actions button,
.atc-media:focus-within .atc-actions button,
.atc-actions button.on { opacity: 1; transform: none; }
.atc-actions button:hover { color: var(--at-blue); border-color: #bcd4ee; }
.atx-wish-btn.on { color: #be123c !important; border-color: #fecdd3 !important; background: #fff1f2 !important; }
.atx-cmp-btn.on  { color: var(--at-blue) !important; border-color: #bcd4ee !important; background: #eef5fd !important; }
.atx-qv-btn:hover { color: var(--at-green) !important; }

/* body */
.atc-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px 14px; flex: 1;
}
.at-card-brand {
  display: inline-block; align-self: flex-start;
  margin: 0; padding: 2px 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--at-blue); background: #eef4fb; border-radius: 999px;
  text-decoration: none; transition: all .15s ease;
}
.at-card-brand:hover { color: #0b3a66; background: #dfeafa; }

/* title with expand */
.atc-titlewrap { display: flex; align-items: flex-start; gap: 4px; }
.atc-title { flex: 1; margin: 0 !important; font-size: clamp(12.5px, 0.75rem + 0.2vw, 14.5px) !important; font-weight: 600; line-height: 1.38; color: var(--at-text); min-height: 4.1em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.atc-title a { color: inherit; text-decoration: none; }
.atc-title a:hover { color: var(--at-blue); }
li.product .atc--open .atc-title { -webkit-line-clamp: unset; display: block; overflow: visible; }
.atc-morebtn {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: none; border-radius: 50%; background: transparent; color: var(--at-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.atc-morebtn:hover { background: #eef2f7; color: var(--at-blue); }
.atc-morebtn[hidden] { display: none; }
li.product .atc--open .atc-morebtn svg { transform: rotate(90deg); }
.atc-morebtn svg { transition: transform .2s ease; }

/* stock + price */
.atc-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--at-muted);
}
.atc-stockdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.atc-stockdot.in { background: #22c55e; box-shadow: 0 0 0 3px #22c55e1f; }
.atc-stockdot.out { background: #94a3b8; box-shadow: 0 0 0 3px #94a3b81f; }
.atc-stockdot.pre { background: #f59e0b; box-shadow: 0 0 0 3px #f59e0b1f; }

/* availability lead-time line (card + single product). Text only: the state
   is already carried by the stock dot / badge, so no second colour cue. */
.atc-lead {
  font-size: 11.5px; font-weight: 600; color: var(--at-muted);
  margin: 3px 0 0; line-height: 1.35;
}
.at-lead {
  font-size: 12.5px; font-weight: 600; color: var(--at-muted);
  margin: 2px 0 12px; line-height: 1.4;
}

li.product .atc-price,
.atc-price {
  color: var(--at-blue) !important; font-size: 16px !important; font-weight: 800;
  padding: 0; margin-top: auto !important; line-height: 1.3;
}
.atc-price del { color: var(--at-muted) !important; font-weight: 500; font-size: 12.5px !important; opacity: .85; }
.atc-price ins { text-decoration: none; }

/* footer actions */
.atc-foot { margin-top: 8px; }
.atc-cartbtn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px; font-size: 13px !important; font-weight: 700;
  padding: 9px 14px !important; text-decoration: none;
  border: 1.6px solid var(--at-blue); color: var(--at-blue) !important;
  background: #fff !important; transition: all .15s ease;
}
.atc-cartbtn:hover {
  background: var(--at-blue) !important; color: #fff !important;
  box-shadow: 0 5px 12px rgba(11,92,171,.32), 0 0 18px 5px rgba(11,92,171,.22);
}
@media (prefers-reduced-motion: reduce) {
  .atc-cartbtn:hover { box-shadow: 0 5px 12px rgba(11,92,171,.32); }
}
.atc-cartbtn.loading::after { color: var(--at-blue); }
.atc-cartbtn.added { display: none; }
li.product .added_to_cart {
  display: flex; width: 100%; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; margin-top: 8px;
}
.atc-notifybtn {
  border: 1.6px dashed #cbd5e1; background: #f8fafc; color: #64748b;
  font-size: 12px; font-weight: 700; padding: 8px 13px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: all .15s ease;
}
.atc-notifybtn:hover { border-color: var(--at-blue); color: var(--at-blue); }

/* notify form inside cards */
.atc-foot .atx-notify { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.atc-foot .atx-notify input[type="email"] {
  flex: 1 1 auto; min-width: 0; border: 1px solid #dbe3ec; border-radius: 999px;
  padding: 8px 13px; font-size: 12px; background: #fbfcfe;
}
.atc-foot .atx-notify input[type="email"]:disabled { opacity: .6; }
.atc-foot .atx-nmsg { flex-basis: 100%; font-size: 11.5px; font-weight: 600; }
/* an empty status span otherwise reserves a wrapped flex line + gap, which
   pushed every out-of-stock card ~6px taller than an in-stock one. */
.atc-foot .atx-nmsg:empty { display: none; }
.atc-foot .atx-nmsg.ok { color: #16a34a; }
.atc-foot .atx-nmsg.warn { color: #d97706; }
.atc-foot .atx-nmsg.err { color: #dc2626; }
/* narrow cards cannot fit the e-mail field and the localised button on one line */
@media (max-width: 600px) {
  .atc-foot .atx-notify input[type="email"] { flex: 1 1 100%; }
}

/* responsive columns */
@media (max-width: 1199px) {
  .woocommerce ul.products, .wc-block-grid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .woocommerce ul.products, .wc-block-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 13px; }
}
@media (max-width: 480px) {
  .woocommerce ul.products, .wc-block-grid ul.products { gap: 10px; }
  .atc-media { padding: 10px 10px 6px; }
  .atc-img img { padding: 8px; }
  .atc-body { padding: 8px 11px 11px; }
  .atc-price { font-size: 14.5px !important; }
  .atc-cartbtn { font-size: 12px !important; padding: 8px 12px !important; }
}

/* touch devices: keep actions always visible */
@media (hover: none) {
  .atc-actions button { opacity: 1; transform: none; }
}

.woocommerce .woocommerce-result-count { color: var(--at-muted); font-size: 13px; margin-top: 4px; }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--at-line); border-radius: 8px; padding: 8px 12px; color: var(--at-text); background: #fff; }

.woocommerce-pagination ul { border: 0 !important; }
.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  border: 1px solid var(--at-line) !important; border-radius: 8px !important;
  margin-inline: 3px; padding: 7px 13px !important; color: var(--at-text) !important;
  background: #fff !important; font-weight: 600;
}
.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li a:hover { background: var(--at-blue) !important; color: #fff !important; border-color: var(--at-blue) !important; }

.woocommerce-breadcrumb { color: var(--at-muted) !important; font-size: 12.5px !important; margin-bottom: 18px !important; }
.woocommerce-breadcrumb a { color: var(--at-blue); }

.woocommerce div.product .product_title { font-size: 26px; font-weight: 800; color: var(--at-navy); letter-spacing: -.01em; }
.woocommerce div.product div.images { width: 44%; }
.woocommerce div.product div.summary { width: 52%; }
.woocommerce div.product div.images img { border: 1px solid var(--at-line); border-radius: var(--at-radius); background: #fff; }
.woocommerce div.product p.price { color: var(--at-blue) !important; font-size: 26px !important; font-weight: 800; }
.woocommerce div.product p.price del { font-size: 17px !important; color: var(--at-muted) !important; }
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
  background: var(--at-fill) !important; color: var(--at-fill-ink) !important;
  border-radius: 999px !important; font-weight: 700 !important;
  padding: 11px 26px !important; border: 0 !important;
  transition: all .15s ease !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--at-fill-hover) !important; color: var(--at-fill-ink) !important;
}
.woocommerce div.product .product_meta { padding-top: 14px; border-top: 1px dashed var(--at-line); color: var(--at-muted); font-size: 13px; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: #fff; border: 1px solid var(--at-line); border-radius: 8px 8px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--at-navy); border-color: var(--at-navy); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--at-line); }
.woocommerce table.shop_attributes th { background: var(--at-bg); }
.woocommerce .related.products > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 { font-size: 20px; font-weight: 800; color: var(--at-navy); }

/* ---------- Variation "options" selector (modern) ---------- */
.woocommerce div.product form.cart table.variations {
  background: transparent; margin: 4px 0 20px; border-spacing: 0; width: 100%;
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th { border: 0; padding: 8px 0; }
.woocommerce div.product form.cart table.variations th.label { width: 1%; white-space: nowrap; padding-right: 16px; vertical-align: top; padding-top: 15px; }
.woocommerce div.product form.cart table.variations label {
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--at-muted); margin: 0;
}
.woocommerce div.product form.cart table.variations td.value {
  position: relative;
  /* Select + Clear on ONE line, vertically centred on each other. The select is
     width:100%, so before this the inline anchor wrapped onto its own line
     *below* the dropdown. flex-wrap:nowrap is deliberate: wrapping is exactly
     the bug this replaces, and it must not come back at narrow widths. */
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
.woocommerce div.product form.cart table.variations select {
  /* min-width:0 is what actually lets a flex item shrink below its content
     width; without it the select refuses to shrink and pushes the button out. */
  flex: 1 1 auto; min-width: 0;
  width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 48px; padding: 0 42px 0 16px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--at-navy);
  background-color: var(--at-bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b5cab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  border: 1.5px solid var(--at-line); border-radius: 10px;
  cursor: pointer; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.woocommerce div.product form.cart table.variations select:hover { border-color: #bcd4ee; }
.woocommerce div.product form.cart table.variations select:focus { border-color: var(--at-blue); box-shadow: 0 0 0 3px rgba(11,92,171,.15); }
.woocommerce div.product form.cart table.variations .reset_variations {
  /* Inline to the right of the select, height-matched to it (48px), and now
     showing the word next to the X instead of an icon-only circle. The X stays
     in ::before so it inherits the button's colour and font on hover. */
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto; gap: 7px;
  height: 48px; padding: 0 16px; margin-inline-start: 0;
  font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none;
  color: var(--at-muted); background: #fff;
  border: 1px solid var(--at-line); border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.woocommerce div.product form.cart table.variations .reset_variations:hover { color: var(--at-orange); border-color: var(--at-orange); background: #fff; }
.woocommerce div.product form.cart table.variations .reset_variations:focus-visible { outline: 2px solid var(--at-blue); outline-offset: 2px; }
.woocommerce div.product form.cart table.variations .reset_variations::before { content: "\2715"; font-size: 13px; line-height: 1; }
.woocommerce div.product form.cart .variations_button { margin-top: 4px; }
html[data-theme="dark"] .woocommerce div.product form.cart table.variations label { color: #8fa6bd; }
html[data-theme="dark"] .woocommerce div.product form.cart table.variations select {
  background-color: #0f1c2e; color: #eaf2fb; border-color: #2a3b52;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237db3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .woocommerce div.product form.cart table.variations select:hover { border-color: #3a5a82; }
html[data-theme="dark"] .woocommerce div.product form.cart table.variations .reset_variations { color: #9fb2cb; border-color: #2a3b52; background: #0f1c2e; }
html[data-theme="dark"] .woocommerce div.product form.cart table.variations .reset_variations:hover { color: #fbbf24; border-color: #fbbf24; background: #0f1c2e; }

.woocommerce-message { border-top-color: var(--at-green) !important; border-radius: 8px; }
.woocommerce-info { border-top-color: var(--at-blue) !important; border-radius: 8px; }
.woocommerce-error { border-radius: 8px; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--at-green) !important; }

.woocommerce table.shop_table { border: 1px solid var(--at-line) !important; border-radius: var(--at-radius); border-collapse: separate !important; border-spacing: 0; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--at-bg); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order { border-radius: var(--at-radius); }
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment { background: var(--at-bg); border-radius: var(--at-radius); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  border: 1px solid var(--at-line) !important; border-radius: 8px !important;
  padding: 9px 12px !important; height: auto !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--at-line) !important; }

.woocommerce .widget-area .widget { background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-radius); padding: 18px; }
.woocommerce .widget-area .widget-title { font-size: 15px; font-weight: 800; color: var(--at-navy); margin-top: 0; }

/* ---------- Info / SEO section ---------- */
.at-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.at-info-card {
  background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-radius);
  padding: 24px;
}
.at-info-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--at-navy); display: flex; align-items: center; gap: 10px; }
.at-info-card h3 svg { color: var(--at-orange); flex: none; }
.at-info-card p { margin: 0; color: var(--at-muted); font-size: 13.5px; }

/* ---------- Footer ---------- */
.at-footer { background: var(--at-dark); color: #b9cbde; margin-top: 40px; }
.at-footer-main {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 30px;
  padding-block: 44px 34px;
}
.at-footer h4 {
  color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 14px;
}
.at-footer ul { list-style: none; margin: 0; padding: 0; }
.at-footer ul li { margin-bottom: 8px; }
.at-footer a { color: #b9cbde; font-size: 13.5px; }
.at-footer a:hover { color: #fff; }
.at-footer-brand .at-logo-text { color: #fff; font-size: 22px; }
.at-footer-brand .at-site-logo-img { display: inline-flex; align-items: center; }
.at-footer-brand .at-site-logo-img img { max-height: 52px; width: auto; }
.at-footer-brand p { font-size: 13px; color: #93aac2; margin: 12px 0 0; }
.at-newsletter { display: flex; margin-top: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.at-newsletter input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: #fff; padding: 10px 16px; font-size: 13px;
}
.at-newsletter input::placeholder { color: #7f97b0; }
.at-newsletter button {
  border: 0; background: var(--at-fill); color: var(--at-fill-ink); font-weight: 700;
  padding: 0 18px; cursor: pointer; font-size: 13px;
}
/* Newsletter consent checkbox (1.2.101) - full-width row under the pill form */
.at-nl-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: #dfe8f2; cursor: pointer; }
.at-nl-consent input[type="checkbox"] { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; accent-color: var(--at-fill); }
.at-nl-consent a { color: #f0b429; text-decoration: underline; text-underline-offset: 3px; }
.at-nl-consent a:hover { color: #ffd166; }
.at-news-ok.at-news-err { color: #ffb3a7; }

.at-pay-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.at-pay-badge {
  background: #fff; color: var(--at-navy); font-size: 11px; font-weight: 800;
  border-radius: 6px; padding: 5px 10px; letter-spacing: .02em;
}
.at-pay-logo {
  background: #fff; border-radius: 6px; padding: 4px 8px;
  display: inline-flex; align-items: center; height: auto; line-height: 0;
}
.at-pay-logo img { max-height: 22px; width: auto; height: auto; }
.at-footer-contact { border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.16); }
.at-footer-contact .container { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 13px 0; }
.at-footer-contact .at-tb-item { position: relative; color: #c8d8ea; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-decoration: none; transition: color .15s; }
.at-footer-contact .at-tb-item:hover { color: #fff; }
.at-footer-contact .at-tb-item svg { color: var(--at-orange); flex: none; }
.at-footer-contact .at-footer-wa { font-weight: 600; }

/* Opening hours widget (front end) */
.at-hours { color: inherit; }
.at-hours-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.at-hours-title { font-weight: 700; font-size: 15px; }
.at-hours-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; line-height: 1.5; }
.at-hours-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.at-hours-badge.is-open { background: rgba(16,185,129,.14); color: #0f9d58; }
.at-hours-badge.is-break { background: rgba(245,158,11,.16); color: #b45309; }
.at-hours-badge.is-closed { background: rgba(239,68,68,.12); color: #dc2626; }
html[data-theme="dark"] .at-hours-badge.is-open { color: #34d399; }
html[data-theme="dark"] .at-hours-badge.is-break { color: #fbbf24; }
html[data-theme="dark"] .at-hours-badge.is-closed { color: #f87171; }
.at-hours-breaknote { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: #b45309; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.28); border-radius: 8px; padding: 7px 10px; }
.at-hours-list { list-style: none; margin: 10px 0 0; padding: 0; }
.at-hours-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,.07); font-size: 13.5px; }
.at-hours-row.is-today { font-weight: 700; color: var(--at-orange); }
.at-hours-time { text-align: right; font-variant-numeric: tabular-nums; }
.at-hours-note { margin: 10px 0 0; font-size: 12.5px; opacity: .72; }
html[data-theme="dark"] .at-hours-row { border-top-color: rgba(255,255,255,.08); }
@media (max-width: 480px) { .at-hours-row { flex-direction: column; gap: 2px; } .at-hours-time { text-align: left; } }

/* Opening hours settings grid (admin only) */
.at-hgrid .at-h-day { width: 150px; }
.at-hgrid .at-h-closed { width: 70px; text-align: center; }
.at-hgrid td.at-h-slot { white-space: nowrap; }
.at-hgrid td.at-h-slot input[type="time"] { width: 104px; }
.at-hgrid .at-h-dash { margin: 0 5px; color: #8a94a6; }
.at-hgrid tr.is-closed td.at-h-slot { opacity: .4; }
.at-hgrid .at-h-copy { width: 112px; text-align: right; }
.at-h-copy-btn { white-space: nowrap; }

.at-h-copy-done:empty { display: none; }
.at-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 16px;
  font-size: 12.5px; color: #7f97b0;
}
/* ---------- Global tax / legal note (1.2.76) ----------
 * Was rendered inside the page body in four places; it is now one centred band
 * inside the footer, above .at-footer-bottom. .at-footer is var(--at-dark) in
 * both light and dark theme (no html[data-theme="dark"] override), so a single
 * set of values serves both. text-align:center mirrors under RTL for free —
 * do not add a [dir="rtl"] variant. */
.at-footer-taxnote {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 15px 16px;
}
.at-footer-taxnote .atx-tax-note {
  margin: 0 auto;
  max-width: 74ch;
  text-align: center;
  text-wrap: balance;
  font-size: 12.5px;
  line-height: 1.65;
  color: #9db2c8;
}
.at-footer-taxnote .atx-tax-note--vat { color: #b9cbde; }
@media (max-width: 480px) {
  .at-footer-taxnote { padding-block: 13px 14px; }
  .at-footer-taxnote .atx-tax-note { font-size: 11.5px; line-height: 1.6; }
}
.at-footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.at-footer-bottom a { color: #a9bcd2; text-decoration: none; transition: color .15s; }
.at-footer-bottom a:hover { color: #fbbf24; }
.at-footer-secure {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.at-footer-secure .at-footer-dot { opacity: .45; }
.at-footer-carriers { font-weight: 600; color: #cbd9e8; letter-spacing: .02em; }
.at-footer-ssl { display: inline-flex; align-items: center; gap: 6px; color: #93b4a0; }
.at-footer-ssl::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #3fbf7f; box-shadow: 0 0 0 3px rgba(63,191,127,.18);
}
.at-footer-credit { opacity: .85; }
html[data-theme="dark"] .at-footer-secure { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* ---------- Misc ---------- */
.at-backtop {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 800;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--at-navy); color: #fff; display: none;
  align-items: center; justify-content: center; box-shadow: var(--at-shadow);
}
.at-backtop.show { display: inline-flex; }
.at-backtop:hover { background: var(--at-blue); }

.site-main { padding-block: 30px 50px; }
.page-title, .entry-title { color: var(--at-navy); font-weight: 800; letter-spacing: -.01em; }
.entry-content h2 { color: var(--at-navy); }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content table th, .entry-content table td { border: 1px solid var(--at-line); padding: 8px 12px; }
.entry-content table th { background: var(--at-bg); text-align: start; }

.woocommerce-store-notice,
.demo_store {
  background: var(--at-fill) !important; color: var(--at-fill-ink) !important; margin: 0 !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .wc-block-grid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .at-cats { grid-template-columns: repeat(3, 1fr); }
  .at-trust .container { grid-template-columns: repeat(2, 1fr); }
  .at-info-grid { grid-template-columns: 1fr; }
  .at-footer-main { grid-template-columns: 1fr 1fr; }
  .at-hero .container { grid-template-columns: 1fr; padding-block: 40px; }
  .at-hero-art { display: none; }
}


/* ================================================================
   Nav collapse: burger + vertical menu below 1024px
   ------------------------------------------------------------
   Measured with the CDP harness (2026-10-02): the live 10-item row
   measures 928.3px at 1920px wide and is centred with ~480px of
   free space on each side. `.at-nav .container` has 16px inline
   padding, so the widest viewport that still fits the row is
   928.3 + 32 = 961px, and it survives a 15px scrollbar down to
   ~976px. 1024 is therefore the floor: below it the burger + vertical
   list takes over, the same component the phone layout uses.

   CAVEAT — this is a hard fit, not a soft one. `.at-nav .container`
   is `overflow-x: clip`, so an over-wide row is truncated at the bar
   edge with no way to scroll to the hidden items. If the header menu
   ever gains items, re-measure before trusting 1024: the old 1500px
   value was set when the row measured 1126.6px, not the 1444px this
   comment used to claim. Item padding is 9px for the same reason --
   15px measured 1126.6px and did not fit.

   The 768px block further down keeps its own rules; the declarations
   here are written to be identical in effect, so the switch at that
   boundary is seamless.
   ================================================================ */
@media (max-width: 1024px) {
  /* burger becomes the menu trigger */
  .at-burger { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  /* row hidden until opened; no more sideways bar */
  .at-nav { display: none; border-top: 1px solid rgba(255,255,255,.15); }
  .at-nav.open { display: block; }
  .at-nav .container {
    max-width: none; overflow-x: visible; flex-direction: column;
    align-items: stretch; width: 100%;
  }
  /* vertical list */
  .at-menu { flex-direction: column; width: auto; flex-shrink: 1; margin-inline: 0; }
  .at-menu > li { width: 100%; }
  .at-menu > li > a { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
  /* submenus become in-flow blocks, not hover panels */
  .at-submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; display: none; background: var(--at-blue-dark); min-width: 0;
  }
  .at-menu li.submenu-open > .at-submenu { display: block; }
  .at-submenu a { color: #dbe7f4; }
  .at-submenu a:hover { background: rgba(255,255,255,.06); color: #fff; }
  .at-mega { position: static; transform: none; opacity: 1; visibility: visible; display: none; }
  .at-nav.open li.submenu-open > .at-mega { display: block; }
  .at-mega-inner { min-width: 0; max-width: none; box-shadow: none; border-radius: 0; padding: 0 0 8px; }
  .at-mega-list { columns: 1; }
  .at-mega-all { padding: 10px 16px; }
  .at-mega-list a { padding: 9px 16px; display: flex; justify-content: space-between; gap: 10px; }
  /* long category names must wrap, not widen the panel */
  .at-submenu a, .at-mega-list a { overflow-wrap: anywhere; }
}

@media (max-width: 768px) {
  /* Mobile: the wrapper (top bar + header) is the single sticky unit. */
  .at-headwrap { position: sticky; top: 0; }
  .at-header { position: static; }
  .at-topbar { max-height: 40px; overflow: hidden; }
  /* The language dropdown is position:absolute inside .at-topbar, so the rule
     above clips it outright on a phone no matter how high its z-index is —
     `overflow` clips descendants, it is not a stacking question. The 40px clip
     exists only to stop the four contact icons wrapping, and .at-topbar-contact
     is already `flex-wrap:nowrap` below, so relaxing it while the menu is open
     is safe. at-lang.js adds/ removes .at-lang-open on the .at-topbar element.
     max-height is left at 40px on purpose: it does not clip, and the dropdown is
     out of flow so it never needs the box to grow. */
  .at-topbar.at-lang-open { overflow: visible; }
  /* All four contact links stay on mobile as icons; their labels are hidden by
     the <=768px rule above. They must not wrap: .at-topbar is 40px tall with
     overflow:hidden, so a second row would simply be clipped. The icons plus
     gaps come to ~100px, which clears beside the dark toggle and language
     dropdown on a 390px viewport. */
  .at-topbar-contact { flex-wrap: nowrap; }
  .at-topbar-contact > a { flex: none; }
  .at-header .container { flex-wrap: wrap; padding-block: 8px; gap: 6px 10px; }
  .at-header-main { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; max-height: 78px; overflow: hidden; }
  .at-burger { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .at-logo { min-width: 0; flex: 0 1 auto; max-width: calc(100vw - 250px); overflow: hidden; }
  .at-logo img { max-height: 62px; max-width: 100%; height: auto; }
  .at-actions { gap: 2px; margin-inline-start: auto; }
  .at-action { min-width: 44px; min-height: 44px; justify-content: center; padding: 8px; }
  /* hide only the text label under the icon, keep the icon+counts visible */
  .at-action > span:not(.atx-ico):not(.atx-count):not(.at-cart-count) { display: none; }
  .at-search { order: 5; flex-basis: 100%; max-width: none; }
  .at-nav { display: none; border-top: 1px solid rgba(255,255,255,.15); }
  .at-nav.open { display: block; }
  .at-menu { flex-direction: column; }
  .at-menu > li > a { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .at-submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; display: none; background: var(--at-blue-dark); min-width: 0;
  }
  .at-menu li.submenu-open > .at-submenu { display: block; }
  .at-submenu a { color: #dbe7f4; }
  .at-submenu a:hover { background: rgba(255,255,255,.06); color: #fff; }
  /* Staged reveal on scroll (classes toggled by main.js). Hiding the whole
     unit translates the wrapper; a slight upward scroll first returns the slim
     search bar, more returns the middle burger/logo/icons row, and only after
     that the top contact/language bar fades back in. */
  .at-headwrap.at-hdr-hide .at-header { transform: none; }
  .at-headwrap.at-hdr-hide { transform: translateY(-100%); }
  .at-headwrap.at-hdr-search .at-header .container { min-height: 0; padding-block: 6px; }
  .at-headwrap.at-hdr-search .at-header-main,
  .at-headwrap.at-hdr-mid .at-topbar,
  .at-headwrap.at-hdr-search .at-topbar { max-height: 0; opacity: 0; }
  .at-headwrap.at-hdr-mid .at-logo img { max-height: 45px; }
  .woocommerce ul.products,
  .wc-block-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .at-cats { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100% !important; float: none !important; }
}

@media (max-width: 480px) {
  /* top bar: keep the first contact item as a pure icon (phone), never a
     two-line bar; the lang pills and dark toggle stay compact on the right */
  .at-topbar-contact { gap: 4px; }
  .at-topbar-contact > * { padding: 4px; }
  /* The contact labels are already visually-hidden by the <=768px rule above.
     The old `.at-topbar .at-tb-item span{display:none}` sat here with equal
     specificity but later in the file, so it silently won and stripped the
     labels from the accessibility tree instead of just hiding them. */
  .at-topbar-right { gap: 6px; }
  .at-logo img { max-height: 52px; }
  .at-headwrap.at-hdr-mid .at-logo img { max-height: 38px; }
  .at-logo-text { font-size: 21px; }
  .at-burger { min-width: 44px; min-height: 44px; }
  .woocommerce ul.products,
  .wc-block-grid ul.products { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .at-trust .container { grid-template-columns: 1fr; }
  .at-footer-main { grid-template-columns: 1fr; }
}

/* ================================================================
   Cart page: "You may be interested in…" (WooCommerce cross-sells)
   Keep this section below the Cart totals & free-shipping bar, never
   overlapping them, and cap the grid at a calm 2–3 columns max.
   ============================================================== */
.woocommerce-cart .cross-sells {
  clear: both; float: none; width: 100%;
  margin-top: 26px; margin-bottom: 26px;
}
.woocommerce-cart .cross-sells > h2 { margin: 0 0 14px; }
.woocommerce-cart .cross-sells ul.products,
.woocommerce-cart .cross-sells .wc-block-grid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 768px) {
  .woocommerce-cart .cross-sells ul.products,
  .woocommerce-cart .cross-sells .wc-block-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  .woocommerce-cart .cross-sells ul.products,
  .woocommerce-cart .cross-sells .wc-block-grid ul.products { grid-template-columns: 1fr !important; }
}

/* ---- Cleanup & improvement additions ---- */
.at-free-ship{background:#eef5fd;border:1px solid #cfe0f4;border-radius:10px;padding:14px 18px;margin:0 0 20px}
.at-free-ship p{margin:0 0 8px;font-size:.95rem}
.at-free-ship .bar{height:8px;background:#d7e6f7;border-radius:99px;overflow:hidden}
.at-free-ship .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--at-blue),var(--at-orange));border-radius:99px;transition:width .4s ease}
.at-free-ship.done{border-color:#bfe3c8;background:#edf9ef;color:#1c7c33}
.at-lowstock{color:#b3540a;font-size:.95rem;margin:8px 0}
.at-404{text-align:center;padding:70px 20px 90px}
.at-404 .code{font-size:96px;font-weight:800;line-height:1;color:var(--at-orange);margin:0 0 10px}
.at-404 h1{font-size:28px;margin:0 0 12px;color:var(--at-navy)}
.at-404 .hint{opacity:.75;margin-bottom:24px}
.at-404 .search{max-width:420px;margin:0 auto 26px}
.at-404 .search input[type=search]{width:100%;padding:12px 16px;border:2px solid var(--at-line);border-radius:10px;font-size:15px}
.at-404 .cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.at-404 .cats a{padding:8px 16px;background:#fff;border:1px solid var(--at-line);border-radius:99px;font-size:.9rem;font-weight:600;color:var(--at-navy)}
.at-404 .cats a:hover{border-color:var(--at-orange);color:var(--at-orange)}
.at-404 .btn-home{display:inline-block;padding:13px 30px;background:var(--at-blue);color:#fff;border-radius:10px;font-weight:700}

/* ---------- v1.0.2 Mega menu (v1.1.0: full nav-bar width, fixed position) ---------- */
.at-menu > li.at-has-children > a { position: relative; }
.at-mega {
  /* `inset-inline: 0` sizes the panel to its CONTAINING BLOCK, which is
     `.at-nav .container` (position: relative), not the hovered <li> - `.at-menu >
     li` is position:static and only the inner `> a` is relative, and the panel is
     a sibling of that `a`. That is why the panels used to span the whole viewport
     (1440px) while the store grid was 1240px wide. Capping the container fixes it
     at the source; max-width below is a second, explicit lock so the panels stay
     tied to the store width even if the containing block is ever re-parented. */
  position: absolute; top: 100%; inset-inline: 0; z-index: 960;
  max-width: var(--at-cw, 1240px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.at-menu > li:hover > .at-mega,
.at-menu > li:focus-within > .at-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.at-mega-inner {
  background: #fff; width: 100%;
  border-radius: 0 0 12px 12px; box-shadow: 0 18px 44px rgba(12,41,71,.22);
  padding: 14px 18px 18px;
}
.at-mega-all {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--at-blue);
  padding: 8px 10px; margin: 0 0 10px; border-radius: 8px;
  background: var(--at-bg);
}
.at-mega-all:hover { background: #e3eefb; }
.at-mega-list {
  list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: 22px;
}
.at-mega-list li { break-inside: avoid; }
.at-mega-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  color: var(--at-text); font-size: 13.5px;
}
.at-mega-list a:hover { background: var(--at-bg); color: var(--at-blue); }
.at-mega-list em {
  font-style: normal; font-size: 11px; font-weight: 600; color: #7d93a9;
  background: #eef3f8; border-radius: 999px; padding: 1px 7px;
}
.at-menu > li.at-highlight > a { background: var(--at-orange); color: #111827; }
.at-menu > li.at-highlight > a:hover { background: var(--at-orange-dark); color: #111827; }

/* ---------- v1.0.2 Shop layout + filters ---------- */
.at-shop-layout {
  display: grid; grid-template-columns: 252px minmax(0,1fr);
  gap: 28px; align-items: start; margin-top: 18px;
}
/* Filtering module off: no sidebar, results span the full row. */
.at-shop-layout.at-filters-off { grid-template-columns: 1fr; }
.at-filter-toggle {
  display: none; width: 100%; align-items: center; justify-content: center; gap: 8px;
  background: var(--at-blue); color: #fff; border: 0; border-radius: 10px;
  padding: 11px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  margin-bottom: 14px;
}
.at-filters {
  background: #fff; border: 1px solid #e3ebf3; border-radius: 14px;
  padding: 16px; position: sticky; top: 92px;
}
.at-filters-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid #edf2f7;
}
.at-filters-head strong { font-size: 15px; }
.at-freset { font-size: 12.5px; color: var(--at-orange-dark); font-weight: 600; }
.at-fgroup { padding: 12px 0; border-bottom: 1px solid #f0f4f8; }
.at-fgroup:last-of-type { border-bottom: 0; }
.at-fgroup h4 {
  margin: 0 0 8px; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #64798e;
}
.at-foptions { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.at-foptions label, .at-ftoggles label, .at-prot label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 7px; cursor: pointer; font-size: 13.5px;
}
.at-foptions label:hover, .at-ftoggles label:hover, .at-prot label:hover { background: var(--at-bg); }
.at-foptions input, .at-ftoggles input, .at-prot input { accent-color: var(--at-blue); width: 15px; height: 15px; }
.at-foptions span, .at-ftoggles span, .at-prot span { flex: 1; }
/* Per-term result counts.
 * The label span is `flex: 1`, so the count was left-aligned against whatever
 * width the longest term happened to produce - a 2-digit count sat next to the
 * label on a short row and drifted 40px right on a long one. A fixed track plus
 * tabular figures pins every count into the same right-hand column so the
 * numbers line up down the whole facet. */
.at-foptions em {
  flex: none;
  min-width: 34px;
  margin-inline-start: auto;
  text-align: center;
  font-style: normal; font-size: 11px; color: #7d93a9;
  background: #eef3f8; border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-weight: 600;
}
/* A facet narrowed to nothing should not read as a selectable option. */
.at-foptions label.is-empty { opacity: .45; }
.at-foptions label.on, .at-ftoggles label.on, .at-prot label.on { background: #eaf3fd; color: var(--at-blue); font-weight: 600; }
.at-frange { display: flex; align-items: center; gap: 8px; }
.at-frange input {
  width: 100%; min-width: 0; border: 1px solid #dbe5ee; border-radius: 8px;
  padding: 7px 9px; font-size: 13.5px;
}
.at-frange input:focus { outline: 2px solid rgba(11,92,171,.25); border-color: var(--at-blue); }
/* ---------- v1.2.138 Price slider (dual thumb) ---------- */
/* Forced LTR so the shared track geometry (and the JS left/right math) stay
   correct on the Arabic storefront; the number fields beside it still mirror
   with the page direction. */
.at-fslider { direction: ltr; position: relative; margin: 14px 2px 4px; height: 36px; }
.at-fslider .at-fsl-track {
  position: absolute; left: 0; right: 0; top: 14px; height: 4px;
  background: #e2e9f2; border-radius: 999px;
}
.at-fslider .at-fsl-fill { position: absolute; top: 0; bottom: 0; background: var(--at-blue); border-radius: 999px; }
.at-fslider input[type="range"] {
  position: absolute; left: 0; right: 0; top: 6px; width: 100%; height: 20px;
  margin: 0; padding: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.at-fslider input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; height: 4px; background: none; }
.at-fslider input[type="range"]::-moz-range-track { height: 4px; background: none; border: 0; }
.at-fslider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; margin-top: 0; border-radius: 50%;
  background: #fff; border: 2px solid var(--at-blue);
  box-shadow: 0 1px 4px rgba(16,54,94,.28); cursor: pointer;
}
.at-fslider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--at-blue);
  box-shadow: 0 1px 4px rgba(16,54,94,.28); cursor: pointer;
}
.at-fslider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid rgba(11,92,171,.35); }
.at-fslider input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid rgba(11,92,171,.35); }
.at-fslider .at-fsl-vals {
  position: absolute; left: 0; right: 0; bottom: -2px;
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--at-muted);
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .at-fslider .at-fsl-track { background: #22344a; }
html[data-theme="dark"] .at-fslider input[type="range"]::-webkit-slider-thumb { background: #0f1c2e; border-color: #7db3ee; }
html[data-theme="dark"] .at-fslider input[type="range"]::-moz-range-thumb { background: #0f1c2e; border-color: #7db3ee; }
html[data-theme="dark"] .at-fslider .at-fsl-vals { color: #9fb2cb; }
.at-ftoggles, .at-prot { display: flex; flex-direction: column; gap: 2px; }
.at-prot { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e6edf4; }
.at-fsubmit {
  width: 100%; margin-top: 12px; background: var(--at-fill); color: var(--at-fill-ink);
  border: 0; border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.at-fsubmit:hover { background: var(--at-fill-hover); }
.at-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.at-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #eaf3fd; color: var(--at-blue); border: 1px solid #cfe3f7;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.at-chip span { font-weight: 800; opacity: .65; }
.at-chip:hover { background: #dbeafd; }

/* ---------- v1.2.19 Smart (bucketed) facet pills + show-more + PJAX state ---------- */
.at-fpills {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: none; overflow: visible;
}
.at-fpills label {
  width: auto; padding: 0; border-radius: 999px;
}
.at-fpills label input {
  position: absolute; opacity: 0; pointer-events: none;
}
.at-fpills label span {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid #dbe5ee; border-radius: 999px; background: #fff;
  color: #40566c; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.at-fpills label span em {
  font-style: normal; font-size: 10.5px; color: #7d93a9; background: #eef3f8;
  border-radius: 999px; padding: 0 6px;
}
.at-fpills label.on span { background: #eaf3fd; border-color: #cfe3f7; color: var(--at-blue); }
.at-fpills label.on span em { background: #d6e7fb; color: var(--at-blue); }
.at-js .at-fextra { display: none; }
/* Expanding a group used to set style.display = '' on the extra rows, which
   removed the inline value and handed the row straight back to the
   `.at-js .at-fextra { display: none }` rule above — so the click revealed
   nothing and the button looked dead. Three classes beat two, so .is-shown
   wins and the row stays visible until the group is collapsed again. */
.at-js .at-foptions .at-fextra.is-shown { display: flex; }
/* "Show more" also has to grow the panel: the max-height:240px cap on
   .at-foptions otherwise keeps the box the same size and the click only adds
   an inner scrollbar. main.js puts .is-open on the list it expands, so the
   cap lifts only while a group is expanded. */
.at-foptions.is-open { max-height: none; overflow: visible; }
.at-fmore {
  display: block; margin: 8px auto 0; background: none; border: 0;
  color: var(--at-blue); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.at-fmore:hover { text-decoration: underline; }
.at-shop-layout.at-navigating {
  pointer-events: none; opacity: .55; transition: opacity .15s ease;
}
.at-shop-layout.at-navigating .at-filters { pointer-events: auto; opacity: 1; }

@media (max-width: 1080px) {
  .at-shop-layout { grid-template-columns: 216px minmax(0,1fr); gap: 20px; }
  .at-mega-list { columns: 2; }
}
@media (max-width: 900px) {
  .at-shop-layout { grid-template-columns: 1fr; }
  .at-filter-toggle { display: flex; }
  .at-filter-col { order: -1; }
  .at-filters { display: none; position: static; }
  .at-filter-col.open .at-filters { display: block; }
  .at-nav.open .at-mega { position: static; opacity: 1; visibility: visible; transform: none; display: none; }
  .at-nav.open li.submenu-open > .at-mega { display: block; }
  .at-nav.open .at-mega-inner { min-width: 0; max-width: none; box-shadow: none; border-radius: 0; padding: 0 0 8px; }
  .at-nav.open .at-mega-list { columns: 1; }
}

/* ---------- v1.0.3 collapsible filter groups + empty state ---------- */
.at-fgroup { padding: 4px 0; border-bottom: 1px solid #f0f4f8; }
details.at-fgroup > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #64798e;
  padding: 9px 2px;
}
details.at-fgroup > summary::-webkit-details-marker { display: none; }
details.at-fgroup > summary::after {
  content: ""; margin-inline-start: auto; width: 7px; height: 7px;
  border-inline-end: 2px solid #9db1c5; border-bottom: 2px solid #9db1c5;
  transform: rotate(45deg); transition: transform .18s;
}
details.at-fgroup[open] > summary::after { transform: rotate(225deg); }
details.at-fgroup[open] > summary { color: var(--at-blue); }
.at-fbadge {
font-style: normal; font-size: 10.5px; font-weight: 700;
background: var(--at-fill); color: var(--at-fill-ink);
border-radius: 999px; padding: 1px 6px; letter-spacing: 0;
}
.at-fcount {
  font-size: 11.5px; font-weight: 700; color: var(--at-blue);
  background: #eaf3fd; border-radius: 999px; padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.at-fbubble {
  display: inline-flex; align-items: center; justify-content: center;
min-width: 19px; height: 19px; border-radius: 999px;
background: var(--at-fill); color: var(--at-fill-ink);
font-size: 11.5px; font-weight: 800; padding: 0 5px;
}
.at-noresults {
  grid-column: 1 / -1; text-align: center;
  background: #fff; border: 1px dashed #d7e2ec; border-radius: 16px;
  padding: 46px 24px; margin-top: 18px; color: #64798e;
}
.at-noresults svg { opacity: .45; }
.at-noresults h3 { margin: 12px 0 6px; font-size: 20px; color: var(--at-text); }
.at-noresults p { margin: 0 auto 18px; max-width: 46ch; }
.at-noresults .at-btn {
  display: inline-block; background: var(--at-blue); color: #fff;
  border-radius: 10px; padding: 11px 22px; font-weight: 700; font-size: 14px;
}
.at-noresults .at-btn:hover { background: var(--at-blue-dark); }

/* ============================================================
   v1.0.5 UX & Aesthetics polish
   ============================================================ */

/* ---------- Typography ---------- */
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
html[lang="ar"] body { font-family: "Tajawal", "Inter", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }

/* ---------- Micro-interactions & a11y ---------- */
:focus-visible { outline: 2px solid var(--at-orange); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(246,139,31,.28); }
* { scrollbar-width: thin; scrollbar-color: #b9c9da transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3d2e2; border-radius: 8px; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #a7bcd2; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Header elevation ---------- */
.at-headwrap { transition: transform .4s cubic-bezier(.25,1,.5,1); }
.at-header { transition: box-shadow .25s ease, min-height .4s cubic-bezier(.25,1,.5,1), transform .4s cubic-bezier(.25,1,.5,1); }
.at-header-main { transition: max-height .4s cubic-bezier(.25,1,.5,1), transform .4s cubic-bezier(.25,1,.5,1), opacity .3s ease, visibility .3s; }
.at-topbar { transition: max-height .4s cubic-bezier(.25,1,.5,1), transform .4s cubic-bezier(.25,1,.5,1), opacity .3s ease, visibility .3s; }
.at-header.scrolled { box-shadow: 0 6px 24px rgba(12,41,71,.12); }
/* Auto-hide on scroll down (classes toggled by main.js). The .at-headwrap is
 * the single sticky unit (topbar + header + nav) at every width, so hiding
 * translates the whole unit out of view; scrolling up brings it back — first
 * straight to the compact "mid" state, then, once near the top, fully back.
 * Respects prefers-reduced-motion because the JS never adds the class for
 * those users (and the global reduced-motion rule zeroes the transition). */
.at-headwrap.at-hdr-hide { transform: translateY(-100%); }

/* Desktop compact state ("mid"), reached ~60px down: the top contact bar
 * collapses and the logo/header/nav shrink, leaving a slim header plus the
 * mini navbar pinned. Scoped to >=769px so the mobile staged reveal (which
 * also uses .at-hdr-mid, with a different meaning) stays untouched. */
@media (min-width: 769px) {
  .at-headwrap.at-hdr-mid .at-topbar {
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
  }
  .at-headwrap.at-hdr-mid .at-header .container { min-height: 62px; }
  .at-headwrap.at-hdr-mid .at-logo img { max-height: 52px; }
  .at-headwrap.at-hdr-mid .at-menu > li > a { padding: 9px; }

  /* The header owns the top stacking band so the search suggestions
   * (.at-sugg) escape the header's backdrop-filter stacking context and
   * paint above the nav's mega/submenu panels (z-index 950/960). */
  .at-header { position: relative; z-index: 1000; }
}

/* In-page anchors must not land under the sticky header. */
html { scroll-padding-top: 120px; }

/* ---------- Hero ---------- */
.at-hero-art svg { animation: at-float 7s ease-in-out infinite; transform-origin: center; }
@keyframes at-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-1.5deg); }
}
.at-hero-stats {
  display: flex; gap: 0; margin-top: 30px;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px;
}
.at-hero-stats a.at-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding-inline-end: 26px; margin-inline-end: 26px;
  border-inline-end: 1px solid rgba(255,255,255,.14);
  text-decoration: none; transition: transform .18s ease;
}
.at-hero-stats a.at-stat:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.at-hero-stats strong { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }
.at-hero-stats span { font-size: 12px; color: #b9cfe6; text-transform: uppercase; letter-spacing: .08em; transition: color .18s ease; }
.at-hero-stats a.at-stat:hover { transform: translateY(-2px); }
.at-hero-stats a.at-stat:hover span { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.at-hero-stats a.at-stat:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 600px) {
  .at-hero-stats { flex-wrap: wrap; row-gap: 14px; }
}

/* ---------- Browse pages (brands / categories listings) ---------- */
.at-browse { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.at-bc {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #dbe4ef; background: #fff; border-radius: 999px;
  padding: 9px 17px; font-size: 14px; font-weight: 600; color: var(--at-text);
  text-decoration: none; transition: all .15s ease; cursor: pointer;
}
.at-bc:hover { border-color: var(--at-blue); color: var(--at-blue); box-shadow: 0 3px 10px rgba(16,54,94,.08); transform: translateY(-1px); }
.at-bc-c {
  font-size: 11.5px; font-weight: 700; line-height: 1;
  color: var(--at-muted); background: #eef2f7; border-radius: 999px; padding: 4px 8px;
}
.at-bc:hover .at-bc-c { color: var(--at-blue); background: #e7f0fb; }

/* quick brand filter */
.at-bsearch { margin-bottom: 14px; position: relative; }
.at-bsearch input {
  width: 100%; padding: 10px 14px; font: inherit; font-size: 13.5px;
  border: 1px solid #dbe4ef; border-radius: 999px; background: #fbfcfe; color: var(--at-text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.at-bsearch input:focus { border-color: var(--at-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; }

/* ---------- two-pane explorer (desktop) ---------- */
.atx-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
.at-bc[hidden] { display: none !important; }
.atx-side {
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  border: 1px solid #dbe4ef; border-radius: 16px; background: #fff;
  padding: 14px; box-shadow: 0 6px 22px rgba(16,54,94,.06);
}
.atx-side .at-bsearch { margin: 0 0 10px; }
.atx-side-list { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding-inline-end: 4px; scrollbar-width: thin; }
.atx-side-list .at-bc { justify-content: space-between; border-radius: 11px; }
.atx-side-list .at-bc.on {
  border-color: var(--at-blue); color: var(--at-blue); background: #eef5fd;
  box-shadow: inset 3px 0 0 var(--at-blue);
}
html[dir="rtl"] .atx-side-list .at-bc.on { box-shadow: inset -3px 0 0 var(--at-blue); }
.atx-main { min-width: 0; }

/* brand-named catch-all category -> single highlighted overview chip */
.atx-self { margin: 2px 0 16px; }
.atx-self .cat-chip { border-color: #b9d4f2; background: #f3f9ff; color: var(--at-blue); }
.atx-self .cat-chip::before { border-color: #a8c8ea; }
.atx-self .cat-chip:hover { border-color: var(--at-blue); background: #e9f3fd; }
.atx-self .cat-chip.on { border-color: var(--at-blue); background: #e7f0fb; color: var(--at-blue); }
.atx-self .cat-chip.on::before { content: '\2713'; border-color: var(--at-blue); background: var(--at-blue); color: #fff; }
.atx-self .cat-c, .atx-self .cat-chip:hover .cat-c, .atx-self .cat-chip.on .cat-c { background: #dbe9fa; color: var(--at-blue); }
.atx-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; color: var(--at-muted);
  border: 1.6px dashed #cdd9e6; border-radius: 16px;
  padding: 64px 24px; background: #fbfcfe;
}
.atx-pick p { margin: 0; font-size: 14.5px; font-weight: 600; max-width: 340px; line-height: 1.6; }
.atx-pick svg { opacity: .55; }
html[data-theme="dark"] .atx-side, html[data-theme="dark"] .atx-pick { background: var(--at-card, #10233a); }
html[data-theme="dark"] .atx-pick { border-color: #2a3b52; }

@media (max-width: 1023px) {
  .atx-split { grid-template-columns: 1fr; gap: 14px; }
  .atx-side { position: static; max-height: none; }
  .atx-side-list { flex-direction: row; flex-wrap: wrap; max-height: 210px; overflow-y: auto; }
  .atx-side-list .at-bc { width: auto; justify-content: flex-start; border-radius: 999px; padding: 7px 15px; font-size: 13.5px; }
}
.at-bg-t { margin: 26px 0 4px !important; font-size: 17px !important; font-weight: 800; color: var(--at-text); }
.at-bg-g { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Brands explorer panel ---------- */
.at-bc.on { border-color: var(--at-blue); color: var(--at-blue); background: #eef5fd; box-shadow: 0 3px 10px rgba(16,54,94,.10); }
.atxp {
  border: 1px solid #dbe4ef; border-radius: 16px;
  background: #fff; padding: 0 20px 22px; box-shadow: 0 10px 30px rgba(16,54,94,.07);
}
.atxp-bar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid var(--at-line);
  padding: 14px 0 12px; margin-bottom: 4px;
}
html[data-theme="dark"] .atxp, html[data-theme="dark"] .atxp-bar { background: var(--at-card, #10233a); }
.atxp-all { font-size: 13px; font-weight: 700; color: var(--at-blue); text-decoration: none; }
.atxp-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.at-xg-t {
  margin: 18px 0 9px !important; font-size: 13px !important; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--at-muted);
  display: flex; align-items: center; gap: 10px;
}
.at-xg-t::after { content: ''; flex: 1; height: 1px; background: #e8eef6; }
html[data-theme="dark"] .at-xg-t::after { background: #24344a; }
.at-xg { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 8px; }
.at-xw { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cat-chip {
  width: 100%; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 9px;
  cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
  border: 1.4px solid #dbe4ef; background: #fff; color: var(--at-text);
  padding: 7px 13px; border-radius: 11px; transition: all .15s ease; text-align: start;
}
.cat-chip > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-chip::before {
  content: ''; flex: none; order: -1;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.6px solid #cdd9e6; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: transparent;
  transition: all .15s ease;
}
.cat-chip:hover { border-color: var(--at-green); color: var(--at-green); background: #f2fbf5; }
.cat-chip.on { border-color: var(--at-green); color: var(--at-green); background: #ecfaf1; }
.cat-chip.on::before { content: '\2713'; border-color: var(--at-green); background: var(--at-green); color: #fff; }
.cat-c { flex: none; font-size: 11.5px; font-weight: 800; line-height: 1; background: #eef2f7; color: var(--at-muted); border-radius: 999px; padding: 5px 8px; }
.cat-chip.on .cat-c, .cat-chip:hover .cat-c { background: #dcf5e5; color: var(--at-green); }
.at-xd { width: 100%; }
.atxd-load, .atxd-more { padding: 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--at-muted); }
.atxd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--at-muted); padding-top: 2px; }
.atxd-head a { color: var(--at-blue); text-decoration: none; }
.atxd-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.atx-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 6px; }
.atx-pc {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid #e6ecf4; border-radius: 12px; background: #fff;
  padding: 9px; text-decoration: none; transition: all .15s ease;
}
.atx-pc:hover { border-color: #bcd4ee; box-shadow: 0 6px 16px rgba(16,54,94,.09); transform: translateY(-2px); }
.atx-pcm { display: block; aspect-ratio: 1 / 1; background: radial-gradient(120% 120% at 50% 0%, #f8fafc 60%, #eef2f7 100%); border-radius: 9px; overflow: hidden; }
.atx-pcm img { width: 100%; height: 100%; object-fit: contain; padding: 7px; margin: 0 !important; }
.atx-pct {
  font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--at-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atx-pcp { font-size: 12.5px; font-weight: 800; color: var(--at-blue); }
.atx-pc .dot { position: absolute; top: 13px; inset-inline-end: 13px; width: 8px; height: 8px; border-radius: 50%; }
.atx-pc .dot.in { background: #22c55e; box-shadow: 0 0 0 3px #22c55e21; }
.atx-pc .dot.out { background: #94a3b8; box-shadow: 0 0 0 3px #94a3b821; }
.atxd-more .atx-morebtn { cursor: pointer; color: var(--at-blue); font-weight: 700; }
.atxd-more .atx-morebtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.atxp-load, .atxp-empty { padding: 26px 4px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--at-muted); }

/* ---------- Category tiles: hue variants ---------- */
.at-cat-tile:nth-child(5n+2) .at-cat-icon { background: linear-gradient(135deg, var(--at-orange), #ffb056); color: #111827; box-shadow: 0 8px 18px rgba(246,139,31,.28); }
.at-cat-tile:nth-child(5n+3) .at-cat-icon { background: linear-gradient(135deg, var(--at-green), #4cc97a); box-shadow: 0 8px 18px rgba(30,158,74,.28); }
.at-cat-tile:nth-child(5n+4) .at-cat-icon { background: linear-gradient(135deg, #7b52d3, #a98ae8); box-shadow: 0 8px 18px rgba(123,82,211,.28); }
.at-cat-tile:nth-child(5n+5) .at-cat-icon { background: linear-gradient(135deg, #0e9bb5, #4cc4dc); box-shadow: 0 8px 18px rgba(14,155,181,.28); }
.at-cat-tile .at-cat-icon { transition: transform .22s ease; }
.at-cat-tile:hover .at-cat-icon { transform: scale(1.09) rotate(-3deg); }

/* ---------- Product cards (legacy overrides removed in v1.1 card redesign) ---------- */

/* ---------- Mega menu current path ---------- */
.at-mega-list a.current,
.at-mega-list a.current-cat { background: #eaf3fd; color: var(--at-blue); font-weight: 600; }
.at-menu > li.current-menu-item > a,
.at-menu > li.current-product-cat-ancestor > a { background: var(--at-blue-dark); box-shadow: inset 0 -3px 0 var(--at-orange); }

/* ---------- Current menu item (class injected at render time by at_nav_mark_current) ---------- */
.at-menu > li > a.is-current,
.at-menu > li > a.is-current-ancestor { background: var(--at-blue-dark); box-shadow: inset 0 -3px 0 var(--at-orange); }
.at-mega-list a.is-current,
.at-mega-all.is-current { background: #eaf3fd; color: var(--at-blue); font-weight: 600; }

/* ---------- Filter navigation feedback ---------- */
.at-shop-layout { transition: opacity .15s ease; }
.at-shop-layout.at-navigating { opacity: .45; pointer-events: none; }

/* ---------- Quantity steppers (unified: product + cart) ---------- */
div.quantity {
  display: inline-flex; align-items: center; gap: 0; margin: 0;
  border: 1px solid var(--at-line); border-radius: 9px;
  overflow: hidden; background: #fff;
}
div.quantity .qty {
  width: 54px; height: 42px; margin: 0; padding: 0;
  text-align: center; font-size: 14px; font-weight: 600; color: var(--at-ink);
  border: none !important; box-shadow: none !important; background: transparent;
  appearance: textfield; -moz-appearance: textfield;
}
div.quantity .qty::-webkit-outer-spin-button,
div.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.at-qbtn {
  width: 36px; height: 42px; padding: 0; flex: 0 0 auto;
  border: none; background: var(--at-bg); cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1; color: var(--at-navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.at-qbtn:hover { background: #e3eefb; color: var(--at-blue); }
.at-qbtn:active { background: #d5e5f7; }
html[data-theme="dark"] .at-qbtn:hover { background: #23445f; color: var(--at-navy); }
html[data-theme="dark"] .at-qbtn:active { background: #1e3a55; color: var(--at-navy); }
.woocommerce div.product form.cart div.quantity { margin-inline-end: 10px; }

/* ---------- Toast ---------- */
.at-toast {
  position: fixed; bottom: 24px; inset-inline-start: 50%; z-index: 1200;
  transform: translateX(-50%) translateY(20px);
  background: var(--at-navy); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 32px rgba(12,41,71,.35);
  display: inline-flex; align-items: center; gap: 9px;
  opacity: 0; transition: all .3s ease; pointer-events: none;
}
html[dir="rtl"] .at-toast { transform: translateX(50%) translateY(20px); }
.at-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
html[dir="rtl"] .at-toast.show { transform: translateX(50%) translateY(0); }
.at-toast svg { color: #4cc97a; flex: none; }

/* ---------- Cart badge pulse ---------- */
.at-cart-count.pulse { animation: at-pulse .5s ease; }
@keyframes at-pulse {
  0% { transform: scale(1); } 40% { transform: scale(1.45); background: var(--at-green); } 100% { transform: scale(1); }
}

/* ---------- Newsletter success ---------- */
.at-news-ok {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  color: #8fe3ab; font-size: 13px; font-weight: 600;
}

/* Honor the [hidden] flag: the message must only appear after a successful join. */
.at-news-ok[hidden] { display: none; }

/* ---------- Mobile sticky ATC bar ----------
 * The .at-mbar rules that used to live here are gone. The bar was rendered
 * unconditionally by at_mobile_atc_bar() while the Sticky Bar module renders
 * .atx-stickybar on the same product pages, and BOTH were pinned to bottom:0
 * - so a phone showed two bars occupying the same 64px strip, on top of the
 * 5-icon bottom nav. Only the module-gated .atx-stickybar remains; it is
 * offset above the nav further down the file. */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================= v1.0.7 — cart sizing, compact coupon, newsletter state ================= */
/* Cart quantity inherits the unified stepper; only compact sizing here */
.woocommerce table.shop_table.cart td.product-name div.quantity { margin: 6px 0 2px; }
.woocommerce table.shop_table.cart td.product-name div.quantity .qty,
.woocommerce table.shop_table.cart td.product-name .at-qbtn { height: 36px; }
.woocommerce table.shop_table.cart td.product-name div.quantity .qty { width: 48px; font-size: 13.5px; }
.woocommerce table.shop_table.cart td.product-name .at-qbtn { width: 30px; font-size: 14px; }

/* Coupon row — compact, theme-consistent */
.woocommerce-cart table.cart td.actions { padding-top: 20px; }
.woocommerce-cart table.cart td.actions .coupon {
	display: inline-flex; align-items: center; gap: 8px;
	float: none !important; margin-inline-end: 12px;
}
.woocommerce-cart table.cart td.actions .coupon #coupon_code {
	width: 210px; max-width: 60vw; height: 40px;
	padding: 0 14px; font-size: 13px; color: var(--at-ink);
	background: #fff; border: 1px solid var(--at-line); border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-cart table.cart td.actions .coupon #coupon_code::placeholder { color: #9aa7b4; opacity: 1; }
.woocommerce-cart table.cart td.actions .coupon #coupon_code:focus {
	outline: none; border-color: var(--at-blue);
	box-shadow: 0 0 0 3px rgba(11,92,203,.12);
}
.woocommerce-cart table.cart td.actions .coupon .button {
	height: 40px; padding: 0 18px; white-space: nowrap;
	border-radius: 8px !important;
}

/* Footer newsletter — subscribed state */
.at-news-done {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: rgba(46,160,67,.1); border: 1px solid rgba(46,160,67,.35);
	border-radius: 9px; padding: 10px 14px; margin-top: 2px;
}
.at-news-done svg { color: #3fb950; flex: 0 0 auto; }
.at-news-done span { font-size: 13px; color: #dfe8f2; font-weight: 600; }
.at-news-done a { font-size: 12.5px; color: #f0b429; text-decoration: underline; text-underline-offset: 3px; }
.at-news-done a:hover { color: #ffd166; }

/* My Account — newsletter card */
.woocommerce-account .atnl-card {
	max-width: 560px; background: #fff; border: 1px solid var(--at-line);
	border-radius: 12px; padding: 22px 24px; margin-bottom: 18px;
}
.woocommerce-account .atnl-card h3 { margin: 0 0 6px; font-size: 17px; color: var(--at-navy); }
.woocommerce-account .atnl-status {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.woocommerce-account .atnl-status.on { background: rgba(46,160,67,.12); color: #2ea043; }
.woocommerce-account .atnl-status.off { background: #eef2f7; color: var(--at-muted); }
.woocommerce-account .atnl-card p { font-size: 13.5px; color: var(--at-muted); margin: 0 0 16px; }
.woocommerce-account .atnl-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.at-legal-bar { border-top: 1px solid rgba(255,255,255,.08); margin-top: 28px; padding: 14px 0; }
.at-legal-bar .container { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.at-legal-bar a { color: #9fb2c8; font-size: 12.5px; text-decoration: none; transition: color .15s; }
.at-legal-bar a:hover { color: #fbbf24; }

/* ================= v1.1.9 - dark mode, skeletons, sticky buy bar ================= */
.at-topbar-right .at-theme-toggle .at-i-sun,
.at-theme-toggle .at-i-sun { display: none !important; }
html[data-theme="dark"] .at-topbar-right .at-theme-toggle .at-i-sun,
html[data-theme="dark"] .at-theme-toggle .at-i-sun { display: flex !important; }
html[data-theme="dark"] .at-topbar-right .at-theme-toggle .at-i-moon,
html[data-theme="dark"] .at-theme-toggle .at-i-moon { display: none !important; }

html[data-theme="dark"] {
  --at-bg: #0d1622;
  --at-line: #22344a;
  --at-text: #dbe7f4;
  --at-muted: #8fa6bd;
  --at-navy: #dbe7f4;
  --at-dark: #0a1420;
  --at-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  /* Card/panel surface and primary text, as aliases of the tokens above so
     the same rules work in both themes. --at-card-bg is a step lighter than the
     #0f1c2e body so panels read as raised rather than as holes. */
  --at-card-bg: #16243a;
  --at-text-primary: #eaf2fb;
  /* Same fill as the light theme on purpose. A button's contrast is measured
     against its OWN label, not against the page canvas, so a dark page does
     not change the pairing: #111827 on #f68b1f is 7.29:1 in both modes. The
     dark-only lifts that used to live here (#a85500 / #8f4900, plus the
     #c96a00 hover before it) existed only to keep WHITE ink readable and are
     unnecessary now that the ink is near-black. Do not re-add a mode-specific
     fill without re-measuring it. */
  --at-fill: #f68b1f;
  --at-fill-hover: #e07c12;
  --at-fill-ink: #111827;
}
html[data-theme="dark"] body { background: #0f1c2e; color: var(--at-text); }
html[data-theme="dark"] .skip-link:focus,
html[data-theme="dark"] .at-header,
html[data-theme="dark"] .at-search form,
html[data-theme="dark"] .at-mega-inner,
html[data-theme="dark"] .at-submenu,
html[data-theme="dark"] .at-trust,
html[data-theme="dark"] .at-filters,
html[data-theme="dark"] .at-cat-tile,
html[data-theme="dark"] .at-info-card,
html[data-theme="dark"] .atc,
html[data-theme="dark"] .at-sugg,
html[data-theme="dark"] .at-noresults,
html[data-theme="dark"] .at-404 .cats a,
html[data-theme="dark"] .woocommerce .widget-area .widget,
html[data-theme="dark"] .woocommerce .woocommerce-ordering select,
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li,
html[data-theme="dark"] .woocommerce-cart table.cart td.actions .coupon #coupon_code,
html[data-theme="dark"] .woocommerce-pagination ul li span,
html[data-theme="dark"] div.quantity,
html[data-theme="dark"] .woocommerce-account .atnl-card { background: #132437; color: var(--at-text); border-color: var(--at-line); }
  /* --at-navy inverts to #dbe7f4 in dark mode, so every rule pairing it with a
     hard-coded #fff ink collapses to 1.25:1. Paint the ink from --at-dark
     instead (14.77:1). Same for the two rules that hard-code a #fff surface. */
  html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--at-navy); border-color: var(--at-navy); }
  html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--at-dark); }
  html[data-theme="dark"] .at-toast { color: var(--at-dark); }
  html[data-theme="dark"] .at-backtop { color: var(--at-dark); }
  html[data-theme="dark"] .at-backtop:hover { color: #fff; }
  html[data-theme="dark"] .at-slider-btn { background: #132437; border-color: var(--at-line); color: var(--at-text); }
  html[data-theme="dark"] .at-slider-btn:hover { background: var(--at-blue, #0b5cab); color: #fff; }

/* The sticky header is a translucent tinted bar. The backdrop-filter blur
   was removed in 1.2.136: a blurred sticky header re-samples the backdrop
   every frame while it slides, which stutters on low-power devices. The
   background opacity was raised so the bar stays legible without it. */
html[data-theme="dark"] .at-header {
  background: rgba(15, 28, 46, 0.92);
}

ul.products li.product a.at-skel-img::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, #eef2f7 40%, #f9fbfd 50%, #eef2f7 60%);
  background-size: 200% 100%;
  animation: at-skel 1.2s infinite linear;
  border-radius: 10px;
}
ul.products li.product img.at-skel-hide { opacity: 0; transition: opacity .25s; }
@keyframes at-skel { to { background-position: -200% 0; } }
html[data-theme="dark"] ul.products li.product a.at-skel-img::before {
  background: linear-gradient(100deg, #16283c 40%, #1e3a58 50%, #16283c 60%);
}

/* Sits ABOVE the 5-icon bottom nav, never on top of it.
 * `bottom` = the 65px the nav reserves (56px .at-bn-item + 1px border + 8px
 * breathing room, see the nav block below). The safe-area inset is consumed
 * by the nav itself, so it is deliberately NOT repeated in this bar's padding
 * - adding it twice left a transparent strip the bar did not cover.
 * z-index 960 clears the nav's 950 and stays far below the modal layers. */
.atx-stickybar {
  position: fixed; left: 0; right: 0;
  bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  z-index: 960;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: #10365e; color: #fff;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(110%); transition: transform .25s ease;
}
.atx-stickybar.show { transform: none; }
.atx-stickybar .atx-sb-info { min-width: 0; display: grid; gap: 1px; }
.atx-stickybar .atx-sb-info b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atx-stickybar .atx-sb-info span { font-size: 14.5px; font-weight: 800; color: #ffd08a; }
/* §19 notice, carried over from the deleted .at-mbar. */
.atx-stickybar .atx-sb-tax { font-size: 10.5px; font-style: normal; color: #b9cde2; line-height: 1.3; }
.atx-stickybar .at-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; }
/* 768px, not 767px: .at-bottomnav switches on at max-width:768px. At exactly
 * 768px the old 767px query left the nav visible with no ATC bar above it. */
@media (max-width: 768px) {
  .atx-stickybar { display: flex; }
  /* nav 65px + this bar ~64px */
  body.atx-has-sb { padding-bottom: calc(129px + env(safe-area-inset-bottom, 0px)); }
  /* Lift back-to-top clear of the ATC bar, but only while it is on screen. */
  body.atx-has-sb .at-backtop { bottom: calc(135px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ Brands explorer v2 ============ */
.atxp { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.atxp.open { opacity: 1; transform: none; }
.atxp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--at-line); padding-bottom: 12px; margin-bottom: 14px;
}
.atxp-crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; min-width: 0; }
.atxp-crumbs b { color: var(--at-blue); font-weight: 800; }
.atxp-sep { color: var(--at-muted); font-size: 16px; line-height: 1; }
.atxp-root {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--at-muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: color .15s, text-decoration-color .15s;
}
.atxp-root:hover { color: var(--at-blue); text-decoration-color: currentColor; }
.atxp-tools { display: inline-flex; align-items: center; gap: 14px; }
.atxp-close {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--at-line); background: #fff; color: var(--at-muted);
  border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1;
  transition: all .15s;
}
.atxp-close:hover { border-color: var(--at-red, #d64545); color: var(--at-red, #d64545); background: #fdf1f1; }
html[data-theme="dark"] .atxp-close { background: transparent; }
html[data-theme="dark"] .atxp-close:hover { background: rgba(214,69,69,.12); }

/* skeletons */
.at-sk {
  display: block; border-radius: 8px;
  background: linear-gradient(100deg, #eef2f7 40%, #f7fafc 50%, #eef2f7 60%);
  background-size: 200% 100%;
  animation: at-skel 1.2s linear infinite;
}
.at-sk-t { height: 14px; width: 180px; margin: 4px 0; }
.at-sk-c { height: 34px; width: 150px; }
.at-sk-card { padding: 0; border-radius: 12px; }
.at-sk-img { aspect-ratio: 1/1; border-radius: 10px; margin-bottom: 8px; }
.at-sk-l { height: 11px; width: 90%; margin-top: 6px; }
.at-sk-l.short { width: 55%; }
html[data-theme="dark"] .at-sk {
  background: linear-gradient(100deg, #16283c 40%, #1e3a58 50%, #16283c 60%);
  background-size: 200% 100%;
}

/* product cards v2 */
.atx-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.atx-pc2 {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--at-line); border-radius: 12px; padding: 10px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.atx-pc2:hover { box-shadow: 0 6px 20px rgba(16,54,94,.10); transform: translateY(-2px); border-color: #cfe0f2; }
.atx-pc2.oos { opacity: .78; }
.atx-pc2 .atx-pcm { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; background: #f5f8fb; }
.atx-pc2 .atx-pcm img { width: 100%; height: 100%; object-fit: contain; display: block; }
.atx-pct2 { margin: 9px 0 4px !important; font-size: 13px; font-weight: 700; line-height: 1.35; min-height: 2.7em; }
.atx-pct2 a { color: var(--at-navy); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atx-pct2 a:hover { color: var(--at-blue); }
.atx-prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 9px; flex-wrap: wrap; }
.atx-stock { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.atx-stock i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.atx-stock.in { background: #ecfaf1; color: #1e9e50; }
.atx-stock.out { background: #f1f3f7; color: #98a3b3; }
.atx-price { font-size: 14.5px; font-weight: 800; color: var(--at-navy); }
.atx-pact { margin-top: auto; }
.atx-pact .atc-cartbtn { width: 100%; justify-content: center; font-size: 12.5px; padding: 9px 10px; }
.atx-pact .atc-cartbtn.choose-option { background: #fff; color: var(--at-blue); border: 1px solid var(--at-blue); }
.atx-pact .atc-cartbtn.choose-option:hover { background: #eef5fd; }
.atxd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 12px; font-size: 13.5px; font-weight: 700; color: var(--at-muted);
}
.atxd-more { text-align: center; padding: 14px 0 2px; }
.atx-morebtn {
  border: 1px solid var(--at-blue); color: var(--at-blue); background: #fff;
  border-radius: 999px; padding: 9px 26px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.atx-morebtn:hover:not(:disabled) { background: var(--at-blue); color: #fff; }
.atx-morebtn:disabled { opacity: .55; cursor: wait; }
@media (max-width: 480px) {
  .atx-pgrid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .atxp-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ================= Dark mode refinement (storefront readability) ================= */
/* Hero keeps a dark gradient in dark mode (--at-navy flips to light, which would
   create a bright unreadable band across the middle of the hero) */
html[data-theme="dark"] .at-hero {
  background:
    radial-gradient(700px 340px at 85% -10%, rgba(246,139,31,.20), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(77,163,255,.30), transparent 60%),
    linear-gradient(120deg, #0a1420 0%, #0f2b4c 55%, #124a7d 100%);
}
html[data-theme="dark"] .at-hero-kicker { color: #ffd9ae; border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .at-trust { background: #101c2b; }
html[data-theme="dark"] .at-trust-item strong,
html[data-theme="dark"] .at-section-head h2,
html[data-theme="dark"] .at-info-card h3 { color: #eaf2fb; }
html[data-theme="dark"] .at-trust-icon {
  background: linear-gradient(135deg, #1b3350, #16304f); color: #7db3ee;
}
html[data-theme="dark"] .at-cat-tile {
  color: #eaf2fb; background: #132437;
}
html[data-theme="dark"] .at-cat-tile:hover {
  border-color: #2f4a6b; color: #7db3ee;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}

/* product cards (WooCommerce loop) */
html[data-theme="dark"] .atc-title a { color: #dbe7f4; }
html[data-theme="dark"] .atc-title a:hover { color: #7db3ee; }
html[data-theme="dark"] .at-card-brand {
  color: #7db3ee; background: #1b3350;
}
html[data-theme="dark"] .at-card-brand:hover { color: #a8cdf5; background: #243f5f; }

/* card action buttons */
html[data-theme="dark"] .atc-actions button {
  background: rgba(21,36,54,.92); border-color: #2a3b52; color: #b9cde0;
  box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
html[data-theme="dark"] .atc-actions button:hover { color: #7db3ee; border-color: #3a5a82; }
html[data-theme="dark"] .atx-wish-btn.on {
  color: #fda4af !important; border-color: #7f1d1d !important; background: #2a1418 !important;
}
html[data-theme="dark"] .atx-cmp-btn.on {
  color: #7db3ee !important; border-color: #2f4a6b !important; background: #14273c !important;
}
html[data-theme="dark"] .atc-morebtn { color: #8fa6bd; }
html[data-theme="dark"] .atc-morebtn:hover { background: #1b2c42; color: #7db3ee; }

/* add-to-cart + notify buttons */
html[data-theme="dark"] .atc-cartbtn {
  background: #1b3350 !important; color: #7db3ee !important;
}
html[data-theme="dark"] .atc-cartbtn:hover {
  background: var(--at-blue) !important; color: #fff !important;
  box-shadow: 0 5px 12px rgba(11,92,171,.32), 0 0 18px 5px rgba(11,92,171,.22);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .atc-cartbtn:hover { box-shadow: 0 5px 12px rgba(11,92,171,.32); }
}
html[data-theme="dark"] .atc-cartbtn.loading::after { color: #7db3ee; }
html[data-theme="dark"] .atc-notifybtn {
  border-color: #2a3b52; background: #132437; color: #a9bccf;
}
html[data-theme="dark"] .atc-notifybtn:hover { border-color: #7db3ee; color: #7db3ee; }
html[data-theme="dark"] .atc-foot .atx-notify input[type="email"] {
  border-color: #2a3b52; background: #0f1c2e; color: #dbe7f4;
}
html[data-theme="dark"] .atc-foot .atx-notify input[type="email"]::placeholder { color: var(--at-ctrl-placeholder); }

/* card grid v2 */
html[data-theme="dark"] .atx-pc2 { background: #132437; }
html[data-theme="dark"] .atx-pc2:hover { border-color: #2f4a6b; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
html[data-theme="dark"] .atx-pc2 .atx-pcm { background: #0f1c2e; }
html[data-theme="dark"] .atx-pct2 a { color: #dbe7f4; }
html[data-theme="dark"] .atx-pct2 a:hover { color: #7db3ee; }
html[data-theme="dark"] .atx-price { color: #eaf2fb; }
html[data-theme="dark"] .atx-stock.in { background: #12301d; color: #6ee7a0; }
html[data-theme="dark"] .atx-stock.out { background: #222a35; color: #9aa7b8; }
html[data-theme="dark"] .atx-pact .atc-cartbtn.choose-option {
  background: #1b3350; color: #7db3ee;
}
html[data-theme="dark"] .atx-pact .atc-cartbtn.choose-option:hover { background: #243f5f; }
html[data-theme="dark"] .atx-morebtn {
  background: #1b3350; color: #7db3ee;
}
html[data-theme="dark"] .atx-morebtn:hover:not(:disabled) { background: var(--at-blue); color: #fff; }

/* shop chrome */
html[data-theme="dark"] .woocommerce .woocommerce-ordering select { background: #132437; }
html[data-theme="dark"] .woocommerce div.product p.price { color: #7db3ee !important; }
html[data-theme="dark"] .atx-qv-price .amount { color: #7db3ee; }

/* quick view */
html[data-theme="dark"] .atx-qv-price { color: #7db3ee; }
html[data-theme="dark"] .atx-qv-attr span, html[data-theme="dark"] .atx-qv-attr b { color: #b9cde0; }
html[data-theme="dark"] .atx-qv-close { color: #8fa6bd; }
html[data-theme="dark"] .atx-qv-close:hover { color: #eaf2fb; }

/* browse / category chips */
html[data-theme="dark"] .at-bc {
  background: #132437; border-color: #2a3b52; color: #dbe7f4;
}
html[data-theme="dark"] .at-bc:hover {
  border-color: #7db3ee; color: #7db3ee; box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
html[data-theme="dark"] .at-bc-c { background: #22344a; color: #9fb2cb; }
html[data-theme="dark"] .at-bc:hover .at-bc-c { background: #1b3350; color: #7db3ee; }
html[data-theme="dark"] .at-bsearch input {
  border-color: #2a3b52; background: #0f1c2e; color: #dbe7f4;
}
html[data-theme="dark"] .at-bsearch input:focus {
  background: #0f1c2e; border-color: #7db3ee;
  box-shadow: 0 0 0 3px rgba(125,179,238,.15);
}
html[data-theme="dark"] .atx-side-list .at-bc.on {
  border-color: #7db3ee; color: #7db3ee; background: #1b3350;
  box-shadow: inset 3px 0 0 #7db3ee;
}
html[data-theme="dark"] .cat-chip {
  border-color: #2a3b52; background: #132437; color: #dbe7f4;
}
html[data-theme="dark"] .cat-chip::before {
  border-color: #3a5a82; background: #0f1c2e;
}
html[data-theme="dark"] .cat-chip:hover {
  border-color: #34d399; color: #6ee7a0; background: #12301d;
}
html[data-theme="dark"] .cat-chip.on {
  border-color: #34d399; color: #6ee7a0; background: #12301d;
}
html[data-theme="dark"] .cat-c,
html[data-theme="dark"] .cat-chip:hover .cat-c,
html[data-theme="dark"] .cat-chip.on .cat-c { background: #22344a; color: #9fb2cb; }
html[data-theme="dark"] .atx-self .cat-chip {
  border-color: #2f4a6b; background: #16283c; color: #7db3ee;
}
html[data-theme="dark"] .atx-self .cat-chip:hover,
html[data-theme="dark"] .atx-self .cat-chip.on {
  border-color: #7db3ee; background: #1b3350;
}
html[data-theme="dark"] .atx-self .cat-c,
html[data-theme="dark"] .atx-self .cat-chip:hover .cat-c,
html[data-theme="dark"] .atx-self .cat-chip.on .cat-c { background: #22344a; color: #7db3ee; }
html[data-theme="dark"] .at-bc.on {
  border-color: #7db3ee; color: #7db3ee; background: #1b3350;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

/* filter sidebar + active chips */
html[data-theme="dark"] .at-filters { background: #132437; border-color: #2a3b52; }
html[data-theme="dark"] .at-filters-head { border-bottom-color: #22344a; }
html[data-theme="dark"] .at-fgroup { border-bottom-color: #1b2c42; }
html[data-theme="dark"] .at-fgroup h4 { color: #9fb2cb; }
html[data-theme="dark"] .at-foptions label:hover,
html[data-theme="dark"] .at-ftoggles label:hover,
html[data-theme="dark"] .at-prot label:hover { background: #1b2c42; }
html[data-theme="dark"] .at-foptions em { color: #9fb2cb; background: #22344a; }
/* Count track: the light rule now pins a 34px right-hand column, so in dark
 * mode the badge only needs its surface matched, not re-aligned. */
html[data-theme="dark"] .at-fcount { background: #1b3350; color: #a8cdf5; }
html[data-theme="dark"] .at-foptions label.on em { background: #2f4a6b; color: #cfe3fb; }
html[data-theme="dark"] .at-foptions label.is-empty em { background: #182739; color: var(--at-muted); }
html[data-theme="dark"] .at-foptions label.on,
html[data-theme="dark"] .at-ftoggles label.on,
html[data-theme="dark"] .at-prot label.on { background: #1b3350; color: #a8cdf5; }
html[data-theme="dark"] .at-frange input {
  border-color: #2a3b52; background: #0f1c2e; color: #dbe7f4;
}
html[data-theme="dark"] .at-prot { border-top-color: #1b2c42; }
html[data-theme="dark"] .at-chip {
  background: #1b3350; color: #a8cdf5; border-color: #2f4a6b;
}
html[data-theme="dark"] .at-chip:hover { background: #243f5f; }
html[data-theme="dark"] .at-chip span { color: #7db3ee; }

/* widget area */
html[data-theme="dark"] .woocommerce .widget-area .widget h3 { color: #eaf2fb; }
html[data-theme="dark"] .woocommerce .widget-area .widget ul li a { color: #c3d4e6; }
html[data-theme="dark"] .woocommerce .widget-area .widget ul li a:hover { color: #7db3ee; }

/* pagination */
html[data-theme="dark"] .woocommerce-pagination ul li a,
html[data-theme="dark"] .woocommerce-pagination ul li span {
  background: #132437 !important; color: #c3d4e6 !important;
}
html[data-theme="dark"] .woocommerce-pagination ul li span.current {
  background: var(--at-blue) !important; color: #fff !important;
}

/* search suggestion dropdown */
html[data-theme="dark"] .at-sugg,
html[data-theme="dark"] .at-sugg .atx-drop { background: #132437; border-color: #2a3b52; }
html[data-theme="dark"] .at-sugg a:hover,
html[data-theme="dark"] .at-sugg li.active a,
html[data-theme="dark"] .at-sugg .atx-drop a:hover { background: #1b2c42; }
html[data-theme="dark"] .at-sugg-cats { background: #0f1c2e; border-bottom-color: #22344a; }
html[data-theme="dark"] .at-sugg-cats > span { color: #9fb2cb; }
html[data-theme="dark"] .at-sugg-cats a { background: #1b2c42; color: #7db3ee; }
html[data-theme="dark"] .at-sugg-cats em { background: rgba(0,0,0,.3); }
html[data-theme="dark"] .at-sugg li img {
  background: #0f1c2e; border-color: #2a3b52;
}
html[data-theme="dark"] .at-sugg-t mark { background: #6b4d1e; color: #ffe9c9; }
html[data-theme="dark"] .at-sugg-sku { color: #9fb2cb; background: #22344a; }
html[data-theme="dark"] .at-sugg-badge { color: #16243a; background: #9fb2cb; }
html[data-theme="dark"] .at-sugg-empty { color: #9fb2cb; }
html[data-theme="dark"] .at-sugg-all { border-top-color: #22344a; background: #0f1c2e; color: #7db3ee; }
html[data-theme="dark"] .at-sugg-all:hover { background: #1b3350; }

/* quantity + product page */
html[data-theme="dark"] div.quantity .qty { color: #dbe7f4; }
html[data-theme="dark"] .woocommerce div.product div.images img { background: #0f1c2e; }

/* free shipping progress bar + cart table */
html[data-theme="dark"] .at-free-ship {
  background: #1b3350; border-color: #2f4a6b; color: #dbe7f4;
}html[data-theme="dark"] .at-free-ship p strong,
html[data-theme="dark"] .at-free-ship p .woocommerce-Price-amount,
html[data-theme="dark"] .at-free-ship p bdi { color: #7db3ee; }
html[data-theme="dark"] .at-free-ship .bar { background: #0f1c2e; }
html[data-theme="dark"] .at-free-ship .bar span {
  background: linear-gradient(90deg, #0b5cab, #f68b1f);
}
html[data-theme="dark"] .at-free-ship.done {
  background: #12301d; border-color: #2f7a4a; color: #6ee7a0;
}
html[data-theme="dark"] .at-free-ship.done strong { color: #6ee7a0; }

html[data-theme="dark"] .woocommerce table.shop_table,
html[data-theme="dark"] .woocommerce table.shop_table th,
html[data-theme="dark"] .woocommerce table.shop_table td {
  border-color: #22344a; color: #dbe7f4;
}
html[data-theme="dark"] .woocommerce table.shop_table td, html[data-theme="dark"] .woocommerce-cart table.cart td,
html[data-theme="dark"] .woocommerce-cart table.cart th { color: #dbe7f4; }
html[data-theme="dark"] .woocommerce table.shop_table tfoot th,
html[data-theme="dark"] .woocommerce table.shop_table tfoot td { color: #dbe7f4; }

/* Product attribute / info tables and article content tables: replace the
   light sheet backgrounds with the dark form tokens, always comfortable. */
html[data-theme="dark"] .woocommerce table.shop_attributes { border-color: #22344a; }
html[data-theme="dark"] .woocommerce table.shop_attributes th,
html[data-theme="dark"] .woocommerce table.shop_attributes td {
  background: rgba(255, 255, 255, .04); border-color: #22344a; color: #dbe7f4;
}
html[data-theme="dark"] .woocommerce table.shop_attributes th { color: #9fb2cb; }
html[data-theme="dark"] .entry-content table th,
html[data-theme="dark"] .entry-content table td { border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .entry-content table th { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .entry-content table { color: #dbe7f4; }

/* payment badges (footer) */
html[data-theme="dark"] .at-pay-badge {
  background: #1b2c42; color: #dbe7f4;
}
html[data-theme="dark"] .at-pay-badge:hover { color: #7db3ee; }
html[data-theme="dark"] .at-pay-logo { background: #1b2c42; }
html[data-theme="dark"] .at-pay-logo img { filter: brightness(.92); }

/* ================= Dark mode: shared FORM TOKENS =================
   ONE source of truth for every control across the site (contact form,
   checkout, account, cart, shop filters, variations). Dropdown popups
   also get native color-scheme so open option lists follow the theme
   instantly and stay consistent for any select added in the future.
   (dynamic = follows OS/browser instantly · smart = one definition · fast = pure CSS, zero JS) */
html[data-theme="dark"] {
	--at-ink: #eaf2fb;                  /* control text */
	--at-ink-mut: #9fb2cb;              /* secondary text */
	--at-ctrl-bg: rgba(255,255,255,.05);       /* field surface */
	--at-ctrl-bg-focus: rgba(255,255,255,.07);
	--at-ctrl-border: rgba(255,255,255,.14);
	--at-ctrl-border-focus: rgba(125,179,238,.6);
	--at-pop-bg: #132437;               /* native option-list surface */
	--at-pop-ink: #dbe7f4;              /* option text */
	--at-pop-hover: #1b3350;
	--at-pop-hover-ink: #fff;
	--at-pop-checked-bg: #22344a;
	--at-pop-checked-ink: #a8cdf5;
	--at-ctrl-label: #c3d4e6;           /* field labels */
	--at-ctrl-placeholder: #8fa6bd;     /* placeholder text: 3.40:1 on --at-ctrl-bg was below AA */
	color-scheme: dark;
}
/* Native dropdown popup on window/linux browsers that keep a light OS list:
   force a readable dark list on every select regardless of where it lives. */
html[data-theme="dark"] select,
html[data-theme="dark"] select option { background-color: var(--at-pop-bg); color: var(--at-pop-ink); }
html[data-theme="dark"] select option:hover,
html[data-theme="dark"] select option:focus,
html[data-theme="dark"] select option:active { background-color: var(--at-pop-hover); color: var(--at-pop-hover-ink); }
html[data-theme="dark"] select option:checked { background-color: var(--at-pop-checked-bg); color: var(--at-pop-checked-ink); }
html[data-theme="dark"] select optgroup { background-color: var(--at-pop-bg); color: var(--at-pop-ink); }

/* ================= Old dark-forms block, now driven by the tokens above =================
   Base: translucent dark input sitting on the surface, subtle 1px border, soft round,
   readable light text. Mirrors the footer newsletter input look. */
html[data-theme="dark"] .woocommerce form .form-row input.input-text,
html[data-theme="dark"] .woocommerce form .form-row textarea,
html[data-theme="dark"] .woocommerce form .form-row select,
html[data-theme="dark"] .woocommerce form .form-row .input-checkbox,
html[data-theme="dark"] .woocommerce-input-wrapper .input-text,
html[data-theme="dark"] .woocommerce form.login input.input-text,
html[data-theme="dark"] .woocommerce form.register input.input-text,
html[data-theme="dark"] .woocommerce form.edit-account input.input-text,
html[data-theme="dark"] .woocommerce form.edit-account select,
html[data-theme="dark"] .woocommerce form.lost_reset_password input.input-text,
html[data-theme="dark"] .woocommerce-cart table.cart td.actions .coupon #coupon_code,
html[data-theme="dark"] .woocommerce-shipping-calculator input,
html[data-theme="dark"] .woocommerce-shipping-calculator select,
html[data-theme="dark"] .atx-fld input,
html[data-theme="dark"] .atx-fld select,
html[data-theme="dark"] .atx-fld textarea,
html[data-theme="dark"] .atx-nl-form input[type="email"],
html[data-theme="dark"] .atx-notify input[type="email"] {
  background: var(--at-ctrl-bg) !important;
  border: 1px solid var(--at-ctrl-border) !important;
  border-radius: 10px !important;
  color: var(--at-ink) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .woocommerce form .form-row textarea,
html[data-theme="dark"] .atx-fld textarea { border-radius: 12px !important; }

/* Every dropdown field gets the SAME solid dark "chip" as ordering/variations/checkout
   (contact "Topic", checkout selects, select2, shipping calculator) and never a
   translucent surface that blends into the page. */
html[data-theme="dark"] .atx-fld select,
html[data-theme="dark"] .woocommerce form .form-row select,
html[data-theme="dark"] .woocommerce-shipping-calculator select,
html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--at-pop-bg) !important;
}
html[data-theme="dark"] .woocommerce form .form-row input.input-text:focus,
html[data-theme="dark"] .woocommerce form .form-row textarea:focus,
html[data-theme="dark"] .woocommerce form .form-row select:focus,
html[data-theme="dark"] .atx-fld input:focus,
html[data-theme="dark"] .atx-fld select:focus,
html[data-theme="dark"] .atx-fld textarea:focus {
  border-color: var(--at-ctrl-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(125,179,238,.18) !important;
  background: var(--at-ctrl-bg-focus) !important;
}

/* labels & helper text (same dark palette everywhere) */
html[data-theme="dark"] .woocommerce form .form-row { color: var(--at-ink-mut); }
html[data-theme="dark"] .woocommerce form .form-row label,
html[data-theme="dark"] .atx-fld label { color: var(--at-ctrl-label); }
html[data-theme="dark"] .woocommerce form .form-row .input-text::placeholder,
html[data-theme="dark"] .atx-fld input::placeholder,
html[data-theme="dark"] .atx-fld textarea::placeholder { color: var(--at-ctrl-placeholder) !important; }

/* select2 dropdowns (country/state selectors) */
html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background: var(--at-ctrl-bg) !important;
  border: 1px solid var(--at-ctrl-border) !important;
  border-radius: 10px !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--at-ink) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--at-ink-mut) transparent transparent;
}
html[data-theme="dark"] .select2-dropdown {
  background: var(--at-pop-bg) !important; border-color: var(--at-pop-checked-bg) !important;
}
html[data-theme="dark"] .select2-results__option { color: var(--at-pop-ink); }
html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
  background: var(--at-pop-hover) !important; color: var(--at-pop-hover-ink) !important;
}
html[data-theme="dark"] .select2-results__option[aria-selected="true"] { background: var(--at-pop-checked-bg) !important; color: var(--at-pop-checked-ink) !important; }

/* quantity (pill) + coupon */
html[data-theme="dark"] div.quantity,
html[data-theme="dark"] div.quantity .qty,
html[data-theme="dark"] .woocommerce div.quantity {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #eaf2fb !important;
}
html[data-theme="dark"] .woocommerce-cart table.cart td.actions .coupon #coupon_code::placeholder { color: var(--at-ctrl-placeholder); }

/* payment method cards + descriptions */
html[data-theme="dark"] #add_payment_method #payment ul.payment_methods li,
html[data-theme="dark"] .woocommerce-cart #payment ul.payment_methods li,
html[data-theme="dark"] .woocommerce-checkout #payment ul.payment_methods li {
  border-bottom-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] #add_payment_method #payment ul.payment_methods li label,
html[data-theme="dark"] .woocommerce-checkout #payment ul.payment_methods li label { color: #dbe7f4; }
html[data-theme="dark"] #add_payment_method #payment .payment_box,
html[data-theme="dark"] .woocommerce-checkout #payment .payment_box {
  background: rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
  color: #c3d4e6 !important;
}
html[data-theme="dark"] #add_payment_method #payment .payment_box p,
html[data-theme="dark"] .woocommerce-checkout #payment .payment_box p { color: #c3d4e6; }

/* newsletter / footer fields (keep their pill look) */
html[data-theme="dark"] .at-newsletter input,
html[data-theme="dark"] .atx-newsletter input { color: #eaf2fb !important; }
html[data-theme="dark"] .at-newsletter input::placeholder,
html[data-theme="dark"] .atx-newsletter input::placeholder { color: #7f97b0; }
html[data-theme="dark"] .at-newsletter { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
html[data-theme="dark"] .atx-consent { color: #9fb2cb; }
html[data-theme="dark"] .atx-consent a { color: #7db3ee; }

/* ================= Dark mode: "Have a coupon?" + checkout toggles ================= */
html[data-theme="dark"] .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info,
html[data-theme="dark"] .woocommerce .woocommerce-form-login-toggle .woocommerce-info,
html[data-theme="dark"] .woocommerce .woocommerce-info,
html[data-theme="dark"] .woocommerce .woocommerce-message,
html[data-theme="dark"] .woocommerce .woocommerce-error {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  color: #dbe7f4 !important;
}
html[data-theme="dark"] .woocommerce .woocommerce-info::before,
html[data-theme="dark"] .woocommerce .woocommerce-message::before,
html[data-theme="dark"] .woocommerce .woocommerce-error::before { color: #7db3ee !important; }
html[data-theme="dark"] .woocommerce .woocommerce-info a,
html[data-theme="dark"] .woocommerce .woocommerce-message a,
html[data-theme="dark"] .woocommerce .woocommerce-error a { color: #7db3ee !important; }
html[data-theme="dark"] .woocommerce .woocommerce-info .showcoupon,
html[data-theme="dark"] .woocommerce .woocommerce-info .showlogin {
  color: #7db3ee !important; font-weight: 600; border-bottom: 1px dashed rgba(125,179,238,.5);
}
html[data-theme="dark"] .woocommerce .woocommerce-info .showcoupon:hover,
html[data-theme="dark"] .woocommerce .woocommerce-info .showlogin:hover { color: #a8cdf5 !important; }

/* the coupon/login form that appears below the toggle */
html[data-theme="dark"] .woocommerce form.checkout_coupon,
html[data-theme="dark"] .woocommerce form.login,
html[data-theme="dark"] .woocommerce form.register {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
}
html[data-theme="dark"] .woocommerce form.checkout_coupon p,
html[data-theme="dark"] .woocommerce form.login p,
html[data-theme="dark"] .woocommerce form.register p { color: #c3d4e6; }

/* ============================================================
   Product-page carousels / listings: "Frequently bought together"
   and "Similar items" (original-store style).
   Columns per device are driven by CSS custom properties set inline:
   --at-cd (desktop), --at-ct (tablet), --at-cm (mobile), --at-gap.
   ============================================================ */
.at-car { margin: 34px 0 6px; }
.at-car-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.at-car-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--at-navy, #0b2545);
}
.at-car-nav { display: flex; align-items: center; gap: 8px; }
.at-car-nav button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(11,37,69,.18);
  border-radius: 50%;
  background: #fff;
  color: var(--at-navy, #0b2545);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.at-car-nav button:hover { background: var(--at-navy, #0b2545); color: #fff; border-color: var(--at-navy, #0b2545); }
.at-car-nav button:active { transform: scale(.94); }
.at-car-nav button:disabled { opacity: .4; cursor: default; }
html[data-theme="dark"] .at-car-nav button { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #eaf2fb; }
html[data-theme="dark"] .at-car-nav button:hover { background: rgba(125,179,238,.25); border-color: rgba(125,179,238,.6); }

/* CAROUSEL mode — a horizontal scroll track.
   Specificity is raised above the theme's grid rules
   (.woocommerce ul.products = 0,2,1) by using the carousel structure. */
.at-car[data-mode="carousel"] .at-car-viewport ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: var(--at-gap, 14px) !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  margin: 0;
}
.at-car[data-mode="carousel"] .at-car-viewport ul.products::-webkit-scrollbar { height: 6px; }
.at-car[data-mode="carousel"] .at-car-viewport ul.products::-webkit-scrollbar-track { background: rgba(11,37,69,.08); border-radius: 10px; }
.at-car[data-mode="carousel"] .at-car-viewport ul.products::-webkit-scrollbar-thumb { background: rgba(11,37,69,.3); border-radius: 10px; }
.at-car[data-mode="carousel"] .at-car-viewport ul.products li.product,
.at-car[data-mode="carousel"] .at-car-viewport ul.products li.product-category {
  flex: 0 0 auto !important;
  width: calc((100% - (var(--at-cd, 4) - 1) * var(--at-gap, 14px)) / var(--at-cd, 4)) !important;
  max-width: none !important;
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 1024px) {
  .at-car[data-mode="carousel"] .at-car-viewport ul.products li.product,
  .at-car[data-mode="carousel"] .at-car-viewport ul.products li.product-category {
    width: calc((100% - (var(--at-ct, 2) - 1) * var(--at-gap, 14px)) / var(--at-ct, 2)) !important;
  }
}
@media (max-width: 560px) {
  .at-car[data-mode="carousel"] .at-car-viewport ul.products li.product,
  .at-car[data-mode="carousel"] .at-car-viewport ul.products li.product-category {
    width: calc((100% - (var(--at-cm, 1) - 1) * var(--at-gap, 14px)) / var(--at-cm, 1)) !important;
  }
}

/* GRID mode — a static responsive grid (no arrows / no scroll). */
.at-car[data-mode="grid"] .at-car-viewport ul.products {
  display: grid !important;
  flex-wrap: nowrap;
  grid-template-columns: repeat(var(--at-cd, 4), 1fr) !important;
  gap: var(--at-gap, 14px) !important;
  overflow: visible;
  padding-bottom: 8px;
  margin: 0;
}
@media (max-width: 1024px) {
  .at-car[data-mode="grid"] .at-car-viewport ul.products { grid-template-columns: repeat(var(--at-ct, 2), minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .at-car[data-mode="grid"] .at-car-viewport ul.products { grid-template-columns: repeat(var(--at-cm, 1), minmax(0, 1fr)) !important; }
}
.at-car[data-mode="grid"] .at-car-viewport ul.products li.product,
.at-car[data-mode="grid"] .at-car-viewport ul.products li.product-category {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

[dir="rtl"] .at-car-head { flex-direction: row-reverse; }
[dir="rtl"] .at-car[data-mode="carousel"] .at-car-viewport ul.products { scroll-padding-left: 0; }

/* ================================================================
   Product View switcher — 2/3/4-column grid or horizontal list.
   Segmented control styled to match .woocommerce-ordering select.
   ============================================================== */
.at-viewbar {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px;
	margin: 0; padding: 3px;
	background: #f2f6fb; border: 1px solid var(--at-line);
	border-radius: 8px; vertical-align: middle;
}
.at-viewbar-label {
	font-size: 12px; font-weight: 600; color: var(--at-muted);
	padding-inline: 8px; border-inline-end: 1px solid var(--at-line); margin-inline-end: 4px;
	white-space: nowrap;
}
.at-viewbar button {
	min-width: 28px; height: 26px; padding: 0 9px;
	border: 1px solid var(--at-line); border-radius: 6px;
	background: #fff; color: var(--at-text); font-size: 13px; font-weight: 600;
	line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.at-viewbar button:hover { border-color: var(--at-blue); color: var(--at-blue); }
.at-viewbar button:focus-visible { outline: 2px solid var(--at-blue); outline-offset: 1px; }
.at-viewbar button.is-on { background: var(--at-blue); border-color: var(--at-blue); color: #fff; box-shadow: 0 1px 2px rgba(11, 92, 171, .25); }
.at-viewbar button svg { width: 16px; height: 16px; }

/* View bar in dark mode — solid theme surface, high-contrast text,
   matching the sort dropdown exactly. */
html[data-theme="dark"] .at-viewbar {
	background: #1b3350; border-color: #2a3b52;
}
html[data-theme="dark"] .at-viewbar-label {
	color: #9fb2cb;
	border-inline-end-color: #38506e;
}
html[data-theme="dark"] .at-viewbar button {
	background: #132437; border-color: #38506e; color: #dbe7f4;
}
html[data-theme="dark"] .at-viewbar button:hover { border-color: #7db3ee; color: #7db3ee; }
html[data-theme="dark"] .at-viewbar button.is-on { background: var(--at-blue); border-color: var(--at-blue); color: #fff; }

/* Shop toolbar — result count, sort dropdown, then the grid selector, as one
   row of controls that share a single 34px height and the same border, radius
   and surface. The view bar is emitted at priority 31 (after catalog_ordering
   at 30) so it renders to the sort dropdown's right; the logical margins keep
   that order in RTL too.
   Height arithmetic: 3px padding + 1px border + 26px button + 1px + 3px = 34px,
   matching `.at-results-col > form.woocommerce-ordering select { height: 34px }`. */
.at-results-col > p.woocommerce-result-count {
	display: inline-block; line-height: 34px; vertical-align: middle;
	margin: 0; margin-inline-end: 14px; margin-block-end: 14px;
}
.at-results-col > form.woocommerce-ordering {
	display: inline-block; vertical-align: middle;
	margin: 0; margin-inline-end: 14px; margin-block-end: 14px;
}
.at-results-col > form.woocommerce-ordering select { height: 34px; }
.at-results-col > .at-viewbar {
	margin: 0; margin-block-end: 14px; vertical-align: middle;
}

/* Body-level view classes, scoped to the archive results column */
body.atv-grid-2 .at-results-col ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.atv-grid-3 .at-results-col ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.atv-grid-4 .at-results-col ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }@media (max-width: 640px) {	body.atv-grid-4 .at-results-col ul.products,	body.atv-grid-3 .at-results-col ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }}@media (max-width: 380px) {	body.atv-grid-4 .at-results-col ul.products,	body.atv-grid-3 .at-results-col ul.products,	body.atv-grid-2 .at-results-col ul.products { grid-template-columns: 1fr !important; }}/* Horizontal list mode */body.atv-list .at-results-col ul.products { grid-template-columns: 1fr !important; }body.atv-list .at-results-col ul.products li.product { width: 100% !important; }body.atv-list .at-results-col ul.products li.product > .atc {	display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 0;}body.atv-list .at-results-col ul.products .atc-media { padding: 10px 12px 10px 0; }[dir="rtl"] body.atv-list .at-results-col ul.products .atc-media { padding: 10px 0 10px 12px; }body.atv-list .at-results-col ul.products .atc-body { padding: 12px 14px; }@media (max-width: 560px) {	body.atv-list .at-results-col ul.products li.product > .atc { grid-template-columns: 1fr; }	body.atv-list .at-results-col ul.products .atc-media,	[dir="rtl"] body.atv-list .at-results-col ul.products .atc-media { padding: 14px 14px 8px; }}/* ================================================================   Store Layout Size — wide desktop / 4K container presets   ============================================================== */body.atw-auto .container,body.atw-standard .container,body.atw-wide .container,body.atw-ultrawide .container,body.atw-full .container { max-width: var(--at-cw, 1240px); }body.atw-auto .container { --at-cw: min(2400px, calc(100vw - 140px)); }body.atw-standard .container { --at-cw: 1240px; }body.atw-wide .container { --at-cw: 1580px; }body.atw-ultrawide .container { --at-cw: 2000px; }body.atw-full .container { --at-cw: none; }/* The "auto" preset is tuned for very wide screens (up to 2400px with a   140px gutter). On phones the same formula shrinks every container below the   viewport (e.g. 250px content on a 390px phone) and lets the footer   newsletter form overflow the right edge, so fall back to the full-width   container on mobile. */@media (max-width: 768px) {  body.atw-auto .container { --at-cw: none; }}/* On very wide monitors the default 4-column grid steps up so cards stay   a comfortable size. Explicit 2/3-column choices and the Standard width are   never overridden. */@media (min-width: 2300px) and (max-width: 3099px) {	body.atw-auto.atv-grid-4 .at-results-col ul.products,	body.atw-wide.atv-grid-4 .at-results-col ul.products,	body.atw-ultrawide.atv-grid-4 .at-results-col ul.products,	body.atw-full.atv-grid-4 .at-results-col ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }}@media (min-width: 3100px) {	body.atw-auto.atv-grid-4 .at-results-col ul.products,	body.atw-wide.atv-grid-4 .at-results-col ul.products,	body.atw-ultrawide.atv-grid-4 .at-results-col ul.products,	body.atw-full.atv-grid-4 .at-results-col ul.products { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }}/* --- opening hours: copy / paste between days ------------------------- */.at-h-copy{white-space:nowrap;}.at-h-xfer{margin:0 2px 0 0;}.at-h-xfer:last-child{margin-right:0;}.at-h-xfer-paste{opacity:.45;}tr:hover .at-h-xfer-paste,tr.is-closed .at-h-xfer-paste{opacity:1;}tr.at-h-xfer-src > td,tr.at-h-xfer-src > th{box-shadow:inset 3px 0 0 var(--at-accent,#2271b1);}.at-h-xfer-status{margin:10px 0 0;font-style:italic;}
/* ================================================================
   Grid track + card min-width floor — mobile overflow fix 2026-10-02
   ------------------------------------------------------------
   Measured in headless Edge with real getBoundingClientRect():

     home rails @390px — ul.products is 358px wide, but the tracks
     resolved to "198px 198px" (and "198px 148px" on the second rail)
     because `1fr` is `minmax(auto, 1fr)` and the automatic minimum
     is the item's min-content width. Out-of-stock cards carry
     form.atx-notify > input, whose intrinsic width is ~177px, which
     pushed .atc to 198px min-content. So the rails laid out
     198+12+198 = 408px of tracks inside a 358px box: 50px past the
     container, 34px past the viewport, and `overflow-x: clip` on
     html/body cut the right-hand column off. Columns were also
     unequal whenever two cards in the same column had different
     min-content — that was the "inconsistent card size" symptom.

     /shop/ only *looked* correct: 173+12+173 happened to equal the
     358px box exactly. One out-of-stock card would have broken it the
     same way, so archives were never actually safe.

   Two parts, both required:
     1. every `repeat(N, 1fr)` above is now `repeat(N, minmax(0,1fr))`
        so the track floor is 0 rather than min-content;
     2. the chain below clears the intrinsic floors on the card. Part 1
        alone is not enough: the e-mail field still reports ~177px
        min-content and holds the track wide even once the track would
        allow it to shrink.
   ============================================================== */
.woocommerce ul.products > li.product,
.wc-block-grid ul.products > li.product,
.atc,
.atc-media,
.atc-img,
.atc-body,
.atc-titlewrap,
.atc-foot,
.atc-title,
.atc-price,
.atc-meta { min-width: 0; }

/* The back-in-stock e-mail field is the widest thing in a card. It has an
   intrinsic size (~177px) that no container smaller than that can honour. */
.atc-foot .atx-notify { min-width: 0; }
.atc-foot .atx-notify input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ================================================================
   Mobile header, phone product-view toggle, fixed bottom bar
   ------------------------------------------------------------
   Measured at 390x844. The old phone header was 156px tall and wasted
   most of it. `.at-topbar .container` is `justify-content: space-between`,
   so a bare 21px phone icon sat at x=16 and the theme/language controls
   at x=245 — ~208px of dead space in between. The main row then carried
   four icon buttons (Login, Wishlist, Compare, Cart) and a permanently
   open 55px search field sat underneath it.

   Now: the top bar is a slim utility row holding only Call, theme toggle
   and language with no void; the main row is burger + logo + search; and
   account/compare/cart move to a fixed bottom bar. Same 768px breakpoint
   as the existing phone block.
   ============================================================== */

/* Phone-only search toggle: hidden on desktop, where the field is already
   visible in the main row. Declared before the media query on purpose. */
.at-searchtoggle { display: none; }

/* The bottom bar is phone-only. Without this base rule the <nav> falls back to
   a plain static block and renders as a 28px strip of links at the very bottom
   of every desktop page. */
.at-bottomnav { display: none; }

/* Phone-only 1/2-column toggle: hidden on desktop, where the 2/3/4/list
   buttons stay. Needs the extra class: the existing `.at-viewbar button`
   rule is (0,1,1) and would otherwise win over a bare (0,1,0) selector and
   leave the phone toggle visible on desktop. */
.at-viewbar .at-viewbar-mtoggle { display: none; }

/* Single-column archive grid (the phone toggle target). */
body.atv-grid-1 .at-results-col ul.products { grid-template-columns: minmax(0, 1fr) !important; }

/* The header main row is laid out by CSS order, not by DOM order, so every
   child needs an explicit order - see the pinning block below. The wishlist is
   NOT one of them any more: it lives in .at-actions on tablet/desktop and in the
   fixed bottom bar on phones, so header.php no longer renders a .at-wishlink.

   Order pinning, three elements now instead of four: burger | logo | search, with
   .at-actions deliberately kept at order 4. The base sheet already gives
   `.at-logo` order 1 and `.at-actions` order 3, while `.at-burger` and
   `.at-searchtoggle` carry NO order and so default to 0, which pushed the logo
   behind the icons. Never rely on DOM order for this row: the rendered order
   comes from `order`, not from the position of the tags in header.php. */
@media (max-width: 1024px) {
  .at-burger { order: 0; }
  .at-logo { order: 1; }
  .at-searchtoggle { order: 3; }
  .at-actions { order: 4; }
}

/* 769-1024px: the narrow-tablet band that backlog item 29 is about.
   `.at-actions` used to span x=590-827 in a 769px viewport and be clipped by up
   to 58px, cutting the Cart icon in half. `overflow-x: clip` on html/body hides
   that from documentElement.scrollWidth, so it looks fine to a document-level
   overflow test; only a per-element scan finds it.

   All FOUR actions stay visible in this band (owner decision 2026-10-02): the
   fixed bottom bar is phone-only, so hiding anything here would leave it
   unreachable until the desktop layout appears. Nothing is display:none now -
   the row is made to FIT instead, in two steps:
     1. 769-899px: icon-only. The text label span is hidden, NOT the whole link,
        so the href, the aria-label and the 44px tap target all survive.
     2. 900-1024px: full icon + label, tighter padding and gap.
   Measured 2026-10-02 after deploy (Edge CDP, / at 769/800/900/1024px): all four
   icons present and laid out, `.at-actions` scrollWidth == clientWidth (no scroll),
   sticky header scrollWidth == clientWidth (no overflow), every icon rect fully
   inside the header, and elementFromPoint at each icon centre returns that icon
   (nothing covering it). Icon widths 40px at 769/800, 36.84-63.31px at 900/1024.
   Re-measure with those five checks after touching this band - `display:none`
   would still leave all five green, so also assert visibleIcons === 4. */
@media (min-width: 769px) and (max-width: 899px) {
  .at-actions { gap: 0; }
  .at-action { padding: 8px 9px; gap: 5px; }
  .at-action > span:not(.atx-ico):not(.atx-count):not(.at-cart-count) { display: none; }
}
@media (min-width: 900px) and (max-width: 1024px) {
  .at-actions { gap: 2px; }
  .at-action { padding: 8px 7px; gap: 5px; }
  .at-action > span:not(.atx-ico):not(.atx-count):not(.at-cart-count) { font-size: 12px; }
}

@media (max-width: 768px) {
  /* ---- slim utility row ---- */
  /* This block sits at the END of the file, so it beats the global
     `.at-topbar .container { justify-content: space-between }` above on equal
     specificity. It used to set `flex-start`, which packed the four contact
     icons against the language + theme controls and left the whole right side
     of the bar empty. Keep `space-between` here: contact icons hard left,
     language + theme hard right, free space distributed between them. */
  .at-topbar .container {
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
  }
  .at-topbar-contact { flex: none; gap: 12px; }
  /* margin-inline-start:auto pushes this group right on its own, so the
     layout still holds if the container's justify-content is ever changed
     again - the failure mode here was silent and cost a whole pass. */
  .at-topbar-right { gap: 12px; margin-inline-start: auto; }

  /* ---- main row: burger + logo + search only ---- */
  .at-actions { display: none; }
  .at-searchtoggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    flex: none;
    color: inherit; background: none; border: 0; cursor: pointer;
  }
  .at-searchtoggle[aria-expanded="true"] { color: var(--at-blue); }
  /* the logo can now use the width the four icons vacated. padding-inline keeps
     a pixel-clear gap so the logo text can never sit under the wishlist/search
     buttons when the viewport is at its narrowest. */
  .at-logo { flex: 1 1 auto; max-width: none; justify-content: center; padding-inline: 8px; }
  .at-logo img, .at-logo svg { max-width: 100%; }

  /* ---- search opens on tap instead of always costing 55px ---- */
  .at-search { display: none; }
  .at-headwrap.at-hdr-searchopen .at-search {
    display: block;
    order: 5; flex-basis: 100%; max-width: none;
    padding-bottom: 4px;
  }
  .at-headwrap.at-hdr-searchopen .at-header-main { max-height: none; overflow: visible; }

  /* ---- phone product-view toggle ----
     The <=380px rule further up force-collapses every view to one column,
     which would fight the toggle, so 2/3/4 are pinned back to two columns
     and atv-grid-1 is the only way to get a single column. */
  body.atv-grid-2 .at-results-col ul.products,
  body.atv-grid-3 .at-results-col ul.products,
  body.atv-grid-4 .at-results-col ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.atv-list .at-results-col ul.products { grid-template-columns: minmax(0, 1fr) !important; }
  body.atv-list .at-results-col ul.products li.product > .atc { grid-template-columns: 1fr !important; }

  .at-viewbar { margin: 0 0 10px; padding: 3px; gap: 3px; }
  .at-viewbar-label,
  .at-viewbar button:not(.at-viewbar-mtoggle) { display: none; }
  .at-viewbar-mtoggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 34px; height: 30px; padding: 0 7px;
  }
  .at-viewbar-mtoggle .at-vm-one { display: none; }
  .at-viewbar-mtoggle[data-state="1"] .at-vm-one { display: block; }
  .at-viewbar-mtoggle[data-state="1"] .at-vm-two { display: none; }

  /* ---- fixed bottom bar ---- */
  .at-bottomnav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 950;
    background: var(--at-dark);
    border-top: 1px solid rgba(255,255,255,.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px rgba(12,41,71,.18);
  }
  .at-bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; padding: 6px 2px; min-width: 0;
    color: #cfe0f2; text-decoration: none;
    font-size: 10.5px; font-weight: 600; line-height: 1.2;
  }
  .at-bn-item.is-current { color: #fff; }
  .at-bn-ico { position: relative; display: inline-flex; }
  .at-bn-label {
    max-width: 100%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .at-bn-count {
    position: absolute; top: -5px; inset-inline-end: -10px;
    min-width: 17px; height: 17px; padding: 0 4px;
border-radius: 999px;
background: var(--at-fill); color: var(--at-fill-ink);
font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  }

  /* keep the last row of products (and the footer's last line) clear of the bar.
     65px, not 56: .at-bn-item is min-height 56px and .at-bottomnav adds a 1px
     top border, so reserving only the item height leaves the footer's last pixel
     level with the bar's top edge. The extra 8px is breathing room. */
  body { padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); }
  .at-backtop { bottom: calc(71px + env(safe-area-inset-bottom, 0px)); }

  /* The cookie-consent box (#atco-cookie, inc/theme-options.php:2056) is
     position:fixed with an inline bottom:16px, so its Accept/Decline buttons
     ended up behind the new bar. Inline styles beat a plain rule, hence
     !important; 57px bar + the 16px gap it originally had. */
  #atco-cookie { bottom: calc(73px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* single-product badge overlay: anchor the absolute .special-tags stack to the
   WooCommerce gallery box. The badges module also prints this rule inline via
   wp_head, but LiteSpeed's CSS optimizer strips inline <style> blocks, so the
   rule is kept here as well to guarantee the overlay lands on the image. */
.woocommerce-product-gallery { position: relative; }

/* ---------- Announcement bar (rotating USP strip) ---------- */
.at-announce {
	position: relative;
	color: #fff;
	text-align: center;
	padding: 0 16px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden;
}
.at-announce a { color: #fff; text-decoration: underline; }
.at-announce a:hover { color: #fff; }
.at-announce-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
}
.at-announce-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}
.at-announce-item.is-on { opacity: 1; visibility: visible; }
.at-announce-dots {
	display: flex;
	gap: 5px;
	justify-content: center;
	padding: 0 0 6px;
}
.at-announce-dot {
	width: 6px; height: 6px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.4);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.at-announce-dot.is-on { background: #fff; transform: scale(1.25); }
@media (max-width: 480px) {
	.at-announce { font-size: 12px; padding: 0 10px; }
	.at-announce-inner { min-height: 36px; }
	/* Tighter utility-bar gaps on the narrowest phones. The same declarations
	   exist in the early <=480px block, but the slim-utility <=768px block is
	   LATER in the file and set both gaps to 12px with equal specificity, so the
	   early pair never applied. Re-asserted here, after it, so it does. */
	.at-topbar-contact { gap: 4px; }
	.at-topbar-contact > * { padding: 4px; }
	.at-topbar-right { gap: 6px; }
}

/* ---------- Cart: in-flow item list ----------
 * The base rule capped the list at max-height:58vh with overflow-y:auto. That
 * created a scroll container nested inside the page's own scroll container —
 * the "window inside a window" the shopper had to fight through, and the reason
 * the checkout CTA sat below the fold of an inner box. The list is now part of
 * normal document flow, so no height cap and no scroll of its own. */
.at-cart-wrap {
	max-height: none;
	height: auto;
	min-height: 0;
	overflow: visible;
	-webkit-overflow-scrolling: auto;
	overscroll-behavior: auto;
}
@media (max-width: 768px) {
	.woocommerce-cart-form .shop_table th,
	.woocommerce-cart-form .shop_table td {
		padding: 8px 6px !important;
		font-size: 13px;
		vertical-align: middle;
	}
	.woocommerce-cart-form .shop_table thead th {
		position: sticky; top: 0; z-index: 2;
		background: var(--at-bg, #fff);
	}
	.woocommerce-cart-form .product-thumbnail img {
		width: 56px; height: auto; display: block;
	}
	.woocommerce-cart-form .product-name a { font-size: 13px; line-height: 1.35; display: block; }
	.woocommerce-cart-form .product-price { font-size: 13px; }
	.woocommerce-cart-form .quantity .qty {
		width: 54px; min-height: 34px; padding: 4px 6px; font-size: 13px; text-align: center;
	}
	.woocommerce-cart-form td.product-remove a { font-size: 18px; line-height: 1; }
	.woocommerce-cart-form .product-subtotal { font-size: 13px; font-weight: 700; }
	.cart-collaterals .coupon input[type="text"] { width: 100%; }
	.cart-collaterals .button, .cart_totals .button { width: 100%; }
	.cart_totals h2 { font-size: 17px; }
}

/* ---------- Homepage product sliders (offers + new arrivals) ---------- */
.at-slider { position: relative; }
.at-slider-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding: 2px 2px 6px;
	cursor: grab;
}
.at-slider-track::-webkit-scrollbar { display: none; }
.at-slider-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.at-slider-track.is-dragging * { user-select: none; }
.at-slider-track > ul.products {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 16px;
	width: max-content;
	margin: 0;
	padding: 0;
}
.at-slider-track > ul.products > li.product,
.at-slider-track > ul.products > li.col {
	float: none !important;
	width: var(--at-slider-w, 248px) !important;
	min-width: var(--at-slider-w, 248px) !important;
	max-width: none;
	margin: 0 !important;
	scroll-snap-align: start;
}
.at-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--at-line, #dde3ea);
	border-radius: 50%;
	background: #fff;
	color: var(--at-text, #1d2733);
	font-size: 22px; line-height: 1;
	box-shadow: 0 4px 14px rgba(10,20,40,.12);
	cursor: pointer;
	opacity: 1;
	transition: opacity .2s ease, background .2s ease;
}
.at-slider-btn:hover { background: var(--at-blue, #0b5cab); color: #fff; }
.at-slider-btn.is-off { opacity: 0; pointer-events: none; }
.at-slider-prev { left: -6px; }
.at-slider-next { right: -6px; }
@media (max-width: 600px) {
	.at-slider-btn { width: 34px; height: 34px; font-size: 18px; }
	.at-slider-prev { left: 0; }
	.at-slider-next { right: 0; }
	.at-slider-track { gap: 12px; }
	.at-slider-track > ul.products { gap: 12px; }
}
@media (min-width: 601px) and (max-width: 1024px) { .at-slider-track { --at-slider-w: 30vw; } }
@media (max-width: 600px) { .at-slider-track { --at-slider-w: 58vw; } }
/* 3-level mega groups: a child that has children renders as a titled block.
   Added 2026-10-02 with the at_render_nav_uncached() group split. */
.at-mega-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.07); }
.at-mega-group-title {
    display: block; padding: 8px 16px; margin: 0 0 4px;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--at-blue); background: #eaf3fd; border-radius: 6px;
}
.at-mega-group-title:hover { background: #dbe9fb; color: var(--at-blue-dark); }
.at-mega-group .at-mega-list { columns: 2; }
@media (max-width: 1024px) {
  .at-mega-group .at-mega-list { columns: 1; }
  .at-mega-group { padding-left: 8px; padding-right: 8px; }
}
html[data-theme="dark"] .at-mega-group { border-top-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .at-mega-group-title { background: rgba(255,255,255,.06); color: var(--at-blue); }
/* ---------- Announcement strip: now directly below the logo row ---------- */
.at-announce {
	margin: 10px 0;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(10,20,40,.08);
}

/* ---------- Mobile cart: in-flow rows, no nested scroll ----------
 * The 58vh/46vh scroll viewport was the "window inside a window" defect: a
 * scroll region nested inside the page's own scroll region, so the shopper had
 * to scroll the inner box to reach rows and then scroll the page to reach the
 * coupon box and checkout button. The item list now sits in normal document
 * flow (see at-cart-wrap--flow in functions.php). Rows stay compact so more
 * of the cart is visible at once, and the steppers grow to a 44px touch
 * target on phones. */
@media (max-width: 768px) {
	.at-cart-wrap--flow {
		max-height: none;
		height: auto;
		overflow: visible;
		-webkit-overflow-scrolling: auto;
		overscroll-behavior-y: auto;
		touch-action: auto;
	}
	.at-cart-wrap .shop_table { border: 0; margin: 0; font-size: 12px; }
	.at-cart-wrap .shop_table thead { display: none; }
	.at-cart-wrap .shop_table td,
	.at-cart-wrap .shop_table th {
		padding: 5px 4px !important;
		font-size: 12px;
		line-height: 1.3;
		vertical-align: middle;
	}
/* Thumbnails were 40px, below the 65-80px the catalogue rows use and too
	 * small to identify a battery at a glance. */
	.at-cart-wrap .product-thumbnail { display: block; width: 72px; }
	.at-cart-wrap .product-thumbnail img {
		width: 72px !important;
		height: 72px !important;
		object-fit: cover;
		border-radius: 8px;
	}
	.at-cart-wrap .product-name a { font-size: 12.5px !important; line-height: 1.35; display: block; }
	.at-cart-wrap .product-name .product-sku,
	.at-cart-wrap .product-meta,
	.at-cart-wrap .product-price { display: none; }

	/* Quantity stepper: 44x44px minimum touch target on both buttons and a
	 * balanced input, so neither the minus nor the plus can be clipped. */
	.at-cart-wrap .quantity {
		width: auto;
		min-width: 0;
		margin: 0;
		display: inline-flex;
		align-items: stretch;
		flex-wrap: nowrap;
	}
	.at-cart-wrap .quantity .qty {
		flex: 1 1 auto;
		min-width: 0;
		width: 48px;
		height: 44px;
		padding: 0 2px;
		font-size: 14px;
		text-align: center;
	}
	.at-cart-wrap .quantity .at-qbtn,
	.at-cart-wrap .quantity .button {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		min-width: 44px;
		padding: 0;
		font-size: 20px;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.at-cart-wrap .product-subtotal { font-size: 13px; font-weight: 700; white-space: nowrap; }

	/* Remove control: real hit area rather than a bare glyph. */
	.at-cart-wrap .product-remove { width: 52px; text-align: center; }
	.at-cart-wrap .product-remove a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		font-size: 22px;
		line-height: 1;
		border-radius: 10px;
	}
.woocommerce-cart-form { display: block; }

	/* Coupon box, cart totals and cross-sells are stacked full-width. They used
	 * to sit side by side inside the old scroll viewport, which produced the
	 * clipped/overlapping boxes on narrow screens. */
	.cart-collaterals,
	.woocommerce-cart .cart-collaterals,
	.woocommerce-cart .cross-sells {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		clear: both;
	}
	.cross-sells { margin-top: 26px; }
	.cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

	.woocommerce-cart-actions,
	.wc-proceed-to-checkout { padding-top: 12px; }
	.woocommerce-cart table.cart td.actions { display: block; }
	.woocommerce-cart table.cart td.actions .coupon {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		width: 100%;
	}
	.woocommerce-cart table.cart td.actions .coupon #coupon_code {
		flex: 1 1 160px;
		width: auto;
		max-width: none;
		min-width: 0;
	}
	.woocommerce-cart table.cart td.actions .coupon .button {
		flex: 0 0 auto;
		height: 44px;
		padding: 0 20px;
	}
	.wc-proceed-to-checkout .checkout-button {
		width: 100%; min-height: 48px; font-size: 15px; line-height: 48px; padding: 0;
	}
}

/* ============ 2026-10-02 round 2: nav counts, footer centre, compact cart ============ */

/* Published-product badge beside a nav category. Renders only when the
 * category really holds products, so this is usually absent today. */
.at-menu .at-menu-count {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--at-fill-ink);
	background: var(--at-orange, #f68b1f);
	border-radius: 999px;
	padding: 2px 6px;
	margin-inline-start: 5px;
	vertical-align: 2px;
	white-space: nowrap;
}
.at-menu .at-mega-list .at-menu-count {
	background: rgba(11, 92, 171, .10);
	color: var(--at-navy, #0b2a4a);
	padding: 1px 5px;
	font-size: 10.5px;
	vertical-align: 1px;
}

/* Footer contact strip (phone / email / opening hours / WhatsApp): centre it. */
.at-footer-contact .container {
	justify-content: center;
	text-align: center;
}
.at-footer-contact .at-tb-item { justify-content: center; }

/* Cross-sells stay two-up on phones. The 480px rule further up forced a single
 * column, which made the block taller than the cart itself. */
@media (max-width: 768px) {
	.woocommerce-cart .cross-sells ul.products,
	.woocommerce-cart .cross-sells .wc-block-grid ul.products,
	.woocommerce-cart .related.products ul.products,
	.woocommerce-cart .related.products .wc-block-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px;
	}
	.woocommerce-cart .cross-sells li,
	.woocommerce-cart .related.products li {
		width: auto !important;
		float: none !important;
		margin: 0 !important;
	}
	.woocommerce-cart .cross-sells img,
	.woocommerce-cart .related.products img {
		width: 100% !important;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
	.woocommerce-cart .cross-sells .woocommerce-loop-product__title,
	.woocommerce-cart .related.products .woocommerce-loop-product__title {
		font-size: 11px !important;
		line-height: 1.25;
		min-height: 0;
		margin: 0 0 4px;
	}
	.woocommerce-cart .cross-sells .onsale,
	.woocommerce-cart .related.products .onsale {
		min-width: 0;
		min-height: 0;
		padding: 1px 5px;
		font-size: 10px;
	}
	.woocommerce-cart .cross-sells > h2,
	.woocommerce-cart .related.products > h2 {
		font-size: 16px !important;
		margin: 0 0 10px;
	}
}

/* Mobile cart: denser type only.
 * This block previously shrank the cart a second time (max-height 40vh, 32px
 * thumbs, 26px steppers). Because it sits *after* the row-layout block above
 * at equal specificity, it silently won and undid the 44px touch targets —
 * the exact "later equal-specificity rule" trap documented for this file.
 * Height capping is gone entirely (see at-cart-wrap--flow) and the row
 * dimensions are now inherited from the block above instead of being
 * re-declared smaller here. */
@media (max-width: 768px) {
	.at-cart-wrap--flow { max-height: none; height: auto; overflow: visible; }
	.at-cart-wrap .shop_table { font-size: 11.5px; }
	.at-cart-wrap .shop_table td,
	.at-cart-wrap .shop_table th { padding: 6px 4px !important; font-size: 11.5px; }
	.at-cart-wrap .product-name a { font-size: 12px !important; line-height: 1.3; }
	.woocommerce-cart-form { font-size: 12px; }
}

/* ============ Product card: SKU on the right, opposite the brand ============ */
/* .atc-body is a column flexbox and .at-card-brand carried align-self:flex-start,
   so brand + SKU share one row wrapper (.atc-skurow) that sits directly under
   the thumbnail. The wrapper is only emitted when at least one side exists. */
.atc-skurow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}
.atc-sku {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	min-width: 0;
	font-size: 11px;
	font-weight: 600;
	color: #7b8ca1;
	letter-spacing: .01em;
}
.atc-sku-lbl {
	flex: none;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #a3b2c4;
}
.atc-sku-val {
	/* SKUs are codes: force LTR so a numeric code does not reorder under RTL,
	   and never let a long code push the brand pill out of the card. */
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
html[data-theme="dark"] .atc-sku { color: #93a7bd; }
html[data-theme="dark"] .atc-sku-lbl { color: #7b8ea3; }

/* Horizontal list view gives the row the full card width; keep the brand pill
   from stretching and keep the SKU hugging the far edge. */
body.atv-list .atc-skurow { min-width: 0; }

/* Very narrow cards (3-up on a tablet): the label is the first thing to go. */
@media (max-width: 420px) {
	.atc-sku-lbl { display: none; }
}

/* ================================================================
   Mobile cart: touch-friendly steppers, stacked rows, pinned checkout
   ---------------------------------------------------------------
   Server-rendered by woocommerce/global/quantity-input.php (the
   .at-qbtn buttons) and at_cart_mobile_cta() (the fixed bar).
   ================================================================ */

/* Disabled steppers: they still take their space so the row never reflows
   when a limit is hit, they just stop inviting a no-op tap. */
.at-qbtn:disabled { opacity: .4; cursor: not-allowed; }
.at-qbtn:disabled:hover { background: var(--at-bg); color: var(--at-navy); }
.at-qbtn:focus-visible { outline: 2px solid var(--at-blue); outline-offset: -2px; }

/* Desktop keeps the single in-page CTA, so the pinned bar stays out of the way
   entirely - including for screen readers, which is why it is display:none and
   not visually hidden. */
.at-cart-cta { display: none; }

@media (max-width: 768px) {
	/* ---- Steppers sized for a thumb ----
	 * 44x44 is the minimum comfortable touch target; the previous 36x42 came
	 * out of a desktop-first table and was awkward to hit on a phone. */
	div.quantity { border-radius: 11px; }
	div.quantity .qty { width: 46px; height: 44px; font-size: 15px; }
	.at-qbtn { width: 44px; height: 44px; font-size: 21px; }

	/* ---- Pinned checkout bar ----
	 * Offset above the 5-icon bottom nav for the same reason as
	 * .atx-stickybar: at bottom:0 with z-index 900 it rendered underneath the
	 * nav (950) and its lower half was unreachable. 960 keeps it above the
	 * nav but below the sticky ATC bar's previous 99990. */
	.at-cart-cta {
		display: flex; align-items: center; gap: 12px;
		position: fixed; inset-inline: 0;
		bottom: calc(65px + env(safe-area-inset-bottom, 0px));
		z-index: 960;
		padding: 10px 14px;
		background: #fff; border-top: 1px solid var(--at-line);
		box-shadow: 0 -6px 22px rgba(12,41,71,.12);
	}
	html[data-theme="dark"] .at-cart-cta {
		background: #0f1c2e; border-top-color: #2a3b52;
		box-shadow: 0 -6px 22px rgba(0,0,0,.45);
	}
	/* Reserve room for the nav (65px) plus this bar (~64px), only when the
	 * bar actually rendered - see the atx-has-cta body_class filter. */
	body.atx-has-cta { padding-bottom: calc(129px + env(safe-area-inset-bottom, 0px)); }
	body.atx-has-cta .at-backtop { bottom: calc(135px + env(safe-area-inset-bottom, 0px)); }
	.at-cart-cta-sum { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
	.at-cart-cta-label {
		font-size: 11px; font-weight: 700; letter-spacing: .05em;
		text-transform: uppercase; color: var(--at-muted);
	}
	.at-cart-cta-total { font-size: 17px; font-weight: 800; color: var(--at-navy); line-height: 1.15; }
	html[data-theme="dark"] .at-cart-cta-total { color: #eaf2fb; }
	.at-cart-cta-btn {
		margin-inline-start: auto; flex: 0 0 auto;
		display: inline-flex; align-items: center; justify-content: center;
		min-height: 46px; min-width: 45%; padding: 0 20px;
border-radius: 10px; background: var(--at-fill); color: var(--at-fill-ink);
font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
transition: background .15s ease;
}
.at-cart-cta-btn:hover { background: var(--at-fill-hover); color: var(--at-fill-ink); }
	.at-cart-cta-btn:focus-visible { outline: 3px solid var(--at-blue); outline-offset: 2px; }

	/* The bar is fixed, so the last row and the coupon box need room to sit
	 * above it instead of underneath. */
	.woocommerce-cart .woocommerce { padding-bottom: 84px; }

	/* ---- Row layout ----
	 * The desktop table put six columns on one line, so on a phone the cells
	 * collided and the remove "x" overlapped the thumbnail. Each row becomes a
	 * 3x3 grid instead. Grid areas follow the inline direction, so this needs
	 * no RTL variant - the columns mirror on their own under [dir="rtl"]. */
	.woocommerce-cart table.shop_table.cart { display: block; border: 0 !important; border-radius: 0; }
	.woocommerce-cart table.shop_table.cart > * { display: block; width: auto; }
	.woocommerce-cart table.shop_table.cart thead { display: none; }
	.woocommerce-cart table.shop_table.cart tbody { display: block; }

	.woocommerce-cart table.shop_table.cart tr.cart_item {
		display: grid;
		/* 72px thumb, matching the .at-cart-wrap row sizing above, so the same
		 * product looks the same size in the item list and in the order recap. */
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name    remove"
			"thumb price   sub"
			"thumb qty     sub";
		align-items: start; column-gap: 12px; row-gap: 8px;
		padding: 14px 4px; border-bottom: 1px solid var(--at-line);
	}
	.woocommerce-cart table.shop_table.cart tr.cart_item td {
		display: block; width: auto !important; padding: 0; border: 0;
		text-align: start; min-width: 0;
	}
	.woocommerce-cart table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
	.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 72px; height: 72px; }
	.woocommerce-cart table.shop_table.cart td.product-name { grid-area: name; font-weight: 700; line-height: 1.35; }
	.woocommerce-cart table.shop_table.cart td.product-price { grid-area: price; }
	.woocommerce-cart table.shop_table.cart td.product-quantity { grid-area: qty; }
	.woocommerce-cart table.shop_table.cart td.product-subtotal { grid-area: sub; text-align: end; font-weight: 800; }
	.woocommerce-cart table.shop_table.cart td.product-remove { grid-area: remove; justify-self: end; }

	/* WooCommerce puts data-title on every cart cell; show it as the label now
	 * that the header row is hidden, otherwise "Price", "Quantity" and
	 * "Subtotal" are just bare numbers. */
	.woocommerce-cart table.shop_table.cart td.product-price::before,
	.woocommerce-cart table.shop_table.cart td.product-quantity::before,
	.woocommerce-cart table.shop_table.cart td.product-subtotal::before {
		content: attr(data-title);
		display: block; font-size: 11px; font-weight: 700;
		letter-spacing: .05em; text-transform: uppercase;
		color: var(--at-muted); margin-bottom: 3px;
	}
	html[data-theme="dark"] .woocommerce-cart table.shop_table.cart td.product-price::before,
	html[data-theme="dark"] .woocommerce-cart table.shop_table.cart td.product-quantity::before,
	html[data-theme="dark"] .woocommerce-cart table.shop_table.cart td.product-subtotal::before { color: #8fa6bd; }

	/* The remove link is a bare "&times;"; give it a real target and keep the
	 * cart's own border from boxing it. 44x44 rather than the previous 34x34:
	 * this is a destructive control on a touch screen, so it needs the same
	 * target size as the quantity steppers above. */
	.woocommerce-cart table.shop_table.cart td.product-remove { width: 52px; text-align: center; }
	.woocommerce-cart table.shop_table.cart td.product-remove a {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; border-radius: 10px;
		font-size: 22px; line-height: 1; text-decoration: none;
		color: var(--at-muted); background: var(--at-bg);
	}
	.woocommerce-cart table.shop_table.cart td.product-remove a:hover {
		color: var(--at-text-primary); background: rgba(229, 9, 20, .12);
	}
	html[data-theme="dark"] .woocommerce-cart table.shop_table.cart td.product-remove a:hover {
		color: #ff9ba3; background: rgba(229, 9, 20, .22);
	}

	/* Coupon + update row: full width, no float, no overflow on a 320px screen. */
	.woocommerce-cart table.cart td.actions { display: block; padding: 16px 0 0; }
	.woocommerce-cart table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
	.woocommerce-cart table.cart td.actions .coupon #coupon_code { flex: 1 1 160px; width: auto; max-width: none; }
	.woocommerce-cart table.cart td.actions .button { flex: 1 1 auto; }
}

/* ============ 1.2.73: WooCommerce account area in dark mode ============
 *
 * /my-account/ and /my-account/orders/ are live (HTTP 200) but the stylesheet
 * had no dark-mode rule for them at all, so orders, tracking and address
 * details rendered dark-navy text on the dark page canvas and simply vanished.
 * Every surface here uses the theme's own tokens so the same markup is correct
 * in both themes, with light-mode fallbacks supplied by the existing rules.
 *
 * The selector list is deliberately broad: WooCommerce has shipped several
 * markup generations for the orders table and the track-order form and the
 * class names differ between them. */
.woocommerce-account .woocommerce-MyAccount-navigation,
html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  background: var(--at-card-bg); color: var(--at-text-primary); border-radius: 12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--at-text-primary); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active button {
  background: rgba(11, 92, 171, .12); color: var(--at-blue);
}
html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active button { color: #8ec2ff; }

/* The orders list itself. */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-MyAccount-content table,
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td,
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-Addresses .woocommerce-address,
.woocommerce-account .woocommerce-Addresses .title,
.woocommerce-account .woocommerce-address__title,
.woocommerce-account .woocommerce-order,
.woocommerce-account .woocommerce-order__meta-title,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-order-details__table th,
.woocommerce-account .woocommerce-order-details__table td,
.woocommerce-account .woocommerce-thankyou-order-received,
.woocommerce-account .woocommerce-order-review-order,
.woocommerce-account .woocommerce-billing-fields,
.woocommerce-account .woocommerce-billing-fields h3,
.woocommerce-account .woocommerce-billing-fields__field-wrapper,
.woocommerce-form-login,
.woocommerce-form-login h2,
.woocommerce-form-register,
.woocommerce-form-register h2,
.woocommerce-track-order,
.woocommerce-track-order h2,
.woocommerce-columns--form-login,
.woocommerce-columns--form-register {
  background: var(--at-card-bg); color: var(--at-text-primary);
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-order-details__table th {
  background: var(--at-bg); color: var(--at-text-primary);
  border-color: var(--at-line);
}
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-MyAccount-content table td,
.woocommerce-account .woocommerce-order-details__table td,
.woocommerce-account .woocommerce-Addresses .woocommerce-address,
.woocommerce-account .woocommerce-order { border-color: var(--at-line); }
.woocommerce-account .woocommerce-orders-table td a,
.woocommerce-account .woocommerce-orders-table td strong,
.woocommerce-account .woocommerce-MyAccount-content a,
.woocommerce-account .woocommerce-MyAccount-content strong,
.woocommerce-account .woocommerce-order-details__table a,
.woocommerce-account .woocommerce-address__edit { color: var(--at-blue); }
html[data-theme="dark"] .woocommerce-account .woocommerce-orders-table td a,
html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-content a,
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details__table a,
html[data-theme="dark"] .woocommerce-account .woocommerce-address__edit { color: #8ec2ff; }

/* Order status pills. Woo emits these with its own background, so the text
 * colour has to be pinned explicitly or it lands on the page canvas. */
.woocommerce-account .woocommerce-orders-table .woocommerce-button,
.woocommerce-account .order-status,
.woocommerce-account .woocommerce-order .order-status,
.woocommerce-account .wc-order-status,
.woocommerce-account .woocommerce-MyAccount-content .order-status {
  background: rgba(11, 92, 171, .12); color: var(--at-blue);
  border-radius: 999px; padding: 3px 12px; font-weight: 700;
}
html[data-theme="dark"] .woocommerce-account .order-status,
html[data-theme="dark"] .woocommerce-account .woocommerce-order .order-status,
html[data-theme="dark"] .woocommerce-account .wc-order-status { color: #a8cdf5; }

/* Order tracking block: tracking number and carrier line. */
.woocommerce-account .woocommerce-order__tracking-info,
.woocommerce-account .woocommerce-track-order .order-info,
.woocommerce-track-order p,
.woocommerce-track-order label { color: var(--at-text-primary); }
.woocommerce-account .woocommerce-order__tracking-id {
  background: var(--at-bg); color: var(--at-text-primary);
  border: 1px dashed var(--at-line); border-radius: 8px;
}

/* Shipment tracking box on view-order / order-received. Markup comes from
   inc/modules/lib/atx-main.php (woocommerce_order_details_after_order_table);
   colours live here so both themes can style it. */
.atx-tracking {
  margin: 14px 0; padding: 14px 16px;
  background: #f2f7fc; border: 1px solid #dbe7f2;
  border-radius: 10px; color: var(--at-text-primary);
}
.atx-tracking h2 { margin: 0 0 6px; font-size: 15px; }
.atx-tracking p { margin: 0; }
.atx-tracking p strong { letter-spacing: .03em; }
.atx-tracking .atx-tracking-btn {
  padding: 5px 16px !important; margin-top: 6px;
  font-size: 13px !important; line-height: 1.6 !important;
}
html[data-theme="dark"] .atx-tracking {
  background: var(--at-bg); border-color: var(--at-line);
  color: var(--at-text-primary);
}
html[data-theme="dark"] .atx-tracking h2,
html[data-theme="dark"] .atx-tracking p strong { color: var(--at-text-primary); }

/* View-order details table: Woo emits woocommerce-table--order-details, not
   the __table variant the earlier account pass assumed. Dark passes only. */
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .woocommerce-table--order-details th,
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .woocommerce-table--order-details td { border-color: #22344a; }
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .woocommerce-table--order-details thead th { background: rgba(255,255,255,.05); color: #9fb2cb; }
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .woocommerce-table--order-details tbody tr:hover td { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .woocommerce-table--order-details tfoot tr:last-child th,
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .woocommerce-table--order-details tfoot tr:last-child td { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .woocommerce-table--order-details small.shipped_via { color: #8fa6bd; }
html[data-theme="dark"] .woocommerce-account .woocommerce-order-details .order-actions--heading { color: #9fb2cb; }

/* Billing/shipping address cards (order-details-customer.php). Dark only. */
html[data-theme="dark"] .woocommerce-account .woocommerce-customer-details address {
  background: rgba(255,255,255,.04); border: 1px solid #22344a;
  border-radius: 10px; padding: 12px 16px; font-style: normal;
  line-height: 1.7; color: #dbe7f4;
}
html[data-theme="dark"] .woocommerce-account .woocommerce-customer-details address a { color: #8ec2ff; }
html[data-theme="dark"] .woocommerce-account .woocommerce-customer-details .woocommerce-column__title { color: #dbe7f4; }
/* Form controls in the account area reuse the shared control tokens, so they
 * match the dark form pass further up this file. */
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea,
.woocommerce-track-order input.input-text,
.woocommerce-track-order select,
.woocommerce-login input.input-text,
.woocommerce-login select,
.woocommerce-register input.input-text,
.woocommerce-register select {
  background: var(--at-ctrl-bg, #fff); color: var(--at-ink, #22303f);
  border-color: var(--at-ctrl-border, #e2e9f2);
}
.woocommerce-account label,
.woocommerce-track-order label,
.woocommerce-login label,
.woocommerce-register label { color: var(--at-ink, #22303f); }
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-privacy-policy-text a,
.woocommerce-track-order .woocommerce-privacy-policy-text { color: var(--at-muted); }

/* Modal overlay: the quickview reuses these, and a transparent overlay leaves
 * the dialog unreadable over a bright product image. */
.atx-qv-overlay,
.atx-overlay,
.at-modal-overlay {
  background: rgba(8, 16, 27, .72);
  backdrop-filter: blur(2px);
}
.atx-qv,
.at-modal { background: var(--at-card-bg); color: var(--at-text-primary); }

/* ============ Shipping modal ============ */
/* `[hidden]` has to be restated: the UA rule is `[hidden] { display: none }`
 * at author-origin-0 specificity, so the `display: grid` below would beat it
 * and the dialog would be visible on every page load. */
.atx-ship[hidden] { display: none; }
.atx-ship {
  position: fixed; inset: 0; z-index: 100200;
  display: grid; place-items: center;
  padding: 20px;
}
.atx-ship-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 16, 27, .72);
  backdrop-filter: blur(2px);
}
.atx-ship-panel {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--at-card-bg); color: var(--at-text-primary);
  border: 1px solid var(--at-line);
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.atx-ship-panel:focus { outline: none; }
.atx-ship-panel:focus-visible { outline: 3px solid var(--at-blue); outline-offset: 3px; }
.atx-ship-close {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--at-muted);
  border: 1px solid var(--at-line);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.atx-ship-close:hover { background: var(--at-bg); color: var(--at-text-primary); }
.atx-ship-close:focus-visible { outline: 3px solid var(--at-blue); outline-offset: 2px; }
.atx-ship-title {
  margin: 0 44px 6px 0;
  font-size: 21px; font-weight: 800; line-height: 1.25;
  color: var(--at-text-primary);
}
.atx-ship-intro { margin: 0 0 18px; font-size: 13.5px; color: var(--at-muted); }
.atx-ship-rates { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.atx-ship-rate {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "zone cost" "method cost" "free cost";
  align-items: center;
  gap: 2px 14px;
  padding: 13px 15px;
  border: 1px solid var(--at-line);
  border-radius: 13px;
  background: var(--at-bg);
}
.atx-ship-zone {
  grid-area: zone;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--at-muted);
}
.atx-ship-method { grid-area: method; font-size: 14.5px; font-weight: 700; }
.atx-ship-free { grid-area: free; font-size: 11.5px; color: #1f7a45; font-weight: 600; }
.atx-ship-cost {
  grid-area: cost;
  font-size: 17px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.atx-ship-note {
  margin: 16px 0 0; font-size: 11.5px; color: var(--at-muted);
  border-top: 1px solid var(--at-line); padding-top: 13px;
}
/* Trigger. Deliberately NOT .at-btn-ghost: that variant is white-on-transparent
 * with a translucent white border and is invisible on the light page.
 *
 * 1.2.97: this is now an icon-only circle inside the cart's shipping cell
 * (see the hook comment in functions.php), not a full-weight text pill sitting
 * between <form> and <table>.
 *
 * The bubble deliberately repeats the .at-tb-item[data-tip] idiom already used
 * by the top bar - content: attr(data-tip), ONE dark bubble for both colour
 * modes because the top bar is dark in both, arrow drawn with ::before, hidden
 * at <=768px for touch - so the store has one tooltip component rather than two
 * near-identical ones. The button also carries aria-label: an icon-only
 * <button> takes no accessible name from its content, and data-tip is not
 * announced. */
.at-ship-open {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin: 4px 0 2px; padding: 0;
  background: transparent; color: var(--at-blue);
  border: 1.4px solid currentColor; border-radius: 50%;
  cursor: pointer; vertical-align: middle;
  transition: background .14s ease, color .14s ease;
}
.at-ship-open:hover { background: var(--at-blue); color: #fff; }
.at-ship-open:focus-visible { outline: 3px solid var(--at-blue); outline-offset: 2px; }
.at-ship-open svg { display: block; }
.at-ship-open::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0a1a2e; color: #e9f2fc;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: 5px 10px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35; letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  z-index: 60;
}
.at-ship-open:hover::after,
.at-ship-open:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.at-ship-open::before {
  content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  width: 8px; height: 8px; background: #0a1a2e;
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.at-ship-open:hover::before,
.at-ship-open:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) rotate(45deg);
}
@media (max-width: 768px) {
  .at-ship-open::after, .at-ship-open::before { display: none; }
}

html[data-theme="dark"] .atx-ship-panel { border-color: #2a3b52; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .atx-ship-rate { background: #0f1c2e; border-color: #22344a; }
html[data-theme="dark"] .atx-ship-close { border-color: #2a3b52; color: #9fb2cb; }
html[data-theme="dark"] .atx-ship-close:hover { background: #1b2c42; color: #eaf2fb; }
html[data-theme="dark"] .atx-ship-free { color: #6ee7a0; }
html[data-theme="dark"] .at-ship-open { color: #7db3ee; }
html[data-theme="dark"] .at-ship-open:hover { background: #7db3ee; color: #0f1c2e; }
@media (max-width: 480px) {
  .atx-ship { padding: 12px; align-items: flex-end; }
  .atx-ship-panel { border-radius: 18px; padding: 22px 18px 18px; max-height: 86vh; }
  .atx-ship-title { font-size: 19px; }
}

/* ============ 1.2.73: product page details (unit price, brand, EU, inquiries, stars) ============ */

/* ---- Aggregate star rating.
 * WooCommerce's own rating markup is not used: get_rating_html() returns ''
 * because both rating display options are off in the shop settings, even though
 * _wc_average_rating/_wc_review_count are populated. This draws the value from
 * the same meta so the header and the archive cards agree.
 *
 * Implemented as a track with a gradient-filled overlay instead of five separate
 * star glyphs, so a 4.3 average renders as a genuine partial star rather than
 * rounding to 4 or 5. The track is aria-hidden and the wrapper carries the
 * numeric label, so a screen reader hears "Rated 4.3 out of 5, 12 reviews"
 * once instead of five glyphs. */
.at-stars { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.at-stars-track {
  position: relative; display: inline-block; flex: none;
  background: var(--at-line);
  -webkit-mask: var(--at-star-mask) no-repeat center / contain;
  mask: var(--at-star-mask) no-repeat center / contain;
}
.at-stars-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  background: var(--at-orange);
  -webkit-mask: var(--at-star-mask) no-repeat left center / contain;
  mask: var(--at-star-mask) no-repeat left center / contain;
}
.at-stars-count { color: var(--at-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.at-stars-sm .at-stars-track { width: 78px; height: 13px; }
.at-stars-md .at-stars-track { width: 104px; height: 17px; }
.at-stars-lg .at-stars-track { width: 132px; height: 22px; }

.at-pf-stars-header { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; flex-wrap: wrap; }
.at-pf-stars-card { display: block; margin-top: 6px; }
.at-pf-stars-card .at-stars-count { font-size: 11.5px; }

/* ---- Unit price / packaging block.
 * Rendered straight after the WooCommerce price. Hidden entirely when
 * _unit_price is empty, so nothing is printed on the many products that carry
 * no pack-size data yet. */
.at-pf-unit {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 10px 0 0; padding: 10px 14px;
  background: var(--at-card-bg, #fff);
  border: 1px solid var(--at-line); border-radius: var(--at-radius);
}
.at-pf-unit-label { color: var(--at-muted); font-size: 13px; font-weight: 600; }
.at-pf-unit-value { color: var(--at-text); font-size: 15px; font-weight: 800; }
.at-pf-unit-row { display: flex; align-items: baseline; gap: 6px; }

/* ---- Technical details tab: attribute-driven specification table.
 * Grouped into sections (General, Electrical, ...), each a two-column table.
 * The whole block hides itself when the product carries no attributes, so the
 * table is inert on products that were synced without spec data. */
.at-pf-specs { color: var(--at-text); }
.at-pf-specs-group { margin: 0 0 18px; }
.at-pf-specs-group:last-child { margin-bottom: 0; }
.at-pf-specs-h {
  margin: 0 0 8px; padding: 0 0 6px;
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  color: var(--at-text); border-bottom: 2px solid var(--at-blue, #0b5cab);
}
.at-pf-specs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.at-pf-specs-table tr { border-bottom: 1px solid var(--at-line, #e5e9ed); }
.at-pf-specs-table tr:last-child { border-bottom: 0; }
.at-pf-specs-table tr:nth-child(even) { background: var(--at-zebra, rgba(0, 0, 0, .02)); }
.at-pf-specs-table th {
  width: 42%; text-align: start; vertical-align: top;
  padding-block: 8px; padding-inline-end: 14px;
  font-weight: 600; color: var(--at-muted, #4a5a68);
}
.at-pf-specs-table td { padding-block: 8px; color: var(--at-text); font-weight: 600; word-break: break-word; }
@media (max-width: 560px) {
  .at-pf-specs-table th { width: 50%; padding-inline-end: 10px; font-size: 13.5px; }
  .at-pf-specs-table td { font-size: 13.5px; }
}

/* ---- Source facts line + technical-data table. Consolidated in 1.2.123
 * (Item 10c) from mu-plugins/at-tabs.php; the .at-product-facts list and
 * the .at-tech-table only appear when the sync engine supplies the
 * underlying meta, so both are inert on the current catalogue. */
.at-product-facts { list-style: none; margin: .6em 0; padding: 0; font-size: .92em; color: #4a5a68; }
.at-product-facts li { margin: .15em 0; }
.at-ean span { font-weight: 600; color: #16283c; }
.at-tech-table table { width: 100%; border-collapse: collapse; }
.at-tech-table td, .at-tech-table th { border: 1px solid #dfe6ec; padding: .45em .7em; text-align: left; }

/* ---- Tab bodies. WooCommerce wraps every tab panel in .woocommerce-tabs
 * .panel / #tab-*, so these rules only restyle the content the module prints
 * and leave Woo's own tab strip untouched. */
.at-pf-brand-logo { margin: 0 0 12px; }
.at-pf-brand-logo img { max-width: 220px; height: auto; }
.at-pf-sub { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--at-text); }
.at-pf-rich > :first-child { margin-top: 0; }
.at-pf-rich > :last-child { margin-bottom: 0; }
.at-pf-eu { color: var(--at-text); font-size: 14.5px; line-height: 1.6; }
.at-pf-eu strong { display: block; margin-bottom: 4px; }

/* ---- Inquiry tab.
 * The mailto/WhatsApp buttons are the primary path (no JS, works in any mail
 * client); the form below is the convenience path for customers who would
 * rather not leave the page. */
.at-pf-inq { color: var(--at-text); }
.at-pf-inq-lead { margin: 0 0 14px; color: var(--at-muted); font-size: 14px; }
.at-pf-inq-ctx {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--at-bg); border: 1px solid var(--at-line); border-radius: var(--at-radius);
  font-size: 13px;
}
.at-pf-inq-sku { font-weight: 700; }
.at-pf-inq-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
/* The old .at-pf-inq-btn block (min-height 44px / padding 10px 20px) was dead:
 * the markup never emits that class, and its padding contradicted .at-btn's
 * 12px 26px - the exact mismatch the owner reported. Removed rather than left
 * to drift. Email and WhatsApp inherit their metrics from .at-btn alone. */
.at-pf-inq-mail {
  background: var(--at-fill); color: var(--at-fill-ink);
  box-shadow: 0 8px 20px rgba(246,139,31,.32);
}
.at-pf-inq-mail:hover {
  background: var(--at-fill-hover); color: var(--at-fill-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(246,139,31,.34), 0 0 22px 6px rgba(246,139,31,.3);
}
/* WhatsApp keeps its brand green - the owner asked for matching height,
 * padding and typography, not matching colour - but inherits the primary
 * button's shadow so the three read as one set. */
.at-pf-inq-wa {
  background: #128c7e; color: #fff;
  box-shadow: 0 8px 20px rgba(18,140,126,.32);
}
.at-pf-inq-wa:hover {
  background: #0d6f63; color: #fff; transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(18,140,126,.34), 0 0 22px 6px rgba(18,140,126,.3);
}
.at-pf-inq-mail:focus-visible,
.at-pf-inq-wa:focus-visible { outline: 3px solid var(--at-blue); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) {
  .at-pf-inq-mail:hover, .at-pf-inq-wa:hover { transform: none; }
}

.at-pf-inq-form { display: grid; gap: 12px; max-width: 620px; }
.at-pf-inq-field { display: grid; gap: 5px; }
.at-pf-inq-field label { color: var(--at-ctrl-label, var(--at-text)); font-size: 13px; font-weight: 700; }
.at-pf-inq-field input,
.at-pf-inq-field textarea {
  width: 100%; padding: 11px 13px;
  background: var(--at-ctrl-bg, #fff); color: var(--at-ink, #22303f);
  border: 1px solid var(--at-ctrl-border, #e2e9f2); border-radius: 10px;
  font: inherit; font-size: 14.5px;
}
.at-pf-inq-field textarea { min-height: 120px; resize: vertical; }
.at-pf-inq-field input:focus,
.at-pf-inq-field textarea:focus {
  border-color: var(--at-ctrl-border-focus, var(--at-blue));
  box-shadow: 0 0 0 3px rgba(11, 92, 171, .18);
}
/* The honeypot must stay in the layout for autofill to reach it, but never be
 * visible to a person: position it off-canvas rather than display:none, which
 * would make some password managers refill it. */
.at-pf-inq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.at-pf-inq-status { margin: 0; min-height: 1.2em; font-size: 13.5px; font-weight: 600; }
.at-pf-inq-status.is-ok { color: var(--at-green, #1e9e4a); }
.at-pf-inq-status.is-err { color: #c0392b; }
html[data-theme="dark"] .at-pf-inq-status.is-err { color: #ff9ba3; }
  html[data-theme="dark"] .at-pf-inq-status.is-ok { color: #6ee7a0; }

/* The field wrapper is a <p> in the markup, so it needs to behave like a grid
 * box rather than a paragraph with default margins. */
/* The field wrapper is a <p> in the markup, so it needs to behave like a grid
 * box rather than a paragraph with default margins. */
.at-pf-inq-field { margin: 0; }
.at-pf-inq-submit { margin: 0; }
/* The submit <p> is only a layout wrapper - it carries no button metrics. The
 * <button> inside it holds `at-btn at-btn-primary`, so its height, padding and
 * typography come from the same tokens as Add to Cart. The min-height:46px /
 * font-size:15px rules that used to sit here were painting a <p> and had no
 * effect on the control at all. */
.at-pf-inq-submit > .at-btn { justify-self: start; }
.at-pf-inq-submit .at-btn[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 560px) {
  .at-pf-inq-actions { flex-direction: column; align-items: stretch; }
  .at-pf-inq-mail,
  .at-pf-inq-wa { justify-content: center; width: 100%; }
  .at-pf-inq-submit > .at-btn { width: 100%; }
}

/* -----------------------------------------------------------------
 * Native WooCommerce sale flash is OFF (1.2.77).
 *
 * The Product Badges module owns the one and only discount badge
 * (`.special-tags > .badge.badge-offer`, red #d92e2e). WooCommerce's
 * `.onsale` is a second, independent "-X%" that lands in the same corner of
 * the card, and on the product page it prints above the summary - so the two
 * can render on top of each other.
 *
 * functions.php already unhooks both WooCommerce print actions on `wp_loaded`.
 * This is the belt-and-braces layer. It is deliberately SCOPED to the
 * WooCommerce product surfaces and does NOT touch `.onsale` globally, because
 * WooCommerce blocks and email templates use that class legitimately and a
 * global `!important` would silently blank them too.
 *
 * Measured 2026-10-03: `.onsale` currently renders on 0 pages, because every
 * on-sale product is `variable` (0 of 223 are `simple`) and WooCommerce only
 * emits the flash when the parent product has a sale price. Preventive only.
 * ----------------------------------------------------------------- */
.woocommerce ul.products li.product .onsale,
.woocommerce-cart .cross-sells .onsale,
.woocommerce .related.products .onsale,
.woocommerce div.product .onsale,
.woocommerce div.product div.images .onsale,
.woocommerce .wc-block-grid__product .onsale {
  display: none !important;
}

/* =================================================================
 * Product gallery - single horizontal thumbnail strip (1.2.79)
 * =================================================================
 * Everything below is built on measured facts about THIS install
 * (WooCommerce 11.1.2, checked 2026-10-03), not on how the gallery
 * "used to" work. Read them before editing, or you will style markup
 * that does not exist:
 *
 * 1. The served HTML contains NO thumbnail list. It is 17 sibling
 *    <div class="woocommerce-product-gallery__image" data-thumb="...">
 *    inside .woocommerce-product-gallery__wrapper. Grepping the page for
 *    "flex-control-thumbs" or "__thumbnails" returns 0 and proves
 *    nothing - the strip does not exist yet at that point.
 *
 * 2. Woo's bundled Flexslider BUILDS the strip at runtime from that
 *    data-thumb attribute:
 *      controlNav.setupPaging() ->
 *        <ol class="flex-control-nav flex-control-thumbs">
 *          <li><a><img src="{data-thumb}"></a></li> ...
 *    So these rules style JS-generated markup. There is no template to
 *    override and none is needed - which is what makes a CSS-only
 *    change viable here at all.
 *
 * 3. directionNav was false in WooCommerce's core array; as of 1.2.80
 *    functions.php filters 'woocommerce_single_product_carousel_options'
 *    and flips that single option to true, so the arrows below are now
 *    live markup. Core leaves animationLoop false on purpose ("Breaks
 *    photoswipe pagination if true") and that is not touched.
 *
 * 4. The active-thumb class is applied to the <img>, not the <li>:
 *      set()     -> "."+o+"control-nav li "+t   where t = "img"
 *      active()  -> .removeClass("active").eq(animatingTo).addClass("active")
 *    So the selected state must be styled on img.flex-active. Styling
 *    li.flex-active-slide (the pre-9.x Flexslider convention) matches
 *    nothing.
 *
 * 5. zoom + lightbox + slider theme support are ALL enabled, and Woo
 *    applies the hover zoom in JavaScript. It therefore cannot be turned
 *    off by editing markup - it has to be neutralised in CSS below.
 */

/* ---------- hover zoom / magnifier OFF (rule 5) ---------- */
.woocommerce div.product div.images.woocommerce-product-gallery__trigger {
  display: none !important;
}
body.wc-single-product-zoom .woocommerce div.product div.images img,
body.wc-single-product-zoom .woocommerce div.product div.images.woocommerce-product-gallery img {
  transform: none !important;
  transition: none !important;
}

/* ---------- main image viewport ---------- */
.woocommerce div.product div.images.woocommerce-product-gallery {
  margin-bottom: 16px;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport {
  overflow: hidden;
  border-radius: var(--at-radius);
  border: 1px solid var(--at-line);
  background: #fff;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- the strip itself (rule 2) ---------- */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 2px;
  /* overflow-y MUST be hidden, not visible: per spec, making one axis
     non-visible forces the other to auto, so `overflow-x:auto` +
     `overflow-y:visible` would silently add a vertical scrollbar here. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--at-line) transparent;
  -webkit-overflow-scrolling: touch;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li {
  flex: 0 0 auto;
  width: 78px;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  line-height: 0;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li > a {
  display: block;
  line-height: 0;
  text-decoration: none;
  border-radius: 9px;
}
/* The border lives on the <img>, not the <a>: the active class is added to
   the <img> (rule 4), and this avoids depending on :has() support. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li > a > img {
  display: block;
  width: 100%;
  height: 62px;
  object-fit: cover;
  border: 2px solid var(--at-line);
  border-radius: 9px;
  background: #fff;
  opacity: .68;
  transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li > a:hover > img {
  opacity: 1;
  border-color: var(--at-muted);
}
/* selected / active thumb (rule 4) */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li > a > img.flex-active {
  opacity: 1;
  border-color: var(--at-orange);
  box-shadow: 0 0 0 2px rgba(246, 139, 31, .22);
}

/* ---------- arrows (1.2.80: directionNav now true, these are live) ----------
   Class names are read off Flexslider's directionNav.setup(), not guessed:
     <ul class="flex-direction-nav">
       <li class="flex-nav-prev"><a class="flex-prev" href="#">…</a></li>
       <li class="flex-nav-next"><a class="flex-next" href="#">…</a></li>
     </ul>
   so flex-prev / flex-next sit ON the <a> and the <li> is flex-nav-prev /
   flex-nav-next. A 1.2.79 revision of this file wrote them as ANCESTORS
   (.flex-direction-nav .flex-prev a) and would have matched nothing at all.
   directionNav.update() also puts .flex-disabled on the <a>, not the <li>.
   The ul is appended to the flexslider root (.woocommerce-product-gallery__wrapper),
   which is not positioned, so these offsets resolve against .woocommerce-product-gallery
   (position:relative). inset-block-end excludes the 62px strip + 12px gap. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav {
  display: flex;
  position: absolute;
  inset-block: 0 86px;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li {
  margin: 0;
  padding: 0 8px;
  list-style: none;
  pointer-events: auto;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li a,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-prev,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--at-line);
  background: rgba(255, 255, 255, .94);
  color: var(--at-text);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li a:hover {
  background: var(--at-orange);
  border-color: var(--at-orange);
  color: var(--at-fill-ink);
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li a:focus-visible {
  outline: 2px solid var(--at-orange);
  outline-offset: 2px;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li a::before {
  content: "";
  width: 10px;
  height: 10px;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before {
  transform: rotate(-135deg);
  margin-inline-start: 3px;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-next::before {
  transform: rotate(45deg);
  margin-inline-end: 3px;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-disabled,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-disabled:hover {
  opacity: .3;
  pointer-events: none;
  background: rgba(255, 255, 255, .94);
  border-color: var(--at-line);
  color: var(--at-text);
}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport {
  background: #0f1c2e;
  border-color: var(--at-line);
}
html[data-theme="dark"] .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li > a > img {
  background: #0f1c2e;
}

/* ---------- narrow screens: smaller thumbs, no vertical growth ---------- */
@media (max-width: 768px) {
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    gap: 6px;
    margin-top: 10px;
  }
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li {
    width: 62px;
  }
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li > a > img {
    height: 50px;
  }
  /* strip shrinks to 50px + 10px gap, so the arrow band grows to match */
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav {
    inset-block-end: 70px;
  }
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li {
    padding: 0 4px;
  }
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li a,
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-prev,
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-next {
    width: 34px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs > li > a > img,
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport img {
    transition: none !important;
  }
}
/* ---------- Checkout WhatsApp notice (mu-plugin at-checkout-wa.php) ----------
 * Rendered by at_checkout_wa_notice() on woocommerce_after_checkout_billing_form.
 * Deliberately low-emphasis: it is a transactional-message disclosure, not a
 * call to action, so it must not compete with the billing fields or the
 * Place Order button. Ink comes from --at-ink-mut on the plain --at-card-bg
 * surface (never a hard-coded ink over --at-navy, which inverts in dark mode).
 * It carries no background of its own, so both themes inherit correctly. */
.at-checkout-wa {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--at-blue);
  border-radius: 0 var(--at-radius) var(--at-radius) 0;
  background: var(--at-fill);
  color: var(--at-ink-mut);
  font-size: 12.5px;
  line-height: 1.55;
}
.at-checkout-wa a { color: var(--at-blue); text-decoration: underline; }
.at-checkout-wa a:hover { color: var(--at-blue-dark); }
.at-checkout-wa a:focus-visible { outline: 2px solid var(--at-blue); outline-offset: 2px; }

@media (max-width: 768px) {
  .at-checkout-wa { font-size: 12px; padding: 9px 10px; }
}

/* Respect the OS setting: the notice is static text, but its underline should
 * still be keyboard-visible, so colour is not the only affordance. */
@media (prefers-reduced-motion: reduce) {
  .at-checkout-wa { transition: none !important; }
}
/* ---------- v1.2.86 bottom-nav badge visibility ---------- */
/* The base .at-bn-count sets position, size and colour but no display, so these
   two rules give it the show/hide contract that extras.js updateBadges() drives
   by toggling .show. Declared globally on purpose: .at-bottomnav is display:none
   above 768px, so this cannot affect the desktop layout. */
  .at-bn-count { display: none; }
  .at-bn-count.show { display: block; }


/* =====================================================================
   1.2.88 - quantity + Add to cart promoted in the product summary
   With the Shipping trigger gone, this row is the primary action on the page.
   The stepper keeps its own width and the CTA takes the remaining space on
   desktop; below 768px the CTA takes the full row so the tap target is not a
   narrow strip beside the stepper.
   ===================================================================== */
.woocommerce div.product form.cart { row-gap: 10px; }
.woocommerce div.product form.cart div.quantity { margin-inline-end: 10px; }
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 52px;
  font-size: 16px;
}
.woocommerce div.product form.cart .at-qbtn { min-height: 26px; }

@media (max-width: 768px) {
  /* 1.2.92 - the mobile quantity/CTA row.
     Measured defect: this block gave div.quantity `flex: 1 1 100%` AND
     forced .qty to `width: 100%`, so the stepper stretched across the
     entire card while the Add-to-cart button sat immediately below it on
     a 10px row-gap. That is the reported "glued together with an
     awkwardly disproportionate width": the width was not a preference,
     it was two 100%-wide rules fighting the stepper's own fixed sizing.
     Fix: let div.quantity keep its intrinsic width (auto), keep .qty at
     an explicit touch-friendly 72px, and open the gap to 14px. The CTA
     still takes the full row so the tap target stays large. */
  .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; row-gap: 14px; }
  .woocommerce div.product form.cart div.quantity {
    margin-inline-end: 0;
    flex: 0 0 auto;
  }
  .woocommerce div.product form.cart div.quantity .qty {
    width: 72px;
    height: 46px;
    font-size: 15px;
  }
  .woocommerce div.product form.cart div.quantity .at-qbtn {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 2px;
  }
}

/* =====================================================================
   1.2.89 - sidebar facet design-system unification (light + dark)

   Measured defect: the dark-mode block styles .at-foptions, .at-ftoggles and
   .at-prot, but contained NO rule for .at-fpills. Every bucketed facet -
   Capacity (at_cap), Voltage, Chemistry, Format, ... - therefore kept its
   hard-coded light values: background #fff, border #dbe5ee, color #40566c,
   count chip #eef3f8/#7d93a9. Inside the #132437 dark panel that is a white
   pill with light-grey text, which is exactly the inconsistency reported.

   Second defect: .at-foptions label:hover paints the LABEL, but on a pill the
   visible surface is the child SPAN, which has its own background - so the row
   hover worked and the pill hover did nothing at all.

   The row branch and the pill branch now share one set of values. The pill
   shape is kept (ranges read better as chips) but radius, border, surface,
   ink, active state, count chip, hover and focus are identical to the rows.
   ===================================================================== */

/* The label is a positioning shell only; the span is the chip surface.
   Without this reset the row rules paint a rectangle behind the pill. */
.at-fpills label,
.at-fpills label:hover,
.at-fpills label.on { background: transparent; }

.at-fpills label { border-radius: var(--at-radius); }
.at-fpills label span { border-radius: 999px; }
.at-fpills label:hover span { border-color: #9dc4ea; }
.at-fpills label.on:hover span { border-color: var(--at-blue); }

/* The pill checkbox is opacity:0, so it has no visible focus ring by default. */
.at-fpills label input:focus-visible + span {
  outline: 3px solid var(--at-blue);
  outline-offset: 2px;
}
.at-fpills label span:focus-visible { outline: 3px solid var(--at-blue); outline-offset: 2px; }

/* ---- dark mode: mirror the .at-foptions dark values exactly --------------- */
html[data-theme="dark"] .at-fpills label span {
  background: var(--at-card-bg);
  border-color: var(--at-line);
  color: var(--at-text);
}
html[data-theme="dark"] .at-fpills label:hover span {
  background: #1b2c42;
  border-color: #2f4a6b;
  color: var(--at-text);
}
html[data-theme="dark"] .at-fpills label span em {
  background: #22344a;
  color: #9fb2cb;
}
html[data-theme="dark"] .at-fpills label.on span {
  background: #1b3350;
  border-color: #2f4a6b;
  color: #a8cdf5;
}
html[data-theme="dark"] .at-fpills label.on span em {
  background: #2f4a6b;
  color: #cfe3fb;
}

/* 1.2.89 amendment: count-chip ink was #7d93a9 on #eef3f8 = 2.84:1, below AA
 * for the 10.5-11px text. Both the row (.at-foptions em) and the pill
 * (.at-fpills label span em) shared it, so both are moved to the token. */
.at-foptions em,
.at-ftoggles em,
.at-prot em,
.at-fpills label span em { color: #55677a; }

/* ---------- HTML sitemap page (SEO R3) ---------- */
.atx-smap { padding: 26px 0 44px; }
.atx-smap-head { margin: 0 0 18px; }
.atx-smap-head h1 { font-size: 27px; font-weight: 800; letter-spacing: -.01em; color: var(--at-navy); margin: 0 0 4px; }
.atx-smap-head p { color: var(--at-muted); margin: 0; max-width: 760px; }
.atx-smap-section { margin: 0 0 26px; }
.atx-smap-section h2 { font-size: 19px; font-weight: 800; color: var(--at-navy); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--at-line); }
.atx-smap-tree { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.atx-smap-group { background: var(--at-card-bg); border: 1px solid var(--at-line); border-radius: var(--at-radius); padding: 16px 18px; box-shadow: var(--at-shadow); }
.atx-smap-group h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.atx-smap-group h3 a { color: var(--at-navy); }
.atx-smap-group h3 a:hover { color: var(--at-blue); }
.atx-smap-group ul { list-style: none; margin: 0; padding: 0; }
.atx-smap-group ul li { font-size: 13.5px; margin: 3px 0; }
.atx-smap-group ul li a { color: var(--at-muted); }
.atx-smap-group ul li a:hover { color: var(--at-blue); }
.atx-smap-count { color: var(--at-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.atx-smap-group h3 .atx-smap-count::before,
.atx-smap-group ul li .atx-smap-count::before,
.atx-smap-brand .atx-smap-count::before { content: "\00b7"; margin-inline-end: 7px; color: var(--at-line); }
.atx-smap-brands { display: flex; flex-wrap: wrap; gap: 10px; }
.atx-smap-brand { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; background: var(--at-card-bg); border: 1px solid var(--at-line); border-radius: 999px; color: var(--at-navy); font-weight: 600; font-size: 13.5px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.atx-smap-brand:hover { border-color: var(--at-blue); box-shadow: var(--at-shadow); transform: translateY(-2px); }
.atx-smap-brand .atx-smap-count { color: var(--at-muted); font-weight: 500; }
.atx-smap-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.atx-smap-legal li { margin: 0; }
.atx-smap-legal a { color: var(--at-navy); font-weight: 600; }
.atx-smap-legal a:hover { color: var(--at-blue); }
html[data-theme="dark"] .atx-smap-group h3 a:hover,
html[data-theme="dark"] .atx-smap-group ul li a:hover,
html[data-theme="dark"] .atx-smap-legal a:hover { color: #7db3ee; }
html[data-theme="dark"] .atx-smap-brand:hover { border-color: #2f4a6b; box-shadow: 0 6px 20px rgba(0,0,0,.5); transform: translateY(-2px); }
@media (max-width: 1024px) { .atx-smap-tree { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .atx-smap-tree { grid-template-columns: 1fr; } }