/* ==========================================================
   OLB LAYOUT & SPACING v1.0.1 — LOCKED (Design System-ændring DS-01, 2026-10-04)
   Generated from OLB_LAYOUT_SPACING_MASTER_v1.0_LOCKED + DS-01.
   Eneste ændring mod v1.0: nyt token --width-drawer (420px) til sidepaneler
   (mini-cart, Kurv Structure Plan v1.1 D22/S9). Ingen eksisterende værdi ændret.

   Fra v1.0 (uændret):
   Layout er eneste ejer af .olb-product-card__commerce{margin-top:auto} (G-05)
   og af produktgridet 2/3/4/5 (B-01).
   Eneste regelrettelse (X-07, auditbegrundet): .olb-checkout 1fr → minmax(0,1fr),
   jf. masterens egen governance 6. Identisk ved alle normale bredder.
   ========================================================== */

:root {
--space-0: 0;
--space-1: 0.25rem;   /* 4 */
--space-2: 0.5rem;    /* 8 */
--space-3: 0.75rem;   /* 12 */
--space-4: 1rem;      /* 16 */
--space-5: 1.25rem;   /* 20 */
--space-6: 1.5rem;    /* 24 */
--space-7: 2rem;      /* 32 */
--space-8: 2.5rem;    /* 40 */
--space-9: 3rem;      /* 48 */
--space-10: 4rem;     /* 64 */
--space-11: 5rem;     /* 80 */
--space-12: 6rem;     /* 96 */
--space-13: 7.5rem;   /* 120 */
--space-14: 10rem;    /* 160 */
--gap-hairline: var(--space-1);        /* 4 */
--gap-tight: var(--space-2);           /* 8 */
--gap-inline: var(--space-3);          /* 12 */
--gap-component: var(--space-4);       /* 16 */
--gap-form-row: var(--space-5);        /* 20 */
--gap-card-list: var(--space-6);       /* 24 */
--gap-block: var(--space-7);           /* 32 */

--section-space: var(--space-7);       /* 32 mobile */
--section-space-lg: var(--space-9);    /* 48 mobile */
--section-heading-gap: var(--space-4); /* 16 */

--hero-to-content-space: var(--space-6); /* 24 mobile */

--card-padding-product: clamp(0.5rem, 0.333rem + 0.833vw, 1rem);
--grid-gap-x: clamp(0.5rem, 0.0625rem + 1.1vw, 1.25rem);
--grid-gap-y: var(--space-4); /* 16 mobile */

--hero-padding: var(--space-5);      /* 20 mobile */
--hero-gap-eyebrow: var(--space-2); /* 8 */
--hero-gap-intro: var(--space-3);   /* 12 */
--hero-gap-cta: var(--space-5);     /* 20 */

--category-intro-to-grid: var(--space-5); /* 20 mobile */

--product-media-to-text: var(--space-2);  /* 8 */
--product-name-to-variant: var(--space-1);/* 4 */
--product-variant-to-price: var(--space-2);/* 8 */
--product-price-to-unit: var(--space-1);  /* 4 */
--product-data-to-cta: var(--space-3);    /* 12 */

--checkout-h1-gap: var(--space-6);        /* 24 mobile */
--checkout-section-gap: var(--space-4);   /* 16 */
--checkout-heading-gap: var(--space-4);   /* 16 */
--checkout-form-group-gap: var(--space-5);/* 20 */
--checkout-summary-row-gap: var(--space-3);/* 12 */
--checkout-total-to-cta: var(--space-5);  /* 20 */

--height-sticky-cta-bar: 72px; /* 56 target + 2×8 */
--height-posebar: 72px;

--gutter-page: clamp(12px, calc(0.125rem + 3.2vw), 48px);

--container-main: 1360px;
--container-wide: 1520px;
--container-product: 1240px;
--container-checkout: 1000px;
--container-narrow: 740px;
--container-prose: 700px;
--width-drawer: 420px;          /* DS-01: sidepanel (mini-cart). Bruges som min(var(--width-drawer), 100%) */

--bp-tablet: 768px;
--bp-desktop: 1024px;
--bp-wide: 1280px;
--bp-five-col: 1440px;

--height-topbar: 36px;
--height-header-mobile: 56px;
--height-header-desktop: 72px;
--height-nav-row: 52px;
--height-drawer-row: 52px;
--height-drawer-top: 56px;
--height-bottom-nav: 56px;

--safe-bottom: env(safe-area-inset-bottom, 0px);
--sticky-gap: 8px;
--bottom-nav-total: calc(var(--height-bottom-nav) + var(--safe-bottom));
--sticky-floor: calc(var(--bottom-nav-total) + var(--sticky-gap));

--content-bottom-pad-none: var(--space-9);
--content-bottom-pad-cta:
  calc(var(--sticky-floor) + var(--height-sticky-cta-bar) + var(--space-6));
--content-bottom-pad-posebar:
  calc(var(--bottom-nav-total) + var(--height-posebar) + var(--space-6));

--z-base: 0;
--z-raised: 10;
--z-sticky-local: 50;
--z-sticky-posebar: 100;
--z-sticky-cta: 110;
--z-header-sticky: 200;
--z-bottom-nav: 210;
--z-nav-dropdown: 300;
--z-drawer-scrim: 400;
--z-drawer: 410;
--z-modal-scrim: 500;
--z-modal: 510;
--z-toast: 600;
}

