/* =============================================================================
   ALL LED Theme — allled.css  v8.0.0
   OpenCart 3.0.x (OpenCart 4 ready)

   HOW STYLING WORKS
   Theme → Style chooses a site preset and, optionally, overrides any section,
   component or colour. The header prints:
     • CSS variables  (<style id="al-style">)  — colours, fonts, corners, spacing
     • body classes   al-{option}-{value}       — e.g. al-header-layout-inline,
                                                  al-buttons-pill, al-card-style-studio
   This file implements every option as a class. The values below are only
   fallbacks (ALL LED Classic) for pages rendered without the theme header.
   Theme → Screens prints a second block (<style id="al-responsive">) with the
   breakpoint variables: --al-container, --al-gutter, --al-grid-cols,
   --al-carousel-items, --al-range-cols, --al-footer-cols, --al-header-height.
   ============================================================================= */

/* =============================================================================
   1. TOKENS (fallbacks)
   ============================================================================= */
:root {
  --al-primary: #000; --al-primary-text: #fff; --al-primary-hover: #333; --al-accent: #E02B20;
  --al-text: #1A1A1A; --al-dark: #1A1A1A; --al-mid: #555; --al-muted: #6B6B6B;
  --al-bg: #fff; --al-white: #fff; --al-surface: #E6E5E2; --al-light: #E6E5E2; --al-bg-alt: #E6E5E2;
  --al-border: #D4D4D4; --al-border-light: #E8E8E8;
  --al-topbar-bg: #5E5E5E; --al-topbar-text: #fff;
  --al-header-bg: #fff; --al-header-text: #1A1A1A;
  --al-nav-bg: #000; --al-nav-text: #fff; --al-nav-hover-bg: #2B2B2B; --al-nav-hover-text: #fff;
  --al-panel-bg: #000; --al-panel-text: #fff;
  --al-footer-bg: #000; --al-footer-text: #fff; --al-footer-heading: #fff; --al-footer-link: #fff; --al-footer-link-hover: #fff; --al-footer-border: #2E2E2E;
  --al-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --al-font-display: var(--al-font-body);
  --al-font-size-base: 14px; --al-line-height: 1.6;
  --al-container: 1280px; --al-gutter: 20px;
  --al-radius: 3px; --al-radius-lg: 4px; --al-card-radius: 3px; --al-btn-radius: 8px;
  --al-space: 48px;
  --al-img-bg: #fff;
  --al-header-height: 80px; --al-nav-height: 46px; --al-logo-h: 52px; --al-topbar-h: 34px;
  --al-transition: .2s ease; --al-transition-slow: .35s ease;
  --al-shadow-sm: 0 1px 3px rgba(0,0,0,.08); --al-shadow-md: 0 6px 20px rgba(0,0,0,.10); --al-shadow-lg: 0 16px 40px rgba(0,0,0,.16);
  --al-img-hover-scale: 1.04;
  --al-ok: #1E8E3E; --al-warn: #B26A00; --al-bad: #C62828;
  --al-search-height: 42px;
}

/* =============================================================================
   2. BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { font-size: var(--al-font-size-base); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--al-header-height) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--al-font-body); font-size: var(--al-font-size-base); line-height: var(--al-line-height);
  color: var(--al-text); background: var(--al-bg); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; text-decoration: none; transition: color var(--al-transition); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--al-font-display); line-height: 1.2; font-weight: 700; color: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--al-primary); outline-offset: 2px; }
body.al-keyboard-user :focus { outline: 2px solid var(--al-text); outline-offset: 2px; }
.al-skip-link { position: absolute; top: -100px; left: 16px; z-index: 99999; background: var(--al-text); color: var(--al-bg); padding: 8px 16px; border-radius: var(--al-radius); }
.al-skip-link:focus { top: 12px; }
.al-visually-hidden, .al-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.al-hidden { display: none !important; }
.al-text-center { text-align: center; }
.al-divider { border: 0; border-top: 1px solid var(--al-border-light); margin: 24px 0; }

.al-container { max-width: var(--al-container); margin: 0 auto; padding: 0 var(--al-gutter); }
.al-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
#al-content { display: block; min-height: 40vh; padding-bottom: calc(var(--al-space) * .5); }
#al-content:focus { outline: none; }

.al-headings-uppercase h1, .al-headings-uppercase h2, .al-headings-uppercase .al-section-title,
.al-headings-uppercase .al-footer-col-title, .al-headings-uppercase .al-tab-btn { text-transform: uppercase; letter-spacing: .02em; }

.al-richtext { line-height: 1.7; }
.al-richtext p, .al-richtext ul, .al-richtext ol, .al-richtext table { margin-bottom: 1em; }
.al-richtext ul { list-style: disc; padding-left: 1.3em; } .al-richtext ol { list-style: decimal; padding-left: 1.3em; }
.al-richtext h2, .al-richtext h3 { margin: 1.2em 0 .5em; }
.al-richtext a { text-decoration: underline; text-underline-offset: 2px; }
.al-richtext img { height: auto; }

.al-page-title { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 16px; }

/* =============================================================================
   3. BUTTONS   shape: al-buttons-{square|rounded|pill}   fill: al-button-fill-{solid|outline}
   ============================================================================= */
.al-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 22px; border: 1.5px solid transparent; border-radius: var(--al-btn-radius);
  font-family: var(--al-font-body); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--al-transition), color var(--al-transition), border-color var(--al-transition), transform .1s;
}
.al-btn:active { transform: scale(.98); }
.al-btn-primary, .al-btn-dark { background: var(--al-primary); color: var(--al-primary-text); border-color: var(--al-primary); }
.al-btn-primary:hover, .al-btn-dark:hover { background: var(--al-primary-hover); border-color: var(--al-primary-hover); color: var(--al-primary-text); }
.al-btn-outline { background: transparent; color: var(--al-text); border-color: currentColor; }
.al-btn-outline:hover { background: var(--al-text); color: var(--al-bg); border-color: var(--al-text); }
.al-btn-secondary { background: var(--al-surface); color: var(--al-text); border-color: var(--al-border); }
.al-btn-invert { background: #fff; color: #111; border-color: #fff; }
.al-btn-invert:hover { background: transparent; color: #fff; }
.al-btn-outline.al-btn-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.al-btn-outline.al-btn-invert:hover { background: #fff; color: #111; }
.al-btn-sm { min-height: 34px; padding: 7px 14px; font-size: 13px; }
.al-btn-lg { min-height: 50px; padding: 13px 30px; font-size: 15px; }
.al-btn-block, .al-btn-full { display: flex; width: 100%; }
.al-btn-loading { opacity: .6; pointer-events: none; }
.al-btn[disabled] { opacity: .45; cursor: not-allowed; }
.al-button-fill-outline .al-btn-primary { background: transparent; color: var(--al-text); border-color: var(--al-text); }
.al-button-fill-outline .al-btn-primary:hover { background: var(--al-text); color: var(--al-bg); }
.al-link-btn { color: var(--al-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.al-link-btn:hover { color: var(--al-text); }

/* arrow on call-to-action buttons: al-button-arrows-yes (hero "pill" buttons always have one) */
.al-arrow { display: none; width: 1em; height: 1em; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.al-button-arrows-yes .al-btn .al-arrow, .al-button-arrows-yes .al-section-link::after, .al-hero-btn--pill .al-arrow, .al-mm-lead .al-arrow { display: inline-block; }
.al-card-action .al-arrow { transform: rotate(-45deg); }

/* =============================================================================
   4. FORMS
   ============================================================================= */
.al-input, .al-select, .al-textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--al-border); border-radius: var(--al-radius);
  background: var(--al-bg); color: var(--al-text); font-size: 14px; transition: border-color var(--al-transition), box-shadow var(--al-transition);
}
.al-select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: var(--al-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }
.al-input:focus, .al-select:focus, .al-textarea:focus { outline: none; border-color: var(--al-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-text) 10%, transparent); }
textarea.al-input, .al-textarea { min-height: 96px; resize: vertical; }
.al-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.al-field label, .al-field legend { font-size: 13px; font-weight: 600; }
.al-field small { color: var(--al-muted); font-size: 12px; }
.al-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.al-check input, .al-choice input { accent-color: var(--al-primary); width: 16px; height: 16px; }


/* ---- search (v7.6) ---- */
/* =============================================================================
   SEARCH
   ============================================================================= */
.al-search-form {
  display: flex;
  height: var(--al-search-height);
  border: 1.5px solid var(--al-border);
  border-radius: var(--al-radius);
  overflow: hidden;
  background: var(--al-white);
  transition: border-color var(--al-transition), box-shadow var(--al-transition);
}
.al-search-form:focus-within {
  border-color: var(--al-dark);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

.al-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 14px;
  font-family: var(--al-font-body);
  font-size: 14px;
  background: transparent;
  color: var(--al-dark);
}
.al-search-input::placeholder { color: var(--al-muted); }

.al-search-btn {
  background: var(--al-dark);
  border: none;
  padding: 0 16px;
  cursor: pointer;
  color: var(--al-white);
  display: flex;
  align-items: center;
  transition: background var(--al-transition);
}
.al-search-btn:hover { background: var(--al-mid); }
.al-search-btn svg { width: 18px; height: 18px; }

.al-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
  box-shadow: var(--al-shadow-lg);
  z-index: 1000;
  display: none;
  max-height: 480px;
  overflow-y: auto;
}
.al-search-dropdown.active { display: block; }

.al-search-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--al-muted);
  padding: 10px 16px 6px;
  border-top: 1px solid var(--al-border-light);
}
.al-search-section-title:first-child { border-top: none; }

.al-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--al-transition);
  color: var(--al-dark);
}
.al-search-result-item:hover,
.al-search-result-item:focus { background: var(--al-light); outline: none; }

.al-search-result-img {
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: var(--al-radius);
  border: 1px solid var(--al-border-light);
  flex-shrink: 0;
}

.al-search-result-info { flex: 1; min-width: 0; }
.al-search-result-sku  { font-size: 11px; color: var(--al-muted); }
.al-search-result-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-search-result-price { font-size: 13px; font-weight: 600; white-space: nowrap; }

.al-search-view-all {
  display: block;
  padding: 11px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--al-dark);
  border-top: 1px solid var(--al-border-light);
  transition: background var(--al-transition);
}
.al-search-view-all:hover { background: var(--al-light); color: var(--al-dark); }

.al-search-loading { display: none; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); }
.al-search-loading.active { display: block; }
.al-search-clear {
  position: absolute; right: 46px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--al-muted); line-height: 1; display: none; align-items: center;
}
.al-search-clear:hover { color: var(--al-dark); }
.al-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--al-border);
  border-top-color: var(--al-dark);
  border-radius: 50%;
  animation: al-spin 0.7s linear infinite;
}
@keyframes al-spin { to { transform: rotate(360deg); } }


/* =============================================================================
   5. PREVIEW BAR (admins previewing a preset with ?al_preview=)
   ============================================================================= */
.al-preview-bar { background: #FFE08A; color: #3B2F00; font-size: 13px; text-align: center; padding: 7px 16px; position: relative; z-index: 1300; }
.al-preview-bar a { text-decoration: underline; margin-left: 10px; font-weight: 600; }

/* =============================================================================
   6. MASTHEAD — top bar, header row, menu
   Layouts (body class): al-header-layout-classic | inline | compact | centered
   Scroll:               al-header-sticky-sticky | smart | static
   Over the hero:        .al-masthead--overlay (Theme → Style → "Header over the
                         home page banner") applies only when the page starts
                         with an ALL LED Hero module.
   ============================================================================= */
.al-masthead { position: relative; z-index: 1000; --al-topbar-h: 34px; }
.al-topbar-hidden .al-masthead, .al-masthead--no-topbar { --al-topbar-h: 0px; }
.al-header-sticky-sticky .al-masthead, .al-header-sticky-smart .al-masthead { position: sticky; top: calc(var(--al-topbar-h) * -1); }
.al-header-sticky-smart .al-masthead { transition: top .3s ease; }
.al-header-sticky-smart .al-masthead.is-hidden { top: calc(var(--al-mast-h, 160px) * -1); }
.al-masthead.is-scrolled .al-header { box-shadow: var(--al-shadow-md); }

/* top bar */
.al-topbar { background: var(--al-topbar-bg); color: var(--al-topbar-text); font-size: 12.5px; }
.al-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--al-topbar-h); }
.al-topbar-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.al-topbar-links a { color: inherit; opacity: .9; }
.al-topbar-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.al-topbar-center .al-topbar-row { justify-content: center; }
.al-topbar-center .al-topbar-links { justify-content: center; gap: 4px 34px; }

/* header row */
.al-header { background: var(--al-header-bg); color: var(--al-header-text); transition: background var(--al-transition), color var(--al-transition), box-shadow var(--al-transition); }
.al-header-row {
  position: relative; display: grid; align-items: center; gap: 0 28px; min-height: var(--al-header-height);
  grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "toggle logo search actions" "nav nav nav nav";
}
.al-mobile-toggle { grid-area: toggle; display: none; color: inherit; padding: 8px; margin-left: -8px; }
.al-mobile-toggle svg { width: 24px; height: 24px; }
.al-mm-mobile .al-mobile-toggle { display: inline-flex; }
.al-logo { grid-area: logo; line-height: 0; }
.al-logo img { height: var(--al-logo-h); width: auto; max-width: 240px; object-fit: contain; }
.al-logo-white { display: none; }
.al-logo-white[data-invert] { filter: brightness(0) invert(1); }
.al-header-tone-dark .al-logo-dark { display: none; }
.al-header-tone-dark .al-logo-white { display: block; }
.al-header-search { grid-area: search; position: relative; width: 100%; max-width: 560px; }
#al-nav { grid-area: nav; min-width: 0; }
#al-nav .al-nav-list { min-width: 0; }
.al-header-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }

/* classic: logo + search, full-width menu bar below */
.al-header-layout-classic .al-header-row { padding-top: 10px; }
.al-header-layout-classic #al-nav, .al-header-layout-centered #al-nav { margin-top: 10px; position: relative; isolation: isolate; }
.al-header-layout-classic #al-nav::before, .al-header-layout-centered #al-nav::before {
  content: ''; position: absolute; inset: 0 calc(50% - 50vw); background: var(--mm-bg, var(--al-nav-bg)); z-index: -1;
}
/* inline: logo | centred menu | icons */
.al-header-layout-inline .al-header-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "toggle logo nav actions"; }
.al-header-layout-inline.al-search-style-center .al-header-row, .al-header-layout-inline.al-search-style-left .al-header-row {
  grid-template-columns: auto auto minmax(0, 1fr) minmax(200px, 320px) auto; grid-template-areas: "toggle logo nav search actions"; }
/* two_row: logo + icons (+ search bar), centred menu row below */
.al-header-layout-two-row .al-header-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "toggle logo search actions" "nav nav nav nav"; }
.al-header-layout-two-row .al-nav-list { justify-content: safe center; }
.al-header-layout-two-row #al-nav { border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.al-header-layout-two-row .al-nav-link { height: 52px; }
/* compact: logo | menu | search box | icons */
.al-header-layout-compact .al-header-row { grid-template-columns: auto auto minmax(0, 1fr) minmax(180px, 300px) auto; grid-template-areas: "toggle logo nav search actions"; gap: 0 20px; }
/* centered: search | logo | icons, menu below */
.al-header-layout-centered .al-header-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "left logo actions" "nav nav nav"; padding-top: 10px; }
.al-header-layout-centered .al-mobile-toggle, .al-header-layout-centered .al-header-search { grid-area: left; justify-self: start; max-width: 300px; }
.al-header-layout-centered #al-nav { margin-top: 6px; }
.al-header-layout-centered .al-nav-list { justify-content: safe center; }
.al-header-layout-inline #al-nav, .al-header-layout-compact #al-nav { position: static; align-self: stretch; display: flex; }
.al-header-layout-inline .al-nav-list, .al-header-layout-compact .al-nav-list { align-self: stretch; }
.al-header-layout-inline .al-nav-link, .al-header-layout-compact .al-nav-link { height: 100%; min-height: var(--al-header-height); }
.al-header-layout-inline .al-nav-list { justify-content: safe center; width: 100%; }
.al-header-layout-inline .al-nav-link, .al-header-layout-compact .al-nav-link { padding: 0 12px; }

