/* Дизайнът на ANLORADELUX, взет дословно от handoff v2.
 *
 * НЕ СЕ РЕДАКТИРА НА РЪКА — произвежда се с tools/vzemi-dizajn.py.
 *
 * Всяка променлива носи представка `adl-`, защото двата набора делят имена с
 * различни стойности: `--space-8` е 32 px при дизайна и 8 px при темата.
 * Без преименуването зареждането на този файл разваля тихо целия сайт.
 */

/* tokens/base.css */
/* Anloradelux base layer — resets and element defaults.
   Serif headings (Playfair), sans body (Onest), left-aligned by default. */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--adl-surface-page);
  color: var(--adl-text-body);
  font-family: var(--adl-font-text);
  font-size: var(--adl-type-body-size);
  line-height: var(--adl-type-body-leading);
  font-weight: var(--adl-fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--adl-font-display);
  color: var(--adl-text-strong);
  font-weight: var(--adl-type-heading-weight);
  line-height: var(--adl-type-heading-leading);
  letter-spacing: var(--adl-tracking-display);
  text-wrap: balance;
}
h1 { font-size: var(--adl-text-5xl); line-height: var(--adl-leading-tight) }
h2 { font-size: var(--adl-text-3xl) }
h3 { font-size: var(--adl-text-xl) }
/* h4 steps down into the sans — it is a UI label, not a display line */
h4 { margin: 0; font-family: var(--adl-font-text); font-size: var(--adl-text-md); font-weight: var(--adl-fw-semibold); color: var(--adl-text-strong); line-height: var(--adl-leading-normal) }
p { margin: 0; text-wrap: pretty }
a { color: var(--adl-text-accent); text-decoration: none; transition: var(--adl-transition-color) }
a:hover { color: var(--adl-purple-500); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px }
a:active { color: var(--adl-purple-800) }
strong, b { font-weight: var(--adl-fw-semibold); color: var(--adl-text-strong) }
small { font-size: var(--adl-text-xs) }
img, svg, video { max-width: 100%; display: block }
hr { border: 0; border-top: var(--adl-border-hairline) solid var(--adl-border-subtle); margin: var(--adl-space-10) 0 }
code, kbd { font-family: var(--adl-font-mono); font-size: 0.92em }
figure { margin: 0 }
ul, ol { margin: 0; padding-left: 1.1em }
li::marker { color: var(--adl-neutral-400) }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: var(--adl-focus-ring-width) solid var(--adl-border-focus); outline-offset: var(--adl-focus-ring-offset); border-radius: var(--adl-radius-xs) }
::selection { background: var(--adl-purple-100); color: var(--adl-purple-900) }

/* Utilities */
.adl-container { width: 100%; max-width: var(--adl-container-max); margin-inline: auto; padding-inline: var(--adl-gutter-mobile) }
@media (min-width: 900px) { .adl-container { padding-inline: var(--adl-gutter-desktop) } }
.adl-measure { max-width: var(--adl-container-narrow) }
.adl-eyebrow { font-family: var(--adl-font-text); font-size: var(--adl-type-eyebrow-size); font-weight: var(--adl-type-eyebrow-weight); letter-spacing: var(--adl-type-eyebrow-tracking); text-transform: uppercase; color: var(--adl-text-muted) }
.adl-price { font-family: var(--adl-font-display); font-size: var(--adl-type-price-size); font-weight: var(--adl-type-price-weight); color: var(--adl-text-price); letter-spacing: var(--adl-tracking-tight) }
.adl-rule { height: 1px; background: var(--adl-border-subtle) }


/* tokens/colors.css */
/* Anloradelux colour system — the EVOLVED palette.

   Base is white + a WARM light neutral (the old site's #F0F0F0 was cool gray;
   warming it is what makes the same layout read premium and handmade rather
   than generic e-commerce). Purple is the brand accent, held back for CTAs,
   links and small accents — never a background wash, never a card outline by
   default. The product artwork supplies all the colour richness. */
:root {
  /* ── Purple — the brand accent. 600 is the brand purple, unchanged. ── */
  --adl-purple-50:  #F7F3FB;
  --adl-purple-100: #EEE6F6;
  --adl-purple-200: #DCCDEC;
  --adl-purple-300: #C2A9DC;
  --adl-purple-400: #A17FC7;
  --adl-purple-500: #8A63B6;
  --adl-purple-600: #7B52AB;  /* CTAs, links, active states */
  --adl-purple-700: #66438E;
  --adl-purple-800: #513672;
  --adl-purple-900: #33234A;

  /* ── Warm neutrals. Names kept from the baseline; values warmed. ──
     100 = section band · 150 = card fill / image mat · 200 = hairline */
  --adl-white:       #FFFFFF;
  --adl-neutral-50:  #FCFBFA;
  --adl-neutral-100: #F7F5F2;
  --adl-neutral-150: #F1EEEA;
  --adl-neutral-200: #E6E2DC;
  --adl-neutral-300: #D6D1C9;
  --adl-neutral-400: #A8A29A;
  --adl-neutral-500: #857F76;
  --adl-neutral-600: #6B655D;
  --adl-neutral-700: #4A453F;
  --adl-neutral-800: #2E2A26;
  --adl-neutral-900: #1C1917;

  /* Readable aliases for the same ramp */
  --adl-paper-0:   var(--adl-white);
  --adl-paper-50:  var(--adl-neutral-50);
  --adl-paper-100: var(--adl-neutral-100);
  --adl-paper-150: var(--adl-neutral-150);
  --adl-line-200:  var(--adl-neutral-200);
  --adl-line-300:  var(--adl-neutral-300);
  --adl-ink-400:   var(--adl-neutral-400);
  --adl-ink-600:   var(--adl-neutral-600);
  --adl-ink-900:   var(--adl-neutral-900);

  /* ── Brand incidentals ── */
  --adl-logo-ink:   #2E2A26;
  --adl-strip-text: var(--adl-neutral-500);

  /* ── Semantic — warmed to sit with the neutral base ── */
  --adl-success-500: #3F7D52;
  --adl-success-100: #EAF2EC;
  --adl-success-700: #2F5E3E;
  --adl-warning-500: #B07D2A;
  --adl-warning-100: #FBF2E4;
  --adl-warning-700: #855C1C;
  --adl-danger-500:  #B4453C;
  --adl-danger-100:  #F9EBE9;
  --adl-danger-700:  #8C332C;
  --adl-info-tint:   #EDF2F4;

  /* ── Aliases: text ── */
  --adl-text-strong:    var(--adl-neutral-900);
  --adl-text-body:      var(--adl-neutral-600);
  /* Дизайнът дава neutral-500 (#857F76), но той е 3,6:1 върху кремавото и
     3,97:1 върху бяло - пада на WCAG AA за дребния шрифт, за който се ползва
     (лентата горе, броячите, подписите). Същата стъпка като в koja-anloradelux.css:
     #6B655D дава 5,3:1 върху кремаво и 5,8:1 върху бяло. Разликата не се вижда. */
  --adl-text-muted:     #6B655D;
  --adl-text-subtle:    var(--adl-neutral-400);
  --adl-text-accent:    var(--adl-purple-600);
  --adl-text-on-accent: var(--adl-white);
  --adl-text-price:     var(--adl-neutral-900);
  --adl-text-sale:      var(--adl-danger-500);

  /* ── Aliases: surface ── */
  --adl-surface-page:    var(--adl-white);
  --adl-surface-band:    var(--adl-neutral-100);
  --adl-surface-card:    var(--adl-white);
  --adl-surface-panel:   var(--adl-neutral-100);
  --adl-surface-media:   var(--adl-neutral-150);
  --adl-surface-accent:  var(--adl-purple-50);
  --adl-surface-info:    var(--adl-info-tint);
  --adl-surface-inverse: var(--adl-neutral-900);

  /* ── Aliases: border ── */
  --adl-border-subtle:  var(--adl-neutral-200);
  --adl-border-default: var(--adl-neutral-300);
  --adl-border-accent:  var(--adl-purple-300);
  --adl-border-focus:   var(--adl-purple-600);

  /* ── Aliases: interactive ── */
  --adl-action-primary:        var(--adl-purple-600);
  --adl-action-primary-hover:  var(--adl-purple-700);
  --adl-action-primary-active: var(--adl-purple-800);
  --adl-action-quiet-hover:    var(--adl-purple-50);
  --adl-action-disabled-bg:    var(--adl-neutral-150);
  --adl-action-disabled-text:  var(--adl-neutral-400);

  --adl-scrim: rgba(28, 25, 23, 0.44);
}


