/* ============================================================================
   theme581 — 2026 skin
   Design system layer. Loads AFTER template.css / virtuemart.css and is the
   single source of truth for colour, type, spacing, radius and elevation.

   Contents
     1.  Design tokens
     2.  Dark theme
     3.  Base & reset
     4.  Typography  (removes the 2015 gradient headings)
     5.  Layout & sections
     6.  Header, navigation, mobile drawer
     7.  Buttons
     8.  Forms
     9.  Cards & VirtueMart product grid
     10. Modules
     11. Breadcrumbs, pagination, messages
     12. Footer
     13. Utilities, motion, print
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — #fa5a0c refined into a full scale */
  --brand-50: #fff4ed;
  --brand-100: #ffe6d5;
  --brand-200: #ffc8aa;
  --brand-300: #ffa174;
  --brand-400: #ff6f3c;
  --brand-500: #fa5a0c;
  --brand-600: #eb4409;
  --brand-700: #c2320a;
  --brand-800: #9a2a10;
  --brand-900: #7c2610;

  /* Warm neutrals — replaces the flat #777 / #333 / #414141 of the old theme */
  --n-0: #ffffff;
  --n-25: #fcfbfa;
  --n-50: #f7f5f3;
  --n-100: #efedea;
  --n-200: #e2deda;
  --n-300: #c9c3bd;
  --n-400: #a29a92;
  --n-500: #7c736b;
  --n-600: #5f5751;
  --n-700: #4a443f;
  --n-800: #2e2a27;
  --n-900: #1c1917;
  --n-950: #121010;

  /* Support */
  --ok-500: #15803d;
  --ok-50: #ecfdf3;
  --warn-500: #b45309;
  --warn-50: #fffbeb;
  --err-500: #dc2626;
  --err-50: #fef2f2;
  --info-500: #0b5dba;
  --info-50: #eff6ff;

  /* Semantic surfaces */
  --bg: var(--n-25);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --surface-3: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);

  /* Semantic text */
  --text: var(--n-900);
  --text-muted: var(--n-600);
  --text-subtle: var(--n-500);
  --text-on-brand: #ffffff;

  /* Accent aliases */
  --accent: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-active: var(--brand-700);
  --accent-soft: var(--brand-50);
  --accent-ring: color-mix(in oklab, var(--brand-500) 40%, transparent);

  /* Radius — 2015 used 3px everywhere */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Elevation — soft, layered, no text-shadow */
  --sh-xs: 0 1px 2px rgb(28 25 23 / 0.06);
  --sh-sm: 0 1px 3px rgb(28 25 23 / 0.07), 0 1px 2px rgb(28 25 23 / 0.04);
  --sh-md: 0 4px 12px rgb(28 25 23 / 0.07), 0 2px 4px rgb(28 25 23 / 0.04);
  --sh-lg: 0 12px 28px rgb(28 25 23 / 0.1), 0 4px 8px rgb(28 25 23 / 0.05);
  --sh-brand: 0 6px 20px color-mix(in oklab, var(--brand-500) 28%, transparent);

  /* Spacing — 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Fluid type — clamp() instead of the old fixed px + line-height:18px */
  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.0625rem);
  --t-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --t-4xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  --font-sans:
    'Inter var', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --header-h: 76px;
  --header-h-stuck: 60px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ----------------------------------------------------------------------------
   2. Dark theme — opt-in only.
   Deliberately NOT wired to prefers-color-scheme: the 110k of legacy
   template.css hardcodes light surfaces, so an automatic dark mode would
   produce unreadable pages on views this layer does not cover.
   Enabled by the header toggle, which sets data-theme="dark" on <html>.
   -------------------------------------------------------------------------- */

[data-theme='dark'] {
  --bg: var(--n-950);
  --surface: #1a1715;
  --surface-2: #221e1b;
  --surface-3: #2b2622;
  --border: #362f2a;
  --border-strong: #4a423b;

  --text: #f5f2ef;
  --text-muted: #b8afa7;
  --text-subtle: #948a82;

  --accent: var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-active: var(--brand-500);
  --accent-soft: #2a1a11;

  --sh-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --sh-sm: 0 1px 3px rgb(0 0 0 / 0.5);
  --sh-md: 0 4px 12px rgb(0 0 0 / 0.5);
  --sh-lg: 0 12px 28px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

/* Legacy blocks that hardcode white/near-white backgrounds */
[data-theme='dark'] .moduletable,
[data-theme='dark'] .main-content,
[data-theme='dark'] .product,
[data-theme='dark'] .product_wrap,
[data-theme='dark'] .item,
[data-theme='dark'] .well,
[data-theme='dark'] .panel,
[data-theme='dark'] table,
[data-theme='dark'] .vm-pagination {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme='dark'] img:not([src*='.svg']) {
  /* product photography on white cutouts stays legible on dark surfaces */
  background-color: transparent;
}

/* ----------------------------------------------------------------------------
   3. Base & reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-stuck) + var(--s-5));

  /* Horizontal containment lives here, not on <body>, and uses clip rather
     than hidden. `overflow-x: hidden` turns the element into a scroll
     container, which breaks `position: sticky` descendants — that is what made
     the header and everything after it paint at the wrong offset until a
     scroll forced a repaint. `clip` contains the overflow without creating a
     scroll container, and because overflow on the root propagates to the
     viewport it also contains the off-canvas drawer. */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html {
    overflow-x: hidden;
  }
}

