/** Shopify CDN: Minification failed

Line 296:54 Unexpected "{"

**/
/**
 * Store-specific overrides. Loaded after theme.css.
 */

#collection-seo-description {
  scroll-margin-block-start: calc(var(--sticky-area-height, 0px) + 1rem);
}

/* Collection banner: between middle and bottom (Figma) — scoped by breakpoint so other positions still work */
@media screen and (max-width: 699px) {
  .shopify-section--collection-banner .place-self-lower-start {
    place-self: end start;
    margin-block-end: clamp(3.5rem, 12vh, 9rem);
  }

  .shopify-section--collection-banner .place-self-lower-center {
    place-self: end center;
    margin-block-end: clamp(3.5rem, 12vh, 9rem);
  }

  .shopify-section--collection-banner .place-self-lower-end {
    place-self: end end;
    margin-block-end: clamp(3.5rem, 12vh, 9rem);
  }
}

@media screen and (min-width: 700px) {
  .shopify-section--collection-banner .sm\:place-self-lower-start {
    place-self: end start;
    margin-block-end: clamp(4.5rem, 14vh, 11rem);
  }

  .shopify-section--collection-banner .sm\:place-self-lower-center {
    place-self: end center;
    margin-block-end: clamp(4.5rem, 14vh, 11rem);
  }

  .shopify-section--collection-banner .sm\:place-self-lower-end {
    place-self: end end;
    margin-block-end: clamp(4.5rem, 14vh, 11rem);
  }
}

/* SOLWE: collection banner layer icon + title size - CUSTOMIZATIONS.md #collection-banner */
.collection-banner__layer {
  display: grid;
  gap: var(--spacing-2);
  justify-items: start;
}

.collection-banner__layer-icon svg {
  display: block;
  height: auto;
  width: 100px;
}

.collection-banner__layer-title {
  font-size: 3rem;
}

@media screen and (max-width: 699px) {
  .collection-banner__layer-icon svg {
    width: 60px;
  }

  .collection-banner__layer-title {
    font-size: 2rem;
  }
}
/* /SOLWE */

/* Media with text: while the section is stacked (below the 1000px side-by-side
   breakpoint) the text aligns with the page margins, like a Rich text section.
   Impact insets it by --media-with-text-content-padding, which reads as a
   misalignment when the content block has no visible card background. The
   --flush class is only emitted in that case, so coloured cards keep their
   padding. See sections/media-with-text.liquid. */
@media screen and (max-width: 999px) {
  .media-with-text__content--flush {
    padding-inline: 0;
  }
}

/* Media with text: vertically center image beside taller content (Figma) */
@media screen and (min-width: 1000px) {
  .media-with-text__media {
    align-self: center;
    height: auto;
  }

  .media-with-text__media > :is(img, svg) {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
  }
}

.footer {
  padding-block-start: 0;
}

.footer__aside-bottom {
  align-items: start;
}

.footer__newsletter-logo {
  max-width: 28rem;
}

.footer__block-list {
  border-block: 1px solid rgb(var(--text-color) / 0.12);
  padding-block: var(--spacing-10);
}

.footer__newsletter-form {
  max-width: 28rem;
  width: 100%;
}

.footer__newsletter-field {
  align-items: center;
  background: #fff;
  border: 1px solid #000;
  border-radius: var(--rounded-full);
  display: flex;
  gap: 0.25rem;
  padding: 0 0 0 1.25rem;
  width: 100%;
}

.footer__newsletter-field:focus-within {
  outline: 2px solid rgb(var(--text-color) / 0.35);
  outline-offset: 2px;
}

.footer__newsletter-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: rgb(var(--text-color));
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.9375rem;
  height: 2.75rem;
  min-width: 0;
  outline: none;
  padding: 0;
  width: 100%;
}

.footer__newsletter-input::placeholder {
  color: #737373;
  opacity: 1;
}

.footer__newsletter-submit {
  align-items: center;
  background: #000;
  border: 0;
  border-radius: var(--rounded-full);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  height: 2.75rem;
  justify-content: center;
  line-height: 1;
  padding: 0 1.5rem;
  white-space: nowrap;
}

.footer__newsletter-submit:hover {
  opacity: 0.88;
}

.footer__newsletter-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-6);
}

.footer__newsletter-badge {
  display: block;
  line-height: 0;
}

.footer__newsletter-badge img {
  display: block;
  height: auto;
  max-width: 100%;
  width: auto;
}

/* Mobile footer: split the newsletter block so its sign-up form (title, content,
   form, badges) renders after the other footer blocks (link menus), while the
   logo/text-below-logo half stays where the block sits in the editor. The block
   itself goes display:contents so its two children become direct items of
   .footer__block-list's own grid instead of one combined item — desktop is
   untouched (rule only applies below 700px, and desktop uses flexbox instead
   of this grid). .footer__newsletter-form-wrap is a Solwe class hook added to
   the form's own wrapper div in sections/footer.liquid (SOLWE marker there),
   so this doesn't depend on sibling order or on the optional logo half being
   present. See CUSTOMIZATIONS.md #footer.liquid. */
@media screen and (max-width: 699px) {
  .footer__block--newsletter {
    display: contents;
  }

  .footer__block--newsletter > * {
    grid-column: span 2;
  }

  .footer__newsletter-form-wrap {
    order: 99;
    padding-block-start: var(--spacing-8);
    border-block-start: 1px solid rgb(var(--border-color));
  }
}

/* Mobile footer: a link menu left alone on the last grid row spans both columns,
   so long Finnish compounds don't break mid-word in a ~161px column.
   Selector rationale and combination testing: CUSTOMIZATIONS.md #footer.liquid */
@media screen and (max-width: 699px) {
  .footer__block--menu:nth-child(odd of .footer__block--menu, .footer__block--image):nth-last-child(1 of .footer__block--menu, .footer__block--image) {
    grid-column: span 2;
    max-width: none;
  }
}

.footer__payment-icons {
  --footer-payment-icon-max-height: 20px;
  --footer-payment-icon-box-width: 44px;
  --footer-payment-icon-box-height: 26px;
  align-items: center;
  gap: 6px;
}

@media screen and (min-width: 1000px) {
  .footer__payment-icons {
    max-width: 50%;
  }
}

.footer__payment-icon-item {
  align-items: center;
  justify-content: center;
  display: flex;
  flex: 0 0 auto;
  width: var(--footer-payment-icon-box-width);
  height: var(--footer-payment-icon-box-height);
  padding: 2px;
  background: rgb(255 255 255);
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--rounded-xs);
  box-sizing: border-box;
}

/* Wide wordmarks (default square/badge icons stay at 44px) */
.footer__payment-icon-item:has(.payment-icon-visa),

.footer__payment-icon-item:has(.payment-icon-walley),
.footer__payment-icon-item:has(.payment-icon-aktia),
.footer__payment-icon-item:has(.payment-icon-omasp),
.footer__payment-icon-item:has(.payment-icon-klarna-logo),
.footer__payment-icon-item:has(.payment-icon-op-lasku),
.footer__payment-icon-item:has(.payment-icon-op-tililuotto),
.footer__payment-icon-item:has(.payment-icon-google-pay) {
  width: 56px;
}

.footer__payment-icon-item:has(.payment-icon-mobile-pay),
.footer__payment-icon-item:has(.payment-icon-danskebank),
.footer__payment-icon-item:has(.payment-icon-s-pankki) {
  width: 64px;
}

.footer__payment-icon-item:has(.payment-icon-alandsbanken) {
  width: 72px;
}

.footer__payment-icon-item:has(.payment-icon-saastopankki) {
  width: 50px;
}

.footer__payment-icon-item:has(.payment-icon-nordea), {
  width: 30px;
}

.footer__payment-icon-item :is(svg, img) {
  display: block;
  max-width: 100%;
  max-height: var(--footer-payment-icon-max-height);
  width: auto !important;
  height: auto !important;
}

.footer__payment-icons .payment-icon-omasp,
.footer__payment-icons .payment-icon-s-pankki,
.footer__payment-icons .payment-icon-saastopankki {
  filter: saturate(1.1) contrast(1.12);
}

.announcement-bar__wrapper {
  max-width: var(--container-max-width);
}

/* Article breadcrumb (moved out of theme.css). Also used by the standalone Pillar header content section. */
.article .breadcrumb,
.pillar-header-content .breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px;
}

@media screen and (max-width: 699px) {
  .article .breadcrumb,
  .pillar-header-content .breadcrumb {
    margin-top: 12px;
  }
}

/* Article banner: left-aligned text, column aligned with body (Figma) */
.article-banner {
  justify-items: center;
}

.article-banner__content {
  gap: var(--spacing-4);
  justify-items: start;
  text-align: start;
}

.article-banner--content-width .article-banner__content {
  max-width: var(--article-max-width);
  width: 100%;
}

.article-banner .article__meta {
  justify-content: flex-start;
}

.article-reading-time {
  align-items: center;
  color: #777777;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px;
  line-height: 1.4;
}

.article-reading-time a {
  color: inherit;
  text-decoration: underline;
}

.article-reading-time a:hover {
  text-decoration: underline;
}

.article-reading-time__sep {
  color: #777777;
}

.breadcrumb a,
.breadcrumb-text {
  color: #333333;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-divider {
  color: #777777;
  font-size: 12px;
}

.breadcrumb a[aria-current="page"],
.breadcrumb-current {
  color: #777777;
  pointer-events: none;
}

/* Product breadcrumbs (nav-based collection path) */
.product-info__block-item[data-block-type="breadcrumbs"] {
  --product-info-block-spacing: var(--spacing-2);
}

.product-breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 0.175rem;
  line-height: 1.4;
}

.product-breadcrumb a {
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: none;
}

.product-breadcrumb a:hover {
  text-decoration: underline;
}

.product-breadcrumb .breadcrumb-divider {
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 700;
}

.product-breadcrumb .breadcrumb-current {
  color: #737373;
  font-weight: 400;
  pointer-events: none;
}

/* Product gallery: tight gaps + square corners (Figma) */
.shopify-section--main-product .product-gallery__media-list {
  gap: var(--spacing-2);
}

.shopify-section--main-product .product-gallery__media :is(img, video, iframe, svg, .rounded),
.shopify-section--main-product .product-gallery__media video-media,
.shopify-section--main-product .product-gallery__media model-media {
  border-radius: 0;
}

/* SOLWE: desktop grid, chosen colour's image in the main tile (order set by custom.js).
   The !important beats the section's own highlight rules, which are scoped by section id.
   - CUSTOMIZATIONS.md desktop-grid-variant-image */
@media screen and (min-width: 1000px) {
  .product-gallery--desktop-grid .product-gallery__media {
    order: var(--solwe-grid-order, 0);
  }

  .product-gallery--desktop-grid media-carousel[desktop-mode="grid_highlight"] > .is-solwe-main {
    grid-column: span 2 !important;
  }

  .product-gallery--desktop-grid media-carousel[desktop-mode="grid_highlight"] > .is-solwe-demoted:not(.product-gallery__media--expand) {
    grid-column: span 1 !important;
  }
}
/* /SOLWE */

/* Model size caption from image alt ("description - Model is…") */
.product-gallery__model-caption {
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--spacing-5);
  inset-block-end: var(--spacing-5);
  max-width: calc(100% - var(--spacing-10));
  margin: 0;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.8125rem;
  line-height: 1.3;
  pointer-events: none;
}

@media screen and (min-width: 700px) {
  .product-gallery__model-caption {
    inset-inline-start: var(--spacing-8);
    inset-block-end: var(--spacing-8);
    max-width: calc(100% - var(--spacing-16));
  }
}

/* Mobile: below image so photo stays fully visible */
@media screen and (max-width: 699px) {
  .product-gallery__model-caption {
    position: static;
    inset: auto;
    width: fit-content;
    max-width: 100%;
    margin: var(--spacing-2) 0 0;
    padding: 0.375rem 0.625rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
    font-size: 0.6875rem;
  }

  .product-gallery--mobile-expanded .product-gallery__model-caption {
    margin-inline-start: var(--container-outer-width);
    max-width: calc(100% - 2 * var(--container-outer-width));
  }
}