/* header icons */
.al-header-action-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; font-size: 11px; font-weight: 500; line-height: 1.1; padding: 4px; }
.al-header-action-btn svg { width: 23px; height: 23px; }
.al-header-action-btn:hover { opacity: .7; }
.al-action-label { display: none; }
.al-header-layout-classic .al-action-label { display: block; }
.al-search-trigger { display: none; }

/* Style → "Search in the header": centred bar (default), bar next to the logo, or icon only */
.al-search-style-center .al-header-search { justify-self: center; }
.al-search-style-left .al-header-search { justify-self: start; }
.al-search-style-icon .al-header-search:not(.mobile-active) { display: none; }
.al-search-style-icon .al-search-trigger { display: inline-flex; }
.al-count { position: absolute; top: -3px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--al-accent); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* search box */
.al-search-form { position: relative; display: flex; align-items: stretch; height: var(--al-search-height); border: 1px solid var(--al-border); border-radius: var(--al-btn-radius); overflow: hidden; background: var(--al-surface); transition: border-color var(--al-transition), box-shadow var(--al-transition); }
.al-search-form:focus-within { border-color: var(--al-text); background: var(--al-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-text) 10%, transparent); }
.al-search-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font-size: 14px; color: var(--al-text); outline: none; }
.al-search-input::-webkit-search-cancel-button { display: none; }
.al-search-btn { flex: 0 0 auto; width: 46px; display: flex; align-items: center; justify-content: center; background: var(--al-primary); color: var(--al-primary-text); }
.al-search-btn svg { width: 19px; height: 19px; }
.al-search-overlay-close { display: none; }
.al-header-search.mobile-active { position: fixed; inset: 0; z-index: 3000; max-width: none; display: flex; flex-direction: column; align-items: center; padding: 72px 16px 24px; background: rgba(10,10,10,.86); backdrop-filter: blur(6px); }
.al-header-search.mobile-active .al-search-form { width: min(720px, 100%); height: 56px; background: var(--al-bg); }
.al-header-search.mobile-active .al-search-dropdown { position: static; width: min(720px, 100%); margin-top: 8px; }
.al-header-search.mobile-active .al-search-overlay-close { display: flex; position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; }
body.al-search-open { overflow: hidden; }

/* dark headers (Contractor, Showroom): search box on dark */
.al-header-tone-dark .al-search-form { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.al-header-tone-dark .al-search-input { color: var(--al-header-text); }
.al-header-tone-dark .al-search-input::placeholder { color: rgba(255,255,255,.55); }
.al-header-tone-dark .al-header-search.mobile-active .al-search-input { color: var(--al-text); }

/* transparent header over the first hero (needs :has(); older browsers keep the solid header) */
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay { position: fixed; top: 0; left: 0; right: 0; }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) .al-header { background: transparent; color: #fff; box-shadow: none; }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) #al-nav { --al-nav-text: #fff; --al-nav-hover-text: #fff; --al-nav-hover-bg: transparent; --mm-text: #fff; --mm-hover-text: #fff; --mm-hover-bg: transparent; }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) #al-nav::before { background: transparent; }
/* a soft shade behind the header so white text stays readable over light pictures */
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25) 70%, transparent); }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) .al-header,
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) #al-nav { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) .al-logo-dark { display: none; }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) .al-logo-white { display: block; }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) .al-search-form { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) .al-search-input { color: #fff; }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay:not(.is-scrolled) .al-search-input::placeholder { color: rgba(255,255,255,.7); }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay { transition: top .3s ease, background .2s; }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay.is-scrolled { top: calc(var(--al-topbar-h) * -1); }
body:has(#al-content > .al-container > .al-hero:first-child) .al-masthead--overlay.is-scrolled.is-hidden { top: calc(var(--al-mast-h, 160px) * -1); }
body:has(.al-masthead--overlay) #al-content > .al-container > .al-hero:first-child { margin-top: 0; }


/* =============================================================================
   NAVIGATION / MEGA MENU  (v7.5 — driven by Extensions → Modules → ALL LED Mega Menu)
   All values come from --mm-* variables printed on #al-nav by the module.
   Mobile mode is the .al-mm-mobile class on <html> (breakpoint is set in admin),
   not a fixed media query.
   ============================================================================= */
#al-nav {
  position: relative; z-index: 800;
  background: var(--mm-bg, var(--al-nav-bg));
  font-family: var(--mm-font, var(--al-font-body));
}
.al-nav-list { display: flex; list-style: none; margin: 0; padding: 0; }
.al-mm--align-center .al-nav-list { justify-content: center; }
.al-mm--align-justify .al-nav-item { flex: 1 1 0; }
.al-nav-item { position: static; flex: 0 0 auto; }
.al-mm--dividers .al-nav-item + .al-nav-item { border-left: 1px solid rgba(255,255,255,.28); }

