/* =========================================
   1. PRIMITIVE TOKENS
   Rohe Skala – bedeutungslos, ändern sich selten.
   Werden nur über Semantic Tokens referenziert,
   nie direkt in Komponenten.
   ========================================= */
/* ================================================
   LAYER: PRIMITIVES
   Rohe Werte. Nie direkt in Komponenten verwenden.
   ================================================ */
:root {

    /* -----------------------------------------
       COLOR PRIMITIVES
       Jana Shop Palette.
       Wirkung: hochwertig, warm, editorial, natürlich.

       Primär:
       - Dunkelblau: #2B2D42
       - Curry:      #f7a700
       - Rot:        #ad112a
       - Beige:      #e4d9bc

       Sekundär:
       - Dunkelgrün: #537e2d
       - Hellgrün:   #96c11a
       - Blau:       #1e3b71
    ----------------------------------------- */
    --color-white:        #ffffff;
    --color-black:        #000000;

    /* Ink / Dunkelblau */
    --color-ink-900:      #2B2D42;
    --color-ink-800:      #34364d;
    --color-ink-700:      #44465d;
    --color-ink-500:      #6b6d7f;
    --color-ink-300:      #d9dae2;
    --color-ink-100:      #f4f4f7;

    /* Curry / Orange */
    --color-curry-300:    #ffd46a;
    --color-curry-400:    #f7b92f;
    --color-curry-500:    #f7a700;
    --color-curry-600:    #d98f00;
    --color-curry-700:    #ad7200;

    /* Red / Marker */
    --color-red-500:      #ad112a;
    --color-red-600:      #930e24;
    --color-red-700:      #760b1d;

    /* Green */
    --color-green-400:    #96c11a;
    --color-green-500:    #739f22;
    --color-green-600:    #537e2d;
    --color-green-700:    #3f6322;

    /* Beige / Warm Neutral */
    --color-beige-50:     #fbf8ef;
    --color-beige-100:    #f4eedf;
    --color-beige-200:    #e4d9bc;
    --color-beige-300:    #d5c59e;
    --color-beige-400:    #bca878;
    --color-beige-500:    #9a8769;

    /* Blue */
    --color-blue-500:     #1e3b71;
    --color-blue-600:     #182f5a;
    --color-blue-700:     #122443;

    /* Compatibility aliases for existing components */
    --color-sage-50:      var(--color-beige-50);
    --color-sage-100:     var(--color-beige-100);
    --color-sage-150:     var(--color-beige-100);
    --color-sage-200:     var(--color-beige-200);
    --color-sage-300:     var(--color-green-400);
    --color-sage-400:     var(--color-green-500);
    --color-sage-500:     var(--color-green-600);
    --color-sage-600:     var(--color-green-600);
    --color-sage-700:     var(--color-green-700);
    --color-sage-800:     #344329;
    --color-sage-900:     #24301f;

    --color-cream-50:     var(--color-beige-50);
    --color-cream-100:    var(--color-beige-100);
    --color-cream-200:    var(--color-beige-200);
    --color-cream-300:    var(--color-beige-300);
    --color-cream-400:    var(--color-beige-400);
    --color-cream-500:    var(--color-beige-500);

    --color-wine-500:     var(--color-red-500);
    --color-wine-700:     var(--color-red-600);
    --color-wine-900:     var(--color-red-700);

    --color-orange-400:   var(--color-curry-400);
    --color-orange-500:   var(--color-curry-500);
    --color-orange-600:   var(--color-curry-500);
    --color-orange-700:   var(--color-curry-600);

    --color-sand-50:      var(--color-beige-50);
    --color-sand-100:     var(--color-beige-100);
    --color-sand-200:     var(--color-beige-200);
    --color-sand-300:     var(--color-beige-300);
    --color-sand-400:     var(--color-beige-400);
    --color-sand-500:     var(--color-beige-500);

    --color-brown-900:    var(--color-ink-900);
    --color-brown-700:    var(--color-ink-700);

    --color-grey-400:     var(--color-ink-700);
    --color-grey-200:     var(--color-ink-300);

    --color-purple-400:   var(--color-blue-500);
    --color-purple-500:   var(--color-blue-600);
    --color-purple-600:   var(--color-blue-700);

    /* Opacity Variants */
    --color-beige-100-65:      rgba(244, 238, 223, 0.65);
    --color-beige-200-45:      rgba(228, 217, 188, 0.45);
    --color-ink-2:             rgba(43, 45, 66, 0.025);
    --color-ink-8:             rgba(43, 45, 66, 0.08);
    --color-curry-500-22:      rgba(247, 167, 0, 0.22);
    --color-green-600-24:      rgba(83, 126, 45, 0.24);
    --color-red-500-18:        rgba(173, 17, 42, 0.18);

    --color-sage-100-65:       var(--color-beige-100-65);
    --color-sage-300-45:       var(--color-beige-200-45);
    --color-orange-600-22:     var(--color-curry-500-22);
    --color-sage-600-24:       var(--color-green-600-24);
    --color-sand-300-45:       var(--color-beige-200-45);
    --color-black-2:           var(--color-ink-2);

    /* Semantic Feedback */
    --color-success-base: #537e2d;
    --color-error-base:   #ad112a;
    --color-info-base:    #1e3b71;
    --color-warning-base: #d98f00;

    /* -----------------------------------------
       SIZE PRIMITIVES
       Geometrische Skala (Basis: 0.25rem / 4px).
    ----------------------------------------- */
    --size-0:    0;
    --size-1:    0.125rem;   /*  2px */
    --size-2:    0.25rem;    /*  4px */
    --size-3:    0.5rem;     /*  8px */
    --size-4:    1rem;       /* 16px */
    --size-5:    1.5rem;     /* 24px */
    --size-6:    2rem;       /* 32px */
    --size-7:    3rem;       /* 48px */
    --size-8:    4rem;       /* 64px */

    /* -----------------------------------------
       FONT SIZE PRIMITIVES
    ----------------------------------------- */
    --font-size-1:  0.75rem;    /* 12px */
    --font-size-2:  0.875rem;   /* 14px */
    --font-size-3:  1rem;       /* 16px */
    --font-size-4:  1.125rem;   /* 18px */
    --font-size-5:  1.25rem;    /* 20px */
    --font-size-6:  1.5rem;     /* 24px */
    --font-size-7:  2rem;       /* 32px */
    --font-size-8:  2.5rem;     /* 40px */

    /* -----------------------------------------
       BORDER RADIUS PRIMITIVES
    ----------------------------------------- */
    --radius-1:  2px;
    --radius-2:  4px;
    --radius-3:  8px;
    --radius-4:  16px;
    --radius-full: 9999px;

    /* -----------------------------------------
       SHADOW PRIMITIVES
    ----------------------------------------- */
    --shadow-1: 0 1px 2px rgba(43, 45, 66, 0.05);
    --shadow-2: 0 4px 8px rgba(43, 45, 66, 0.08);
    --shadow-3: 0 10px 20px rgba(43, 45, 66, 0.12);

    /* -----------------------------------------
       MOTION PRIMITIVES
    ----------------------------------------- */
    --ease-ui:         cubic-bezier(0.4, 0, 0.2, 1);
    --ease-enter:      cubic-bezier(0.0, 0, 0.2, 1);
    --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
    --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   0.15s;
    --duration-normal: 0.25s;
    --duration-slow:   0.4s;

    /* -----------------------------------------
       BREAKPOINTS (Dokumentation only)
    ----------------------------------------- */
    --bp-sm:  640px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;
}