/* Product layer icon (custom.vaatekerros → theme setting images) — Figma top-left */
.product-gallery__layer-icon {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--spacing-5);
  inset-inline-start: var(--spacing-5);
  width: var(--product-layer-icon-width, 56px);
  line-height: 0;
  pointer-events: none;
}

.product-gallery__layer-icon-image {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 700px) {
  .product-gallery__layer-icon {
    inset-block-start: var(--spacing-8);
    inset-inline-start: var(--spacing-8);
  }
}

/* Product page: flush under header + tighter gallery–info gap (Figma) */
.shopify-section--main-product {
  --section-spacing-block-start: 0px;
}

.shopify-section--main-product .section {
  padding-block-start: 0;
}

@media screen and (min-width: 1000px) {
  .shopify-section--main-product .product {
    column-gap: var(--spacing-10);
  }
}

/* Product title, price, short description (Figma) */
.shopify-section--main-product .product-info__title {
  font-weight: 700;
  line-height: 1.2;
}

.shopify-section--main-product .product-info__block-item[data-block-type="title"] {
  --product-info-block-spacing: var(--spacing-2);
}

.shopify-section--main-product .product-info__block-item[data-block-type="price"] {
  --product-info-block-spacing: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

.shopify-section--main-product .product-info__block-item[data-block-type="title"] {
  margin-block-end: var(--spacing-2);
  margin-block-start: 0;
}

.shopify-section--main-product .product-info__block-item[data-block-type="buy-buttons"] {
  --product-info-block-spacing: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Variant size pills — compact Figma capsules */
.shopify-section--main-product .variant-picker .block-swatch {
  height: 2.5rem;
  min-width: 2.75rem;
  padding-inline: 1rem;
  font-size: 0.9375rem;
  line-height: 1;
  border-radius: 999px;
}

@media screen and (min-width: 700px) {
  .shopify-section--main-product .variant-picker .block-swatch {
    padding-inline: 1.125rem;
  }
}

/* SOLWE: Fitle "Löydä kokosi" in the size option row - CUSTOMIZATIONS.md product-info
   The row is Impact's space-between flex line, so on a narrow screen the three items
   squeezed and Fitle's icon and text broke onto two lines. Now the row wraps instead:
   Fitle stays on the first line, and Kokotaulukko drops to a second line, right-aligned.
   The two auto margins split the free space equally, so the one-line layout is unchanged.
   Fitle's own 1rem block margin is for a standalone block and is dropped inside the row. */
.variant-picker__option-info:has(.ftl-widget) {
  flex-wrap: wrap;
  column-gap: var(--spacing-4);
  row-gap: var(--spacing-2);
  align-items: center;
}

.variant-picker__option-info:has(.ftl-widget) > .shopify-app-block {
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: rgb(var(--text-color) / .7);
}

/* upnova-widget: bundle children's recommenders in Upnova's size rows - see SOLWE: Fitle per bundle child */
:is(.variant-picker__option-info, .size-guide, upnova-widget) .ftl-widget {
  white-space: nowrap;
  margin-block: 0;
  line-height: normal;
}
:is(.variant-picker__option-info, .size-guide, upnova-widget) .ftl-widget-text {
  line-height: inherit;
  transition: background-size .3s ease-in-out, color .3s ease-in-out;
}
@supports (height: 1lh) {
  :is(.variant-picker__option-info, .size-guide, upnova-widget) .ftl-widget-text {
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
  }
}
@media screen and (pointer: fine) {
  :is(.variant-picker__option-info, .size-guide, upnova-widget) .ftl-widget-text:hover {
    background-size: 0 1px;
  }
}
/* /SOLWE */

/* SOLWE: size guide block, Fitle and size chart without the variant options - CUSTOMIZATIONS.md product-info
   Same small muted text as the size option row; the Fitle text rules above cover both. */
.size-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-6);
  row-gap: var(--spacing-2);
}

.size-guide > .shopify-app-block {
  font-size: var(--text-sm);
  color: rgb(var(--text-color) / .7);
}

.size-guide--align-center {
  justify-content: center;
}

.size-guide--align-end {
  justify-content: flex-end;
}

/* Fitle adds .ftl-reco-button only when it has a recommendation to offer; bundles get none.
   With no Fitle button and no size chart button, drop the whole block and its margin. */
.size-guide .shopify-app-block:not(:has(.ftl-reco-button)) {
  display: none;
}

.product-info__block-item:has(.size-guide):not(:has(.ftl-reco-button, .size-guide > button, bundle-size-rows)) {
  display: none;
}
/* /SOLWE */

/* SOLWE: Kokotaulukko per bundle child - CUSTOMIZATIONS.md product-info
   A bundle's block keeps the size chart drawers after its rows have moved into Upnova's widget, so
   it is never hidden (a hidden ancestor would stop the drawers opening). With nothing left in it
   but closed drawers, which are fixed and take no space, only its spacing is dropped. */
.product-info__block-item:has(bundle-size-rows:not([data-state="home"])) {
  --product-info-block-spacing: 0;
}
/* /SOLWE */

/* SOLWE: Fitle per bundle child - CUSTOMIZATIONS.md product-info
   On a bundle, one Fitle recommender per child product. Until fitle-bundle-recommenders.js has
   moved them into Upnova's widget, or when it cannot, they sit on their own line under
   Kokotaulukko: the child's title above its "Löydä kokosi", stacked at every width, following the
   block's alignment. Muted small text comes from Impact's text-sm text-subdued on the wrapper. Fitle
   adds .ftl-reco-button only for a product it knows, so an item without one, and the wrapper
   when no item has one, are hidden rather than leaving a label with no button. */
.size-guide__fitle-items {
  display: grid;
  flex-basis: 100%;
  justify-items: start;
  row-gap: var(--spacing-3);
}

.size-guide__fitle-item {
  display: grid;
  justify-items: inherit;
  row-gap: var(--spacing-1);
}

.size-guide--align-center .size-guide__fitle-items {
  justify-items: center;
  text-align: center;
}

.size-guide--align-end .size-guide__fitle-items {
  justify-items: end;
  text-align: end;
}

.size-guide__fitle-items:not(:has(.ftl-reco-button)),
.size-guide__fitle-item:not(:has(.ftl-reco-button)) {
  display: none;
}

/* /SOLWE */

/* SOLWE: Kokotaulukko per bundle child - CUSTOMIZATIONS.md product-info
   Each bundle child's row (bundle-size-rows.liquid) holds its Fitle recommender and its
   Kokotaulukko. fitle-bundle-recommenders.js moves the row onto the child's "Koko:" line in
   Upnova's widget; until it has settled the rows are hidden, so they do not flash above the widget.
   A row it could not place stays here: the child's title, then Fitle and Kokotaulukko on one line,
   following the block's alignment. A row with neither button shows nothing. */
bundle-size-rows {
  display: grid;
  flex-basis: 100%;
  justify-items: start;
  row-gap: var(--spacing-3);
}

bundle-size-rows:not([data-state="home"]),
.bundle-size-row:not(:has(> button, .ftl-reco-button)) {
  display: none;
}

.bundle-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-4);
  row-gap: var(--spacing-1);
}

.size-guide--align-center bundle-size-rows {
  justify-items: center;
  text-align: center;
}

.size-guide--align-center .bundle-size-row {
  justify-content: center;
}

.size-guide--align-end bundle-size-rows {
  justify-items: end;
  text-align: end;
}

.size-guide--align-end .bundle-size-row {
  justify-content: flex-end;
}

.bundle-size-row__title {
  flex-basis: 100%;
}

/* The row carries the child's title, so the recommender's own is not shown */
.bundle-size-row bundle-fitle-recommender > span {
  display: none;
}

/* On the "Koko:" line in Upnova's widget, styled as the size row of a regular product page
   (.variant-picker__option-info and the "SOLWE: Fitle "Löydä kokosi" in the size option row"
   rules): a wrapping line, 16px between items, 8px between lines, Fitle and Kokotaulukko grouped
   on the right by the label's auto end margin. When they do not fit beside the label (the bundle
   column is 294px on desktop), Kokotaulukko wraps to a line of its own, right-aligned; with no
   Fitle it sits alone on the label's line, on the right. The row's box is dropped
   (display: contents) so Fitle and Kokotaulukko are items of that line beside the label; a
   box-less element still passes its font and colour on. The text is the theme's small muted text
   at the regular page's 1.6 line height, which also sets where the underlines fall. Upnova's
   :host redefines --text-sm (.875em), and slotted elements inherit through its shadow tree, so the
   theme's value is carried in as --solwe-bundle-row-text from .product-info, outside the widget.
   Upnova's option group is a column flex box at some widths and a grid at others, so it is set to
   a row here, with the size buttons on a line of their own; only widgets holding a row are
   changed. Upnova already shows the product's title, so the row's is hidden. */
.product-info:has(bundle-size-rows) {
  --solwe-bundle-row-text: var(--text-sm);
}

upnova-widget:has(> .bundle-size-row)::part(upnova-option-group) {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: var(--spacing-4);
  row-gap: var(--spacing-2);
}

upnova-widget:has(> .bundle-size-row)::part(upnova-option-label) {
  margin-inline-end: auto;
}

upnova-widget:has(> .bundle-size-row)::part(upnova-option-values) {
  flex-basis: 100%;
}

upnova-widget > .bundle-size-row {
  display: contents;
  font-size: var(--solwe-bundle-row-text);
  line-height: 1.6;
  color: rgb(var(--text-color) / .7);
}

/* The button's own text-sm class would read Upnova's --text-sm */
upnova-widget > .bundle-size-row > button {
  font-size: inherit;
}

upnova-widget > .bundle-size-row > .bundle-size-row__title {
  display: none;
}

/* On phones Upnova's label is 12px (Tailwind text-xs up to its md breakpoint, 768px), so the
   links take that size too rather than the theme's larger small text. With Fitle's shorter text
   (general.fitle_bundle.button_text, passed by fitle-bundle-recommenders.js), label, Fitle and
   Kokotaulukko share one line. The label carries the chosen size, so the line is widest with XXL:
   267px in Finnish, 265px in English, 279px in German. The item's text column is the viewport less
   108px (2 x 20px gutter, the 56px image, Upnova's 12px gap), so the line holds for every size and
   language from a 390px phone up. Below that the label takes a line of its own and Fitle and
   Kokotaulukko share the next one, right-aligned, so picking a size never makes Kokotaulukko jump
   to another line. Upnova's label part cannot be told apart per item, so this applies to every
   item, with or without Fitle. */
@media screen and (max-width: 767px) {
  .product-info:has(bundle-size-rows) {
    --solwe-bundle-row-text: 0.75rem;
  }
}

@media screen and (max-width: 389px) {
  upnova-widget:has(> .bundle-size-row)::part(upnova-option-label) {
    flex-basis: 100%;
  }
}

/* Upnova's item image is a 96px square with a border (Tailwind w-24 h-24 in its shadow root),
   which crops Svala's 3:4 product photos. It takes the product gallery thumbnails' look instead:
   3:4, --rounded-sm corners, no border (Impact's .product-gallery__thumbnail images, measured on
   the dev theme). Upnova's 96px width stays on desktop; on phones it is the thumbnails' 56px. The
   part name is the only hook Upnova exposes on it. Only on bundle pages: product.json carries the
   same Upnova block. */
.product-info:has(bundle-size-rows) upnova-widget::part(upnova-8f0bab9a5a02) {
  height: calc(6rem * 4 / 3);
  border-width: 0;
  border-radius: var(--rounded-sm);
}

@media screen and (max-width: 699px) {
  .product-info:has(bundle-size-rows) upnova-widget::part(upnova-8f0bab9a5a02) {
    width: 3.5rem;
    height: calc(3.5rem * 4 / 3);
  }
}
/* /SOLWE */