.al-nav-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--al-nav-height, 46px); padding: 0 16px;
  color: var(--mm-text, #fff); text-decoration: none; white-space: nowrap; position: relative;
  font-size: var(--mm-size, 14px); font-weight: var(--mm-weight, 500);
  text-transform: var(--mm-case, none); letter-spacing: var(--mm-spacing, 0);
  transition: background var(--mm-t, 200ms), color var(--mm-t, 200ms);
}
.al-nav-link:hover, .al-nav-item.open > .al-nav-link, .al-nav-link:focus-visible { color: var(--mm-hover-text, #fff); }
.al-mm--nav-bg .al-nav-link:hover, .al-mm--nav-bg .al-nav-item.open > .al-nav-link { background: var(--mm-hover-bg, #2a2a2a); }
.al-mm--nav-underline .al-nav-link::before {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px;
  background: currentColor; transform: scaleX(0); transition: transform var(--mm-t, 200ms);
}
.al-mm--nav-underline .al-nav-link:hover::before, .al-mm--nav-underline .al-nav-item.open > .al-nav-link::before { transform: scaleX(1); }
.al-nav-item.active > .al-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mm-hover-text, #fff);
}
.al-nav-arrow { display: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; transition: transform var(--mm-t, 200ms); }
.al-mm--arrows .al-nav-arrow { display: inline-block; }
.al-nav-item.open .al-nav-arrow { transform: rotate(180deg); }

/* ---- panels ---- */
.al-mega-panel, .al-list-panel {
  position: absolute; top: 100%; z-index: 900;
  background: var(--mm-panel-bg, #000); color: var(--mm-panel-text, #fff);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--mm-t, 200ms), transform var(--mm-t, 200ms), visibility 0s linear var(--mm-t, 200ms);
}
.al-mega-panel { left: 0; right: 0; }
.al-mm--panel-container .al-mega-panel { left: 50%; right: auto; width: min(var(--al-container, 1280px), 100%); transform: translate(-50%, -6px); }
.al-list-panel { min-width: 240px; }
.al-nav-item.drop-list { position: relative; }
.al-nav-item.open > .al-mega-panel, .al-nav-item.open > .al-list-panel {
  opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
.al-mm--panel-container .al-nav-item.open > .al-mega-panel { transform: translate(-50%, 0); }

.al-mega-wrap { display: flex; gap: var(--mm-col-gap, 40px); padding: 28px 32px; max-width: var(--al-container, 1280px); margin: 0 auto; }
.al-mega-wrap.feat-left { flex-direction: row-reverse; }
.al-mm-grid {
  flex: 1; list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(var(--mm-cols, 2), minmax(0, 1fr));
  gap: var(--mm-row-gap, 18px) var(--mm-col-gap, 40px);
}
.al-mm-grid.flow-column { grid-auto-flow: column; grid-template-rows: repeat(var(--mm-rows, 3), auto); }
.al-list-panel ul { list-style: none; margin: 0; padding: 10px 0; }
.al-list-panel .al-mm-item { padding: 9px 20px; }

/* ---- items ---- */
.al-mm-item {
  display: flex; align-items: center; gap: 18px; position: relative; overflow: visible;
  color: var(--mm-panel-text, #fff); text-decoration: none;
  font-size: var(--mm-item-size, 17px); font-weight: var(--mm-item-weight, 400); line-height: 1.25;
  transition: color var(--mm-t, 200ms), transform var(--mm-t, 200ms), box-shadow var(--mm-t, 200ms), background var(--mm-t, 200ms);
}
.al-mm-item:hover, .al-mm-item:focus-visible { color: var(--mm-panel-hover, #fff); }
.al-mm-img {
  flex: 0 0 var(--mm-img, 90px); width: var(--mm-img, 90px); height: var(--mm-img, 90px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--mm-img-bg, #fff); border: 1px solid var(--mm-img-border, #7a7a7a); border-radius: var(--mm-img-radius, 0);
  transition: transform var(--mm-t, 200ms), filter var(--mm-t, 200ms), box-shadow var(--mm-t, 200ms);
  transform-origin: center;
}
.al-mm-img img { width: 100%; height: 100%; object-fit: var(--mm-img-fit, contain); transition: transform var(--mm-t, 200ms), filter var(--mm-t, 200ms); }
.al-mm-text { transition: font-weight var(--mm-t, 200ms); }
.al-mm-viewall { opacity: .8; font-size: calc(var(--mm-item-size, 17px) * .85); }

/* hover effects (per item: fx-*) */
.fx-grow-bold:hover .al-mm-img, .fx-grow-bold:focus-visible .al-mm-img { transform: scale(var(--mm-scale, 1.15)); }
.fx-grow-bold:hover .al-mm-text, .fx-grow-bold:focus-visible .al-mm-text { font-weight: var(--mm-item-hweight, 700); }
.fx-zoom:hover .al-mm-img img { transform: scale(var(--mm-scale, 1.15)); }
.fx-bw .al-mm-img img { filter: grayscale(1); }
.fx-bw:hover .al-mm-img img { filter: none; }
.fx-color-bw:hover .al-mm-img img { filter: grayscale(1); }
.fx-lift:hover { transform: translateY(-3px); }
.fx-lift:hover .al-mm-img { box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.fx-underline:hover .al-mm-text { text-decoration: underline; text-underline-offset: 4px; }

/* click effects */
.al-mm--click-press .al-mm-item:active { transform: scale(.96); }
.al-mm--click-flash .al-mm-item:active { background: rgba(255,255,255,.16); }
.al-mm-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.35); transform: scale(0); animation: al-mm-ripple 520ms ease-out forwards; }
@keyframes al-mm-ripple { to { transform: scale(2.6); opacity: 0; } }

/* featured */
.al-mm-featured { flex: 0 0 280px; display: block; color: inherit; text-decoration: none; position: relative; overflow: hidden; border-radius: var(--al-radius, 4px); align-self: flex-start; }
.al-mm-featured img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform var(--mm-t, 200ms); }
.al-mm-featured:hover img { transform: scale(1.04); }
.al-mm-featured-cap { display: block; padding: 10px 2px 0; }
.al-mm-featured-cap strong { display: block; font-size: 15px; }
.al-mm-featured-cap span { display: block; font-size: 12px; opacity: .65; margin-top: 2px; }

/* fallback (module disabled → OpenCart default menu) */
.al-nav-fallback { background: var(--al-nav-bg); }

@media (prefers-reduced-motion: reduce) {
  #al-nav *, #al-nav *::before { transition: none !important; animation: none !important; }
}

/* ---- mobile mode (class set from admin breakpoint) ---- */
.al-mm-mobile .al-mobile-toggle { display: flex; }
.al-mm-mobile #al-nav .al-nav-list { display: none; flex-direction: column; }
.al-mm-mobile #al-nav.mobile-open .al-nav-list { display: flex; }
.al-mm-mobile #al-nav .al-nav-item { flex: none; border-left: none; border-top: 1px solid rgba(255,255,255,.12); }
.al-mm-mobile #al-nav .al-nav-link { justify-content: space-between; height: auto; padding: 14px 16px; }
.al-mm-mobile #al-nav .al-nav-arrow { display: inline-block; }
.al-mm-mobile .al-mega-panel, .al-mm-mobile .al-list-panel,
.al-mm-mobile.al-mm-mobile .al-mm--panel-container .al-mega-panel {
  position: static; width: auto; transform: none !important; box-shadow: none;
  opacity: 1; visibility: visible; display: none; transition: none;
}
.al-mm-mobile .al-nav-item.open > .al-mega-panel, .al-mm-mobile .al-nav-item.open > .al-list-panel { display: block; }
.al-mm-mobile .al-mega-wrap { flex-direction: column; padding: 8px 16px 18px; gap: 14px; }
.al-mm-mobile .al-mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-template-rows: none; gap: 12px; }
.al-mm-mobile .al-mm-item { font-size: 14px; gap: 10px; }
.al-mm-mobile .al-mm-img { --mm-img: 48px; }
.al-mm-mobile .al-mm-featured { flex-basis: auto; max-width: 320px; }
@media (max-width: 480px) { .al-mm-mobile .al-mm-grid { grid-template-columns: 1fr; } }


/* ---- v8 menu: placement inside the header grid, panel widths, columns layout, mobile drawer ---- */
#al-nav { background: transparent; color: var(--mm-text, var(--al-nav-text)); }
.al-header-layout-classic .al-nav-link, .al-header-layout-centered .al-nav-link { height: var(--al-nav-height); }
.al-mm--dividers .al-nav-item + .al-nav-item { border-left-color: color-mix(in srgb, var(--mm-text, #fff) 35%, transparent); }
.al-mm--align-left .al-nav-list { justify-content: flex-start; }
.al-nav-drawer-head { display: none; }
.al-nav-fallback ul { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* not enough room: JS adds .al-nav-tight before falling back to the drawer */
#al-nav.al-nav-tight .al-nav-link { padding: 0 8px; font-size: min(var(--mm-size, 14px), 14px); white-space: normal; text-align: center; line-height: 1.15; }
#al-nav.al-nav-tight .al-nav-label { max-width: 11em; }

/* panels: anchored to the menu bar (classic/centered) or to the header row (inline/compact) */
.al-mega-panel, .al-mm--panel-container .al-mega-panel { left: 0; right: 0; width: auto; transform: translateY(-6px); }
.al-mm--panel-container .al-nav-item.open > .al-mega-panel, .al-nav-item.open > .al-mega-panel { transform: translateY(0); }
.al-mm--panel-full .al-mega-panel { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.al-mega-panel { border-top: 1px solid color-mix(in srgb, var(--mm-panel-text, #fff) 12%, transparent); box-shadow: 0 24px 48px rgba(0,0,0,.18); }
.al-mega-wrap { max-width: var(--al-container); padding: 32px var(--al-gutter) 40px; }

/* columns layout (Theme → Style → Mega menu: Text columns) */
.al-mega-panel--columns .al-mega-wrap { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 32px; align-items: start; }
.al-mega-panel--columns .al-mega-wrap.has-featured { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 260px; }
.al-mm-lead { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--mm-panel-text); }
.al-mm-lead:hover { text-decoration: underline; text-underline-offset: 4px; }
.al-mm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 36px; }
.al-mm-heading { display: inline-block; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--mm-panel-text); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.al-mm-group ul { display: flex; flex-direction: column; gap: 7px; }
.al-mm-group a:not(.al-mm-heading) { font-size: 14px; color: color-mix(in srgb, var(--mm-panel-text) 78%, transparent); }
.al-mm-group a:hover { color: var(--mm-panel-text); text-decoration: underline; text-underline-offset: 3px; }

/* mobile: off-canvas drawer */
.al-mm-mobile #al-nav.al-mm, .al-mm-mobile #al-nav.al-nav-fallback {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 2100; width: min(380px, 88vw); margin: 0;
  display: block; overflow-y: auto; overscroll-behavior: contain;
  background: var(--al-panel-bg); color: var(--al-panel-text); --mm-text: var(--al-panel-text); --mm-hover-text: var(--al-panel-text);
  transform: translateX(-102%); transition: transform .28s ease; visibility: hidden;
}
.al-mm-mobile #al-nav::before { display: none; }
.al-mm-mobile #al-nav.mobile-open { transform: none; visibility: visible; box-shadow: var(--al-shadow-lg); }
.al-mm-mobile #al-nav .al-nav-list, .al-mm-mobile #al-nav.mobile-open .al-nav-list { display: flex; flex-direction: column; }
.al-mm-mobile .al-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 700; border-bottom: 1px solid color-mix(in srgb, var(--al-panel-text) 15%, transparent); }
.al-mm-mobile .al-nav-close { color: inherit; padding: 6px; }
.al-mm-mobile .al-mega-panel--columns .al-mega-wrap { grid-template-columns: 1fr; gap: 14px; }
.al-mm-mobile .al-mm-lead { font-size: 15px; }
.al-mm-mobile .al-mm-groups { grid-template-columns: 1fr; gap: 14px; }
.al-mm-mobile .al-mega-panel { border-top: 0; }
.al-nav-backdrop { position: fixed; inset: 0; z-index: 2050; background: rgba(0,0,0,.45); }
body.al-nav-open { overflow: hidden; }


/* =============================================================================
   8. BREADCRUMB   al-breadcrumb-{pipe|slash|chevron|hidden}
   ============================================================================= */
.al-breadcrumb { padding: 12px 0; font-size: 13px; color: var(--al-muted); }
.al-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; }
.al-breadcrumb li { display: inline-flex; align-items: center; }
.al-breadcrumb li + li::before { content: '|'; margin: 0 10px; opacity: .6; }
.al-breadcrumb-slash .al-breadcrumb li + li::before { content: '/'; margin: 0 8px; }
.al-breadcrumb-chevron .al-breadcrumb li + li::before { content: '\203A'; margin: 0 9px; font-size: 1.15em; }
.al-breadcrumb-hidden .al-breadcrumb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.al-breadcrumb a:hover { color: var(--al-text); text-decoration: underline; text-underline-offset: 3px; }
.al-breadcrumb [aria-current] { color: var(--al-text); }

/* =============================================================================
   9. SECTIONS   al-section-title-{rule|plain|centered}   al-density-{compact|regular|airy}
   ============================================================================= */
.al-section { padding: calc(var(--al-space) * .6) 0; }
.al-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.al-section-title { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; margin: 0; }
.al-section-link { font-size: 14px; font-weight: 600; color: var(--al-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.al-section-link:hover { color: var(--al-text); }
.al-section-intro { color: var(--al-muted); max-width: 70ch; margin: -8px 0 20px; }
.al-section-title-rule .al-section-header { padding-bottom: 10px; border-bottom: 2px solid color-mix(in srgb, var(--al-text) 55%, transparent); }
.al-section-title-rule .al-section-title { font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.al-section-title-plain .al-section-title { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; }
.al-section-title-centered .al-section-header { flex-direction: column; align-items: center; text-align: center; }
.al-section-title-centered .al-section-title { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; }
.al-section-title-centered .al-section-title::after { content: ''; display: block; width: 40px; height: 2px; margin: 12px auto 0; background: var(--al-accent); }

/* =============================================================================
   10. PRODUCT CARDS   al-card-style-{classic|studio|boxed|framed}
       one template: extension/module/allled_card.twig
   ============================================================================= */
.al-products-grid { display: grid; grid-template-columns: repeat(var(--al-grid-cols, 4), minmax(0, 1fr)); gap: 28px 20px; }
.al-grid-2 { --al-grid-cols: 2; } .al-grid-3 { --al-grid-cols: 3; } .al-grid-4 { --al-grid-cols: 4; } .al-grid-5 { --al-grid-cols: 5; } .al-grid-6 { --al-grid-cols: 6; }
.al-products-grid[data-cols="2"] { --al-grid-cols: 2; } .al-products-grid[data-cols="3"] { --al-grid-cols: 3; } .al-products-grid[data-cols="4"] { --al-grid-cols: 4; }
.al-products-grid[data-cols="5"] { --al-grid-cols: 5; } .al-products-grid[data-cols="6"] { --al-grid-cols: 6; }
.al-density-compact .al-products-grid { gap: 18px 14px; }
.al-density-airy .al-products-grid { gap: 40px 24px; }

.al-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; color: var(--al-text); }
.al-card-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--al-img-bg); border-radius: var(--al-card-radius); }
.al-card-media img { width: 100%; height: 100%; object-fit: contain; transition: filter var(--al-transition-slow), transform var(--al-transition-slow), opacity var(--al-transition-slow); }
.al-image-bg-grey .al-card-media img, .al-image-bg-grey .al-gallery-main img, .al-image-bg-grey .al-gallery-thumb img { mix-blend-mode: multiply; }
.al-card-media .al-img-alt { position: absolute; inset: 0; opacity: 0; }
.al-card-body { display: flex; flex-direction: column; gap: 3px; padding-top: 10px; flex: 1; min-width: 0; }
.al-card-meta { display: contents; }
.al-card-model { font-size: 14px; font-weight: 700; order: 1; overflow-wrap: anywhere; }
.al-card-model-label { display: none; }
.al-card-name { font-family: var(--al-font-body); font-size: 14px; font-weight: 400; line-height: 1.35; order: 2; }
.al-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-card-brand { order: 3; font-size: 12px; color: var(--al-muted); }
.al-card-icons { order: 4; display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.al-card-icons img { height: var(--al-icon-h, 22px); width: auto; max-width: calc(var(--al-icon-h, 22px) * 3); object-fit: contain; }
.al-card-price { order: 5; font-size: 15px; font-weight: 700; }
.al-card-body > .al-stock { order: 6; }
.al-card-action { order: 7; margin-top: auto; }
.al-card-body::after { content: ''; order: 6; flex: 0 0 8px; }
.al-price-old { color: var(--al-muted); text-decoration: line-through; font-weight: 400; font-size: .85em; margin-left: 4px; }
.al-price-new { color: var(--al-accent); }
.al-login-prompt { font-size: 13px; font-weight: 500; color: var(--al-muted); text-decoration: underline; text-underline-offset: 3px; }
.al-login-prompt:hover { color: var(--al-text); }
.al-price-size-large .al-card-price { font-size: 17px; }
.al-card-wish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: #111; opacity: 0; transition: opacity var(--al-transition); box-shadow: var(--al-shadow-sm); }
.al-card:hover .al-card-wish, .al-card-wish:focus-visible, .al-card-wish.active { opacity: 1; }
.al-card-wish.active svg { fill: var(--al-accent); stroke: var(--al-accent); }
@media (hover: none) { .al-card-wish { opacity: 1; } }

/* badges   al-badges-{square|pill} */
.al-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 8px; border-radius: 2px; background: var(--al-text); color: var(--al-bg); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.al-badge-sale { background: var(--al-accent); color: #fff; }
.al-badges-pill .al-badge { border-radius: 999px; padding: 3px 10px; }

/* classic — your mockups: bold SKU, name, icon row */
.al-card-style-classic .al-card-media { border: 1px solid var(--al-border-light); }
/* studio — big grey photo, name, model + price on one line, outline button */
.al-card-style-studio .al-card-body { padding-top: 14px; gap: 6px; }
.al-card-style-studio .al-card-name { order: 1; font-size: 15px; font-weight: 500; }
.al-card-style-studio .al-card-brand { order: 2; }
.al-card-style-studio .al-card-meta { order: 3; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.al-card-style-studio .al-card-model { font-size: 11.5px; font-weight: 400; color: var(--al-muted); text-transform: uppercase; letter-spacing: .03em; min-width: 0; overflow-wrap: normal; }
.al-card-style-studio .al-card-model-label { display: inline; }
.al-card-style-studio .al-card-price { text-align: right; white-space: nowrap; margin-left: auto; }
.al-card-style-studio .al-card-icons { order: 5; }
.al-card-style-studio .al-card-action { width: 100%; justify-content: space-between; }
/* boxed — data-sheet box */
.al-card-style-boxed .al-card { border: 1px solid var(--al-border); border-radius: var(--al-card-radius); padding: 12px; background: var(--al-bg); transition: border-color var(--al-transition), box-shadow var(--al-transition); }
.al-card-style-boxed .al-card:hover { border-color: var(--al-text); }
.al-card-style-boxed .al-card-media { border-radius: 0; }
.al-card-style-boxed .al-card-model { font-size: 12px; font-weight: 600; color: var(--al-primary); letter-spacing: .02em; }
.al-card-style-boxed .al-card-name { font-weight: 600; }
.al-card-style-boxed .al-card-price { padding-top: 6px; border-top: 1px solid var(--al-border-light); margin-top: 6px; }
.al-card-style-boxed .al-card-action { width: 100%; }
/* framed — trade counter: heavy frame, bold SKU, big price */
.al-card-style-framed .al-card { border: 2px solid var(--al-text); background: var(--al-bg); }
.al-card-style-framed .al-card-media { border-radius: 0; border-bottom: 2px solid var(--al-text); }
.al-card-style-framed .al-card-body { padding: 10px 12px 12px; }
.al-card-style-framed .al-card-model { font-family: var(--al-font-display); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.al-card-style-framed .al-card-price { font-size: 18px; }
.al-card-style-framed .al-card-action { width: 100%; }

/* stock line   al-stock-display-{dot|badge|text} */
.al-stock { display: inline-flex; align-items: center; gap: 7px; justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--al-ok); }
.al-stock--low { color: var(--al-warn); } .al-stock--out { color: var(--al-bad); }
.al-stock-display-dot .al-stock { color: var(--al-text); font-weight: 500; }
.al-stock-display-dot .al-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--al-ok); flex: 0 0 auto; }
.al-stock-display-dot .al-stock--low::before { background: var(--al-warn); }
.al-stock-display-dot .al-stock--out::before { background: var(--al-bad); }
.al-stock-display-badge .al-stock { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }

/* list view (category toolbar) */
.al-products-grid.al-list-view { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.al-list-view .al-card { flex-direction: row; gap: 20px; align-items: flex-start; border-bottom: 1px solid var(--al-border-light); padding-bottom: 16px; }
.al-list-view .al-card-media { flex: 0 0 180px; width: 180px; }
.al-list-view .al-card-body { padding-top: 0; }

/* image hover effects (Theme → Products → Image hover effect): al-hover-* */
@media (hover: hover) {
  .al-hover-bw .al-card:hover .al-card-media img, .al-hover-both .al-card:hover .al-card-media img { filter: grayscale(100%); }
  .al-hover-zoom .al-card:hover .al-card-media img, .al-hover-both .al-card:hover .al-card-media img { transform: scale(var(--al-img-hover-scale)); }
  .al-hover-bw-reverse .al-card:hover .al-card-media img { filter: none; }
  .al-hover-fade .al-card:hover .al-card-media img:not(.al-img-alt) { opacity: .75; }
  .al-hover-lift .al-card { transition: transform var(--al-transition); }
  .al-hover-lift .al-card:hover { transform: translateY(-4px); }
  .al-hover-lift .al-card:hover .al-card-media { box-shadow: var(--al-shadow-md); }
  .al-hover-swap .al-card:hover .al-card-media .al-img-alt { opacity: 1; }
}
.al-hover-bw-reverse .al-card-media img { filter: grayscale(100%); }
.al-hover-swap .al-card:focus-within .al-card-media .al-img-alt { opacity: 1; }

/* =============================================================================
   11. CAROUSELS
   ============================================================================= */
.al-carousel-wrapper { position: relative; }
.al-carousel-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.al-carousel-track::-webkit-scrollbar { display: none; }
.al-carousel-item { flex: 0 0 calc((100% - (var(--al-carousel-items, 6) - 1) * 20px) / var(--al-carousel-items, 6)); min-width: 150px; scroll-snap-align: start; }
.al-carousel-arrow { position: absolute; top: calc(50% - 50px); z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: var(--al-bg); color: var(--al-text); border: 1px solid var(--al-border); box-shadow: var(--al-shadow-sm); display: flex; align-items: center; justify-content: center; transition: opacity var(--al-transition), background var(--al-transition); }
.al-carousel-arrow::before { content: ''; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.al-carousel-next::before { transform: rotate(-135deg); margin: 0 4px 0 0; }
.al-carousel-arrow:hover { background: var(--al-text); color: var(--al-bg); }
.al-carousel-prev { left: -14px; } .al-carousel-next { right: -14px; }
.al-carousel-arrow[data-disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 1360px) { .al-carousel-prev { left: 4px; } .al-carousel-next { right: 4px; } }

/* =============================================================================
   12. PAGE COLUMNS, SIDEBAR MODULES, TOOLBAR, PAGINATION, EMPTY STATES
   ============================================================================= */
.al-page.has-left, .al-page.has-right { display: grid; gap: 32px; align-items: start; }
.al-page.has-left { grid-template-columns: 260px minmax(0, 1fr); }
.al-page.has-right { grid-template-columns: minmax(0, 1fr) 260px; }
.al-page.has-left.has-right { grid-template-columns: 240px minmax(0, 1fr) 240px; }
.al-page > aside { width: auto !important; float: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: 20px; }
.al-page-main { min-width: 0; }

.al-side-box { border: 1px solid var(--al-border-light); border-radius: var(--al-radius-lg); padding: 16px; background: var(--al-bg); }
.al-side-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.al-side-box ul { display: flex; flex-direction: column; }
.al-side-box li a { display: block; padding: 6px 0; font-size: 14px; color: var(--al-muted); }
.al-side-box li a:hover, .al-side-box li.active > a { color: var(--al-text); }
.al-side-box li.active > a { font-weight: 600; }
.al-side-box li ul { padding-left: 12px; border-left: 1px solid var(--al-border-light); margin: 2px 0 6px; }
.al-filters { padding: 0; border: 0; }
.al-filters-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--al-border); }
.al-filter-group { border-bottom: 1px solid var(--al-border-light); }
.al-filter-group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.al-filter-group summary::-webkit-details-marker { display: none; }
.al-filter-group summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--al-transition); margin-right: 4px; }
.al-filter-group[open] summary::after { transform: rotate(-135deg); }
.al-filter-options { display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px; }
.al-filters .al-btn { margin-top: 16px; }

.al-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 8px 0 22px; padding: 10px 0; border-top: 1px solid var(--al-border-light); border-bottom: 1px solid var(--al-border-light); }
.al-toolbar-count { font-size: 13px; color: var(--al-muted); }
.al-toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.al-toolbar .al-select { width: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.al-view-toggle { display: flex; border: 1px solid var(--al-border); border-radius: var(--al-radius); overflow: hidden; }
.al-view-btn { width: 36px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--al-muted); }
.al-view-btn svg { width: 16px; height: 16px; }
.al-view-btn.active { background: var(--al-text); color: var(--al-bg); }
.al-col-selector { display: flex; gap: 4px; }
.al-col-btn { height: 34px; padding: 0 8px; display: flex; align-items: center; gap: 2px; border: 1px solid var(--al-border); border-radius: var(--al-radius); }
.al-col-btn .al-cb { width: 4px; height: 14px; border-radius: 1px; background: var(--al-muted); }
.al-col-btn.active { border-color: var(--al-text); }
.al-col-btn.active .al-cb { background: var(--al-text); }

.al-pagination { display: flex; justify-content: center; padding: 32px 0 8px; }
.al-pagination .pagination { display: flex; flex-wrap: wrap; gap: 6px; }
.al-pagination .pagination a, .al-pagination .pagination span { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--al-border); border-radius: var(--al-radius); font-size: 14px; }
.al-pagination .pagination a:hover { border-color: var(--al-text); }
.al-pagination .pagination .active span { background: var(--al-text); border-color: var(--al-text); color: var(--al-bg); }
.al-empty { padding: 48px 16px; text-align: center; color: var(--al-muted); }
.al-empty p { margin-bottom: 16px; }
.al-search-refine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; }
.al-search-refine .al-field { margin: 0; }
.al-field--grow { flex: 1 1 280px; }
.al-brand-index { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.al-brand-index a { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--al-border); border-radius: var(--al-radius); font-weight: 600; }
.al-brand-groups { columns: 4 200px; column-gap: 32px; }
.al-brand-group { break-inside: avoid; margin-bottom: 24px; }
.al-brand-group h2 { font-size: 18px; border-bottom: 1px solid var(--al-border); padding-bottom: 6px; margin-bottom: 8px; }
.al-brand-group li a { display: block; padding: 3px 0; }
.al-brand-group li a:hover { text-decoration: underline; }

/* =============================================================================
   13. CATEGORY   al-category-header-{banner|hero|plain}   al-range-tiles-*
   ============================================================================= */
.al-cat-head { margin: 4px 0 24px; }
.al-cat-head--banner { display: flex; gap: 20px; align-items: flex-start; }
.al-cat-head-img { width: 120px; height: 120px; object-fit: cover; flex: 0 0 auto; border-radius: var(--al-card-radius); background: var(--al-img-bg); }
.al-cat-head .al-page-title { margin-bottom: 6px; }
.al-cat-head-desc { color: var(--al-muted); max-width: 80ch; }
.al-cat-head-desc p { margin-bottom: .6em; }
.al-cat-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(260px, 34vw, 440px); margin-bottom: 4px; color: #fff; background: var(--al-text) var(--al-hero-img) center / cover no-repeat; }
.al-cat-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.05) 70%); }
.al-cat-hero--noimg { min-height: 200px; background: var(--al-surface); color: var(--al-text); }
.al-cat-hero--noimg::before { display: none; }
.al-cat-hero-inner { position: relative; width: 100%; padding-top: 48px; padding-bottom: 40px; }
.al-cat-hero-title { font-size: clamp(30px, 4vw, 52px); font-weight: 600; margin-bottom: 10px; }
.al-cat-hero-text { max-width: 70ch; font-size: 16px; opacity: .92; }
.al-cat-hero-text p { margin: 0 0 .5em; }

/* range / sub-category tiles (also used by the Featured ranges module) */
.al-ranges { display: grid; grid-template-columns: repeat(var(--al-range-cols, 4), minmax(0, 1fr)); gap: 28px 24px; margin: 8px 0 36px; }
.al-range { display: flex; flex-direction: column; gap: 8px; color: var(--al-text); }
.al-range-name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.al-range-img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--al-img-bg); border: 1px solid var(--al-border-light); border-radius: var(--al-card-radius); }
.al-range-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--al-transition-slow); }
.al-range:hover .al-range-img img { transform: scale(1.04); }
.al-range:hover .al-range-name { text-decoration: underline; text-underline-offset: 4px; }
.al-ranges--landscape .al-range-img { aspect-ratio: 4 / 3; } .al-ranges--portrait .al-range-img { aspect-ratio: 3 / 4; }
.al-ranges--name-below .al-range-name { order: 2; font-weight: 600; font-size: 15px; }
.al-ranges--overlay .al-range { position: relative; }
.al-ranges--overlay .al-range-img { border: 0; }
.al-ranges--overlay .al-range-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 55%); border-radius: inherit; pointer-events: none; }
.al-ranges--overlay .al-range-img { position: relative; }
.al-ranges--overlay .al-range-name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; font-size: 18px; font-weight: 600; }
.al-ranges--circle .al-range { align-items: center; text-align: center; }
.al-ranges--circle .al-range-img { border-radius: 50%; width: 100%; }
.al-ranges--circle .al-range-name { order: 2; font-size: 14px; font-weight: 600; }
.al-ranges--text { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.al-ranges--text .al-range { padding: 12px 14px; border: 1px solid var(--al-border); border-radius: var(--al-radius); }
.al-ranges-module .al-ranges { margin-bottom: 0; }
.al-ranges-module .al-ranges { --al-gap: 24px; grid-template-columns: repeat(auto-fill, minmax(max(140px, calc((100% - (var(--al-range-max, 4) - 1) * var(--al-gap)) / var(--al-range-max, 4))), 1fr)); }
.al-ranges-panel { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 32px; padding: 32px; background: #111; color: #fff; border-radius: var(--al-radius-lg); }
.al-ranges-panel-title { font-size: 22px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.4); }
.al-ranges-panel-intro p { opacity: .85; margin-bottom: 18px; }
.al-ranges-panel .al-range { color: #fff; }
.al-ranges-panel .al-range-img { background: #fff; border: 0; }


/* =============================================================================
   14. PRODUCT PAGE
       images:   al-product-gallery-{thumbs-below|thumbs-left}
       sections: .al-pdp--{tabs|accordion|stacked}   tabs look: al-tabs-style-*
       spec:     al-spec-table-{grouped|zebra|lines}
   ============================================================================= */
.al-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "gallery info" "details details"; gap: 28px 48px; align-items: start; margin-top: 4px; }
/* Style → "Description, specification & downloads": beside the pictures (default) or below them */
.al-product-info-position-right .al-pdp { grid-template-areas: "gallery info" "gallery details"; grid-template-rows: auto 1fr; }
.al-pdp-gallery { grid-area: gallery; display: grid; gap: 10px; position: sticky; top: calc(var(--al-header-height) + 20px); }
.al-header-sticky-static .al-pdp-gallery { position: static; }
/* gallery + buy box wrapper. Information beside the pictures: the wrapper is transparent.
   Below the pictures: the sections run full width under both columns, so the gallery may only stay in
   view while scrolling past the buy box — never over the sections. */
.al-pdp-top { display: contents; }
.al-product-info-position-below .al-pdp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "details"; }
.al-product-info-position-below .al-pdp-top { grid-area: top; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "gallery info"; gap: 28px 48px; align-items: start; }

/* Style → "Product pictures on big screens: fit the screen": the main picture is never taller than the
   window minus the header and a row of thumbnails, so the thumbnails are always on screen under it */
.al-product-pictures-fit .al-gallery-main { max-height: calc(100svh - var(--al-mast-h, 150px) - 150px); min-height: 280px; }
.al-product-pictures-fit .al-pdp-gallery.has-thumbs .al-gallery-thumbs { grid-auto-columns: 84px; }
.al-product-pictures-fit.al-product-gallery-thumbs-left .al-pdp-gallery.has-thumbs .al-gallery-thumbs { grid-auto-columns: auto; max-height: calc(100svh - var(--al-mast-h, 150px) - 150px); }
.al-product-pictures-fit .al-pdp-gallery { top: calc(var(--al-mast-h, var(--al-header-height)) + 16px); }
/* Theme → Products → "Product pictures follow the scroll" off */
.al-pdp-sticky-off .al-pdp-gallery { position: static; }
/* Compare switched off (Theme → Products): also hides compare buttons added by other extensions */
.al-no-compare [onclick^="compare.add"], .al-no-compare a[href*="route=product/compare"] { display: none !important; }
.al-price-note { font-size: 14px; color: var(--al-muted); }
.al-pdp-info { grid-area: info; min-width: 0; }
.al-pdp-details { grid-area: details; min-width: 0; }

.al-gallery-main { display: block; aspect-ratio: 1; background: var(--al-img-bg); border-radius: var(--al-radius-lg); overflow: hidden; }
.al-gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s ease; }
.al-gallery-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 4); gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.al-gallery-thumb { aspect-ratio: 1; background: var(--al-img-bg); border: 1px solid var(--al-border-light); border-radius: var(--al-radius); overflow: hidden; padding: 0; opacity: .75; transition: opacity var(--al-transition), border-color var(--al-transition); }
.al-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.al-gallery-thumb:hover, .al-gallery-thumb.active { opacity: 1; border-color: var(--al-text); }
.al-product-gallery-thumbs-left .al-pdp-gallery.has-thumbs { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
.al-product-gallery-thumbs-left .al-pdp-gallery.has-thumbs .al-gallery-main { grid-column: 2; grid-row: 1; }
.al-product-gallery-thumbs-left .al-pdp-gallery.has-thumbs .al-gallery-thumbs { grid-column: 1; grid-row: 1; grid-auto-flow: row; grid-auto-columns: auto; max-height: 100%; overflow-y: auto; }

.al-pdp-model { font-size: 12.5px; color: var(--al-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.al-pdp-title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.15; margin-bottom: 6px; }
.al-pdp-brand { color: var(--al-muted); font-size: 14px; margin-bottom: 12px; }
.al-pdp-brand a { color: var(--al-text); text-decoration: underline; text-underline-offset: 3px; }
/* classic (mockup): big name, SKU as a bold second line */
.al-preset-classic .al-pdp-model, .al-card-style-classic .al-pdp-model { order: 2; font-size: clamp(18px, 1.8vw, 24px); color: var(--al-text); font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 10px; }
.al-card-style-classic .al-pdp-model-label { display: none; }
.al-card-style-classic .al-pdp-info { display: flex; flex-direction: column; }
.al-card-style-classic .al-pdp-title { order: 1; }
.al-card-style-classic .al-pdp-info > *:not(.al-pdp-title):not(.al-pdp-model) { order: 3; }

.al-pdp-rating { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--al-muted); margin-bottom: 10px; }
.al-pdp-rating span:last-child { margin-left: 8px; text-decoration: underline; }
.al-star { width: 15px; height: 15px; background: var(--al-border); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21l1.5-7L2 9.3l7-.8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21l1.5-7L2 9.3l7-.8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.al-star.on { background: #E8A317; }

.al-pdp-price { margin: 8px 0 12px; font-size: 26px; font-weight: 700; }
.al-price-size-large .al-pdp-price { font-size: 32px; }
.al-price-tax { display: block; font-size: 13px; font-weight: 400; color: var(--al-muted); }
.al-b2b-prompt { padding: 16px; background: var(--al-surface); border-radius: var(--al-radius-lg); font-size: 14px; font-weight: 400; }
.al-b2b-prompt p { margin-bottom: 10px; color: var(--al-muted); }
.al-qty-breaks { width: 100%; max-width: 320px; margin: 0 0 14px; font-size: 13px; }
.al-qty-breaks caption { text-align: left; font-weight: 600; margin-bottom: 4px; }
.al-qty-breaks th, .al-qty-breaks td { padding: 5px 8px; border-bottom: 1px solid var(--al-border-light); text-align: left; }
.al-pdp-info > .al-stock { margin-bottom: 14px; font-size: 13.5px; }
.al-pdp-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 18px; }
.al-pdp-icons img { height: var(--al-icon-h, 32px); width: auto; max-width: calc(var(--al-icon-h, 32px) * 4); object-fit: contain; }

.al-buy { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.al-options { border: 0; display: flex; flex-direction: column; gap: 12px; }
.al-options-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.al-option { display: flex; flex-direction: column; gap: 6px; }
.al-option-label { font-size: 13px; font-weight: 600; }
.al-option.is-required .al-option-label::after { content: ' *'; color: var(--al-bad); }
.al-option .al-select, .al-option .al-input { max-width: 440px; }
.al-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.al-choice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--al-border); border-radius: var(--al-radius); font-size: 14px; cursor: pointer; }
.al-choice:has(input:checked) { border-color: var(--al-text); box-shadow: inset 0 0 0 1px var(--al-text); }
.al-choice img { width: 32px; height: 32px; object-fit: cover; border-radius: 2px; }
.al-option-error { color: var(--al-bad); font-size: 12.5px; }
.al-option.has-error .al-select, .al-option.has-error .al-input { border-color: var(--al-bad); }
.al-buy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.al-buy-add { flex: 1 1 220px; }
.al-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--al-border); border-radius: var(--al-btn-radius); overflow: hidden; min-height: 50px; }
.al-qty input { width: 56px; border: 0; text-align: center; font-weight: 600; background: transparent; -moz-appearance: textfield; }
.al-qty input::-webkit-outer-spin-button, .al-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.al-qty-btn { width: 40px; font-size: 18px; color: var(--al-text); }
.al-qty-btn:hover { background: var(--al-surface); }
.al-buy-note { font-size: 13px; color: var(--al-muted); }
.al-buy-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.al-buy-links { display: flex; gap: 18px; }