/* tokens/elevation.css */
/* Anloradelux elevation.
   The storefront is almost entirely FLAT: structure comes from the purple
   hairline and the gray card fill, not from shadows. Shadows appear only on
   things that genuinely float — the "Обади се" action, the sticky buy bar,
   dropdowns and modals. Never put a shadow on a resting card. */
:root {
  --adl-shadow-none: none;
  --adl-shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.05);
  --adl-shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.07);
  --adl-shadow-md: 0 4px 14px rgba(26, 26, 26, 0.08);
  --adl-shadow-lg: 0 10px 30px rgba(26, 26, 26, 0.11);
  --adl-shadow-xl: 0 20px 50px rgba(26, 26, 26, 0.15);
  --adl-shadow-accent: 0 5px 16px rgba(123, 82, 171, 0.30);

  --adl-elevation-card: var(--adl-shadow-none);
  --adl-elevation-card-hover: var(--adl-shadow-md);
  --adl-elevation-sticky: var(--adl-shadow-sm);
  --adl-elevation-dropdown: var(--adl-shadow-lg);
  --adl-elevation-dialog: var(--adl-shadow-xl);
  --adl-elevation-fab: var(--adl-shadow-accent);
}


/* tokens/fonts.css */
/* Anloradelux webfonts — the EVOLVED system.

   Two families, both with full Cyrillic (the storefront is Bulgarian):

   · Playfair Display — high-contrast Didone. Chosen because the BRAND'S OWN
     LOGO is a thin Didone serif ("ANLORA"), so this is the brand's existing
     premium signal, promoted from the mark into the typography.
   · Onest — modern warm-geometric sans for body, UI, buttons and prices.
     Neutral without being cold; excellent Cyrillic.

   RETIRED: Comfortaa, which the current storefront uses for everything. It is
   the single most dated element of the old design — blobby at body sizes and
   fighting the elegance of the mark. Legacy values are documented in
   guidelines/legacy-baseline.card.html and readme.md, not shipped here.

   The brush script in the logo is not a webfont. Never retype the logo —
   use assets/logo-anloradelux.svg (or -mono.svg on dark). */
/* Шрифтовете са локални - виж @font-face в koja-anloradelux.css.
   Тегленето от fonts.googleapis.com праща IP на посетителя в трета
   държава без съгласие, а @import блокира рендирането. */


/* tokens/motion.css */
/* Anloradelux motion — calm and short. Nothing bounces; nothing springs.
   Everything is a fade or a small lift. Max travel on hover is 2px. */
:root {
  --adl-dur-instant: 80ms; /* @kind other */
  --adl-dur-fast: 150ms; /* @kind other */
  --adl-dur-base: 220ms; /* @kind other */
  --adl-dur-slow: 360ms; /* @kind other */
  --adl-dur-reveal: 640ms; /* @kind other */

  --adl-ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1); /* @kind other */
  --adl-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --adl-ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  --adl-transition-color: color var(--adl-dur-fast) var(--adl-ease-standard),
                      background-color var(--adl-dur-fast) var(--adl-ease-standard),
                      border-color var(--adl-dur-fast) var(--adl-ease-standard); /* @kind other */
  --adl-transition-lift: transform var(--adl-dur-base) var(--adl-ease-out),
                     box-shadow var(--adl-dur-base) var(--adl-ease-out); /* @kind other */
  --adl-transition-fade: opacity var(--adl-dur-base) var(--adl-ease-standard); /* @kind other */

  --adl-hover-lift: -2px; /* @kind other */
  --adl-press-scale: 0.985; /* @kind other */
  --adl-media-zoom: 1.035; /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --adl-dur-fast: 1ms; /* @kind other */
    --adl-dur-base: 1ms; /* @kind other */
    --adl-dur-slow: 1ms; /* @kind other */
    --adl-dur-reveal: 1ms; /* @kind other */
    --adl-hover-lift: 0px;
    --adl-press-scale: 1; /* @kind other */
    --adl-media-zoom: 1; /* @kind other */
  }
}


/* tokens/radius.css */
/* Anloradelux corner radii — the EVOLVED scale.
   Softer than the baseline (buttons 8 not 4, cards 12 not 10). Nothing is
   sharp; nothing is a capsule except chips and the floating call action. */
:root {
  --adl-radius-xs: 4px;
  --adl-radius-sm: 8px;   /* buttons, inputs */
  --adl-radius-md: 12px;  /* cards, media */
  --adl-radius-lg: 16px;  /* panels */
  --adl-radius-xl: 24px;  /* sheets, modals */
  --adl-radius-2xl: 32px;
  --adl-radius-pill: 999px;

  --adl-radius-control: var(--adl-radius-sm);
  --adl-radius-card: var(--adl-radius-md);
  --adl-radius-media: var(--adl-radius-md);
  --adl-radius-panel: var(--adl-radius-lg);
  --adl-radius-sheet: var(--adl-radius-xl);
  --adl-radius-chip: var(--adl-radius-pill);
  --adl-radius-fab: var(--adl-radius-pill);

  --adl-border-hairline: 1px;
  --adl-border-emphasis: 1.5px;
  --adl-focus-ring-width: 2px;
  --adl-focus-ring-offset: 2px;
}


/* tokens/spacing.css */
/* Anloradelux spacing — 4px base.
   Generous whitespace is a brand rule, not a preference: the evolution's
   single biggest change from the baseline is section rhythm, which starts at
   112px on desktop and never drops below 72px. */
:root {
  --adl-space-0: 0px;
  --adl-space-1: 4px;
  --adl-space-2: 8px;
  --adl-space-3: 12px;
  --adl-space-4: 16px;
  --adl-space-5: 20px;
  --adl-space-6: 24px;
  --adl-space-8: 32px;
  --adl-space-10: 40px;
  --adl-space-12: 48px;
  --adl-space-14: 56px;
  --adl-space-16: 64px;
  --adl-space-18: 72px;
  --adl-space-20: 80px;
  --adl-space-24: 96px;
  --adl-space-28: 112px;
  --adl-space-32: 128px;
  --adl-space-40: 160px;

  /* Layout */
  --adl-container-max: 1280px;
  --adl-container-narrow: 680px;   /* long-form measure */
  --adl-container-wide: 1520px;
  --adl-gutter-mobile: var(--adl-space-5);
  --adl-gutter-desktop: var(--adl-space-12);

  --adl-section-y-sm: var(--adl-space-18);
  --adl-section-y: var(--adl-space-28);
  --adl-section-y-lg: var(--adl-space-40);

  --adl-grid-gap: var(--adl-space-8);
  --adl-grid-gap-tight: var(--adl-space-5);

  --adl-header-h: 80px;
  --adl-control-h-sm: 36px;
  --adl-control-h: 48px;
  --adl-control-h-lg: 56px;
}