/* Size chart drawer: wider than the default drawer--lg so diagrams/tables have room */
.size-chart-drawer {
  width: 100%;
}

@media screen and (min-width: 700px) {
  .size-chart-drawer {
    width: 860px;
  }
}

/* SOLWE: size chart tables flipped on phones (copy made in custom.js), so they fit without
   scrolling sideways. The tighter cell gap fits four columns on a 320px phone; Impact's own
   rules still keep the first and last cell flush with the edges.
   - CUSTOMIZATIONS.md size-chart-mobile-table */
.size-chart-table-flipped {
  display: none;
}

@media screen and (max-width: 699px) {
  .size-chart-table-original {
    display: none;
  }

  .size-chart-table-flipped {
    display: table;
  }

  .size-chart-table-flipped :is(th, td) {
    padding-inline: var(--spacing-2);
  }
}

/* Below 360px (256px of drawer body on a 320px phone) the widest chart, men's tops S–3XL, needs
   277px at body size and its ranges broke after the dash, so the table steps down one size there */
@media screen and (max-width: 359px) {
  .size-chart-table-flipped {
    font-size: var(--text-sm);
  }
}
/* /SOLWE */

/* Size chart drawer tabs (Revolution Race-style pill switcher) when more than one size chart page is set.
   Each button carries its own pill background; there is no shared track background behind the row.
   That also sidesteps a shadow-DOM ::part() quirk where a wrapped flex line's items sat outside a
   *shared* track background — with no shared background to miss, wrapping to further rows is safe. */
.size-chart-tabs::part(tab-list) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.size-chart-tabs [slot="content"] {
  margin-block-start: var(--spacing-5);
}

.size-chart-tabs__button {
  background: #f0f0f0;
  border-radius: var(--rounded-full);
  color: #1a1a1a;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.size-chart-tabs__button[aria-selected="true"] {
  background: #1a1a1a;
  color: #fff;
}

.shopify-section--main-product .product-info__price .price-list :is(sale-price, compare-at-price) {
  font-weight: 400;
  color: rgb(var(--text-color));
  opacity: 1;
}

.shopify-section--main-product .product-info__price .price-list .text-subdued {
  opacity: 1;
}

.shopify-section--main-product .product-info__block-item[data-block-type="text"] {
  --product-info-block-spacing: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

.shopify-section--main-product .product-info__block-item[data-block-type="text"]
  ~ .product-info__block-item[data-block-type="text"] {
  --product-info-block-spacing: var(--spacing-6);
  margin-block-start: var(--product-info-block-spacing);
  margin-block-end: var(--product-info-block-spacing);
}

/* Complimus omnibus app: hide empty wrapper (scripts/styles only) so it doesn’t leave gap */
.product-info__block-item:has(#omnibus-price):not(:has(#omnibus-price *:not(script):not(style))) {
  display: none;
}

/* Reviews.io rating app: hide empty snippet wrapper so it doesn’t leave gap */
.product-info__block-item:has(reviewsio-product-ratings):has(.ruk_rating_snippet:empty) {
  display: none;
}

/* SOLWE: Reviews.io rating snippet count underlined like the theme's .link - CUSTOMIZATIONS.md "assets/custom.css" */
.product-info .ruk_rating_snippet .ruk-rating-snippet-count {
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 100% 1px no-repeat;
  transition: background-size .3s ease-in-out;
}

@supports (height: 1lh) {
  .product-info .ruk_rating_snippet .ruk-rating-snippet-count {
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
  }
}

@media screen and (pointer: fine) {
  .product-info .ruk_rating_snippet:hover .ruk-rating-snippet-count {
    background-size: 0 1px;
  }
}
/* /SOLWE */

.shopify-section--main-product .product-info__text {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
}

.shopify-section--main-product .product-info__text .prose a:not(.button) {
  text-decoration: underline;
  background: none;
}

.shopify-section--main-product .product-info__text .prose a:not(.button):hover {
  background: none;
  opacity: 0.7;
}

@media screen and (min-width: 700px) {
  .shopify-section--main-product .product-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--spacing-4);
  }

  .shopify-section--main-product .product-info > * {
    grid-column: 1 / -1;
  }

  .shopify-section--main-product .product-info__block-item[data-block-type="title"] {
    grid-column: 1;
  }

  .shopify-section--main-product .product-info__block-item[data-block-type="price"] {
    grid-column: 2;
    align-self: start;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .shopify-section--main-product .product-info__price .price-list :is(sale-price, compare-at-price) {
    font-family: var(--heading-font-family);
    font-size: var(--text-h3);
    font-weight: 700;
    letter-spacing: var(--heading-letter-spacing);
    line-height: 1.2;
  }

  /* Out of stock: stack price above sold-out badge (keep title+price row) */
  .shopify-section--main-product .product-info__price .rating-with-text:has(.badge--sold-out) {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--spacing-1);
  }

  .shopify-section--main-product
    .product-info__price
    .rating-with-text:has(.badge--sold-out)
    .product-info__badge-list {
    margin-inline-start: 0;
    align-self: flex-end;
  }

  .shopify-section--main-product .product-info__block-item[data-block-type="title"] {
    --product-info-block-spacing: var(--spacing-4);
  }
}

/* Product offer + inventory banner (Figma stock / shipping box) */
.offer--with-inventory {
  gap: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-5);
}

.offer--with-inventory .offer__status-line {
  align-items: baseline;
  column-gap: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

.offer--with-inventory .offer__divider {
  color: inherit;
  flex-shrink: 0;
}

.offer--with-inventory .offer__content {
  display: contents;
}

.offer--with-inventory .offer__content > :is(p, ul, ol) {
  margin: 0;
}

.offer--with-inventory .offer__content > p:first-child {
  display: inline;
}

.offer--with-inventory .offer__content > p:not(:first-child) {
  flex: 1 0 100%;
}

.offer--with-inventory .offer__content a {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.offer--with-inventory variant-inventory {
  display: inline-flex;
}

.offer--with-inventory variant-inventory .text-with-icon {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.375rem;
}

.offer--with-inventory variant-inventory .text-with-icon > svg {
  display: none;
}

.offer--with-inventory variant-inventory .text-with-icon::before {
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 0.5rem;
  width: 0.5rem;
}

.offer--with-inventory variant-inventory .text-success::before {
  background: rgb(var(--success-text));
}

.offer--with-inventory variant-inventory .text-warning::before {
  background: rgb(var(--warning-text));
}

.offer--with-inventory variant-inventory .text-error::before {
  background: rgb(var(--error-text));
}

/* SOLWE: smaller stock / shipping box on mobile (Jusko, 21.10.2026): one 12px size for the whole
   box, status included, and tighter padding. 700px and up unchanged. - CUSTOMIZATIONS.md offer-inventory-mobile */
@media screen and (max-width: 699px) {
  .offer--with-inventory {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .offer--with-inventory .offer__status-line {
    column-gap: var(--spacing-1);
    font-size: 0.75rem;
    line-height: 1.5;
  }
}
/* /SOLWE */

/* Product features box (Figma selling points from metafields) */
.product-features {
  margin-inline: auto;
  max-width: var(--product-features-max-width, 780px);
  width: 100%;
}

.product-features__box {
  background: var(--product-features-background, #f5f5f5);
  border-radius: 0.75rem;
  color: var(--product-features-text, #1a1a1a);
  display: grid;
  gap: var(--spacing-6) var(--spacing-8);
  grid-template-columns: 1fr;
  padding: var(--spacing-6);
}

.product-features__item {
  display: grid;
  gap: var(--spacing-1);
  margin: 0;
}

.product-features__label {
  color: var(--product-features-label, #737373);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.product-features__value {
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

@media screen and (min-width: 700px) {
  .product-features__box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    padding: var(--spacing-8);
  }
}

/* Product specs table (metafield rows) */
.product-specs {
  margin-inline: auto;
  max-width: var(--product-specs-max-width, 780px);
  width: 100%;
}

.product-specs__title {
  margin-block-end: var(--spacing-4);
}

.product-specs__table-wrap {
  overflow-x: auto;
  width: 100%;
}

.product-specs__table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
  width: 100%;
}

.product-specs__row {
  border-block-end: 1px solid rgb(var(--text-color) / 0.12);
}

.product-specs__row:first-child {
  border-block-start: 1px solid rgb(var(--text-color) / 0.12);
}

.product-specs__label,
.product-specs__value {
  padding-block: var(--spacing-3);
  text-align: start;
  vertical-align: top;
}

.product-specs__label {
  color: rgb(var(--text-color) / 0.7);
  font-weight: 400;
  padding-inline-end: var(--spacing-6);
  white-space: nowrap;
  width: 36%;
}

.product-specs__value {
  color: rgb(var(--text-color));
  font-weight: 500;
  width: 64%;
}

.product-specs__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.product-specs__link:hover {
  opacity: 0.7;
}

/* Product specs: extra rich text metafield inside a value cell (links must stay visible) */
.product-specs__extra--after {
  margin-block-start: var(--spacing-3);
}

.product-specs__extra p {
  margin: 0;
}

.product-specs__extra p + p {
  margin-block-start: var(--spacing-2);
}

.product-specs__extra a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.product-specs__extra a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 699px) {
  .product-specs__label {
    white-space: normal;
    width: 40%;
  }
}

/*
  Product page content rail — match rich text “medium” (780px).
  Main product gallery stays full page width; everything below aligns.
  Press sets --press-max-width inline, so override .press max-width directly.
*/
.shopify-section--main-product ~ .shopify-section--rich-text {
  --rich-text-max-width: 780px;
}

.shopify-section--main-product ~ .shopify-section--press .press {
  max-width: 780px;
}

.shopify-section--main-product ~ .shopify-section--press .press__list {
  text-align: start;
}

.shopify-section--main-product ~ .shopify-section--press .press__list-item {
  justify-items: start;
}

/* Rich text Column divider — Figma narrow-left / wide-right split */
@media screen and (min-width: 1000px) {
  .split-rich-text--narrow_start {
    align-items: start;
    display: grid;
    gap: var(--spacing-10) var(--spacing-12);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

@media screen and (min-width: 1150px) {
  .split-rich-text--narrow_start {
    gap: var(--spacing-10) var(--spacing-16);
  }
}

/* Rich text buttons: add extra margin-block-end to all but last button */
.rich-text .prose * + .button:not(:last-child) {
    margin-block-end: var(--spacing-6);
}

/* Rich text headings two steps smaller (h1→h3, h2→h4, h3→h5) */
.rich-text__wrapper :is(.h1, .prose h1:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6)),
.split-rich-text :is(.h1, .prose h1:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6)) {
  font-size: var(--text-h3);
  line-height: 1.2;
}

.rich-text__wrapper :is(.h2, .prose h2:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6)),
.split-rich-text :is(.h2, .prose h2:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6)) {
  font-size: var(--text-h4);
  line-height: 1.2;
}

.rich-text__wrapper :is(.h3, .prose h3:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6)),
.split-rich-text :is(.h3, .prose h3:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6)) {
  font-size: var(--text-h5);
  line-height: 1.3;
}

/* Rich text paragraphs — half the theme prose margin-block-start */
.rich-text__wrapper .prose * + p,
.split-rich-text .prose * + p {
  margin-block-start: calc(var(--spacing-3) / 2);
}

.rich-text__wrapper .prose :is(.h0, .h1, .h2, .h3, .h4, h1, h2, h3, h4) + p,
.split-rich-text .prose :is(.h0, .h1, .h2, .h3, .h4, h1, h2, h3, h4) + p {
  margin-block-start: calc(var(--spacing-5) / 2);
}

.rich-text__wrapper .prose :is(.h5, .h6, h5, h6) + p,
.split-rich-text .prose :is(.h5, .h6, h5, h6) + p {
  margin-block-start: calc(var(--spacing-4) / 2);
}

