/** Shopify CDN: Minification failed

Line 481:3 Unexpected "{"
Line 507:3 Unexpected "{"
Line 790:3 Unexpected "{"
Line 878:3 Unexpected "{"
Line 1006:3 Unexpected "{"
Line 2022:3 Unexpected "{"
Line 2331:3 Unexpected "{"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:berit-404 (INDEX:2) */
.berit-404 {
    background-color: var(--berit-colour-white);
    color: var(--berit-colour-pitch);
    /* Mobile: the header sits in normal flow above, so a modest top gap. */
    padding: 2rem 2rem 4rem;
    box-sizing: border-box;
  }

  /* Desktop: the header floats, so clear it with the same top spacing as
     the other pages (3.5 + 4.75 + 5.5 = 13.75rem). */
  @media screen and (min-width: 990px) {
    .berit-404 {
      padding: 13.75rem 4rem 6rem;
    }
  }

  /* The same centred reading column as the text pages. */
  .berit-404__inner {
    max-width: var(--berit-text-measure);
    margin: 0 auto;
    text-align: left;
  }

  .berit-404__title {
    margin: 0 0 2rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-title);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
  }

  .berit-404__body {
    margin: 0 0 2.5rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text); /* matches the text pages' body (11px) */
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--berit-colour-pitch);
  }

  /* Quiet text links with the site-wide treatment: no underline at rest,
     a thin underline on hover. */
  .berit-404__links {
    margin: 0;
    display: flex;
    gap: 3rem;
  }

  .berit-404__links a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
    text-decoration: none;
    text-underline-offset: 0.3rem;
  }

  .berit-404__links a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }
/* END_SECTION:berit-404 */

/* START_SECTION:berit-collection (INDEX:3) */
.berit-collection {
    /* Mobile: the header sits in normal flow above, so a modest top gap. */
    padding: 2rem 2rem 4rem;
    box-sizing: border-box;
  }

  /* Desktop: the header floats over this section, with the menus pinned to
     the left and right edges. As well as the top clearance that lines the
     cards up with the menu's top line (header top 3.5 + logo 4.75 + gap 5.5
     = 13.75rem), the wide side inset keeps the grid clear of the two menu
     columns and gives the cards a smaller, more contained measure. */
  @media screen and (min-width: 990px) {
    .berit-collection {
      padding: 13.75rem var(--berit-frame-inset) 6rem;
    }
  }

  .berit-collection__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Mobile: two columns. A single product sits left in the first column. */
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }

  @media screen and (min-width: 990px) {
    .berit-collection__grid {
      /* Desktop: up to four across, each card capped to a contained measure
         (minmax 0..26rem) so the images never balloon on a very wide monitor.
         The tracks pack to the left, so a single product sits left-aligned
         with generous whitespace to its right. */
      grid-template-columns: repeat(4, minmax(0, 26rem));
      justify-content: start;
      gap: 4rem 2.5rem;
    }
  }

  .berit-collection__item {
    margin: 0;
  }

  /* Holds the image strip and the arrows together so the arrows can sit on
     top of the photos without scrolling away with them. */
  .berit-collection__media-wrap {
    position: relative;
  }

  /* The image strip: a horizontal swipe carousel, one image at a time, that
     snaps each photo neatly into view. With a single image it simply holds
     that one photo. */
  .berit-collection__media {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* hide the scrollbar (Firefox) */
  }

  .berit-collection__media::-webkit-scrollbar {
    display: none; /* hide the scrollbar (Safari / Chrome) */
  }

  .berit-collection__frame-link {
    flex: 0 0 100%;
    /* Lock each image to the start of the strip and force a clean stop, so a
       swipe or arrow click always settles on one whole photo (never a sliver
       of the next). */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    text-decoration: none;
  }

  /* Same 2:3 portrait frame and Sand loading background as the hero. */
  .berit-collection__frame {
    width: 100%;
    aspect-ratio: var(--berit-image-ratio);
    overflow: hidden;
    background-color: var(--berit-colour-sand); /* Sand */
  }

  .berit-collection__frame--empty {
    background-color: var(--berit-colour-sand); /* Sand, when there is no image at all */
  }

  .berit-collection__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
  }

  .berit-collection__frame-link:hover .berit-collection__image {
    opacity: 0.9;
  }

  /* Arrow buttons floating over the photos, using the same filled triangle as
     the product page carousel so every arrow on the site matches. Sized a
     little smaller here to suit the smaller card. */
  .berit-collection__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--berit-colour-pitch); /* Pitch */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Hidden until the image is hovered. */
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  /* Reveal the arrows on hover of the image. */
  .berit-collection__media-wrap:hover .berit-collection__arrow {
    opacity: 1;
  }

  .berit-collection__arrow svg {
    width: var(--berit-chevron-size);
    height: var(--berit-chevron-size);
  }

  .berit-collection__arrow--prev {
    left: 0.4rem;
  }

  .berit-collection__arrow--next {
    right: 0.4rem;
  }

  /* Faded out when you can't go further in that direction, even on hover. */
  .berit-collection__arrow[disabled],
  .berit-collection__media-wrap:hover .berit-collection__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  /* ⚠️ Jost = placeholder for Futura (loaded by the header). */
  /* The caption sits under the image, left aligned. When the product is
     available, the name stacks with the price below it. When it is not,
     the name and 'coming soon' share one line (name left, status right). */
  .berit-collection__caption {
    display: block;
    width: 100%;
    margin-top: 1rem;
    text-align: left;
    text-decoration: none;
    transition: opacity 0.06s ease;
  }

  .berit-collection__caption:hover {
    opacity: 0.55;
  }

  /* The name / 'coming soon' line for unavailable products. */
  .berit-collection__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
  }

  .berit-collection__name,
  .berit-collection__price,
  .berit-collection__meta {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
  }

  .berit-collection__name {
    display: block;
    color: var(--berit-colour-pitch); /* Pitch */
  }

  /* Price: right-aligned on the name row, in black. */
  .berit-collection__price {
    color: var(--berit-colour-pitch); /* Pitch */
    white-space: nowrap;
  }

  /* Deeper Stone so 'coming soon' reads as secondary. */
  .berit-collection__meta {
    color: var(--berit-colour-stone);
    white-space: nowrap;
  }

  .berit-collection__empty {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-stone);
    text-align: center;
  }
/* END_SECTION:berit-collection */