/* tokens/typography.css */
/* Anloradelux typography — the EVOLVED system.

   Playfair Display (serif) carries every heading and price; Onest (sans)
   carries body, UI and labels. That split is the whole hierarchy — there is
   no third voice and no weight-soup.

   Rules the old site broke and this one keeps:
   · Headings are LEFT-aligned by default. Centre only a true section opener.
   · No two-tone purple/black headings. Emphasis comes from size, not colour.
   · Buttons are sentence case, not shouty uppercase.
   · Letterspacing is reserved for small uppercase labels. */
:root {
  /* Резервните семейства са с изравнени метрики (size-adjust / ascent /
     descent, сметнати от самите woff2 файлове в main.css): докато уеб
     шрифтът пристигне, текстът заема същото място и смяната не размества
     нищо. Без тях героят даваше CLS 0,044 само от смяната на шрифта. */
  --adl-font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --adl-font-text: Onest, "Onest Fallback", "Helvetica Neue", Arial, sans-serif;
  /* legacy aliases so components can say either */
  --adl-font-sans: var(--adl-font-text);
  --adl-font-core: var(--adl-font-text);
  --adl-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --adl-fw-light: 300; /* @kind font */
  --adl-fw-regular: 400; /* @kind font */
  --adl-fw-medium: 500; /* @kind font */
  --adl-fw-semibold: 600; /* @kind font */
  --adl-fw-bold: 700; /* @kind font */

  /* Type scale — 1.22 ratio */
  --adl-text-2xs: 11px;
  --adl-text-xs:  12px;
  --adl-text-sm:  14px;
  --adl-text-md:  16px;
  --adl-text-lg:  18px;
  --adl-text-xl:  22px;
  --adl-text-2xl: 27px;
  --adl-text-3xl: 34px;
  --adl-text-4xl: 42px;
  --adl-text-5xl: 54px;
  --adl-text-6xl: 68px;
  --adl-text-7xl: 84px;

  --adl-leading-tight: 1.06;
  --adl-leading-snug: 1.18;
  --adl-leading-normal: 1.45;
  --adl-leading-relaxed: 1.62;

  --adl-tracking-label: 0.14em;   /* small uppercase labels */
  --adl-tracking-display: -0.015em; /* large serif wants to close up */
  --adl-tracking-tight: -0.01em;
  --adl-tracking-normal: 0;

  /* Semantic roles */
  --adl-type-heading-family: var(--adl-font-display);
  --adl-type-heading-weight: var(--adl-fw-regular);
  --adl-type-heading-leading: var(--adl-leading-snug);

  --adl-type-hero-size: var(--adl-text-6xl);
  --adl-type-section-size: var(--adl-text-4xl);
  --adl-type-page-title-size: var(--adl-text-3xl);
  --adl-type-card-label-size: var(--adl-text-lg);

  --adl-type-eyebrow-size: var(--adl-text-xs);
  --adl-type-eyebrow-tracking: var(--adl-tracking-label);
  --adl-type-eyebrow-weight: var(--adl-fw-semibold);

  --adl-type-body-size: var(--adl-text-md);
  --adl-type-body-leading: var(--adl-leading-relaxed);

  --adl-type-button-size: var(--adl-text-sm);
  --adl-type-button-weight: var(--adl-fw-semibold);
  --adl-type-button-tracking: 0.005em;
  --adl-type-button-case: none;

  /* Prices are euro-only: "10,23 €" — comma decimal, space before €.
     Set in the DISPLAY serif: it is the one number that should feel considered. */
  --adl-type-price-family: var(--adl-font-display);
  --adl-type-price-size: var(--adl-text-2xl);
  --adl-type-price-weight: var(--adl-fw-medium);
}


/* components/core/core.css */
/* Anloradelux · core primitives — the EVOLVED system.
   Flat surfaces, warm hairlines, sentence-case buttons, soft radii.
   Shadows appear only on things that genuinely float. */

/* Button — sentence case, semibold sans. Hover darkens; press shrinks 1.5%. */
.adl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--adl-space-2);font-family:var(--adl-font-text);font-weight:var(--adl-type-button-weight);text-transform:var(--adl-type-button-case);letter-spacing:var(--adl-type-button-tracking);border:var(--adl-border-hairline) solid transparent;border-radius:var(--adl-radius-control);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--adl-transition-color),transform var(--adl-dur-instant) var(--adl-ease-standard)}
.adl-btn:hover{text-decoration:none}
.adl-btn:active{transform:scale(var(--adl-press-scale))}
.adl-btn--sm{height:var(--adl-control-h-sm);padding:0 var(--adl-space-4);font-size:var(--adl-text-xs)}
.adl-btn--md{height:var(--adl-control-h);padding:0 var(--adl-space-6);font-size:var(--adl-type-button-size)}
.adl-btn--lg{height:var(--adl-control-h-lg);padding:0 var(--adl-space-10);font-size:var(--adl-text-md)}
.adl-btn--block{width:100%}
.adl-btn--primary{background:var(--adl-action-primary);color:var(--adl-text-on-accent)}
.adl-btn--adl-primary:hover{background:var(--adl-action-primary-hover);color:var(--adl-text-on-accent)}
.adl-btn--adl-primary:active{background:var(--adl-action-primary-active)}
/* Secondary: ink outline, not purple — keeps purple scarce and meaningful */
.adl-btn--secondary{background:var(--adl-white);color:var(--adl-text-strong);border-color:var(--adl-border-default)}
.adl-btn--adl-secondary:hover{background:var(--adl-neutral-50);border-color:var(--adl-neutral-400)}
.adl-btn--outline{background:transparent;color:var(--adl-text-accent);border-color:var(--adl-purple-300)}
.adl-btn--adl-outline:hover{background:var(--adl-action-quiet-hover);border-color:var(--adl-purple-600)}
.adl-btn--ghost{background:transparent;color:var(--adl-text-accent)}
.adl-btn--adl-ghost:hover{background:var(--adl-action-quiet-hover);color:var(--adl-purple-700)}
.adl-btn--inverse{background:var(--adl-white);color:var(--adl-neutral-900)}
.adl-btn--adl-inverse:hover{background:var(--adl-neutral-100)}
.adl-btn--link{background:transparent;color:var(--adl-text-accent);height:auto;padding:0;letter-spacing:0;font-weight:var(--adl-fw-medium);font-size:var(--adl-text-sm);text-underline-offset:4px}
.adl-btn--adl-link:hover{text-decoration:underline;background:transparent}
/* Opt back into the baseline's shouty caps where a client insists */
.adl-btn--caps{text-transform:uppercase;letter-spacing:var(--adl-tracking-label);font-size:var(--adl-text-xs);font-weight:var(--adl-fw-semibold)}
.adl-btn[disabled],.adl-btn[aria-disabled="true"]{background:var(--adl-action-disabled-bg);color:var(--adl-action-disabled-text);border-color:transparent;cursor:not-allowed;transform:none}