/* spec sheets & files box */
.al-files { border: 1px solid var(--al-border); border-radius: var(--al-radius-lg); padding: 16px; margin-bottom: 18px; }
.al-files-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.al-files-title { font-family: var(--al-font-body); font-size: 15px; font-weight: 700; }
.al-files-all { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.al-files-list { display: flex; flex-direction: column; margin-bottom: 12px; }
.al-files-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--al-border-light); font-size: 14px; }
.al-files-list li:first-child { border-top: 0; }
.al-files-list a { flex: 1; }
.al-files-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-files-list input { accent-color: var(--al-primary); width: 16px; height: 16px; }
.al-file-type { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--al-surface); color: var(--al-muted); }

/* information sections */
.al-sections { margin-top: 8px; }
.al-tab-list { display: flex; flex-wrap: wrap; gap: 4px; }
.al-tab-btn { padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: var(--al-tab-text, var(--al-muted)); background: var(--al-tab-bg, transparent); white-space: nowrap; transition: color var(--al-transition), background var(--al-transition); }
.al-tab-btn:hover { color: var(--al-tab-active-text, var(--al-text)); }
.al-tab-btn.active { color: var(--al-tab-active-text, var(--al-text)); background: var(--al-tab-active-bg, transparent); }
.al-sections[data-mode="tabs"] .al-sec-body { background: var(--al-tab-panel-bg, transparent); color: var(--al-tab-panel-text, inherit); }
.al-sections[data-mode="tabs"] .al-sec { display: none; }
.al-sections[data-mode="tabs"] .al-sec.active { display: block; }
.al-sec-body { padding: 22px 0; }
.al-sections[data-mode="tabs"][data-scroll] .al-sec-body { max-height: var(--al-sec-max, 400px); overflow-y: auto; }
/* tabs look: dark (mockup) */
.al-tabs-style-dark .al-tab-list { gap: 2px; }
.al-tabs-style-dark .al-tab-btn { background: var(--al-tab-bg, #3A3A3A); color: var(--al-tab-text, #fff); border-radius: 10px 10px 0 0; text-transform: uppercase; }
.al-tabs-style-dark .al-tab-btn:hover { background: var(--al-tab-bg, #222); filter: brightness(.88); color: var(--al-tab-text, #fff); }
.al-tabs-style-dark .al-tab-btn.active { background: var(--al-tab-active-bg, var(--al-tab-panel-bg, var(--al-surface))); color: var(--al-tab-active-text, var(--al-text)); filter: none; }
.al-tabs-style-dark .al-sections[data-mode="tabs"] .al-sec-body { background: var(--al-tab-panel-bg, var(--al-surface)); padding: 20px 22px; }
/* underline */
.al-tabs-style-underline .al-tab-list { border-bottom: 1px solid var(--al-border); gap: 8px; }
.al-tabs-style-underline .al-tab-btn { padding: 12px 4px; margin-right: 18px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.al-tabs-style-underline .al-tab-btn.active { border-bottom-color: var(--al-tab-active-text, var(--al-text)); }
/* boxed */
.al-tabs-style-boxed .al-tab-list { gap: 0; }
.al-tabs-style-boxed .al-tab-btn { border: 1px solid var(--al-border); margin-right: -1px; background: var(--al-tab-bg, var(--al-surface)); }
.al-tabs-style-boxed .al-tab-btn.active { background: var(--al-tab-active-bg, var(--al-tab-panel-bg, var(--al-bg))); border-bottom-color: var(--al-tab-active-bg, var(--al-tab-panel-bg, var(--al-bg))); }
.al-tabs-style-boxed .al-sections[data-mode="tabs"] .al-sec-body { border: 1px solid var(--al-border); margin-top: -1px; padding: 20px; }
/* accordion + stacked */
.al-sec-head { font-family: var(--al-font-body); font-size: 15px; font-weight: 700; }
.al-sections[data-mode="accordion"] .al-sec { border-bottom: 1px solid var(--al-border); }
.al-sections[data-mode="accordion"] .al-sec:first-child { border-top: 1px solid var(--al-border); }
.al-sec-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; font-weight: 700; text-align: left; }
.al-sec-toggle::after { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--al-transition); margin-right: 4px; }
.al-sec.open .al-sec-toggle::after { transform: rotate(-135deg); }
.al-sections[data-mode="accordion"] .al-sec:not(.open) .al-sec-body { display: none; }
.al-sections[data-mode="accordion"] .al-sec-body { padding: 0 0 24px; }
.al-sections[data-mode="stacked"] .al-sec { padding: 28px 0; border-top: 1px solid var(--al-border); }
.al-sections[data-mode="stacked"] .al-sec-head { font-family: var(--al-font-display); font-size: 20px; }
.al-sections[data-mode="stacked"] .al-sec-body { padding: 14px 0 0; }

.al-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.al-tags a { font-size: 12px; padding: 3px 10px; border: 1px solid var(--al-border); border-radius: 999px; color: var(--al-muted); }
.al-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 28px; }
.al-features li { position: relative; padding-left: 22px; }
.al-features li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--al-ok); border-bottom: 2px solid var(--al-ok); transform: rotate(-45deg); }