@media (min-width: 768px) {
  :root {
    --section-space: var(--space-8);          /* 40 */
    --section-space-lg: var(--space-10);      /* 64 */
    --section-heading-gap: var(--space-5);    /* 20 */
    --hero-to-content-space: var(--space-7);  /* 32 */
    --grid-gap-y: var(--space-6);             /* 24 */
    --hero-padding: 1.75rem;                  /* 28 */
    --category-intro-to-grid: var(--space-6); /* 24 */
    --checkout-h1-gap: var(--space-8);        /* 32 */
    --checkout-section-gap: var(--space-6);   /* 24 */
    --checkout-heading-gap: var(--space-5);   /* 20 */
    --checkout-form-group-gap: var(--space-6);/* 24 */
    --checkout-total-to-cta: var(--space-6);  /* 24 */
  }
}

@media (min-width: 1024px) {
  :root {
    --section-space: var(--space-9);          /* 48 */
    --section-space-lg: var(--space-11);      /* 80 */
    --section-heading-gap: var(--space-6);    /* 24 */
    --hero-to-content-space: var(--space-8);  /* 40 */
    --grid-gap-y: var(--space-7);             /* 32 */
    --hero-padding: var(--space-7);           /* 32 */
    --category-intro-to-grid: var(--space-7); /* 32 */
  }
}

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

.olb-container {
  width: 100%;
  max-width: calc(var(--container-main) + 2 * var(--gutter-page));
  margin-inline: auto;
  padding-inline: var(--gutter-page);
}

.olb-container--wide {
  max-width: calc(var(--container-wide) + 2 * var(--gutter-page));
}

.olb-container--product {
  max-width: calc(var(--container-product) + 2 * var(--gutter-page));
}

.olb-container--checkout {
  max-width: calc(var(--container-checkout) + 2 * var(--gutter-page));
}

.olb-container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter-page));
}

.olb-container--prose {
  max-width: calc(var(--container-prose) + 2 * var(--gutter-page));
}

.olb-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap-x);
  row-gap: var(--grid-gap-y);
}

@media (min-width: 768px) {
  .olb-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .olb-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .olb-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.olb-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.olb-product-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.olb-product-card__commerce {
  margin-top: auto;
}

.olb-product-card__cta {
  margin-top: var(--product-data-to-cta);
}

.olb-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* X-07: governance 6 – 1fr kunne sprænges af indhold ved 200 % zoom */
}

@media (min-width: 1024px) {
  .olb-checkout {
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

body.keyboard-open .olb-bottom-nav,
body.keyboard-open .olb-sticky-cta,
body.keyboard-open .olb-posebar {
  display: none;
}

[hidden] {
  display: none !important;
}