/* IconButton */
.adl-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:var(--adl-border-hairline) solid transparent;border-radius:var(--adl-radius-control);color:var(--adl-text-strong);cursor:pointer;position:relative;transition:var(--adl-transition-color)}
.adl-iconbtn--sm{width:36px;height:36px}
.adl-iconbtn--md{width:44px;height:44px}
.adl-iconbtn:hover{background:var(--adl-neutral-100)}
.adl-iconbtn:active{background:var(--adl-neutral-150)}
.adl-iconbtn--accent{color:var(--adl-purple-600)}
.adl-iconbtn--adl-accent:hover{background:var(--adl-action-quiet-hover);color:var(--adl-purple-700)}
.adl-iconbtn--outlined{border-color:var(--adl-border-subtle);background:var(--adl-white)}
.adl-iconbtn--adl-outlined:hover{border-color:var(--adl-border-default);background:var(--adl-neutral-50)}
.adl-iconbtn[disabled]{color:var(--adl-action-disabled-text);cursor:not-allowed;background:transparent}
.adl-iconbtn__count{position:absolute;top:0;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--adl-radius-pill);background:var(--adl-purple-600);color:#fff;font-family:var(--adl-font-text);font-size:10px;font-weight:var(--adl-fw-semibold);display:grid;place-items:center;line-height:1}

/* Icon */
.adl-icon{display:inline-flex;flex:none;align-items:center;justify-content:center}
.adl-icon svg{width:100%;height:100%}

/* Badge — quiet by default. Only "sale" is allowed to be loud. */
.adl-badge{display:inline-flex;align-items:center;gap:var(--adl-space-1);font-family:var(--adl-font-text);font-size:var(--adl-text-xs);font-weight:var(--adl-fw-medium);line-height:1.3;padding:5px var(--adl-space-3);border-radius:var(--adl-radius-xs)}
.adl-badge--new{background:transparent;color:var(--adl-text-strong);border:var(--adl-border-hairline) solid var(--adl-border-default);text-transform:uppercase;letter-spacing:var(--adl-tracking-label);font-size:var(--adl-text-2xs);font-weight:var(--adl-fw-semibold);padding:5px var(--adl-space-3)}
.adl-badge--instock{background:var(--adl-success-100);color:var(--adl-success-700)}
.adl-badge--outofstock{background:var(--adl-neutral-150);color:var(--adl-neutral-500)}
.adl-badge--sale{background:var(--adl-danger-500);color:#fff;text-transform:uppercase;letter-spacing:var(--adl-tracking-label);font-size:var(--adl-text-2xs);font-weight:var(--adl-fw-semibold)}
.adl-badge--neutral{background:var(--adl-neutral-100);color:var(--adl-text-body)}
.adl-badge--accent{background:var(--adl-purple-50);color:var(--adl-purple-700)}

/* Chip */
.adl-chip{display:inline-flex;align-items:center;gap:var(--adl-space-2);height:var(--adl-control-h-sm);padding:0 var(--adl-space-4);border-radius:var(--adl-radius-chip);border:var(--adl-border-hairline) solid var(--adl-border-subtle);background:var(--adl-white);color:var(--adl-text-body);font-family:var(--adl-font-text);font-size:var(--adl-text-sm);cursor:pointer;white-space:nowrap;transition:var(--adl-transition-color)}
.adl-chip:hover{border-color:var(--adl-border-default);color:var(--adl-text-strong)}
.adl-chip[aria-pressed="true"],.adl-chip--selected{background:var(--adl-neutral-900);border-color:var(--adl-neutral-900);color:#fff}
.adl-chip__x{display:grid;place-items:center;opacity:.55;font-size:14px;line-height:1}
.adl-chip__x:hover{opacity:1}

/* Card — white, warm hairline, radius 12, NO shadow at rest.
   The baseline's purple-outline-on-gray card is retired; it survives as
   --accent for the rare moment a card must read as brand-owned. */
.adl-card{background:var(--adl-surface-card);border:var(--adl-border-hairline) solid var(--adl-border-subtle);border-radius:var(--adl-radius-card);box-shadow:var(--adl-elevation-card)}
.adl-card--band{background:var(--adl-surface-band);border-color:transparent}
.adl-card--accent{background:var(--adl-surface-accent);border-color:var(--adl-purple-200)}
.adl-card--bare{background:transparent;border-color:transparent}
.adl-card--pad-sm{padding:var(--adl-space-5)}
.adl-card--pad-md{padding:var(--adl-space-8)}
.adl-card--pad-lg{padding:var(--adl-space-12)}
.adl-card--interactive{cursor:pointer;transition:var(--adl-transition-lift),var(--adl-transition-color)}
.adl-card--adl-interactive:hover{transform:translateY(var(--adl-hover-lift));box-shadow:var(--adl-elevation-card-hover);border-color:var(--adl-border-default)}

/* SectionHeading — LEFT aligned by default; centre is opt-in */
.adl-sechead{display:grid;gap:var(--adl-space-4);justify-items:start;text-align:left}
.adl-sechead--center{justify-items:center;text-align:center}
.adl-sechead__eyebrow{font-family:var(--adl-font-text);font-size:var(--adl-type-eyebrow-size);font-weight:var(--adl-type-eyebrow-weight);letter-spacing:var(--adl-type-eyebrow-tracking);text-transform:uppercase;color:var(--adl-text-muted)}
.adl-sechead__title{font-family:var(--adl-font-display);font-weight:var(--adl-type-heading-weight);color:var(--adl-text-strong);line-height:var(--adl-leading-snug);letter-spacing:var(--adl-tracking-display);margin:0;text-wrap:balance}
.adl-sechead__title em{font-style:italic;color:inherit}
.adl-sechead__title--sm{font-size:var(--adl-text-2xl)}
.adl-sechead__title--md{font-size:var(--adl-text-3xl)}
.adl-sechead__title--lg{font-size:var(--adl-text-4xl)}
.adl-sechead__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--adl-space-8);flex-wrap:wrap}
.adl-sechead__lede{font-family:var(--adl-font-text);font-size:var(--adl-text-lg);line-height:var(--adl-leading-relaxed);color:var(--adl-text-body);max-width:56ch;margin:0}

/* Divider */
.adl-divider{border:0;height:1px;background:var(--adl-border-subtle);margin:0;width:100%}
.adl-divider--strong{background:var(--adl-border-default)}
.adl-divider--accent{background:var(--adl-purple-300)}
.adl-divider--short{width:64px;height:1px;background:var(--adl-neutral-900)}
.adl-divider--vertical{width:1px;height:auto;align-self:stretch}

/* FloatingAction — the "Обади се" pill, kept from the baseline because it
   genuinely earns its place: this business closes orders by phone. */