/* =========================================
   2. SEMANTIC TOKENS
   Bedeutungsträger – referenzieren Primitives
   oder definieren fluid clamp()-Werte.
   Werden in Komponenten und Blocks verwendet.
   ========================================= */
/* ================================================
   LAYER: SEMANTICS
   Bedeutungsträger. Nur diese in Komponenten nutzen.
   ================================================ */
:root {

    /* -----------------------------------------
       COLORS – SEMANTIC
    ----------------------------------------- */

    /* Backgrounds */
    --color-bg:        var(--color-white);
    --color-bg-light:  var(--color-beige-50);
    --color-bg-alt:    var(--color-beige-100);
    --color-bg-dark:   var(--color-ink-900);

    /* Text */
    --color-text:      var(--color-ink-700);
    --color-muted:     var(--color-ink-500);
    --color-heading:   var(--color-ink-900);

    /* Border */
    --color-border:    var(--color-ink-300);

    /* Brand */
    --color-primary:       var(--color-curry-500);
    --color-primary-hover: var(--color-curry-600);
    --color-primary-text:  var(--color-ink-900);

    --color-accent:       var(--color-red-500);
    --color-accent-hover: var(--color-red-600);
    --color-accent-text:  var(--color-white);

    --color-brand-soft:    var(--color-beige-100);
    --color-brand-fresh:   var(--color-green-600);
    --color-brand-wine:    var(--color-red-500);
    --color-brand-blue:    var(--color-blue-500);
    --color-brand-dark:    var(--color-ink-900);
    --color-brand-beige:   var(--color-beige-200);
    --color-brand-curry:   var(--color-curry-500);

    /* Blocks */
    --color-block-bg:          var(--color-ink-900);
    --color-block-text:        var(--color-white);
    --color-block-muted:       rgba(255, 255, 255, 0.75);

    --color-block-curry-bg:    var(--color-curry-500);
    --color-block-curry-text:  var(--color-ink-900);

    --color-block-beige-bg:    var(--color-beige-200);
    --color-block-beige-text:  var(--color-ink-900);

    --color-block-green-bg:    var(--color-green-600);
    --color-block-green-text:  var(--color-white);

    --color-block-blue-bg:     var(--color-blue-500);
    --color-block-blue-text:   var(--color-white);

    /* Footer */
    --color-footer-bg:      var(--color-ink-900);
    --color-footer-text:    var(--color-white);
    --color-footer-muted:   rgba(255, 255, 255, 0.7);
    --color-footer-border:  rgba(255, 255, 255, 0.16);

    /* Decorative */
    --color-line-red:       var(--color-red-500);

    /* Feedback */
    --color-success:  var(--color-success-base);
    --color-error:    var(--color-error-base);
    --color-info:     var(--color-info-base);
    --color-warning:  var(--color-warning-base);

    --color-row-alt:  var(--color-ink-2);

    /* -----------------------------------------
       TYPOGRAPHY – SEMANTIC
       Fluid via clamp(min, vw-calc, max).
    ----------------------------------------- */

    /* Font Families */
    --font-base:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Font Sizes – Fluid */
    --text-xs:      var(--font-size-1);
    --text-sm:      var(--font-size-2);
    --text-body:    var(--font-size-4);
    --text-lg:      var(--font-size-5);
    --text-topline: clamp(1rem, 1.6vw, 1.25rem);
    --text-subline: clamp(1rem, 1.6vw, 1.25rem);
    --text-h6:      clamp(0.875rem, 1.2vw, 1rem);
    --text-h5:      clamp(1rem, 1.5vw, 1.125rem);
    --text-h4:      clamp(1.125rem, 2vw, 1.25rem);
    --text-h3:      clamp(1.25rem, 2.5vw, 1.5rem);
    --text-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
    --text-h1:      clamp(2.5rem, 6vw, 6rem);

    /* Font Weights */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-h1-light: 200;
    --weight-h1-bold:  600;

    /* Line Heights */
    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-base:    1.5;
    --leading-relaxed: 1.65;
    --leading-loose:   1.8;

    /* Letter Spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-h1:     -0.05em;
    --tracking-h2:     -0.02em;
    --tracking-h3:     -0.01em;
    --tracking-body:    0em;

    /* -----------------------------------------
       SPACING – SEMANTIC
    ----------------------------------------- */
    --space-xxs: var(--size-1);
    --space-xs:  var(--size-2);
    --space-sm:  var(--size-3);
    --space-md:  var(--size-4);
    --space-lg:  clamp(1.25rem, 2vw,  1.5rem);
    --space-xl:  clamp(1.5rem,  3vw,  2rem);
    --space-2xl: clamp(2rem,    4vw,  3rem);
    --space-3xl: clamp(2.5rem,  6vw,  4rem);

    /* -----------------------------------------
       BORDERS & RADIUS – SEMANTIC
    ----------------------------------------- */
    --radius-sm:   var(--radius-1);
    --radius-base: var(--radius-2);
    --radius-lg:   var(--radius-3);
    --radius-pill: var(--radius-full);

    /* Aliases */
    --border-radius-sm:   var(--radius-sm);
    --border-radius:      var(--radius-base);
    --border-radius-lg:   var(--radius-lg);
    --border-radius-pill: var(--radius-pill);

    /* -----------------------------------------
       SHADOWS – SEMANTIC
    ----------------------------------------- */
    --shadow-sm: var(--shadow-1);
    --shadow-md: var(--shadow-2);
    --shadow-lg: var(--shadow-3);

    --shadow-btn-primary: 0 8px 18px var(--color-curry-500-22);
    --shadow-btn-accent:  0 8px 18px var(--color-red-500-18);

    /* Aliases */
    --btn-shadow-primary: var(--shadow-btn-primary);
    --btn-shadow-accent:  var(--shadow-btn-accent);

    /* -----------------------------------------
       MOTION – SEMANTIC
    ----------------------------------------- */
    --transition:         var(--duration-normal) var(--ease-ui);
    --transition-fast:    var(--duration-fast)   var(--ease-ui);
    --transition-enter:   var(--duration-normal) var(--ease-enter);
    --transition-exit:    var(--duration-fast)   var(--ease-exit);

    /* Alias */
    --easing-default: var(--ease-ui);
    --easing-in:      var(--ease-exit);
    --easing-out:     var(--ease-enter);

    /* -----------------------------------------
       LAYOUT – SEMANTIC
    ----------------------------------------- */
    --container-xs:       480px;
    --container-sm:       640px;
    --container-md:       768px;
    --container-lg:       1024px;
    --container-xl:       1200px;
    --container-2xl:      1400px;

    --max-width:          var(--container-2xl);

    --container-padding:        var(--space-lg);
    --container-padding-mobile: var(--space-md);

    --header-height:      64px;

    /* -----------------------------------------
       GRID – SEMANTIC
    ----------------------------------------- */
    --grid-gap:        var(--space-lg);
    --grid-gap-sm:     var(--space-md);
    --grid-gap-lg:     var(--space-2xl);
    --grid-min-col:    280px;

    /* -----------------------------------------
       FORMS – SEMANTIC
    ----------------------------------------- */
    --input-padding:       0.625rem 0.75rem;
    --input-bg:            var(--color-bg);
    --input-border:        1px solid var(--color-border);
    --input-border-focus:  var(--color-heading);
    --input-radius:        var(--radius-base);

    /* -----------------------------------------
       BUTTONS – SEMANTIC
    ----------------------------------------- */
    --btn-padding:          clamp(0.625rem, 1vw, 0.875rem) clamp(1.5rem, 3vw, 2.25rem);
    --btn-radius:           var(--radius-pill);
    --btn-border-width:     2px;
    --btn-translate-hover:  -1px;
    --btn-icon-size:        0.9em;

    --btn-bg:               var(--color-primary);
    --btn-bg-hover:         var(--color-primary-hover);
    --btn-color:            var(--color-primary-text);

    --btn-accent-bg:        var(--color-accent);
    --btn-accent-hover:     var(--color-accent-hover);
    --btn-accent-color:     var(--color-accent-text);

    --btn-outline-color:    var(--color-primary);
    --btn-outline-accent:   var(--color-accent);

    --btn-disabled-bg:      var(--color-border);
    --btn-disabled-color:   var(--color-muted);

    /* -----------------------------------------
       FOCUS – SEMANTIC
    ----------------------------------------- */
    --focus-ring:    2px solid var(--color-red-500);
    --focus-offset:  2px;
}