/* specification */
.al-spec { width: 100%; font-size: 14px; }
.al-spec--grouped th, .al-spec--grouped td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--al-border-light); }
.al-spec--grouped tbody th[scope="row"] { width: 38%; font-weight: 600; color: var(--al-muted); }
.al-spec--grouped .al-spec-group th { padding-top: 18px; background: none; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--al-text); border-bottom: 2px solid var(--al-text); }
.al-tabs-style-dark .al-spec--grouped .al-spec-group th { border-bottom-color: color-mix(in srgb, var(--al-text) 40%, transparent); }
.al-spec--zebra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.al-spec--zebra > div, .al-spec--lines > div { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 16px; padding: 12px 14px; border-top: 1px solid var(--al-border-light); }
.al-spec--zebra > div:nth-child(4n+1), .al-spec--zebra > div:nth-child(4n+2) { background: var(--al-surface); }
.al-spec--zebra dt, .al-spec--lines dt { font-weight: 500; color: var(--al-muted); }
.al-spec--lines > div { padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--al-border); }
.al-spec dd { overflow-wrap: anywhere; }

/* reviews */
.al-reviews { margin-bottom: 20px; }
.al-reviews table { width: 100%; margin-bottom: 12px; }
.al-reviews td { padding: 6px 0; }
.al-review-form { max-width: 640px; }
.al-review-form h3 { font-size: 16px; margin-bottom: 12px; }
.al-rating-input { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; border: 0; }
.al-similar { margin-top: 20px; }
.al-products-grid--fixed { --al-grid-cols: 4; }


/* =============================================================================
   15. HERO (ALL LED Hero banner module)
   ============================================================================= */
.al-hero { position: relative; overflow: hidden; color: #fff; background: #111; margin-bottom: calc(var(--al-space) * .5); }
.al-hero--w-container { border-radius: var(--al-radius-lg); margin-top: 16px; }
.al-hero-track { position: relative; height: var(--al-hero-h, 620px); }
.al-hero--h-short { --al-hero-h: clamp(280px, 34vw, 380px); }
.al-hero--h-medium { --al-hero-h: clamp(360px, 44vw, 540px); }
.al-hero--h-tall { --al-hero-h: clamp(460px, 62vw, 780px); }
.al-hero--h-screen { --al-hero-h: 100svh; }
.al-hero--h-auto .al-hero-track { height: auto; }
.al-hero--h-auto .al-hero-slide:first-child { position: relative; }
.al-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.al-hero-slide.active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.al-hero--h-auto .al-hero-slide { position: absolute; }
.al-hero--h-auto .al-hero-slide:first-child { position: relative; }
.al-hero-media, .al-hero-media img { display: block; width: 100%; height: 100%; }
.al-hero-media img { object-fit: cover; }
.al-hero--h-auto .al-hero-media img { height: auto; }
.al-hero--h-auto .al-hero-slide:not(:first-child) .al-hero-media img { height: 100%; }
.al-hero-slide::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.al-hero--shade-light .al-hero-slide::after { background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%); }
.al-hero--shade-medium .al-hero-slide::after { background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05) 65%); }
.al-hero--shade-strong .al-hero-slide::after { background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.3)); }
.al-hero--tone-dark { color: var(--al-text); }
.al-hero--tone-dark.al-hero--shade-light .al-hero-slide::after, .al-hero--tone-dark.al-hero--shade-medium .al-hero-slide::after { background: linear-gradient(to top, rgba(255,255,255,.7), rgba(255,255,255,0) 60%); }
.al-hero-copy { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; }
.al-hero-copy-inner { width: 100%; max-width: var(--al-container); margin: 0 auto; padding: 0 var(--al-gutter) clamp(56px, 8vw, 96px); }
.al-hero-align-center .al-hero-copy-inner { text-align: center; }
.al-hero-align-center .al-hero-text { margin-left: auto; margin-right: auto; }
.al-hero-align-right .al-hero-copy-inner { text-align: right; }
.al-hero-align-right .al-hero-text { margin-left: auto; }
.al-hero-title { font-size: clamp(32px, 4.6vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; max-width: 18ch; margin-bottom: 14px; }
.al-hero-align-center .al-hero-title { margin-left: auto; margin-right: auto; }
.al-hero-align-right .al-hero-title { margin-left: auto; }
.al-hero-text { font-size: clamp(15px, 1.3vw, 19px); max-width: 52ch; opacity: .92; margin-bottom: 24px; }
.al-hero-btn { display: inline-flex; align-items: center; gap: 10px; }
.al-hero-btn--pill { min-height: 46px; padding: 10px 24px; border-radius: 999px; background: #fff; color: #111; font-weight: 600; font-size: 14.5px; transition: transform .15s ease, box-shadow .15s ease; }
.al-hero-btn--pill:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.al-hero-btn--outline { min-height: 46px; padding: 10px 26px; border: 1.5px solid currentColor; border-radius: var(--al-btn-radius); font-weight: 600; }
.al-hero-btn--outline:hover { background: #fff; color: #111; }
.al-hero--tone-dark .al-hero-btn--pill { background: var(--al-text); color: var(--al-bg); }
.al-hero-cover { position: absolute; inset: 0; z-index: 2; }
/* split */
.al-hero--split { background: var(--al-surface); color: var(--al-text); }
.al-hero--split .al-hero-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.al-hero--split .al-hero-slide::after { display: none; }
.al-hero--split .al-hero-media { grid-column: 2; grid-row: 1; }
.al-hero--split .al-hero-copy { position: relative; grid-column: 1; grid-row: 1; align-items: center; }
.al-hero--split .al-hero-copy-inner { padding: 40px clamp(24px, 4vw, 64px); }
.al-hero--split .al-hero-title { font-size: clamp(28px, 3.4vw, 48px); }
/* banner (artwork only) */
.al-hero--banner { background: var(--al-surface); }
.al-hero--banner .al-hero-slide::after { display: none; }
/* controls */
.al-hero-arrow { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; display: flex; align-items: center; justify-content: center; }
.al-hero-arrow::before { content: ''; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.al-hero-next::before { transform: rotate(-135deg); margin: 0 4px 0 0; }
.al-hero-prev { left: 18px; } .al-hero-next { right: 18px; }
.al-hero-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.al-hero-dot { padding: 8px 0; }
.al-hero-dot span { display: block; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.55); transition: width .35s ease, background .35s ease; }
.al-hero-dot.active span { background: #fff; }
.al-hero-dots--pills .al-hero-dot.active span { width: 40px; }
.al-hero--tone-dark .al-hero-dot span, .al-hero--split .al-hero-dot span, .al-hero--banner .al-hero-dot span { background: color-mix(in srgb, var(--al-text) 35%, transparent); }
.al-hero--tone-dark .al-hero-dot.active span, .al-hero--split .al-hero-dot.active span, .al-hero--banner .al-hero-dot.active span { background: var(--al-text); }
@media (prefers-reduced-motion: reduce) { .al-hero-slide { transition: none; } }

/* OpenCart Slideshow / Banner modules */
.al-banner-wrapper { position: relative; overflow: hidden; border-radius: var(--al-radius-lg); margin: 16px 0 calc(var(--al-space) * .4); background: var(--al-surface); }
.al-slide { display: none; }
.al-slide.active { display: block; }
.al-slide img { width: 100%; }
.al-banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; display: flex; align-items: center; justify-content: center; z-index: 2; }
.al-banner-arrow::before { content: ''; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.al-banner-arrow-next::before { transform: rotate(-135deg); margin: 0 4px 0 0; }
.al-banner-arrow-prev { left: 14px; } .al-banner-arrow-next { right: 14px; }
.al-banner-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.al-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.al-banner-dot.active { background: #fff; }
.al-logo-strip { display: flex; gap: 40px; align-items: center; overflow-x: auto; padding: 16px 0; scrollbar-width: none; }
.al-logo-strip > * { flex: 0 0 auto; }   /* never shrink logos to nothing on narrow screens */
.al-logo-strip img { height: 50px; width: auto; max-width: none; filter: grayscale(1); opacity: .7; transition: filter var(--al-transition), opacity var(--al-transition); }
.al-logo-strip a:hover img { filter: none; opacity: 1; }

/* =============================================================================
   16. CONTENT BLOCKS, BRAND STRIP
   ============================================================================= */
.al-blocks { margin-top: calc(var(--al-space) * .5); margin-bottom: calc(var(--al-space) * .5); }
.al-blocks .al-blocks-inner { padding-top: calc(var(--al-space) * .8); padding-bottom: calc(var(--al-space) * .8); }
.al-blocks--bg-surface { background: var(--al-surface); }
.al-blocks--bg-dark { background: #141414; color: #fff; }
.al-blocks--bg-primary { background: var(--al-primary); color: var(--al-primary-text); }
.al-blocks:not(.al-bleed).al-blocks--bg-surface, .al-blocks:not(.al-bleed).al-blocks--bg-dark, .al-blocks:not(.al-bleed).al-blocks--bg-primary { border-radius: var(--al-radius-lg); }
.al-blocks:not(.al-bleed):not(.al-blocks--bg-none) .al-blocks-inner { padding-left: clamp(20px, 3vw, 48px); padding-right: clamp(20px, 3vw, 48px); }
.al-blocks--center { text-align: center; }
.al-blocks-head { max-width: 760px; margin: 0 0 28px; }
.al-blocks--center .al-blocks-head { margin-left: auto; margin-right: auto; }
.al-blocks-title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; margin-bottom: 10px; }
.al-blocks-text { opacity: .85; font-size: 16px; }
.al-blocks-items { --al-gap: 28px; display: grid; gap: var(--al-gap); grid-template-columns: repeat(auto-fill, minmax(max(180px, calc((100% - (var(--al-block-cols, 4) - 1) * var(--al-gap)) / var(--al-block-cols, 4))), 1fr)); }
.al-block-link { display: block; height: 100%; color: inherit; }
.al-block-icon { display: inline-flex; width: 48px; height: 48px; margin-bottom: 12px; color: var(--al-accent); }
.al-blocks--bg-dark .al-block-icon, .al-blocks--bg-primary .al-block-icon { color: currentColor; }
.al-block-icon svg { width: 100%; height: 100%; }
.al-block-title { font-family: var(--al-font-body); font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.al-block-text { font-size: 14px; opacity: .8; }
.al-blocks--features .al-block-img img { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 12px; }
.al-blocks--left.al-blocks--features .al-block-img img { margin-left: 0; }
.al-blocks--cards .al-block-item { text-align: left; }
.al-blocks--cards .al-block-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--al-card-radius); margin-bottom: 12px; background: var(--al-img-bg); }
.al-blocks--cards .al-block-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--al-transition-slow); }
.al-blocks--cards .al-block-link:hover img { transform: scale(1.04); }
.al-blocks--cards .al-block-link:hover .al-block-title { text-decoration: underline; text-underline-offset: 4px; }
.al-blocks-cta { margin-top: 28px; }
.al-blocks--cta { position: relative; overflow: hidden; }
.al-blocks--cta[style*="--al-block-img"] { background: #111 var(--al-block-img) center / cover no-repeat; color: #fff; }
.al-blocks--cta[style*="--al-block-img"]::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.al-blocks--cta .al-blocks-inner { position: relative; }
.al-blocks.al-blocks--cta .al-blocks-inner { padding-top: calc(var(--al-space) * 1.1); padding-bottom: calc(var(--al-space) * 1.1); }
.al-blocks--cta .al-blocks-head { margin-bottom: 0; }
.al-blocks--split .al-blocks-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; }
.al-blocks--img-right .al-blocks-media { order: 2; }
.al-blocks-media img { width: 100%; border-radius: var(--al-radius-lg); }
.al-blocks--split .al-blocks-text { margin-bottom: 22px; }

.al-brands-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; }
.al-brands--strip .al-brands-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.al-brands--grid .al-brands-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.al-brands--grid .al-brands-list a { display: flex; align-items: center; justify-content: center; height: calc(var(--al-brand-h) + 40px); border: 1px solid var(--al-border-light); border-radius: var(--al-radius); }
.al-brands-list img { height: var(--al-brand-h, 48px); width: auto; max-width: none; object-fit: contain; transition: filter var(--al-transition), opacity var(--al-transition); }
.al-brands--mono img { filter: grayscale(1); opacity: .65; }
.al-brands--mono a:hover img { filter: none; opacity: 1; }

/* =============================================================================
   17. FOOTER   al-footer-layout-{columns|columns-contact|minimal}
   ============================================================================= */
.al-footer { background: var(--al-footer-bg); color: var(--al-footer-text); margin-top: calc(var(--al-space) * .8); font-size: 14px; }
.al-footer-grid { display: grid; grid-template-columns: repeat(var(--al-footer-cols, 4), minmax(0, 1fr)); gap: 32px; padding: calc(var(--al-space) * .8) 0 calc(var(--al-space) * .6); }
.al-footer-layout-columns-contact .al-footer-grid { grid-template-columns: repeat(var(--al-footer-cols, 4), minmax(0, 1fr)); }
.al-footer-col-title { font-family: var(--al-font-body); font-size: 15px; font-weight: 700; color: var(--al-footer-heading); margin-bottom: 14px; }
.al-section-title-rule .al-footer-col-title { display: inline-block; font-size: 13.5px; text-transform: uppercase; padding-bottom: 2px; border-bottom: 1.5px solid currentColor; min-width: 70%; }
.al-footer-links { display: flex; flex-direction: column; gap: 7px; }
.al-footer-links a { color: var(--al-footer-link); opacity: .82; }
.al-footer-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.al-section-title-rule .al-footer-links li::before { content: '\2022'; margin-right: 6px; opacity: .8; }
.al-footer-contact li { opacity: .85; }
.al-social { display: flex; gap: 12px; margin-top: 16px; }
.al-social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--al-footer-border); color: var(--al-footer-text); }
.al-social a:hover { background: var(--al-footer-text); color: var(--al-footer-bg); }
.al-social svg { width: 16px; height: 16px; fill: currentColor; }
.al-social--inline a { width: auto; height: auto; border: 0; border-radius: 0; font-size: 13px; }
.al-social--inline a:hover { background: none; color: inherit; text-decoration: underline; }
.al-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 18px 0; border-top: 1px solid var(--al-footer-border); font-size: 13px; }
.al-footer-copy { opacity: .75; }
.al-footer-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.al-footer-inline a:hover { text-decoration: underline; }
.al-footer-layout-minimal .al-footer-bottom { border-top: 0; padding: 28px 0; }
.al-footer-layout-minimal .al-footer { border-top: 1px solid var(--al-border); }


/* =============================================================================
   PRODUCT BUILDER MODULE
   ============================================================================= */
.al-builder-module {
  background: var(--al-dark);
  color: var(--al-white);
  padding: 28px 32px;
  border-radius: var(--al-radius-lg);
}
.al-builder-header { display: flex; gap: 28px; }
.al-builder-img { flex: 0 0 160px; }
.al-builder-img img { width: 100%; border-radius: var(--al-radius); }
.al-builder-content { flex: 1; }
.al-builder-title {
  font-family: var(--al-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.al-builder-desc { font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 20px; }
.al-builder-grid {
  display: grid;
  /* up to --al-builder-cols across, fewer automatically when tiles would be under 140px */
  grid-template-columns: repeat(auto-fill, minmax(max(140px, calc((100% - (var(--al-builder-cols, 5) - 1) * 12px) / var(--al-builder-cols, 5))), 1fr));
  gap: 12px;
}
.al-builder-item { text-decoration: none; color: inherit; cursor: pointer; transition: transform var(--al-transition); }
.al-builder-item:hover { transform: translateY(-3px); }
.al-builder-item-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.al-builder-item-img {
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--al-radius);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(255,255,255,0.4);
  transition: border-color var(--al-transition), background var(--al-transition);
}
.al-builder-item:hover .al-builder-item-img { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); }
.al-builder-item-img img { width: 100%; height: 100%; object-fit: cover; }


/* =============================================================================
   FORMS (account, contact, checkout)
   ============================================================================= */
.al-form-group { margin-bottom: 18px; }
.al-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--al-dark);
}
.al-label .required { color: #C62828; margin-left: 2px; }
.al-input.error, .al-select.error { border-color: #C62828; }
.al-field-error { font-size: 12px; color: #C62828; margin-top: 4px; }
.al-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; }
.al-checkbox-label input { margin-top: 2px; flex-shrink: 0; accent-color: var(--al-dark); }

.al-form-card {
  background: var(--al-white);
  border: 1px solid var(--al-border-light);
  border-radius: var(--al-radius-lg);
  padding: 28px 32px;
}
.al-form-title {
  font-family: var(--al-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--al-border-light);
}


/* =============================================================================
   ACCOUNT PAGES
   ============================================================================= */
.al-account-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  margin: 24px 0;
}
.al-account-sidebar {
  background: var(--al-white);
  border: 1px solid var(--al-border-light);
  border-radius: var(--al-radius-lg);
  padding: 12px 0;
  height: fit-content;
}
.al-account-nav-item {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--al-dark);
  border-left: 3px solid transparent;
  transition: all var(--al-transition);
}
.al-account-nav-item:hover,
.al-account-nav-item.active {
  background: var(--al-light);
  border-left-color: var(--al-dark);
  color: var(--al-dark);
}
.al-account-nav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--al-muted);
  padding: 10px 20px 4px;
}