.adl-fab{position:fixed;left:var(--adl-space-5);bottom:var(--adl-space-5);z-index:60;display:inline-flex;align-items:center;gap:var(--adl-space-3);height:var(--adl-control-h-lg);padding:0 var(--adl-space-6);border:0;border-radius:var(--adl-radius-fab);background:var(--adl-action-primary);color:#fff;font-family:var(--adl-font-text);font-size:var(--adl-text-md);font-weight:var(--adl-fw-semibold);cursor:pointer;text-decoration:none;box-shadow:var(--adl-elevation-fab);transition:var(--adl-transition-color)}
.adl-fab:hover{background:var(--adl-action-primary-hover);color:#fff;text-decoration:none}
.adl-fab--static{position:static}
.adl-fab--right{left:auto;right:var(--adl-space-5)}

/* DomainStrip */
.adl-strip{background:var(--adl-surface-band);color:var(--adl-strip-text);font-family:var(--adl-font-text);font-size:var(--adl-text-2xs);letter-spacing:var(--adl-tracking-label);text-transform:uppercase;text-align:center;padding:var(--adl-space-3) var(--adl-space-4)}


/* adl-home.css */
/* Anloradelux — home page + WordPress/WooCommerce reconciliation.
   Enqueue AFTER styles.css and adl-wp-bridge.css.

   tokens/ and components/ are copied verbatim from the design system. Never
   edit them — everything below is the override layer.

   TWO IDEAS CARRY THIS WHOLE FILE:

   1. THE MAT. Every photograph on the site sits inside a warm mat
      (--surface-media) with a white inner frame, like a picture in a
      passe-partout. The catalogue is 354 saturated, high-contrast paintings;
      butted edge to edge they read as a patchwork quilt. 16-20px of mat plus a
      white sliver is what lets two of them sit side by side and still feel calm.
      NOTHING is full-bleed on this site. There is no exception.

   TOKEN NAMES: use only names that exist in tokens/. The ones that bite are
   --dur-fast/base/slow (NOT --duration-*), --text-md (there is no --text-base),
   --type-heading-weight (there is no --type-display-weight), --danger-500,
   --border-default. An unresolved var() with no fallback kills the WHOLE
   declaration silently — a wrong duration name means the transition simply
   never runs. Grep this file against tokens/ before shipping.

   2. EVERY GRID IS 2-UP ON PHONES, NEVER 1-UP. A full-width tile stops reading
      as a product and starts reading as a banner, and it turns any grid into
      screens of scrolling. Two columns is the floor everywhere. */

/* ── 1. Layout primitives ─────────────────────────────────────────── */
.adl-container { box-sizing: border-box }
.adl-section { padding-block: var(--adl-section-y) }
.adl-section--flush-top { padding-top: 0 }
.adl-band { background: var(--adl-surface-band); padding-block: var(--adl-section-y-sm) }
.adl-band--strip { padding-block: var(--adl-space-14) }
.adl-rowgap { margin-top: var(--adl-space-12) }
.adl-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* THE RESPONSIVE LADDER — restated in one place for every grid on the page.
   Phone (<640px)   products 2 · categories 2 · trust 2×2 · why 1 · editorial 1
   640-899px        products 2 · categories 2 · trust 2×2 · why 1 · editorial 1
   900-999px        products 2 · categories 3 · trust 2×2 · why 3 · editorial 2
   >=1000px         products 4 · categories 3 · trust 4   · why 3 · editorial 2
   Gaps: 16px on phones, 32px from 640px, 48px for the why band at desktop. */
.adl-grid-cat, .adl-grid-3, .adl-grid-4 { display: grid; gap: var(--adl-space-4) }
.adl-grid-cat, .adl-grid-4 { grid-template-columns: repeat(2, 1fr) }
.adl-grid-3 { grid-template-columns: 1fr }
@media (min-width: 640px) { .adl-grid-cat, .adl-grid-3, .adl-grid-4 { gap: var(--adl-grid-gap) } }
@media (min-width: 900px) {
  .adl-grid-cat { grid-template-columns: repeat(3, 1fr) }
  .adl-grid-3 { grid-template-columns: repeat(3, 1fr) }
}
@media (min-width: 1000px) { .adl-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--adl-space-10) } }
.adl-grid--wide-gap { gap: var(--adl-space-10) }
@media (min-width: 900px) { .adl-grid--wide-gap { gap: var(--adl-space-12) } }

.adl-editorial { display: grid; gap: var(--adl-space-10) }
.adl-editorial__copy { display: grid; gap: var(--adl-space-5); justify-items: start; max-width: 46ch; align-content: center }
.adl-editorial__copy p { margin: 0; color: var(--adl-text-body); font-size: var(--adl-text-md); line-height: var(--adl-leading-relaxed); text-wrap: pretty }
@media (min-width: 900px) {
  .adl-editorial { grid-template-columns: 1fr 1.1fr; gap: var(--adl-space-16); align-items: center }
  .adl-editorial--narrow { grid-template-columns: minmax(0, 420px) 1fr; gap: var(--adl-space-14) }
}

/* ── 2. THE MAT ───────────────────────────────────────────────────── */
/* Mat padding scales with the tile so a 2-up phone tile does not lose half its
   artwork to padding: 10px at phone widths, 20px at desktop. */
.adl-mat { background: var(--adl-surface-media); border-radius: var(--adl-radius-media); padding: clamp(10px, 2.2vw, 20px); margin: 0 }
.adl-mat--lg { padding: clamp(16px, 3vw, 32px) }
.adl-mat__frame { position: relative; overflow: hidden; border-radius: 2px; background: var(--adl-surface-page) }
.adl-mat__frame > img { width: 100%; height: 100%; object-fit: cover; display: block }
.adl-mat__frame--3x4 { aspect-ratio: 3/4 }
.adl-mat__frame--4x5 { aspect-ratio: 4/5 }
.adl-mat__frame--4x3 { aspect-ratio: 4/3 }
.adl-mat__frame--1x1 { aspect-ratio: 1/1 }

/* STAMP CROP. Every product image has the model number stamped into the
   bottom-left of the artwork ("363", "4b", "7c"). On a product tile that is
   information and it stays. On a CATEGORY tile — a tile labelled "Портрети"
   showing a stamped "363" — it reads as a defect, so the frame scales the image
   to 114% and top-aligns it, dropping the bottom ~12% where the stamp lives.
   Remove this class if clean category artwork ever exists. */
.adl-mat__frame--crop-stamp > img { height: 114%; object-position: center top }

/* A credited customer photo. The caption is what makes an amateur phone shot
   legitimate instead of cheap — never drop it. */
.adl-mat--credited { display: grid; gap: 0 }
.adl-mat__credit { font-size: var(--adl-text-xs); color: var(--adl-text-muted); padding: var(--adl-space-2) var(--adl-space-1) 0 }

/* ── 3. Hero — diagonal wedge with two tilted prints ──────────────── */
/* The one place on the site where artwork is not in a rectangular mat. It works
   because the prints are TILTED and BORDERED: they read as physical prints on a
   table, which is a different thing from a photo band. Rules that keep it calm:
   two prints (never three), tilt under 6°, no text over them, and the wedge is a
   FLAT --surface-media — never a blurred copy of the artwork. */