/* START_SECTION:berit-faq (INDEX:4) */
.berit-faq {
    /* Mobile: the header sits in normal flow above, so a modest top gap.
       Matches the about page exactly. */
    padding: 2rem 2rem 4rem;
    box-sizing: border-box;
  }

  /* Desktop: the header floats, so the title needs the same top clearance
     as the about and product pages to line up with the menu's top line
     (header top 3.5 + logo 4.75 + gap 5.5 = 13.75rem). */
  @media screen and (min-width: 990px) {
    .berit-faq {
      padding: 13.75rem 4rem 6rem;
    }
  }

  /* The same contained reading column as the about page, centred on the
     page, so the title and toggles sit in the same place. */
  .berit-faq__inner {
    max-width: var(--berit-text-measure);
    margin: 0 auto;
    text-align: left;
  }

  /* Page title, styled exactly like the about page title. */
  .berit-faq__title {
    margin: 0 0 2rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-title);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
  }

  .berit-faq__accordion {
    width: 100%;
  }

  /* No divider lines: the rows simply stack, matching the product page. */
  .berit-faq__row-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
    transition: opacity 0.06s ease;
  }

  /* Fade to grey on hover, matching the menu links / footer / product rows. */
  .berit-faq__row-summary:hover {
    opacity: 0.55;
  }

  /* Hide the default browser arrow on the <summary>. */
  .berit-faq__row-summary::-webkit-details-marker {
    display: none;
  }

  .berit-faq__row-heading {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
  }

  .berit-faq__row-content {
    padding: 0 0 1.5rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text); /* matches the about page body (11px) */
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--berit-colour-pitch);
  }

  .berit-faq__row-content p {
    margin: 0 0 0.75rem;
  }

  .berit-faq__row-content p:last-child {
    margin-bottom: 0;
  }

  /* Links are Pitch. The underline behaviour (none at rest, thin on hover)
     comes from the site-wide default for .rte links in base.css. */
  .berit-faq__row-content a {
    color: var(--berit-colour-pitch);
  }
/* END_SECTION:berit-faq */

/* START_SECTION:berit-footer (INDEX:5) */
.berit-footer {
    background-color: var(--berit-colour-white); /* White, same field as the rest of the page */
    color: var(--berit-colour-pitch); /* Pitch */
    padding: 4rem 2rem 3rem;
    box-sizing: border-box;
  }

  .berit-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }

  /* Signup + links. Stacked on mobile; side by side on desktop. */
  .berit-footer__top {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }

  /* ⚠️ Jost = placeholder for Futura */
  .berit-footer__heading,
  .berit-footer__sub,
  .berit-footer__field input,
  .berit-footer__note,
  .berit-footer__nav a,
  .berit-footer__legal {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
  }

  /* ---------- EMAIL CAPTURE ---------- */
  .berit-footer__heading {
    margin: 0;
    font-size: var(--berit-type-text);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: lowercase;
  }

  .berit-footer__sub {
    margin: 0.6rem 0 0;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-stone); /* deeper Stone, matches the hero 'coming soon' line */
  }

  .berit-footer__form {
    margin-top: 1.5rem;
    max-width: 26rem;
  }

  .berit-footer__field {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--berit-colour-pitch);
  }

  /* Flex above would otherwise beat the hidden attribute set after a
     successful sign-up. */
  .berit-footer__field[hidden] {
    display: none;
  }

  .berit-footer__field input {
    flex: 1;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--berit-colour-pitch);
    font-size: var(--berit-type-text);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-footer__field input:focus,
   {
    outline: none;
    box-shadow: none;
  }

  /* Keyboard focus is always visible (WCAG 2.4.7). */
  .berit-footer__field input:focus-visible {
    outline: 1px solid var(--berit-colour-pitch);
    outline-offset: 3px;
  }

  .berit-footer__field input::placeholder {
    color: var(--berit-colour-stone); /* Stone */
  }

  .berit-footer__submit {
    border: 0;
    background: none;
    color: var(--berit-colour-pitch);
    cursor: pointer;
    line-height: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-footer__submit:focus,
   {
    outline: none;
    box-shadow: none;
  }

  /* Keyboard focus is always visible (WCAG 2.4.7). */
  .berit-footer__submit:focus-visible {
    outline: 1px solid var(--berit-colour-pitch);
    outline-offset: 3px;
  }

  .berit-footer__submit svg {
    width: 22px;
    height: 22px;
  }

  .berit-footer__note {
    margin: 1rem 0 0;
    font-size: var(--berit-type-text);
    letter-spacing: 0.02em;
    color: var(--berit-colour-stone); /* Stone */
  }

  /* The consent disclosure under the sign-up field. */
  .berit-footer__consent {
    margin: 0.8rem 0 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--berit-colour-stone); /* deeper Stone */
  }

  .berit-footer__consent a {
    color: var(--berit-colour-stone);
    text-decoration: none;
    text-underline-offset: 0.3rem;
  }

  .berit-footer__consent a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }

  .berit-footer__note--error {
    color: var(--berit-colour-oxblood); /* Oxblood */
  }

  /* ---------- LINKS ----------
     The menu is grouped into columns. On mobile the columns stack on top of
     each other; on desktop they sit side by side in a row. */
  .berit-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .berit-footer__nav-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .berit-footer__nav a {
    color: var(--berit-colour-pitch);
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: var(--berit-type-text);
    transition: opacity 0.06s ease;
  }

  .berit-footer__nav a:hover {
    opacity: 0.55;
  }

  /* ---------- BASE LINE ---------- */
  .berit-footer__base {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .berit-footer__wordmark {
    display: inline-flex;
    line-height: 0;
  }

  /* The market picker: a quiet text control in the base line. Country
     names keep their capitals (proper nouns, per the case rule). */
  .berit-footer__market-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-bottom: 1px solid var(--berit-colour-pitch);
    border-radius: 0;
    background: transparent;
    padding: 0.3rem 2rem 0.3rem 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.02em;
    color: var(--berit-colour-pitch);
    cursor: pointer;
    /* A small Pitch triangle as the caret, matching the site's selects. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpolygon points='5 8 19 8 12 17'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.2rem center;
    background-size: 1rem;
  }

  .berit-footer__logo {
    display: block;
    width: auto;
    height: 24px;
  }

  .berit-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: var(--berit-type-text);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--berit-colour-stone); /* Stone */
  }

  /* Exception: keep the copyright as written, so BERIT stays capitalised. */
  .berit-footer__copyright {
    text-transform: none;
  }

  /* Hide a label visually but keep it for screen readers. */
  .berit-footer__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* ---------- DESKTOP ---------- */
  @media screen and (min-width: 990px) {
    .berit-footer {
      padding: 6rem 4rem 4rem;
    }

    .berit-footer__inner {
      gap: 4.5rem;
    }

    /* Signup on the left, link columns over on the right. */
    .berit-footer__top {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 4rem;
    }

    .berit-footer__nav {
      flex-direction: row;
      gap: 14rem;
    }

    /* Base line spreads to the two edges, wordmark left, legal right. */
    .berit-footer__base {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }

    .berit-footer__legal {
      align-items: flex-end;
      text-align: right;
    }
  }