/* =========================================
   3. RESET & BASE
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* Basis für rem-Berechnung – nicht ändern */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-size: var(--text-body);
    line-height: var(--leading-base);
    letter-spacing: var(--tracking-body);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition);
}

a:not(.btn):hover {
    opacity: 0.75;
}


/* =========================================
   4. TYPOGRAPHY
   ========================================= */

/* Base heading color */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
}

/* -----------------------------------------
   H1
   Standard: große fluid Überschrift.
   Auf Innenseiten (body ohne .home): etwas kleiner.

   Split-Markup-Unterstützung:
   <h1>
     <span class="topline">Über uns</span>
     <span class="bold">Wein vom Roten Hang,</span>
     <span class="light">mit Ruhe & Handwerk</span>
     <span class="subline">Kurze Zeile darunter</span>
   </h1>
----------------------------------------- */
h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-h1);
    margin-bottom: var(--space-lg);
}

/* Innenseiten: moderatere Größe – direkter Wert, kein Token-Zwischenschritt */
body:not(.home):not(.page-template-page-contained):not(.woocommerce-page) h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
}

/* Contained / WooCommerce: nochmals kleiner */
body.page-template-page-contained h1,
body.woocommerce-page h1.wp-block-heading,
body.woocommerce-page h1.document-title {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: var(--tracking-h2);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-xl);
}

/* H1 Split Spans – letter-spacing wird vom Parent h1 geerbt */
h1 .light {
    display: block;
    font-weight: var(--weight-h1-light);
}

h1 .bold {
    display: block;
    font-weight: var(--weight-h1-bold);
    font-style: italic;
}

/* Topline & Subline als H1-Kinder (Block-System)
   Explizites tracking-Reset: kleine Schrift soll H1-Tracking (-0.05em) nicht erben. */
h1 .topline {
    margin-bottom: var(--space-xs);
    letter-spacing: var(--tracking-wide);  /* uppercase → weites Tracking */
}

h1 .subline {
    margin-top: var(--space-sm);
    letter-spacing: var(--tracking-body);  /* neutral */
}

/* -----------------------------------------
   TOPLINE
   Auch standalone außerhalb von H1 nutzbar.
----------------------------------------- */
.topline {
    display: block;
    font-family: var(--font-base);
    font-size: var(--text-topline);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
}

/* -----------------------------------------
   SUBLINE
   Auch standalone außerhalb von H1 nutzbar.
----------------------------------------- */
.subline {
    display: block;
    font-family: var(--font-base);
    font-size: var(--text-subline);
    font-weight: var(--weight-regular);
    line-height: var(--leading-base);
    color: var(--color-text);
    margin-top: var(--space-sm);
}

/* -----------------------------------------
   H2
----------------------------------------- */
h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-h2);
    margin-bottom: var(--space-md);
}

/* -----------------------------------------
   H3
----------------------------------------- */
h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-h3);
    margin-bottom: var(--space-md);
}

/* -----------------------------------------
   H4 – H6
----------------------------------------- */
h4 {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

h5 {
    font-size: var(--text-h5);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

h6 {
    font-size: var(--text-h6);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

/* -----------------------------------------
   BODY TEXT
----------------------------------------- */
p {
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin-bottom: var(--space-md);
    padding-left: 1.5rem;
}


/* =========================================
   5. BUTTONS
   -----------------------------------------
   <button>-Tag bekommt nur einen Reset.
   Visuelles Pill-Styling kommt ausschließlich über .btn-Klasse.
   So bleiben Strukturbuttons (Galerie-Trigger, Lightbox-Close,
   Drawer-Toggle, Form-Helper) unangetastet.
   ========================================= */
button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: none;

    font-family: var(--font-base);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);

    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

.btn-primary {
    background: var(--btn-bg);
    color: var(--btn-color);
}

.btn-primary:hover {
    background: var(--btn-bg-hover);
    transform: translateY(var(--btn-translate-hover));
    box-shadow: var(--btn-shadow-primary);
    opacity: 1; /* Überschreibt a:hover opacity */
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-color);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--btn-secondary-hover);
    color: var(--btn-secondary-color);
    transform: translateY(var(--btn-translate-hover));
    box-shadow: var(--btn-shadow-accent);
    opacity: 1;
}

.btn-accent {
    background: var(--btn-accent-bg);
    color: var(--btn-accent-color);
}

.btn-accent:hover {
    background: var(--btn-accent-hover);
    transform: translateY(var(--btn-translate-hover));
    box-shadow: var(--btn-shadow-accent);
    opacity: 1;
}

.btn-outline {
    background: transparent;
    color: var(--btn-outline-color);
    border: var(--btn-border-width) solid var(--btn-outline-color);
}

.btn-outline:hover {
    background: var(--btn-outline-color);
    color: var(--btn-color);
    transform: translateY(var(--btn-translate-hover));
    opacity: 1;
}

.btn-outline-accent {
    background: transparent;
    color: var(--btn-outline-accent);
    border: var(--btn-border-width) solid var(--btn-outline-accent);
}

.btn-outline-accent:hover {
    background: var(--btn-outline-accent);
    color: var(--btn-accent-color);
    transform: translateY(var(--btn-translate-hover));
    opacity: 1;
}

.btn i,
.btn svg {
    font-size: var(--btn-icon-size);
}

.btn:disabled,
.btn.disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* WooCommerce / Shop CTA compatibility */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.checkout-button,
.add_to_cart_button {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border-radius: var(--btn-radius);
    border: none;
    font-weight: var(--weight-semibold);
    transition: var(--transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.add_to_cart_button:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-text);
    transform: translateY(var(--btn-translate-hover));
    box-shadow: var(--btn-shadow-primary);
}