@media screen and (min-width: 700px) {
  .rich-text__wrapper .prose * + p,
  .split-rich-text .prose * + p {
    margin-block-start: calc(var(--spacing-4) / 2);
  }

  .rich-text__wrapper .prose :is(.h0, .h1, .h2, .h3, h1, h2, h3) + p,
  .split-rich-text .prose :is(.h0, .h1, .h2, .h3, h1, h2, h3) + p {
    margin-block-start: calc(var(--spacing-6) / 2);
  }

  .rich-text__wrapper .prose :is(.h4, h4) + p,
  .split-rich-text .prose :is(.h4, h4) + p {
    margin-block-start: calc(var(--spacing-5) / 2);
  }

  .rich-text__wrapper .prose :is(.h5, .h6, h5, h6) + p,
  .split-rich-text .prose :is(.h5, .h6, h5, h6) + p {
    margin-block-start: calc(var(--spacing-4) / 2);
  }
}

@media screen and (min-width: 1150px) {
  .rich-text__wrapper .prose * + p,
  .split-rich-text .prose * + p {
    margin-block-start: calc(var(--spacing-6) / 2);
  }

  .rich-text__wrapper .prose :is(.h0, .h1, .h2, h1, h2) + p,
  .split-rich-text .prose :is(.h0, .h1, .h2, h1, h2) + p {
    margin-block-start: calc(var(--spacing-8) / 2);
  }

  .rich-text__wrapper .prose :is(.h3, .h4, h3, h4) + p,
  .split-rich-text .prose :is(.h3, .h4, h3, h4) + p {
    margin-block-start: calc(var(--spacing-6) / 2);
  }

  .rich-text__wrapper .prose :is(.h5, .h6, h5, h6) + p,
  .split-rich-text .prose :is(.h5, .h6, h5, h6) + p {
    margin-block-start: calc(var(--spacing-4) / 2);
  }
}

/* Product payment icons (Figma row under buy / offer) */
.product-info__block-item[data-block-type="payment-icons"] {
  --product-info-block-spacing: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

.product-info__payment-icons {
  align-items: center;
  display: flex;
  flex-wrap: nowrap; /* SOLWE: one row on every width (Svala, 21.10.2026) */
  gap: 0.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* SOLWE: payment icons on one row. product.json's six icons need 318px at an
   8px gap, the product column is 320px at a 360px viewport. A longer row (the
   bundle template still lists nine) shrinks its icons to fit instead of
   wrapping: each item may shrink, and the SVG scales inside its box. */
@media screen and (max-width: 699px) {
  .product-info__payment-icons {
    column-gap: var(--spacing-2);
  }
}
/* /SOLWE */

.product-info__payment-icon-item {
  align-items: center;
  display: flex;
  flex: 0 1 auto; /* SOLWE: may shrink, see the one-row note above */
  line-height: 0;
  min-width: 0; /* SOLWE */
}

.product-info__payment-icons .payment-icon {
  display: block;
  height: var(--product-payment-icon-height, 16px);
  max-width: 100%;
  width: auto;
}

/* SOLWE: smaller Nordea wordmark in the product payment row (Jusko, 26.10.2026).
   Its letters fill the whole icon height, while the other logos sit in a badge
   or have padding of their own, so at the same height it read as the largest.
   Relative to the block's icon height setting, so that setting still scales it. */
.product-info__payment-icons .payment-icon-nordea {
  height: calc(var(--product-payment-icon-height, 16px) * 0.7);
}
/* /SOLWE */

/* Product carrier icons (SOLWE: mirrors product payment icons above).
   Margins don't collapse in the .product-info__blocks flex container, so
   only the end margin is zeroed here; the start keeps the default
   --product-info-block-spacing gap, which separates this row from the
   payment icons row above (also zeroed at its own end). */
.product-info__block-item[data-block-type="carrier-icons"] {
  margin-block-end: 0;
}

.product-info__carrier-icons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-info__carrier-icon-item {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  line-height: 0;
}

.product-info__carrier-icons .carrier-icon {
  display: block;
  height: var(--product-carrier-icon-height, 20px);
  max-width: 100%;
  width: auto;
}
/* /SOLWE */

/* Table of contents (moved out of theme.css) */
#toc-container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--toc-max-width);
  padding: var(--spacing-3);
}

#toc-container h3 {
  font-weight: bold;
  margin-bottom: var(--spacing-3);
}

#toc-container ol {
  list-style: decimal;
  padding-left: var(--spacing-4);
}

/* Multi-column product reference cards */
.multi-column__product-card {
  display: contents;
}

.multi-column__item {
  align-content: var(--multi-column-item-align, start);
}

/* Featured collection layers */
.collection-layers {
  display: grid;
  gap: var(--spacing-8);
}

/* SOLWE: layer label above buttons, name + tagline - CUSTOMIZATIONS.md #featured-collection-layers */
.collection-layers__nav {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.collection-layers__label {
  margin: 0;
}

.collection-layers__label-name {
  font-weight: var(--text-font-weight-bold);
}
/* /SOLWE */

.collection-layers__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.collection-layers__button {
  align-items: center;
  background: rgb(var(--text-color) / 0.08);
  border: 2px solid transparent;
  border-radius: var(--rounded-sm);
  color: rgb(var(--text-color));
  cursor: pointer;
  display: inline-flex;
  height: 4rem;
  justify-content: center;
  min-width: 4rem;
  padding: var(--spacing-2);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.collection-layers__button[aria-selected="true"] {
  background: rgb(var(--text-color) / 0.08);
  border-color: rgb(var(--text-color));
  color: rgb(var(--text-color));
}

.collection-layers__button-image {
  display: block;
  height: 2.5rem;
  object-fit: contain;
  width: auto;
}

.collection-layers__button-text {
  font-size: var(--text-lg);
  font-weight: var(--text-font-weight-bold);
  line-height: 1;
}

.collection-layers__panel[hidden] {
  display: none;
}

@media screen and (min-width: 700px) {
  .collection-layers {
    gap: var(--spacing-10);
  }

  .collection-layers__button {
    height: 4.5rem;
    min-width: 4.5rem;
  }

  .collection-layers__button-image {
    height: 3rem;
  }
}

/* Collection layers: card colors from section settings; keep compact info + swatch pill */
.shopify-section--featured-collection-layers .product-card__info {
  padding-block-start: var(--spacing-2);
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.shopify-section--featured-collection-layers .product-card__aside {
  background: #fff;
  border-radius: var(--rounded-full);
  display: inline-flex;
  margin-block-end: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  width: fit-content;
}

.shopify-section--featured-collection-layers .product-card__swatch-list {
  margin: 0;
}

/* Product cards: swatches closer to image; tighter gap above title */
/* Product cards: Figma title/price hierarchy */
.product-card__title a {
  font-weight: 400;
}

.product-card .price-list :is(sale-price, compare-at-price, unit-price) {
  font-weight: 400;
}

.product-card .price-list .text-subdued {
  color: rgb(var(--text-color));
}

/* Product card badges: match card radius, lighter/smaller type (Figma) */
.product-card__badge-list .badge {
  border-radius: var(--rounded-sm);
  font-size: 0.8rem;
  font-weight: 400;
}

@media screen and (min-width: 700px) {
  .product-card__badge-list .badge:not(.badge--lg) {
    font-size: 0.825rem;
  }
}

.product-card {
  --product-card-info-padding: var(--spacing-2);
}

@media screen and (min-width: 700px) {
  .product-card {
    --product-card-info-padding: var(--spacing-2) var(--spacing-5) var(--spacing-5);
  }
}

@media screen and (min-width: 1400px) {
  .product-card__info {
    --product-card-info-padding: var(--spacing-2) var(--spacing-8) var(--spacing-8);
  }
}

.product-card--blends .product-card__info {
  padding-block-start: var(--spacing-2);
}

.product-card__aside {
  margin-block-end: var(--spacing-2);
  margin-block-start: 0;
}

.product-card__aside + .v-stack {
  margin-block-start: 0;
}

/* Video section overlay — one DOM copy; split repositions via CSS */
.video-overlay {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.video-overlay.text-start {
  align-items: start;
}

.video-overlay.text-center {
  align-items: center;
}

.video-overlay.text-end {
  align-items: end;
}

.video-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

@media screen and (min-width: 700px) {
  .content-over-media > .video-overlay--split {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 100%;
    height: 100%;
    gap: 0;
  }

  .video-overlay--split .video-overlay__text {
    grid-area: 1 / 1;
    place-self: var(--video-text-place, center);
    max-width: min(48rem, 100%);
    text-align: var(--video-text-align, center);
  }

  .video-overlay--split .video-overlay__actions {
    grid-area: 1 / 1;
    place-self: var(--video-button-place, end end);
  }
}

/* Larger than theme .h0 for video heroes */
.h00 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  overflow-wrap: anywhere;
  font-size: clamp(3.25rem, 9vw, 7.5rem);
  line-height: 0.95;
}

.prose .h00 + * {
  margin-block-start: var(--spacing-4);
}

/* SOLWE: hero video heading in Regular (400) - CUSTOMIZATIONS.md #hero-heading-regular
   Brand book: large text is Regular. Only the home hero uses .h00 today; other headings keep heading_font's 700. */
.shopify-section--video .h00 {
  font-weight: 400;
}
/* /SOLWE */

/* Fix list styles: inside --> outside */
.prose ul, .list-disc {
  list-style: outside;
  margin-left: 20px;
}

/* Buttons: regular weight; buy CTAs keep bold */
.button,
.btn {
  font-weight: 400;
}

.buy-buttons .button,
.buy-buttons .btn,
.product-card__quick-buy .button,
.shopify-payment-button__button--unbranded,
.button[name="checkout"] {
  font-weight: bold;
}

/* Collection list: header CTA button + card shop buttons */
@media screen and (min-width: 1150px) {
  .section-header > .button {
    grid-column-start: 2;
    justify-self: end;
    align-self: end;
  }
}

.collection-card--with-cta .collection-card__content:first-child {
  margin-block-end: 0;
}

.collection-card__cta {
  margin-block-start: var(--spacing-4);
  pointer-events: none;
}

@media screen and (pointer: fine) {
  .collection-card--with-cta:hover .collection-card__content {
    transform: none;
  }
}

/* SOLWE: collection card without a link (no button, no arrow) - CUSTOMIZATIONS.md #collection-card-without-link
   Impact's -3rem margin and hover lift make room for the circle arrow; with no arrow the
   content is the wrapper's only child, so neither applies. */
.collection-card .collection-card__content:only-child {
  margin-block-end: 0;
}

@media screen and (pointer: fine) {
  .collection-card:hover .collection-card__content:only-child {
    transform: none;
  }
}
/* /SOLWE */

/* Newsletter: full-width background image layout */
.newsletter.newsletter--background.content-over-media {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: var(--content-over-media-height, 400px);
  place-items: center;
}

.newsletter.newsletter--background.content-over-media > :is(picture, img, video, iframe, svg, video-media) {
  grid-area: 1 / 1;
}

.newsletter.newsletter--background > .newsletter-box {
  background: none;
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  justify-content: center;
  max-width: min(40rem, calc(100% - var(--container-gutter) * 2));
  padding-block: var(--spacing-10);
  padding-inline: 0;
  place-self: center;
  width: 100%;
  z-index: 1;
}

.newsletter.newsletter--background > .newsletter-box.place-self-center {
  align-items: center;
  text-align: center;
}

.newsletter.newsletter--background > .newsletter-box.place-self-center-start {
  align-items: start;
  justify-self: start;
  margin-inline-start: var(--container-gutter);
  place-self: center start;
  text-align: start;
}

.newsletter--background .newsletter-content {
  width: 100%;
}

.newsletter--background .newsletter-content.text-center {
  justify-items: center;
  margin-inline: auto;
}

.newsletter--background .newsletter-content > .form {
  max-width: 32rem;
  width: 100%;
}

.newsletter--background .newsletter-content.justify-items-center > .form {
  margin-inline: auto;
}

/* Newsletter section: combined pill field + outline Sign up (Figma) */
.newsletter-signup-field {
  align-items: center;
  background: rgb(var(--input-background, 255 255 255));
  border-radius: var(--rounded-full);
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
  padding: 0 0 0 1.5rem;
  width: 100%;
}

.newsletter-signup-field:focus-within {
  outline: 2px solid rgb(var(--text-color) / 0.35);
  outline-offset: 2px;
}

.newsletter-signup-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: rgb(var(--input-text-color, 0 0 0));
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.9375rem;
  height: 2.5rem;
  min-width: 0;
  outline: none;
  padding: 0;
  -webkit-text-fill-color: rgb(var(--input-text-color, 0 0 0));
  width: 100%;
}

.newsletter-signup-input::placeholder {
  color: #737373;
  opacity: 1;
  -webkit-text-fill-color: #737373;
}

.newsletter-signup-submit {
  align-items: center;
  background: #fff;
  border: 1px solid #000;
  border-radius: var(--rounded-full);
  color: #000;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  padding: 0 1.25rem;
  white-space: nowrap;
}

.newsletter-signup-submit:hover {
  opacity: 0.88;
}

@media screen and (min-width: 700px) {
  .newsletter.newsletter--background > .newsletter-box {
    padding-block: var(--spacing-16);
  }
}

/* Header: bar text uses regular weight (mega menu titles excluded below) */
.shopify-section--header .header__wrapper :is(a, button, summary, span, p, .bold, .h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-weight: 400;
}

/* Navigation: keep full opacity (disable link-faded / link-faded-reverse) */
.header :is(.link-faded, .link-faded-reverse),
.mega-menu :is(.link-faded, .link-faded-reverse),
.navigation-drawer :is(.link-faded, .link-faded-reverse) {
  opacity: 1;
}

@media screen and (pointer: fine) {
  .header :is(.link-faded, .link-faded-reverse):hover,
  .mega-menu :is(.link-faded, .link-faded-reverse):hover,
  .navigation-drawer :is(.link-faded, .link-faded-reverse):hover {
    opacity: 1;
  }
}

/* SOLWE: mobile nav footnote fills remaining drawer space, positioned within it - CUSTOMIZATIONS.md #header.liquid */
#header-sidebar-menu .panel__scroller {
  display: flex;
  flex-direction: column;
}

/* Grows into spare space but never shrinks below its text: shrunk, align-content pushes the text
   up out of its own box and over the gap below the links. Short screens scroll instead. */
.mobile-nav-footnote {
  display: grid;
  flex: 1 0 auto;
}

.mobile-nav-footnote--center {
  align-content: center;
}

.mobile-nav-footnote--bottom {
  align-content: end;
  padding-block-end: var(--spacing-6);
}
/* /SOLWE */

/* SOLWE: compact mobile nav on short screens (iPhone SE and similar) - CUSTOMIZATIONS.md #header.liquid */
@media screen and (max-width: 699px) and (max-height: 700px) {
  #header-sidebar-menu .panel__scroller {
    gap: var(--spacing-6);
  }

  #header-sidebar-menu .panel__scroller ul.v-stack {
    gap: var(--spacing-3);
  }

  #header-sidebar-menu .panel__scroller li.h3 {
    font-size: var(--text-h4);
  }

  #header-sidebar-menu .mobile-nav-footnote--bottom {
    padding-block-end: var(--spacing-4);
  }

  #header-sidebar-menu .panel-footer {
    gap: var(--spacing-4);
  }
}
/* /SOLWE */

