/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
@import url("breadcrumbs.css");
/* stylelint-disable no-empty-source */
:root, .dropin-design {
  /* Adobe Commerce Dropin design tokens */
  --color-brand-300: #6d6d6d;
  --color-brand-500: #454545;
  --color-brand-600: #383838;
  --color-brand-700: #2b2b2b;
  --color-neutral-50: #fff;
  --color-neutral-100: #fafafa;
  --color-neutral-200: #f5f5f5;
  --color-neutral-300: #e8e8e8;
  --color-neutral-400: #d6d6d6;
  --color-neutral-500: #b8b8b8;
  --color-neutral-600: #8f8f8f;
  --color-neutral-700: #666;
  --color-neutral-800: #3A3A3A;
  --color-neutral-900: #292929;
  --color-positive-200: #eff5ef;
  --color-positive-500: #7fb078;
  --color-positive-800: #53824c;
  --color-informational-200: #eeeffb;
  --color-informational-500: #6978d9;
  --color-informational-800: #5d6dd6;
  --color-warning-200: #fdf3e9;
  --color-warning-500: #e79f5c;
  --color-warning-800: #cc7a2e;
  --color-alert-200: #ffebeb;
  --color-alert-500: #D13A39;
  --color-alert-800: var(--color-primary);

  /* Koffie website */
  --color-primary: #D13A39;
  --color-secondary: #442A18;
  --color-tertiar: #37B24D;
  --color-success: var(--color-tertiar);
  --color-success-light: #E8F4E9;
  --color-error: var(--color-primary);
  --color-error-light: #FFE5E5;
  --color-warning: #D18101;
  --color-warning-light: #FDF0D5;
  --color-gold: #C8934A;
  --color-gold-light: #F5C06B;
  --color-neutral-01:#202221;
  --color-neutral-02:#3A3A3A;
  --color-neutral-03:#8F9090; 
  --color-neutral-04:#CDCDCD;
  --color-neutral-05:#F6EDE5;
  --color-neutral-06:#FBF8F5;
  --color-neutral-07: #FFF;
  --color-black:#000;
  --color-white:#FFF;
  --off-white-light:#F9F8ED;

  /* Typography */  

  --ag-h1: normal normal 700 35px/115% var(--type-base-roboto-slab-font-family);
  --ag-h2: normal normal 700 28px/115% var(--type-base-roboto-slab-font-family);
  --ag-h3: normal normal 700 22px/27px var(--type-base-roboto-slab-font-family);
  --ag-h4: normal normal 700 18px/24px var(--type-base-roboto-slab-font-family);
  --ag-h5: normal normal 700 16px/24px var(--type-base-roboto-slab-font-family);
  --ag-h6: normal normal 700 20px/30px var(--type-base-font-family);
  --ag-quote: normal normal 700 22px/30px var(--type-base-font-family);
  --ag-subtitle: normal normal 500 14px/18px var(--type-base-font-family);
  --ag-large-subtitle: normal normal 500 21px/26px var(--type-base-font-family);
  --ag-prices: normal normal 900 40px/44px var(--type-base-roboto-slab-font-family);
  --ag-prices-decimal: normal normal 900 16px/24px var(--type-base-roboto-slab-font-family);
  --ag-button-text: normal normal 700 16px/18px var(--type-base-font-family);
  --ag-link: normal normal 400 16px/18px var(--type-base-font-family);
  --ag-body:  normal normal 400 16px/26px var(--type-base-font-family);
  --ag-body-bold: normal normal 700 16px/26px var(--type-base-font-family);
  --ag-notes: normal normal 400 14px/21px var(--type-base-font-family);
  --ag-notes-bold: normal normal 700 14px/21px var(--type-base-font-family);
  --ag-large-h1: normal normal 700 46px/52px var(--type-base-roboto-slab-font-family);
  --ag-large-h2: normal normal 700 36px/42px var(--type-base-roboto-slab-font-family);
  --ag-large-h3: normal normal 700 29px/35px var(--type-base-roboto-slab-font-family);
  --ag-large-h4: normal normal 700 23px/31px var(--type-base-roboto-slab-font-family);
  --ag-large-quote: normal normal 700 29px/39px var(--type-base-font-family);
  --ag-large-prices: normal normal 900 52px/57px var(--type-base-roboto-slab-font-family);
  --ag-large-prices-decimal:normal normal 900  21px/31px var(--type-base-roboto-slab-font-family);
 
  /* Container width */
  --container-width: 1288px;
  --container-actual-width: 1240px;

  /* devices breakpoints */

  --mobile-screen: 849.9px;
  --desktop-screen: 850px;

  /* EO Koffie website */
  --color-button-active: var(--color-brand-700);
  --color-button-focus: var(--color-neutral-400);
  --color-button-hover: var(--color-brand-600);
  --color-action-button-active: var(--color-neutral-50);
  --color-action-button-hover: var(--color-neutral-300);
  --color-opacity-16: rgb(255 255 255 / 16%);
  --color-opacity-24: rgb(255 255 255 / 24%);
  --grid-1-columns: 4;
  --grid-1-margins: 0;
  --grid-1-gutters: 12px;
  --grid-2-columns: 12;
  --grid-2-margins: 0;
  --grid-2-gutters: 16px;
  --grid-3-columns: 12;
  --grid-3-margins: 0;
  --grid-3-gutters: 24px;
  --grid-4-columns: 12;
  --grid-4-margins: 0;
  --grid-4-gutters: 24px;
  --grid-5-columns: 12;
  --grid-5-margins: 0;
  --grid-5-gutters: 24px;
  --shape-border-radius-1: 4px;
  --shape-border-radius-2: 8px;
  --shape-border-radius-3: 24px;
  --shape-border-radius-4: 50%;
  --shape-border-width-1: 1px;
  --shape-border-width-2: 1.5px;
  --shape-border-width-3: 2px;
  --shape-border-width-4: 4px;
  --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-2: 0 2px 8px rgb(24,24,24 /8%);
  --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
  --shape-shadow-sticky-header: 0 4px 6px -2px rgb(24 24 24 / 8%);
   --shape-shadow-sticky-header-inner: 0 4px 6px -2px rgb(24 24 24 / 8%) inset;
  --shadow-text: 0 1px 1px rgb(0 0 0 / 50%), 0 0 8px rgb(24 24 24 / 20%);
  --shape-icon-stroke-1: 1px;
  --shape-icon-stroke-2: 2px;
  --shape-icon-stroke-3: 2px;
  --shape-icon-stroke-4: 4px;
  --spacing-xxsmall: 4px;
  --spacing-xsmall: 8px;
  --spacing-xmall: 12px;
  --spacing-small: 16px;
  --spacing-medium: 24px;
  --spacing-big: 32px;
  --spacing-xbig: 40px;
  --spacing-xxbig: 48px;
  --spacing-large: 64px;
  --spacing-xlarge: 72px;
  --spacing-xxlarge: 96px;
  --spacing-huge: 120px;
  --spacing-xhuge: 144px;
  --spacing-xxhuge: 192px;
  --plp-pagination-arrow-size: 48px;
  --plp-pagination-arrow-border-width: 2px;
  --plp-pagination-arrow-radius: 0;
  --plp-pagination-accent-color: var(--color-primary);
  --plp-pagination-gap-outer: var(--spacing-small);
  --plp-pagination-gap-inner: var(--spacing-medium);
  --plp-sort-accent-color: var(--plp-pagination-accent-color);
  --plp-sort-gap-label-value: 16px;
  --plp-sort-gap-value-icons: 6px;
  --plp-sort-icon-size: 16px;
  --plp-sort-line-height: 18px;
  --plp-sort-chevron-icon: url('/icons/select-bg.svg');
  --space-pad-10-ver: 10px;
   --type-base-font-family: roboto, roboto-fallback, 'helvetica Neue', helvetica, arial, sans-serif;
  --type-base-roboto-font-family: roboto, roboto-fallback, system-ui, sans-serif;
  --type-base-roboto-slab-font-family: roboto-slab, roboto-slab-fallback, 'helvetica Neue', helvetica, arial, sans-serif;
  --type-base-quasimoda-family: quasimoda, adobe-clean-fallback, 'helvetica Neue', helvetica, arial, sans-serif;
  --type-display-1-font: normal normal 400 6rem/7.2rem var(--type-base-font-family);
  --type-display-1-letter-spacing:0;
  --type-display-2-font: normal normal 400 4.8rem/5.6rem var(--type-base-font-family);
  --type-display-2-letter-spacing:0;
  --type-display-3-font: normal normal 400 3.4rem/4rem var(--type-base-font-family);
  --type-display-3-letter-spacing: 0;
  --type-headline-1-font: var(--ag-h1);
  --type-headline-1-letter-spacing: 0;
  --type-headline-2-default-font: var(--ag-h2);
  --type-headline-2-default-letter-spacing: 0;
  --type-headline-2-strong-font: var(--ag-h2);
  --type-headline-2-strong-letter-spacing: 0;
  --type-body-1-default-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-default-letter-spacing: 00;
  --type-body-1-strong-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-strong-letter-spacing: 0;
  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-emphasized-letter-spacing: 0;
  --type-body-2-default-font: normal normal 400 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-default-letter-spacing: 0.04em;
  --type-body-2-strong-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-strong-letter-spacing: 0.04em;
  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-emphasized-letter-spacing: 0.04em;
  --type-button-1-font: normal normal 400 2rem/2.6rem var(--type-base-font-family);
  --type-button-1-letter-spacing: 0.08em;
  --type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-button-2-letter-spacing: 0.32px;
  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-1-letter-spacing: 0.08em;
  --type-details-caption-2-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-2-letter-spacing: 0.08em;
  --type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0.16em;

  /* Additional tokens */
  --type-fixed-font-family: var(--type-base-font-family);
  --background-color: var(--color-neutral-50);
  --nav-height: 6.4rem;
  --header-min-height: 172px;
  --header-usp-height: 40px;
  --header-notification-height: 52px;
  --header-notification-gap: var(--spacing-xsmall);
  --store-switcher-height: 172px;
  --header-switcher-reserve: 0px;
  --header-notification-reserve: 0px;
  --header-reserve-height: calc(
    var(--header-min-height)
    + var(--header-switcher-reserve, 0px)
    + var(--header-notification-reserve, 0px)
  );
  --product-recommendations-min-height: 528px;
  --product-carousel-min-height: 768px;
}