.woocommerce div.product .stock,
.product .price,
.woocommerce .price {
    color: var(--color-accent);
}

.onsale,
.badge,
.product-badge {
    background: var(--color-sage-100);
    color: var(--color-sage-700);
    border-radius: var(--radius-pill);
}



/* =========================================
   6. FOCUS
   ========================================= */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}


/* =========================================
   7. LAYOUT & CONTAINER
   ========================================= */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Schmalere Container-Varianten */
.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--xl  { max-width: var(--container-xl); }   /* = Standard */
.container--2xl { max-width: var(--container-2xl); }

/* Lesebreite: max. 75ch – besser für langen Text */
.container--reading {
    max-width: 75ch;
    margin-inline: auto;
}

/* Mobile: engeres Padding */
/* 640px = --bp-sm (siehe Dokumentation oben) */
@media (max-width: 640px) {
    .container {
        padding-inline: var(--container-padding-mobile);
    }
}

.site-content {
    min-height: calc(100vh - var(--header-height));
}

.entry-content.container {
    padding-block: var(--space-3xl);
}


/* =========================================
   8. GRID UTILITIES
   Schlankes Grid-System auf Basis CSS Grid.
   Tokens definieren Gap und Spaltenanzahl.

   Verwendung:
     <div class="grid grid--2">          – 2 Spalten (Desktop)
     <div class="grid grid--3 grid--sm-1"> – 3 Desktop, 1 Mobile
     <div class="grid grid--auto">       – Auto-fill, min 280px

   Responsive Modifier:
     grid--sm-[n]  → gilt ab 0 (Mobile-first Override)
     grid--md-[n]  → gilt ab 768px
   ========================================= */

/* Basis */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--_cols, 1), 1fr);
    gap: var(--grid-gap);
}

/* Gap-Modifier */
.grid--gap-sm  { gap: var(--grid-gap-sm); }
.grid--gap-lg  { gap: var(--grid-gap-lg); }
.grid--gap-none { gap: 0; }

/* Auto-fill: Spalten so breit wie möglich, min. 280px */
.grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-col), 100%), 1fr));
}

/* Spalten-Modifier: Mobile-first (gelten ab 0px) */
.grid--1  { --_cols: 1; }
.grid--2  { --_cols: 2; }
.grid--3  { --_cols: 3; }
.grid--4  { --_cols: 4; }
.grid--6  { --_cols: 6; }
.grid--12 { --_cols: 12; }

/* Tablet-Overrides (≥ 768px) */
@media (min-width: 768px) {
    .grid--md-1  { --_cols: 1; }
    .grid--md-2  { --_cols: 2; }
    .grid--md-3  { --_cols: 3; }
    .grid--md-4  { --_cols: 4; }
    .grid--md-6  { --_cols: 6; }
    .grid--md-12 { --_cols: 12; }
}

/* Desktop-Overrides (≥ 1024px) */
@media (min-width: 1024px) {
    .grid--lg-1  { --_cols: 1; }
    .grid--lg-2  { --_cols: 2; }
    .grid--lg-3  { --_cols: 3; }
    .grid--lg-4  { --_cols: 4; }
    .grid--lg-6  { --_cols: 6; }
    .grid--lg-12 { --_cols: 12; }
}

/* Typische responsive Patterns als Convenience-Klassen
   Format: grid--[mobile]x[desktop]
   Erspart zwei Modifier-Klassen für die häufigsten Fälle.
*/
.grid--1x2  { --_cols: 1; }
.grid--1x3  { --_cols: 1; }
.grid--2x4  { --_cols: 2; }

@media (min-width: 768px) {
    .grid--1x2 { --_cols: 2; }
    .grid--2x4 { --_cols: 4; }
}

@media (min-width: 1024px) {
    .grid--1x3 { --_cols: 3; }
}

/* Einzelne Spalten-Spans für Kindelemente
   z. B. <div class="col-span-2"> in einem .grid--4
*/
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-6  { grid-column: span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Auf Mobile: spans zurücksetzen damit nichts überläuft */
@media (max-width: 640px) {
    .col-span-2,
    .col-span-3,
    .col-span-4,
    .col-span-6 {
        grid-column: span 1;
    }
}


/* =========================================
   9. SECTION UTILITIES
   Hintergrund und Spacing-Modifier für Blocks.
   Nutzung über custom_css_class im Editor.
   ========================================= */

/* Backgrounds */
.bg-alt,
.section--bg-alt   { background-color: var(--color-bg-alt); }

.bg-dark,
.section--bg-dark  { background-color: var(--color-bg-dark); }

.bg-light,
.section--bg-light { background-color: var(--color-bg-light); }

.section--bg-white { background-color: var(--color-bg); }

/* Spacing Overrides
   Überschreibt das Block-eigene padding-block.
   Suffix entspricht semantischer Größe, nicht
   dem raw space-Token.
*/
/* Mapping: Suffix = tatsächliche Spacing-Stufe (1:1 – kein verstecktes Remapping) */
.section--spacing-none { padding-block: 0; }
.section--spacing-sm   { padding-block: var(--space-sm); }
.section--spacing-md   { padding-block: var(--space-md); }
.section--spacing-lg   { padding-block: var(--space-lg); }
.section--spacing-xl   { padding-block: var(--space-xl); }
.section--spacing-2xl  { padding-block: var(--space-2xl); }
.section--spacing-3xl  { padding-block: var(--space-3xl); }


/* =========================================
   10. TABELLEN
   ========================================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
    text-align: left;
    font-size: var(--text-body);
}

th,
td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

th {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    background-color: var(--color-bg-light);
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:nth-child(even) {
    background-color: var(--color-row-alt);
}

/* Responsive: horizontales Scrollen statt Overflow */
@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* =========================================
   11. BLOCKQUOTES
   ========================================= */
blockquote {
    margin: var(--space-md) 0;
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid var(--color-accent);
    background-color: var(--color-bg-alt);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

blockquote p {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-heading);
    margin-bottom: 0;
}

blockquote cite,
blockquote footer {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--color-muted);
}


/* =========================================
   12. CODE
   ========================================= */
code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

p code,
li code,
td code {
    background-color: var(--color-bg-light);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--color-heading);
}

pre {
    background-color: var(--color-bg-dark);
    color: var(--color-heading);
    padding: var(--space-md);
    border-radius: var(--radius-base);
    overflow-x: auto;
    margin-bottom: var(--space-md);
    line-height: var(--leading-base);
}

pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
}


/* =========================================
   13. GUTENBERG UTILITIES
   ========================================= */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    align-items: center;
}

.wp-block-button {
    margin: 0;
}


/* =========================================
   14. BILDER & GUTENBERG ALIGNMENT
   ========================================= */
figure {
    margin-bottom: var(--space-md);
}

figcaption,
.wp-block-image figcaption {
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-align: center;
}

.alignleft {
    float: left;
    margin-right: var(--space-md);
    margin-bottom: var(--space-sm);
    max-width: 50%;
}