/* END_SECTION:berit-footer */

/* START_SECTION:berit-header (INDEX:6) */
.berit-header {
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 2rem 1.5rem 1.5rem; /* top / right / bottom / left (left trimmed slightly) */
  }

  /* The header sits on a Bone band and sticks to the top on scroll. */
  .berit-header--solid {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--berit-colour-white); /* White */
  }

  .berit-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .berit-header__left {
    display: flex;
    align-items: center;
  }

  /* The BERIT logo (assets/berit-logo.svg). Natural ratio 90:34. */
  .berit-header__logo-link {
    display: inline-flex;
    line-height: 0;
  }

  .berit-header__logo {
    display: block;
    width: auto;
    height: 28px; /* mobile size */
  }

  /* ⚠️ Jost = placeholder for Futura */
  .berit-header__nav,
  .berit-header__actions,
  .berit-header__action,
  .berit-header__nav-link,
  .berit-header__panel-nav a,
  .berit-header__search input,
  .berit-header__icon,
  .berit-header__panel-close,
  .berit-header__search-close {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
  }

  /* MOBILE-FIRST: hide the desktop word-menu and word-actions. */
  .berit-header__nav,
  .berit-header__actions {
    display: none;
  }

  .berit-header__icons {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  /* The right-hand actions read as words on mobile too (search / cart / menu),
     matching the desktop word menu rather than using icons. */
  .berit-header__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Padding + matching negative margin enlarge the tap target without
       moving anything visually. Half the 1.2rem gap each side, so
       neighbouring targets touch but never overlap. */
    padding: 0.9rem 0.6rem;
    margin: -0.9rem -0.6rem;
    border: 0;
    background: none;
    color: var(--berit-colour-pitch); /* Pitch */
    cursor: pointer;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: var(--berit-type-text);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-header__icon:focus,
  .berit-header__icon:focus-visible,
  .berit-header__menu-toggle:focus,
  .berit-header__menu-toggle:focus-visible,
  .berit-header__panel-close:focus,
  .berit-header__panel-close:focus-visible,
  .berit-header__panel:focus,
  .berit-header__panel:focus-visible,
  .berit-header__search-toggle:focus,
  .berit-header__search-toggle:focus-visible,
  .berit-header__search-close:focus,
   {
    outline: none;
    box-shadow: none;
  }

  /* Keyboard focus is always visible (WCAG 2.4.7). */
  .berit-header__search-close:focus-visible {
    outline: 1px solid var(--berit-colour-pitch);
    outline-offset: 3px;
  }

  .berit-header__icon:hover {
    opacity: 0.55;
  }

  /* MOBILE PANEL */
  /* Invisible tap-catcher behind the open panel: tapping anywhere outside
     the menu closes it instead of doing nothing. */
  .berit-header__backdrop {
    position: fixed;
    inset: 0;
    z-index: 29; /* just beneath the panel */
    background: transparent;
  }

  .berit-header__backdrop[hidden] {
    display: none;
  }

  .berit-header__panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background-color: var(--berit-colour-white); /* white */
    padding: 2rem 2rem 2.5rem 1.5rem; /* left matches the header bar so the logo stays put */
    display: flex;
    flex-direction: column;
  }

  .berit-header__panel[hidden] {
    display: none;
  }

  .berit-header__panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .berit-header__panel-close {
    border: 0;
    background: none;
    color: var(--berit-colour-pitch);
    cursor: pointer;
    line-height: 1;
    /* Enlarged tap target, visually unchanged (it sits alone top-right). */
    padding: 1rem;
    margin: -1rem;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: var(--berit-type-text);
    -webkit-tap-highlight-color: transparent;
  }

  .berit-header__search {
    margin: 2.5rem 0 3rem;
    border-bottom: 1px solid var(--berit-colour-pitch);
  }

  .berit-header__search input {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--berit-colour-pitch);
    font-size: var(--berit-type-text);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-header__search input:focus,
   {
    outline: none;
    box-shadow: none;
  }

  /* Keyboard focus is always visible (WCAG 2.4.7). */
  .berit-header__search input:focus-visible {
    outline: 1px solid var(--berit-colour-pitch);
    outline-offset: 3px;
  }

  .berit-header__search input::placeholder {
    color: var(--berit-colour-stone); /* Stone */
  }

  /* Each link carries its own tap padding now, so the gaps shrink to keep
     the same visual rhythm: clusters still read tighter within than
     between. */
  .berit-header__panel-nav {
    display: flex;
    flex-direction: column;
    gap: 1.6rem; /* the deliberate space between the two clusters */
  }

  .berit-header__panel-group {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .berit-header__panel-nav a {
    color: var(--berit-colour-pitch);
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: var(--berit-type-text);
    /* A comfortable thumb target: the full row is tappable and each link
       carries vertical padding, rather than the bare text line. */
    display: block;
    padding: 0.7rem 0;
  }

  /* The desktop 'search' word is a button now; strip the browser chrome
     so it reads exactly like the other action words. */
  button.berit-header__action {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
    /* Buttons bring their own (tighter) line spacing; inherit the page's so
       'search' sits on exactly the same line as 'shop' across the page. */
    line-height: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  /* The thin clear cross inside the search fields, shown while typing.
     Same icon language and shared size as every other icon on the site. */
  .berit-header__search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--berit-colour-pitch);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.06s ease;
  }

  .berit-header__search-clear:hover {
    opacity: 0.55;
  }

  .berit-header__search-clear svg {
    width: var(--berit-chevron-size);
    height: var(--berit-chevron-size);
  }

  .berit-header__search-clear[hidden] {
    display: none;
  }

  /* Hide the browser's own grey clear circle so only our cross shows. */
  .berit-header__search-inline input::-webkit-search-decoration,
  .berit-header__search-inline input::-webkit-search-cancel-button,
  .berit-header__search input::-webkit-search-decoration,
  .berit-header__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  /* INLINE SEARCH BAR: drops in under the header bar when opened. */
  .berit-header__search-bar {
    margin-top: 1.5rem;
  }

  .berit-header__search-bar[hidden] {
    display: none;
  }

  .berit-header__search-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--berit-colour-pitch);
  }

  .berit-header__search-inline input {
    flex: 1;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--berit-colour-pitch);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-header__search-inline input:focus,
   {
    outline: none;
    box-shadow: none;
  }

  /* Keyboard focus is always visible (WCAG 2.4.7). */
  .berit-header__search-inline input:focus-visible {
    outline: 1px solid var(--berit-colour-pitch);
    outline-offset: 3px;
  }

  .berit-header__search-inline input::placeholder {
    color: var(--berit-colour-stone); /* Stone */
  }

  .berit-header__search-close {
    border: 0;
    background: none;
    color: var(--berit-colour-pitch);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: var(--berit-type-text);
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
  }

  /* Lock background scroll while the panel is open. */
  html.berit-menu-open {
    overflow: hidden;
  }

  /* ---------- DESKTOP ---------- */
  @media screen and (min-width: 990px) {
    .berit-header {
      padding: 3.5rem 4rem 3.5rem 3.5rem; /* slightly tighter on the left */
      --berit-logo-h: 4.75rem;   /* desktop logo height */
      --berit-logo-gap: 5.5rem;  /* gap below the logo before the menus start */
    }

    /* On the homepage, float over the hero so the image can sit up
       level with the menus, and stay fixed on scroll. The hero supplies
       the Bone background; the menus sit at the edges, clear of the
       centred image. */
    .berit-header--home {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      background: transparent;
    }

    /* On the product page the header also floats over the top so the
       product content can line up with the side menus, and stays fixed
       on scroll. The content is centred and the menus sit at the far
       edges, so they stay clear of each other. The product section
       supplies the Bone background behind it. */
    .berit-header--product,
    .berit-header--page,
    .berit-header--collection,
    .berit-header--cart {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      background: transparent;
      /* The header floats as a full-width transparent layer. Without this,
         that empty layer would still swallow clicks meant for the content
         beneath it (e.g. the top FAQ toggles). 'none' lets clicks pass
         through the empty areas; the links below switch clicking back on. */
      pointer-events: none;
    }

    /* Re-enable clicking on the actual menu words, logo, buttons and the
       search field itself. */
    .berit-header--product a,
    .berit-header--product button,
    .berit-header--product input,
    .berit-header--page a,
    .berit-header--page button,
    .berit-header--page input,
    .berit-header--collection a,
    .berit-header--collection button,
    .berit-header--collection input,
    .berit-header--cart a,
    .berit-header--cart button,
    .berit-header--cart input {
      pointer-events: auto;
    }

    .berit-header__bar {
      align-items: flex-start; /* top-align the two columns */
    }

    .berit-header__left {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--berit-logo-gap);
    }

    .berit-header__logo {
      height: var(--berit-logo-h); /* desktop size, a touch larger */
    }

    /* show the word menus, hide the mobile icons */
    .berit-header__nav,
    .berit-header__actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    /* shop and about read as their own separate sections */
    .berit-header__nav {
      gap: 1.5rem;
    }

    .berit-header__icons {
      display: none;
    }

    .berit-header__actions {
      align-items: flex-end; /* right-align the action words */
      /* Drop the right menu down so its top lines up with 'shop':
         the logo's height plus the gap beneath it. */
      margin-top: calc(var(--berit-logo-h) + var(--berit-logo-gap));
    }

    /* 'search' is its own category; set it apart from cart / log in. */
    .berit-header__action--search {
      margin-bottom: 1rem;
    }

    /* The field opens exactly where the 'search' word sits, at a contained
       width, rather than spanning the page. Its right edge lines up with
       the action words; the word steps aside (keeping its space) while the
       field is open, so clicking 'search' reads as a swap in place. */
    .berit-header__action--search[aria-expanded="true"] {
      visibility: hidden;
    }

    .berit-header__search-bar {
      position: absolute;
      top: calc(3.5rem + var(--berit-logo-h) + var(--berit-logo-gap) - 0.6rem);
      right: 4rem;
      width: 22rem;
      max-width: calc(100% - 8rem);
      margin-top: 0;
    }

    .berit-header__nav-link,
    .berit-header__action {
      color: var(--berit-colour-pitch);
      text-decoration: none;
      text-transform: lowercase;
      letter-spacing: 0.08em;
      font-size: var(--berit-type-text);
      transition: opacity 0.06s ease;
    }

    .berit-header__nav-link:hover,
    .berit-header__action:hover {
      opacity: 0.55;
    }
  }