.adl-hero { border-bottom: var(--adl-border-hairline) solid var(--adl-border-subtle) }
.adl-hero > .adl-container { padding-block: clamp(72px, 9vw, 128px) }
.adl-hero--diagonal { position: relative; overflow: hidden }
.adl-hero--diagonal > .adl-container { position: relative; padding-block: clamp(56px, 7vw, 104px) }
.adl-hero__grid { display: grid; gap: var(--adl-space-12) }
.adl-hero--diagonal .adl-hero__copy { max-width: 560px }
.adl-hero--diagonal .adl-hero__title { max-width: 16ch; text-wrap: balance }
.adl-hero--diagonal .adl-hero__lede { max-width: 44ch }
.adl-hero__media { position: relative }
/* The wedge bleeds off the right edge of the viewport; the section clips it. */
.adl-hero__diag {
  position: absolute; z-index: 0; background: var(--adl-surface-media);
  inset: -6% -100vw -6% -6%;
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
}
.adl-hero__stack { position: relative; z-index: 1; aspect-ratio: 1 / 1.02 }
.adl-hero__print {
  position: absolute; margin: 0; background: var(--adl-surface-page);
  padding: clamp(6px, 1.2vw, 11px); border-radius: 3px;
  box-shadow: var(--adl-shadow-lg);
}
.adl-hero__print > img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 1px; display: block }
.adl-hero__print--back { left: 0; top: 2%; width: 57%; transform: rotate(-5deg) }
.adl-hero__print--front { right: 0; top: 13%; width: 63%; transform: rotate(3.5deg); z-index: 2 }
@media (min-width: 900px) {
  .adl-hero__grid { grid-template-columns: 1fr 0.9fr; gap: var(--adl-space-16); align-items: center }
  .adl-hero__diag { inset: -22% -100vw -22% 6%; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%) }
}
@media (prefers-reduced-motion: no-preference) {
  .adl-hero__print { transition: transform var(--adl-dur-slow) var(--adl-ease-out) }
  .adl-hero__stack:hover .adl-hero__print--back { transform: rotate(-6deg) translateY(-2px) }
  .adl-hero__stack:hover .adl-hero__print--front { transform: rotate(4.5deg) translateY(-2px) }
}
.adl-hero__copy { display: grid; gap: var(--adl-space-6); justify-items: start; max-width: 640px }
.adl-hero__title {
  font-family: var(--adl-font-display); font-weight: var(--adl-type-heading-weight);
  font-size: var(--adl-text-6xl); line-height: var(--adl-leading-tight);
  letter-spacing: var(--adl-tracking-display); color: var(--adl-text-strong);
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.adl-hero__lede { font-size: var(--adl-text-lg); line-height: var(--adl-leading-relaxed); color: var(--adl-text-body); max-width: 46ch; margin: 0; text-wrap: pretty }
.adl-hero__cta { display: flex; flex-wrap: wrap; gap: var(--adl-space-3); margin-top: var(--adl-space-2) }
@media (max-width: 480px) { .adl-hero__cta .adl-btn { width: 100% } }

/* ── 4. Section headings ──────────────────────────────────────────── */
.adl-sechead--row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--adl-space-6) }
.adl-sechead__text { display: grid; gap: var(--adl-space-3); justify-items: start }
.adl-sechead--center { text-align: center }
.adl-sechead--center .adl-sechead__text { justify-items: center; margin-inline: auto; max-width: 44ch }
.adl-sechead__eyebrow {
  font-size: var(--adl-text-2xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--adl-text-muted); margin: 0;
}
.adl-sechead__title {
  font-family: var(--adl-font-display); font-weight: var(--adl-type-heading-weight);
  font-size: var(--adl-text-3xl); line-height: var(--adl-leading-tight);
  letter-spacing: var(--adl-tracking-tight); color: var(--adl-text-strong); margin: 0;
}
.adl-sechead__title--lg { font-size: var(--adl-text-4xl) }

/* ── 5. Header ────────────────────────────────────────────────────── */
.adl-header { position: sticky; top: 0; z-index: 40; background: var(--adl-surface-page); border-bottom: var(--adl-border-hairline) solid var(--adl-border-subtle) }
.adl-header__inner {
  width: 100%; max-width: var(--adl-container-max); margin-inline: auto; box-sizing: border-box;
  padding-inline: var(--adl-gutter-mobile); min-height: 64px;
  display: flex; align-items: center; gap: var(--adl-space-6);
}
@media (min-width: 900px) { .adl-header__inner { padding-inline: var(--adl-gutter-desktop); min-height: 80px; gap: var(--adl-space-8) } }
.adl-header__logo { line-height: 0; flex: none }
.adl-header__logo img { height: 26px; width: auto }
@media (min-width: 900px) { .adl-header__logo img { height: 30px } }
.adl-header__nav { display: none; flex: 1 }
@media (min-width: 1000px) { .adl-header__nav { display: block } }
.adl-nav { display: flex; gap: var(--adl-space-8); list-style: none; margin: 0; padding: 0 }
.adl-nav a {
  font-size: var(--adl-text-sm); font-weight: var(--adl-fw-medium); color: var(--adl-text-body);
  text-decoration: none; white-space: nowrap; transition: var(--adl-transition-color);
}
.adl-nav a:hover { color: var(--adl-text-strong) }
/* Само цвят и тежест: подчертаването сядаше на пиксели от долния
   косъм на хедъра и двете се четяха като една удвоена черта. */
.adl-nav .current-menu-item > a, .adl-nav .current_page_item > a { color: var(--adl-text-strong); font-weight: 600 }
.adl-header__actions { display: flex; align-items: center; gap: var(--adl-space-1); margin-left: auto }
.adl-header__burger { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--adl-text-strong); border-radius: var(--adl-radius-control); cursor: pointer }
@media (min-width: 1000px) { .adl-header__burger { display: none } }
.adl-iconbtn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px;
  padding: 0; border: 0; background: transparent; color: var(--adl-text-strong);
  border-radius: var(--adl-radius-control); cursor: pointer; transition: var(--adl-transition-color); text-decoration: none;
}
.adl-iconbtn:hover { background: var(--adl-neutral-100); color: var(--adl-text-strong) }
.adl-cart__badge {
  position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px;
  display: grid; place-items: center; padding: 0 4px; border-radius: 999px;
  background: var(--adl-purple-600); color: var(--adl-white); font-size: var(--adl-text-2xs); line-height: 1;
}
.adl-header__search { border-top: var(--adl-border-hairline) solid var(--adl-border-subtle); padding-block: var(--adl-space-4) }
.adl-search { display: flex; gap: var(--adl-space-2) }
.adl-search .adl-input { flex: 1 }
/* Announcement bar — above the header, one centred line. */
.adl-strip {
  background: var(--adl-surface-band); color: var(--adl-text-muted);
  border-bottom: var(--adl-border-hairline) solid var(--adl-border-subtle);
  font-size: var(--adl-text-2xs); letter-spacing: 0.16em; text-transform: uppercase; padding-block: var(--adl-space-3);
}
.adl-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--adl-space-3); text-align: center }
.adl-strip a { color: var(--adl-text-muted); text-decoration: none; letter-spacing: inherit }
.adl-strip a:hover { color: var(--adl-text-strong) }
.adl-strip__sep { opacity: .5 }

/* ── Customer slider ──────────────────────────────────────────────── */
/* One photo per view, native scroll-snap. adl-wall.js only moves scrollLeft and
   updates the counter — if the JS never loads, this is still a working
   swipeable rail. */
.adl-wall__rail {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.adl-wall__rail::-webkit-scrollbar { display: none }
.adl-wall__rail:focus-visible { outline: 2px solid var(--adl-purple-600); outline-offset: 4px; border-radius: var(--adl-radius-media) }
/* Слайдът е висок колкото най-високата снимка (отвесната). Легнал кадър
   заема по-малко и без центриране увисва горе, а под подписа зее дупка -
   при 330px колона разликата е над 200px. Центрирано изглежда като
   паспарту около снимката, тоест нарочно. */
.adl-wall__item { flex: 0 0 100%; scroll-snap-align: center; margin: 0;
  display: flex; flex-direction: column; justify-content: center }
.adl-wall__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--adl-space-4); margin-top: var(--adl-space-4) }
.adl-wall__counter { font-size: var(--adl-text-xs); color: var(--adl-text-muted); margin: 0; font-variant-numeric: tabular-nums }
.adl-wall__arrows { display: flex; gap: var(--adl-space-2) }
.adl-iconbtn--outline { border: var(--adl-border-hairline) solid var(--adl-border-default); background: var(--adl-surface-page) }
.adl-iconbtn--adl-outline:hover { background: var(--adl-neutral-100) }
.adl-iconbtn--outline i, .adl-iconbtn--outline svg { width: 18px; height: 18px }
@media (prefers-reduced-motion: reduce) { .adl-wall__rail { scroll-behavior: auto } }

/* ── Български мотиви ─────────────────────────────────────────────── */
/* No wavy shapes, no circular crops, no second brand colour — the section earns
   its presence from the warm band, a centred serif heading and the badge. */