/* Mega menu: match Figma — bold column titles, regular links, spacing */
@media screen and (min-width: 1150px) {
  .mega-menu {
    --mega-menu-gap: var(--spacing-12);
    --mega-menu-block-padding: var(--spacing-8);
    align-items: flex-start;
    justify-content: space-between;
  }

  .mega-menu__nav {
    align-items: flex-start;
    flex: 1 1 auto;
    gap: var(--spacing-8);
    justify-content: space-between;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  /* SOLWE: `> li` is the column, `.mega-menu__nav-group` the link group inside it.
     Groups past the 4th stack into the last column - CUSTOMIZATIONS.md #mega-menu-4-column-cap */
  .mega-menu__nav > li {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    width: auto;
  }

  .mega-menu__nav .mega-menu__nav-group {
    gap: var(--spacing-2);
  }

  .mega-menu .navigation-promo__wrapper {
    flex: 0 1 auto;
  }

  /* Promo banners: text/button beneath images (not overlaid).
     Skipped for images whose "Show content over image" setting is on, which carry
     .navigation-promo__item--overlay and keep Impact's own overlay layout instead. */
  .mega-menu .navigation-promo .content-over-media:not(.navigation-promo__item--overlay) {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    grid-template: none;
    overflow: visible;
    place-items: stretch;
  }

  .mega-menu .navigation-promo .content-over-media:not(.navigation-promo__item--overlay)::before {
    content: none;
  }

  .mega-menu .navigation-promo .content-over-media:not(.navigation-promo__item--overlay) > :is(img, picture) {
    aspect-ratio: 3 / 4;
    grid-area: auto;
    height: auto;
    max-height: none;
    min-height: 0;
    object-fit: cover;
    place-self: stretch;
    width: 100%;
  }

  .mega-menu .navigation-promo .content-over-media:not(.navigation-promo__item--overlay) > :not(img, picture, video, iframe, svg, video-media) {
    color: #000;
    grid-area: auto;
    max-width: none;
    padding: 0;
    place-self: auto !important;
    text-align: start;
    width: 100%;
    z-index: auto;
  }

  .mega-menu .navigation-promo .content-over-media:not(.navigation-promo__item--overlay) .text-custom,
  .mega-menu .navigation-promo .content-over-media:not(.navigation-promo__item--overlay) .prose,
  .mega-menu .navigation-promo .content-over-media:not(.navigation-promo__item--overlay) .prose :is(p, a, span, li, div) {
    color: #000 !important;
  }

  .mega-menu .navigation-promo.navigation-promo--carousel .content-over-media p {
    max-width: none;
  }

  /* Promo banners with "Show content over image" on: the outer wrapper is only a
     positioning box, so let the linked card fill it and do the overlaying itself.
     Same 3/4 ratio as the stacked cards so a mixed row still lines up. */
  .mega-menu .navigation-promo .content-over-media--auto.navigation-promo__item--overlay {
    display: block;
  }

  .mega-menu .navigation-promo a.content-over-media.navigation-promo__item--overlay {
    aspect-ratio: 3 / 4;
    width: 100%;
  }

  .shopify-section--header .mega-menu__nav .mega-menu__nav-group > a,
  .shopify-section--header .mega-menu__nav .mega-menu__nav-group > a.h5,
  .shopify-section--header .mega-menu__nav .mega-menu__nav-group > a :is(span, .reversed-link, .link-faded) {
    font-family: var(--heading-font-family);
    font-size: 0.9375rem; /* 15px at 16px root */
    font-weight: 500;
    letter-spacing: var(--heading-letter-spacing);
    line-height: 1.4;
  }

  .mega-menu__nav .mega-menu__nav-group > a :is(.reversed-link, .link-faded) {
    background-size: 0;
  }

  .shopify-section--header .mega-menu__nav .mega-menu__nav-group > ul {
    gap: 0;
  }

  .mega-menu__nav .mega-menu__nav-group > ul :is(a, span, .h5, .reversed-link, .link-faded) {
    font-family: var(--text-font-family);
    font-size: 0.9375rem; /* 15px at 16px root */
    font-weight: 400;
    letter-spacing: var(--text-letter-spacing);
    line-height: 1.4;
  }

  .mega-menu__nav .mega-menu__nav-group > ul .reversed-link {
    background-size: 0;
  }

  @media screen and (pointer: fine) {
    .mega-menu__nav .mega-menu__nav-group > ul a:hover .reversed-link,
    .mega-menu__nav .mega-menu__nav-group > ul a.reversed-link:hover,
    .mega-menu__nav .mega-menu__nav-group > ul .reversed-link.hover\:show:hover {
      background-size: 100% 1px;
    }
  }
}

@media screen and (min-width: 1400px) {
  .mega-menu {
    --mega-menu-gap: var(--spacing-16);
  }

  .mega-menu__nav {
    gap: var(--spacing-10);
  }
}

/* Mobile drawer promos: full-width vertical stack, text beneath images (no slider) */
.navigation-drawer .navigation-promo__wrapper--drawer {
  max-width: none;
  width: 100%;
}

.navigation-drawer .navigation-promo--drawer-stack {
  gap: var(--spacing-6);
  grid: auto-flow / minmax(0, 1fr);
  width: 100%;
}

.navigation-drawer .navigation-promo--drawer-stack .content-over-media:not(.navigation-promo__item--overlay) {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  grid-template: none;
  overflow: visible;
  place-items: stretch;
  width: 100%;
}

.navigation-drawer .navigation-promo--drawer-stack .content-over-media:not(.navigation-promo__item--overlay)::before {
  content: none;
}

.navigation-drawer .navigation-promo--drawer-stack .content-over-media:not(.navigation-promo__item--overlay) > :is(img, picture) {
  /* The image's own ratio (set per image as --promo-image-ratio in
     navigation-promo-block.liquid), so a portrait promo is not cropped to a
     letterbox in the drawer. Declared rather than left auto so the card
     reserves its height before the image loads. */
  aspect-ratio: var(--promo-image-ratio, 16 / 10);
  grid-area: auto;
  height: auto;
  max-height: none;
  min-height: 0;
  object-fit: cover;
  place-self: stretch;
  width: 100%;
}

.navigation-drawer .navigation-promo--drawer-stack .content-over-media:not(.navigation-promo__item--overlay) > :not(img, picture, video, iframe, svg, video-media) {
  color: #000;
  grid-area: auto;
  max-width: none;
  padding: 0;
  place-self: auto !important;
  text-align: start;
  width: 100%;
  z-index: auto;
}

.navigation-drawer .navigation-promo--drawer-stack .content-over-media:not(.navigation-promo__item--overlay) .text-custom,
.navigation-drawer .navigation-promo--drawer-stack .content-over-media:not(.navigation-promo__item--overlay) .prose,
.navigation-drawer .navigation-promo--drawer-stack .content-over-media:not(.navigation-promo__item--overlay) .prose :is(p, a, span, li, div) {
  color: #000 !important;
}

/* Drawer promos with "Show content over image" on: same treatment as the desktop
   mega menu, but on the image's own ratio like the stacked drawer cards above. */
.navigation-drawer .navigation-promo--drawer-stack .content-over-media--auto.navigation-promo__item--overlay {
  display: block;
  width: 100%;
}

.navigation-drawer .navigation-promo--drawer-stack a.content-over-media.navigation-promo__item--overlay {
  aspect-ratio: var(--promo-image-ratio, 16 / 10);
  width: 100%;
}

/* Mega menu intro (heading + paragraph above links/promos) */
.mega-menu--with-intro {
  align-items: stretch;
  flex-direction: column;
}

.mega-menu__intro {
  display: grid;
  gap: var(--spacing-2);
  max-width: 42rem;
}

.mega-menu__intro-heading {
  margin: 0;
}

.mega-menu__intro-text {
  margin: 0;
}

.mega-menu__intro-text :is(p, ul, ol) {
  margin: 0;
}

.mega-menu__intro--drawer {
  margin-block-start: var(--spacing-6);
  margin-block-end: var(--spacing-6);
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

.mega-menu__content {
  align-items: flex-start;
  display: flex;
  flex: 1 1 auto;
  gap: var(--mega-menu-gap);
  justify-content: var(--mega-menu-justify-content, space-between);
  min-width: 0;
  width: 100%;
}

.mega-menu.justify-center .mega-menu__content {
  justify-content: center;
}

/* SOLWE: superseded below - promo no longer renders inside .mega-menu__content for intro menus - CUSTOMIZATIONS.md #header.liquid */
.mega-menu--with-intro .mega-menu__content > .navigation-promo__wrapper {
  flex: 1 1 auto;
  max-width: 100%;
  width: 100%;
}
/* /SOLWE */

@media screen and (min-width: 1150px) {
  .mega-menu--with-intro {
    gap: var(--spacing-8);
  }

  .mega-menu__intro-heading {
    font-weight: 600 !important;
  }

  .mega-menu__intro-text,
  .mega-menu__intro-text p {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
  }
}

/* SOLWE: mega menu intro shares a grid with nav-list and promos, no row-spanning image - CUSTOMIZATIONS.md #header.liquid */
@media screen and (min-width: 1150px) and (max-width: 1399.98px) {
  .mega-menu--with-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "intro intro" "nav promo";
    column-gap: var(--mega-menu-gap);
    row-gap: var(--spacing-6);
    align-items: start;
  }

  .mega-menu--with-intro .mega-menu__content {
    display: contents;
  }

  .mega-menu--with-intro .mega-menu__intro {
    grid-area: intro;
    margin-block-end: 0;
    max-width: none;
  }

  .mega-menu--with-intro .mega-menu__nav {
    grid-area: nav;
    max-width: none;
    width: auto;
  }

  .mega-menu--with-intro .navigation-promo__wrapper {
    grid-area: promo;
  }
}

@media screen and (min-width: 1400px) {
  .mega-menu--with-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--spacing-8);
    row-gap: var(--spacing-2);
    align-items: start;
  }

  .mega-menu--with-intro .mega-menu__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    grid-column: 1;
  }

  .mega-menu--with-intro .mega-menu__intro {
    margin-block-end: 0;
    max-width: none;
  }

  .mega-menu--with-intro .navigation-promo__wrapper {
    grid-column: 2;
  }
}
/* /SOLWE */