/* END_SECTION:berit-header */

/* START_SECTION:berit-hero (INDEX:7) */
/* ---------- FULL-BLEED DIPTYCH (two images chosen) ----------
     The two images ARE the page: edge to edge, full height, running
     behind the floating header (which is fixed and transparent on the
     home page). Panes have no fixed ratio — each is half the screen and
     the image cover-crops to fill. Desktop panes range ~4:5 (laptops)
     to 8:9 (wide monitors), so supply 4:5 portraits (2000px+ long edge)
     with the subject comfortably centred — NOT the site's 2:3, which
     would lose a quarter of its height here. */
  /* Doubled class beats the base .berit-hero padding rules below at any
     width, including the desktop 13.75rem clearance (not wanted here: the
     spread starts at the very top, behind the header). */
  .berit-hero.berit-hero--full {
    position: relative;
    padding: 0;
    /* The base hero centres its content with flex, which would shrink the
       spread to its content width; block lets it span edge to edge. */
    display: block;
  }

  .berit-hero--full .berit-hero__spread {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    text-decoration: none;
  }

  .berit-hero--full .berit-hero__pane {
    overflow: hidden;
    /* Mobile: the two stack at 4:5, matching the diptych's source crop
       (deliberately not the 2:3 site token). */
    aspect-ratio: 4 / 5;
    background-color: var(--berit-colour-sand);
  }

  /* Stacked (mobile), the right-hand image leads; the desktop block below
     restores the chosen left/right order. */
  .berit-hero--full .berit-hero__pane:last-child {
    order: -1;
  }

  .berit-hero--full .berit-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
  }

  .berit-hero--full .berit-hero__spread:hover .berit-hero__image {
    opacity: 0.9;
  }

  @media screen and (min-width: 990px) {
    .berit-hero--full .berit-hero__spread {
      /* Desktop: side by side, the full viewport tall, no gap — one spread. */
      grid-template-columns: 1fr 1fr;
    }

    .berit-hero--full .berit-hero__pane {
      aspect-ratio: auto;
      height: 100svh;
    }

    .berit-hero--full .berit-hero__pane:last-child {
      order: 0;
    }
  }

  /* ---------- CONTAINED SINGLE-IMAGE HERO (default) ---------- */
  .berit-hero {
    background-color: var(--berit-hero-bg);
    padding: 2rem 2rem 4rem;
    display: flex;
    justify-content: center;
  }

  .berit-hero__inner {
    width: 100%;
    max-width: 600px;
  }

  .berit-hero__link {
    display: block;
    text-decoration: none;
  }

  /* The image sits in a fixed 2:3 portrait frame and fills it. This is the
     site-wide image shape (also used on the product page), and it matches the
     Instagram feed / feed-ad portrait format so one crop serves both. */
  .berit-hero__frame {
    width: 100%;
    aspect-ratio: var(--berit-image-ratio);
    overflow: hidden;
    background-color: var(--berit-colour-sand); /* Sand, shown behind the image while it loads */
  }

  .berit-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
  }

  .berit-hero__link:hover .berit-hero__image {
    opacity: 0.9;
  }

  /* ⚠️ Jost = placeholder for Futura (loaded by the header). */
  /* Name on the left, status on the right, both on one line spanning
     the full width of the image. */
  .berit-hero__caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
    text-decoration: none;
    transition: opacity 0.06s ease;
  }

  /* The product name: sits on the left. */
  .berit-hero__caption-name {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
  }

  /* The status line: same size, sits on the right. A deeper Stone so it
     reads clearly against the Bone background while staying secondary. */
  .berit-hero__caption-meta {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-stone);
  }

  .berit-hero__caption:hover {
    opacity: 0.55;
  }

  @media screen and (min-width: 990px) {
    .berit-hero {
      /* Top padding lines the image top up with the header menus:
         header top padding 3.5 + logo 4.75 + gap 5.5 = 13.75rem.
         (The header floats over this section on desktop home.) */
      padding: 13.75rem 4rem 6rem;
    }

    /* The full-bleed diptych ignores that clearance: it starts at the very
       top and runs behind the floating menus. */
    .berit-hero.berit-hero--full {
      padding: 0;
    }

    .berit-hero__inner {
      /* Keep the image (and the caption under it) within the screen.
         Caps at 520px wide; on shorter windows it scales down to fit
         the viewport height, since the frame is a 2:3 portrait (width =
         height x 0.667). The smaller height buffer lets the image fill more
         of the screen so the footer sits below the fold. */
      max-width: min(520px, calc((100svh - 20rem) * 0.667));
    }
  }