body {
  margin: 0;
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* Scroll lock. The scroll container is <html>, so locking <body> alone would
   not stop the page moving behind the drawer. */
body.is-locked {
  overflow: hidden;
}

html:has(body.is-locked) {
  overflow: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--dur-1) var(--ease);
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-200);
  color: var(--n-900);
}

hr,
.horizontal-separator {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
  background: none;
  height: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 1000;
  padding: var(--s-3) var(--s-5);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  transition: top var(--dur-2) var(--ease-out);
}

.skip-link:focus {
  top: var(--s-4);
}

/* ----------------------------------------------------------------------------
   4. Typography
   Kills the gradient/border/IE-filter chrome baked into every h1–h4.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.page_title,
.page_heading,
.module_title,
.moduletable h3,
.moduletable h4 {
  background: none !important;
  background-image: none !important;
  filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-transform: none;
  margin: 0 0 var(--s-4) 0;
  text-wrap: balance;
}

h1,
.page_title {
  font-size: var(--t-3xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
}

h2 {
  font-size: var(--t-2xl);
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--t-xl);
}

h4 {
  font-size: var(--t-lg);
}

h5,
h6 {
  font-size: var(--t-base);
  font-weight: 600;
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
  max-width: 72ch;
}

small,
.text-muted {
  color: var(--text-muted);
  font-size: var(--t-sm);
}

strong,
b {
  font-weight: 640;
}

/* Section heading with the brand rule — replaces the old gradient bar */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ----------------------------------------------------------------------------
   5. Layout & sections
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container) !important;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--container) !important;
  }
}

.t26-section {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}

.t26-section--tight {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.t26-section--alt {
  background: var(--surface-2);
}

/* Hero / showcase band */
.t26-showcase {
  padding-block: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
}

.t26-showcase .moduletable {
  margin-bottom: 0;
}

/* Carousels and banners inside the showcase get the modern radius */
.t26-showcase img,
.t26-showcase .carousel,
#galerific-banner img {
  border-radius: var(--r-xl);
}

/* Float containment.
   -------------------
   The legacy modules and several VirtueMart layouts still float their content,
   and the markup they sat in used to be full of `.clearfix` divs and Bootstrap
   `.row`s that absorbed those floats. The 2026 rewrite dropped that scaffolding.

   That matters because a grid container establishes a block formatting context,
   and per spec a BFC may not overlap a float — so instead of dropping below an
   uncleared float, `.t26-main` squeezed itself into whatever horizontal space
   was left beside it (observed: 270px hard against the right edge of a 1280px
   container). `clear` puts the grids below any float that escaped; `flow-root`
   stops the wrappers leaking floats in the first place. */
.t26-main,
.t26-pdp,
.main-bottom,
.t26-footer {
  clear: both;
}

.main-top,
.top-content,
.bottom-content,
.t26-content,
.t26-showcase,
.t26-header__strip,
.t26-section,
.stellar-section,
.video-section,
#galerific-banner,
#custom-html,
.category-description,
.main-content,
.product_content {
  display: flow-root;
}

/* Main content grid — CSS Grid instead of the float/col-md- mix */
.t26-main {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}

@media (min-width: 992px) {
  .t26-main[data-aside='left'] {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  .t26-main[data-aside='right'] {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  }

  .t26-main[data-aside='both'] {
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(
        220px,
        270px
      );
  }
}

.t26-main > .t26-content {
  min-width: 0;
}

.t26-aside {
  position: sticky;
  top: calc(var(--header-h-stuck) + var(--s-4));
  display: grid;
  gap: var(--s-5);
  z-index: 9999;
}

@media (max-width: 991.98px) {
  .t26-aside {
    position: static;
  }

  .t26-main[data-aside='left'] .t26-aside,
  .t26-main[data-aside='both'] .t26-aside--left {
    order: 2;
  }
}

/* Auto-fit grids for module rows — replaces the hardcoded col-md-2/col-md-4 */
.t26-grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.t26-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.t26-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* ----------------------------------------------------------------------------
   6. Header, navigation, mobile drawer
   -------------------------------------------------------------------------- */

.t26-topbar {
  background: var(--n-900);
  color: var(--n-200);
  font-size: var(--t-sm);
  padding-block: var(--s-2);
  border: 0;
}

.t26-topbar a {
  color: var(--n-100);
}

.t26-topbar a:hover {
  color: var(--brand-300);
}

.t26-topbar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.t26-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t26-header {
    background: var(--surface);
  }
}