.alignright {
    float: right;
    margin-left: var(--space-md);
    margin-bottom: var(--space-sm);
    max-width: 50%;
}

.aligncenter {
    display: block;
    margin-inline: auto;
    text-align: center;
}

/* Clearfix */
.entry-content::after,
.wp-block-group::after {
    content: "";
    display: table;
    clear: both;
}

/*
 * alignfull / alignwide
 *
 * 100vw + calc(50% - 50vw) erzeugt einen bekannten Scrollbar-Bug:
 * vw schließt die Scrollbar-Breite ein, das Layout nicht →
 * horizontaler Shift bei scrollbaren Seiten möglich.
 *
 * Robuste Alternative: negative margin via container-Padding.
 * Funktioniert zuverlässig solange .container padding-inline hat.
 * Falls das Theme overflow-x: hidden setzt, ist 100vw auch okay –
 * dann diesen Block durch die 100vw-Variante ersetzen.
 */
.alignfull {
    width: calc(100% + 2 * var(--container-padding));
    max-width: none;
    margin-inline: calc(-1 * var(--container-padding));
}

.alignwide {
    width: calc(100% + 2 * var(--container-padding));
    max-width: none;
    margin-inline: calc(-1 * var(--container-padding));
}

@media (min-width: 1200px) {
    .alignwide {
        /* Auf Desktop: etwas breiter als Container, aber nicht full-bleed.
           transform statt margin-inline: auto – robusteres optisches Zentrierung
           bei ungeraden Breiten. */
        width: min(calc(var(--max-width) + 200px), 95vw);
        max-width: none;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}


/* =========================================
   15. FORMULARE (CF7)
   ========================================= */
.bd_fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

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

.bd_form-group {
    margin-bottom: var(--space-md);
}

.bd_label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
}

.bd_required {
    color: var(--color-error);
    margin-left: 2px;
}

.bd_input,
.bd_textarea {
    display: block;
    width: 100%;
    padding: var(--input-padding);
    background-color: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--input-radius);
    font-family: var(--font-base);
    font-size: var(--text-body);
    color: var(--color-text);
    transition: var(--transition);
}

.bd_textarea {
    resize: vertical;
    min-height: 150px;
}

.bd_input:focus-visible,
.bd_textarea:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border: 1px solid var(--input-border-focus);
}

/* CF7 Korrekturen */
.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-not-valid-tip {
    font-size: var(--text-sm);
    color: var(--color-error);
    margin-top: var(--space-xs);
    display: block;
}

.wpcf7-response-output {
    margin: var(--space-md) 0 0 0 !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-base);
    font-size: var(--text-sm);
}


/* =========================================
   16. BENZDIGITAL BLOCK COMPATIBILITY
   Theme-owned Blocks nutzen dieselben Primitives wie Jana.
   ========================================= */