/* END_SECTION:berit-hero */

/* START_SECTION:berit-page (INDEX:8) */
.berit-page {
    /* Mobile: the header sits in normal flow above, so a modest top gap. */
    padding: 2rem 2rem 4rem;
    box-sizing: border-box;
  }

  /* Desktop: the header floats, so the title needs the same top clearance
     as the product page to line up with the menu's top line
     (header top 3.5 + logo 4.75 + gap 5.5 = 13.75rem). */
  @media screen and (min-width: 990px) {
    .berit-page {
      padding: 13.75rem 4rem 6rem;
    }
  }

  .berit-page__inner {
    /* A contained reading measure, centred on the page with the text
       centred too. */
    max-width: var(--berit-text-measure);
    margin: 0 auto;
    text-align: left;
  }

  /* Page title, styled like the product name. */
  .berit-page__title {
    margin: 0 0 2rem; /* a structural break before the body */
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-title);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch); /* Pitch, primary */
  }

  /* Body prose, styled like the product description. */
  /* Images placed in the page editor sit full column width with generous
     air, Sand behind them while they load. No forced ratio: editorial
     images on text pages keep their own shape. */
  .berit-page__body img {
    display: block;
    width: 100%;
    height: auto;
    margin: 3rem 0;
    background-color: var(--berit-colour-sand);
  }

  /* Two images side by side: wrap them in <div class="berit-page__pair">
     via the page editor's HTML view. Portrait pairs read best. */
  .berit-page__body .berit-page__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 3rem 0;
  }

  .berit-page__body .berit-page__pair img,
  .berit-page__body .berit-page__pair p {
    margin: 0;
  }

  .berit-page__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text); /* 11px (1rem = 10px on this site) */
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--berit-colour-pitch); /* Pitch */
  }

  .berit-page__body p {
    margin: 0 0 0.75rem; /* the product's paragraph rhythm */
  }

  .berit-page__body p:last-child {
    margin-bottom: 0;
  }

  /* Links are Pitch. The underline behaviour (none at rest, thin on hover)
     comes from the site-wide default for .rte links in base.css. */
  .berit-page__body a {
    color: var(--berit-colour-pitch);
  }

  /* Sub-headings within the prose, styled like the product labels. */
  .berit-page__body h2,
  .berit-page__body h3 {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
    margin: 2rem 0 0.75rem;
  }
/* END_SECTION:berit-page */