.t26-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--sh-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.t26-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
  transition: min-height var(--dur-2) var(--ease);
}

.t26-header.is-stuck .t26-header__inner {
  min-height: var(--header-h-stuck);
}

.t26-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.03em;
  color: var(--text);
  flex-shrink: 0;
}

.t26-brand:hover {
  color: var(--text);
}

.t26-brand img {
  max-height: 44px;
  width: auto;
  transition: max-height var(--dur-2) var(--ease);
}

.t26-header.is-stuck .t26-brand img {
  max-height: 34px;
}

.t26-brand__desc {
  display: block;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--text-subtle);
  letter-spacing: 0;
}

@media (max-width: 991.98px) {
  .t26-brand__desc {
    display: none;
  }
}

.t26-nav {
  min-width: 0;
}

@media (max-width: 991.98px) {
  .t26-nav {
    display: none;
  }
}

.t26-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: end;
}

/* Icon buttons in the header bar */
.t26-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.t26-iconbtn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.t26-iconbtn:active {
  transform: scale(0.94);
}

@media (min-width: 992px) {
  .t26-iconbtn--burger {
    display: none;
  }
}

/* Desktop menu — restyles the megamenu/mod_menu lists in place */
.t26-nav .menu,
.t26-nav .sf-menuW,
.t26-nav ul.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  float: none;
}

.t26-nav .menu > li,
.t26-nav .sf-menuW > li {
  position: relative;
  float: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.t26-nav .menu > li > a,
.t26-nav .sf-menuW > li > a,
.t26-nav .menu > li > span,
.t26-nav .sf-menuW > li > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--text);
  background: none;
  border: 0;
  text-transform: none;
  line-height: 1.4;
  height: auto;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.t26-nav .menu > li > a:hover,
.t26-nav .sf-menuW > li > a:hover,
.t26-nav .menu > li.active > a,
.t26-nav .sf-menuW > li.active > a,
.t26-nav .menu > li.current > a {
  background: var(--surface-3);
  color: var(--text);
}

.t26-nav .menu > li.active > a,
.t26-nav .sf-menuW > li.active > a,
.t26-nav .menu > li.current > a {
  background: var(--accent-soft);
  color: var(--accent-active);
}

/* Dropdowns */
.t26-nav .menu ul,
.t26-nav .sf-menuW ul,
.t26-nav .drop-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--s-2);
  min-width: 220px;
  list-style: none;
}

.t26-nav .menu ul li a,
.t26-nav .sf-menuW ul li a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--text);
  background: none;
  border: 0;
}

.t26-nav .menu ul li a:hover,
.t26-nav .sf-menuW ul li a:hover {
  background: var(--surface-2);
  color: var(--accent-active);
}

/* Full-width strip under the header bar (header-d) */
.t26-header__strip {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-block: var(--s-2);
  font-size: var(--t-sm);
}

.t26-header.is-stuck .t26-header__strip {
  display: none;
}

/* Hover/focus dropdowns for plain mod_menu output.
   Scoped to .menu so the megamenu (.sf-menuW / .drop-menu) keeps its own JS. */
@media (min-width: 992px) {
  .t26-nav .menu li {
    position: relative;
  }

  .t26-nav .menu li > ul {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--dur-2) var(--ease),
      transform var(--dur-2) var(--ease-out),
      visibility var(--dur-2) var(--ease);
  }

  .t26-nav .menu li:hover > ul,
  .t26-nav .menu li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .t26-nav .menu li li > ul {
    top: -8px;
    left: 100%;
  }
}

/* Mobile drawer */
.t26-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(380px, 88vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  z-index: 1100;
  transform: translateX(100%);
  /* visibility keeps the closed drawer out of the tab order — aria-hidden only
     hides it from screen readers, keyboard users could still Tab into it. */
  visibility: hidden;
  transition:
    transform var(--dur-3) var(--ease-out),
    visibility var(--dur-3) var(--ease-out);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.t26-drawer[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
}

.t26-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}