html.has-store-switcher {
  --header-switcher-reserve: var(--store-switcher-height);
}

html.has-header-notification {
  --header-notification-reserve: calc(
    var(--header-notification-gap) + var(--header-notification-height)
  );
}

@media (min-width: 850px) {
  :root, .dropin-design {
    --header-min-height: 192px;
    --header-notification-height: 44px;
    --header-notification-gap: var(--spacing-xxsmall);
    --store-switcher-height: 96px;
    --product-recommendations-min-height: 560px;
    --product-carousel-min-height: 768px;
  }
}

/* fallback font */
@font-face {
  font-family: adobe-clean;
  size-adjust: 100%;
  src: local("Helvetica");
}

html, body {
  min-height: 100vh;
}

html {
  font-size: 62.5%;

  /* Clipping here only removes that invisible sliver at the document edge when horizontal scrobbbar appears due to content bleeding. */
  overflow-x: clip;
}

body {
  font: var(--type-body-1-default-font);
  margin: 0;
  color: var(--color-neutral-02);
  background-color: var(--background-color);
  display: grid;

  /* Header row keeps the reserved height so late-injected nav doesn't shove
     main. Footer stays max-content — do not reserve a tall footer row or it
     paints under the header while PDP is empty. Main's min-height (below)
     is what keeps the footer off the first screen. */
  grid-template-rows:
    minmax(var(--header-reserve-height), max-content)
    1fr
    max-content;
  grid-template-columns: 100%;
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
}

.hidden {
  display: none !important;
}

/* Screen-reader-only helper: hidden visually, still announced by assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-to-main {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 10000;
  background: var(--color-white);
  color: var(--color-secondary);
  border: 2px solid var(--color-primary);
  padding: 8px 12px;
  border-radius: 4px;
}

.skip-to-main:focus-visible {
  top: 12px;
}

.no-scroll {
  overflow: hidden;
  height: 100%;
}

body:not(.appear) {
  display: none;
}

main {
  grid-row: 2;

  /* PDP drop-ins paint after header/footer. Without this, main is 0-height,
     footer sits under the header, then product content shoves it down
     (CLS ~0.63 on footer.footer-wrapper). */
  min-height: calc(100vh - var(--header-reserve-height));
}

footer {
  grid-row: 3;
  min-height: 200px;
}

header .header,
footer .footer {
  visibility: hidden;
}

/* Header is injected late; hold its final height so main doesn't jump.
   html.has-store-switcher / html.has-header-notification are set in head.html. */
header {
  min-height: var(--header-reserve-height);
}

header.header-notification-dismissed {
  --header-notification-reserve: 0px;
}

.product-recommendations-wrapper {
  min-height: var(--product-recommendations-min-height);
}

.product-recommendations-wrapper.product-recommendations--empty,
.product-recommendations-wrapper.product-recommendations--relocated,
.product-recommendations-wrapper:has(.recommendations-product-list--empty) {
  display: none;
}

/* PDP always injects this empty drop zone (product-details.js). Only reserve
   height once a slot actually rendered products - a unit that returns nothing
   (or never responds) leaves the slot display:none, so reserving would be a gap. */
.below-the-fold-recommendations__wrapper:has(
  .below-the-fold-recommendations__slot
    .recommendations-product-list:not(.recommendations-product-list--empty)
) {
  min-height: var(--product-recommendations-min-height);
}

.below-the-fold-recommendations__slot.product-recommendations--empty,
.below-the-fold-recommendations__slot:has(.recommendations-product-list--empty) {
  display: none;
}

.product-carousel-wrapper:has(
  .product-carousel[data-block-status="loaded"]:not(.product-carousel--no-header)
):not(.product-carousel--empty) {
  min-height: var(--product-carousel-min-height);
}

.product-carousel-wrapper.product-carousel--empty,
.section.product-carousel-container:has(.product-carousel--empty) {
  display: none;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  line-height: 1.25;
  scroll-margin: 40px;
}

/*
 * Drop-in header titles (HeaderContainer) now render as real h1-h6 elements;
 * before the 2026 drop-in release they were always <span>. The heading rules
 * above would therefore newly restyle every account/auth/order drop-in title,
 * so neutralise them here and keep the previous appearance. Block and theme
 * rules still win, by specificity or by loading after this file.
 */