/* =============================================================================
   ALERTS
   ============================================================================= */
.al-alert {
  padding: 12px 16px;
  border-radius: var(--al-radius);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.al-alert-success { background: #E8F5E9; color: #1B5E20; border-left: 3px solid #2E7D32; }
.al-alert-error   { background: #FFEBEE; color: #B71C1C; border-left: 3px solid #C62828; }
.al-alert-info    { background: #E3F2FD; color: #0D47A1; border-left: 3px solid #1565C0; }
.al-alert-warning { background: #FFF8E1; color: #E65100; border-left: 3px solid #F57F17; }


/* =============================================================================
   v7.5 — BOOTSTRAP 3 COMPATIBILITY (core checkout steps, cart total modules,
   payment/shipping extensions). Scoped to avoid touching theme components.
   ============================================================================= */
.al-checkout .panel, .al-cart-modules .panel, #al-content .panel {
  border: 1px solid var(--al-border); border-radius: var(--al-radius); margin-bottom: 12px; background: var(--al-white);
}
#al-content .panel-heading { padding: 14px 18px; background: var(--al-light); border-bottom: 1px solid var(--al-border-light); }
#al-content .panel-title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
#al-content .panel-title a { color: var(--al-dark); text-decoration: none; display: block; }
#al-content .panel-body { padding: 18px; }
#al-content .collapse { display: none; }
#al-content .collapse.in { display: block; }
#al-content .collapsing { position: relative; height: 0; overflow: hidden; transition: height .3s ease; }
#al-content .row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
#al-content .row > [class*="col-"] { padding: 0 10px; width: 100%; }
@media (min-width: 768px) {
  #al-content .col-sm-2 { width: 16.666%; } #al-content .col-sm-3 { width: 25%; } #al-content .col-sm-4 { width: 33.333%; }
  #al-content .col-sm-6 { width: 50%; } #al-content .col-sm-8 { width: 66.666%; } #al-content .col-sm-9 { width: 75%; }
  #al-content .col-sm-10 { width: 83.333%; } #al-content .col-sm-12 { width: 100%; }
}
#al-content .form-group { margin-bottom: 14px; }
#al-content .form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: center; }
#al-content label.control-label, #al-content .form-group > label { font-size: 12px; font-weight: 600; margin-bottom: 4px; display: block; }
#al-content .form-group.required .control-label::after { content: ' *'; color: #c00; }
#al-content .form-control {
  display: block; width: 100%; padding: 9px 12px; font-size: 14px; line-height: 1.4; color: var(--al-dark);
  background: var(--al-white); border: 1px solid var(--al-border); border-radius: var(--al-radius);
}
#al-content .form-control:focus { outline: none; border-color: var(--al-dark); box-shadow: 0 0 0 2px rgba(0,0,0,.08); }
#al-content textarea.form-control { min-height: 80px; }
#al-content .has-error .form-control { border-color: #c00; }
#al-content .text-danger { color: #c00; font-size: 12px; margin-top: 4px; }
#al-content .radio, #al-content .checkbox { margin: 6px 0; }
#al-content .radio label, #al-content .checkbox label { font-weight: 400; display: flex; gap: 8px; align-items: center; cursor: pointer; }
#al-content .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px;
  font-size: 13px; font-weight: 600; border: 1px solid var(--al-border); border-radius: var(--al-radius);
  background: var(--al-white); color: var(--al-dark); cursor: pointer; text-decoration: none; line-height: 1.3;
}
#al-content .btn-primary { background: var(--al-dark); border-color: var(--al-dark); color: var(--al-white); }
#al-content .btn-primary:hover { background: var(--al-mid); }
#al-content .btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
#al-content .btn[disabled], #al-content .btn.disabled { opacity: .55; cursor: not-allowed; }
#al-content .buttons { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
#al-content .pull-right { margin-left: auto; } #al-content .pull-left { margin-right: auto; }
#al-content .input-group { display: flex; } #al-content .input-group .form-control { flex: 1; }
#al-content .input-group-btn .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; height: 100%; }
#al-content .table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 13px; }
#al-content .table th, #al-content .table td { padding: 10px; border-bottom: 1px solid var(--al-border-light); text-align: left; vertical-align: top; }
#al-content .table-bordered th, #al-content .table-bordered td { border: 1px solid var(--al-border-light); }
#al-content .text-right { text-align: right !important; } #al-content .text-center { text-align: center !important; }
#al-content .table-responsive { overflow-x: auto; }
#al-content .alert { padding: 12px 16px; border-radius: var(--al-radius); margin-bottom: 14px; font-size: 13px; border: 1px solid transparent; }
#al-content .alert-danger { background: #fdecea; border-color: #f5c2c0; color: #8a1c14; }
#al-content .alert-success { background: #e8f5ec; border-color: #b9e2c5; color: #1d6b37; }
#al-content .alert-warning { background: #fff6e0; border-color: #f5dea0; color: #7a5a00; }
#al-content .alert-info { background: #e8f1fb; border-color: #bcd6f2; color: #1d4f85; }
#al-content .alert .close { float: right; background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; }
#al-content .well { background: var(--al-light); border: 1px solid var(--al-border-light); border-radius: var(--al-radius); padding: 16px; }
#al-content .help-block { font-size: 12px; color: var(--al-muted); margin-top: 4px; }
#al-content .hidden { display: none !important; }


/* =============================================================================
   v7.6 — PREDICTIVE SEARCH additions
   ============================================================================= */
.al-search-dropdown { max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.al-search-result-item.is-active, .al-search-chip.is-active { background: var(--al-light); outline: 2px solid var(--al-dark); outline-offset: -2px; }
.al-search-result-item mark, .al-search-view-all mark { background: none; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.al-search-section-title { display: flex; justify-content: space-between; align-items: center; }
.al-search-section-title span, .al-search-section-title a { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--al-muted); font-size: 11px; }
.al-search-section-title a { text-decoration: underline; cursor: pointer; }
.al-search-cat .al-search-result-name::before { content: '▸ '; color: var(--al-muted); }
.al-search-stock { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.al-search-stock.al-stock-in  { background: #e8f5ec; color: #1d6b37; }
.al-search-stock.al-stock-low { background: #fff6e0; color: #7a5a00; }
.al-search-stock.al-stock-out { background: #fdecea; color: #8a1c14; }
.al-search-result-price s { color: var(--al-muted); font-weight: 400; font-size: 11px; }
.al-search-login { font-size: 11px; font-style: italic; color: var(--al-muted); font-weight: 400; }
.al-search-empty { padding: 16px; text-align: center; color: var(--al-muted); font-size: 13px; }
.al-search-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 12px; }
.al-search-chip { border: 1px solid var(--al-border); background: var(--al-white); border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--al-dark); }
.al-search-chip:hover { border-color: var(--al-dark); }


/* =============================================================================
   PRINT
   ============================================================================= */
@media print {
  .al-masthead, .al-preview-bar, .al-footer, .al-carousel-arrow, .al-hero-arrow, .al-hero-dots, .al-toolbar, .al-pagination,
  .al-buy, .al-files-head input, .al-card-wish, .al-card-action, .al-tab-list, .al-nav-backdrop, .al-similar { display: none !important; }
  body { font-size: 10.5pt; color: #000; background: #fff; }
  .al-pdp { grid-template-columns: 220px 1fr; grid-template-areas: "gallery info" "details details"; }
  .al-pdp-gallery { position: static; } .al-gallery-thumbs { display: none; }
  .al-sec { display: block !important; break-inside: avoid; } .al-sec-body { display: block !important; max-height: none !important; }
  .al-sections[data-mode] .al-sec-head { display: block; margin-top: 12px; }
  a[href^="http"]::after { content: ""; }
}

/* =============================================================================
   v8.1 — MORE LAYOUT & DESIGN OPTIONS (Theme → Style)
   ============================================================================= */
/* header width / page width */
.al-header-width-full .al-header > .al-container, .al-header-width-full .al-topbar > .al-container { max-width: none; }
body.al-page-width-wide { --al-container: min(1600px, 100%); }
body.al-page-width-full { --al-container: 100%; }

/* shadows */
body { --al-elev: none; --al-elev-hover: none; }
body.al-shadows-soft { --al-elev: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06); --al-elev-hover: 0 10px 28px rgba(16,24,40,.12); }
body.al-shadows-strong { --al-elev: 0 2px 4px rgba(16,24,40,.08), 0 10px 30px rgba(16,24,40,.14); --al-elev-hover: 0 18px 44px rgba(16,24,40,.22); }
.al-card-style-boxed .al-card, .al-side-box, .al-files, .al-b2b-prompt, .al-search-dropdown { box-shadow: var(--al-elev); }
.al-card-style-boxed .al-card:hover { box-shadow: var(--al-elev-hover); }
.al-shadows-none .al-mega-panel, .al-shadows-none .al-list-panel { box-shadow: none; border-bottom: 1px solid var(--al-border); }
.al-shadows-none .al-search-dropdown { box-shadow: none; }
.al-shadows-strong .al-card-style-studio .al-card:hover .al-card-media, .al-shadows-soft .al-card-style-studio .al-card:hover .al-card-media { box-shadow: var(--al-elev-hover); }
.al-card-media { transition: box-shadow var(--al-transition); }

/* form fields */
.al-inputs-filled .al-input, .al-inputs-filled .al-select, .al-inputs-filled #al-content .form-control { background-color: var(--al-surface); border-color: transparent; }
.al-inputs-filled .al-input:focus, .al-inputs-filled .al-select:focus { background-color: var(--al-bg); border-color: var(--al-text); }
.al-inputs-underline .al-input, .al-inputs-underline .al-select, .al-inputs-underline #al-content .form-control { border-width: 0 0 1.5px; border-radius: 0; padding-left: 2px; background-color: transparent; }
.al-inputs-underline .al-select { background-position: right 2px center; }

/* text links */
.al-links-underline .al-richtext a, .al-links-underline .al-footer-links a, .al-links-underline .al-side-box li a,
.al-links-underline .al-breadcrumb a, .al-links-underline .al-section-link, .al-links-underline .al-mm-group a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* product card text, pictures, button case */
.al-card-align-center .al-card-body { align-items: center; text-align: center; }
.al-card-align-center .al-card-icons, .al-card-align-center .al-card-meta { justify-content: center; }
.al-card-align-center .al-stock { justify-self: center; }
.al-card-ratio-portrait .al-card-media { aspect-ratio: 3 / 4; }
.al-card-ratio-landscape .al-card-media { aspect-ratio: 4 / 3; }
.al-button-case-uppercase .al-btn, .al-button-case-uppercase .al-hero-btn { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }

/* tabs: pills */
.al-tabs-style-pills .al-tab-list { gap: 8px; padding: 6px; background: var(--al-tab-bg, var(--al-surface)); border-radius: 999px; display: inline-flex; }
.al-tabs-style-pills .al-tab-btn { border-radius: 999px; padding: 8px 18px; }
.al-tabs-style-pills .al-tab-btn { background: transparent; }
.al-tabs-style-pills .al-tab-btn.active { background: var(--al-tab-active-bg, var(--al-bg)); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* section headings: accent bar */
.al-section-title-bar .al-section-title { position: relative; padding-left: 14px; font-size: clamp(18px, 1.8vw, 24px); }
.al-section-title-bar .al-section-title::before { content: ''; position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 2px; background: var(--al-primary); }

/* cards: minimal — picture and name, the rest on hover */
.al-card-style-minimal .al-card-body { padding-top: 10px; }
.al-card-style-minimal .al-card-name { order: 1; font-weight: 500; }
.al-card-style-minimal .al-card-meta, .al-card-style-minimal .al-card-icons, .al-card-style-minimal .al-card-brand, .al-card-style-minimal .al-card-body > .al-stock { transition: opacity var(--al-transition); }
@media (hover: hover) {
  .al-card-style-minimal .al-card:not(:hover):not(:focus-within) .al-card-icons,
  .al-card-style-minimal .al-card:not(:hover):not(:focus-within) .al-card-brand,
  .al-card-style-minimal .al-card:not(:hover):not(:focus-within) .al-card-body > .al-stock { opacity: 0; }
}
.al-card-style-minimal .al-card-model { font-size: 12px; font-weight: 400; color: var(--al-muted); }
/* cards: overlay — name and price over the picture */
.al-card-style-overlay .al-card { position: relative; overflow: hidden; border-radius: var(--al-card-radius); }
.al-card-style-overlay .al-card-media { border-radius: inherit; }
.al-card-style-overlay .al-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 14px 14px; color: #fff; pointer-events: none;
  background: linear-gradient(to top, rgba(8,10,14,.94) 0, rgba(8,10,14,.86) 45%, rgba(8,10,14,.5) 75%, transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,.45); }
/* product shots on white: the picture sits higher so the text band does not cover the product */
/* product shots are usually on white: show the picture in the top part, the text band below it */
.al-card-style-overlay .al-card-media { min-height: 310px; }
.al-card-style-overlay .al-card-media img { height: calc(100% - 140px); min-height: 45%; padding: 14px 14px 0; box-sizing: border-box; object-position: center; }
.al-card-style-overlay .al-card-media { background: var(--al-img-bg, #fff); }
.al-card-style-overlay .al-card-body a, .al-card-style-overlay .al-card-body button { pointer-events: auto; }
.al-card-style-overlay .al-card-name a, .al-card-style-overlay .al-card-model, .al-card-style-overlay .al-login-prompt { color: #fff; }
.al-card-style-overlay .al-card-brand, .al-card-style-overlay .al-card-model { color: rgba(255,255,255,.82); font-weight: 400; font-size: 12px; }
.al-card-style-overlay .al-price-old { color: rgba(255,255,255,.6); }
.al-card-style-overlay .al-stock { color: #fff; }
.al-card-style-overlay .al-card-action { color: #fff; border-color: rgba(255,255,255,.7); }
.al-card-style-overlay .al-card-media img { transition: transform .6s ease; }
@media (hover: hover) { .al-card-style-overlay .al-card:hover .al-card-media img { transform: scale(1.05); } }

/* footer: brand */
.al-footer-grid--brand { grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); }
.al-footer-brand { display: flex; flex-direction: column; gap: 14px; padding-right: 20px; }
@media (max-width: 640px) { .al-footer-grid--brand { grid-template-columns: 1fr; } .al-footer-brand { padding: 0 0 18px; } }
html.al-device-phone .al-footer-grid--brand { grid-template-columns: 1fr; }
html.al-device-phone .al-footer-brand { padding: 0 0 18px; }
.al-footer-logo { height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.al-footer-logo-white { display: none; }
.al-footer-logo-white[data-invert] { filter: brightness(0) invert(1); }
.al-footer-tone-dark .al-footer-logo-dark { display: none; }
.al-footer-tone-dark .al-footer-logo-white { display: block; }
.al-footer-about { opacity: .8; max-width: 42ch; line-height: 1.6; }
.al-footer-name { font-size: 20px; color: var(--al-footer-heading); }

/* dark pages (Midnight preset or any dark page colour) */
.al-page-tone-dark { --al-white: var(--al-surface); --al-light: var(--al-surface); --al-dark: var(--al-text); --al-mid: var(--al-muted); color-scheme: dark; }
.al-page-tone-dark .al-card-media img, .al-page-tone-dark .al-gallery-main img, .al-page-tone-dark .al-gallery-thumb img { mix-blend-mode: normal; }
.al-page-tone-dark .al-card-media, .al-page-tone-dark .al-gallery-main, .al-page-tone-dark .al-gallery-thumb { background: #fff; }
.al-page-tone-dark .al-card-wish { background: var(--al-surface); color: var(--al-text); }
.al-page-tone-dark .al-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.al-page-tone-dark .al-btn-outline:hover { color: var(--al-bg); }
.al-page-tone-dark .al-ranges-panel { background: var(--al-surface); }
.al-page-tone-dark .al-hero--split, .al-page-tone-dark .al-hero--banner { background: var(--al-surface); }

/* =============================================================================
   v8.1 — PHONES: header, menu, bottom bar (layout flips happen in the
   "mobile header" switch printed by Theme → Screens, or via html.al-device-phone)
   ============================================================================= */
.al-mobile-bar { display: none; }
html.al-device-phone .al-mobile-bar-bottom .al-mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--al-header-bg); color: var(--al-header-text); border-top: 1px solid color-mix(in srgb, var(--al-header-text) 14%, transparent);
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
html.al-device-phone body.al-mobile-bar-bottom { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
.al-mobile-bar-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 58px; font-size: 11px; color: inherit; }
.al-mobile-bar-btn svg { width: 22px; height: 22px; }
.al-mobile-bar-btn .al-count { top: 6px; right: calc(50% - 22px); }
html.al-device-phone .al-mobile-bar-bottom .al-header-actions .al-search-trigger,
html.al-device-phone .al-mobile-bar-bottom .al-header-actions a[href*="checkout/cart"] { display: none; }
html.al-device-phone .al-mobile-header-logo-left .al-header-row { grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "logo actions toggle" !important; }
html.al-device-phone .al-mobile-header-logo-left .al-logo { justify-self: start; }
html.al-device-phone .al-mobile-header-logo-left .al-mobile-toggle { margin: 0 -8px 0 0; }
.al-mobile-menu-drawer-right.al-mm-mobile #al-nav.al-mm, .al-mm-mobile .al-mobile-menu-drawer-right #al-nav.al-mm { left: auto; right: 0; transform: translateX(102%); }
.al-mm-mobile .al-mobile-menu-drawer-right #al-nav.al-mm.mobile-open { transform: none; }
.al-mm-mobile .al-mobile-menu-fullscreen #al-nav.al-mm { width: 100vw; transform: translateY(-12px); opacity: 0; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.al-mm-mobile .al-mobile-menu-fullscreen #al-nav.al-mm.mobile-open { transform: none; opacity: 1; transition-delay: 0s; }
.al-mm-mobile .al-mobile-menu-fullscreen #al-nav .al-nav-link { font-size: 20px; padding: 16px 20px; }

/* =============================================================================
   v8.1 — DROPDOWNS (open / closed per screen size: Theme → Dropdowns)
   <details> elements; allled.js opens or closes them per screen and marks the
   ones that must stay open on larger screens with .al-static.
   ============================================================================= */
details > summary { cursor: pointer; }
details.al-static > summary { cursor: default; pointer-events: none; }
details.al-static > summary::after { display: none !important; }
.al-footer-col > summary, .al-side-box > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
/* the "rule" heading style makes footer titles inline-block; the dropdown heading must stay a full-width row */
html.al-device-phone .al-footer-col > summary.al-footer-col-title { display: flex; }
.al-footer-col > summary::after, .al-side-box > summary::after { display: block; }
html.al-device-phone .al-section-title-rule .al-footer-col > summary.al-footer-col-title { border-bottom: 0; min-width: 0; padding-bottom: 14px; }
.al-footer-col > summary::-webkit-details-marker, .al-side-box > summary::-webkit-details-marker, .al-filter-panel > summary::-webkit-details-marker, .al-refine > summary::-webkit-details-marker { display: none; }
.al-footer-col > summary::after, .al-side-box > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 4px 4px 12px; transition: transform var(--al-transition); flex: 0 0 auto; }
.al-footer-col[open] > summary::after, .al-side-box[open] > summary::after { transform: rotate(-135deg); margin-bottom: 0; }
html.al-device-phone .al-footer-col { border-bottom: 1px solid var(--al-footer-border); }
html.al-device-phone .al-footer-col > summary { padding: 14px 0; margin: 0; }
html.al-device-phone .al-footer-grid { gap: 0; }
html.al-device-phone .al-footer-col .al-footer-links { padding-bottom: 14px; }
.al-filter-panel > summary, .al-refine > summary { display: none; list-style: none; }
html.al-device-phone .al-filter-panel:not(.al-static) > summary, html.al-device-phone .al-refine:not(.al-static) > summary { display: inline-flex; margin-bottom: 12px; }
html.al-device-phone .al-filter-panel:not(.al-static) > summary::before { content: ''; width: 16px; height: 16px; margin-right: 4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") center/contain no-repeat; }

/* product sections: the mode can change with the screen size */
.al-sections:not([data-mode="tabs"]) > .al-tab-list { display: none; }
.al-sections[data-mode="tabs"] .al-sec-head { display: none; }
.al-sections[data-mode="stacked"] .al-sec-toggle { pointer-events: none; padding: 0; font-family: var(--al-font-display); font-size: 20px; }
.al-sections[data-mode="stacked"] .al-sec-toggle::after { display: none; }
.al-sections[data-mode="stacked"] .al-sec-body { display: block !important; }

/* specification groups */
.al-spec-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; padding: 0; }
.al-spec-toggle::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg); transition: transform var(--al-transition); margin-right: 4px; }
.al-spec-tbody.is-closed .al-spec-toggle::after { transform: rotate(45deg); }
.al-spec-tbody.is-closed .al-spec-row { display: none; }

/* =============================================================================
   v8.1 — MOTION (Theme → Motion). Everything here is skipped for visitors who
   ask for reduced motion (see the block at the end).
   ============================================================================= */
/* logo on page load: html.al-logo-play is set before first paint */
.al-logo { position: relative; }
.al-logo a { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; }
html.al-logo-play .al-logo-anim-fade .al-logo img { animation: al-logo-fade var(--al-logo-dur, 900ms) ease-out var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-drop .al-logo img { animation: al-logo-drop var(--al-logo-dur, 900ms) cubic-bezier(.2,.9,.3,1.2) var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-rise .al-logo img { animation: al-logo-rise var(--al-logo-dur, 900ms) cubic-bezier(.2,.8,.2,1) var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-zoom .al-logo img { animation: al-logo-zoom var(--al-logo-dur, 900ms) cubic-bezier(.2,.9,.3,1.15) var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-blur .al-logo img { animation: al-logo-blur var(--al-logo-dur, 900ms) ease-out var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-glow .al-logo img { animation: al-logo-glow var(--al-logo-dur, 900ms) ease-out var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-flicker .al-logo img { animation: al-logo-flicker var(--al-logo-dur, 900ms) linear var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-sweep .al-logo img { animation: al-logo-fade calc(var(--al-logo-dur, 900ms) * .4) ease-out var(--al-logo-delay, 0ms) both; }
html.al-logo-play .al-logo-anim-sweep .al-logo a::after,
.al-logo-hover-sweep .al-logo a:hover::after {
  content: ''; position: absolute; inset: -10% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%) no-repeat; background-size: 60% 100%;
  mix-blend-mode: screen; animation: al-logo-sweep var(--al-logo-dur, 900ms) ease-in-out var(--al-logo-delay, 0ms) both;
}
.al-logo-hover-sweep .al-logo a:hover::after { animation-delay: 0s; animation-duration: 900ms; }
.al-logo-hover-glow .al-logo img { transition: filter .35s ease; }
.al-logo-hover-glow .al-logo a:hover img { filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 214, 140, .75)); }
.al-logo-hover-lift .al-logo img { transition: transform .25s ease; }
.al-logo-hover-lift .al-logo a:hover img { transform: translateY(-2px) scale(1.02); }
@keyframes al-logo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-logo-drop { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes al-logo-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes al-logo-zoom { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: none; } }
@keyframes al-logo-blur { from { opacity: 0; filter: blur(14px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
@keyframes al-logo-glow { 0% { opacity: .15; filter: brightness(.35); } 55% { opacity: 1; filter: brightness(1.7) drop-shadow(0 0 14px rgba(255, 214, 140, .95)); } 100% { opacity: 1; filter: none; } }
@keyframes al-logo-flicker { 0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: .08; } 15% { opacity: .9; } 18% { opacity: .15; } 30% { opacity: 1; } 33% { opacity: .45; } 37%, 100% { opacity: 1; } }
@keyframes al-logo-sweep { from { background-position: -160% 0; } to { background-position: 260% 0; } }

/* scroll reveal: allled.js adds html.al-reveal-{effect} and data-al-reveal, then .is-in */
html.al-reveal-ready [data-al-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--al-reveal-delay, 0ms); }
html.al-reveal-ready [data-al-reveal]:not(.is-in) { opacity: 0; }
html.al-reveal-rise [data-al-reveal]:not(.is-in) { transform: translateY(28px); }
html.al-reveal-zoom [data-al-reveal]:not(.is-in) { transform: scale(.94); }
html.al-reveal-slide [data-al-reveal]:not(.is-in) { transform: translateX(-36px); }

/* parallax: JS moves [data-al-parallax] with a transform */
[data-al-parallax] { will-change: transform; }
.al-hero[data-parallax="1"] .al-hero-media { inset: -12% 0; position: absolute; height: auto; }
.al-hero--h-auto[data-parallax="1"] .al-hero-media { position: relative; inset: auto; }
.al-hero-media picture, .al-hero-media picture img { display: block; width: 100%; height: 100%; }
.al-hero-media picture img { object-fit: cover; }
.al-hero--h-auto .al-hero-media picture img { height: auto; }

/* hero: video */
.al-hero-media { position: relative; }
.al-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.al-hero-video.is-playing { opacity: 1; }

/* hero: changes between slides */
.al-hero--tr-slide .al-hero-slide { opacity: 1; visibility: visible; transform: translateX(100%); transition: transform .8s cubic-bezier(.7,0,.2,1), visibility 0s linear .8s; }
.al-hero--tr-slide .al-hero-slide.active { transform: none; transition-delay: 0s; }
.al-hero--tr-slide .al-hero-slide.is-leaving { transform: translateX(-100%); visibility: visible; transition: transform .8s cubic-bezier(.7,0,.2,1); }
.al-hero--tr-slide.is-back .al-hero-slide:not(.active):not(.is-leaving) { transform: translateX(-100%); }
.al-hero--tr-slide.is-back .al-hero-slide.is-leaving { transform: translateX(100%); }
.al-hero--tr-zoom .al-hero-slide { transform: scale(1.08); transition: opacity .9s ease, transform 1.2s ease, visibility 0s linear .9s; }
.al-hero--tr-zoom .al-hero-slide.active { transform: none; transition-delay: 0s; }
/* hero: slow zoom (Ken Burns) — html.al-kenburns-on is set by JS for the allowed screens */
html.al-kenburns-on .al-hero--kenburns .al-hero-slide.active .al-hero-media picture img { animation: al-kenburns 14s ease-out both; }
@keyframes al-kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1%, -1%); } }
/* hero: text entrance (plays on each slide change) */
.al-hero-slide.active .al-hero-copy-inner > * { animation-duration: .8s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.al-hero--text-rise .al-hero-slide.active .al-hero-copy-inner > * { animation-name: al-text-rise; }
.al-hero--text-fade .al-hero-slide.active .al-hero-copy-inner > * { animation-name: al-text-fade; }
.al-hero--text-slide .al-hero-slide.active .al-hero-copy-inner > * { animation-name: al-text-slide; }
.al-hero--text-zoom .al-hero-slide.active .al-hero-copy-inner > * { animation-name: al-text-zoom; }
.al-hero--text-stagger .al-hero-slide.active .al-hero-copy-inner > * { animation-name: al-text-rise; }
.al-hero--text-stagger .al-hero-slide.active .al-hero-copy-inner > :nth-child(2) { animation-delay: .18s; }
.al-hero--text-stagger .al-hero-slide.active .al-hero-copy-inner > :nth-child(3) { animation-delay: .36s; }
.al-hero-slide.active .al-hero-copy-inner > * { animation-delay: .15s; }
.al-hero--text-stagger .al-hero-slide.active .al-hero-copy-inner > :first-child { animation-delay: 0s; }
@keyframes al-text-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes al-text-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-text-slide { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes al-text-zoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* carousels: page dots, arrows on hover, peek on phones */
.al-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.al-carousel-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--al-border); transition: width .3s ease, background .3s ease; padding: 0; }
.al-carousel-dot.active { width: 24px; background: var(--al-text); }
@media (hover: hover) {
  .al-carousel-arrows-hover .al-carousel-arrow { opacity: 0; }
  .al-carousel-arrows-hover .al-carousel-wrapper:hover .al-carousel-arrow:not([data-disabled]),
  .al-carousel-arrows-hover .al-carousel-wrapper:focus-within .al-carousel-arrow:not([data-disabled]) { opacity: 1; }
}
.al-carousel-arrows-never .al-carousel-arrow { display: none; }
html.al-device-phone .al-carousel-peek .al-carousel-item { flex-basis: calc((100% - 20px) / max(1, var(--al-carousel-items, 2)) * .86); }
html.al-device-phone .al-carousel-peek .al-carousel-track { padding-right: 24px; scroll-padding-left: 0; }

/* brand strip: moving row */
.al-brands-viewport { position: relative; }
.al-brands--marquee .al-brands-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.al-brands--marquee .al-brands-list { flex-wrap: nowrap; justify-content: flex-start; width: max-content; overflow: visible; animation: al-marquee var(--al-marquee-dur, 40s) linear infinite; }
.al-brands--marquee:hover .al-brands-list, .al-brands--marquee:focus-within .al-brands-list { animation-play-state: paused; }
@keyframes al-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* content blocks: parallax band, counting numbers */
.al-blocks--parallax { position: relative; overflow: hidden; color: #fff; background: #111; min-height: clamp(300px, 40vw, 520px); display: flex; align-items: center; }
.al-blocks--parallax .al-blocks-bg { position: absolute; inset: -15% 0; background: var(--al-block-img) center / cover no-repeat; }
.al-blocks--parallax::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.45); }
.al-blocks--parallax .al-blocks-inner { position: relative; z-index: 2; width: 100%; }
.al-blocks--parallax .al-blocks-head { margin-bottom: 0; }
.al-blocks--parallax .al-blocks-title { font-size: clamp(28px, 3.6vw, 48px); }
.al-stat { display: block; font-family: var(--al-font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.05; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.al-blocks--stats .al-block-text { font-size: 15px; }

/* reduced motion: no animation anywhere in the theme */
@media (prefers-reduced-motion: reduce) {
  html.al-logo-play .al-logo img, html.al-logo-play .al-logo a::after { animation: none !important; }
  .al-logo-hover-sweep .al-logo a:hover::after { animation: none !important; display: none; }
  .al-logo-hover-lift .al-logo a:hover img { transform: none; }
  .al-logo img { transition: none !important; }
  .al-card-style-overlay .al-card:hover .al-card-media img { transform: none; }
  html.al-reveal-ready [data-al-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .al-hero-slide, .al-hero-slide.active .al-hero-copy-inner > *, .al-hero-slide .al-hero-media picture img { animation: none !important; transition: none !important; }
  .al-brands--marquee .al-brands-list { animation: none; }
  .al-brands--marquee .al-brands-viewport { overflow-x: auto; }
  [data-al-parallax] { transform: none !important; }
}

/* =============================================================================
   v8.1 — BADGES (Theme → Badges). Colours per badge come in as --b-bg / --b-fg.
   Shape follows Style → Badges unless Theme → Badges sets one (al-badge-shape-*).
   ============================================================================= */
.al-badges { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.al-badges--top-left { top: 8px; left: 8px; }
.al-badges--top-right { top: 8px; right: 8px; align-items: flex-end; }
.al-badges--bottom-left { bottom: 8px; left: 8px; }
.al-badges--bottom-right { bottom: 8px; right: 8px; align-items: flex-end; }
.al-card:has(.al-card-wish) .al-badges--top-right { top: 48px; }
.al-badges .al-badge { position: static; display: inline-block; white-space: nowrap; background: var(--b-bg, var(--al-text)); color: var(--b-fg, var(--al-bg)); }
.al-badges--lg { top: 14px; left: 14px; gap: 6px; }
.al-badges--lg .al-badge { font-size: 12.5px; padding: 5px 10px; }
.al-badge--sale { --b-bg-d: var(--al-accent); background: var(--b-bg, var(--al-accent)); color: var(--b-fg, #fff); }
.al-badge--new { background: var(--b-bg, var(--al-primary)); color: var(--b-fg, var(--al-primary-text)); }
.al-badge--best { background: var(--b-bg, #E8A317); color: var(--b-fg, #1B1300); }
.al-badge--low { background: var(--b-bg, #FFF1D6); color: var(--b-fg, #7A4B00); }
.al-badge--out { background: var(--b-bg, #5F6670); color: var(--b-fg, #fff); }
.al-badge--soon { background: var(--b-bg, #2F5BBE); color: var(--b-fg, #fff); }
.al-badge--custom { background: var(--b-bg, var(--al-text)); color: var(--b-fg, var(--al-bg)); }
body.al-badge-shape-square .al-badges .al-badge { border-radius: 2px; }
body.al-badge-shape-pill .al-badges .al-badge { border-radius: 999px; padding-left: 10px; padding-right: 10px; }
body.al-badge-shape-tag .al-badges .al-badge { border-radius: 2px 10px 10px 2px; padding-right: 12px; }
/* ribbon: the first badge becomes a diagonal band across the corner */
body.al-badge-shape-ribbon .al-card-media, body.al-badge-shape-ribbon .al-gallery-main { overflow: hidden; }
body.al-badge-shape-ribbon .al-badges--top-left, body.al-badge-shape-ribbon .al-badges--top-right,
body.al-badge-shape-ribbon .al-badges--bottom-left, body.al-badge-shape-ribbon .al-badges--bottom-right,
body.al-badge-shape-ribbon .al-card:has(.al-card-wish) .al-badges--top-right { top: 0; left: 0; right: 0; bottom: 0; }
body.al-badge-shape-ribbon .al-badges .al-badge:first-child { position: absolute; top: 18px; width: 150px; text-align: center; border-radius: 0; padding: 5px 0; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
body.al-badge-shape-ribbon .al-badges--top-left .al-badge:first-child, body.al-badge-shape-ribbon .al-badges--bottom-left .al-badge:first-child { left: -38px; transform: rotate(-45deg); }
body.al-badge-shape-ribbon .al-badges--top-right .al-badge:first-child, body.al-badge-shape-ribbon .al-badges--bottom-right .al-badge:first-child { right: -38px; transform: rotate(45deg); }
body.al-badge-shape-ribbon .al-badges .al-badge:not(:first-child) { display: none; }
/* bottom corners: the band sits 18px above the bottom edge, mirrored */
body.al-badge-shape-ribbon .al-badges--bottom-left .al-badge:first-child, body.al-badge-shape-ribbon .al-badges--bottom-right .al-badge:first-child { top: auto; bottom: 18px; }
body.al-badge-shape-ribbon .al-badges--bottom-left .al-badge:first-child { transform: rotate(45deg); }
body.al-badge-shape-ribbon .al-badges--bottom-right .al-badge:first-child { transform: rotate(-45deg); }
.al-preset-clean .al-block-icon { color: var(--al-primary); }   /* Clean Retail: green icons; red stays for sale prices */
.al-header-layout-centered.al-search-style-center .al-header-search { justify-self: start; }   /* centred logo owns the middle */
/* centred search: equal columns either side so the bar sits in the middle of the page, not of the gap
   (desktop menu only; phones and the drawer menu keep their own header layout) */
html:not(.al-mm-mobile) .al-search-style-center.al-header-layout-classic .al-header-row,
html:not(.al-mm-mobile) .al-search-style-center.al-header-layout-two-row .al-header-row { grid-template-columns: auto minmax(auto, 1fr) minmax(240px, 560px) minmax(auto, 1fr); }

/* v8.2 text icons + icon rows (Theme → Products → Icons) */
.al-icon-text { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1.1; box-sizing: border-box; }
.al-card-icons, .al-pdp-icons { gap: var(--al-icon-gap, 6px); padding-left: var(--al-icon-indent, 0); align-items: center; }
.al-icon-align-left .al-card-icons, .al-icon-align-left .al-pdp-icons { justify-content: flex-start; }
.al-icon-align-center .al-card-icons, .al-icon-align-center .al-pdp-icons { justify-content: center; }
.al-icon-align-right .al-card-icons, .al-icon-align-right .al-pdp-icons { justify-content: flex-end; padding-left: 0; padding-right: var(--al-icon-indent, 0); }

/* =============================================================================
   v8.2 — SPECIFIER AREA (Theme → Specifiers). Pages: extension/module/allled_spec_*.twig
   ============================================================================= */
.al-sp { max-width: var(--al-container, 1240px); margin: 0 auto 60px; }
.al-sp--narrow { max-width: 920px; }
.al-sp-flash { margin: 8px 0 18px; }
.al-sp-small { font-size: 13px; color: var(--al-muted); }
.al-sp-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 18px; align-items: start; }
.al-sp-aside { padding: 28px; border-radius: var(--al-radius-lg, 10px); background: var(--al-surface); }
.al-sp-aside h2 { font-size: 22px; margin: 0 0 10px; }
.al-sp-aside p { color: var(--al-muted); line-height: 1.6; }
.al-sp-single { max-width: 460px; margin: 18px auto; }
.al-sp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.al-sp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin-top: 16px; }
.al-sp-span2 { grid-column: span 2; } .al-sp-span3 { grid-column: 1 / -1; }
.al-sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.al-sp-roles { border: 0; padding: 0; margin: 0 0 18px; }
.al-sp-roles .al-label { margin-bottom: 8px; }
.al-sp-role { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 9px 14px; border: 1px solid var(--al-border); border-radius: var(--al-btn-radius, 6px); cursor: pointer; font-weight: 500; }
.al-sp-role:has(input:checked) { border-color: var(--al-text); box-shadow: inset 0 0 0 1px var(--al-text); }
.al-sp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 14px 0 6px; }
.al-sp-head .al-page-title { margin: 0 0 6px; }
.al-sp-who { margin: 0; color: var(--al-muted); font-size: 14px; }
.al-sp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.al-sp-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--al-surface); color: var(--al-text); font-size: 12px; font-weight: 600; }
.al-sp-role-note { color: var(--al-muted); font-size: 14px; margin: 6px 0 18px; }
.al-sp-new { margin: 8px 0 26px; }
.al-sp-new > summary { list-style: none; display: inline-flex; cursor: pointer; }
.al-sp-new > summary::-webkit-details-marker { display: none; }
.al-sp-new[open] > summary { margin-bottom: 4px; }
.al-sp-new form { padding: 20px; border: 1px solid var(--al-border); border-radius: var(--al-radius-lg, 10px); }
.al-sp-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.al-sp-project { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--al-border); border-radius: var(--al-radius-lg, 10px); color: var(--al-text); background: var(--al-bg); transition: border-color var(--al-transition), box-shadow var(--al-transition); }
.al-sp-project:hover { border-color: var(--al-text); text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.al-sp-project strong { font-size: 18px; font-family: var(--al-font-display); }
.al-sp-project-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.al-sp-shared { font-size: 12px; color: var(--al-muted); }
.al-sp-meta, .al-sp-stats { font-size: 13px; color: var(--al-muted); }
.al-sp-empty { padding: 34px; text-align: center; border: 1px dashed var(--al-border); border-radius: var(--al-radius-lg, 10px); }
.al-sp-empty p { max-width: 560px; margin: 0 auto 16px; color: var(--al-muted); }
.al-sp-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.al-sp-bar .al-sp-role-note { margin: 0; }
.al-sp-views { display: inline-flex; border: 1px solid var(--al-border); border-radius: 999px; padding: 3px; }
.al-sp-views a { padding: 5px 14px; border-radius: 999px; font-size: 13px; color: var(--al-muted); }
.al-sp-views a.on { background: var(--al-text); color: var(--al-bg); }
.al-sp-area { margin: 22px 0; }
.al-sp-area-title { font-size: 17px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.al-sp-area-title span { font-size: 12px; font-weight: 600; color: var(--al-muted); background: var(--al-surface); border-radius: 999px; padding: 1px 8px; }
.al-sp-scroll { overflow-x: auto; }
.al-sp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.al-sp-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--al-muted); padding: 8px 10px; border-bottom: 1px solid var(--al-border); white-space: nowrap; }
.al-sp-table td { padding: 8px 10px; border-bottom: 1px solid var(--al-border-light); vertical-align: middle; }
.al-sp-table .num { text-align: right; width: 90px; }
.al-sp-table .img { width: 64px; } .al-sp-table .img img { width: 56px; height: 56px; object-fit: contain; background: var(--al-img-bg, #fff); border-radius: 4px; }
.al-sp-table tfoot th { color: var(--al-text); border-top: 2px solid var(--al-text); border-bottom: 0; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; }
.al-sp-in { min-height: 34px; padding: 5px 8px; font-size: 13.5px; }
.al-sp-qty { width: 76px; text-align: right; }
.al-sp-notes { min-width: 180px; resize: vertical; }
.al-sp-x { width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--al-muted); }
.al-sp-x:hover { background: var(--al-surface); color: var(--al-text); }
.al-sp-docs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.al-sp-savebar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; background: var(--al-bg); border-top: 1px solid var(--al-border); z-index: 5; }
.al-sp-summary { margin: 10px 0 14px; font-size: 14px; color: var(--al-muted); }
.al-sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.al-sp-card { border: 1px solid var(--al-border-light); border-radius: var(--al-radius-lg, 10px); overflow: hidden; background: var(--al-bg); }
.al-sp-card-img { display: block; aspect-ratio: 1; background: var(--al-img-bg, #fff); }
.al-sp-card-img img { width: 100%; height: 100%; object-fit: contain; }
.al-sp-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; font-size: 13.5px; }
.al-sp-card-body p { margin: 4px 0 0; color: var(--al-muted); }
.al-sp-panels { margin-top: 30px; display: grid; gap: 12px; }
.al-sp-panel { border: 1px solid var(--al-border); border-radius: var(--al-radius-lg, 10px); padding: 0 18px; }
.al-sp-panel > summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.al-sp-panel[open] { padding-bottom: 18px; }
.al-sp-team { list-style: none; margin: 0 0 14px; padding: 0; }
.al-sp-team li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--al-border-light); }
.al-sp-team li > span:first-child { flex: 1 1 auto; }
.al-sp-team form { margin: 0; }
.al-sp-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.al-sp-inline .al-input { max-width: 320px; }
.al-sp-danger { color: #B42318; border-color: currentColor; }
@media (max-width: 760px) {
  .al-sp-auth, .al-sp-grid2, .al-sp-grid3 { grid-template-columns: minmax(0, 1fr); }
  .al-sp-span2, .al-sp-span3 { grid-column: auto; }
}
@media print {
  .al-masthead, .al-topbar, #al-footer, .al-mobile-bar, .al-breadcrumb, .al-sp-actions, .al-sp-views, .al-sp-panels, .al-sp-savebar, .al-sp-x, .al-sp-flash { display: none !important; }
  .al-sp-in { border: 0; padding: 0; background: none; }
}

/* "Add to project" on the product page */
.al-sp-add { margin: 16px 0; padding: 16px; border: 1px solid var(--al-border); border-radius: var(--al-radius-lg, 10px); }
.al-sp-add-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; margin-bottom: 10px; }
.al-sp-add-title a { font-size: 13px; font-weight: 400; }
.al-sp-add-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 80px auto; gap: 8px; align-items: center; }
.al-sp-add-row .al-input, .al-sp-add-row .al-select { min-height: 40px; }
.al-sp-add-new { grid-column: 1 / -1; display: none; }
.al-sp-add.is-new .al-sp-add-new { display: block; }
.al-sp-add-msg { margin-top: 8px; font-size: 13px; }
.al-sp-add-msg.err { color: #B42318; }
.al-sp-login-link { display: inline-block; margin: 12px 0; font-size: 14px; }
@media (max-width: 560px) { .al-sp-add-row { grid-template-columns: minmax(0, 1fr) 80px; } .al-sp-add-row > :first-child, .al-sp-add-row > button { grid-column: 1 / -1; } }
.al-footer-spec { color: inherit; opacity: .85; font-size: 13px; } .al-footer-spec:hover { opacity: 1; }

/* specifier table: same column widths in every area */
.al-sp-area .al-sp-table { table-layout: fixed; min-width: 760px; }
.al-sp-table .c-img { width: 72px; } .al-sp-table .c-model { width: 150px; } .al-sp-table .c-area { width: 19%; }
.al-sp-table .c-qty { width: 92px; } .al-sp-table .c-status { width: 140px; } .al-sp-table .c-docs { width: 150px; }
.al-sp-table .c-notes { width: 26%; } .al-sp-table .c-x { width: 44px; }
.al-sp-table .al-sp-in { width: 100%; }
.al-sp-table .al-sp-notes { min-height: 36px; height: 36px; }
.al-sp-table .al-sp-qty { width: 76px; }

/* v8.3 product page: quote positions, locked files */
.al-quote-top { margin: 4px 0 16px; }
.al-quote-below { margin-top: 14px; }
.al-quote-below .al-quote-btn, .al-quote-top .al-quote-btn { width: 100%; justify-content: center; }
.al-file-locked { color: var(--al-text); }
.al-file-locked::before { content: ''; display: inline-block; width: 9px; height: 11px; margin-right: 8px; vertical-align: -1px; background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M1.5 5V3.5a3 3 0 0 1 6 0V5H8a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 0h4V3.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M1.5 5V3.5a3 3 0 0 1 6 0V5H8a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 0h4V3.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") no-repeat center / contain; }
.al-files-note { margin: 10px 0 0; font-size: 13.5px; color: var(--al-muted); }

/* not found / empty lists (error/not_found.twig) */
.al-notfound { text-align: center; padding: 80px 20px 100px; max-width: 560px; margin: 0 auto; }
.al-notfound--empty { padding: 60px 20px 80px; }
.al-notfound-code { font-family: var(--al-font-display); font-size: 120px; font-weight: 900; letter-spacing: -4px; line-height: 1; color: var(--al-border); margin-bottom: 8px; }
.al-notfound-title { font-family: var(--al-font-display); font-size: 28px; margin-bottom: 12px; }
.al-notfound-text { color: var(--al-muted); line-height: 1.7; margin: 0 auto 28px; }
.al-notfound-search { max-width: 440px; margin: 0 auto 28px; }
.al-notfound-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── 8.3.1 Tabs from other extensions (e.g. ALL Public Downloads) ──────────
   They are written for Bootstrap 3, whose stylesheet this theme does not load,
   so the few Bootstrap pieces they use are given here, scoped to their pane. */
.al-ext-tabs[hidden] { display: none !important; }
.al-ext-pane { display: block; font-size: 14px; }
.al-sec-body > .al-ext-pane:not(:first-child) { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--al-border, #e5e5e5); }
.al-ext-pane .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; min-height: 34px; font: inherit; font-size: 13px; line-height: 1.3; border: 1px solid transparent; border-radius: var(--al-radius, 4px); background: var(--al-primary, #111); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.al-ext-pane .btn:hover { filter: brightness(.92); }
.al-ext-pane .btn:focus-visible { outline: 2px solid var(--al-accent, #1a73e8); outline-offset: 2px; }
.al-ext-pane .btn-default { background: #fff; color: #222; border-color: #c9ced3; }
.al-ext-pane .btn-sm, .al-ext-pane .btn-xs { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.al-ext-pane .btn-block { display: flex; width: 100%; }
.al-ext-pane .btn-group { display: inline-flex; gap: 4px; }
.al-ext-pane .badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #6b7280; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.al-ext-pane .table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.al-ext-pane .table th, .al-ext-pane .table td { padding: 8px 10px; border-top: 1px solid var(--al-border, #e5e5e5); text-align: left; vertical-align: middle; }
.al-ext-pane .table-responsive { overflow-x: auto; }
.al-ext-pane .text-right { text-align: right; } .al-ext-pane .text-center { text-align: center; }
.al-ext-pane .text-muted { color: var(--al-muted, #6b7280); }
.al-ext-pane .pull-right { float: right; } .al-ext-pane .pull-left { float: left; }
.al-ext-pane .clearfix::after { content: ''; display: table; clear: both; }
.al-ext-pane .hidden, .al-ext-pane .hide { display: none !important; }
.al-ext-pane .well, .al-ext-pane .alert { padding: 10px 14px; border: 1px solid var(--al-border, #e5e5e5); border-radius: var(--al-radius, 4px); background: #f7f7f8; margin-bottom: 12px; }
.al-ext-pane .form-control { width: 100%; padding: 6px 10px; border: 1px solid #c9ced3; border-radius: var(--al-radius, 4px); font: inherit; }
.al-ext-pane img { max-width: 100%; height: auto; }