.t26-drawer__body {
  padding: var(--s-5);
  overflow-y: auto;
  flex: 1;
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

.t26-drawer .menu,
.t26-drawer .sf-menuW {
  display: grid;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.t26-drawer .menu li,
.t26-drawer .sf-menuW li {
  float: none;
  width: 100%;
  background: none;
  border: 0;
}

.t26-drawer .menu a,
.t26-drawer .sf-menuW a {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 550;
  background: none;
  border: 0;
  height: auto;
  line-height: 1.4;
}

.t26-drawer .menu a:hover,
.t26-drawer .menu .active > a {
  background: var(--surface-2);
  color: var(--accent-active);
}

/* Parent rows get an expand button injected next to the link */
.t26-drawer .menu li.parent,
.t26-drawer .menu li.deeper,
.t26-drawer .sf-menuW li.parent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
}

.t26-drawer .menu li.parent > ul,
.t26-drawer .menu li.deeper > ul,
.t26-drawer .sf-menuW li.parent > ul {
  grid-column: 1 / -1;
}

.t26-iconbtn--sub {
  width: 34px;
  height: 34px;
  border-color: transparent;
  background: var(--surface-2);
}

.t26-iconbtn--sub[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.t26-iconbtn--sub svg {
  transition: transform var(--dur-2) var(--ease);
}

.t26-drawer .menu ul {
  padding-left: var(--s-4);
  border-left: 1px solid var(--border);
  margin: var(--s-1) 0 var(--s-2) var(--s-3);
  box-shadow: none;
  background: none;
  border-radius: 0;
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Cloned header search fills the drawer width */
.t26-drawer .t26-search,
.t26-drawer .t26-cluster {
  max-width: none;
  width: 100%;
}

.t26-drawer .t26-cluster {
  display: grid;
  gap: var(--s-3);
}

.t26-scrim {
  position: fixed;
  inset: 0;
  background: rgb(28 25 23 / 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-2) var(--ease),
    visibility var(--dur-2) var(--ease);
}

.t26-scrim[data-open='true'] {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------------------------
   7. Buttons
   Removes btn.gif / btn-bg.jpg / gradients from every button variant.
   -------------------------------------------------------------------------- */

.btn,
button.button,
input[type='submit'],
.vm-button-correct,
.addtocart-button,
.t26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.7em 1.5em;
  border-radius: var(--r-full) !important;
  border: 1px solid transparent;
  background-image: none !important;
  background-color: var(--surface-3);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  text-shadow: none !important;
  box-shadow: none;
  cursor: pointer;
  filter: none !important;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}

.btn:hover,
button.button:hover,
input[type='submit']:hover,
.vm-button-correct:hover,
.addtocart-button:hover {
  background-color: var(--border);
  color: var(--text);
  background-image: none !important;
}

.btn:active,
button.button:active,
.addtocart-button:active {
  transform: translateY(1px);
}

.btn-primary,
button.button,
input[type='submit'],
.addtocart-button,
.vm-button-correct,
.t26-btn--primary {
  background-color: var(--accent) !important;
  background-image: none !important;
  color: var(--text-on-brand) !important;
  border-color: transparent;
}

.btn-primary:hover,
button.button:hover,
input[type='submit']:hover,
.addtocart-button:hover,
.vm-button-correct:hover,
.t26-btn--primary:hover {
  background-color: var(--accent-hover) !important;
  color: var(--text-on-brand) !important;
  box-shadow: var(--sh-brand);
}

.btn-default,
.t26-btn--ghost {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border-color: var(--border-strong);
}

.btn-default:hover,
.t26-btn--ghost:hover {
  background-color: var(--surface-2) !important;
  border-color: var(--text-subtle);
}

.btn-lg,
.t26-btn--lg {
  padding: 0.9em 2em;
  font-size: var(--t-base);
}

.btn-sm {
  padding: 0.5em 1em;
  font-size: var(--t-xs);
}

.btn:disabled,
.btn.disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* The old theme wrapped button labels in nested <span><span> for sprite art */
.btn span span,
button.button span span,
.vm-button-correct span span {
  background: none !important;
  padding: 0 !important;
  display: inline !important;
  filter: none !important;
}

/* ----------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='number'],
input[type='url'],
select,
textarea,
.inputbox,
.form-control {
  width: 100%;
  padding: 0.65em 1em;
  border: 1px solid var(--border);
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.5;
  box-shadow: none !important;
  filter: none !important;
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

input:focus,
select:focus,
textarea:focus,
.inputbox:focus,
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);
}

label {
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--text);
  margin-bottom: var(--s-1);
  display: inline-block;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c736b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2.5rem;
}

/* Header search */
.t26-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  max-width: 420px;
}

.t26-search .inputbox,
.t26-search input[type='text'],
.t26-search input[type='search'] {
  border-radius: var(--r-full) !important;
  padding-left: 1.15em;
  background: var(--surface-2) !important;
}

/* ----------------------------------------------------------------------------
   9. Cards & VirtueMart product grid
   -------------------------------------------------------------------------- */

.t26-card,
.product.item.item_product,
.item.item__category {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) !important;
  padding: var(--s-4);
  box-shadow: var(--sh-xs);
  background-image: none !important;
  filter: none !important;
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease);
}