.adl-motifs__intro { display: grid; gap: var(--adl-space-4); justify-items: center; text-align: center; max-width: 56ch; margin-inline: auto }
.adl-motifs__lede { font-size: var(--adl-text-md); color: var(--adl-text-body); line-height: var(--adl-leading-relaxed); margin: 0; text-wrap: pretty }
.adl-motifs__cta { display: flex; justify-content: center; margin-top: var(--adl-space-12) }
/* Tiles sit on the warm band, so their mat lifts to white to stay distinct. */
.adl-motifs ul.products li.product .adl-mat { background: var(--adl-surface-page) }
.adl-motifs ul.products li.product .adl-mat__frame { background: var(--adl-surface-media) }
/* "САМО ПРИ НАС" badge — outlined, never solid: exclusivity is stated once in
   words, then proved by the products. */
.adl-products--exclusive ul.products li.product .adl-mat::after {
  content: "Само при нас"; position: absolute; z-index: 2;
  top: clamp(10px, 2.2vw, 20px); left: clamp(10px, 2.2vw, 20px);
  font-size: var(--adl-text-2xs); letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--adl-surface-page); border: var(--adl-border-hairline) solid var(--adl-neutral-300);
  color: var(--adl-text-strong); border-radius: var(--adl-radius-control); padding: 3px 8px; line-height: 1.4;
}

/* Mobile nav: the burger toggles [hidden] on #adl-nav via a 6-line inline
   script, or your own. Styled here so it lands as a sheet, not a squeeze. */
@media (max-width: 999px) {
  .adl-header__nav:not([hidden]) {
    display: block; position: absolute; inset-inline: 0; top: 100%;
    background: var(--adl-surface-page); border-bottom: var(--adl-border-hairline) solid var(--adl-border-subtle);
    padding: var(--adl-space-4) var(--adl-gutter-mobile) var(--adl-space-6); box-shadow: var(--adl-shadow-lg);
  }
  .adl-header__nav:not([hidden]) .adl-nav { flex-direction: column; gap: 0 }
  .adl-header__nav:not([hidden]) .adl-nav a { display: block; padding-block: var(--adl-space-4); font-size: var(--adl-text-md) }
  .adl-header__nav:not([hidden]) .adl-nav li + li { border-top: var(--adl-border-hairline) solid var(--adl-border-subtle) }
}

/* ── 6. Category tiles ────────────────────────────────────────────── */
.adl-cat { display: grid; gap: var(--adl-space-4); text-decoration: none; align-content: start }
.adl-cat__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--adl-space-3) }
.adl-cat__name { font-family: var(--adl-font-display); font-size: var(--adl-text-lg); color: var(--adl-text-strong); letter-spacing: var(--adl-tracking-tight); line-height: var(--adl-leading-snug) }
@media (min-width: 900px) { .adl-cat__name { font-size: var(--adl-text-xl) } }
.adl-cat__count { font-size: var(--adl-text-xs); color: var(--adl-text-muted); white-space: nowrap }
.adl-cat:hover .adl-mat__frame > img { transform: scale(1.035) }
.adl-mat__frame > img { transition: transform var(--adl-dur-slow) var(--adl-ease-out) }

/* ── 7. Value props ───────────────────────────────────────────────── */
.adl-vp { display: grid; gap: var(--adl-space-3); justify-items: start; align-content: start }
.adl-vp--center { justify-items: center; text-align: center }
.adl-vp__icon { color: var(--adl-text-strong); line-height: 0 }
.adl-vp__icon i, .adl-vp__icon svg { width: 40px; height: 40px; stroke-width: 1.4 }
@media (min-width: 900px) { .adl-vp__icon i, .adl-vp__icon svg { width: 44px; height: 44px } }
.adl-vp__title { font-size: var(--adl-text-md); font-weight: var(--adl-fw-semibold); color: var(--adl-text-strong); margin: 0 }
.adl-vp__text { font-size: var(--adl-text-sm); color: var(--adl-text-body); line-height: var(--adl-leading-normal); margin: 0; text-wrap: pretty }

/* ── 8. WooCommerce loop → the matted product tile ────────────────── */
/* !important is required against WooCommerce's own float rules. */
.woocommerce ul.products, .woocommerce-page ul.products {
  display: grid !important; grid-template-columns: repeat(2, 1fr);
  gap: var(--adl-space-4); margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important }
@media (min-width: 640px) { .woocommerce ul.products { gap: var(--adl-grid-gap) } }
@media (min-width: 1000px) {
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) }
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) }
}
.woocommerce ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
  display: grid; align-content: start; text-align: left;
  background: var(--adl-surface-page); border: var(--adl-border-hairline) solid var(--adl-border-subtle);
  border-radius: var(--adl-radius-card); overflow: hidden;
  transition: transform var(--adl-dur-base) var(--adl-ease-out), box-shadow var(--adl-dur-base) var(--adl-ease-out), border-color var(--adl-dur-base) var(--adl-ease-out);
}
.woocommerce ul.products li.product:hover { transform: translateY(var(--adl-hover-lift)); box-shadow: var(--adl-shadow-md); border-color: var(--adl-border-default) }
.woocommerce ul.products li.product > a { display: grid; text-decoration: none; gap: 0 }

/* The mat wrapper injected by the hooks in functions.php */
.woocommerce ul.products li.product .adl-mat { border-radius: 0; position: relative }
.woocommerce ul.products li.product .adl-mat__frame { aspect-ratio: 3/4 }
.woocommerce ul.products li.product img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0 }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--adl-font-sans); font-size: var(--adl-text-sm); font-weight: var(--adl-fw-medium);
  color: var(--adl-text-strong); line-height: var(--adl-leading-snug);
  padding: clamp(12px, 2.4vw, 20px) clamp(12px, 2.4vw, 20px) 0; margin: 0;
}
.adl-tile__meta { font-size: var(--adl-text-xs); color: var(--adl-text-muted); padding: var(--adl-space-2) clamp(12px, 2.4vw, 20px) 0 }
/* Price in the serif — the one number this brand asks you to consider. */
.woocommerce ul.products li.product .price {
  font-family: var(--adl-font-display); font-size: var(--adl-text-lg); color: var(--adl-text-strong);
  padding: var(--adl-space-2) clamp(12px, 2.4vw, 20px) 0; margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--adl-text-muted); font-size: var(--adl-text-sm); margin-right: var(--adl-space-2) }
.woocommerce ul.products li.product .price ins { text-decoration: none }
.woocommerce ul.products li.product a.button {
  margin: var(--adl-space-4) clamp(12px, 2.4vw, 20px) clamp(12px, 2.4vw, 20px);
  width: auto; justify-content: center;
}
/* Accessories are square product shots, not paintings. */
.adl-products--square ul.products li.product .adl-mat__frame { aspect-ratio: 1/1 }

/* Badges sit on the mat, not on the artwork — the artwork is already busy. */
.adl-badge {
  position: absolute; top: clamp(10px, 2.2vw, 20px); left: clamp(10px, 2.2vw, 20px); z-index: 2;
  font-size: var(--adl-text-2xs); letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: var(--adl-radius-control); padding: 3px 8px; line-height: 1.4;
}
.adl-badge--new { background: var(--adl-surface-page); border: var(--adl-border-hairline) solid var(--adl-neutral-300); color: var(--adl-text-strong) }
.adl-badge--sale { background: var(--adl-danger-500); border: 0; color: var(--adl-white) }
.woocommerce ul.products li.product .onsale { display: none }

.adl-breadcrumb { font-size: var(--adl-text-xs); color: var(--adl-text-muted); margin-bottom: var(--adl-space-8) }
.adl-breadcrumb a { color: var(--adl-text-muted); text-decoration: none }
.adl-breadcrumb a:hover { color: var(--adl-text-strong) }

