/** Shopify CDN: Minification failed

Line 113:4 Unexpected "}"

**/
/* ==========================================================================
   Sectie: sticky koopbalk
   Hoort bij de kantlijnnotitie op docs/canva/lander-11.png:
   "Deze moet static blijven staan tijdens het scrollen." Eén vaste balk
   onderaan het scherm met de primaire CTA erin.

   De knop zelf is het bestaande atoom (.yeera-btn uit yeera-components.css);
   hier staat uitsluitend de balk eromheen, de maatvoering van de CTA en de
   ruimte die de balk reserveert.
   Metingen uit lander-11.png, herrekend naar 375px
   (renderschaal 0,664 px/render-px — zie docs/design-extract.md).
   ========================================================================== */

@layer yeera.sections {

  /* ── Gedeelde maten ─────────────────────────────────────────────────────
     De balk en de spacer zijn broers. Hun gedeelde maten staan daarom op de
     sectiewrapper — de "class" uit het schema is hun enige gemeenschappelijke
     voorouder, net zoals bij .yeera-header-section.                        */

  .yeera-sticky-atc-section {
    --_bar-pad: var(--yeera-space-3);

    /* De hoogte van .yeera-sticky-atc__cta, nagerekend uit
       yeera-components.css plus de --_pad-y hieronder:
       18px/1,2 tekst (21,6) + 2×20px padding + 2×2px rand = 65,6 → 66px.
       Geen token: de tokenlaag kent geen knophoogte. */
    --_btn-h: 66px;
  }

  /* ── De CTA ─────────────────────────────────────────────────────────────
     In lander-11.png zijn de buybox-CTA en de CTA in de vaste balk exact
     dezelfde knop: allebei 520 × 93 render-px (≈ 345 × 62 px). Het atoom
     staat standaard op --_pad-y: 16px en wordt daarmee 57,6px — acht pixels
     lager dan de buybox-CTA, terwijl het ontwerp ze identiek tekent. De
     buybox corrigeert dat al met .yeera-buybox__cta { --_pad-y: … }; hier
     gebeurt hetzelfde. Het gedeelde atoom blijft ongemoeid.                */

  .yeera-sticky-atc__cta {
    --_pad-y: var(--yeera-space-5);
  }

  /* ── De balk ────────────────────────────────────────────────────────────
     Het vlak en de schaduw staan op de buitenste laag zodat de balk vol-breed
     loopt; de inhoud blijft in de ontwerpkolom van .yeera-shell.           */

  .yeera-sticky-atc {
    --_shadow: var(--yeera-shadow-sticky);

    /* Een custom element is van zichzelf inline; expliciet block dus. */
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    /* De tokenlaag kent geen z-index-schaal. 30 ligt boven de gewone secties
       en boven de sticky header (20), en onder Dawns cart-drawer en modals
       (100+) — die moeten de balk kunnen overdekken. */
    z-index: var(--yeera-sticky-atc-z, 30);
    padding-block-start: var(--_bar-pad);
    /* De home-indicator van iOS. layout/theme.liquid zet geen
       viewport-fit=cover, dus env() levert nu 0 op en de regel kost niets;
       zodra dat wel gebeurt schuift de knop vanzelf boven de indicator. */
    padding-block-end: calc(var(--_bar-pad) + env(safe-area-inset-bottom, 0px));
    background: var(--yeera-color-surface);
    box-shadow: var(--_shadow);
  }

  /* ── Verschijnen zodra de buybox voorbij is ─────────────────────────────
     Optioneel gedrag van het custom element yeera-sticky-atc.js. Dat zet
     --managed zodra het draait en --visible zodra de buybox voorbij gescrold
     is. Komt het script er niet, dan krijgt de balk geen van beide klassen en
     blijft hij permanent staan — dat is de bedoelde fallback, geen fout.

     De schaduw gaat in de verborgen stand uit: --yeera-shadow-sticky wijst
     omhoog en zou anders als streep onder in beeld blijven hangen.         */

  .yeera-sticky-atc--managed {
    --_shadow: none;
    translate: 0 100%;
    pointer-events: none;
    transition: translate var(--yeera-duration) var(--yeera-ease);
  }

  .yeera-sticky-atc--managed.yeera-sticky-atc--visible {
    --_shadow: var(--yeera-shadow-sticky);
    translate: 0 0;
    pointer-events: auto;
  }

  /* De reduced-motion-regel in yeera-base.css staat op ".yeera *" en raakt
     alleen kinderen. De balk draagt .yeera zelf, dus die vangt hem niet op:
     hier dus een eigen guard, anders schuift de balk ook in en uit bij
     iemand die beweging heeft uitgezet.                                    */

  @media (prefers-reduced-motion: reduce) {
    .yeera-sticky-atc--managed {
      transition: none;
    }
  }

  /* ── Alleen op mobiel ───────────────────────────────────────────────────
     Vanaf 750px staat de buybox zelf ruim in beeld en kost de balk alleen
     maar hoogte. De spacer verdwijnt mee, anders blijft er onderaan de
     pagina een gat van 90px staan.                                         */

  @media screen and (min-width: 750px) {
    .yeera-sticky-atc--mobile,
    }
}