/* START_SECTION:berit-product (INDEX:9) */
.berit-product {
    display: block;
    background-color: var(--berit-colour-white); /* White */
    color: var(--berit-colour-pitch); /* Pitch */
    /* Left/right line up with the header menu items (left trimmed slightly). */
    padding: 2rem 2rem 4rem 1.5rem;
    box-sizing: border-box;
  }

  .berit-product__grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  /* The shared .berit-icon style (1px stroked line-art) now lives in base.css
     so every icon across the whole site matches. */

  /* ---------- IMAGES ---------- */
  /* Holds the carousel and the arrow buttons together so the arrows can sit
     on top of the images without scrolling away with them. */
  .berit-product__media-wrap {
    position: relative;
  }

  /* Arrow buttons floating over the photos to step through the carousel.
     The arrowhead is the same small triangle used by the dropdown caret, for
     a consistent look. Shown on mobile only (hidden on desktop further down). */
  .berit-product__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 3.4rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    /* Explicit Pitch: without this, iOS gives buttons its default blue text
       colour, and the triangle (drawn with currentColor) turns blue. */
    color: var(--berit-colour-pitch);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-product__arrow svg {
    width: var(--berit-chevron-size);
    height: var(--berit-chevron-size);
  }

  .berit-product__arrow--prev {
    left: 0.4rem;
  }

  .berit-product__arrow--next {
    right: 0.4rem;
  }

  /* Faded out when you can't go further in that direction. */
  .berit-product__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  /* On mobile the images are a horizontal swipe carousel: one image at a
     time, a peek of the next, and a snap so each settles neatly into view.
     (On desktop this becomes a vertical stack again, further down.) */
  .berit-product__media {
    display: flex;
    flex-direction: row;
    /* Don't let the row stretch each frame to the tallest photo's height: that
       would override the 2:3 aspect-ratio below and make the images too tall.
       Letting each frame size itself keeps the intended 2:3 shape. */
    align-items: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* hide the scrollbar (Firefox) */
  }

  .berit-product__media::-webkit-scrollbar {
    display: none; /* hide the scrollbar (Safari / Chrome) */
  }

  /* Every image sits in an identical 2:3 portrait frame, so they all line up
     at the same size regardless of the original photo's shape. This 2:3 shape
     is used everywhere (mobile and desktop, here and on the hero) and matches
     the Instagram feed / feed-ad portrait format, so one crop serves both. On
     mobile each frame fills the screen width. */
  .berit-product__frame {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: var(--berit-image-ratio);
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  .berit-product__frame--empty {
    background-color: var(--berit-colour-sand); /* Sand, only when there is no image at all */
  }

  /* The photo fills the frame edge to edge, cropping any excess rather than
     leaving coloured bars beside it. The zoom-in cursor hints that clicking
     opens the image full-size (see the lightbox below). */
  .berit-product__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
  }

  /* ---------- IMAGE LIGHTBOX ----------
     Clicking a product image opens it full-size, centred on an almost-solid
     Bone field so nothing competes with the photo. The overlay is added to the
     end of the page by the script, so it sits above everything (including the
     header). Click anywhere, the close button, or press Escape to dismiss. */
  .berit-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background-color: var(--berit-colour-white); /* White backdrop */
  }

  .berit-lightbox[hidden] {
    display: none;
  }

  .berit-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* The word 'close', top-right, in the site type (matching the header). */
  .berit-lightbox__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--berit-colour-pitch);
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  /* Prev / next arrows over the lightbox, matching the carousel arrows. They
     fade away at the first / last image. */
  .berit-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.4rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--berit-colour-pitch);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-lightbox__arrow svg {
    width: var(--berit-chevron-size);
    height: var(--berit-chevron-size);
  }

  .berit-lightbox__arrow--prev {
    left: 1rem;
  }

  .berit-lightbox__arrow--next {
    right: 1rem;
  }

  .berit-lightbox__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  /* ---------- INFO COLUMN ---------- */
  /* ⚠️ Jost = placeholder for Futura. */
  .berit-product__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .berit-product__name {
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-display);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
  }

  .berit-product__price {
    margin-top: 0.75rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    color: var(--berit-colour-pitch);
  }

  /* Import-duties note, international markets only, under the buy action. */
  .berit-product__duties {
    margin: 1.25rem 0 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--berit-colour-stone);
  }

  /* Keep Dawn's price text in line with ours (it uses its own classes). */
  .berit-product__price .price,
  .berit-product__price .price__regular,
  .berit-product__price .price-item {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    color: var(--berit-colour-pitch);
  }

  .berit-product__subtitle {
    margin: 1.25rem 0 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--berit-colour-stone); /* deeper Stone, the secondary text colour used across the site */
  }

  .berit-product__description {
    margin: 1.25rem 0 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--berit-colour-stone); /* deeper Stone, secondary text */
  }

  .berit-product__description p {
    margin: 0 0 0.75rem;
  }

  .berit-product__description a {
    color: var(--berit-colour-pitch);
  }

  /* ---------- PICKERS (size / version dropdowns) ---------- */
  .berit-product__pickers {
    width: 100%;
    margin-top: 2rem;
  }

  /* Space stacked dropdowns from each other. */
  .berit-product__pickers .product-form__input {
    margin: 0 0 1.25rem;
  }

  .berit-product__pickers .form__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-stone);
  }

  /* Once the custom dropdown is built (JS adds .berit-enhanced), the native
     select is hidden but kept in the page so the cart keeps working. */
  .berit-product__pickers .berit-enhanced .select {
    display: none;
  }

  /* The native select, used as a fallback before the JS runs: a quiet line
     rather than Dawn's boxed control. */
  .berit-product__pickers .select:before,
  .berit-product__pickers .select:after {
    display: none;
    box-shadow: none;
  }

  .berit-product__pickers .select__select {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--berit-colour-pitch);
    border-radius: 0;
    padding: 0.5rem 2rem 0.5rem 0;
  }

  .berit-product__pickers .select__select:focus,
  .berit-product__pickers .select__select:focus-visible {
    outline: 0;
    box-shadow: none;
  }

  /* ---------- CUSTOM DROPDOWN (Sophie Buhai feel) ---------- */
  .berit-select {
    position: relative;
    width: 100%;
  }

  /* The closed control: chosen value on the left, a caret on the right,
     sitting on a single quiet underline. */
  .berit-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--berit-colour-pitch);
    border-radius: 0;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
    text-align: left;
  }

  /* A small chevron that flips when the panel opens. */
  .berit-select__caret {
    flex: 0 0 auto;
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    transition: transform 0.12s ease;
  }

  .berit-select.is-open .berit-select__caret {
    transform: rotate(180deg);
  }

  /* The panel floats a few pixels below the field. That gap belongs to no
     element, so a click or drag passing through it used to count as 'outside'
     and snap the panel shut. This invisible strip fills the gap and belongs to
     the dropdown, so moving between the field and the options no longer closes
     it. (Only present while open.) */
  .berit-select.is-open::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.4rem;
    z-index: 4;
  }

  /* The open panel of choices. */
  .berit-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 5;
    background-color: var(--berit-colour-white); /* White */
    border: 1px solid var(--berit-colour-sand); /* faint hairline, not a heavy box */
    max-height: 20rem;
    overflow-y: auto;
  }

  /* Each choice: value on the left, stock status on the right, divided by
     a hairline. */
  .berit-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1.1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--berit-colour-sand);
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
    text-align: left;
    transition: opacity 0.06s ease;
  }

  .berit-select__list li:last-child .berit-select__option {
    border-bottom: 0;
  }

  .berit-select__option:hover {
    opacity: 0.55;
  }

  .berit-select__option-status {
    color: var(--berit-colour-stone); /* deeper Stone, secondary */
  }

  /* Sold-out choices read fainter, but stay selectable so the page can
     show the sold-out state. */
  .berit-select__option.is-unavailable .berit-select__option-name,
  .berit-select__option.is-unavailable .berit-select__option-status {
    color: var(--berit-colour-stone); /* Stone */
  }

  /* ---------- BUY BUTTON ---------- */
  .berit-product__buy {
    width: 100%;
    margin-top: 1rem;
  }

  .berit-product__buy .product-form__submit {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-white); /* Bone text */
    background-color: var(--berit-colour-pitch); /* Pitch button */
    border: none;
    border-radius: 0;
    padding: 0.95rem 1.5rem;
    min-height: 0;
    box-shadow: none;
    transition: opacity 0.06s ease;
  }

  /* Dawn draws the button outline with an ::after box-shadow ring, not a
     real border. Switch it (and the drop shadow ::before) off so the button
     reads as a clean solid block. */
  .berit-product__buy .product-form__submit::before,
  .berit-product__buy .product-form__submit::after {
    display: none;
  }

  .berit-product__buy .product-form__submit:hover:not([disabled]) {
    opacity: 0.9;
  }

  .berit-product__buy .product-form__submit[disabled] {
    background-color: var(--berit-colour-sand); /* disabled: sand fill, stone text */
    border-color: var(--berit-colour-sand);
    color: var(--berit-colour-stone);
    opacity: 1;
  }

  /* ---------- WAITING LIST ----------
     Shown in place of the add-to-cart button while a size is out of stock.
     Step 1 is a solid primary button (matching add-to-cart); clicking it
     reveals step 2: the text + underlined email field, styled like the
     footer's email capture. */
  .berit-product__waitlist-open {
    width: 100%;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-white); /* Bone text */
    background-color: var(--berit-colour-pitch); /* Pitch button */
    border: none;
    border-radius: 0;
    padding: 0.95rem 1.5rem;
    cursor: pointer;
    transition: opacity 0.06s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-product__waitlist-open:hover {
    opacity: 0.9;
  }


  /* The consent disclosure under the waitlist field. */
  .berit-product__waitlist-consent {
    margin: 0.8rem 0 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--berit-colour-stone); /* deeper Stone */
  }

  .berit-product__waitlist-consent a {
    color: var(--berit-colour-stone);
    text-decoration: none;
    text-underline-offset: 0.3rem;
  }

  .berit-product__waitlist-consent a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }

  .berit-product__waitlist-field {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    border-bottom: 1px solid var(--berit-colour-pitch);
  }

  /* The authored display values above would otherwise beat the hidden
     attribute the script sets after a successful sign-up. */
  .berit-product__waitlist-field[hidden],
  .berit-product__waitlist-submit[hidden] {
    display: none;
  }

  .berit-product__waitlist-field input {
    flex: 1;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--berit-colour-pitch);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-product__waitlist-field input:focus,
   {
    outline: none;
    box-shadow: none;
  }

  /* Keyboard focus is always visible (WCAG 2.4.7). */
  .berit-product__waitlist-field input:focus-visible {
    outline: 1px solid var(--berit-colour-pitch);
    outline-offset: 3px;
  }

  .berit-product__waitlist-field input::placeholder {
    color: var(--berit-colour-stone); /* Stone */
  }

  /* The submit is the same primary black block as add-to-cart, sitting
     beneath the field so the page's main action stays where the 'join
     waitlist' button was. */
  .berit-product__waitlist-submit {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-white); /* Bone text */
    background-color: var(--berit-colour-pitch); /* Pitch */
    border: none;
    border-radius: 0;
    padding: 0.95rem 1.5rem;
    min-height: 0;
    cursor: pointer;
    transition: opacity 0.06s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .berit-product__waitlist-submit:hover {
    opacity: 0.9;
  }

  .berit-product__waitlist-note {
    margin: 1rem 0 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.02em;
    color: var(--berit-colour-stone); /* Stone */
  }

  .berit-product__waitlist-note--error {
    color: var(--berit-colour-oxblood); /* Oxblood */
  }

  /* Hide a label visually but keep it for screen readers. */
  .berit-product__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* ---------- COLLAPSIBLE SECTIONS ---------- */
  .berit-product__accordion {
    width: 100%;
    margin-top: 2.5rem;
  }

  .berit-product__row {
    /* No divider lines: the rows simply stack. */
  }

  .berit-product__row-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
    transition: opacity 0.06s ease;
  }

  /* Fade to grey on hover, matching the menu links / footer / hero. */
  .berit-product__row-summary:hover {
    opacity: 0.55;
  }

  /* Hide the default browser arrow on the <summary>. */
  .berit-product__row-summary::-webkit-details-marker {
    display: none;
  }

  .berit-product__row-heading {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
  }

  /* A small + that turns into a - when the row is open. */
  .berit-product__row-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
  }

  /* The upright bar fades out when the row opens, leaving the - */
  .berit-product__row-icon-bar {
    transition: opacity 0.12s ease;
  }

  .berit-product__row[open] .berit-product__row-icon-bar {
    opacity: 0;
  }

  .berit-product__row-content {
    padding: 0 0 1.5rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--berit-colour-pitch);
  }

  .berit-product__row-content p {
    margin: 0 0 0.75rem;
  }

  .berit-product__row-content a {
    color: var(--berit-colour-pitch);
  }

  /* Bullet lists from a rich-text metafield: the dot sits flush at the very
     left edge (same edge as the headings and the plain-text rows), with no
     browser indent and no default gap above. */
  .berit-product__accordion .berit-product__row-content ul {
    margin: 0;
    padding: 0;
    padding-left: 0;
    list-style-position: inside;
  }

  .berit-product__accordion .berit-product__row-content li {
    margin: 0;
    padding: 0;
  }

  /* The share row: a quiet stacked list of links (pinterest / instagram /
     email), styled like the footer links. */
  .berit-product__share {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  /* These navigate away, so they take the site's link treatment (thin
     underline on hover) rather than the opacity fade used on controls. */
  .berit-product__share a {
    color: var(--berit-colour-pitch);
    text-decoration: none;
    text-underline-offset: 0.3rem;
    text-transform: lowercase;
    letter-spacing: 0.08em;
  }

  .berit-product__share a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }

  /* ---------- DESKTOP ---------- */
  @media screen and (min-width: 990px) {
    .berit-product {
      /* Top padding lines the content up with the header menus, the same
         way the hero does: header top 3.5 + logo 4.75 + gap 5.5 = 13.75rem.
         (The header floats over this section on desktop.)
         Left 3.5rem / right 4rem match the header's menu edges. */
      padding: 13.75rem 4rem 6rem 3.5rem;
    }

    /* Image and info sit close together as one pair, centred on the page.
       Centring (rather than pushing the info to the far right) keeps the
       info column clear of the floating search / cart / log in menu. */
    .berit-product__grid {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      gap: 4.5rem;
    }

    /* The images no longer stretch to fill the row, so there's no longer a
       wide empty gap between them and the info. */
    /* The wrapper becomes the sized column on desktop. A touch wider so the
       images read at a more generous size. */
    .berit-product__media-wrap {
      flex: 0 1 52rem;
      min-width: 0;
    }

    /* No arrows on desktop: it's a vertical stack you simply scroll. */
    .berit-product__arrow {
      display: none;
    }

    .berit-product__media {
      gap: 1.5rem;
      /* Back to a vertical stack on desktop (the carousel is mobile only). */
      flex-direction: column;
      overflow-x: visible;
    }

    /* In the desktop stack each frame simply fills the column width; the 2:3
       portrait shape is inherited from the base rule above. */
    .berit-product__frame {
      flex: 0 0 auto;
      width: 100%;
    }

    /* A narrow info column so the name, price, description and pickers
       sit in a calm, contained measure right beside the image. */
    .berit-product__info {
      flex: 0 0 28rem;
      max-width: 28rem;
      /* Don't let the column stretch to the full height of the image row;
         a sticky element needs spare room inside its parent to pin, and a
         stretched item has none. */
      align-self: flex-start;
    }

    /* The info column stays in view as you scroll the tall images. */
    .berit-product__info--sticky {
      position: sticky;
      top: 13.75rem;
      height: fit-content;
    }
  }