.dropin-header-container__title {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

h1 {
  font: var(--ag-h1);
  letter-spacing: var(--type-display-1-letter-spacing);
}

h2 {
  font: var(--ag-h2);
  letter-spacing: var(--type-display-2-letter-spacing);
}

h3 {
  font: var(--ag-h3);
  letter-spacing: var(--type-display-3-letter-spacing);
}

h4 {
  font: var(--ag-h4);
  letter-spacing: var(--type-headline-1-letter-spacing);
}

h5 {
  font: var(--ag-h5);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
}

h6 {
  font: var(--ag-h6);
  letter-spacing: var(--type-headline-2-default-letter-spacing);
}

/* Inline text decorators — `:success{In stock}`, `:color(green){Hello}` —
   rewritten into these spans by decorateText() during decorateMain().
   See common-lib/src/text-decoration.js. Lives in the eager stylesheet because
   the spans exist before first paint. */
.text-decoration {
  color: var(--text-color, inherit);
}

.text-decoration-bg {
  background-color: var(--bg-color, transparent);

  /* Inline padding does not grow the line box, so highlighting cannot shift layout. */
  padding: 0.05em 0.3em;
  border-radius: var(--shape-border-radius-1);

  /* Keep padding and rounding on both halves when the highlight wraps a line. */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The named vocabulary. These carry no literal colour: each store's theme
   overrides the tokens in its own tokens.css under styles/themes, so one
   authored marker resolves to that store's palette. `:color()` / `:bg()` set
   the same two custom properties inline, which is what makes an explicit
   value win here. */
.text-decoration--accent {
  --text-color: var(--color-primary);
}

.text-decoration--success {
  --text-color: var(--color-success);
}

.text-decoration--warn {
  --text-color: var(--color-warning);
}

.text-decoration--alert {
  --text-color: var(--color-error);
}

.text-decoration--mark {
  --bg-color: var(--color-warning-light);
  --text-color: var(--color-neutral-01);
}

.text-decoration--badge {
  --bg-color: var(--color-primary);
  --text-color: var(--color-white);

  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}

dl {
    margin-bottom: 26px;
    margin-top: 0
}

dt {
    font-weight: 700;
    margin-bottom: 6.5px;
    margin-top: 0
}

dd {
    margin-bottom: 13px;
    margin-top: 0;
    margin-left: 0
}


dl,
ol,
ul,
pre,
blockquote {
  margin-top: 1.5625em;
  margin-bottom: 1.5625em;
}

hr {
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
  border: 0;
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-04);
}

hr.dark {
    border-color: var(--color-neutral-02);
}

hr.light {
    border-color: var(--color-neutral-02)
}

code {
    white-space: nowrap
}

pre {
    background: var(--color-neutral-06);
    border: var(--shape-border-width-1) solid var(--color-neutral-04);
    color: #181818;
    line-height: 26px;
    margin: 0 0 13px;
    padding: 13px;

}

pre code {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    padding: 0;
    white-space: pre-wrap
}

main pre {
  background-color: var(--color-neutral-03);
  padding: 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: var(--spacing-xbig) var(--spacing-small);
}

input,
textarea,
select,
button {
  font: inherit;
}

/* Show strong focus outlines only during keyboard navigation mode. */
body.keyboard-nav :where(
  a,
  button:not(.nav-dropdown-button, .nav-cart-button),
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hide keyboard-style focus outlines when interacting via mouse/touch. */
body:not(.keyboard-nav) :where(
  a,
  button:not(.nav-dropdown-button, .nav-cart-button),
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus {
  outline: none;
}

/* links */
a,
.alink {
    color: var(--color-secondary);
    transition: ease-out .1s;
    text-decoration: none;
}

h2+ ul li a{
  text-decoration: underline;
}

a:visited,
.alink:visited {
    color: var(--color-secondary);;
     text-decoration: none
}

a:hover,
.alink:hover {
    color: var(--color-secondary);;
    text-decoration: none
}

a:active,
.alink:active {
    color: var(--color-secondary);;
    text-decoration: none
}

/* A link the author explicitly underlined (see decorateButtons in scripts/aem.js) —
   stays a plain inline link instead of becoming a button, even alone in its own
   paragraph. Explicit underline since the anchor's own text-decoration is none above. */
a.inline-link {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

:not(footer) a.button,
.button-link {
  transition: ease-out .3s;
  align-items: center;
  justify-content: center;
  font: var(--ag-button-text);
  letter-spacing: .32px;
  padding: 15px 6px 15px 0;
  cursor: pointer;
  display: inline-flex;
  white-space: nowrap;
}


:not(footer) a.button::after,
.button-link::after,
.link-with-arrow::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 12px;
  background-image: url('../../icons/arrow-right-red.svg');
  background-size: 16px 12px;
  background-position: center;
  background-repeat: no-repeat;
  margin: 2px 0 2px 7px;
  flex-shrink: 0;
  transition: 0.3s ease-out;
}

a.button:hover::after,
a.button:focus::after,
a.button:active::after,
.button-link:hover::after,
.button-link:focus::after,
.button-link:active::after,
.link-with-arrow:hover::after,
.link-with-arrow:focus::after,
.link-with-arrow:active::after {
  transform: translateX(6px);
}

/* buttons */
main a.button:any-link,
button.button {
  box-sizing: border-box;
  display: flex;
  max-width: 100%;
  margin: var(--spacing-small) 0;
  border-radius: var(--shape-border-radius-1);
  padding: 15px 24px;
  font: var(--ag-button-text);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: var(--color-primary);
  color: var(--color-neutral-07);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: ease-out .3s;
  letter-spacing: .02em;
  border-width: 0;
}

button.dropin-button.dropin-button--primary,
a.dropin-button.dropin-button--primary {
  background-color: var(--color-primary);
  color: var(--color-neutral-07);
  text-align: center;
  border-radius: var(--shape-border-radius-1);
  font: var(--ag-button-text);
  padding: 14px 24px;
  letter-spacing: 0.32px;
}

main a.button:hover,
main a.button:focus,
main a.button:active,
button.button:hover,
button.button:focus,
button.button:active,
a.dropin-button.dropin-button--primary:hover,
a.dropin-button.dropin-button--primary:focus,
a.dropin-button.dropin-button--primary:active,
button.dropin-button.dropin-button--primary:hover,
button.dropin-button.dropin-button--primary:focus,
button.dropin-button.dropin-button--primary:active,
button.dropin-button.dropin-button--primary:hover:active {
  opacity: .8;
  cursor: pointer;
  background-color: var(--color-primary);
}

main a.button.secondary,
button.button.secondary {
  background-color: var(--color-secondary);
  border-width: 0;
  color: var(--color-white);
}

main a.button.button-default,
button.button.button-default,
button.button.tertiary,
main a.button.tertiary {
  background-color: var(--color-white);
  border-width: var(--shape-border-width-3) solid var(--color-neutral-04);
  color: var(--color-neutral-03);
}

button.button.tertiary:hover,
main a.button.tertiary:hover {
  background-color: var(--color-white);
  border: var(--shape-border-width-3) solid var(--color-neutral-02);
  color: var(--color-neutral-02);
}

/* Drop the extra button padding so text links sit like copy. */
main a.button.diapositive,
button.button.diapositive {
  border: none;
  background: none;
  color: var(--color-primary);
  display: inline-flex;
  height: auto;
  margin: 0;
  padding: 0 6px 0 0;
  overflow: visible;
}

/* Text links never get a background, in any interactive state — without this
   the generic a.button:hover/:focus/:active rule below paints them solid. */
main a.button.diapositive:hover,
main a.button.diapositive:focus,
main a.button.diapositive:active,
button.button.diapositive:hover,
button.button.diapositive:focus,
button.button.diapositive:active {
  background: none;
}

main a.button:hover,
main a.button:focus,
main a.button:active,
button.button:hover,
button.button:focus,
button.button:active,
main a.button.secondary:hover,
button.button.secondary:hover,
button.button.secondary:active,
main a.button.button-default:hover,
button.button.button-default:hover,
button.button.button-default:active  {
  opacity: .8;
}

main a.button.disabled,
main button.button.disabled,
button.button:disabled,
button.button:disabled:hover,
main a.button.secondary:hover,
button.button.secondary:hover {
  opacity: .5;
  cursor: unset;
}

a.button:not(footer a.button, .buttons a.button, .banner a.button) {
  transition: ease-out .3s;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
  line-height: 1.8rem;
  padding: 15px 6px;
  cursor: pointer;
  display: inline-flex;
  white-space: nowrap;
}

a.button:not(footer a.button, .buttons.block a.button, .banner a.button, .secondary-menu a.button)::after{
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 12px;
  background-image: url('../../icons/arrow-right-red.svg');
  background-size: 16px 12px;
  background-position: center;
  background-repeat: no-repeat;
  margin: 2px 0 2px 7px;
  flex-shrink: 0;
  transition: ease-out .3s;
}

/* The arrow ::after above is the text-link affordance (diapositive,
   .button-link, .link-with-arrow). Filled buttons inherit it too, but the
   arrow icon is primary-colored — on the primary/secondary background it is
   invisible while its 16px box + 7px margin still push the label off-center.
   Blocks that want an arrow on a filled surface re-point it to a white icon
   themselves (banner, newsletter); everything filled drops it here. Tertiary
   and button-default stay white-surfaced, so their visible arrow is kept.
   The :not() chain is deliberate — the generic rule above scores (0,4,3)
   through its `.buttons.block a.button` :not() argument, so this one needs
   the chained :not()s to out-rank it. */
/* stylelint-disable-next-line selector-not-notation -- list notation scores
   (0,3,3) and loses to the (0,4,3) rule above; the chain is the override */
main a.button:any-link:not(.diapositive):not(.tertiary):not(.button-default)::after {
  content: none;
}

/* A filled button in a column is inset from the cell edge. The diapositive
   variant is not a filled button — it is the site's text link (see
   decorateDiapositiveButtons in columns.js), so it drops the inset and stays
   optically aligned with the copy above it; the inset otherwise reads as a
   stray indent. Placed after the generic `a.button` rules above so the cascade
   runs in ascending specificity. */
.columns.block a.button:not(.diapositive) {
  padding-inline: 16px !important;
}

/* Keep 6px on the right so the arrow still has room on hover. */
.columns.block a.button.diapositive {
  padding-block: 0;
  padding-inline: 0 6px;
  margin: 0;
}

button::-moz-focus-inner {
    border: 0;
    padding: 0
}

button .dropin-button-icon {
  height: 20px;
}

input[type="text"]:not(.dropin-input),
input[type="password"]:not(.dropin-input),
input[type="url"]:not(.dropin-input),
input[type="tel"]:not(.dropin-input),
input[type="search"]:not(.dropin-input),
input[type="number"]:not(.dropin-input),
input[type*="date"]:not(.dropin-input),
input[type="email"]:not(.dropin-input) {
    background: var(--color-white);
    background-clip: padding-box;
    border: 1px solid var(--color-neutral-04);
    border-radius: 4px;
    color: var(--color-neutral-02);
    height: 56px;
    padding: 0 8px 0 16px;
    vertical-align: baseline;
    width: 100%;
    box-sizing: border-box;
    font: var(--ag-body);
    letter-spacing: initial;
}

.dropin-button--tertiary,
a.dropin-button--tertiary,
.dropin-iconButton--tertiary,
.dropin-button--tertiary:hover
a.dropin-button--tertiary:hover,
.dropin-iconButton--tertiary:hover {
  color: var(--color-secondary)
}

/* stylelint-disable property-no-vendor-prefix */
input[type="number"]:not(.dropin-input) {
    appearance: textfield; 
    -moz-appearance: textfield
}

input[type="search"]:not(.dropin-input) {
    appearance: none;
    -webkit-appearance: none;
}
/* stylelint-enable property-no-vendor-prefix */

input[type="text"]:not(.dropin-input):focus,
input[type="password"]:not(.dropin-input):focus,
input[type="url"]:not(.dropin-input):focus,
input[type="tel"]:not(.dropin-input):focus,
input[type="search"]:not(.dropin-input):focus,
input[type="number"]:not(.dropin-input):focus,
input[type*="date"]:not(.dropin-input):focus,
input[type="email"]:not(.dropin-input):focus {
    border: 1px solid var(--color-neutral-02)
}

input[type="text"]:not(.dropin-input):disabled,
input[type="password"]:not(.dropin-input):disabled,
input[type="url"]:not(.dropin-input):disabled,
input[type="tel"]:not(.dropin-input):disabled,
input[type="search"]:not(.dropin-input):disabled,
input[type="number"]:not(.dropin-input):disabled,
input[type*="date"]:not(.dropin-input):disabled,
input[type="email"]:not(.dropin-input):disabled {
    opacity: .5
}

input[type="text"]:not(.dropin-input)::placeholder,
input[type="password"]:not(.dropin-input)::placeholder,
input[type="url"]:not(.dropin-input)::placeholder,
input[type="tel"]:not(.dropin-input)::placeholder,
input[type="search"]:not(.dropin-input)::placeholder,
input[type="number"]:not(.dropin-input)::placeholder,
input[type*="date"]:not(.dropin-input)::placeholder,
input[type="email"]:not(.dropin-input)::placeholder {
    color: var(--color-neutral-03);
    font-style: normal
}

/* stylelint-disable property-no-vendor-prefix */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none
}
/* stylelint-enable property-no-vendor-prefix */

select {
    background: var(--color-white) url('../../icons/select-bg.svg') no-repeat 100% center/46px 16px;
    background-clip: padding-box;
    border: 1px solid var(--color-neutral-04);
    border-radius: 4px;
    color: var(--color-neutral-02);
    font-size: 16px;
    height: 56px;
    line-height: 26px;
    padding: 16px 40px 16px 16px;
    vertical-align: baseline;
    width: 100%;
    box-sizing: border-box;
    appearance: none; 
}

select:focus {
    border: 1px solid var(--color-neutral-02)
}

select:disabled {
    opacity: .5
}

select[multiple] {
    height: auto;
    background-image: none
}

textarea {
    background: var(--color-white);
    background-clip: padding-box;
    border: 1px solid var(--color-neutral-04);
    border-radius: 4px;
    color: var(--color-neutral-03);
    font-size: 16px;
    height: auto;
    line-height: 26px;
    margin: 0;
    padding: 13px;
    vertical-align: baseline;
    width: 100%;
    box-sizing: border-box;
    resize: vertical
}

textarea:focus {
    border: 1px solid var(--color-neutral-02);
    color: var(--color-neutral-02)
}

textarea:disabled {
    opacity: .5;
    color: var(--color-neutral-02)
}

textarea::placeholder {
    color: var(--color-neutral-03);
    font-style: normal
}

input[type="checkbox"] {
    margin: 2px 6.5px 0 0;
    position: relative;
    top: 2px
}

input[type="checkbox"]:disabled {
    opacity: .5
}

input[type="radio"] {
    margin: 2px 6.5px 0 0
}

input[type="radio"]:disabled {
    opacity: .5
}

.action.diapositive.icon,
.action-diapositive.icon {
    position: relative
}

.action.diapositive.icon::after,
.action-diapositive.icon::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 12px;
    background-image: url('../../icons/arrow-right-red.svg');
    background-size: 16px 12px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 0 0 9px;
    flex-shrink: 0
}

main input:hover {
  border: var(--shape-border-width-1) solid var(--color-neutral-700);
}

/* A blockquote is the authored form of the Quote atom — DA's `/` menu wraps the
   selection in one — so it takes its type from the scale rather than from body
   copy. The shorthand resets font-style, so the site's italic quotation voice is
   restated after it; drop that line for the upright setting the type sheet shows. */
main blockquote {
  font-style: italic;
  margin: 3rem;
  text-indent: -1rem;
  hanging-punctuation: first;
}

main blockquote p::before {
  content: '“';
  line-height: 0;
}

main blockquote p::after {
  content: '”';
  line-height: 0;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 2.4rem;
  width: 2.4rem;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* Author-uploaded images in default content get the same rounding as the cms-image block.
   Scoped to picture > img so decorated span.icon images stay untouched. */
main .default-content-wrapper picture,
main .default-content-wrapper picture img {
  border-radius: var(--shape-border-radius-1);
}

/* sections */
main > .section {
  margin: auto;
  max-width: var(--container-width);
  padding: 0 var(--spacing-medium) var(--spacing-medium);
  box-sizing: border-box;
}

/* Section with background image/color/gradient: add padding so the background is visible around content.
   Brand border radius comes from --shape-border-radius-1 (4px on Koffievoordeel; wine themes override). */
main > .section.section-has-background {
  padding: var(--spacing-big) var(--spacing-medium);
  border-radius: var(--shape-border-radius-1);
}

/* Section metadata `Background image`. The URL is not written inline — applySectionBackgrounds
   (section-background.js) sets --section-bg-image / --section-bg-image-mobile and this rule paints
   them, so the narrow-viewport swap below is an ordinary cascade win rather than an !important
   fight with an inline style. Both properties are always set in image mode: with no mobile image
   authored, the mobile one is the same asset requested at a narrower render width. */
main > .section.section-has-background-image {
  background-image: var(--section-bg-image);
}

@media only screen and (max-width: 849.9px) {
  main > .section.section-has-background-image {
    background-image: var(--section-bg-image-mobile, var(--section-bg-image));
  }
}

/* Italy section: full-bleed (like Background span = full) with a tricolore
   (green / white / red) bottom border. */
main > .section.italy::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: linear-gradient(
    to right,
    #82bb6a 0 33.33%,
    #fff 33.33% 66.66%,
    #fc0009 66.66% 100%
  );
}

/* Section metadata Background span = full (and Italy sections): span edge-to-edge;
   inner divs keep container max-width.
   Not gated on `.section-has-background`: `full` is a layout choice as much as a paint
   one, and full-bleed blocks (hero) need the section to span even with no fill behind. */
main > .section.section-background-full-width,
main > .section.italy {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* A full-bleed background band reaches the viewport edges, so rounded corners
   only notch the page background into view (16px notches on themes that widen
   --shape-border-radius-1) — square them off. Inset background sections keep
   the radius from the rule above. */
main > .section.section-background-full-width.section-has-background {
  border-radius: 0;
}

/* Whitespace-only sections still fail :empty (text nodes); :not(:has(*)) catches those. */
main > .section:not(:has(*)),
.section:empty {
  display: none;
}

main > .section > div {
  /* container-width minus the section's own horizontal padding, so content aligns
     with sibling sections even when the section itself is full-bleed (100vw) */
  max-width: calc(var(--container-width) - (var(--spacing-medium) * 2));
  margin: auto;
  padding: 0 var(--spacing-medium);
  box-sizing: border-box;
}

.product-carousel:not([data-block-status="loaded"]) > div,
.product-recommendations:not([data-block-status="loaded"]) > div {
  display: none;
}

/* Background span = full-content: inner content div also spans edge-to-edge (opt-in, see full-width rule above) */
main > .section.section-content-full-width > div {
  max-width: none;
}

main > .section:first-of-type {
  margin-top: 0;
}

@media only screen and (max-width: 849.9px) {
  main > .section {
    padding: 0 var(--spacing-small) var(--spacing-medium);
  }

  /* The gutter is the page's, not the surface's: a section that paints a
     background was keeping the desktop 24px inset here while every section
     around it used 16px, so its content sat 8px narrower than its siblings'
     and wrapped differently. */
  main > .section.section-has-background {
    padding-inline: var(--spacing-small);
  }

  main > .section > div {
    padding: 0;
  }
}

@media (min-width: 850px) {
  main > .section > div {
    padding: 0 var(--medium-big);
  }
}

/* Section-level multi-column layout (Universal Editor section metadata `columnWidth`) */
@media (min-width: 850px) {
  main > .section:is([data-column-width], [data-columnwidth]):not([data-column-width="100"], [data-column-width="100%"], [data-columnwidth="100"], [data-columnwidth="100%"]) {
    display: grid;
    grid-template-columns: var(--section-grid-columns, var(--section-col-1, 1fr) var(--section-col-2, 1fr));

    /* `Column gap` section metadata; the historic gutter when not authored.
       Row axis stays fixed — a percentage row-gap in an auto-height grid
       corrupts row sizing for row-spanning wrappers. */
    gap: var(--grid-4-gutters) var(--section-column-gap, var(--grid-4-gutters));
  }
}

@media (min-width: 850px) and (max-width: 1200px) {
  main > .section:is([data-column-width], [data-columnwidth]):has(.hero-banner) {
    display: block;
  }

  main > .section:has(.columns):has(.hero-banner) {
    display: block;
  }

  main > .section > div:has(> .columns):has(> .hero) {
    display: flex;
    flex-direction: column;
    gap: var(--grid-4-gutters);
  }

  main > .section .hero-wrapper {
    grid-column: 1 / -1;
  }
}

/* `columnWidth` combined with section metadata `Background span`.
   `.section-columns` is set by applySectionColumnWidth only when real tracks are applied. */
@media (min-width: 850px) {
  /* Background span = full: paint edge-to-edge, but keep the column grid aligned to the
     page container so the columns line up with the content of sibling sections. */
  main > .section.section-columns.section-background-full-width {
    padding-inline: max(
      var(--spacing-medium),
      calc((100vw - var(--container-width)) / 2 + var(--spacing-medium))
    );
  }

  /* The section now owns the max-width and centring, so wrappers just fill their track
     instead of centring their own capped width inside it. The `margin: auto` inherited from
     `main > .section > div` would otherwise shrink-wrap each wrapper and centre it in its
     track, leaving an odd gap between the columns.
     Block margins are zeroed too: `auto` block margins absorb the free space in the grid
     area and take precedence over `align-items`, which would make the vertical alignment
     below (section metadata `Style`) a no-op. */
  main > .section.section-columns > div {
    max-width: none;
    margin: 0;
    padding-inline: 0;

    /* Let tracks shrink when Column gap grows. */
    min-width: 0;
  }

  /* Background span = full-content: columns run edge-to-edge, so drop the container
     padding and space the columns with the gutter only. */
  main > .section.section-columns.section-content-full-width {
    padding-inline: 0;
    gap: var(--section-column-gap, var(--grid-4-gutters));
  }
}

@media only screen and (max-width: 849.9px) {
  main > .section.section-columns.section-content-full-width,
  main > .section.section-columns.section-content-full-width > div {
    padding-inline: 0;
  }
}

/* Section vertical alignment (section metadata `Style`). Only applies to sections that
   actually form a column grid via `columnWidth`; without tracks there is nothing to align.

   The default is `stretch`: blocks sharing a section are siblings in one band and should
   read as one unit, so their tracks match unless an author says otherwise. `center` was
   the old default (it reproduced the wrappers' implicit `margin: auto`), but it sizes each
   track to its own content — which staggers any wrapper that paints a background, since
   the wrapper box *is* the visible edge. Authors who want the old behaviour ask for it
   with `middle`. */
@media (min-width: 850px) {
  main > .section.section-columns {
    align-items: stretch;
  }

  /* Exception: a hero sizes its track from its image, not from content, so there is no
     shared band to match. Stretching the sibling column to a tall visual just pins its
     text to the top of a mostly empty box; centring against the image is the intent.
     Must stay above the top/middle/bottom rules — same specificity, so source order is
     what lets an explicit author instruction still win. Same `:has(.hero-banner)` hook
     the column-grid rules above already use. */
  main > .section.section-columns:has(.hero-banner) {
    align-items: center;
  }

  main > .section.section-columns.top {
    align-items: start;
  }

  main > .section.section-columns.middle {
    align-items: center;
  }

  main > .section.section-columns.bottom {
    align-items: end;
  }
}

/* section metadata */

/* Section text alignment (section metadata `Style`) — left is the default.
   `center` / `left` / `right` are accepted as aliases of the canonical picker values:
   authors reach for the bare word, and a value that matches no rule fails silently. */
main .section.centered,
main .section.center {
  text-align: center;
}

main .section.left-aligned,
main .section.left {
  text-align: left;
}

main .section.right-aligned,
main .section.right {
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Content placement for full-bleed blocks (section metadata `Style`)

   Blocks that break out of the section grid and lay text over an edge-to-edge
   image (hero, hero-vanilla) need to know where the author wants that text
   block. The section publishes the *intent* as custom properties; each block
   maps it to whichever property is its own inline axis — `justify-content` for
   a row flex like hero, `align-items` for a column flex like hero-vanilla.
   That keeps the class matrix in one place instead of once per block.

   Opting a block in costs one declaration, and the fallback is the block's
   existing behaviour, so a block that never opts in is unaffected:
     justify-content: var(--section-content-justify, flex-start);

   Declaration order is load-bearing — see the comment on the left-aligned
   block below.
   --------------------------------------------------------------------------- */
main > .section.centered,
main > .section.center {
  --section-content-justify: center;
  --section-content-align: center;
  --section-content-text-align: center;
}

main > .section.right-aligned,
main > .section.right {
  --section-content-justify: flex-end;
  --section-content-align: flex-end;
  --section-content-text-align: right;
}

/* Written after the two above so an explicit `left-aligned` overrides the text
   alignment they imply: `centered, left-aligned` is a centred block with
   ragged-right text. It deliberately leaves `--section-content-justify` alone,
   so it never moves the block — only `content-*` below does that. */
main > .section.left-aligned,
main > .section.left {
  --section-content-align: flex-start;
  --section-content-text-align: left;
}

/* Explicit block placement, independent of text alignment. Last, so it wins over
   the placement implied by an alignment value: `centered, content-left` puts the
   block on the left while the text inside it stays centred.

   `--section-content-place` carries *only* these explicit values, while
   `--section-content-justify` also carries the placement implied by an alignment
   value. Hero has always moved its block for `centered`, so it reads the latter;
   a block adopting placement for the first time should read the former, or every
   existing page that already sets `centered` for its text would silently move. */
main > .section.content-left {
  --section-content-justify: flex-start;
  --section-content-place: flex-start;
}

main > .section.content-center {
  --section-content-justify: center;
  --section-content-place: center;
}

main > .section.content-right {
  --section-content-justify: flex-end;
  --section-content-place: flex-end;
}

main .section.light,
main .section.highlight,
main .section.beige {
  background-color: var(--color-neutral-100);
  margin: 0;
  padding: var(--spacing-xbig) 0;
}

/* Warm surface — same treatment as `highlight`, in the beige the storefront
   already uses for panels (see blocks/prefilter/prefilter.css). */
main .section.beige {
  background-color: var(--color-neutral-06);
}

/* Callout section styles */
main .section.callout {
  border: 2px solid var(--color-neutral-04);
  border-radius: var(--shape-border-radius-2);
  padding: var(--spacing-medium) var(--spacing-big);
  margin: var(--spacing-small) auto;
  box-sizing: border-box;
}

main .section.callout.centered {
  text-align: center;
}

/* Callout color modifiers — border only */
main .section.callout.success {
  border-color: var(--color-success);
}

main .section.callout.warning {
  border-color: var(--color-warning);
}

main .section.callout.danger {
  border-color: var(--color-error);
}

main .section.callout.info {
  border-color: var(--color-informational-500);
}

/* Callout fill variants — background + border */
main .section.callout.success-fill {
  background-color: var(--color-success-light);
  border-color: var(--color-success);
}

main .section.callout.warning-fill {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
}

main .section.callout.danger-fill {
  background-color: var(--color-error-light);
  border-color: var(--color-error);
}

main .section.callout.info-fill {
  background-color: var(--color-informational-200);
  border-color: var(--color-informational-500);
}

@media only screen and (max-width: 849.9px) {
  main .section.callout {
    padding: var(--spacing-small);
  }
}

/* Section spacing (section metadata `Padding` / `Margin`).
   Block axis only: the inline padding is the page gutter, and overriding it would
   pull the section out of alignment with its siblings. `margin-block` likewise leaves
   the negative inline margins of full-bleed sections intact.
   Declared after the surface variants so an explicit author choice wins over the
   padding baked into `highlight` / `callout` / a background.
   `none` collapses the block padding entirely — the escape hatch for a section whose
   background (or the block inside it) already supplies its own vertical rhythm.
   `0` is accepted too: authors typing into a DA section-metadata table reach for it. */
main > .section[data-padding="none"],
main > .section[data-padding="0"] {
  padding-block: 0;
}

main > .section[data-padding="small"] {
  padding-block: var(--spacing-small);
}

main > .section[data-padding="medium"] {
  padding-block: var(--spacing-medium);
}

main > .section[data-padding="large"] {
  padding-block: var(--spacing-large);
}

main > .section[data-padding="big"] {
  padding-block: var(--spacing-big);
}

main > .section[data-padding="xbig"] {
  padding-block: var(--spacing-xbig);
}

main > .section[data-padding="xxbig"] {
  padding-block: var(--spacing-xxbig);
}

main > .section[data-padding="huge"] {
  padding-block: var(--spacing-huge);
}

main > .section[data-padding="xhuge"] {
  padding-block: var(--spacing-xhuge);
}

main > .section[data-padding="xxhuge"] {
  padding-block: var(--spacing-xxhuge);
}

/* Explicit `Padding` / `Margin` values (a length, an asymmetric `top bottom`
   pair, or a `desktop, mobile` pair) arrive as custom properties from
   section-background.js. Declared after the token rules above so an explicit
   value wins; the tokens resolve to the same properties, so the two spellings
   cannot disagree. */
main > .section.section-padding-custom {
  padding-block: var(--section-padding);
}

main > .section.section-margin-custom {
  margin-block: var(--section-margin);
}

main > .section[data-margin="none"],
main > .section[data-margin="0"] {
  margin-block: 0;
}

@media only screen and (max-width: 849.9px) {
  main > .section.section-padding-custom {
    padding-block: var(--section-padding-mobile, var(--section-padding));
  }

  main > .section.section-margin-custom {
    margin-block: var(--section-margin-mobile, var(--section-margin));
  }
}

main > .section[data-margin="small"] {
  margin-block: var(--spacing-small);
}

main > .section[data-margin="medium"] {
  margin-block: var(--spacing-medium);
}

main > .section[data-margin="large"] {
  margin-block: var(--spacing-large);
}

main > .section[data-margin="big"] {
  margin-block: var(--spacing-big);
}

main > .section[data-margin="xbig"] {
  margin-block: var(--spacing-xbig);
}

main > .section[data-margin="xxbig"] {
  margin-block: var(--spacing-xxbig);
}

main > .section[data-margin="huge"] {
  margin-block: var(--spacing-huge);
}

main > .section[data-margin="xhuge"] {
  margin-block: var(--spacing-xhuge);
}

main > .section[data-margin="xxhuge"] {
  margin-block: var(--spacing-xxhuge);
}

/* Base Design System Tokens */
.dropin-design.dropin-design {
  --background-none: none 0 0% no-repeat padding-box;
}

.dropin-input-date__icon {
  z-index: 2;
}

/* Layout: Columns */
body.columns main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1264px;
  margin: 0 auto;
  padding: var(--spacing-large) var(--spacing-small);
  box-sizing: border-box;
  gap: var(--grid-4-gutters);
}

body.columns main > .section {
  flex: 1;
  flex-basis: 100%;
  max-width: unset;
  margin: unset;
  padding: unset;
}

.order-details main > .section > div{
  margin: 0;
}


body.columns main > .section > div {
  max-width: unset;
  padding: unset;
}

body.columns main > .section > div:not(:last-child) {
  margin-bottom: var(--gap, unset);
}

body.columns main > .section:empty {
  display: none;
}

@media (min-width: 850px) {
  body.columns main {
    padding: var(--spacing-big) var(--spacing-xsmall);
    flex-flow: row wrap;
  }

  body.columns main > .section {
    flex: 1;
    flex-basis: var(--column-width, auto);
  }
}

@media (max-width: 1200px) {
  body.columns main:has(.hero-banner) {
    flex-flow: column nowrap;
  }

  body.columns main > .section:has(.hero-banner) {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/**
* Reset main element visibility
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
*/
main[hidden] {
  display: none !important;
}

/*  Modal styling */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-in-out;
}

.modal.fade-out {
  animation: fadeOut 0.2s ease-in-out forwards;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(74 74 74 / 40%);
}

.modal__content {
  position: relative;
  z-index: 10;
  background: var(--color-white);
  border-radius: var(--shape-border-radius-1);
  max-width: 400px;
  width: 90%;
  padding: var(--spacing-big);
  box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__header h3{
  margin: 0;
}

.modal__heading {
  font: var(--ag-h3);
  color: var(--color-neutral-02);
}

.modal__close {
  border: none;
  background: url('../../icons/close-red.svg');
  cursor: pointer;
  color: transparent;
  width: var(--spacing-medium);
  height: var(--spacing-medium);
}

.modal__body {
  margin: 15px 0;
}

.modal__footer {
  margin-top: var(--spacing-small);
  display: flex;
  gap: var(--spacing-medium);
  align-items: center;
  justify-content: right;
}

.modal__footer button{
  margin-bottom: 0;
  margin-top: var(--spacing-xsmall);
}

/* Alert  */

.alert {
  padding: var(--spacing-xxsmall) var(--spacing-xsmall);
  border-radius: var(--shape-border-radius-1);
  font: var(--ag-notes-bold);
}

.alert-danger {
  background-color: var(--color-error-light);
  color: var(--color-error); 
}

.alert-danger.with-icon::before{
  content: '';
  padding: var(--spacing-xxsmall) var(--spacing-xsmall);
  background: url('../../icons/close-red.svg') left center no-repeat var(--color-error-light);
  color: var(--color-error);
  margin-right: var(--spacing-xsmall);
  background-size: 16px;
}

.alert-danger a {
  color: var(--color-error); 
  text-decoration: underline;
}

.alert-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.alert-success a {
  color: var(--color-success);
  text-decoration: underline;
}

.alert-success.with-icon::before{
  content: '';
  padding: var(--spacing-xxsmall) var(--spacing-xsmall);
  background: url('../../icons/tick-green.svg') left center no-repeat var(--color-success-light);
  margin-right: var(--spacing-xsmall);
  background-size: 16px;
}

main > .section.cookie-alerts-section {
  padding-bottom: var(--spacing-small);
}

main > .section.cookie-alerts-section > .cookie-alerts-wrapper {
  padding: 0;
}

main > .section.cookie-alerts-section .alert {
  width: fit-content;
}

@media (min-width: 1024px) {
  .alert {
    font: var(--ag-body);
    padding: var(--spacing-xmall) var(--spacing-small);
  }

  .alert-danger.with-icon::before{
    content: '';
    padding: var(--spacing-small) var(--spacing-small);
    background: url('../../icons/alert-icon-fill.svg') left center no-repeat var(--color-error-light);
    color: var(--color-error);
    margin-right: var(--spacing-xsmall);
  }

  .alert-success.with-icon::before{
    content: '';
    padding: var(--spacing-xmall) var(--spacing-small);
    background: url('../../icons/alert-icon-fill-success.svg') left center no-repeat var(--color-success-light);
    color: var(--color-success);
    margin-right: var(--spacing-xmall);
  }

}

a:not(.dropin-design a) {
  overflow-wrap: break-word;
}

/* A link inside a coloured phrase (`:color(#…){…}` — see
   docs/marketer-guides/text-colour-highlight.md) takes the phrase's colour.
   Without this the generic `a { color }` above beats inheritance, so a link
   could never be recoloured by the codes — e.g. burgundy links staying
   invisible on dark campaign sections. `:any-link` also outranks the
   :hover/:visited rules above so the colour holds on every state. */
.text-decoration a:any-link {
  color: inherit;
}

a:not(.dropin-design a):hover {
  text-decoration: none;
}

main .default-content-wrapper :is(p, li) a:not(.button),
main .columns :is(p, li) a:not(.button) {
  text-decoration: underline;
}

main .default-content-wrapper :is(p, li) a:not(.button):visited,
main .columns :is(p, li) a:not(.button):visited {
  text-decoration: underline;
}

main .default-content-wrapper :is(p, li) a:not(.button):hover,
main .columns :is(p, li) a:not(.button):hover {
  text-decoration: none;
}

.dropin-content-grid {
  overflow: auto;
}

.only-for-desktop {
    display: block !important;
  }

  .only-for-mobile {
    display: none !important;
  } 

  h2:has(+ ul) {
    font: var(--ag-h1);
    color: var(--color-neutral-02);
    margin-bottom: var(--spacing-medium);
  }

  h2+ ul {
    margin-top: 0;
    margin-left: 0;
    padding-left: var(--spacing-medium);
  }

  h2+ ul li {
    font: var(--ag-body);
  }

@media (max-width: 849.9px) {
  .only-for-desktop {
    display: none !important;
  }

  .only-for-mobile {
    display: block !important;
  } 
  
  h2:has(+ ul) {
    font: var(--ag-h2);
    margin-bottom: var(--spacing-small);
  }
}

.dropin-checkbox{
  column-gap: 4px;
  grid-template-columns: 24px auto !important;
}

.dropin-checkbox__box{
  width: 24px;
  height: 24px;
  border-radius: 2px;
  border: 1px solid var(--color-neutral-04);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* When checked, apply background color to the box, not the SVG */
.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* Make the checkmark SVG smaller but keep it transparent - only the tick path should show */
.dropin-checkbox__checkmark{
  width: 20px !important;
  height: 20px !important;
  background-color: var(--color-secondary) !important;
  color: var(--color-white);
}

.dropin-checkbox__label, .dropin-checkbox__label--medium{
  font: var(--type-body-1-default-font);
}

.dropin-checkbox__checkbox:checked ~ .dropin-checkbox__label,
.dropin-checkbox__checkbox:checked ~ .dropin-checkbox__label--medium {
  color: var(--color-neutral-01) !important;
}

.dropin-radio-button__label::before{
  height: 24px;
  width: 24px;
}

.dropin-radio-button__label {
  position: relative;
}

.dropin-radio-button__input:checked+.dropin-radio-button__label::before{
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.dropin-radio-button__input:checked+.dropin-radio-button__label::after{
  width: 8px !important;
  height: 8px !important;
  background: var(--color-white) !important;
  position: absolute !important;
  top: 50% !important;
  left: 13px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  margin: 0 !important; 
}

/* ========================================
   SHARED FORM COMPONENTS STYLES
   Used by: commerce-create-account, commerce-account-edit
   ======================================== */

/* Base Field Container */
.commerce-form-field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Base Label */
.commerce-form-label {
  font: var(--ag-body-bold);
  margin-bottom: var(--spacing-xsmall);
}

/* Base Input & Select Styles */
.commerce-form-input,
.commerce-form-select {
  font: var(--ag-body);
  padding: var(--spacing-small) var(--spacing-medium);
  border: 1px solid var(--color-neutral-04);
  border-radius: 4px;
  background: var(--color-white);
  transition: border-color 0.2s ease;
  width: 100%;
}

.commerce-form-input:focus,
.commerce-form-select:focus {
  border-color: var(--color-neutral-02);
}

.commerce-form-input:disabled {
  background-color: var(--color-neutral-05);
  color: var(--color-neutral-03);
}

/* Error State */
.commerce-form-input--error {
  border-color: var(--color-error) !important;
}

.commerce-form-error-message {
  font: var(--ag-notes);
  color: var(--color-error);
  margin-top: -14px;
}

/* Floating Label Fields */
.commerce-form-field--floating {
  position: relative;
}

.commerce-form-field--floating .commerce-form-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font: var(--ag-body);
  color: var(--color-neutral-03);
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
  padding: 0 4px;
  margin: 0;
}

/* Field group label styling */
.commerce-form-field-group--row > .commerce-form-label {
  margin-bottom: 0;
  white-space: nowrap;
  font: var(--ag-body-bold);
}

.commerce-form-field--floating .commerce-form-input,
.commerce-form-field--floating .commerce-form-select {
  padding: 20px 40px 6px 16px !important;
  height: 56px;
  box-sizing: border-box;
  line-height: 1.2 !important;
}

/* Label floats up when input/select is focused or has value */
.commerce-form-field--floating.has-value .commerce-form-label,
.commerce-form-field--floating .commerce-form-select:valid + .commerce-form-label,
.commerce-form-field--floating .commerce-form-input:not(:placeholder-shown) + .commerce-form-label,
.commerce-form-field--floating .commerce-form-input:focus + .commerce-form-label {
  top: 8px;
  transform: translateY(0);
  font: normal normal 400 12px/16px var(--type-base-font-family);
  color: var(--color-neutral-03);
  background: var(--color-white);
}

/* Password Fields */
.commerce-form-field--password .commerce-form-input {
  padding-right: 80px;
}

/* Green tick */
.commerce-form-field--floating .commerce-form-input:valid:not(:placeholder-shown, .commerce-form-input--error) {
  background-image: url('/icons/tick-green.svg');
  background-repeat: no-repeat;
  background-position: right 12px bottom 12px;
  background-size: 16px 16px;
}

/* Radio Buttons */
.commerce-form-radio-group {
  display: flex;
  gap: var(--spacing-medium);
}

.commerce-form-radio-option {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.commerce-form-radio-input {
  margin: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--color-neutral-03);
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--color-white);
  position: relative;
  transition: all 0.2s ease;
}

.commerce-form-radio-input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: 0.1s transform ease-in-out;
  background-color: var(--color-white);
}

.commerce-form-radio-input:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

.commerce-form-radio-input:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.commerce-form-radio-label {
  cursor: pointer;
  font: var(--ag-body);
  color: var(--color-neutral-03);
  padding-top: 3px;
}

.commerce-form-radio-input:checked + .commerce-form-radio-label {
  color: var(--color-neutral-02);
}

/* Checkboxes */
.commerce-form-checkbox-label {
  display: flex;
  align-items: end;
  gap: 8px;
  cursor: pointer;
}

.commerce-form-checkbox-label span {
  font: var(--ag-body);
  color: var(--color-neutral-03);
  line-height: 1.4;
}

.commerce-form-checkbox-input {
  margin: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--color-neutral-03);
  border-radius: 2px;
  cursor: pointer;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
  transition: all 0.2s ease;
}

.commerce-form-checkbox-input:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-image: url('/icons/checkbox-tick.svg');
}

.commerce-form-checkbox-input:checked + span {
  color: var(--color-neutral-02);
}

/* Date Selectors */
.commerce-form-date-selects {
  display: flex;
  gap: var(--spacing-xsmall);
}

.commerce-form-date-selects .commerce-form-field--floating {
  flex: 1;
}

.commerce-form-date-selects .commerce-form-select--year {
  flex: 1.2;
}

.commerce-form-date-selects .commerce-form-select {
  width: 100%;
  appearance: none;
  background-image: url('/icons/select-bg.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px;
  color: var(--color-neutral-02);
}

/* Password Toggle Button */
.commerce-form-password-toggle {
  position: absolute;
  right: 12px;
  top: 12px;
  background: none;
  border: none;
  font: var(--ag-body);
  font-size: 12px;
  color: var(--color-neutral-02);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  line-height: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.commerce-form-password-toggle:hover {
  color: var(--color-neutral-800);
}

/* Password toggle visibility states */
.commerce-form-field--password:focus-within .commerce-form-password-toggle,
.commerce-form-input:not(:placeholder-shown) ~ .commerce-form-password-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* Password Strength Indicator */
.commerce-form-password-strength {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  padding: var(--spacing-xsmall);
  background-color: var(--color-neutral-06);
  margin-top: -8px;
  border-radius: 4px;
  transition: background 0.3s ease;
  height: 40px;
  box-sizing: border-box;
}

.commerce-form-password-strength-label {
  font: var(--ag-notes-bold);
}

.commerce-form-password-strength-value {
  font: var(--ag-notes);
  color: var(--color-neutral-02);
}

.commerce-form-password-strength--weak {
  background: linear-gradient(to right, var(--color-error-light) 25%, var(--color-neutral-06) 25%);
}

.commerce-form-password-strength--medium {
  background: linear-gradient(to right, var(--color-warning-light) 50%, var(--color-neutral-06) 50%);
}

.commerce-form-password-strength--strong {
  background: linear-gradient(to right, var(--color-success-light) 75%, var(--color-neutral-06) 75%);
}

.commerce-form-password-strength--very-strong {
  background: linear-gradient(to right, var(--color-success-light) 100%, var(--color-neutral-06) 100%);
}

/* Password Helper Text */
.commerce-form-field-helper-text {
  font: var(--ag-body);
  color: var(--color-neutral-03);
}

/* Field Groups */
.commerce-form-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
}

/* Field group modifiers */
.commerce-form-field-group--row {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-medium);
}

/* fieldset/legend used for radio & DOB groups (WCAG 1.3.1) */
fieldset.commerce-form-field-group {
  display: flex;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.commerce-form-field-group--row > legend.commerce-form-label {
  margin-bottom: 0;
  white-space: nowrap;
  font: var(--ag-body-bold);
}

/* Styles to change order of few sections */

.order-details main .commerce-shipping-status-wrapper{
  display: none;
}

.order-details main .section.commerce-order-header-container{
  display: flex;
  flex-direction: column;
}

.order-details main .section .commerce-order-cost-summary-wrapper{
  order: 4
}

.order-details main .section .commerce-customer-details-wrapper{
  order: 5
}

/* ── Shared Price Info Tooltip (used on PDP, PLP, Search) ── */

.price-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: url("../icons/functional.svg") no-repeat center;
  background-size: contain;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.price-info-box {
  display: none;
  position: absolute;
  font: var(--ag-notes);
  background-color: var(--color-neutral-05);
  border: 0.5px solid var(--color-neutral-03);
  color: var(--color-neutral-02);
  text-align: left;
  padding: 15px;
  width: 220px;
  height: auto;
  z-index: 10;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 4px rgb(0 0 0 / 20%);
}

.price-info-box::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 12px;
  height: 12px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  background-color: var(--color-neutral-05);
  border-bottom: 1px solid var(--color-neutral-03);
  border-right: 1px solid var(--color-neutral-03);
}

/* Bottom-positioned variant (tooltip below button) */
.price-info-box--bottom {
  bottom: auto;
  top: 35px;
}

.price-info-box--bottom::after {
  bottom: auto;
  top: -7px;
  transform: translateX(-50%) rotate(-135deg);
}

@media (max-width: 849.9px) {
  .price-info-box {
    width: 200px;
    max-width: calc(100vw - 32px);
  }

  .price-info-box.price-info-box--viewport-fixed {
    position: fixed;
    transform: none;
    z-index: 10001;
  }

  .price-info-box.price-info-box--viewport-fixed::after {
    left: var(--price-info-arrow-left, 50%);
    transform: translateX(-50%) rotate(45deg);
  }

  .price-info-box.price-info-box--viewport-fixed.price-info-box--bottom::after {
    transform: translateX(-50%) rotate(-135deg);
  }
}

/* WCAG 2.3.3: respect reduced motion (extend per-component as needed) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Cart merge prompt — see lazy-styles.css */

/* common class for my account */

body.columns:is(
  .my-account,
  .order,
  .order-details,
  .invoices,
  .wishlist,
  .addresses,
  .overview,
  .review,
  .newsletter,
  .subscriptions
) main {
  gap: var(--spacing-big);
}

/* Account pages: keep sidebar + content on one row; let content column shrink for wide tables */
@media (min-width: 850px) {
  body.columns:is(
    .my-account,
    .order,
    .order-details,
    .invoices,
    .wishlist,
    .addresses,
    .overview,
    .review,
    .newsletter,
    .subscriptions
  ) main {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  /* Success/error banners prepended to main must span full width above sidebar + content */
  body.columns:is(
    .my-account,
    .order,
    .order-details,
    .invoices,
    .wishlist,
    .addresses,
    .overview,
    .review,
    .newsletter,
    .subscriptions
  ) main:has(> .commerce-account-sidebar__banner-wrapper) {
    flex-wrap: wrap;
  }

  body.columns:is(
    .my-account,
    .order,
    .order-details,
    .invoices,
    .wishlist,
    .addresses,
    .overview,
    .review,
    .newsletter,
    .subscriptions
  ) main > .commerce-account-sidebar__banner-wrapper {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  body.columns:is(
    .my-account,
    .order,
    .order-details,
    .invoices,
    .wishlist,
    .addresses,
    .overview,
    .review,
    .newsletter,
    .subscriptions
  ) main > .section:not(.commerce-account-sidebar-container) {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  body.columns:is(
    .my-account,
    .order,
    .order-details,
    .invoices,
    .wishlist,
    .addresses,
    .overview,
    .review,
    .newsletter,
    .subscriptions
  ) main > .section.commerce-account-sidebar-container {
    flex-shrink: 0;
  }

  body.columns:is(
    .my-account,
    .order,
    .order-details,
    .invoices,
    .wishlist,
    .addresses,
    .overview,
    .review,
    .newsletter,
    .subscriptions
  ) main > .section > div {
    min-width: 0;
  }
}

/* Account tables: horizontal scroll without visible scrollbar chrome */
.account-table-scroll {
  width: 100%;
  min-width: 0;
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.account-table-scroll::-webkit-scrollbar {
  display: none;
}

/* stylelint-disable selector-id-pattern */

/* Hide branding on the cookie banner */
a#CybotCookiebotDialogPoweredbyCybot, div#CybotCookiebotDialogPoweredByText {
    display: none !important;
}

/* Hide the floating Privacy Trigger/Widget icon */
#CookiebotWidget {
    display: none !important;
}
/* stylelint-enable selector-id-pattern */

/* Account pages: reduce padding top on small screens */
@media (max-width: 849.9px) {
  body.columns main {
    padding-top: 0;
  }
}

/* Fixing issue coming due to ab experiment banner */

body.experiment-koffiebonen-ab-banner-experiment{
  display: block;
}


/* ---------------------------------------------------------------------------
   Clickable surfaces — the whole tile navigates to its CTA.

   Applied by makeClickableSurface() (common-lib/src/clickable-surface.js), which
   appends a bare anchor covering the tile. Authors switch it off per block with
   a `not-clickable` class; the helper then adds nothing at all.

   This works through pointer-events rather than z-index, deliberately. Several
   blocks give an inner panel `position: relative` plus a `z-index`, which opens
   a stacking context — and a child of that panel can then never be raised above
   the panel itself, however large its z-index. So no z-index the overlay could
   pick would let a CTA inside such a panel stay clickable. Making the tile's
   content transparent to the pointer sidesteps stacking entirely: hit-testing
   walks to the topmost element that still accepts pointer events.

   `.banner--small` already used exactly this technique locally; this generalises
   it. The cost is that text inside a clickable tile is no longer selectable,
   which is inherent to the whole-tile-is-a-link pattern.

   Placed at the end of the file so these descendant selectors never precede the
   bare `a` / `select` / `textarea` rules they are more specific than.
   --------------------------------------------------------------------------- */
.clickable-surface {
  position: relative;
  cursor: pointer;
}

.clickable-surface > a.clickable-surface__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;

  /* Match a rounded tile so the focus ring follows the same silhouette. */
  border-radius: inherit;
}

/* Tile content passes clicks through to the overlay beneath it. */
.clickable-surface > *:not(a.clickable-surface__overlay) {
  pointer-events: none;
}

/* Real controls opt back in, and are lifted above the overlay so they keep
   their own hover and focus behaviour rather than the tile swallowing them.
   Both halves are needed: pointer-events beats a stacking context the block
   opened, z-index beats the overlay's own paint order.

   Must stay *after* the rule above: the two have equal specificity, so source
   order is what decides. `position: relative` is intentionally weak here — a
   block that positions its own control (the Hero's detached button) declares it
   with higher specificity and keeps that positioning. */
/* stylelint-disable no-descending-specificity */
.clickable-surface a:not(.clickable-surface__overlay),
.clickable-surface button,
.clickable-surface [role="button"],
.clickable-surface input,
.clickable-surface select,
.clickable-surface textarea,
.clickable-surface summary {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
/* stylelint-enable no-descending-specificity */

/* ---------------------------------------------------------------------------
   Section surface + editorial layer

   Everything here is driven by section metadata, so a campaign page is authored
   rather than styled. The metadata keys are read in section-background.js and
   published as custom properties on the section:

     Text color    -> the section's text colour        (like `Background color`)
     Panel color   -> --section-panel-color            (the fill of a blockquote panel)
     Measure       -> --section-measure                (`500` or `500, 278`)
     Min height    -> --section-min-height             (`500` or `500, 420`)

   plus the `editorial` value of `Style` for the shared copy rhythm below.
   --------------------------------------------------------------------------- */

/* A band with a minimum height is a stage for its content: centre it. */
main > .section.section-has-min-height {
  min-height: var(--section-min-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* stylelint-disable-next-line no-descending-specificity -- collides only with
   `body.columns main > .section > div` (a page-template rule with disjoint
   properties); this layer stays grouped rather than moving above it. */
main > .section.section-has-min-height > div {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   `Style: editorial` — the copy rhythm shared by long-form brand and campaign
   bands: a kicker, a heading, body copy, and an optional highlight panel.

   Rhythm only. Type comes from the atomic scale: a band picks the heading
   *level* whose `--ag-h*` size the design calls for (22px is an h3, 18px an
   h4), it never restyles one.
   --------------------------------------------------------------------------- */

/* Headings keep the atomic scale — `h1`..`h6` are set once in this file from
   the `--ag-h*` tokens and nothing here reopens them. An editorial band picks
   the *level* whose size the design calls for; only the spacing around them
   belongs to the band. */
main > .section.editorial :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--spacing-xsmall);
}

main > .section.editorial h1 {
  margin-bottom: 22px;
}

main > .section.editorial p {
  font: var(--ag-body);
  margin: 0 0 13px;
}

/* Lists share the paragraph's type but not its leading: this copy family sets
   items at 34px with 13px between them, where the base `li` inherits 24px and
   no margin. Two independent migrations measured the same shortfall (−89px and
   −56px per list on desktop), so the rhythm belongs to the editorial band
   rather than to either page. */
main > .section.editorial :is(ol, ul) {
  margin-block: 13px;
}

main > .section.editorial :is(ol, ul) li {
  font: var(--ag-body);
  line-height: 34px;
  margin-bottom: 13px;
}

main > .section.editorial :is(ol, ul) li:last-child {
  margin-bottom: 0;
}

/* A blockquote becomes a filled highlight panel once the section names a panel
   colour. Without one it keeps the site's quotation treatment. */
main > .section.section-has-panel-color blockquote {
  background: var(--section-panel-color);
  border-radius: var(--shape-border-radius-1);
  padding: var(--spacing-xsmall) var(--spacing-xbig);
  margin: 20px 20px 0;
  font-style: normal;
  text-indent: 0;
}

main > .section.section-has-panel-color blockquote p:last-child {
  margin-bottom: 0;
}

main > .section.section-has-panel-color blockquote p::before,
main > .section.section-has-panel-color blockquote p::after {
  content: none;
}

/* Body copy is often set to a shorter measure than the column it sits in.
   Last in this layer: it has the highest specificity of the group. */
main > .section.section-has-measure :is(.default-content-wrapper, .columns > div > div) > p {
  max-width: var(--section-measure);
  margin-inline: auto;
}

@media only screen and (max-width: 849.9px) {
  main > .section.section-has-min-height {
    min-height: var(--section-min-height-mobile, var(--section-min-height));
  }

  main > .section.section-has-measure :is(.default-content-wrapper, .columns > div > div) > p {
    max-width: var(--section-measure-mobile, var(--section-measure));
  }

  /* The desktop panel inset (20px margin + 40px padding each side) costs a third
     of a phone's width, which rewraps every line inside it. Give the panel the
     section's own content width and a proportionate inset instead. */
  main > .section.section-has-panel-color blockquote {
    margin-inline: 0;
    padding-inline: var(--spacing-medium);
  }
}