:root {
    --color-surface: var(--color-bg);
    --color-grey-900: var(--color-ink-900);
    --color-grey-800: var(--color-ink-800);
    --color-grey-700: var(--color-ink-700);
    --color-grey-200: var(--color-ink-300);
    --color-grey-100: var(--color-ink-100);
    --color-accent-dark: var(--color-accent-hover);
    --color-brand-yellow-hover: var(--color-primary-hover);
    --color-brand-orange: var(--color-curry-600);
    --color-text-link: var(--color-accent);
    --color-text-link-hover: var(--color-accent-hover);

    --color-black-8: rgba(0, 0, 0, 0.08);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-45: rgba(0, 0, 0, 0.45);
    --color-black-75: rgba(0, 0, 0, 0.75);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-35: rgba(255, 255, 255, 0.35);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-90: rgba(255, 255, 255, 0.9);

    --color-success-bg: rgba(83, 126, 45, 0.12);
    --color-success-line: rgba(83, 126, 45, 0.24);
    --color-error-bg: rgba(173, 17, 42, 0.1);
    --color-error-line: rgba(173, 17, 42, 0.22);
    --color-info-bg: rgba(30, 59, 113, 0.1);
    --color-info-line: rgba(30, 59, 113, 0.22);
    --color-warning-bg: rgba(247, 167, 0, 0.14);
    --color-warning-line: rgba(247, 167, 0, 0.28);

    --radius-md: var(--radius-lg);
    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-body);
    --font-size-lg: var(--text-lg);
    --font-size-h1: var(--text-h1);
    --font-size-h2: var(--text-h2);
    --font-size-h3: var(--text-h3);
    --text-md: var(--text-body);

    --motion-duration-fast: var(--duration-fast);
    --motion-duration-base: var(--duration-normal);
    --motion-duration-slow: var(--duration-slow);
    --motion-ease: var(--ease-ui);
    --motion-ease-out: var(--ease-enter);
    --motion-ease-expressive: var(--ease-expressive);
    --motion-shift-sm: var(--size-1);
    --motion-shift-md: var(--size-2);
    --motion-reveal-distance: var(--size-5);
    --motion-scale-sm: 1.01;
    --motion-scale-md: 1.02;

    --container-narrow: 900px;
    --container-reading: 72ch;
    --container-default: var(--max-width);
    --container-wide: var(--container-2xl);
    --site-min-height: calc(100vh - var(--header-height));
    --layout-sidebar-min: 18rem;

    --grid-gap-xs: var(--space-xs);
    --grid-gap-md: var(--space-lg);
    --grid-gap-xl: var(--space-3xl);
    --grid-min-col-sm: 220px;
    --grid-min-col-lg: 360px;

    --section-padding-none: 0;
    --section-padding-xs: var(--space-xs);
    --section-padding-sm: var(--space-sm);
    --section-padding-md: var(--space-md);
    --section-padding-lg: var(--space-lg);
    --section-padding-xl: var(--space-xl);
    --section-padding-2xl: var(--space-2xl);
    --section-padding-3xl: var(--space-3xl);

    --hero-bg: var(--color-bg);
    --color-hero-home-bg: var(--color-bg-light);
    --hero-bg-home: linear-gradient(135deg, var(--color-beige-50) 0%, var(--color-bg) 55%, var(--color-beige-100) 100%);
    --hero-bg-page: var(--color-bg);
    --hero-bg-text: var(--color-bg);
    --hero-bg-shop: linear-gradient(135deg, var(--color-ink-900), var(--color-blue-700));
    --hero-color: var(--color-text);
    --hero-title: var(--color-heading);
    --hero-muted: var(--color-muted);
    --hero-invert-color: var(--color-white);
    --hero-invert-muted: var(--color-white-90);
    --hero-padding-y: clamp(4rem, 7vw, 7rem);
    --hero-padding-x: clamp(1.25rem, 4vw, 4rem);
    --hero-gap: clamp(2rem, 5vw, 5rem);
    --hero-min-height: min(760px, calc(100vh - var(--header-height)));
    --hero-title-size-home: clamp(3rem, 7vw, 6rem);
    --hero-title-size-page: clamp(2.5rem, 6vw, 5rem);
    --hero-title-size-text: clamp(2.25rem, 5vw, 4.5rem);
    --hero-title-size-shop: clamp(2.5rem, 6vw, 5rem);
    --hero-text-size: clamp(1.05rem, 1.8vw, 1.25rem);
    --hero-topline-size: clamp(0.82rem, 1.1vw, 0.95rem);
    --hero-media-radius: var(--radius-lg);
    --hero-media-shadow: 0 24px 70px rgba(43, 45, 66, 0.14);
    --hero-media-bg: var(--color-bg-light);
    --hero-media-placeholder-bg: linear-gradient(135deg, var(--color-bg-light), var(--color-beige-100));
    --hero-media-placeholder-line: rgba(43, 45, 66, 0.14);
    --hero-media-placeholder-primary: linear-gradient(135deg, var(--color-red-500), var(--color-blue-500));
    --hero-media-placeholder-accent: rgba(247, 167, 0, 0.72);
    --hero-meta-bg: rgba(255, 255, 255, 0.12);
    --hero-meta-border: rgba(255, 255, 255, 0.18);

    --card-bg: var(--color-surface);
    --card-bg-muted: var(--color-bg-light);
    --card-bg-dark: var(--color-ink-900);
    --card-color: var(--color-text);
    --card-muted: var(--color-muted);
    --card-title: var(--color-heading);
    --card-border: var(--color-border);
    --card-border-hover: var(--color-primary);
    --card-radius: var(--radius-lg);
    --card-padding: clamp(1.25rem, 2.8vw, 2rem);
    --card-padding-lg: clamp(1.6rem, 3.4vw, 2.5rem);
    --card-gap: var(--space-md);
    --card-grid-gap: var(--grid-gap);
    --card-grid-min: var(--grid-min-col);
    --card-icon-size: 44px;
    --card-shadow: none;
    --card-shadow-elevated: 0 18px 44px rgba(43, 45, 66, 0.08);
    --card-shadow-hover: 0 22px 54px rgba(43, 45, 66, 0.12);

    --content-bg: var(--color-bg);
    --content-bg-muted: var(--color-bg-light);
    --content-bg-dark: var(--color-ink-900);
    --content-color: var(--color-text);
    --content-title: var(--color-heading);
    --content-muted: var(--color-muted);
    --content-invert-color: var(--color-white);
    --content-invert-muted: var(--color-white-90);
    --content-accent: var(--color-primary);
    --content-border: var(--color-border);
    --content-width-reading: var(--container-reading);
    --content-width-default: 860px;
    --content-width-wide: var(--container-xl);
    --content-gap: var(--grid-gap);
    --content-stack-gap: var(--space-lg);
    --content-padding-y: clamp(4rem, 7vw, 7rem);
    --content-card-padding: clamp(1.75rem, 4vw, 3.25rem);
    --content-media-radius: var(--radius-lg);
    --content-media-shadow: var(--card-shadow-elevated);
    --content-media-bg: var(--color-bg-light);
    --content-panel-bg: var(--color-surface);
    --content-panel-shadow: var(--card-shadow-elevated);

    --media-bg: var(--color-bg);
    --media-bg-muted: var(--color-bg-light);
    --media-bg-dark: var(--color-ink-900);
    --media-color: var(--color-text);
    --media-title: var(--color-heading);
    --media-muted: var(--color-muted);
    --media-invert-color: var(--color-white);
    --media-invert-muted: var(--color-white-90);
    --media-border: var(--color-border);
    --media-border-dark: rgba(255, 255, 255, 0.18);
    --media-radius: var(--radius-lg);
    --media-gap: var(--grid-gap);
    --media-grid-min: var(--grid-min-col);
    --media-shadow: var(--card-shadow-elevated);
    --media-shadow-hover: var(--card-shadow-hover);
    --media-caption-bg: rgba(255, 255, 255, 0.92);
    --media-caption-bg-dark: rgba(255, 255, 255, 0.08);
    --media-caption-color: var(--color-text);
    --media-play-bg: var(--color-primary);
    --media-play-color: var(--color-ink-900);
    --media-play-size: 4.5rem;
    --media-download-bg: var(--color-surface);
    --media-download-bg-hover: var(--color-bg-light);
    --media-download-bg-dark: rgba(255, 255, 255, 0.07);
    --media-download-bg-dark-hover: rgba(255, 255, 255, 0.12);
    --media-download-icon-bg: var(--color-bg-light);
    --media-download-icon-bg-dark: rgba(255, 255, 255, 0.1);
    --media-download-icon-color: var(--color-primary);
    --media-download-icon-size: 2.75rem;

    --trust-bg: var(--color-bg);
    --trust-bg-muted: var(--color-bg-light);
    --trust-bg-dark: var(--color-ink-900);
    --trust-color: var(--color-text);
    --trust-title: var(--color-heading);
    --trust-muted: var(--color-muted);
    --trust-invert-color: var(--color-white);
    --trust-invert-muted: var(--color-white-90);
    --trust-border: var(--color-border);
    --trust-border-dark: rgba(255, 255, 255, 0.18);
    --trust-radius: var(--radius-lg);
    --trust-gap: var(--grid-gap);
    --trust-grid-min: var(--grid-min-col);
    --trust-card-bg: var(--color-surface);
    --trust-card-bg-muted: var(--color-bg-light);
    --trust-card-bg-dark: rgba(255, 255, 255, 0.07);
    --trust-card-bg-muted-dark: rgba(255, 255, 255, 0.1);
    --trust-card-shadow: var(--card-shadow-elevated);
    --trust-card-shadow-hover: var(--card-shadow-hover);
    --trust-accent: var(--color-primary);
    --trust-avatar-size: 3rem;
    --trust-logo-height: 3.5rem;
    --trust-logo-bg: var(--color-surface);
    --trust-logo-bg-dark: rgba(255, 255, 255, 0.07);

    --dynamic-bg: var(--color-bg);
    --dynamic-bg-muted: var(--color-bg-light);
    --dynamic-bg-dark: var(--color-ink-900);
    --dynamic-color: var(--color-text);
    --dynamic-title: var(--color-heading);
    --dynamic-muted: var(--color-muted);
    --dynamic-invert-color: var(--color-white);
    --dynamic-invert-muted: var(--color-white-90);
    --dynamic-border: var(--color-border);
    --dynamic-border-dark: rgba(255, 255, 255, 0.18);
    --dynamic-radius: var(--radius-lg);
    --dynamic-gap: var(--grid-gap);
    --dynamic-grid-min: var(--grid-min-col);
    --dynamic-card-bg: var(--color-surface);
    --dynamic-card-bg-muted: var(--color-bg-light);
    --dynamic-card-bg-dark: rgba(255, 255, 255, 0.07);
    --dynamic-card-shadow: var(--card-shadow-elevated);
    --dynamic-card-shadow-hover: var(--card-shadow-hover);
    --dynamic-accent: var(--color-primary);
    --dynamic-media-bg: var(--color-bg-light);
    --dynamic-media-radius: var(--radius-lg);
    --dynamic-tag-bg: var(--color-bg-light);
    --dynamic-tag-color: var(--color-heading);
    --dynamic-tag-bg-dark: rgba(255, 255, 255, 0.1);
    --dynamic-avatar-size: 4.25rem;

    --shop-bg: var(--color-bg);
    --shop-bg-muted: var(--color-bg-light);
    --shop-bg-dark: var(--color-ink-900);
    --shop-color: var(--color-text);
    --shop-title: var(--color-heading);
    --shop-muted: var(--color-muted);
    --shop-invert-color: var(--color-white);
    --shop-invert-muted: var(--color-white-90);
    --shop-border: var(--color-border);
    --shop-border-dark: rgba(255, 255, 255, 0.18);
    --shop-radius: var(--radius-lg);
    --shop-gap: var(--grid-gap);
    --shop-grid-min: var(--grid-min-col);
    --shop-card-bg: var(--color-surface);
    --shop-card-bg-muted: var(--color-bg-light);
    --shop-card-bg-dark: rgba(255, 255, 255, 0.07);
    --shop-card-shadow: var(--card-shadow-elevated);
    --shop-card-shadow-hover: var(--card-shadow-hover);
    --shop-accent: var(--color-primary);
    --shop-price-color: var(--color-heading);
    --shop-badge-bg: var(--color-primary);
    --shop-badge-color: var(--color-ink-900);
    --shop-media-bg: var(--color-bg-light);
    --shop-summary-bg: var(--color-surface);
    --shop-summary-bg-muted: var(--color-bg-light);
    --shop-pause-bg: var(--color-warning-bg);
    --shop-pause-border: var(--color-warning-line);
    --shop-pause-accent: var(--color-warning);
    --shop-pause-color: var(--color-ink-900);

    --pricing-bg: var(--color-bg);
    --pricing-bg-muted: var(--color-bg-light);
    --pricing-bg-dark: var(--color-ink-900);
    --pricing-color: var(--color-text);
    --pricing-title: var(--color-heading);
    --pricing-muted: var(--color-muted);
    --pricing-invert-color: var(--color-white);
    --pricing-invert-muted: var(--color-white-90);
    --pricing-border: var(--color-border);
    --pricing-border-dark: rgba(255, 255, 255, 0.18);
    --pricing-radius: var(--radius-lg);
    --pricing-gap: var(--grid-gap);
    --pricing-grid-min: var(--grid-min-col);
    --pricing-card-bg: var(--color-surface);
    --pricing-card-bg-muted: var(--color-bg-light);
    --pricing-card-bg-dark: rgba(255, 255, 255, 0.07);
    --pricing-card-shadow: var(--card-shadow-elevated);
    --pricing-card-shadow-hover: var(--card-shadow-hover);
    --pricing-accent: var(--color-primary);
    --pricing-badge-bg: var(--color-primary);
    --pricing-badge-color: var(--color-ink-900);
    --pricing-price-color: var(--color-heading);
    --pricing-feature-icon-bg: var(--color-bg-light);
    --pricing-feature-icon-color: var(--color-primary);

    --table-bg: var(--color-surface);
    --table-bg-muted: var(--color-bg-light);
    --table-bg-dark: rgba(255, 255, 255, 0.07);
    --table-color: var(--color-text);
    --table-title: var(--color-heading);
    --table-muted: var(--color-muted);
    --table-invert-color: var(--color-white);
    --table-invert-muted: var(--color-white-90);
    --table-border: var(--color-border);
    --table-border-dark: rgba(255, 255, 255, 0.18);
    --table-header-bg: var(--color-bg-light);
    --table-header-bg-dark: rgba(255, 255, 255, 0.1);
    --table-row-hover: var(--color-bg-light);
    --table-row-hover-dark: rgba(255, 255, 255, 0.09);
    --table-radius: var(--radius-lg);
    --table-shadow: var(--card-shadow-elevated);

    --form-bg: var(--color-bg);
    --form-bg-muted: var(--color-bg-light);
    --form-bg-dark: var(--color-ink-900);
    --form-color: var(--color-text);
    --form-title: var(--color-heading);
    --form-muted: var(--color-muted);
    --form-invert-color: var(--color-white);
    --form-invert-muted: var(--color-white-90);
    --form-panel-bg: var(--color-surface);
    --form-panel-bg-muted: var(--color-bg-light);
    --form-panel-bg-dark: rgba(255, 255, 255, 0.07);
    --form-border: var(--color-border);
    --form-border-dark: rgba(255, 255, 255, 0.18);
    --form-radius: var(--radius-lg);
    --form-gap: var(--grid-gap);
    --form-field-gap: var(--space-sm);
    --form-field-height: 3rem;
    --form-field-padding: 0.78rem 0.9rem;
    --form-field-bg: var(--color-surface);
    --form-field-bg-focus: var(--color-surface);
    --form-field-bg-dark: rgba(255, 255, 255, 0.08);
    --form-field-bg-dark-focus: rgba(255, 255, 255, 0.1);
    --form-field-border: var(--color-border);
    --form-field-border-dark: rgba(255, 255, 255, 0.18);
    --form-field-focus: var(--color-primary);
    --form-shadow: var(--card-shadow-elevated);
    --form-shadow-hover: var(--card-shadow-hover);
    --form-success: var(--color-success);
    --form-error: var(--color-error);
    --contact-bg: var(--color-bg-light);
    --contact-icon-bg: var(--color-bg-light);
    --contact-icon-bg-dark: rgba(255, 255, 255, 0.1);
    --contact-icon-color: var(--color-primary);
    --contact-map-bg: var(--color-bg-light);

    --btn-height-sm: 36px;
    --btn-height: 44px;
    --btn-height-lg: 52px;
    --btn-padding-sm: 0.55rem 0.85rem;
    --btn-padding-lg: 0.9rem 1.35rem;
    --btn-font-size-sm: var(--text-sm);
    --btn-font-size: 0.95rem;
    --btn-font-size-lg: var(--text-body);
    --btn-font-weight: var(--weight-semibold);
    --btn-gap: 0.5rem;
    --btn-shadow-hover: 0 10px 26px rgba(43, 45, 66, 0.12);
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: var(--color-primary-hover);
    --btn-primary-color: var(--color-primary-text);
    --btn-primary-border: var(--btn-primary-bg);
    --btn-secondary-bg: var(--color-red-500);
    --btn-secondary-hover: var(--color-red-600);
    --btn-secondary-color: var(--color-white);
    --btn-secondary-border: var(--btn-secondary-bg);
    --btn-accent-border: var(--btn-accent-bg);
    --btn-outline-bg: transparent;
    --btn-outline-border: var(--color-border);
    --btn-outline-hover-bg: var(--color-ink-900);
    --btn-outline-hover: var(--color-white);
    --btn-ghost-bg: var(--color-bg-light);
    --btn-ghost-hover: var(--color-bg-alt);
    --btn-ghost-color: var(--color-ink-900);
    --btn-ghost-border: transparent;
    --btn-link-color: var(--color-text-link);
    --btn-link-hover: var(--color-text-link-hover);
    --btn-disabled-border: var(--color-border);

    --bd-s-accent: var(--color-accent);
    --bd-s-accent-dark: var(--color-accent-dark);
    --bd-s-text: var(--color-text);
    --bd-s-muted: var(--color-muted);
    --bd-s-surface: var(--color-surface);
    --bd-accordion-bg: var(--color-surface);
    --bd-accordion-bg-hover: var(--color-bg-light);
    --bd-accordion-bg-open: var(--color-bg-light);
    --bd-accordion-border: var(--color-border);
    --bd-accordion-text: var(--color-text);
    --bd-accordion-title: var(--color-heading);
    --bd-accordion-accent: var(--color-accent);
    --bd-accordion-radius: var(--radius-lg);
    --bd-accordion-shadow: none;
    --bd-accordion-shadow-hover: var(--card-shadow-elevated);
    --bd-accordion-gap: var(--space-sm);
    --bd-accordion-summary-padding: var(--space-md);
    --bd-accordion-content-padding: var(--space-md);
    --bd-accordion-icon-bg: var(--color-bg);
    --bd-accordion-icon-color: var(--color-accent);
}