.product.item.item_product:hover,
.item.item__category:hover,
.t26-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--border-strong);
}

/* Product and category listings become grids, not float rows.
   --t26-cols carries the VirtueMart "per row" setting from the override. */
.listing__grid,
.products-listing .listing__grid,
.categories-listing,
.category-children.categories-listing {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(1rem, 0.5rem + 1vw, 1.75rem);
  margin: 0 0 var(--s-6);
  padding: 0;
  float: none;
  list-style: none;
}

@media (min-width: 992px) {
  .listing__grid,
  .categories-listing {
    grid-template-columns: repeat(var(--t26-cols, 4), minmax(0, 1fr));
  }
}

.listing__grid > .item,
.categories-listing > .item,
.category-children > .item {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
}

/* Sort bar above the listing */
.orderby-displaynumber {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.orderby-displaynumber__sort,
.orderby-displaynumber .display-number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.product-counter {
  font-size: var(--t-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.t26-empty {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: var(--r-lg);
  max-width: none;
}

/* Grid / list switch (category vertical layout) */
.gridlist {
  display: inline-flex;
  gap: var(--s-1);
  padding: 0;
}

.gridlist .btn {
  padding: 0.5em 1em;
  font-size: var(--t-xs);
}

/* List view: one column, media beside the content */
.listing__grid[data-view='list'] {
  grid-template-columns: 1fr !important;
}

.listing__grid[data-view='list'] .product_wrap {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.listing__grid[data-view='list'] .item_image {
  aspect-ratio: 1 / 1;
  margin: 0;
}

.listing__grid[data-view='list'] .product_content {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.listing__grid[data-view='list'] .product_title {
  -webkit-line-clamp: 3;
  font-size: var(--t-lg);
}

.listing__grid[data-view='list'] .product_desc-short {
  display: block;
}

.listing__grid[data-view='list'] .product.item.item_product:hover {
  transform: none;
}

@media (max-width: 575.98px) {
  .listing__grid[data-view='list'] .product_wrap {
    grid-template-columns: 1fr;
  }
}

/* In grid view the long description stays hidden — cards must align */
.listing__grid[data-view='grid'] .product_desc-short {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Product reviews */
.product-reviews_list {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.chars-count {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.chars-count input {
  width: 4.5rem;
  text-align: center;
}

.chars-count label {
  margin: 0;
}

/* AJAX search module */
.mod-vm-search .vmlpsearch,
.mod-vm-search form {
  margin: 0;
}

.vm_ajax_search_adv {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
}

.vm_ajax_search_pretext,
.vm_ajax_search_posttext {
  margin: 0 0 var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.res_a_s {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* Bootstrap 5 tab strip on the shop front page */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0 0 var(--s-2);
  border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-muted);
  font-size: var(--t-sm);
  font-weight: 600;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.nav-tabs .nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-tabs .nav-link.active {
  background: var(--accent-soft);
  color: var(--accent-active);
}

.product_listing-heading {
  font-size: var(--t-2xl);
  margin-bottom: var(--s-5);
}

.product_listing-section {
  margin-bottom: var(--s-7);
}

.product_wrap,
.category_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Category tiles centre their label */
.item__category .category_title {
  margin: 0;
  text-align: center;
  font-size: var(--t-base);
}

.item__category .category_title a {
  color: var(--text);
}

.item__category:hover .category_title a {
  color: var(--accent-active);
}

/* Product image — consistent aspect ratio, no CLS */
.item_image,
.product_image,
.category_image {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--s-2);
}

.item_image img,
.product_image img,
.category_image img,
.browseProductImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--dur-3) var(--ease-out);
}

[data-theme='dark'] .item_image img,
[data-theme='dark'] .product_image img {
  mix-blend-mode: normal;
}

.product.item.item_product:hover .item_image img,
.product.item.item_product:hover .browseProductImage {
  transform: scale(1.05);
}

.product_title,
.item_name a,
.category_title a {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  /* clamp to two lines so cards align */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product_title:hover,
.item_name a:hover {
  color: var(--accent-active);
}

.product_desc-short {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin: 0;
}

/* Price block */
.product_price,
.PricebillTotal,
.vm-price-wrapper {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: auto;
}

.PricesalesPrice,
.product_price .PricesalesPrice {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: none !important;
  text-shadow: none !important;
}

.price-crossed,
.PricebasePriceWithTax {
  font-size: var(--t-sm);
  color: var(--text-subtle);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* Sale / stock badges */
.product_sale-label,
.label,
.badge,
.discountAmount-listing {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.7em;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
  background: var(--accent-soft);
  color: var(--accent-active);
  border: 0;
  text-shadow: none;
}

.product_sale-label,
.label-success {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  background: var(--accent);
  color: var(--text-on-brand);
  box-shadow: var(--sh-sm);
}

.product_stock,
.stock-level {
  font-size: var(--t-xs);
  color: var(--text-muted);
}

/* Add-to-cart bar sits at the bottom of the card */
.addtocart-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: 0;
  background: none !important;
  border: 0 !important;
}

.addtocart-bar .quantity-box,
.quantity-input {
  width: 4.5rem;
  text-align: center;
}

.addtocart-button,
.addtocart-bar input.addtocart-button {
  flex: 1;
  min-height: 44px;
}

.product_rating .stars-orange,
.rating-icons .fa-star {
  color: var(--brand-500);
}

/* --------------------------------------------------------------------------
   VirtueMart product module (homepage featured / latest strips)
   -------------------------------------------------------------------------- */

.vm-products .header-text {
  margin-bottom: var(--s-5);
}

.vm-products_footer {
  margin-top: var(--s-5);
  text-align: center;
}

/* The module prices use their own wrapper class */
.product_price_feature {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  order: 2;
}

.product_price_feature .PricesalesPrice {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.product_price_feature .PricesalesPriceWithDiscount {
  font-size: var(--t-sm);
  color: var(--text-subtle);
  text-decoration: line-through;
}

.stock-listing {
  font-size: var(--t-xs);
  font-weight: 600;
  margin: 0;
}

.stock-listing .green {
  color: var(--ok-500);
  font-style: normal;
}

.stock-listing .blue {
  color: var(--err-500);
  font-style: normal;
}

/* Legacy float scaffolding inside module cards, now neutralised */
.fleft-content,
.fright-btn {
  float: none !important;
  width: auto !important;
  display: contents;
}

/* Quantity stepper */
.t26-qty {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px;
  background: var(--surface);
  flex-shrink: 0;
}

.t26-qty .quantity-box {
  display: inline-flex;
  width: auto;
}

/* Module cards deliberately hide the stepper but keep it in the DOM */
.t26-qty.d-none,
.d-none {
  display: none !important;
}

.t26-qty .quantity-input {
  width: 3.25rem;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
  padding: 0.45em 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}

.t26-qty .quantity-input:focus {
  box-shadow: none !important;
}

.t26-qty .quantity-controls {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.t26-qty i.quantity-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 17px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 9px;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}

.t26-qty i.quantity-controls:hover {
  background: var(--brand-100);
  color: var(--accent-active);
}

/* --------------------------------------------------------------------------
   Product detail page (PDP)
   -------------------------------------------------------------------------- */

.t26-pdp__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.t26-pdp__topbar .product_icons {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.t26-pdp {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 1.5rem + 3vw, 4rem);
}

@media (min-width: 900px) {
  .t26-pdp {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 40%);
  }

  .t26-pdp__media {
    position: sticky;
    top: calc(var(--header-h-stuck) + var(--s-5));
  }
}

.t26-pdp__rail {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  min-width: 0;
}

.t26-pdp__rail .product_title,
.t26-pdp__rail h1 {
  font-size: var(--t-2xl);
  margin: 0;
}

.t26-pdp__rail .product_short-description {
  color: var(--text-muted);
  margin: 0;
}

.t26-pdp__media .product_images,
.productdetails-view .product-image,
.product_images .product-image {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.t26-pdp__media .product_images img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Buy box — the one card that carries the transaction */
.t26-buybox {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.t26-buybox__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--s-1);
}

.t26-buybox .product_price {
  align-items: baseline;
  margin: 0;
}

.t26-buybox .PricesalesPrice {
  font-size: var(--t-3xl);
  letter-spacing: -0.04em;
  color: var(--accent-active);
}

.t26-buybox .discountAmount {
  display: inline-flex;
  padding: 0.3em 0.7em;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--text-on-brand);
  font-size: var(--t-sm);
  font-weight: 650;
}

.t26-buybox .addtocart-bar {
  margin: 0;
}

.t26-buybox .addtocart-button {
  min-height: 52px;
  font-size: var(--t-base);
}

.t26-stock {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

.t26-stock__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text-muted);
  list-style: none;
  max-width: none;
}

.t26-stock__row .bold {
  font-weight: 600;
  color: var(--text);
}

.t26-stock__row .green,
.availability .green {
  color: var(--ok-500);
  font-style: normal;
  font-weight: 600;
}

.t26-stock__row .blue,
.availability .blue {
  color: var(--err-500);
  font-style: normal;
  font-weight: 600;
}

.t26-shipped-by {
  color: var(--accent-active);
  font-weight: 600;
}

.cod_produs {
  display: grid;
  gap: var(--s-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.cod_produs li {
  list-style: none;
}

.product_call_img {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-active);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product_call_img img {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

.disclaimer {
  font-size: var(--t-xs);
  color: var(--text-subtle);
  margin: 0;
  max-width: none;
}

.product_question a,
.ask-a-question {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 550;
}

.product_details-list {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-sm);
}

.product_details-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.product_details-list li strong {
  color: var(--text);
}

/* Below-the-fold sections */
.t26-pdp__below {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.product-section_title,
.t26-pdp__below h2 {
  font-size: var(--t-xl);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
}

.product_neighbours {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.product_neighbours a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 45ch;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--text-muted);
}

.product_neighbours a:hover {
  color: var(--accent-active);
}

.product_neighbours .next-page {
  margin-left: auto;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Cart, checkout and account views

   Reskinned through CSS only. The markup in html/com_virtuemart/cart/,
   user/ and orders/ is left untouched on purpose: it carries the payment and
   shipping flow, and rewriting it without being able to run a real transaction
   would be trading a visual gain for checkout risk.
   -------------------------------------------------------------------------- */

.cart-view .cart-section,
.cart-summary,
.cart-tax-rules,
.vm-cart,
.checkout-container {
  background: var(--surface);
  background-image: none !important;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  box-shadow: var(--sh-xs);
  filter: none !important;
}

.cart-form_title,
.cart-section > h2,
.cart-section > h3,
.cart-section > h4 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-4);
}

.cart-view table,
.cart-summary table,
table.table {
  background: none;
  border: 0;
}

table.table-bordered,
table.table-bordered td,
table.table-bordered th {
  border-color: var(--border);
}

.table-column__total,
.table-column__total-label,
.totalInPaymentCurrency {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.table-column__total {
  font-size: var(--t-lg);
}

.line-through {
  text-decoration: line-through;
  color: var(--text-subtle);
}

.table-column__qty,
.table-column__tax,
.table-column__discount,
.table-column__sku {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

#checkoutFormSubmit,
.show_cart > a,
.continue_link {
  border-radius: var(--r-full) !important;
  background-image: none !important;
  text-shadow: none !important;
  filter: none !important;
}

#checkoutFormSubmit {
  min-height: 52px;
  font-size: var(--t-base);
}

.vm2-remove_from_cart,
.vm2-add_quantity_cart,
.vm2-add_quantity {
  opacity: 0.7;
  transition: opacity var(--dur-1) var(--ease);
}

.vm2-remove_from_cart:hover,
.vm2-add_quantity_cart:hover,
.vm2-add_quantity:hover {
  opacity: 1;
}

/* Account, order history and login forms */
.vm-login,
#com-form-login,
.user-view,
.orders-view {
  max-width: 100%;
}

.control-group,
.form-group {
  margin-bottom: var(--s-4);
}

.control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Mini cart in the header */
.top-cart,
.mod_virtuemart_cart_tm {
  font-size: var(--t-sm);
}

/* Wide tables must scroll inside their own box, never the page */
.cart-view .table-responsive,
.orders-view table,
.cart-view table {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .cart-view table,
  .orders-view table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ----------------------------------------------------------------------------
   10. Modules
   -------------------------------------------------------------------------- */

.moduletable,
.moduletable_menu {
  background: none;
  background-image: none !important;
  border: 0;
  box-shadow: none;
  filter: none !important;
  margin-bottom: var(--s-5);
  padding: 0;
}

.t26-aside .moduletable {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-xs);
}

.module_title,
.moduletable > h3,
.moduletable > h4 {
  font-size: var(--t-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--s-4);
}

.module_title span {
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Aside menus / category lists */
.t26-aside .menu,
.t26-aside ul.category {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.t26-aside .menu li,
.t26-aside ul.category li {
  background: none;
  border: 0;
  padding: 0;
}

.t26-aside .menu a,
.t26-aside ul.category a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--t-sm);
  background: none;
  border: 0;
}

.t26-aside .menu a:hover,
.t26-aside ul.category a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.t26-aside .menu .active > a {
  background: var(--accent-soft);
  color: var(--accent-active);
  font-weight: 600;
}

/* Parallax / showcase sections — modern gradient scrim over the image */
.stellar-section,
.video-section {
  position: relative;
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
  color: var(--n-0);
  isolation: isolate;
}

.stellar-section::before,
.video-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(18 16 16 / 0.55) 0%,
    rgb(18 16 16 / 0.7) 100%
  );
}

.stellar-section h1,
.stellar-section h2,
.stellar-section h3,
.video-section h2 {
  color: var(--n-0);
}

/* ----------------------------------------------------------------------------
   11. Breadcrumbs, pagination, messages
   -------------------------------------------------------------------------- */

.breadcrumb,
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  background: none !important;
  border: 0;
  border-radius: 0;
  font-size: var(--t-sm);
  color: var(--text-subtle);
}

.breadcrumb a,
.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb > li + li::before,
.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: var(--border-strong);
  padding-right: var(--s-2);
}

.pagination,
.vm-pagination ul,
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  justify-content: center;
}

.pagination > li > a,
.pagination > li > span,
.pagination a.pagenav,
.pagination span.pagenav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 550;
  box-shadow: none;
  filter: none !important;
}

.pagination > li > a:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-strong);
}