/* Header: Orbe selector matches nav pill color */
.orbe-header-button,
.orbe-header-button :is(button, span, .bold, .text-sm) {
  color: rgb(var(--text-color) / .8);
  font-size: 1rem;
}

/* Header: desktop search shown as open pill field (Figma); still opens search drawer.
   Border and text opacities are kept equal to the desktop nav pills below, so the two
   controls read as one row - CUSTOMIZATIONS.md "sections/header.liquid" row 6 */
.header__search-pill {
  align-items: center;
  border: 2px solid rgb(var(--text-color) / .55);
  border-radius: 999px;
  color: rgb(var(--text-color) / .8);
  display: inline-flex;
  gap: var(--spacing-3);
  min-width: 11.5rem;
  padding: 0.375rem 0.875rem 0.375rem 1rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.header__search-pill:hover {
  border-color: rgb(var(--text-color));
  color: rgb(var(--text-color));
}

.header__search-pill-label {
  flex: 1 1 auto;
  font-size: .875rem; /* 14px */
  line-height: 1.2;
  min-width: 0;
}

.header__search-pill .icon {
  flex: 0 0 auto;
  height: 1.125rem;
  width: 1.125rem;
  color: rgb(var(--text-color) / .8);
}
.header__search-pill:hover .icon {
  color: rgb(var(--text-color));
}

/* Search drawer — Figma open state (top panel under header) */
.search-drawer {
  --drawer-body-padding: var(--spacing-5) var(--container-gutter, 1.25rem) var(--spacing-8);
  width: 100%;
}

.search-drawer::part(overlay) {
  background: rgb(0 0 0 / 0.45);
}

.search-drawer::part(content) {
  border-radius: 0;
  height: max-content;
  max-height: 100%;
  width: 100%;
}

.search-drawer__form {
  width: 100%;
}

.search-drawer .search-input {
  border-bottom: 1px solid #1a1a1a;
  border-radius: 0;
  gap: var(--spacing-3);
  padding-block-end: var(--spacing-3);
}

.search-drawer .search-input > input {
  font-size: 1rem;
  font-weight: 400;
}

.search-drawer .search-input > input::placeholder {
  color: #737373;
  opacity: 1;
}

.search-drawer .search-input > [type="reset"] {
  font-size: 0.8125rem;
}

.search-drawer__search-icon {
  display: none;
  flex: 0 0 auto;
  line-height: 0;
}

.search-drawer__search-icon .icon {
  height: 1.125rem;
  width: 1.125rem;
}

.search-drawer__close {
  flex: 0 0 auto;
  line-height: 0;
}

.search-drawer__popular-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.search-drawer__popular {
  display: grid;
  gap: var(--spacing-4);
}

.search-drawer__idle-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

.search-drawer__no-results {
  display: grid;
  gap: var(--spacing-6);
}

.search-drawer__no-results-message {
  margin: 0;
  text-align: start;
}

.search-drawer__featured {
  display: grid;
  gap: var(--spacing-4);
  margin-block-end: var(--spacing-6);
  width: 100%;
}

.search-drawer__featured-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.search-drawer__featured-list {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-drawer__product {
  color: inherit;
  display: grid;
  gap: var(--spacing-2);
  text-decoration: none;
}

.search-drawer__product-image {
  aspect-ratio: 1;
  border-radius: var(--rounded-sm);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.search-drawer__product-info {
  display: grid;
  gap: 0.125rem;
}

.search-drawer__product-title {
  display: -webkit-box;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-drawer__menu-title {
  margin: 0;
}

.search-drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-drawer__link {
  color: #1a1a1a;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
}

.search-drawer__link:hover {
  opacity: 0.7;
}

@media screen and (min-width: 700px) {
  .search-drawer {
    --drawer-body-padding: var(--spacing-6) var(--container-gutter, 3rem) var(--spacing-10);
  }

  .search-drawer .search-input {
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    gap: var(--spacing-4);
    margin-inline: auto;
    max-width: 42rem;
    padding: 0.75rem 1.25rem;
    width: 100%;
  }

  .search-drawer .search-input:focus-within {
    border-color: #1a1a1a;
  }

  .search-drawer .search-input > input {
    font-size: 0.9375rem;
    font-weight: 400;
  }

  .search-drawer__search-icon {
    display: block;
  }

  .search-drawer__close {
    display: none;
  }

  .search-drawer__idle-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    margin-inline: auto;
    max-width: 42rem;
    width: 100%;
  }

  .search-drawer__no-results-message {
    text-align: center;
  }

  .search-drawer__popular {
    display: grid;
    gap: var(--spacing-4);
  }

  .search-drawer__featured {
    margin-block-end: 0;
  }

  .search-drawer__featured-list {
    gap: var(--spacing-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .search-drawer__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-3) var(--spacing-6);
  }

  .search-drawer__link {
    font-size: 0.875rem;
  }
}

@media screen and (min-width: 1000px) {
  .search-drawer .search-input,
  .search-drawer__idle-inner {
    max-width: 56rem;
  }
}

/* Header: desktop nav links as outline pills (drawer unchanged on mobile) */
@media screen and (min-width: 1150px) {
  .header__main-nav .header__link-list {
    gap: var(--spacing-5);
  }

  .header__main-nav .header__link-list > ul > li > :is(a, button),
  .header__main-nav .header__link-list > ul > li > details > summary {
    align-items: center;
    border: 2px solid rgb(var(--text-color) / .55);
    border-radius: var(--rounded-full);
    color: rgb(var(--text-color) / .8);
    display: inline-flex;
    font-size: 1rem;
    gap: var(--spacing-1);
    line-height: 1.2;
    list-style: none;
    padding: 0.25em 0.75em;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .header__main-nav .header__link-list > ul > li > :is(a, button):hover,
  .header__main-nav .header__link-list > ul > li > :is(a, button)[aria-current="page"],
  .header__main-nav .header__link-list > ul > li > button[aria-expanded="true"],
  .header__main-nav .header__link-list > ul > li > details > summary:hover,
  .header__main-nav .header__link-list > ul > li > details[open] > summary {
    background: rgb(var(--text-color));
    border-color: rgb(var(--text-color));
    color: rgb(var(--background));
    opacity: 1;
  }

  .header__main-nav .header__link-list > ul > li > details > summary::-webkit-details-marker {
    display: none;
  }

  .header__main-nav .header__link-list > ul > li > :is(summary, button, details > summary) .icon-chevron-bottom,
  .header__main-nav .header__link-list > ul > li > details > summary .icon-chevron-bottom,
  .header__main-nav .header__link-list > ul > li > button .icon-chevron-bottom {
    display: none;
  }
}

/* Collection filter bar: count + active pills left; layer icons / Filters / sort right */
@media screen and (min-width: 1000px) {
  .collection__top-bar {
    align-items: center;
    column-gap: var(--spacing-6);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: var(--spacing-4);
  }

  .collection--filters-sidebar .collection__top-bar,
  .collection--filters-horizontal .collection__top-bar {
    grid-template-columns: none;
  }

  .collection__top-bar-start {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    min-width: 0;
  }

  .collection__products-count {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
  }

  .collection__top-bar-start .active-facets {
    margin: 0;
  }

  .collection__top-bar-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .collection__top-bar .facets-summary {
    grid-column-end: auto;
  }

  .collection__top-bar > .active-facets {
    flex: 1 0 100%;
  }
}

/* Inline vaatekerros layer filter icons (Figma) */
.collection-layer-filter {
  display: block;
}

.collection-layer-filter__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.collection-layer-filter__option {
  --collection-layer-filter-size: 3.5rem;
  align-items: center;
  background: #fff;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: var(--collection-layer-filter-size);
  justify-content: center;
  margin: 0;
  padding: 0.25rem;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  width: var(--collection-layer-filter-size);
}

/* SOLWE: the active ring follows the checkbox itself, not a server-rendered class, so the copies of
   this control in the toolbar and the drawer can be kept in step from JS by setting `checked` alone -
   CUSTOMIZATIONS.md collection-filter-drawer-sync */
.collection-layer-filter__list input:checked + .collection-layer-filter__option {
  border-color: rgb(var(--text-color));
}
/* /SOLWE */

.collection-layer-filter__option.is-disabled {
  cursor: not-allowed;
  opacity: 0.35;
  pointer-events: none;
}

/* SOLWE: the option's own border + padding (2px + 0.25rem) inset the first icon past the
   container's edge, so it reads as indented against the product count / gender labels above
   and below it. Pull just that one flush; every other option's spacing is untouched. -
   CUSTOMIZATIONS.md collection-layer-filter */
.collection-layer-filter__list label:first-of-type {
  margin-left: -0.375rem;
}
/* /SOLWE */

.collection-layer-filter__image {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

@media screen and (max-width: 999px) {
  /* SOLWE: tightened further than the vendor gap so the gender chips fit on the same row - CUSTOMIZATIONS.md collection-gender-filter */
  .collection-layer-filter__option {
    --collection-layer-filter-size: 2.75rem;
  }

  .collection-layer-filter__list {
    gap: var(--spacing-1-5);
  }
  /* /SOLWE */
}

@media screen and (max-width: 359px) {
  /* SOLWE: very narrow phones - CUSTOMIZATIONS.md collection-gender-filter */
  .collection-layer-filter__option {
    --collection-layer-filter-size: 2.5rem;
  }

  .collection-layer-filter__list {
    gap: var(--spacing-1);
  }
  /* /SOLWE */
}

/* SOLWE: the drawer copy of the layer icons keeps its full size at every width — the two shrinks
   above exist to fit the toolbar row, which the drawer does not share. -
   CUSTOMIZATIONS.md collection-filter-drawer-sync */
.collection-layer-filter--drawer .collection-layer-filter__option {
  --collection-layer-filter-size: 3.5rem;
}

.collection-layer-filter--drawer .collection-layer-filter__list {
  gap: 0.5rem;
}
/* /SOLWE */

/* Collection mobile toolbar: count left, Filter/Sort right — hidden on desktop */
.collection__mobile-toolbar,
.collection__mobile-active-facets {
  display: none;
}

@media screen and (max-width: 999px) {
  /* SOLWE: two rows - count + buttons, then layer icons on their own row */
  .collection__mobile-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    grid-column: 1 / -1;
    padding-block: var(--spacing-2) 0;
  }

  /* Impact's 2rem grid row-gap leaves the product grid stranded below the toolbar.
     On mobile the toolbar and the results are the only two rows, so tightening the
     row-gap here only closes that one space. */
  .collection {
    row-gap: var(--spacing-4);
  }

  .collection__mobile-toolbar-row {
    align-items: center;
    display: flex;
    gap: var(--spacing-3);
    justify-content: space-between;
  }

  /* Layer icons left, gender chips right (Figma); gender is absent on a single-gender collection */
  .collection__mobile-toolbar-layers {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    justify-content: space-between;
  }
  /* /SOLWE */

  .collection__mobile-toolbar-count {
    margin: 0;
    white-space: nowrap;
  }

  .collection__mobile-toolbar-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    justify-content: flex-end;
  }

  .collection__mobile-active-facets {
    display: block;
  }

  .collection__mobile-active-facets:not(:has(.active-facets)) {
    display: none;
  }
}

/* Horizontal filter dialogs: compact panel so options wrap instead of stretching */
.facet-dialog {
  max-width: min(22rem, calc(100vw - 2 * var(--container-gutter, 1.25rem)));
}

.collection__top-bar-controls .facet-dialog {
  left: auto;
  right: 0;
}

.facet-dialog > .h-stack {
  justify-content: flex-start;
  max-width: 100%;
}
/* -------------------------------------------------------------------------- */
/* Blog index (Figma)                                                         */
/* -------------------------------------------------------------------------- */

.blog--figma {
  --blog-card-radius: 0.5rem;
  --blog-grid-gap: var(--spacing-5);
}

@media screen and (min-width: 1000px) {
  .blog--figma {
    --blog-grid-gap: var(--spacing-6);
  }
}

/* Hero uses Impact content-over-media for height + placement; keep copy styling */
.blog-hero.blog-hero--no-image {
  background: #e8e8e8;
}

.blog-hero.blog-hero--no-image:before {
  display: none;
}

.blog-hero__content {
  display: grid;
  gap: var(--spacing-4);
  justify-items: start;
  width: 100%;
}

.blog-hero__content.text-center {
  justify-items: center;
}

.blog-hero__content.text-end {
  justify-items: end;
}

@media screen and (min-width: 700px) {
  .blog-hero__content.sm\:text-start {
    justify-items: start;
  }

  .blog-hero__content.sm\:text-center {
    justify-items: center;
  }

  .blog-hero__content.sm\:text-end {
    justify-items: end;
  }
}

.blog-hero__heading {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.blog-hero__text {
  max-width: 28rem;
}

.blog-hero__text :is(p, a, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.blog-hero__link {
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-featured-list {
  display: grid;
  gap: var(--spacing-10);
  margin-block: var(--spacing-10) var(--spacing-12);
}

@media screen and (min-width: 1000px) {
  .blog-featured-list {
    gap: var(--spacing-14);
    margin-block: var(--spacing-14) var(--spacing-16);
  }
}

.blog-featured {
  display: grid;
  gap: var(--spacing-6);
}

@media screen and (min-width: 1000px) {
  .blog-featured {
    align-items: stretch;
    gap: var(--spacing-8);
    grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 1fr);
  }

  .blog-featured--media-end {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.75fr);
  }

  .blog-featured--media-end .blog-featured__media {
    order: 2;
  }

  .blog-featured--media-end .blog-featured__aside {
    order: 1;
  }
}

.blog-featured__media {
  color: #ffffff;
  display: grid;
  grid-template: 1fr / 1fr;
  isolation: isolate;
  min-height: 18rem;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

@media screen and (min-width: 1000px) {
  .blog-featured__media {
    min-height: 24rem;
  }
}

.blog-featured__image,
.blog-featured__media-content {
  grid-area: 1 / 1;
}

.blog-featured__image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.blog-featured__media-content {
  align-content: end;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 55%);
  display: grid;
  gap: var(--spacing-4);
  justify-items: start;
  padding: var(--spacing-6);
  position: relative;
  z-index: 1;
}

.blog-featured__title {
  color: #ffffff;
  margin: 0;
}

.blog-featured__cta {
  --button-background: 255 255 255;
  --button-text-color: 0 0 0;
  margin-block-start: 0;
}

.blog-featured__aside {
  display: grid;
  gap: var(--spacing-5);
  align-content: center;
}

.blog-featured__author {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-4);
}

.blog-featured__avatar {
  border-radius: 50%;
  flex-shrink: 0;
  height: 3rem;
  object-fit: cover;
  width: 3rem;
}

.blog-featured__avatar--placeholder {
  align-items: center;
  background: #e8e8e8;
  color: #1a1a1a;
  display: inline-flex;
  font-weight: 500;
  justify-content: center;
}

.blog-featured__author-copy {
  display: grid;
  gap: var(--spacing-2);
}

.blog-featured__author-name {
  margin: 0;
}

.blog-featured__author-bio {
  margin: 0;
}

.blog-featured__aside .article-reading-time {
  color: #777777;
}

.blog-posts--overlay-grid {
  display: grid;
  gap: var(--blog-grid-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 700px) {
  .blog-posts--overlay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1000px) {
  .blog-posts--overlay-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog-post-card-overlay {
  color: #ffffff;
  display: grid;
  grid-template: 1fr / 1fr;
  isolation: isolate;
  min-height: 18rem;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

@media screen and (min-width: 1000px) {
  .blog-post-card-overlay {
    border-radius: var(--blog-card-radius);
    min-height: 22rem;
  }
}

.blog-post-card-overlay__image,
.blog-post-card-overlay__content {
  grid-area: 1 / 1;
}

.blog-post-card-overlay__image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.blog-post-card-overlay__content {
  align-content: end;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 55%);
  display: grid;
  gap: var(--spacing-3);
  justify-items: start;
  padding: var(--spacing-5);
  position: relative;
  z-index: 1;
}

.blog-post-card-overlay__title {
  color: #ffffff;
  margin: 0;
}

.blog-post-card-overlay__cta {
  --button-background: 255 255 255;
  --button-text-color: 0 0 0;
  margin-block-start: 0;
}

/* Content table (editable comparison / content rows) */
.content-table {
  color: rgb(var(--text-color));
  display: grid;
  gap: var(--spacing-5);
  margin-inline: auto;
  max-width: var(--content-table-max-width, 100%);
  width: 100%;
}

.content-table__heading {
  color: rgb(var(--content-table-heading-color, var(--text-color)));
  margin: 0;
}

.content-table__subheading {
  margin: 0;
}

.content-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.content-table__table {
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
  color: inherit;
  min-width: 36rem;
  table-layout: fixed;
  width: 100%;
}

.content-table__table :is(th, td) {
  border: 1px solid rgb(var(--content-table-border, var(--text-color) / 0.2));
  box-sizing: border-box;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  padding: var(--spacing-4);
  padding-inline: var(--spacing-4);
  text-align: start;
  vertical-align: top;
  word-break: break-word;
}

.content-table__table :is(th, td):first-child {
  padding-inline-start: var(--spacing-4);
}

.content-table__table :is(th, td):last-child {
  padding-inline-end: var(--spacing-4);
}

.content-table__table th {
  font-weight: 700;
}

@media screen and (min-width: 700px) {
  .content-table {
    gap: var(--spacing-6);
  }

  .content-table__table :is(th, td) {
    padding: var(--spacing-5);
    padding-inline: var(--spacing-5);
  }

  .content-table__table :is(th, td):first-child {
    padding-inline-start: var(--spacing-5);
  }

  .content-table__table :is(th, td):last-child {
    padding-inline-end: var(--spacing-5);
  }
}

/* Content table on small screens. Default ("Mobile layout: Stacked" section
   setting) is stacked rows instead of a horizontal scroll — the cells often
   hold sentences, and columns behind an overflow-x meant the last one was
   never seen on a phone. Below Impact's 700px breakpoint each row becomes one
   bordered block, first cell as its title, the rest labelled from their own
   column heading via data-label. "Mobile layout: Columns" opts a specific
   table (content-table__table--mobile-columns) out of all of that instead:
   it keeps the normal table markup exactly as desktop renders it — real
   <thead> header row, no data-label/::before per cell — just narrower, via
   min-width: 0 below so it fits the viewport instead of the desktop table's
   36rem horizontal-scroll floor. Real headers also means Columns doesn't
   carry the accessibility caveat the Stacked layout has (see
   CUSTOMIZATIONS.md #content-table.liquid): display: none only ever applies
   to Stacked's thead below, never to Columns'. */
@media screen and (max-width: 699px) {
  .content-table__scroll {
    overflow-x: visible;
  }

  .content-table__table:not(.content-table__table--mobile-columns) {
    display: block;
    min-width: 0;
  }

  .content-table__table:not(.content-table__table--mobile-columns) colgroup,
  .content-table__table:not(.content-table__table--mobile-columns) thead {
    display: none;
  }

  .content-table__table:not(.content-table__table--mobile-columns) :is(tbody, tr, td) {
    display: block;
  }

  .content-table__table:not(.content-table__table--mobile-columns) tr {
    border: 1px solid rgb(var(--content-table-border, var(--text-color) / 0.2));
    padding: var(--spacing-4);
  }

  .content-table__table:not(.content-table__table--mobile-columns) tr + tr {
    border-block-start-width: 0;
  }

  .content-table__table:not(.content-table__table--mobile-columns) :is(th, td),
  .content-table__table:not(.content-table__table--mobile-columns) :is(th, td):first-child,
  .content-table__table:not(.content-table__table--mobile-columns) :is(th, td):last-child {
    border: 0;
    padding: 0;
  }

  .content-table__table:not(.content-table__table--mobile-columns) td:empty {
    display: none;
  }

  .content-table__table:not(.content-table__table--mobile-columns) td + td {
    margin-block-start: var(--spacing-4);
  }

  .content-table__table:not(.content-table__table--mobile-columns) td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-block-end: var(--spacing-1);
  }

  .content-table__table:not(.content-table__table--mobile-columns) td:first-child {
    font-size: var(--text-base, 1rem);
    font-weight: 700;
  }

  .content-table__table:not(.content-table__table--mobile-columns) td:first-child::before {
    content: none;
  }

  .content-table__table--mobile-columns {
    min-width: 0;
  }
}

/* SOLWE: press quote/bio spacing - CUSTOMIZATIONS.md#press-quote-richtext */
.press .blockquote .metafield-rich_text_field ~ .metafield-rich_text_field,
.press .blockquote .metafield-rich_text_field + p,
.press .blockquote p + p,
.press .blockquote p + .metafield-rich_text_field {
  margin-block-start: var(--spacing-6);
}
/* /SOLWE */

/* SOLWE: collection gender filter + toolbar buttons (Figma) */
/* Inline Naiset/Miehet chips on the desktop toolbar, before the layer icons.
   Below 1000px the top bar is hidden and gender stays in the filter drawer. */
.collection-gender-filter {
  display: block;
}

.collection-gender-filter__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.collection-gender-filter__option {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: var(--spacing-2);
  margin: 0;
}

.collection-gender-filter__option.is-disabled {
  cursor: not-allowed;
  opacity: 0.35;
  pointer-events: none;
}

.collection-gender-filter__box {
  background: transparent;
  border: 1px solid rgb(var(--text-color) / 0.45);
  border-radius: 0.125rem;
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  height: 0.875rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  width: 0.875rem;
}

.collection-gender-filter__input:checked + .collection-gender-filter__option .collection-gender-filter__box {
  background: rgb(var(--text-color));
  border-color: rgb(var(--text-color));
}

.collection-gender-filter__input:focus-visible + .collection-gender-filter__option .collection-gender-filter__box {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 2px;
}

.collection-gender-filter__label {
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
}

.collection-gender-filter__count {
  white-space: nowrap;
}

/* Mobile: shown next to the layer icons (collection-mobile-toolbar), so it needs to be as
   compact as those icons are - the value count is dropped first, same as the layer icons
   which never show one visibly either. */
@media screen and (max-width: 999px) {
  .collection-gender-filter__list {
    gap: var(--spacing-3);
  }

  .collection-gender-filter__option {
    gap: var(--spacing-1);
  }

  .collection-gender-filter__label {
    font-size: 0.875rem;
  }

  .collection-gender-filter__count {
    display: none;
  }
}

@media screen and (max-width: 359px) {
  .collection-gender-filter__list {
    gap: var(--spacing-2);
  }

  .collection-gender-filter__label {
    font-size: 0.8125rem;
  }
}

/* Filters and sort as bordered pill buttons */
.collection__toolbar-button {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-button, 2rem);
  color: rgb(var(--text-color));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1rem;
  gap: var(--spacing-2);
  justify-content: space-between;
  line-height: 1.2;
  padding: var(--spacing-3) var(--spacing-5);
  transition: border-color 0.15s ease;
  white-space: nowrap;
}

.collection__toolbar-button:hover {
  border-color: rgb(var(--text-color));
}

.collection__toolbar-button--static {
  cursor: default;
}

/* Keep the vendor circle-chevron, sized down for the pill */
.collection__toolbar-button .circle-chevron {
  height: var(--spacing-5);
  width: var(--spacing-5);
}

/* Narrower screens: the same pill, tightened so count + both buttons hold one row */
@media screen and (max-width: 999px) {
  .collection__toolbar-button {
    font-size: 0.875rem;
    gap: var(--spacing-1-5);
    padding: var(--spacing-2) var(--spacing-3);
  }

  .collection__toolbar-button .circle-chevron {
    height: var(--spacing-4);
    width: var(--spacing-4);
  }
}

/* Very narrow phones: tighten once more so the count and both buttons still share a row */
@media screen and (max-width: 359px) {
  .collection__mobile-toolbar-controls {
    gap: var(--spacing-1-5);
  }

  .collection__toolbar-button {
    gap: var(--spacing-1);
    padding: var(--spacing-2);
  }
}
/* /SOLWE */

/* SOLWE: scrollbar prev/next buttons - vendor hides them below 1000px (theme.css) and only sets a gap at that breakpoint - CUSTOMIZATIONS.md #scrollbar-buttons-mobile */
@media screen and (max-width: 999px) {
  .scrollbar__buttons {
    display: flex;
    gap: var(--spacing-2);
  }
}
/* /SOLWE */

/* SOLWE: article author section - CUSTOMIZATIONS.md #article-author */
.article-author {
  display: flex;
}

.article-author__card {
  align-items: center;
  background: var(--article-author-background, transparent);
  border: var(--article-author-border, 0);
  border-radius: var(--article-author-radius, 0);
  display: flex;
  gap: var(--spacing-4);
  max-width: var(--article-author-max-width);
  padding: var(--article-author-padding, 0);
  width: 100%;
}

@media screen and (min-width: 700px) {
  .article-author__card {
    gap: var(--spacing-8);
  }
}

.article-author__image {
  aspect-ratio: 1;
  border-radius: 50%;
  flex-shrink: 0;
  height: var(--article-author-image-size, 80px);
  object-fit: cover;
  width: var(--article-author-image-size, 80px);
}

.article-author__image--grayscale {
  filter: grayscale(1);
}

.article-author__text {
  display: grid;
  gap: var(--spacing-1);
  max-width: 60ch;
  min-width: 0;
}

.article-author__label {
  color: var(--article-author-label-color, rgb(var(--text-color) / .7));
  font-size: var(--text-xs);
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.article-author__name {
  color: var(--article-author-name-color, inherit);
  margin: 0;
}

.article-author__name--large {
  font-size: var(--text-lg);
}

.article-author__bio {
  color: var(--article-author-bio-color, rgb(var(--text-color) / .7));
}
/* /SOLWE */

/* SOLWE: people carousel section - CUSTOMIZATIONS.md #people-carousel */
.people-carousel {
  align-items: start;
  display: grid;
  gap: var(--grid-gutter);
  grid: var(--people-carousel-grid);
}

.people-card {
  align-content: start;
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: minmax(0, 1fr);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.people-card__media {
  position: relative;
}

/* The front face stays in the flow, so the photo alone sizes the media box and
   the "natural" aspect ratio option still works. The back is pinned over it. */
.people-card__face--back {
  align-content: center;
  background: rgb(var(--people-card-description-overlay));
  border-radius: var(--rounded-sm);
  color: rgb(var(--people-card-description-text-color));
  display: grid;
  inset: 0;
  overflow: auto;
  padding: var(--spacing-5);
  position: absolute;
}

/* display: block, so no inline baseline gap grows the box past the aspect
   ratio the section sets on this image. */
.people-card__image {
  border-radius: var(--rounded-sm);
  display: block;
  object-fit: cover;
  width: 100%;
}

/* Reveal style: fade
   -------------------------------------------------------------------------- */
.people-carousel--reveal-fade .people-card__face--back {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Reveal style: flip
   Each face rotates on its own rather than a shared inner wrapper, which is how
   davidwalsh.name/demo/css-flip.php does it too - one transform per face avoids
   the preserve-3d flattening bugs a rotated wrapper used to hit. */
.people-carousel--reveal-flip .people-card__media {
  perspective: 1200px;
}

/* Mid-rotation the near edge of the photo grows past its own box (measured at
   ~49px on a 514px-tall card), and .scroll-area clips vertical overflow, so the
   flip would be sheared off along the top of the track. Padding moves the clip
   edge out of the way; the matching negative margin keeps the track's margin
   box the size it was, so nothing around the carousel shifts. Same trick the
   theme's own .bleed uses on the inline axis. */
.people-carousel--reveal-flip {
  --people-carousel-flip-bleed: 3rem;

  margin-block: calc(-1 * var(--people-carousel-flip-bleed));
  padding-block: var(--people-carousel-flip-bleed);
}

.people-carousel--reveal-flip .people-card__face {
  backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform 0.6s;
}

.people-carousel--reveal-flip .people-card__face--front {
  position: relative;
  z-index: 2;
}

.people-carousel--reveal-flip .people-card__face--back {
  transform: rotateY(-180deg);
}

/* Hover only exists on a real pointer; touch is handled by the setting below.
   Only a card that actually has a description turns over. */
@media screen and (pointer: fine) {
  .people-carousel--reveal-fade .people-card--revealable:hover .people-card__face--back,
  .people-carousel--reveal-fade .people-card--revealable:focus-within .people-card__face--back {
    opacity: 1;
  }

  .people-carousel--reveal-flip .people-card--revealable:hover .people-card__face--front,
  .people-carousel--reveal-flip .people-card--revealable:focus-within .people-card__face--front {
    transform: rotateY(180deg);
  }

  .people-carousel--reveal-flip .people-card--revealable:hover .people-card__face--back,
  .people-carousel--reveal-flip .people-card--revealable:focus-within .people-card__face--back {
    transform: rotateY(0deg);
  }
}

/* A 180-degree rotation is exactly the motion this asks to be spared, so the
   flip falls back to the fade rather than merely losing its transition. */
@media (prefers-reduced-motion: reduce) {
  .people-carousel--reveal-flip .people-card__face {
    transform: none;
    transition: opacity 0.2s ease-in-out;
  }

  .people-carousel--reveal-flip .people-card__face--back {
    opacity: 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (pointer: fine) {
  .people-carousel--reveal-flip .people-card--revealable:hover .people-card__face--front,
  .people-carousel--reveal-flip .people-card--revealable:focus-within .people-card__face--front {
    transform: none;
  }

  .people-carousel--reveal-flip .people-card--revealable:hover .people-card__face--back,
  .people-carousel--reveal-flip .people-card--revealable:focus-within .people-card__face--back {
    opacity: 1;
    transform: none;
  }
}

/* "Description on mobile: Below the photo" - back into the flow under the
   photo, unstyled so it reads as a caption rather than an overlay. */
@media screen and (max-width: 699px) {
  .people-carousel--description-below .people-card__media {
    perspective: none;
  }

  .people-carousel--description-below .people-card__face--back {
    backface-visibility: visible;
    background: none;
    color: inherit;
    margin-block-start: var(--spacing-3);
    opacity: 1;
    padding: 0;
    position: static;
    transform: none;
  }
}

/* Name/role on one side, the link cue on the other. Wraps rather than squeezing
   when a long name and a long link label cannot share a narrow card. */
.people-card__body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: space-between;
}

.people-card__text {
  display: grid;
  gap: var(--spacing-1);
  min-width: 0;
}

/* Sized to its own text at every width, never stretched: the underline is
   painted across the element's full width, so a stretched box would drag the
   underline across the whole card. */
.people-card__link {
  flex: 0 0 auto;
  justify-self: start;
}

/* The whole card is the link, so the cue can be turned off on desktop and left
   to the photo, the name and the hover reveal. Never hidden on mobile, where
   there is no hover to hint at it. */
@media screen and (min-width: 700px) {
  .people-carousel:not(.people-carousel--desktop-link) .people-card__link {
    display: none;
  }
}

.people-card__role {
  margin: 0;
}

.people-card__name {
  margin: 0;
}

/* Tap-to-reveal, for cards with no link only. A linked card is opened by a tap,
   so its description is hover-only; a card with nowhere to go would otherwise
   have no way to show one on touch at all, and nothing to say it has one. The
   button takes the link cue's place and carries its classes, so the rules for
   width and desktop visibility above apply to it unchanged - only the browser's
   own button chrome has to be stripped. */
people-card-toggle {
  display: contents;
}

.people-card__toggle {
  appearance: none;
  /* background-color, not the `background` shorthand: `.link` paints its
     underline as a background-image, which the shorthand would wipe out. */
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: inherit;
}

/* Hover already reveals the description on a pointer device, so the toggle is
   for touch only - hidden on desktop even where the link cue is shown. */
@media screen and (min-width: 700px) {
  .people-card__toggle {
    display: none;
  }
}

@media screen and (max-width: 699px) {
  .people-carousel--reveal-fade .people-card.is-revealed .people-card__face--back {
    opacity: 1;
  }

  .people-carousel--reveal-flip .people-card.is-revealed .people-card__face--front {
    transform: rotateY(180deg);
  }

  .people-carousel--reveal-flip .people-card.is-revealed .people-card__face--back {
    transform: rotateY(0deg);
  }
}

/* The revealed selectors are more specific than the reduced-motion block above,
   so the fallback has to be restated for them or the card would rotate anyway. */
@media (prefers-reduced-motion: reduce) and (max-width: 699px) {
  .people-carousel--reveal-flip .people-card.is-revealed .people-card__face--front {
    transform: none;
  }

  .people-carousel--reveal-flip .people-card.is-revealed .people-card__face--back {
    opacity: 1;
    transform: none;
  }
}

/* Mobile: the link cue drops below the name. The explicit 1fr column matters -
   switching the body to grid leaves the flex rule's justify-content:
   space-between in force, which would otherwise content-size an implicit column
   and leave a long name with nothing to wrap within. */
@media screen and (max-width: 699px) {
  .people-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}
/* /SOLWE */

/* SOLWE: sold out Upnova bundle - hide Upnova's add to cart, the theme's sold out button replaces it (CUSTOMIZATIONS.md product-info).
   The hook div is rendered only when the bundle product is unavailable, so in-stock bundles are untouched. */
.product-info__block-item:has(> .product-info__bundle-sold-out) #upezBundleUpsell::part(upnova-mix-and-match-add-to-cart) {
  display: none;
}
/* /SOLWE */

/* SOLWE: consent map - CUSTOMIZATIONS.md #consent-map
   One box for both states, so swapping the fallback image for the iframe moves nothing.
   Width, height and object-fit come from Impact's .media-with-text__media > *. */
.consent-map {
  display: block;
  aspect-ratio: var(--consent-map-aspect-ratio);
}

.consent-map > iframe {
  border: 0;
}
/* /SOLWE */