/* ── 9. Footer + call pill ────────────────────────────────────────── */
.adl-footer { background: var(--adl-surface-inverse); color: var(--adl-neutral-300); padding-block: var(--adl-section-y-sm) }
.adl-footer__inner { width: 100%; max-width: var(--adl-container-max); margin-inline: auto; box-sizing: border-box; padding-inline: var(--adl-gutter-mobile) }
@media (min-width: 900px) { .adl-footer__inner { padding-inline: var(--adl-gutter-desktop) } }
.adl-footer__cols { display: grid; gap: var(--adl-space-10) }
@media (min-width: 640px) { .adl-footer__cols { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .adl-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--adl-space-12) } }
.adl-footer__brand img { height: 28px; width: auto }
.adl-footer__tagline { font-family: var(--adl-font-display); font-size: var(--adl-text-lg); color: var(--adl-white); margin: var(--adl-space-5) 0 0; max-width: 24ch }
.adl-footer__head { font-size: var(--adl-text-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--adl-neutral-400); margin: 0 0 var(--adl-space-5) }
.adl-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--adl-space-3) }
.adl-footer__list a { font-size: var(--adl-text-sm); color: var(--adl-neutral-300); text-decoration: none }
.adl-footer__list a:hover { color: var(--adl-white) }
.adl-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--adl-space-4);
  margin-top: var(--adl-space-12); padding-top: var(--adl-space-8);
  border-top: 1px solid rgba(255,255,255,.12); font-size: var(--adl-text-xs);
}
.adl-footer__bottom p { margin: 0 }

.adl-fab {
  position: fixed; left: var(--adl-space-6); bottom: var(--adl-space-6); z-index: 50;
  display: inline-flex; align-items: center; gap: var(--adl-space-2);
  height: 48px; padding-inline: var(--adl-space-6); border-radius: 999px;
  background: var(--adl-purple-600); color: var(--adl-white); text-decoration: none;
  font-size: var(--adl-text-sm); font-weight: var(--adl-fw-medium); box-shadow: var(--adl-shadow-accent);
}
.adl-fab:hover { background: var(--adl-purple-700); color: var(--adl-white) }
.adl-fab i, .adl-fab svg { width: 20px; height: 20px }

/* ── 10. Prose (static pages, cart, checkout) ─────────────────────── */
.adl-prose { max-width: var(--adl-container-narrow) }
.adl-prose > * + * { margin-top: var(--adl-space-6) }
.adl-prose h2 { font-family: var(--adl-font-display); font-size: var(--adl-text-3xl); color: var(--adl-text-strong); margin-top: var(--adl-space-12) }
.adl-prose h3 { font-family: var(--adl-font-display); font-size: var(--adl-text-xl); color: var(--adl-text-strong); margin-top: var(--adl-space-10) }
.adl-prose p, .adl-prose li { font-size: var(--adl-text-md); line-height: var(--adl-leading-relaxed); color: var(--adl-text-body) }
/* Cart and checkout are shortcode pages and must NOT be width-clamped. */
.woocommerce-cart .adl-prose, .woocommerce-checkout .adl-prose, .woocommerce-account .adl-prose { max-width: none }

/* ── 11. Closing band — the fixed collage ─────────────────────────── */
/* The collage stays still while the page scrolls over it. The ONLY place on this
   site where text sits over imagery, and it survives on the veil: a FLAT 82% ink
   layer, never a gradient. Below 82% the collage starts competing with the
   heading; above ~88% it stops reading as a picture at all.
   background-attachment: fixed is unreliable on touch, so it degrades there to a
   normal cover image — the correct fallback, not a bug to fix with JS parallax. */
.adl-thanks { position: relative; background: var(--adl-surface-inverse); padding-block: var(--adl-section-y-sm) }
.adl-thanks--collage {
  background-repeat: no-repeat; background-size: cover; background-position: center;
  background-attachment: fixed; padding-block: clamp(96px, 12vw, 176px);
}
@media (hover: none) { .adl-thanks--collage { background-attachment: scroll } }
.adl-thanks__veil { position: absolute; inset: 0; background: rgba(28,25,23,.82) }
.adl-thanks__inner { position: relative; z-index: 1; display: grid; gap: var(--adl-space-8); justify-items: center; text-align: center }
.adl-thanks__title { font-family: var(--adl-font-display); font-size: var(--adl-text-4xl); color: var(--adl-white); margin: 0 }
.adl-thanks__text { color: var(--adl-neutral-300); max-width: 44ch; margin: 0; font-size: var(--adl-text-md); line-height: var(--adl-leading-relaxed) }
.adl-btn--inverse { background: var(--adl-white); color: var(--adl-neutral-900); border: 0 }
.adl-btn--adl-inverse:hover { background: var(--adl-neutral-100); color: var(--adl-neutral-900) }

/* ── 12. Blog cards (index/single only — no posts exist yet) ───────── */
.adl-post { display: grid; gap: var(--adl-space-4); align-content: start; text-decoration: none }
.adl-post__meta { font-size: var(--adl-text-xs); color: var(--adl-text-muted) }
.adl-post__title { font-family: var(--adl-font-display); font-size: var(--adl-text-xl); line-height: var(--adl-leading-snug); color: var(--adl-text-strong); margin: 0 }
.adl-post:hover .adl-post__title { color: var(--adl-purple-600) }
.adl-post__excerpt { font-size: var(--adl-text-sm); color: var(--adl-text-body); line-height: var(--adl-leading-normal); margin: 0; text-wrap: pretty }

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product, .adl-mat__frame > img { transition: none }
  .woocommerce ul.products li.product:hover { transform: none }
  .adl-cat:hover .adl-mat__frame > img { transform: none }
}

/* ── Дописано от tools/vzemi-dizajn.py ────────────────────────
 * Не е промяна по дизайна, а покриване на негови липси.
 */

/* Базовият `.adl-btn` няма нито височина, нито отстъп — те идват само от
 * `--sm/--md/--lg`. А `wall.php` в самия handoff го ползва без размер,
 * което дава 28 px висок бутон, слепен по текста. Средният размер е
 * разумното подразбиране; изричната разновидност пак го надделява. */
.adl-btn:not(.adl-btn--sm):not(.adl-btn--md):not(.adl-btn--lg){
  height: var(--adl-control-h);
  padding: 0 var(--adl-space-6);
  font-size: var(--adl-type-button-size);
}

/* Преходът герой -> гаранции на телефон, версия по вкуса на Никола:
 * БЕЗ бяла пролука. Клинът тече до самия край на героя, линията отдолу
 * пада и бежовото на клина се влива направо в бежовото на лентата с
 * гаранциите. Двата тона са на една стъпка (F1EEEA и F7F5F2) и заедно
 * четат като една повърхност. */
@media (max-width: 899px){
  .adl-hero{ border-bottom: 0; }
  .adl-hero > .adl-container{ padding-block: 44px 0; }
  .adl-hero__grid{ gap: 28px; }
  .adl-hero__stack{ aspect-ratio: 1 / 0.96; max-width: 430px; margin-inline: auto; }
  .adl-hero__diag{ inset: 10% -24px 0 -24px; }
  .adl-hero__stack{ padding-bottom: 26px; }

  /* Четирите предимства не са „просто написани“: всяко е центрирано,
     иконата стои над заглавието и редовете дишат еднакво. */
  .adl-band--strip .adl-grid-4{ gap: 30px 18px; }
  .adl-band--strip .adl-vp{ justify-items: center; text-align: center; gap: 6px; }
  .adl-band--strip .adl-vp__icon{ margin-bottom: 4px; }
  .adl-band--strip .adl-vp__title{ font-size: 15px; }
  .adl-band--strip .adl-vp__text{ font-size: 13px; }
}