.pagination > li.active > a,
.pagination > li.active > span {
  background: var(--accent) !important;
  border-color: var(--accent);
  color: var(--text-on-brand) !important;
}

.pagination > li.disabled > span {
  opacity: 0.45;
}

/* System messages */
#system-message-container .alert,
.alert {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-subtle);
  border-radius: var(--r-md);
  background: var(--surface);
  background-image: none;
  color: var(--text);
  box-shadow: var(--sh-xs);
  text-shadow: none;
  margin-bottom: var(--s-5);
}

.alert-success {
  border-left-color: var(--ok-500);
  background: var(--ok-50);
}

.alert-danger,
.alert-error {
  border-left-color: var(--err-500);
  background: var(--err-50);
}

.alert-warning {
  border-left-color: var(--warn-500);
  background: var(--warn-50);
}

.alert-info {
  border-left-color: var(--info-500);
  background: var(--info-50);
}

/* Tables */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
}

th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  background: none;
}

td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
}

/* ----------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.t26-footer {
  background: var(--n-900);
  color: var(--n-300);
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  border: 0;
  background-image: none !important;
}

.t26-footer a {
  color: var(--n-200);
}

.t26-footer a:hover {
  color: var(--brand-300);
}

.t26-footer .moduletable {
  background: none;
  border: 0;
  padding: 0;
}

.t26-footer .module_title,
.t26-footer h3,
.t26-footer h4 {
  color: var(--n-0);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

.t26-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.t26-footer li {
  background: none;
  border: 0;
  padding: 0;
}

.t26-footer__main {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.t26-footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-block: var(--s-5);
  font-size: var(--t-sm);
  color: var(--n-400);
}

.t26-footer__bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.t26-footer__bottom .copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  background: none;
  border: 0;
  padding: 0;
  float: none;
}

.t26-footer__bottom p {
  margin: 0;
}

.t26-footer .t26-brand {
  color: var(--n-0);
}

/* Back to top */
.t26-totop {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 800;
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease-out),
    visibility var(--dur-2) var(--ease);
}