.bd-container {
    width: 100%;
    max-width: var(--bd-container-max, var(--container-default));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.bd-container--full {
    --bd-container-max: none;
    padding-inline: 0;
}

.bd-container--wide { --bd-container-max: var(--container-wide); }
.bd-container--default { --bd-container-max: var(--container-default); }
.bd-container--narrow { --bd-container-max: var(--container-narrow); }
.bd-container--reading { --bd-container-max: var(--container-reading); }

@media (max-width: 767px) {
    .bd-container {
        padding-inline: var(--container-padding-mobile);
    }

    .bd-container--full {
        padding-inline: 0;
    }
}

.bd-grid {
    display: grid;
    grid-template-columns: repeat(var(--bd-grid-cols, 1), minmax(0, 1fr));
    gap: var(--bd-grid-gap, var(--grid-gap));
    align-items: var(--bd-grid-align, stretch);
}

.bd-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--bd-grid-min, var(--grid-min-col)), 100%), 1fr));
}

.bd-grid--auto-sm { --bd-grid-min: var(--grid-min-col-sm); }
.bd-grid--auto-lg { --bd-grid-min: var(--grid-min-col-lg); }
.bd-grid--gap-none { --bd-grid-gap: 0; }
.bd-grid--gap-xs { --bd-grid-gap: var(--grid-gap-xs); }
.bd-grid--gap-sm { --bd-grid-gap: var(--grid-gap-sm); }
.bd-grid--gap-md { --bd-grid-gap: var(--grid-gap-md); }
.bd-grid--gap-lg { --bd-grid-gap: var(--grid-gap-lg); }
.bd-grid--gap-xl { --bd-grid-gap: var(--grid-gap-xl); }
.bd-grid--align-start { --bd-grid-align: start; }
.bd-grid--align-center { --bd-grid-align: center; }
.bd-grid--align-end { --bd-grid-align: end; }
.bd-grid--dense { grid-auto-flow: dense; }
.bd-grid--cols-1 { --bd-grid-cols: 1; }
.bd-grid--cols-2 { --bd-grid-cols: 2; }
.bd-grid--cols-3 { --bd-grid-cols: 3; }
.bd-grid--cols-4 { --bd-grid-cols: 4; }
.bd-grid--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bd-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bd-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bd-grid--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.bd-grid--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }

.bd-stack {
    display: grid;
    gap: var(--bd-stack-gap, var(--space-md));
}

.bd-stack--xs { --bd-stack-gap: var(--space-xs); }
.bd-stack--sm { --bd-stack-gap: var(--space-sm); }
.bd-stack--lg { --bd-stack-gap: var(--space-lg); }
.bd-stack--xl { --bd-stack-gap: var(--space-xl); }
.bd-stack--2xl { --bd-stack-gap: var(--space-2xl); }

.bd-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bd-cluster-gap, var(--space-sm));
    align-items: var(--bd-cluster-align, center);
    justify-content: var(--bd-cluster-justify, flex-start);
}

.bd-cluster--between { --bd-cluster-justify: space-between; }
.bd-cluster--center { --bd-cluster-justify: center; }
.bd-cluster--end { --bd-cluster-justify: flex-end; }
.bd-cluster--start { --bd-cluster-justify: flex-start; }
.bd-cluster--align-start { --bd-cluster-align: flex-start; }

.bd-split,
.bd-sidebar {
    display: grid;
    gap: var(--grid-gap);
}

.bd-split {
    align-items: center;
}

@media (min-width: 768px) {
    .bd-split--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bd-split--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .bd-split--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .bd-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .bd-split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .bd-sidebar { grid-template-columns: minmax(0, 1fr) minmax(var(--layout-sidebar-min), 0.38fr); }
    .bd-sidebar--left { grid-template-columns: minmax(var(--layout-sidebar-min), 0.38fr) minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .bd-grid--cols-2,
    .bd-grid--cols-3,
    .bd-grid--cols-4,
    .bd-grid--6-6,
    .bd-grid--5-7,
    .bd-grid--7-5,
    .bd-grid--4-8,
    .bd-grid--8-4 {
        grid-template-columns: 1fr;
    }
}

.bd-section {
    position: relative;
    padding-block: var(--bd-section-padding-y, var(--section-padding-lg));
    background: var(--bd-section-bg, transparent);
    color: var(--bd-section-color, inherit);
}

.bd-section--flush { --bd-section-padding-y: 0; }
.bd-section--xs { --bd-section-padding-y: var(--section-padding-xs); }
.bd-section--sm { --bd-section-padding-y: var(--section-padding-sm); }
.bd-section--md { --bd-section-padding-y: var(--section-padding-md); }
.bd-section--lg { --bd-section-padding-y: var(--section-padding-lg); }
.bd-section--xl { --bd-section-padding-y: var(--section-padding-xl); }
.bd-section--2xl { --bd-section-padding-y: var(--section-padding-2xl); }
.bd-section--3xl { --bd-section-padding-y: var(--section-padding-3xl); }

.bd-block {
    position: relative;
}

.bd-spacing-top--none { padding-top: 0; }
.bd-spacing-top--xs { padding-top: var(--section-padding-xs); }
.bd-spacing-top--sm { padding-top: var(--section-padding-sm); }
.bd-spacing-top--md { padding-top: var(--section-padding-md); }
.bd-spacing-top--lg { padding-top: var(--section-padding-lg); }
.bd-spacing-top--xl { padding-top: var(--section-padding-xl); }
.bd-spacing-top--xxl { padding-top: var(--section-padding-2xl); }
.bd-spacing-bottom--none { padding-bottom: 0; }
.bd-spacing-bottom--xs { padding-bottom: var(--section-padding-xs); }
.bd-spacing-bottom--sm { padding-bottom: var(--section-padding-sm); }
.bd-spacing-bottom--md { padding-bottom: var(--section-padding-md); }
.bd-spacing-bottom--lg { padding-bottom: var(--section-padding-lg); }
.bd-spacing-bottom--xl { padding-bottom: var(--section-padding-xl); }
.bd-spacing-bottom--xxl { padding-bottom: var(--section-padding-2xl); }

.bd-variant--default {
    background: var(--color-bg);
    color: var(--color-text);
}

.bd-variant--light,
.bd-variant--boxed {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.bd-variant--muted,
.bd-variant--minimal {
    background: transparent;
    color: var(--color-muted);
}

.bd-variant--dark {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.bd-variant--primary {
    background: var(--color-primary);
    color: var(--color-primary-text);
}

.bd-variant--secondary {
    background: var(--color-accent);
    color: var(--color-accent-text);
}