/* END_SECTION:berit-product */

/* START_SECTION:berit-search (INDEX:10) */
.berit-search {
    background-color: var(--berit-colour-white);
    color: var(--berit-colour-pitch);
    /* Mobile: the header sits in normal flow above, so a modest top gap. */
    padding: 2rem 2rem 4rem;
    box-sizing: border-box;
  }

  /* Desktop: the header floats, so clear it with the same top spacing as
     the product / collection / text pages (3.5 + 4.75 + 5.5 = 13.75rem). */
  @media screen and (min-width: 990px) {
    .berit-search {
      padding: 13.75rem var(--berit-frame-inset) 6rem;
    }
  }

  .berit-search__title {
    margin: 0 0 2rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-title);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
  }

  /* The field: full frame width, bottom stroke only, like the header search
     and the footer email capture. */
  .berit-search__form {
    margin-bottom: 5rem;
  }

  .berit-search__field {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--berit-colour-pitch);
  }

  .berit-search__field input {
    flex: 1;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--berit-colour-pitch);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    padding: 0.6rem 0;
    appearance: none;
    -webkit-appearance: none;
  }

  .berit-search__field input:focus,
   {
    outline: none;
    box-shadow: none;
  }

  /* Keyboard focus is always visible (WCAG 2.4.7). */
  .berit-search__field input:focus-visible {
    outline: 1px solid var(--berit-colour-pitch);
    outline-offset: 3px;
  }

  .berit-search__field input::placeholder {
    color: var(--berit-colour-stone); /* Stone */
    opacity: 1;
  }

  /* Hide the browser's own little clear (x) so the field stays clean. */
  .berit-search__field input::-webkit-search-decoration,
  .berit-search__field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .berit-search__submit,
  .berit-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--berit-colour-pitch); /* explicit, so iOS does not paint the icons blue */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.06s ease;
  }

  .berit-search__submit:hover,
  .berit-search__clear:hover {
    opacity: 0.55;
  }

  .berit-search__submit svg,
  .berit-search__clear svg {
    width: var(--berit-chevron-size);
    height: var(--berit-chevron-size);
  }

  .berit-search__clear[hidden] {
    display: none;
  }

  .berit-search__empty {
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--berit-colour-pitch);
    max-width: var(--berit-text-measure);
  }

  /* Product results: the same grid and card sizing as the shop page. */
  .berit-search__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
    justify-content: start;
  }

  @media screen and (min-width: 990px) {
    .berit-search__grid {
      grid-template-columns: repeat(4, minmax(0, 26rem));
      gap: 4rem 2.5rem;
    }
  }

  .berit-search__frame-link {
    display: block;
    text-decoration: none;
  }

  /* The 2:3 portrait frame used across the site. */
  .berit-search__frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--berit-image-ratio);
    overflow: hidden;
    background-color: var(--berit-colour-sand); /* behind letterboxed images */
  }

  .berit-search__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .berit-search__caption {
    display: block;
    width: 100%;
    margin-top: 1rem;
    text-align: left;
    text-decoration: none;
    transition: opacity 0.06s ease;
  }

  .berit-search__caption:hover {
    opacity: 0.55;
  }

  .berit-search__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
  }

  .berit-search__name,
  .berit-search__price,
  .berit-search__meta {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
  }

  .berit-search__name {
    display: block;
    color: var(--berit-colour-pitch); /* Pitch */
  }

  /* Price: right-aligned on the name row, in black. */
  .berit-search__price {
    color: var(--berit-colour-pitch); /* Pitch */
    white-space: nowrap;
  }

  .berit-search__meta {
    color: var(--berit-colour-stone); /* Stone */
    white-space: nowrap;
  }

  /* Plain text pagination. */
  .berit-search__pagination {
    margin-top: 5rem;
    display: flex;
    gap: 3rem;
  }

  .berit-search__pagination a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: var(--berit-type-text);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--berit-colour-pitch);
    text-decoration: none;
    text-underline-offset: 0.3rem;
  }

  .berit-search__pagination a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }
/* END_SECTION:berit-search */