.t26-totop[data-visible='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.t26-totop:hover {
  background: var(--surface-2);
}

.chat-position {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: calc(clamp(1rem, 2vw, 2rem) + 58px);
  z-index: 800;
}

/* ----------------------------------------------------------------------------
   13. Utilities, motion, print
   -------------------------------------------------------------------------- */

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

.t26-stack {
  display: grid;
  gap: var(--s-4);
}

/* Kill the legacy raster backgrounds site-wide */
body,
#wrapper,
.main-row,
.header-row,
.top-row,
.bottom-row,
.footer-row,
.copyright-row,
.prod-row {
  background-image: none !important;
  filter: none !important;
}

/* Scroll-driven reveal. Opt-in via the home_animate template parameter, which
   puts .t26-anim on <html>.

   Deliberately opacity + a small vertical lift only, never a horizontal
   translate: the replaced WOW/animate.css system used translate3d(100%,0,0)
   with fill-mode both, which parked entire columns off to the right until a
   scroll fired. A scroll-driven animation cannot strand content — where
   animation-timeline is unsupported the @supports block simply never applies
   and everything renders normally. */
@supports (animation-timeline: view()) {
  .t26-anim .t26-reveal {
    animation: t26-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }
}

@keyframes t26-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

  .t26-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .product.item.item_product:hover {
    transform: none;
  }
}

@media print {
  .t26-header,
  .t26-topbar,
  .t26-footer,
  .t26-totop,
  .t26-drawer,
  .t26-scrim,
  .chat-position,
  .t26-aside {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000;
  }
}