/** Shopify CDN: Minification failed

Line 7308:9 Expected identifier but found whitespace
Line 7308:10 Unexpected "0"
Line 7365:1 Expected identifier but found "%"
Line 7367:0 Unexpected "-"
Line 7375:1 Expected identifier but found "%"
Line 7378:0 Unexpected "{"
Line 7378:1 Expected identifier but found "%"
Line 7381:0 Unexpected "<"
Line 7510:20 Expected identifier but found "!"
Line 7762:0 Unexpected "<"
... and 6 more hidden warnings

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

html[scroll-lock] {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

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

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

input:hover {
  background-color: var(--color-input-hover-background);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.resource-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  will-change: transform, box-shadow;
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

.product-card__content slideshow-component {
  --cursor: pointer;
}

.predictive-search-results__card .product-card,
.predictive-search-results__card .collection-card,
.predictive-search-results__card .resource-card {
  transition: none;
  will-change: auto;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .resource-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-lift .header .product-card:hover,
  .card-hover-effect-lift .header .collection-card:hover,
  .card-hover-effect-lift .header .resource-card:hover,
  .card-hover-effect-lift .header-drawer .product-card:hover,
  .card-hover-effect-lift .header-drawer .collection-card:hover,
  .card-hover-effect-lift .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .resource-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-scale .header .product-card:hover,
  .card-hover-effect-scale .header .collection-card:hover,
  .card-hover-effect-scale .header .resource-card:hover,
  .card-hover-effect-scale .header-drawer .product-card:hover,
  .card-hover-effect-scale .header-drawer .collection-card:hover,
  .card-hover-effect-scale .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .predictive-search-results__card .card-gallery,
  .predictive-search-results__card .collection-card__image,
  .predictive-search-results__card .product-card__image,
  .predictive-search-results__card .resource-card__image {
    transition: none;
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

  .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image {
    transform: none;
  }

  .predictive-search-results__card .product-card:hover,
  .predictive-search-results__card .collection-card:hover,
  .predictive-search-results__card .resource-card:hover,
  .header .product-card:hover,
  .header .collection-card:hover,
  .header .resource-card:hover,
  .header-drawer .product-card:hover,
  .header-drawer .collection-card:hover,
  .header-drawer .resource-card:hover {
    transform: none;
    box-shadow: none;
  }
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), calc(100% - (var(--page-margin) * 2)))) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart__summary-container) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile:not(:focus, :active) {
    /* stylelint-disable-next-line declaration-no-important */
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    /* stylelint-disable-next-line declaration-no-important */
    word-wrap: normal !important;
  }
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-to-content-link {
  position: absolute;
  overflow: hidden;
  height: 1px;
  left: -99999px;
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.skip-to-content-link:focus {
  z-index: var(--layer-temporary);
  overflow: auto;
  width: auto;
  height: auto;
  padding: var(--padding-lg) var(--padding-4xl);
  left: var(--margin-lg);
  top: var(--margin-lg);
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}

.text-left {
  --text-align: left;

  text-align: left;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: right;

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: left;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: right;
}

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

placeholder-image {
  display: block;
  height: 100%;
  aspect-ratio: var(--ratio);
}

placeholder-image[data-type='product'] {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
  width: 100%;
}

/** Placeholder background for the placeholder image, the dimensions are the same as the product images */
placeholder-image[data-type='product']:not(:has(> img)) {
  aspect-ratio: var(--ratio);
  height: 350px;
}

placeholder-image > img {
  object-fit: cover;
  aspect-ratio: var(--ratio);
  height: 100%;
}

[data-placeholder='true'] * {
  cursor: default;
}

slideshow-component [data-placeholder='true'] * {
  cursor: grab;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > * {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > * {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color, var(--font-h1-color));
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > * {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color, var(--font-h2-color));
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > * {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color, var(--font-h3-color));
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > * {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color, var(--font-h4-color));
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > * {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color, var(--font-h5-color));
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > * {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color, var(--font-h6-color));
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  --button-color: var(--color, var(--color-primary-hover));
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-primary, .button-secondary)),
.rte
  :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6)
  a:where(:not(.button, .button-primary, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: transparent;
    color: var(--color-primary-hover);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: 1;
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-sticky);
}

/* Featured collection block */
.featured-collection-block {
  width: 100%;
}

/* Product grid */
.product-grid-container {
  display: block;
  width: 100%;
  padding-block: var(--padding-block-start) var(--padding-block-end);

  @media screen and (min-width: 750px) {
    display: grid;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--product-grid-gap);
  margin: auto;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .product-grid {
    grid-template-columns: var(--product-grid-columns-desktop);
  }
}

.product-grid :is(h3, p) {
  margin: 0;
}

.product-grid__item {
  border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
}

.product-grid--organic[product-grid-view='default'] .product-grid__item {
  height: fit-content;
}

.product-grid__card.product-grid__card {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--product-card-gap);
  align-items: var(--product-card-alignment);
  text-decoration: none;
  color: var(--color, var(--color-foreground));
  padding-block: var(--padding-block-start) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  overflow: hidden;
}

[product-grid-view='zoom-out'] .product-grid__card {
  row-gap: var(--padding-xs);
}

[product-grid-view='default'] {
  --product-grid-gap: 16px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

[product-grid-view='default'] .product-grid__item {
  padding-block: 0;
}

[product-grid-view='mobile-single'],
.product-grid-mobile--large {
  @media screen and (max-width: 749px) {
    grid-template-columns: 1fr;
  }
}

.product-grid__card .group-block > * {
  @media screen and (max-width: 749px) {
    flex-direction: column;
  }
}

ul[product-grid-view='zoom-out'] .product-grid__card > * {
  display: none;
}

ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
  display: block;
}

[product-grid-view='zoom-out']
  .card-gallery
  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
  display: none;
}

ul[product-grid-view='zoom-out'] .card-gallery > img {
  display: block;
}

[product-grid-view='zoom-out'] {
  --product-grid-columns-desktop: repeat(
    10,
    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
  );
}

.product-grid-view-zoom-out--details {
  display: none;
}

.product-grid-view-zoom-out--details .h4,
.product-grid-view-zoom-out--details span,
.product-grid-view-zoom-out--details s {
  font-size: var(--font-size--xs);
  font-family: var(--font-paragraph--family);
}

.product-grid-view-zoom-out--details span {
  font-weight: 500;
}

.product-grid-view-zoom-out--details .h4 {
  line-height: 1.3;
  font-weight: 400;
}

.product-grid-view-zoom-out--details > span.h6,
.product-grid-view-zoom-out--details > div.h6 > product-price {
  display: inline-block;
  line-height: 0;
  margin-top: var(--margin-2xs);
}

.product-grid-view-zoom-out--details > span.h6 > *,
.product-grid-view-zoom-out--details > div.h6 > * > * {
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(product-grid) {
    details[open] floating-panel-component {
      view-transition-name: panel-content;

      .checkbox *,
      .facets__pill-label {
        transition: none;
      }

      .facets--vertical & {
        view-transition-name: none;
      }
    }

    .product-grid {
      view-transition-name: product-grid;
    }

    footer {
      view-transition-name: footer;
    }

    .product-grid__item,
    floating-panel-component {
      transition: none;
    }
  }
}

::view-transition-group(panel-content) {
  z-index: 1;
}

::view-transition-new(product-grid) {
  animation-delay: 150ms;
  animation-name: fadeInUp;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
}

results-list[initialized] {
  .product-grid__item {
    transition: opacity var(--animation-speed) var(--animation-easing),
      transform var(--animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collection and product list cards have equal heights */
:is(.product-grid__item, .resource-list__item) .product-card {
  display: grid;
  height: 100%;
}

/* Video background */
.video-background,
.video-background * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background--cover * {
  object-fit: cover;
}

.video-background--contain * {
  object-fit: contain;
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* =========================================================
   VK SHOP OVERRIDES (Collection only)
   Purpose: align with Horizon variable system (base.css)
   Safe: scoped to collection template + vk-shop results-list
========================================================= */

.template-collection results-list.vk-shop {
  /* Desktop columns via theme’s variable system */
  --product-grid-columns-desktop: repeat(4, minmax(0, 1fr));
  --product-grid-gap: 18px;
}

/* Mobile layout: keep 2 columns (prevents “one by one”) */
@media screen and (max-width: 749px) {
  .template-collection results-list.vk-shop ul.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* If theme forces mobile-single view, override it */
  .template-collection results-list.vk-shop ul.product-grid[product-grid-view='mobile-single'],
  .template-collection results-list.vk-shop ul.product-grid.product-grid-mobile--large {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop layout: 4 columns */
@media screen and (min-width: 750px) {
  .template-collection results-list.vk-shop ul.product-grid {
    grid-template-columns: var(--product-grid-columns-desktop) !important;
  }
}

/* Ensure grid items can shrink so layout doesn’t collapse */
.template-collection results-list.vk-shop ul.product-grid > li.product-grid__item {
  min-width: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: slideInLeft;
  --dialog-drawer-closing-animation: slideOutLeft;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: slideInRight;
  --dialog-drawer-closing-animation: slideOutRight;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer.dialog-closing {
  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-background-color);
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-text);
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Show more */

.show-more__button {
  color: var(--color-primary);
  cursor: pointer;
}

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: var(--color-primary-hover);
  }
}

.show-more__label {
  text-align: start;
  font-size: var(--font-size--body-md);
  font-family: var(--font-paragraph--family);
}

.show-more__button .svg-wrapper {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.show-more[data-expanded='true'] .show-more__label--more,
.show-more[data-expanded='false'] .show-more__label--less {
  display: none;
}

.link {
  display: inline-block;
  text-align: center;
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

.product-form-buttons:has(.add-to-cart-button.button-secondary)
  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

/* Collapsible row */

.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: var(--color-primary-hover);
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical),
.show-more__button .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal,
.details-open > summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical,
.details-open > summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Product Media */
media-gallery {
  display: block;
  width: 100%;
}

:where(media-gallery, .product-grid__item) {
  .media-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--image-gap);
  }
}

.product-media-gallery__slideshow--single-media slideshow-container {
  @media screen and (max-width: 749px) {
    grid-area: unset;
  }
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  /* width and overflow forces children to shrink to parent width */
  --slide-width: round(up, 100%, 1px);

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: 100%;

  /* Relative position needed for video and 3d models */
  position: relative;
  overflow: hidden;

  &:where(.constrain-height) {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    margin-right: auto;
    margin-left: auto;
  }
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  /* Needed for safari to stretch to full grid height */
  height: 100%;
}

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }

  .media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

.shopify-model-viewer-ui__controls-area {
  bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}

.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}

.product-media-container.media-fit-contain img {
  object-position: center center;
}

.product-media-container.media-fit {
  --product-media-fit: cover;

  img {
    object-fit: var(--product-media-fit);
  }
}

/* Media gallery zoom dialog */
.product-media-container__zoom-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--layer-flat);
  cursor: zoom-in;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

zoom-dialog dialog {
  width: 100vw;
  height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
  scrollbar-width: none;

  &[open] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  &::backdrop {
    background: transparent;
  }
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.dialog-thumbnails-list-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: var(--layer-raised);
}

.dialog-thumbnails-list {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  bottom: 0;
  overflow-x: auto;
  opacity: 0;
  padding: var(--padding-lg);
  margin-inline: auto;
  scrollbar-width: none;
  animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
  animation-delay: calc(var(--animation-speed) * 1.5);
}

.dialog--closed .dialog-thumbnails-list {
  animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
}

@media screen and (min-width: 750px) {
  .dialog-thumbnails-list {
    position: fixed;
    flex-direction: column;
    inset: 50% var(--margin-lg) auto auto;
    right: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    animation: thumbnailsSlideInTop calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 2);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }
}

.dialog-thumbnails-list__thumbnail {
  width: var(--thumbnail-width);
  height: auto;
  transition: transform var(--animation-speed) var(--animation-easing);
  flex-shrink: 0;
  border-radius: var(--media-radius);

  img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius);
    aspect-ratio: var(--aspect-ratio);
  }

  &:is([aria-selected='true']) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
  }
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

/* If the product media is playing, hide the preview image */
.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

/* Deferred media & Product model  */
:is(product-model, deferred-media) {
  /* Height needed to make sure when it's set to be stretched, it takes the full height */
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Required to make sure the absolute position respects the padding of the wrapper: */
  padding: inherit;
}

slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  bottom: var(--padding-sm);
  right: var(--padding-sm);
}

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / calc(var(--media-preview-ratio)) + var(--padding-lg) * 2);
  right: var(--padding-lg);
}

@media screen and (max-width: 749px) {
  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }
}

@media screen and (min-width: 750px) {
  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls up to match the padding on the thumbnails */
    bottom: var(--padding-lg);

    /* Move the controls to the left of the thumbnails list on the right */
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  /* Apply the border radius to the video */
  overflow: hidden;
}

deferred-media {
  /* The overflow hidden in the deferred-media won't let the button show the focus ring */
  &:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  @supports not selector(:focus-visible) {
    &:has(:focus) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }
}

.deferred-media__poster-button {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
}

.deferred-media__poster-button.deferred-media__playing {
  opacity: 0;
  transition: opacity 0.3s ease;
}

deferred-media img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

deferred-media iframe {
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

deferred-media[data-media-loaded] img {
  opacity: 0;
}

.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-white);
  filter: drop-shadow(var(--shadow-button));

  &:hover {
    color: rgb(var(--color-white-rgb) / var(--opacity-80));
  }

  @media screen and (min-width: 750px) {
    width: 4rem;
    height: 4rem;
  }
}

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  /* only apply this on the video block not product media */
  object-fit: cover;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

.button-shopify-xr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-md);
}

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: currentcolor;
  margin-inline-end: var(--margin-md);
}

.button-shopify-xr[data-shopify-xr-hidden] {
  display: none;
}

/* Swatches */
.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height: 16px;
  --min-width: 16px;

  /* mobile values */
  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  /* From the settings */
  --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
  --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

  /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
  --offset-scaled-width: calc(
    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
  );
  --offset-scaled-height: calc(
    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
  );
  --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

  /* width = min(m + sU, (m + s * W'/H' * M'), M) */
  --swatch-width: min(
    calc(var(--min-width) + calc(var(--scaling-factor) * var(--offset-swatch-width) * 1px)),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  /* height = min(m + sV, (m + s * H'/W' * M'), M) */
  --swatch-height: min(
    calc(var(--min-height) + calc(var(--scaling-factor) * var(--offset-swatch-height) * 1px)),
    calc(var(--min-height) + var(--offset-scaled-height)),
    var(--max-swatch-size)
  );

  display: block;
  background: var(--swatch-background);
  background-position: var(--swatch-focal-point, center);
  border-radius: var(--variant-picker-swatch-radius);
  border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
  width: var(--swatch-width);
  height: var(--swatch-height);

  /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
  background-size: var(--swatch-width) var(--swatch-height);

  &.swatch--unavailable {
    border-style: dashed;
  }

  &.swatch--unscaled {
    /* for when you want fixed sizing (e.g. pdp) */
    --swatch-width: var(--variant-picker-swatch-width);
    --swatch-height: var(--variant-picker-swatch-height);
  }

  &.swatch--filter {
    --swatch-width: var(--max-filter-size);
    --swatch-height: var(--max-filter-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  &.swatch--pill {
    --swatch-width: var(--max-pill-size);
    --swatch-height: var(--max-pill-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  /* swatches in filters and pills always have a border  */
  &.swatch--filter,
  &.swatch--pill {
    --style-border-swatch-width: var(--variant-picker-border-width);
    --style-border-swatch-style: var(--variant-picker-border-style);
    --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
  }

  @media screen and (min-width: 750px) {
    /* desktop values */
    --max-swatch-size: 32px;
    --max-pill-size: 16px;
    --max-filter-size: 28px;
    --scaling-factor: 0.65;
  }
}

.variant-picker .variant-option--buttons label:has(.swatch) {
  border-radius: var(--variant-picker-swatch-radius);
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

.compare-at-price {
  opacity: 0.4;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.card-gallery {
  position: relative;
}

@media screen and (min-width: 750px) {
  product-card:focus-within .quick-add__button,
  .card-gallery:hover .quick-add__button {
    display: grid;
    will-change: margin, opacity;
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
  }
}

@container (max-width: 70px) {
  .card-gallery:hover .quick-add__button {
    display: none;
  }
}

/* Drawer */
.drawer {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--layer-raised);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) var(--animation-easing);
}

.drawer[data-open='true'] {
  transform: translateX(0);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--drawer-header-block-padding) var(--drawer-inline-padding);
}

.drawer__title {
  font-size: var(--font-h2--size);
  margin: 0;
}

.drawer__close {
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
}

.drawer__content {
  display: block;
  padding: var(--drawer-content-block-padding) var(--drawer-inline-padding);
  width: 100%;
}

/* Background overlay */
.background-overlay {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay-color, rgb(0 0 0 / 15%));
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }
  }
}

@media (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) clamp(1rem, 1em * 0.25, 2rem);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

.checkbox {
  --checkbox-size: 22px;
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-border-radius: 7px;
  --checkbox-label-padding: 8px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;
  --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

  position: relative;
  display: flex;
  align-items: center;

  @media screen and (min-width: 750px) {
    --checkbox-size: 16px;
    --checkbox-border-radius: 5px;
    --checkbox-label-padding: 6px;
  }

  &:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  &:has(.checkbox__input:disabled) {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);

  /* Outline is on the SVG instead, to allow it to have border-radius */
  &:focus-visible {
    outline: none;
  }

  &:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  &:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  &:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }
}

.checkbox__label {
  position: relative;
  display: inline-flex;
  cursor: var(--checkbox-cursor);
  line-height: var(--checkbox-size);
  min-width: var(--minimum-touch-target);
}

.checkbox .icon-checkmark {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  flex-shrink: 0;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
}

.checkbox__label-text {
  padding-inline-start: var(--checkbox-label-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox .icon-checkmark path {
  stroke: var(--color-background);
  opacity: var(--checkbox-path-opacity);
  transition: opacity var(--animation-speed) var(--animation-easing);
}

.checkbox__input:disabled + .checkbox__label {
  color: var(--input-disabled-text-color);
}

/* Add to cart button */
.button[id^='BuyButtons-ProductSubmitButton-'] {
  position: relative;
  overflow: hidden;
}

/* Cart bubble */
.cart-bubble {
  --cart-padding: 0.2em;

  position: relative;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-width: 0;
  display: flex;
  line-height: normal;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-button-text);
  padding-inline: var(--cart-padding);
}

.cart-bubble__background {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-button-background);
  border-radius: var(--style-border-radius-lg);
}

.cart-bubble__text {
  font-size: var(--font-size--2xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quantity selector */
.quantity-selector {
  --quantity-selector-width: 124px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  flex: 1 1 var(--quantity-selector-width);
  align-self: stretch;
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    background-color: var(--color-input-hover-background);
  }
}

.product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
  border-radius: var(--style-border-radius-buttons-secondary);
}

.quantity-selector :is(.quantity-minus, .quantity-plus) {
  /* Unset button styles */
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  flex-shrink: 0;
  color: var(--color-input-text);
}

.quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-inputs);
  border-end-start-radius: var(--style-border-radius-inputs);
}

.quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-inputs);
  border-end-end-radius: var(--style-border-radius-inputs);
}

.product-details .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-buttons-primary);
  border-end-start-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-buttons-primary);
  border-end-end-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector .svg-wrapper {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.quantity-selector svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

:is(.quantity-minus, .quantity-plus):active .svg-wrapper {
  transform: scale(0.9);
}

.quantity-selector input[type='number'] {
  margin: 0;
  text-align: center;
  border: none;
  appearance: none;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
  border-radius: var(--style-border-radius-buttons);
  color: var(--color-input-text);
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

/* Firefox */
.quantity-selector input[type='number'] {
  appearance: textfield;
}

/* Pills (used in facets and predictive search) */

.pills__pill {
  --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

  color: var(--color-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 48px;
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills);
  cursor: pointer;
  background-color: var(--pills-pill-background-color);
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  @media screen and (max-width: 749px) {
    padding: var(--padding-xs) var(--padding-md);
  }
}

.pills__pill > .svg-wrapper {
  --close-icon-opacity: 0.4;
  --icon-stroke-width: 1px;

  color: var(--color-foreground);
}

.pills__pill--swatch {
  @media screen and (max-width: 749px) {
    padding-inline-start: var(--padding-sm);
  }
}

.pills__pill--swatch .swatch {
  margin-right: -4px;
}

.pills__pill--desktop-small {
  @media screen and (min-width: 750px) {
    font-size: var(--font-size--xs);
  }
}

/* Fly to cart animation */
fly-to-cart {
  position: fixed;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: calc(infinity);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
  transition: opacity 0.3s ease;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-foreground);
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--scale, 1));
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(var(--custom-transform-from, 100%));
  }

  to {
    transform: translateX(var(--custom-transform-to, 0));
  }
}

@keyframes slideInLeftViewTransition {
  from {
    transform: translateX(100px);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--custom-transform-to, -100%));
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideInTop {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes slideOutBottom {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes slideInBottom {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideOutTop {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes cartBubbleSlideIn {
  from {
    transform: translateY(-1em);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(1em);
  }
}

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

.bubble {
  display: inline-flex;
  height: calc(var(--variant-picker-swatch-height) / 1.5);
  font-size: var(--font-size--xs);
  border-radius: 20px;
  min-width: 20px;
  padding: 0 6px;
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  color: var(--color-foreground);
  align-items: center;
  justify-content: center;
}

.bubble svg {
  width: 12px;
  height: 12px;
}

.top-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

.bottom-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .bottom-shadow--mobile::before {
    display: none;
  }
}

.video-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

:not(deferred-media) > .video-placeholder-wrapper {
  width: var(--video-placeholder-width);
}

.video-placeholder-wrapper > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;

  position: relative;
  display: flex;
  flex-direction: column;
  timeline-scope: var(--slideshow-timeline);
}

.slideshow--single-media {
  --cursor: default;
}

a slideshow-component {
  --cursor: pointer;
}

/*
 * Slideshow Slides
 */
slideshow-slides {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  gap: var(--slideshow-gap, 0);
  cursor: var(--cursor);

  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }

  &::-webkit-scrollbar {
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }

  &[size='small'] {
    min-height: 17.5rem;
  }

  &[size='medium'] {
    min-height: 21.25rem;
  }

  &[size='large'] {
    min-height: 25rem;
  }

  @media screen and (min-width: 750px) {
    &[size='small'] {
      min-height: 26.25rem;
    }

    &[size='medium'] {
      min-height: 35rem;
    }

    &[size='large'] {
      min-height: 45rem;
    }
  }
}

slideshow-component[disabled='true'] slideshow-slides {
  overflow: hidden;
}

slideshow-component[mobile-disabled] slideshow-slides {
  @media screen and (max-width: 749px) {
    overflow: hidden;
  }
}

slideshow-slide {
  position: relative;
  scroll-snap-align: start;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;

  slideshow-component[actioned] &,
  &[aria-hidden='false'] {
    content-visibility: visible;
  }

  slideshow-component slideshow-slide:not([aria-hidden='false']) {
    content-visibility: hidden;
  }

  &[hidden]:not([reveal]) {
    display: none;
  }
}

slideshow-slide.product-media-container--tallest {
  content-visibility: visible;
}

@media screen and (max-width: 749px) {
  /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
  .media-gallery--hint
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
}

/*
 * Collection and Resource list carousels have peeking slides on both sides.
 * Card galleries preview the next or previous images on 'pointerenter', so we
 * try to kick load them beforehand (they are lazy loaded otherwise).
 */
:is(.resource-list__carousel, .card-gallery)
  :is(
    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
    slideshow-slide[aria-hidden='false'] + slideshow-slide
  ) {
  content-visibility: auto;

  slideshow-component[actioned] & {
    content-visibility: visible;
  }
}

/*
 * Be specific about HTML children structure to avoid targeting nested slideshows.
 * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
 */
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible;
}

slideshow-slides[gutters*='start'] {
  padding-inline-start: var(--gutter-slide-width, 0);
  scroll-padding-inline-start: var(--gutter-slide-width, 0);
}

slideshow-slides[gutters*='end'] {
  padding-inline-end: var(--gutter-slide-width, 0);
}

slideshow-component[dragging] {
  --cursor: grabbing;

  * {
    pointer-events: none;
  }
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

slideshow-container {
  width: 100%;
  display: block;
  position: relative;
  grid-area: container;
  container-type: inline-size;
}

/*
 * Slideshow Controls
 */
slideshow-controls {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  scrollbar-width: none;
  min-height: var(--minimum-touch-target);
  grid-area: controls;

  &[controls-on-media] {
    position: absolute;
    bottom: 0;
  }
}

slideshow-controls::-webkit-scrollbar {
  display: none;
}

slideshow-controls button {
  --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
  --color-active: var(--color-foreground);
  --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

  display: inline-block;
  height: var(--minimum-touch-target);
  width: var(--minimum-touch-target);
  cursor: pointer;
}

slideshow-controls .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-xs);
}

slideshow-controls[pagination-position='center'] {
  align-items: center;
  justify-content: center;
}

slideshow-controls[pagination-position='center'][thumbnails] {
  width: 100%;
}

slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
  justify-content: space-between;
}

slideshow-component:has(slideshow-controls[thumbnails]) {
  &:has(slideshow-controls[pagination-position='right']) {
    display: grid;
    grid-template:
      'container controls' auto
      'arrows controls' min-content
      / 1fr auto;
  }

  &:has(slideshow-controls[pagination-position='left']) {
    display: grid;
    grid-template:
      'controls container' auto
      'controls arrows' min-content
      / auto 1fr;
  }

  slideshow-controls[pagination-position='left'] {
    order: -1;
  }
}

slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;

  .slideshow-controls__thumbnails-container {
    overflow: hidden auto;
  }

  &:not([controls-on-media]) {
    .slideshow-controls__thumbnails-container {
      position: sticky;
      top: var(--sticky-header-offset, 0);
    }

    .slideshow-controls__thumbnails {
      padding-block-start: var(--focus-outline-offset);
    }
  }
}

slideshow-controls:not([controls-on-media])[icons-on-media] {
  &[pagination-position='right'] {
    justify-content: flex-end;
  }

  &[pagination-position='left'] {
    justify-content: flex-start;
  }
}

slideshow-controls:not([controls-on-media]):is([pagination-position='left'], [pagination-position='right'])
  .slideshow-controls__thumbnails {
  padding-block: var(--padding-2xs);
}

slideshow-controls:not([controls-on-media]) {
  &:is([pagination-position='right']) {
    .slideshow-controls__thumbnails {
      padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }

  &:is([pagination-position='left']) {
    .slideshow-controls__thumbnails {
      padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }
}

slideshow-controls[controls-on-media] {
  z-index: var(--layer-raised);

  &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
    --color-foreground: #fff;
    --color-foreground-rgb: var(--color-white-rgb);
  }

  &[pagination-position='right'] {
    right: 0;
  }

  &[pagination-position='left'] {
    left: 0;
  }

  &[pagination-position='center'] {
    width: 100%;
  }

  &:not([thumbnails])[pagination-position='left'] {
    width: fit-content;
    align-self: flex-start;
  }

  &:not([thumbnails])[pagination-position='right'] {
    width: fit-content;
    align-self: flex-end;
  }
}

slideshow-controls:is([pagination-position='right'], [pagination-position='left']) {
  .slideshow-controls__thumbnails {
    flex-direction: column;
  }
}

.slideshow-controls__arrows {
  display: flex;
  justify-content: space-between;
  height: var(--minimum-touch-target);
  grid-area: arrows;

  button {
    padding: 0 var(--padding-xs);
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  list-style: none;

  button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }
}

slideshow-controls:has(.slideshow-controls__dots),
slideshow-component[autoplay] slideshow-controls {
  mix-blend-mode: difference;
}

.slideshow-controls__dots {
  gap: 0.6rem;
  padding: var(--padding-sm) var(--padding-lg);
  border-radius: 3rem;
  overflow: hidden;

  button {
    --size: 0.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    margin: calc(var(--size) / -2);
    font-size: 0;
    border-radius: calc(var(--size));

    &::after {
      content: '';
      display: block;
      background-color: var(--color);
      height: var(--size);
      width: var(--size);

      /* This is at --size / 2 to remove a visual regression on subpixel rendering displays */
      border-radius: calc(var(--size) / 2);

      @supports not (view-timeline-axis: inline) {
        &[aria-selected='true'] {
          --color: var(--color-active);
        }
      }

      &:hover {
        --color: var(--color-hover);
      }
    }

    &[aria-selected='true'] {
      --color: var(--color-active);
    }
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  &:only-child {
    margin-inline: auto;
  }
}

.slideshow-controls__counter {
  color: var(--color-foreground);
  background-color: rgb(0 0 0 / 40%);
  width: auto;
  border-radius: 2rem;
  padding: 0.3rem var(--padding-sm);
  margin-inline: var(--margin-sm);
  backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size--xs);

  .slash {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
    padding-inline: var(--padding-2xs);
    margin-block-start: -0.1rem;
  }
}

.slideshow-control[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.slideshow-control--large {
  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .svg-wrapper,
  svg {
    width: var(--slideshow-controls-icon);
    height: var(--slideshow-controls-icon);
  }
}

/* Slideshow control shape styles */
.button-unstyled.slideshow-control.slideshow-control--shape-square,
.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
}

.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  border-radius: 50%;
}

.button-unstyled.slideshow-control.slideshow-control--shape-square {
  border-radius: 0;
}

.slideshow-control .icon-caret {
  rotate: -90deg;
}

/* Slideshow Thumbnails */
.slideshow-controls__thumbnails-container {
  display: flex;
  width: 100%;
  max-height: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
}

.slideshow-controls__thumbnails {
  display: inline-flex;
  padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
  padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
  gap: var(--gap-xs);
  margin-inline: auto;
  height: fit-content;

  .slideshow-control {
    border-radius: var(--media-radius);
    width: clamp(44px, 7vw, var(--thumbnail-width));
    height: auto;
    aspect-ratio: var(--aspect-ratio);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
    }
  }
}

.slideshow-controls__thumbnail {
  position: relative;
}

.slideshow-controls__thumbnail-badge {
  position: absolute;
  top: var(--padding-2xs);
  right: var(--padding-2xs);
  width: clamp(16px, 10%, 20px);
  height: clamp(16px, 10%, 20px);
  background-color: var(--color-background);
  border-radius: var(--style-border-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

.slideshow-controls__thumbnail-badge svg {
  width: 60%;
  height: 60%;
  fill: var(--color-foreground);
  opacity: 0.6;
}

/* Slideshow Play/Pause */
.slideshow-control:is(.icon-pause, .icon-play) {
  color: var(--color-active);

  &:hover {
    color: var(--color-hover);
  }

  svg {
    display: none;
  }
}

slideshow-component:is([autoplay]) {
  &:is([paused]) {
    .icon-play > svg {
      display: block;
    }
  }

  &:not([paused]) {
    .icon-pause > svg {
      display: block;
    }
  }
}

/* Slideshow Arrows */
slideshow-arrows {
  --cursor-previous: w-resize;
  --cursor-next: e-resize;

  position: absolute;
  inset: 0;
  display: flex;
  z-index: var(--layer-heightened);
  pointer-events: none;
  mix-blend-mode: difference;
  align-items: flex-end;

  &[position='left'] {
    justify-content: flex-start;
    padding-inline: var(--padding-xs);
  }

  &[position='right'] {
    justify-content: flex-end;
    padding-inline: var(--padding-xs);
  }

  &[position='center'] {
    justify-content: space-between;
    align-items: center;
  }
}

slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
  mix-blend-mode: normal;
}

slideshow-component[disabled='true'] slideshow-arrows {
  display: none;
}

slideshow-arrows .slideshow-control {
  pointer-events: auto;
  opacity: 0;
  min-height: var(--minimum-touch-target);
  padding: 0 var(--padding-xs);
  color: var(--color-white);
}

slideshow-arrows .slideshow-control.slideshow-control--style-none {
  display: none;
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  padding-inline: 0 var(--padding-md);
}

.card-gallery slideshow-arrows .slideshow-control {
  /* Align icons with quick-add button */
  padding-inline: var(--padding-xl);

  @container (max-width: 249px) {
    padding-inline: 0 var(--padding-sm);
  }
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  opacity: 1;
}

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.block-resource-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap);
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  container-name: resource-list;
}

.section-resource-list {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

.section-resource-list.section--full-width product-card-link > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

.resource-list--carousel-mobile {
  display: block;

  @media screen and (min-width: 750px) {
    display: none;
  }
}

.resource-list {
  --resource-list-mobile-gap-max: 9999px;
  --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
  --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

  width: 100%;

  @media screen and (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }

  @container resource-list (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }
}

.resource-list--grid {
  display: grid;
  gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
  grid-template-columns: var(--resource-list-columns-mobile);

  @media screen and (min-width: 750px) {
    grid-template-columns: var(--resource-list-columns);
  }

  @container resource-list (max-width: 449px) {
    grid-template-columns: var(--resource-list-columns-mobile);
  }

  @container resource-list(min-width: 450px) and (max-width: 749px) {
    --resource-list-columns-per-row: 3;

    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    /* Avoid orphan in last row when there are 4, 7, or 10 items */
    &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
    /* Clean two full rows when there are 8 items */
    &:has(.resource-list__item:first-child:nth-last-child(8n)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 750px) {
    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
      --resource-list-columns-per-row: 4;
    }

    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 3;
    }

    &:has(.resource-list__item:first-child:nth-last-child(5)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 1200px) {
    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 6;
    }
  }
}

.resource-list__item {
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}

.resource-list__carousel {
  --slide-width: 60vw;

  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: resource-list-carousel;

  .slideshow-control[disabled] {
    display: none;
  }

  .slideshow-control--next {
    margin-inline-start: auto;
  }
}

@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
  }
}

@container resource-list-carousel (min-width: 750px) {
  .resource-list__carousel .resource-list__slide {
    --section-slide-width: calc(
      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
        var(--column-count)
    );
    --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    --slide-width: var(--section-slide-width, var(--fallback-slide-width));
  }
}

.resource-list__carousel slideshow-slides {
  gap: var(--resource-list-column-gap);

  /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */

  margin-block: -16px;
  padding-block: 16px;
}

.resource-list__carousel slideshow-arrows {
  padding-inline: var(--util-page-margin-offset);
}

.resource-list__carousel .resource-list__slide {
  width: var(--slide-width);
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

accordion-custom {
  details {
    &::details-content,
    .details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: content-visibility var(--animation-speed-slow) allow-discrete,
        padding-block var(--animation-speed-slow) var(--animation-easing),
        opacity var(--animation-speed-slow) var(--animation-easing),
        block-size var(--animation-speed-slow) var(--animation-easing);
    }

    &:not([open]) {
      &::details-content,
      .details-content {
        padding-block: 0;
      }
    }

    &[open] {
      &::details-content,
      .details-content {
        opacity: 1;
        block-size: auto;

        @starting-style {
          block-size: 0;
          opacity: 0;
          overflow-y: clip;
        }

        &:focus-within {
          overflow-y: visible;
        }
      }
    }
  }
}

accordion-custom[data-disable-on-mobile='true'] summary {
  @media screen and (max-width: 749px) {
    cursor: auto;
  }
}

accordion-custom[data-disable-on-desktop='true'] summary {
  @media screen and (min-width: 750px) {
    cursor: auto;
  }
}

text-component {
  --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --shimmer-speed: 1.25s;

  display: inline-block;
  position: relative;
  transition: color var(--animation-speed-slow) ease;
  line-height: 1;

  &::after {
    content: attr(value);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    pointer-events: none;
    background-image: linear-gradient(
      -85deg,
      var(--shimmer-text-color) 10%,
      var(--shimmer-color-light) 50%,
      var(--shimmer-text-color) 90%
    );
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    place-content: center;
  }

  &[shimmer] {
    color: transparent;

    &::after {
      opacity: 1;
      animation: text-shimmer var(--shimmer-speed) infinite linear;
    }
  }
}

@keyframes text-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Product card title truncation - applied only to zoom-out view */
[product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* Product card title truncation - applied on mobile regardless of view */
@media screen and (max-width: 749px) {
  :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

.product-card:hover,
.collection-card:hover,
.resource-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

.product-title-new {
      min-height: 45px;
}

@media only screen and (max-width: 768px) {
min-height: auto;
}
/* Sticky filters on collection pages (desktop only) */
@media screen and (min-width: 990px) {
  /* Make sure the grid doesn’t vertically centre everything */
  .template-collection .collection-wrapper.grid {
    align-items: flex-start;
  }

  /* Left-hand filter column */
  .template-collection .facets-block-wrapper.facets-block-wrapper--vertical {
    position: sticky !important;
    top: 120px; /* adjust up/down if needed */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
}

/* VK Allergen Matrix START */
.vk-allergen{
  max-width:1100px;
  margin:0 auto;
  padding:28px 16px 56px;
}

.vk-allergen__table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  outline:none;
}
.vk-allergen__table-wrap:focus-visible{
  outline:3px solid currentColor;
  outline-offset:4px;
}

.vk-allergen table{
  width:max-content;
  min-width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.vk-allergen th,
.vk-allergen td{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-size:14px;
  white-space:nowrap;
}

.vk-allergen th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(0,0,0,.03);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.04em;
}

.vk-allergen tr:nth-child(even) td{ background:rgba(0,0,0,.015); }

.vk-allergen td:first-child,
.vk-allergen th:first-child{
  position:sticky;
  left:0;
  z-index:3;
  background:#fff;
  font-weight:600;
}
.vk-allergen tr:nth-child(even) td:first-child{ background:rgba(0,0,0,.015); }
/* VK Allergen Matrix END */

.vk-allergen th:first-child,
.vk-allergen td:first-child{
  min-width: 260px;
}

.vk-allergen td:first-child{
  font-weight: 600;
}
.vk-allergen__table-wrap{
  position: relative;
}

@media (max-width: 768px){
  .vk-allergen__table-wrap{
    border-radius: 16px;
  }
}

/* --- COLLECTION / SHOP PAGE: tidy product cards + smaller buy buttons --- */
/* Works on Shopify/Dawn-style themes. Safe-scoped to collection + search grids. */

.template-collection .card-wrapper,
.template-search .card-wrapper {
  border-radius: 14px;
}

.template-collection .card__content,
.template-search .card__content {
  padding-top: 10px;
  gap: 8px;
}

/* Price a touch tighter */
.template-collection .price,
.template-search .price {
  font-size: 1rem;
  margin-top: 2px;
  margin-bottom: 6px;
}

/* Smaller Add to cart buttons (collection cards) */
.template-collection .product-card-wrapper .button,
.template-search .product-card-wrapper .button,
.template-collection .card__content .button,
.template-search .card__content .button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  width: auto !important;
}

/* If theme forces full-width buttons, allow but keep it neat */
.template-collection .card__content .button,
.template-search .card__content .button {
  max-width: 220px;
}

/* Smaller quantity selector (the - 1 +) on cards */
.template-collection quantity-input,
.template-search quantity-input {
  transform: scale(0.9);
  transform-origin: left center;
}

.template-collection quantity-input .quantity,
.template-search quantity-input .quantity {
  min-height: 34px !important;
}

.template-collection quantity-input button,
.template-search quantity-input button {
  width: 34px !important;
}

/* Optional: tighten those green allergen tags if they feel chunky */
.template-collection .product-card-wrapper .badge,
.template-search .product-card-wrapper .badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
}

/* VK: equal height product cards on collection grid */
.product-grid__item {
  height: 100%;
  display: flex;
}

.product-grid__item > * {
  width: 100%;
}

.vk-product-card,
.vk-product-card__link,
.vk-product-card__inner {
  height: 100%;
}
/* VK: Standardise product-card images (square window + crop, no stretching) */
.product-grid .media,
.product-grid .card__media,
.product-grid .card-media,
.product-grid .product-card__media,
.product-grid .card-gallery {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-grid .media img,
.product-grid .card__media img,
.product-grid .card-media img,
.product-grid .product-card__media img,
.product-grid .card-gallery img,
.product-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ================================
   VK: Product card image standardiser (crop to fixed height)
   Paste at VERY BOTTOM of base.css
=================================== */

/* Create a predictable "image window" on common media wrappers */
.product-card .media,
.product-card .card__media,
.product-card .card__inner,
.product-grid__item .media,
.product-grid__item .card__media,
.product-grid__item .card__inner,
.product-grid__item [class*="media"],
.product-grid__item [class*="Media"] {
  overflow: hidden;
  border-radius: inherit;
}

/* Give the media area a consistent height (tweak this number if you want) */
.product-card .media,
.product-card .card__media,
.product-grid__item .media,
.product-grid__item .card__media {
  height: auto; /* <-- adjust (e.g. 200-260) */
}

/* Make images/video fill that window and crop */
.product-card .media img,
.product-card .card__media img,
.product-card .card__inner img,
.product-grid__item .media img,
.product-grid__item .card__media img,
.product-grid__item .card__inner img,
.product-grid__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* ================================
   VK: Disable secondary/hover image overlay that can look like "two images"
=================================== */
.product-card .media img + img,
.product-grid__item .media img + img,
.product-card .card__media img + img,
.product-grid__item .card__media img + img,
.product-card .card__inner img + img,
.product-grid__item .card__inner img + img {
  display: none !important;
}

/* Some themes use absolute-positioned hover images */
.product-card .media img[loading] ~ img,
.product-grid__item .media img[loading] ~ img {
  display: none !important;
}
/* =========================
   COLLECTION PAGE ONLY
   Safe sticky filters + pagination spacing
   ========================= */
.template-collection .facets,
.template-collection .collection-filters,
.template-collection #FacetFiltersForm,
.template-collection facet-filters-form,
.template-collection .facets-container {
  position: sticky;
  top: calc(var(--header-height, 72px) + 12px);
  align-self: flex-start;
}

/* If the theme uses a sidebar wrapper, keep it from collapsing */
.template-collection .facets-container,
.template-collection .facets,
.template-collection .collection-filters {
  width: 100%;
  min-width: 240px;
}

/* Pagination – stop overlap, but scoped so it won’t hit other nav UI */
.template-collection nav.pagination,
.template-collection .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 12px;
}

.template-collection nav.pagination a,
.template-collection nav.pagination span,
.template-collection .pagination a,
.template-collection .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
}


/* =========================
   COLLECTION PAGE ONLY
   Safe sticky filters + pagination spacing
   ========================= */
.template-collection .facets,
.template-collection .collection-filters,
.template-collection #FacetFiltersForm,
.template-collection facet-filters-form,
.template-collection .facets-container {
  position: sticky;
  top: calc(var(--header-height, 72px) + 12px);
  align-self: flex-start;
}

/* If the theme uses a sidebar wrapper, keep it from collapsing */
.template-collection .facets-container,
.template-collection .facets,
.template-collection .collection-filters {
  width: 100%;
  min-width: 240px;
}

/* Pagination – stop overlap, but scoped so it won’t hit other nav UI */
.template-collection nav.pagination,
.template-collection .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 12px;
}

.template-collection nav.pagination a,
.template-collection nav.pagination span,
.template-collection .pagination a,
.template-collection .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   VK — ManageU-style FILTERS (Collection facets styling)
   Paste in assets-base.css (BOTTOM)
   ========================================================= */

.template-collection .facets-container,
.template-collection facet-filters,
.template-collection .facets {
  position: sticky;
  top: 120px; /* tweak if needed (header height) */
  align-self: start;
  z-index: 3;
}

.template-collection facet-filters,
.template-collection .facets {
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

/* Section headings */
.template-collection .facets__heading,
.template-collection .facets__summary span,
.template-collection details.facets__disclosure > summary {
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* Make each filter block cleaner */
.template-collection details.facets__disclosure {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 10px;
  margin-top: 10px;
}
.template-collection details.facets__disclosure:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.template-collection details.facets__disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 10px;
}
.template-collection details.facets__disclosure > summary:hover {
  background: rgba(0,0,0,.04);
}

/* Default list items */
.template-collection .facets__list {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
}

.template-collection .facets__item {
  margin: 0;
}

/* Base “tile/pill” label styling */
.template-collection .facets__label,
.template-collection .facet-checkbox {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.template-collection .facets__label:hover,
.template-collection .facet-checkbox:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.template-collection .facets__label input[type="checkbox"],
.template-collection .facet-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1f7a3a;
}

/* Selected state (works in most OS2.0 themes) */
.template-collection .facets__label:has(input:checked),
.template-collection .facet-checkbox:has(input:checked) {
  border-color: rgba(31,122,58,.5);
  background: rgba(31,122,58,.06);
}

/* --- PRODUCT TYPE: make options a thumbnail grid --- */
/* We’ll detect “Product Type” group via JS (below) and add [data-vk-filter="product-type"] */
.template-collection [data-vk-filter="product-type"] .facets__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.template-collection [data-vk-filter="product-type"] .facets__label,
.template-collection [data-vk-filter="product-type"] .facet-checkbox {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 12px;
}

.template-collection [data-vk-filter="product-type"] .facets__label input,
.template-collection [data-vk-filter="product-type"] .facet-checkbox input {
  display: none; /* ManageU vibe: clicking the whole card */
}

/* Thumbnail “image” slot (we’ll inject background images via JS mapping if you want later) */
.template-collection [data-vk-filter="product-type"] .facets__label::before,
.template-collection [data-vk-filter="product-type"] .facet-checkbox::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 2px auto 8px auto;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

/* --- ALLERGENS/DIETARIES: make them compact pills --- */
/* We’ll detect via JS and add [data-vk-filter="allergens"] */
.template-collection [data-vk-filter="allergens"] .facets__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.template-collection [data-vk-filter="allergens"] .facets__label,
.template-collection [data-vk-filter="allergens"] .facet-checkbox {
  grid-template-columns: 18px 1fr;
  padding: 12px;
}

/* Tiny icon dot (keeps it “smart”) */
.template-collection [data-vk-filter="allergens"] .facets__label::before,
.template-collection [data-vk-filter="allergens"] .facet-checkbox::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(31,122,58,.10);
  box-shadow: inset 0 0 0 1px rgba(31,122,58,.25);
}

/* Active filters pills (top) */
.template-collection .active-facets__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.template-collection .active-facets__button,
.template-collection .active-facets__remove,
.template-collection .active-facets a {
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 650;
  text-decoration: none;
}

/* Pagination: stop overlap + make it neat */
.template-collection .pagination__list {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.template-collection .pagination__item,
.template-collection .pagination__link {
  position: static !important;
  float: none !important;
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}
.template-collection .pagination__item[aria-current="page"] {
  background: #111;
  color: #fff;
  border-color: #111;
}
/* ==========================================
   VK Shop — Product card (Option A: centred) + Serves + Full-width ATC
   KEEP ONLY THIS BLOCK (delete all other VK serves/card CSS)
   Put at VERY BOTTOM of base.css
   ========================================== */

/* Card layout */
.vk-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Center key text */
.vk-card__info,
.vk-card__content,
.vk-card__body,
.vk-card__title,
.vk-card h3,
.vk-card h2,
.vk-card [data-price],
.vk-card__price,
.vk-card .price {
  text-align: center;
}

/* Price spacing */
.vk-card [data-price],
.vk-card__price,
.vk-card .price {
  display: block;
  margin-top: 6px;
}

/* Serves block */
.vk-card__serves {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.vk-card__serves-label {
  font-weight: 700;
  opacity: 0.85;
  text-align: center;
}

/* Buttons row */
.vk-card__serves-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* BOTH start same light green */
.vk-card .vk-serves-btn {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: #cfe7d3 !important;              /* light green */
  color: #103b1f !important;
  border: 1px solid rgba(16, 24, 40, 0.20) !important;

  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.vk-card .vk-serves-btn:active {
  transform: translateY(1px);
}

/* Selected = dark green */
.vk-card .vk-serves-btn.is-active,
.vk-card .vk-serves-btn[aria-pressed="true"] {
  background: #0f5a2a !important;              /* dark green */
  border-color: #0f5a2a !important;
  color: #ffffff !important;
}

/* Focus ring */
.vk-card .vk-serves-btn:focus-visible {
  outline: 3px solid rgba(15, 90, 42, 0.35) !important;
  outline-offset: 2px !important;
}

/* Actions pinned to bottom */
.vk-card__actions {
  margin-top: auto;
  display: flex;
}

/* Full-width Add to cart */
.vk-card__actions .vk-card__btn,
.vk-card__actions button,
.vk-card__actions [type="submit"] {
  width: 100% !important;
  display: block !important;
}
/* =========================================================
   VK SHOP — Serves selector + Card actions (AUTHORITATIVE)
   Keep ONE copy. Put at VERY BOTTOM of base.css
   ========================================================= */

/* Card uses vertical layout so actions can sit at the bottom */
.vk-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Center the serves label + buttons */
.vk-card .vk-card__serves {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
}

.vk-card .vk-card__serves-options {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Base (unselected): BOTH buttons same light green */
.vk-card .vk-serves-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #cfe7d3 !important;        /* light green */
  color: #103b1f !important;
  border: 1px solid rgba(16, 24, 40, 0.20) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Selected: dark green */
.vk-card .vk-serves-btn.is-active,
.vk-card .vk-serves-btn[aria-pressed="true"] {
  background: #0f5a2a !important;        /* dark green */
  border-color: #0f5a2a !important;
  color: #ffffff !important;
}

/* Accessibility focus ring */
.vk-card .vk-serves-btn:focus-visible {
  outline: 3px solid rgba(15, 90, 42, 0.35) !important;
  outline-offset: 2px !important;
}

/* Push actions to the bottom */
.vk-card .vk-card__actions {
  margin-top: auto;
  display: flex;
}

/* Make Add to Cart full width */
.vk-card .vk-card__actions .vk-card__btn,
.vk-card .vk-card__actions button,
.vk-card .vk-card__actions [type="submit"] {
  width: 100% !important;
  display: block !important;
}
/* =========================================================
   VK SHOP — Card structure + Serves + Full-width Add to cart
   (AUTHORITATIVE — keep ONE copy, put at bottom of base.css)
   ========================================================= */

/* 1) Make the product tile/card a real vertical layout */
.vk-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;          /* key for pushing footer down */
}

/* If your theme wraps content inside a body container, ensure it can stretch */
.vk-card .vk-card__body,
.vk-card .vk-card__content,
.vk-card .vk-card__info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* 2) Serves area — keep it centered and stable (NOT grid) */
.vk-card .vk-card__serves {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.vk-card .vk-card__serves-options {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 3) Serves buttons — both start same light green */
.vk-card .vk-serves-btn {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: #cfe7d3 !important;
  color: #103b1f !important;
  border: 1px solid rgba(16, 24, 40, 0.20) !important;

  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  box-shadow: none !important;
  cursor: pointer !important;
}

/* Selected = dark green */
.vk-card .vk-serves-btn.is-active,
.vk-card .vk-serves-btn[aria-pressed="true"] {
  background: #0f5a2a !important;
  border-color: #0f5a2a !important;
  color: #ffffff !important;
}

/* 4) Actions area — push to bottom */
.vk-card .vk-card__actions {
  margin-top: auto !important;
  display: flex !important;
}

/* 5) Add to cart — full width */
.vk-card .vk-card__actions .vk-card__btn,
.vk-card .vk-card__actions button,
.vk-card .vk-card__actions [type="submit"] {
  width: 100% !important;
  display: block !important;
}

/* Optional: accessible focus ring */
.vk-card .vk-serves-btn:focus-visible {
  outline: 3px solid rgba(15, 90, 42, 0.35) !important;
  outline-offset: 2px !important;
}
/* --- Card spacing polish (no markup changes) --- */
.vk-card .vk-card__title { margin: 10px 0 6px !important; }
.vk-card .vk-card__meta,
.vk-card .vk-card__price,
.vk-card .price { margin: 0 0 10px !important; opacity: 0.95; }

/* Make sure serves doesn't float awkwardly */
.vk-card .vk-card__serves { margin-bottom: 12px !important; }

.product-grid__item { display: flex; }
.product-grid__item .vk-card { height: 100% !important; }

/* =========================
   VK SHOP — NEAT GRID + SIDEBAR
   ========================= */

/* Layout: ensure our 2-col layout is sane */
.vk-collection-layout__inner{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sidebar sticky as a whole (Quick Finder + Filters) */
.vk-collection-layout__sidebar{
  position: sticky;
  top: 16px;
  align-self: start;
  display: grid;
  gap: 16px;
}

/* Make sidebar panels feel tidy */
.vk-collection-layout__sidebar .vk-quick-finder,
.vk-collection-layout__sidebar .facets,
.vk-collection-layout__sidebar .collection-filters,
.vk-collection-layout__sidebar [data-block-type="filters"]{
  border-radius: 16px;
}

/* =========================
   Search bar (full width)
   ========================= */
.vk-shop__search{
  margin: 0 0 16px 0;
}

.vk-shop__search-label{
  display: none;
}

.vk-shop__search-inputWrap{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.vk-shop__search-input{
  width: 100%;
  border: 0 !important;
  outline: none !important;
  background: transparent;
  font-size: 16px;
  line-height: 1.2;
}

.vk-shop__search-clear{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.06);
  display: none; /* JS toggles inline-flex */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* =========================
   Product grid: smaller cards
   ========================= */
.vk-shop .product-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Reduce card bloat */
.vk-shop .product-grid__item{
  min-width: 0;
}

/* If your card has a wrapper, this helps it behave */
.vk-shop .vk-product-card,
.vk-shop .card,
.vk-shop .product-card{
  border-radius: 18px;
  overflow: hidden;
}

/* Image: consistent height, less massive */
.vk-shop .vk-product-card img,
.vk-shop .product-card img,
.vk-shop .card img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Typography tightening (general safety rules) */
.vk-shop .vk-product-card h3,
.vk-shop .product-card h3,
.vk-shop .card h3{
  font-size: 15px;
  line-height: 1.25;
  margin: 10px 12px 6px;
}

.vk-shop .price,
.vk-shop .product-card__price,
.vk-shop .vk-product-card__price{
  font-size: 14px;
  margin: 0 12px 10px;
}

/* Buttons smaller and consistent */
.vk-shop button,
.vk-shop .button,
.vk-shop .btn{
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 14px;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 990px){
  .vk-collection-layout__inner{
    grid-template-columns: 1fr;
  }

  .vk-collection-layout__sidebar{
    position: static;
    top: auto;
  }

  .vk-shop .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .vk-shop .vk-product-card img,
  .vk-shop .product-card img,
  .vk-shop .card img{
    height: auto;
  }
}

@media (max-width: 520px){
  .vk-shop .product-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   VK SHOP CLEAN — FORCE OVERRIDES (matches vk-shop.css specificity)
   ========================================================= */

body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-collection-layout__inner{
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Sticky full left column */
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-collection-layout__sidebar{
  position: sticky !important;
  top: 16px !important;
  align-self: start !important;
  display: grid !important;
  gap: 16px !important;
}

/* Make the Quick Finder and Filters look like tidy panels */
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-quick-finder,
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .facets,
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .collection-filters{
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* ===== Search bar: remove double ring + make it full-width */
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-shop__search{
  margin: 0 0 16px 0 !important;
  width: 100% !important;
  max-width: 820px !important; /* optional: remove if you want full width */
}

body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-shop__search-inputWrap{
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 999px !important;
  background: #fff !important;

  /* kill any existing “ring” effect */
  box-shadow: none !important;
  outline: none !important;
}

body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-shop__search-input{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* ===== Product grid: FORCE smaller cards */
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid > li{
  min-width: 0 !important;
}

/* Reduce image height (this is the biggest “card too big” culprit) */
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid img{
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 990px){
  body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-collection-layout__inner{
    grid-template-columns: 1fr !important;
  }

  body.page-width-narrow main[data-template*="collection.vk-shop-clean"] .vk-collection-layout__sidebar{
    position: static !important;
  }

  body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid img{
    height: auto !important;
  }
}

@media (max-width: 520px){
  body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid{
    grid-template-columns: 1fr !important;
  }
}

:root { --vk-header-offset: 140px; } /* adjust if needed */

.vk-sidebarSticky {
  position: sticky;
  top: var(--vk-header-offset);
  align-self: start;
}

/* ================================
   VK Catering Filters + Card Chips
   (Put at VERY BOTTOM of base.css)
================================ */

/* Filter buttons (left panel) – squared, not pills */
.vk-filterCard .vk-filterBtn,
.vk-filterCard button.vk-filterBtn,
.vk-filterCard .vk-btn,
.vk-filterCard button {
  border-radius: 10px !important;
}

/* Product-card allergen chips – squared, compact */
.vk-chipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.vk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px !important; /* force rounded-square */
  background: rgba(0,0,0,0.02);
  line-height: 1;
  white-space: nowrap;
}

/* Optional: consistent “selected” styling */
.vk-filterBtn.is-active,
.vk-chip.is-active {
  background: rgba(23, 117, 65, 0.10);
  border-color: rgba(23, 117, 65, 0.35);
}

/* VK: rounded-square (not pill, not square) */
.vk-filterCard .vk-filterBtn,
.vk-filterCard button.vk-filterBtn,
.vk-filterCard .button,
.vk-filterCard .btn {
  border-radius: 14px !important;
}

/* VK: product card allergen chips */
.vk-chipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.vk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 9px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px !important;
  background: rgba(0,0,0,0.02);
  line-height: 1;
  white-space: nowrap;
}

.vk-topStrip{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  margin-bottom: 18px;
  padding: 18px 0;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.vk-topStrip{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  margin-bottom: 18px;
  padding: 18px 0;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* =========================
   VK SHOP GRID: 4-across + stable cards
   ========================= */

/* 4 across on desktop */
.vk-shop .product-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* 2 across tablet, 1 across mobile */
@media (max-width: 1100px){
  .vk-shop .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px){
  .vk-shop .product-grid{ grid-template-columns: 1fr !important; }
}

/* Card container */
.vk-shop .product-grid__item .vk-card{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Image area stays consistent */
.vk-shop .vk-card img{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
}

/* Body becomes a layout grid so price/variants/button never “float” */
.vk-shop .vk-card__body{
  flex: 1 !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto auto !important;
  row-gap: 10px !important;
  padding: 14px 14px 16px !important;
  text-align: center !important;
}

/* Title */
.vk-shop .vk-card__body h3,
.vk-shop .vk-card__title{
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* Description clamp so it doesn’t wreck layout */
.vk-shop .vk-card__body .vk-card__desc,
.vk-shop .vk-card__body p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: 0.85 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Allergen pills row: consistent + compact */
.vk-shop .vk-chipRow{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 6px !important;
}

.vk-shop .vk-chip{
  font-size: 12px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 10px !important; /* rounded square-ish */
  background: rgba(0,0,0,0.02) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Price always in the same place */
.vk-shop .vk-card__price{
  margin-top: 4px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Variant buttons (6/12) centered and consistent */
.vk-shop .vk-variantRow,
.vk-shop .vk-variantButtons{
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 6px !important;
}

.vk-shop .vk-variantBtn{
  min-width: 56px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  background: #fff !important;
  font-weight: 700 !important;
}

/* Add to cart always bottom, full-width inside card */
.vk-shop .vk-card__body .vk-addToCart,
.vk-shop .vk-card__body button[type="submit"],
.vk-shop .vk-card__body .button,
.vk-shop .vk-card__body .btn{
  margin-top: 10px !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

/* Stop “random” inherited pill rounding that makes buttons look inconsistent */
.vk-shop button,
.vk-shop .button,
.vk-shop .btn{
  border-radius: 14px !important; /* consistent */
}

/* VK: emoji icons for allergen chips */
.vk-shop .vk-chip::before{
  display: inline-block;
  margin-right: 6px;
  transform: translateY(0.5px);
  opacity: 0.9;
  content: "•";
}

/* map by text-class if you already add these classes; otherwise see note below */
.vk-shop .vk-chip.is-glutenfree::before{ content: "🌾"; }
.vk-shop .vk-chip.is-nutfree::before{ content: "🥜"; }
.vk-shop .vk-chip.is-eggfree::before{ content: "🥚"; }
.vk-shop .vk-chip.is-dairyfree::before{ content: "🥛"; }
.vk-shop .vk-chip.is-vegan::before{ content: "🌱"; }

/* VK: make left filter buttons more square, less pill */
.vk-filterCard button{
  border-radius: 14px !important; /* not fully round */
}

/* VK Shop top intro - centered like other pages, stronger typography */
.vk-shopTopCopy{
  max-width: 1240px;
  margin: 18px auto 26px;      /* pulls it off the menu + centers */
  padding: 0 16px;
}

.vk-shopTopCopy__inner{
  background: rgba(0,0,0,0.03);         /* neutral so it won’t clash with your real brand green */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 18px 18px;
}

/* Title: black + strong like About Us page headings */
.vk-shopTopCopy__title{
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  color: #111;                   /* black, as requested */
}

/* Body: not “light”, match site feel */
.vk-shopTopCopy__text{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(0,0,0,0.78);
}

.vk-shopTopCopy__text:last-child{ margin-bottom: 0; }

:root{ --vk-brand-green: #106537; } /* ONLY change this one value to your exact site green */
.vk-shopTopCopy__inner{ border-color: color-mix(in srgb, var(--vk-brand-green) 22%, rgba(0,0,0,0.10)); }

/* Give the shop more room so 4-across is possible */
.vk-shop{
  max-width: 1480px;      /* was 1240 in your liquid inline style */
  margin: 0 auto;
  padding: 18px 16px 56px;
}

/* Wider left filter column + tighter gap */
.vk-shop__grid{
  display: grid;
  grid-template-columns: 360px 1fr;  /* wider so you can add more buttons */
  gap: 18px;
  align-items: start;
}

/* Sticky that doesn’t get cut off under your header/menu */
.vk-filterCard{
  position: sticky;
  top: 140px; /* increase if your header is taller */
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding-bottom: 12px;
}

/* 4-across product grid (desktop) */
.vk-shop .product-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Responsive fallbacks */
@media (max-width: 1200px){
  .vk-shop .product-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px){
  .vk-shop__grid{ grid-template-columns: 1fr; }
  .vk-filterCard{ position: static; max-height: none; }
  .vk-shop .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .vk-shop .product-grid{ grid-template-columns: 1fr; }
}

.vk-shop{ max-width: 1480px !important; }

/* Make every card a stable vertical layout */
.vk-card,
.vk-shop .card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Keep media consistent (shop cards only, not recommendations) */
.vk-card img,
.vk-shop .card img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 14px;
}
product-recommendations .vk-card img {
  object-fit: cover;
  padding: 0;
  background: transparent;
}

/* Ensure the “body” stacks predictably */
.vk-card__body,
.vk-shop .card__content{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Price always same place */
.vk-card__price{
  margin-top: 10px;
  text-align: center;
  font-weight: 800;
}

/* Serves block centered + stronger */
.vk-servesLabel{
  text-align: center;
  font-weight: 700;
  margin-top: 6px;
}

.vk-servesRow{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.vk-servesRow button{
  font-weight: 800;
}

/* Button always pinned to bottom */
.vk-card__btn,
.vk-shop .card__actions,
.vk-shop .card button{
  margin-top: auto;
}

/* Chips: replace dots with icons */
.vk-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vk-chip::before{
  content: "•";
  font-weight: 900;
  opacity: 0.6;
}

/* Your icons (emoji style you liked) */
.vk-chip[data-chip="nut-free"]::before,
.vk-chip[data-chip="without-nuts"]::before { content:"\01F95C"; opacity:1; } /* peanuts */
.vk-chip[data-chip="dairy-free"]::before,
.vk-chip[data-chip="without-dairy"]::before { content:"\01F95B"; opacity:1; } /* glass of milk */
.vk-chip[data-chip="egg-free"]::before,
.vk-chip[data-chip="without-egg"]::before { content:"\01F95A"; opacity:1; } /* egg */
.vk-chip[data-chip="gluten-free"]::before,
.vk-chip[data-chip="without-gluten"]::before { content:"\01F33E"; opacity:1; } /* wheat */
.vk-chip[data-chip="vegan"]::before { content:"\01F331"; opacity:1; } /* seedling */
.vk-chip[data-chip="halal"]::before { content:"\2705"; opacity:1; } /* ✅ */
.vk-chip[data-chip="vegetarian"]::before { content:"\01F33F"; opacity:1; } /* herb */
.vk-chip[data-chip="high-protein"]::before { content:"\01F4AA"; opacity:1; } /* flexed bicep */

/* The bottom area sits at the bottom of the card */
.vk-card__bottom {
  margin-top: auto;   /* <-- this is the magic */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* tighten bottom stack */
.vk-card__bottom { gap: 8px; }

/* reserve a consistent “serves zone”, even if empty */
.vk-serveRow {
  min-height: 64px;          /* key: stops “no serves” looking like a hole */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vk-serveLabel { margin: 0; }

.vk-variantGrid { gap: 6px; }

/* tighten space between price and button */
.vk-price { margin-top: 2px; }
.vk-card__btn { margin-top: 2px; }

.vk-card__desc { min-height: 44px; }

.vk-tile {
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
}

.vk-tile .vk-ico {
  width: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1;
}

/* --- OVERRIDES (paste at bottom) --- */

/* Reduce the big gap between the top intro and the grid */
.vk-shop__seoSlot {
  min-height: 0 !important;
  margin: 0 0 10px !important;
}

/* Optional: slightly tighten spacing under the top intro box (if it has margin) */
.vk-shopTopCopy {
  margin-bottom: 10px !important;
}

/* Hide “Showing all items” header row */
.vk-productsHeader {
  display: none !important;
}

/* tighten the vertical gap */
.vk-shopTopCopy { margin-bottom: 8px; }
.vk-shop__seoSlot { min-height: 0; margin-bottom: 10px; }

.vk-shop__seoSlot:empty { display: none; }

#vk-search-count,
.vk-productsHeader { display: none !important; }

/* ================================
   VK SHOP: category icons (CSS-only)
   ================================ */

.vk-tile[data-vk-filter="category"]{
  position: relative;
  padding-top: 14px; /* give a touch more room */
  gap: 8px;
}

.vk-tile[data-vk-filter="category"]::before{
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  margin-right: 8px;
}

/* Icons per category slug */
.vk-tile[data-vk-filter="category"][data-vk-value="breakfast"]::before{ content: "🍳"; }
.vk-tile[data-vk-filter="category"][data-vk-value="sandwiches"]::before{ content: "🥪"; }
.vk-tile[data-vk-filter="category"][data-vk-value="salads"]::before{ content: "🥗"; }
.vk-tile[data-vk-filter="category"][data-vk-value="quiches"]::before{ content: "🥧"; }
.vk-tile[data-vk-filter="category"][data-vk-value="roast-dinners"]::before{ content: "🍗"; }
.vk-tile[data-vk-filter="category"][data-vk-value="sweet-treats"]::before{ content: "🧁"; }
.vk-tile[data-vk-filter="category"][data-vk-value="gluten-free-treats"]::before{ content: "🍰"; } /* your tile says Gluten-free cakes */
.vk-tile[data-vk-filter="category"][data-vk-value="drinks"]::before{ content: "🥤"; }

/* Keeps icon + label nicely centered */
.vk-tile[data-vk-filter="category"]{
  flex-direction: row;
}

/* ================================
   VK SHOP: description tidy
   ================================ */

.vk-card__desc{
  margin-top: 2px;
  text-align: center;
  color: rgba(0,0,0,0.74);
  line-height: 1.35;

  /* clamp to a consistent number of lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* adjust to 2 or 4 if you prefer */
  overflow: hidden;
}

/* ================================
   VK SHOP: Variant buttons (active state must be obvious)
   ================================ */
.vk-card .vk-variantBtn,
.vk-card [data-vk-variant-btn]{
  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;
  color: rgba(0,0,0,0.86);
  box-shadow: none;
}

.vk-card .vk-variantBtn.is-active,
.vk-card [data-vk-variant-btn].is-active,
.vk-card [data-vk-variant-btn][aria-pressed="true"]{
  background: rgba(16, 101, 55, 0.14) !important;
  border-color: rgba(16, 101, 55, 0.55) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
}

.vk-card [data-vk-variant-btn]:focus-visible{
  outline: 3px solid rgba(16, 101, 55, 0.35);
  outline-offset: 2px;
}

/* ================================
   VK Shop: Tile layout (icon under label)
   ================================ */
.vk-tile{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  min-height: 64px;
}
.vk-tile__label{ display:block; }
.vk-tile__icon{ display:block; font-size:18px; line-height:1; }

/* ================================
   VK Filter sidebar: stable scroll + actions always visible
   (single source of truth — no duplicates)
   ================================ */
.vk-filterCard{
  display: flex;
  flex-direction: column;
}

/* Desktop: constrain to viewport, scroll only the inner body */
@media (min-width: 991px){
  .vk-filterCard{
    max-height: calc(100vh - 140px);
    overflow: hidden;
  }

  /* Support either markup name */
  .vk-filterCard__body,
  .vk-filterCard__scroll{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 12px;
  }

  .vk-filterCard__actions{
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 12px;
    padding-bottom: 6px;
    z-index: 2;
  }
}

/* Mobile: let it flow normally */
@media (max-width: 990px){
  .vk-filterCard{
    max-height: none;
    overflow: visible;
  }
  .vk-filterCard__body,
  .vk-filterCard__scroll{
    overflow: visible;
  }
}

/* Sticky breaks if parents clip overflow */
.vk-shop,
.vk-shop__grid{
  overflow: visible !important;
}

@media (min-width: 991px){
  .vk-shop__grid{
    grid-template-columns: 360px 1fr !important;
  }
}

/* ================================
   VK Header: account + basket controls (clean retail)
   ================================ */

/* Stop theme bubble duplication inside our component */
.vk-header-cart .cart-bubble{ display:none !important; }

.vk-header-cart,
.vk-header-account{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;

  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;

  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}

.vk-header-cart:hover,
.vk-header-account:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}

.vk-header-cart:active,
.vk-header-account:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.vk-header-cart__icon,
.vk-header-account__icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.vk-header-cart__icon{
  background: rgba(48,152,66,.10);
}

.vk-header-account__icon{
  background: rgba(0,0,0,.06);
  font-size: 16px;
}

/* Cart count badge */
.vk-header-cart__count{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 6px;

  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;

  background: #e41f2d;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.vk-header-cart__text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.vk-header-cart__total{
  font-size: 14px;
  font-weight: 900;
}

.vk-header-cart__minimum{
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
}


/* =========================
   VK HEADER (Morrisons-style)
   ========================= */

header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Account + Cart pills */
a.vk-header-account,
a.vk-header-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  line-height: 1;
}

/* Make them visually smaller + neater */
a.vk-header-account .vk-header-account__text,
a.vk-header-cart .vk-header-cart__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

a.vk-header-cart .vk-header-cart__total {
  font-size: 14px;
  font-weight: 700;
}

a.vk-header-account .vk-header-account__text,
a.vk-header-cart .vk-header-cart__text {
  font-size: 14px;
  font-weight: 600;
}

/* Hide old “minimum” line completely (we removed it in Liquid, but this makes sure) */
a.vk-header-cart .vk-header-cart__minimum {
  display: none !important;
}

/* Count bubble */
a.vk-header-cart .vk-header-cart__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

a.vk-header-cart .vk-header-cart__count {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: #2f7d32;
  color: #fff;
  border: 2px solid #fff;
}

/* Mobile: keep it minimal */
@media (max-width: 749px){
  .vk-header-cart__minimum{ display:none; }
  .vk-header-account__text{ display:none; }
  .vk-header-cart,
  .vk-header-account{ padding: 6px; }
}

/* Safety: don’t allow page-level horizontal creep */
html, body{
  width: 100%;
  overflow-x: hidden;
}
img, video, iframe, svg{
  max-width: 100%;
  height: auto;
}
iframe{ max-width: 100% !important; }

/* Accessible visually-hidden text */
.vk-srOnly{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* VK Quantity Stepper */
.vk-qty-hidden { display: none !important; }

.vk-qty{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.90);
}

.vk-qty__btn{
  width: 42px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(238, 246, 234, 0.70);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
}

.vk-qty__value{
  min-width: 20px;
  text-align: center;
  font-weight: 900;
}

.vk-qty.is-busy{
  opacity: 0.7;
}

/* ================================
   VK Qty (override base.css button rules)
   Single morphing pill: Add -> - qty +
================================ */

/* Outer wrapper */
.vk-shop .vk-qty { width: 100% !important; }

/* The pill container (this is the ONLY rounded shape) */
.vk-shop .vk-qtyControl{
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid rgba(16, 101, 55, 0.30) !important;
  border-radius: 14px !important;
  background: rgba(16, 101, 55, 0.10) !important;
  min-height: 48px !important;
  overflow: hidden !important; /* critical: prevents inner “white capsule” edges */
  box-shadow: none !important;
}

/* HARD reset for buttons inside qty control (beats base.css .vk-shop button rules) */
.vk-shop .vk-qtyControl button{
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important; /* critical: kills the inner round “white capsule” */
  min-height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font: inherit !important;
  color: inherit !important;
  cursor: pointer !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

/* ADD state = a single full-width button */
.vk-shop .vk-qtyAdd{
  width: 100% !important;
  font-weight: 950 !important;
  color: #0f6b39 !important;
}

/* Stepper state layout */
.vk-shop .vk-qtyStepper{
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

/* +/- buttons */
.vk-shop .vk-qtyBtn{
  min-inline-size: 52px !important;
  height: 48px !important;
  font-weight: 950 !important;
  font-size: 18px !important;
  background: rgba(255,255,255,0.55) !important; /* subtle, not a “second capsule” */
}

/* center count */
.vk-shop .vk-qtyCount{
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 950 !important;
  font-size: 16px !important;
  color: rgba(0,0,0,0.86) !important;
  background: transparent !important;
}

/* Dividers so it reads as one control (no floating segments) */
.vk-shop .vk-qtyBtn[data-vk-qty-minus]{
  border-right: 1px solid rgba(16, 101, 55, 0.18) !important;
}
.vk-shop .vk-qtyBtn[data-vk-qty-plus]{
  border-left: 1px solid rgba(16, 101, 55, 0.18) !important;
}

/* Hover */
.vk-shop .vk-qtyBtn:hover{
  background: rgba(255,255,255,0.75) !important;
}

/* Accessible focus (no ugly white ring) */
.vk-shop .vk-qtyControl button:focus-visible{
  outline: 2px solid rgba(16, 101, 55, 0.55) !important;
  outline-offset: -2px !important;
}

/* Morph rules */
.vk-shop .vk-qtyControl.is-zero .vk-qtyStepper{ display: none !important; }
.vk-shop .vk-qtyControl.is-zero .vk-qtyAdd{ display: inline-flex !important; }

.vk-shop .vk-qtyControl:not(.is-zero) .vk-qtyAdd{ display: none !important; }
.vk-shop .vk-qtyControl:not(.is-zero) .vk-qtyStepper{ display: flex !important; }

/* ===========================================================
   VK Qty (FINAL): single pill that morphs (Morrisons-style)
   - Zero state: full-width Add
   - Non-zero: split into - | count | +
   - Kills theme button chrome (white edges/halo/shadows)
=========================================================== */

.vk-shop .vk-qty{ width: 100%; }

.vk-shop .vk-qtyControl{
  width: 100%;
  display: flex;
  align-items: stretch;
  min-height: 48px;

  border: 2px solid rgba(16, 101, 55, 0.35) !important;
  border-radius: 14px !important;
  background: rgba(16, 101, 55, 0.10) !important;

  overflow: hidden !important;
  box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;
}

/* Hard reset any theme button styling inside the qty control */
.vk-shop .vk-qtyControl button{
  all: unset;
  box-sizing: border-box;
  -webkit-appearance: none !important;
  appearance: none !important;

  font: inherit;
  color: inherit;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  user-select: none;
  touch-action: manipulation;

  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  background: transparent;
}

/* Add state = full-width single button */
.vk-shop .vk-qtyAdd{
  width: 100%;
  min-height: 48px;
  font-weight: 950;
  color: #0f6b39;
}

/* Stepper state = - [count] + */
.vk-shop .vk-qtyStepper{
  width: 100%;
  display: flex;
  align-items: stretch;
}

.vk-shop .vk-qtyBtn{
  min-inline-size: 52px;
  height: 48px;
  font-weight: 950;
  font-size: 18px;
  background: rgba(255,255,255,0.45) !important;
}

.vk-shop .vk-qtyBtn:hover{
  background: rgba(255,255,255,0.70) !important;
}

.vk-shop .vk-qtyCount{
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-weight: 950;
  font-size: 16px;
  color: rgba(0,0,0,0.86);
}

/* Zero/non-zero visibility */
.vk-shop .vk-qtyControl.is-zero .vk-qtyStepper{ display: none !important; }
.vk-shop .vk-qtyControl.is-zero .vk-qtyAdd{ display: inline-flex !important; }

.vk-shop .vk-qtyControl:not(.is-zero) .vk-qtyAdd{ display: none !important; }
.vk-shop .vk-qtyControl:not(.is-zero) .vk-qtyStepper{ display: flex !important; }

/* Kill any theme pseudo-element highlights that can create a white halo */
.vk-shop .vk-qtyControl::before,
.vk-shop .vk-qtyControl::after,
.vk-shop .vk-qtyControl button::before,
.vk-shop .vk-qtyControl button::after{
  content: none !important;
  display: none !important;
}

/* Kill any residual glow from descendants */
.vk-shop .vk-qtyControl,
.vk-shop .vk-qtyControl *{
  box-shadow: none !important;
  filter: none !important;
}

/* Tap highlight (mobile halo) */
.vk-shop .vk-qtyControl,
.vk-shop .vk-qtyControl button{
  -webkit-tap-highlight-color: transparent !important;
}

/* Accessible focus (no glow) */
.vk-shop .vk-qtyControl button:focus-visible{
  outline: 2px solid rgba(16, 101, 55, 0.55) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* ===== VK Qty: kill white halo + make Add text strong ===== */

.vk-shop .vk-qtyControl{
  border: 2px solid rgba(16, 101, 55, 0.55) !important;   /* stronger edge */
  background: rgba(16, 101, 55, 0.14) !important;         /* slightly richer fill */
  box-shadow: none !important;
  outline: none !important;
}

/* The halo is usually the button backgrounds bleeding at the rounded edges */
.vk-shop .vk-qtyBtn,
.vk-shop .vk-qtyAdd{
  background: transparent !important;                      /* removes the white rim */
}

/* Add button: bolder + higher contrast */
.vk-shop .vk-qtyAdd{
  font-weight: 1000 !important;
  color: rgba(0, 0, 0, 0.88) !important;                   /* darker than green text */
  letter-spacing: 0.2px;
}

/* Stepper: keep readable without white panels; add separators instead */
.vk-shop .vk-qtyBtn{
  color: rgba(0, 0, 0, 0.78) !important;
}

.vk-shop .vk-qtyStepper .vk-qtyBtn:first-child{
  border-right: 1px solid rgba(16, 101, 55, 0.25) !important;
}
.vk-shop .vk-qtyStepper .vk-qtyBtn:last-child{
  border-left: 1px solid rgba(16, 101, 55, 0.25) !important;
}

.vk-shop .vk-qtyCount{
  background: transparent !important;
}

/* ===== VK Qty FINAL: remove halo by removing transparency ===== */

.vk-shop .vk-qtyControl{
  /* Replace semi-transparent border with an inset “stroke” */
  border: 0 !important;
  box-shadow: inset 0 0 0 2px rgb(16, 101, 55) !important;

  /* Replace semi-transparent fill with a solid (or near-solid) fill */
  background: rgb(235, 243, 238) !important; /* pale green-grey, no halo */
  border-radius: 14px !important;

  overflow: hidden !important;
}

/* Ensure nothing draws extra layers at the edges */
.vk-shop .vk-qtyControl::before,
.vk-shop .vk-qtyControl::after,
.vk-shop .vk-qtyControl button::before,
.vk-shop .vk-qtyControl button::after{
  content: none !important;
  display: none !important;
}

/* Kill any internal white panels */
.vk-shop .vk-qtyAdd,
.vk-shop .vk-qtyBtn,
.vk-shop .vk-qtyCount{
  background: transparent !important;
  box-shadow: none !important;
}

/* Make “Add” look intentional and bold */
.vk-shop .vk-qtyAdd{
  font-weight: 900 !important;
  color: rgb(16, 101, 55) !important;
}

/* VK Qty: force Add typography */
.vk-shop .vk-qtyControl.is-zero .vk-qtyAdd{
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  color: rgb(16, 101, 55) !important;
}

/* VK Qty: crisp border with no halo */
.vk-shop .vk-qtyControl{
  position: relative !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  /* solid fill to avoid edge glow */
  background: rgb(235, 243, 238) !important;

  border-radius: 14px !important;
  overflow: hidden !important;

  /* helps some browsers render rounded edges cleaner */
  transform: translateZ(0);
}
/* =========================================================
   VK QTY + ADD sizing + alignment (collection cards + PDP)
   Paste at END of base.css
   ========================================================= */

/* ---------- Shared sizing tokens ---------- */
:root{
  --vk-ctrl-h: 44px;      /* overall control height (was ~48-52) */
  --vk-ctrl-r: 12px;      /* radius */
  --vk-ctrl-stroke: 2px;  /* border weight */
}

/* ---------- Collection/grid cards (your VK shop area) ---------- */
.vk-shop [data-vk-qty-control]{
  min-height: var(--vk-ctrl-h) !important;
  height: var(--vk-ctrl-h) !important;
  border-radius: var(--vk-ctrl-r) !important;
}

/* inset stroke on the pill */
.vk-shop [data-vk-qty-control]::after{
  border-radius: var(--vk-ctrl-r) !important;
  box-shadow: inset 0 0 0 var(--vk-ctrl-stroke) rgba(16, 101, 55, 0.60) !important;
}

/* Make the "Add" label feel less oversized */
.vk-shop [data-vk-qty-control] button[data-vk-qty-add],
.vk-shop [data-vk-qty-control] .vk-qtyAdd{
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Tighten the qty number so it doesn't look bulky */
.vk-shop .vk-qtyCount{
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Optional: make +/- feel a touch crisper without growing the control */
.vk-shop [data-vk-qty-control] button{
  padding: 0 10px !important;
}

/* ---------- Product page (PDP) alignment ---------- */
/* If your product page uses a standard Shopify product form layout, this will stabilise it */
.template-product form[action*="/cart/add"]{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Make qty selector and add-to-cart match heights on PDP */
.template-product form[action*="/cart/add"] [data-vk-qty-control]{
  height: var(--vk-ctrl-h) !important;
  min-height: var(--vk-ctrl-h) !important;
  border-radius: var(--vk-ctrl-r) !important;
}

/* Target Shopify add-to-cart button on PDP */
.template-product form[action*="/cart/add"] button[type="submit"],
.template-product form[action*="/cart/add"] .product-form__submit{
  height: var(--vk-ctrl-h) !important;
  min-height: var(--vk-ctrl-h) !important;
  padding: 0 16px !important;
  border-radius: var(--vk-ctrl-r) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* VK card description: show more lines (2–3) */
.vk-shop .vk-card__desc,
.vk-shop .vk-card__description,
.vk-shop .vk-card__body p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important; /* change to 2 if it gets too tall */
  overflow: hidden !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  max-height: none !important;
}

/* Keep VK cards compact even with 3-line descriptions */
.vk-shop .vk-card__body,
.vk-shop .vk-card__content{
  padding-bottom: 10px !important;
}

.vk-shop .vk-card__title{
  margin-bottom: 6px !important;
}

.vk-shop .vk-card__desc,
.vk-shop .vk-card__description{
  margin-bottom: 8px !important;
}

/* Tighten spacing around serves + price block */
.vk-shop .vk-serves,
.vk-shop .vk-priceBlock{
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}
/* Collection cards: let height be content-driven */
main[data-template*="collection.vk-shop-clean"] article.vk-card{
  height: auto !important;
  overflow: visible !important;
}

/* If you need minimum consistency across rows, use min-height instead */
main[data-template*="collection.vk-shop-clean"] article.vk-card{
  min-height: 0 !important;
}

/* VK: clamp Add + qty UI sizing (prevents random “getting bigger”) */
article.vk-card .vk-card__body button,
article.vk-card .vk-card__body .button,
article.vk-card .vk-card__body [type="submit"]{
  font-size: 14px !important;
  line-height: 1.1 !important;
  padding: 10px 14px !important;
  min-height: 40px !important;
  height: auto !important;
}

article.vk-card .vk-card__body input,
article.vk-card .vk-card__body .quantity__input{
  font-size: 14px !important;
  line-height: 1.1 !important;
  min-height: 40px !important;
}
/* =========================
   VK CARD: force actions to bottom + stabilise button sizing
   ========================= */

/* 1) Make the card + body a true vertical layout that can push items down */
article.vk-card{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

article.vk-card .vk-card__body{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* 2) Push the “Add/Qty area” to the bottom.
   We target common Shopify structures (form + product-form + any last block).
   This works even if the exact class differs slightly. */
article.vk-card .vk-card__body form,
article.vk-card .vk-card__body .product-form,
article.vk-card .vk-card__body .product-form__buttons{
  margin-top: auto !important;
}

/* If your qty/add UI is wrapped in a dedicated block, this will push it down too */
article.vk-card .vk-card__body .vk-card__actions,
article.vk-card .vk-card__body .vk-card__cta,
article.vk-card .vk-card__body .vk-card__qty,
article.vk-card .vk-card__body .vk-qty,
article.vk-card .vk-card__body .vk-add{
  margin-top: auto !important;
}

/* 3) Clamp button sizing so it can’t inflate again */
article.vk-card .vk-card__body button,
article.vk-card .vk-card__body .button,
article.vk-card .vk-card__body [type="submit"]{
  font-size: 14px !important;
  line-height: 1.1 !important;
  padding: 10px 14px !important;
  min-height: 40px !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* 4) If your “white pill” qty control is a flex row, stop it expanding vertically */
article.vk-card .vk-card__body .quantity,
article.vk-card .vk-card__body .quantity__button,
article.vk-card .vk-card__body .quantity__input{
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
}

/* =========================
   VK CARD: slightly smaller Add / Qty control
   ========================= */

/* Main “Add” button (when qty = 0) */
article.vk-card .vk-card__body button,
article.vk-card .vk-card__body .button,
article.vk-card .vk-card__body [type="submit"]{
  font-size: 13px !important;
  padding: 8px 12px !important;
  min-height: 26px !important;
  line-height: 1.05 !important;
}

/* The quantity pill (+ / number / -) */
article.vk-card .vk-card__body .quantity,
article.vk-card .vk-card__body .quantity__button,
article.vk-card .vk-card__body .quantity__input{
  height: 26px !important;
  min-height: 26px !important;
}

/* If your qty wrapper has its own class, this prevents it stretching */
article.vk-card .vk-card__body .vk-qty,
article.vk-card .vk-card__body .vk-add{
  min-height: 26px !important;
}

/* ---- VK shop: tighten qty/add control sizing (override base.css 44px) ---- */
/* Put this at the VERY BOTTOM of base.css so it wins the cascade */

.vk-shop .vk-qtyControl,
.vk-shop .vk-qtyStepper {
  height: 36px !important;
  min-height: 36px !important;
}

.vk-shop .vk-qtyBtn,
.vk-shop .vk-qtyAdd,
.vk-shop .vk-qtyCount {
  height: 36px !important;
  min-height: 36px !important;
  line-height: 36px !important;
}

.vk-shop .vk-qtyCount {
  padding: 0 12px !important;
  font-size: 14px !important;
}

.vk-shop .vk-qtyBtn,
.vk-shop .vk-qtyAdd {
  padding: 0 14px !important;
  font-size: 14px !important;
}

/* Keep qty/add control pinned to the bottom of each card */
.vk-shop .vk-card__body {
  display: flex;
  flex-direction: column;
}

.vk-shop .vk-card__qty,
.vk-shop .vk-qty,
.vk-shop .vk-qtyControl {
  margin-top: auto !important;
}

/* Card description: show more, but keep cards tidy */
.vk-shop .vk-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* try 3 or 4 */
  overflow: hidden;
}

/* Sticky filter sidebar – corrected */
.vk-shop .vk-shop__grid {
  align-items: flex-start;
}

.vk-shop .vk-shop__grid aside.vk-filterCard {
  position: sticky;
  top: 120px;

  /* 🔥 critical fixes */
  height: auto;
  max-height: none;
  overflow: visible;

  align-self: flex-start;
  z-index: 5;
}

/* --- Sticky unblockers (parents of the filter card) --- */
.vk-shop,
.vk-shop .vk-shop__grid,
.vk-shop .vk-shop__grid > *,
.shopify-section,
main,
#MainContent {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}

/* Ensure layout doesn't stretch the sticky column */
.vk-shop .vk-shop__grid {
  align-items: flex-start !important;
}

/* Keep the filter card sticky */
@media (min-width: 1100px) {
  .vk-shop .vk-shop__grid aside.vk-filterCard,
  .vk-shop .vk-shop__grid .vk-filterCard {
    position: sticky !important;
    top: 120px !important;
    align-self: flex-start !important;
    z-index: 50;
  }
}
/* Shopify "shopify-section" element can block sticky */
shopify-section,
shopify-section > * {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}

/* FIX: ensure sticky works by restoring document-level scrolling */
html,
body {
  overflow: visible !important;
}

main,
#MainContent,
shopify-section,
.shopify-section {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

@media (min-width: 1100px) {
  .vk-shop__grid {
    align-items: start;
  }

  aside.vk-filterCard {
    position: sticky !important;
    top: 120px !important;
    height: fit-content;
  }
}
/* TEMP: remove minimum order label in header cart */
.vk-header-cart__minimum {
  display: none !important;
}

/* Header cart button – calmer and tighter */
.vk-header-cart,
.vk-header-account {
  padding: 6px 10px;
  gap: 8px;
  border-radius: 10px;
  box-shadow: none;
  border-color: rgba(0,0,0,.08);
}

/* Count badge */
.vk-header-cart__count {
  position: absolute;
  top: -4px;
  right: -4px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  background: #2f7d32;
  color: #fff;

  border-radius: 999px;
  pointer-events: none;
}

/* Make account/cart look like compact controls */
.vk-header-account,
.vk-header-cart {
  font-size: 14px;
  font-weight: 600;
}

.vk-header-account svg,
.vk-header-cart svg {
  width: 18px;
  height: 18px;
}

/* === VK HEADER CART — VISUAL ALIGNMENT ONLY === */

/* Base pill match */
a.vk-header-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;          /* matches Sign in */
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Remove icon spacing without touching DOM */
a.vk-header-cart .vk-header-cart__icon {
  display: none;
}

/* Price */
.vk-header-cart__total {
  font-weight: 700;
}

/* Count badge — quiet, compact */
.vk-header-cart__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: #e6f2ea;        /* subtle green */
  color: #1f6f43;
  font-size: 12px;
  font-weight: 700;
}

/* Do NOT show empty count */
.vk-header-cart__count[hidden] {
  display: none;
}

/* === VK HEADER CART — MAKE COUNT INLINE + PILL MORE "BUTTON" LIKE === */

a.vk-header-cart {
  padding: 10px 14px;               /* bigger */
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08); /* soft lift */
  background: rgba(48,152,66,.10);  /* subtle VK green tint */
  border-color: rgba(48,152,66,.18);
}

/* Make the price look like the main label */
a.vk-header-cart .vk-header-cart__total {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1px;
}

/* CRITICAL: count must behave like normal inline content (not a bubble) */
a.vk-header-cart .vk-header-cart__count {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  margin-left: 8px;
  min-width: 22px;
  height: 22px;

  border-radius: 11px;
  box-shadow: none !important;
}

/* If any existing theme CSS tries to absolutely position the count, kill it */
a.vk-header-cart .vk-header-cart__icon,
a.vk-header-cart .vk-header-cart__icon * {
  position: static;
}
/* VK filter tiles: remove duplicate icons only (safe) */
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile svg + svg,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile img + img,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile .vk-icon + .vk-icon,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile [class*="icon"] + [class*="icon"] {
  display: none !important;
}

/* Also stop any duplicate icons injected via pseudo-elements */
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile::before,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile::after {
  content: none !important;
}

/* VK filter tiles: put icon UNDER the label (like Dietary & allergens) */
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  min-height: 64px;
}

/* Ensure the label sits on its own line and is centered */
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile .vk-tile__label,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile .vk-tile__text,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile span.vk-tile__label,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile span {
  display: block;
  text-align: center;
}

/* Center the icon row and keep it visually “under” */
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile svg,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile img,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile .vk-icon,
div.vk-filterCard__scroll div.vk-tileGrid button.vk-tile [class*="icon"] {
  display: block;
  margin: 0 auto;
}
/* VK header: make Sign in / My Account match the cart pill */
a.vk-header-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* match pill sizing */
  padding: 10px 14px;
  border-radius: 14px;

  /* match cart pill look */
  border: 1px solid rgba(0,0,0,.12);
  background: #eef6f0;            /* light green tint */
  box-shadow: 0 1px 0 rgba(0,0,0,.04);

  /* typography */
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: inherit;

  /* keep it stable */
  white-space: nowrap;
}

/* If you still have the 👤 icon in the markup, this keeps it tidy */
a.vk-header-account .vk-header-account__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

/* Hover (subtle, no layout shift) */
a.vk-header-account:hover {
  filter: brightness(0.98);
}
/* ===== VK Header: make Sign in + Cart pill match (CSS-only, safe) ===== */
a.vk-header-account,
a.vk-header-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* consistent button sizing */
  padding: 8px 14px;
  border-radius: 12px;

  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f7f7f7;
  text-decoration: none;
  color: inherit;

  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* keep them separated (not touching) */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Cart total text */
.vk-header-cart__total {
  font-size: 15px;
  font-weight: 800;
}

/* Cart count badge: attach + look deliberate */
.vk-header-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;

  background: #1f6b3a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* VK HEADER ACTIONS — DISABLED (using snippet/header-actions.liquid instead)
/*

/* =========================================================
  VK HEADER: canonical pill sizing (ACCOUNT + CART)
  Put at VERY BOTTOM of base.css (and remove older VK blocks)
========================================================= */


/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions {
 display: inline-flex;
 align-items: center;
 gap: 10px;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Shared pill box: identical height + padding */
header-actions.vk-header-actions a.vk-header-account,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;


 height: 40px;                 /* forces identical pill height */
 padding: 0 14px;              /* vertical sizing comes from height */
 box-sizing: border-box;


 border-radius: 12px;
 border: 1px solid rgba(0,0,0,.12);
 background: #f7f7f7;


 text-decoration: none;
 color: inherit;
 white-space: nowrap;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Make Sign in match Cart total typography (fixes 14/600 vs 15/800 mismatch) */
header-actions.vk-header-actions a.vk-header-account .vk-header-account__text,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total {
 font-size: 15px !important;
 font-weight: 800 !important;
 line-height: 1 !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Keep numbers stable (prevents “jumping” as totals change) */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total {
 font-variant-numeric: tabular-nums;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Count bubble: fixed size, cannot affect pill height */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__count {
 display: inline-flex;
 align-items: center;
 justify-content: center;


 width: 22px;
 height: 22px;


 border-radius: 999px;
 line-height: 1;


 font-size: 13px;
 font-weight: 800;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


{%- comment -%}
VK Shop Clean Collection Template
- Reserves top space for SEO copy
- Stable product card layout (price pinned above add-to-cart)
- Restores allergen chips on product cards
- Square filter tiles (no pills)
- Adds product counter
- Icons under labels
- Fix: filter sidebar scrolls, buttons always visible (never cut off)
- Morrisons-style qty: ONE control that morphs Add -> (- 1 +)
{%- endcomment -%}


{%- assign per_page = 200 -%}


<style>
.vk-shop {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 56px;
  font-family: inherit;
  color: inherit;
  background: rgba(16, 101, 55, 0.04);
  border-radius: 18px;
}


/* ---- TOP INTRO BOX (centered + stronger typography) ---- */
.vk-shopTopCopy {
  max-width: 1240px;
  margin: 18px auto 14px;
  padding: 0 16px;
}


.vk-shopTopCopy__inner {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
  text-align: center;
}


.vk-shopTopCopy__title {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #000;
}


.vk-shopTopCopy__text {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(0,0,0,0.82);
}
.vk-shopTopCopy__text:last-child { margin-bottom: 0; }


/* Reserved SEO slot at the top (always leaves room) */
.vk-shop__seoSlot {
  min-height: 110px;
  margin: 0 0 18px;
  display: block;
}
.vk-shop__seoSlot .rte { margin: 0; }


.vk-shop__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
}


@media (max-width: 990px) {
  .vk-shop__grid { grid-template-columns: 1fr; }
  .vk-shop { border-radius: 0; background: transparent; }
}


/* Sidebar card */
.vk-filterCard {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  position: sticky;
  top: 120px;
}


@media (max-width: 990px) {
  .vk-filterCard { position: relative; top: auto; }
}


.vk-filterCard__title {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.01em;
  text-align: center;
}


.vk-filterCard__sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(0,0,0,0.72);
  text-align: center;
}


.vk-filterCard__sectionTitle {
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 850;
  text-align: center;
}


/* Square tiles (icon under label) */
.vk-tileGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}


.vk-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px; !important;
  padding: 12px 10px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.15;
  transition: transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease;
  flex-direction: column;
  gap: 6px;
}


.vk-tile:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}


.vk-tile.is-active {
  background: rgba(16, 101, 55, 0.10);
  border-color: rgba(16, 101, 55, 0.45);
}


.vk-tile__label { display: block; }
.vk-tile__icon { display: block; font-size: 18px; line-height: 1; }


/* Sidebar: inner scroll, buttons always visible */
.vk-filterCard{
  display: flex;
  flex-direction: column;
}


@media (min-width: 991px){
  .vk-filterCard{
    max-height: calc(100vh - 140px);
    overflow: hidden;
  }
  .vk-filterCard__scroll{
    overflow: auto;
    overscroll-behavior: contain;
    padding-bottom: 12px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .vk-filterCard__actions{
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 12px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
}

@media (max-width: 990px){
  .vk-filterCard{ max-height: none; overflow: visible; }
  .vk-filterCard__scroll{ overflow: visible; }
  .vk-filterCard__actions{
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }
}

.vk-btnPrimary {
  flex: 1;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  background: #0f6b39;
  color: #fff;
}


.vk-btnGhost {
  min-width: 110px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  background: #fff;
}


/* Products header */
.vk-productsHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
}
.vk-count { color: rgba(0,0,0,0.65); font-size: 14px; }


/* Grid */
.product-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}
@media (min-width: 990px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 989px) and (min-width: 560px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .product-grid { grid-template-columns: 1fr; } }


/* Product card */
.vk-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
}


.vk-card__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  background: rgba(0,0,0,0.03);
}


.vk-card__body {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}


.vk-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}


.vk-card__title a { color: inherit; text-decoration: none; }
.vk-card__title a:hover { text-decoration: underline; }


.vk-card__desc {
  margin: 0;
  font-size: 14px;
  color: rgba(0,0,0,0.74);
  line-height: 1.38;
  min-height: 40px;
  text-align: center;
}


/* Allergen chips */
.vk-chipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}


.vk-chip {
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 7px 9px;
  font-weight: 850;
  font-size: 12px;
  line-height: 1;
  color: rgba(0,0,0,0.82);
  background: #fff;
  white-space: nowrap;
}


/* Bottom actions area (stable) */
.vk-card__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.vk-card__spacer { flex: 1; }


.vk-price {
  font-weight: 950;
  font-size: 14px;
  text-align: center;
}

.vk-serveRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}


.vk-serveLabel {
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,0.70);
  text-align: center;
}


.vk-variantGrid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}


.vk-variantBtn {
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 9px 10px;
  min-width: 56px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  font-weight: 950;
  font-size: 13px;
}


.vk-variantBtn.is-active {
  background: rgba(16, 101, 55, 0.10);
  border-color: rgba(16, 101, 55, 0.45);
}
</style>


/* VK HEADER: ensure visible separation between Sign in + Cart */
header-actions.vk-header-actions,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions .vk-header-actions__inner {
 display: flex !important;
 align-items: center !important;
 gap: 12px !important; /* tweak 10–16px as desired */
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Kill any theme margins that could make them touch */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions .vk-header-actions__inner > a {
 margin: 0 !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* VK: Collection product-card images must be square (override the hard 180px height) */
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid img,
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid img.vk-card__img {
 height: auto !important;          /* kill the hard crop */
 aspect-ratio: 1 / 1 !important;   /* make it a true square */
 width: 100% !important;
 object-fit: contain !important;     /* 500x500 will now display correctly */
 display: block !important;
}
/* VK: Make product cards wider on vk-shop-clean collection grid */
main[data-template*="collection.vk-shop-clean"] ul.product-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
 column-gap: 24px !important;
 row-gap: 28px !important;
}


/* Tablet */
@media (max-width: 989px) {
 main[data-template*="collection.vk-shop-clean"] ul.product-grid {
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
 }
}


/* Mobile */
@media (max-width: 749px) {
 main[data-template*="collection.vk-shop-clean"] ul.product-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   column-gap: 14px !important;
   row-gap: 18px !important;
 }
}


/* VK: allow 3 lines for the card intro/summary text */
main[data-template*="collection.vk-shop-clean"] .vk-card .vk-card__desc,
main[data-template*="collection.vk-shop-clean"] .vk-card .card__information .card__heading + * {
 display: -webkit-box !important;
 -webkit-box-orient: vertical !important;
 -webkit-line-clamp: 3 !important;
 overflow: hidden !important;
}


/* VK: let tags wrap to multiple rows */
main[data-template*="collection.vk-shop-clean"] .vk-card .vk-tags,
main[data-template*="collection.vk-shop-clean"] .vk-card .vk-card__tags {
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 8px 10px !important;
}


/* =====================================================
  ALLERGEN MATRIX – HARD CONTAINMENT + STICKY FIX
  ===================================================== */


/* 1. Create a real scroll container for the table */
.page-allergen-matrix .vk-table {
 display: block;
 max-width: 100%;
 overflow-x: auto;
 overflow-y: auto;
 max-height: calc(100vh - 220px); /* keeps it below header */
 position: relative;
}


/* 2. Force THEAD to stick *inside the table*, not the viewport */
.page-allergen-matrix .vk-table thead th {
 position: sticky;
 top: 0; /* relative to table scroll container */
 z-index: 50;
 background: #fff;
}


/* 3. Keep sticky columns above body cells but below header */
.page-allergen-matrix .vk-sticky-col2 {
 position: sticky;
 left: 52px;
 z-index: 40;
 background: #fff;
}


/* 4. Safety: table must never overlap site header */
.page-allergen-matrix header,
.page-allergen-matrix .shopify-section-header {
 position: sticky;
 top: 0;
 z-index: 1000;
}


/* =====================================================
  ALLERGEN MATRIX – STICKY HEADER + STICKY LEFT COLUMNS
  Uses a WRAPPER scroll container (reliable)
  ===================================================== */


.page-allergen-matrix .vk-table-wrap{
 position: relative;
 overflow: auto;
 max-width: 100%;
 max-height: calc(100vh - 240px); /* adjust 220–300 if needed */
 border-radius: 12px;
 background: #fff;
}


/* Keep table behaving like a table */
.page-allergen-matrix .vk-table{
 width: max-content; /* allows horizontal scroll naturally */
 min-width: 100%;
 border-collapse: separate; /* sticky behaves better than collapse */
 border-spacing: 0;
}


/* Sticky header row */
.page-allergen-matrix .vk-table thead th{
 position: sticky;
 top: 0;
 z-index: 60;
 background: #fff;
}


/* Sticky first checkbox column (if you have one) */
.page-allergen-matrix .vk-table .vk-sticky-col1{
 position: sticky;
 left: 0;
 z-index: 70; /* above header cells when intersecting */
 background: #fff;
}


/* Sticky second column (product name) */
.page-allergen-matrix .vk-table .vk-sticky-col2{
 position: sticky;
 left: 52px; /* keep your existing offset */
 z-index: 65;
 background: #fff;
}


/* When sticky header + sticky columns intersect, keep it clean */
.page-allergen-matrix .vk-table thead .vk-sticky-col1,
.page-allergen-matrix .vk-table thead .vk-sticky-col2{
 z-index: 80;
}


/* Optional: subtle separator so sticky cols don’t look “merged” */
.page-allergen-matrix .vk-table .vk-sticky-col2{
 box-shadow: 6px 0 0 rgba(0,0,0,0.03);
}


/* ================================
  VK BLOG: STOP TAG BAR STICKY (fast fix)
  Scope: Blog index + article templates
  ================================ */


/* Dawn-style template hooks (covers most themes) */
body.template-blog .vk-tags,
body.template-blog .vk-tagbar,
body.template-blog .vk-category-bar,
body.template-blog .blog-tags,
body.template-blog .blog__tags,
body.template-blog .blog-nav,
body.template-blog .blog-categories,
body.template-article .vk-tags,
body.template-article .vk-tagbar,
body.template-article .vk-category-bar,
body.template-article .blog-tags,
body.template-article .blog__tags,
body.template-article .blog-nav,
body.template-article .blog-categories,
body[class*="template-blog"] .vk-tags,
body[class*="template-blog"] .vk-tagbar,
body[class*="template-blog"] .vk-category-bar,
body[class*="template-blog"] .blog-tags,
body[class*="template-blog"] .blog__tags,
body[class*="template-blog"] .blog-nav,
body[class*="template-blog"] .blog-categories {
 position: static !important;
 top: auto !important;
 z-index: auto !important;
}


/* VK BLOG: Sticky topics bar (Horizon-safe) */
nav.vk-blog-topics{
 position: sticky !important;


 /* Use header-group height if available; never allow it to stick too high */
 top: max(120px, calc(var(--header-group-height, 0px) + 8px)) !important;


 z-index: 90;
 background: rgb(var(--color-background-rgb));
 border-bottom: 1px solid rgba(0,0,0,0.10);
 padding-top: 8px;
 padding-bottom: 8px;
}
/* ==========================
  VK BLOG TOPICS: hard fixed (no sticky)
  ========================== */


/* Only on blog pages */
body.template-blog nav.vk-blog-topics,
body.template-article nav.vk-blog-topics{
 position: fixed !important;
 left: 0;
 right: 0;


 /* lock it under the header */
 top: 120px !important;


 z-index: 9999 !important;


 background: rgb(var(--color-background-rgb));
 border-bottom: 1px solid rgba(0,0,0,0.10);
}


/* prevent content jump under the fixed bar */
body.template-blog .shopify-section:first-of-type,
body.template-article .shopify-section:first-of-type{
 padding-top: 70px;
}


nav.vk-blog-topics{
 position: fixed !important;
 top: calc(var(--header-group-height, 0px) + 8px) !important;
 left: 0;
 right: 0;
 z-index: 9999;
 transform: none !important;
}


/* Blog topics: disable sticky/fixed to avoid Horizon header conflicts */
nav.vk-blog-topics {
 position: static !important;
 top: auto !important;
 left: auto !important;
 right: auto !important;
 z-index: auto !important;
 transform: none !important;
}
/* =====================================================
  VK BLOG + ARTICLE (SAFE SCOPE)
  Only applies when the main content contains blog/article components
  ===================================================== */


/* Blog listing page */
body:has(#MainContent .blog-posts) {
 background: rgb(238 246 234) !important;
}


body:has(#MainContent .blog-posts) #MainContent {
 padding-top: 28px !important;
 padding-bottom: 64px !important;
 background: transparent !important;
}


/* Article page */
body:has(#MainContent .article-template),
body:has(#MainContent .main-article) {
 background: rgb(238 246 234) !important;
}


body:has(#MainContent .article-template) #MainContent,
body:has(#MainContent .main-article) #MainContent {
 padding-top: 28px !important;
 padding-bottom: 64px !important;
 background: transparent !important;
}


/* Remove double-box artifacts only inside blog/article templates */
body:has(#MainContent .blog-posts) #MainContent .page-width,
body:has(#MainContent .article-template) #MainContent .page-width,
body:has(#MainContent .main-article) #MainContent .page-width {
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 outline: none !important;
}


/* Equal-height cards (blog listing only) */
body:has(#MainContent .blog-posts) .blog-posts .grid__item { display: flex !important; }
body:has(#MainContent .blog-posts) .blog-posts .card-wrapper { display: flex !important; flex: 1 1 auto !important; height: 100% !important; }
body:has(#MainContent .blog-posts) .blog-posts .card { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; height: 100% !important; }
body:has(#MainContent .blog-posts) .blog-posts .card__content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
body:has(#MainContent .blog-posts) .blog-posts .card__information { flex: 1 1 auto !important; }
body:has(#MainContent .blog-posts) .blog-posts .card__media img { object-fit: cover !important; }


/* =====================================================
  BLOG INDEX: equal-height cards + consistent media
  ===================================================== */


/* Make each grid item stretch its card */
body:has(#MainContent .blog-posts) .blog-posts .grid__item{
 display: flex !important;
}


/* Ensure the wrapper/card can stretch full height */
body:has(#MainContent .blog-posts) .blog-posts .card-wrapper,
body:has(#MainContent .blog-posts) .blog-posts .card{
 display: flex !important;
 flex-direction: column !important;
 width: 100% !important;
 height: 100% !important;
}


/* Make the content area fill the remaining height */
body:has(#MainContent .blog-posts) .blog-posts .card__content{
 display: flex !important;
 flex-direction: column !important;
 flex: 1 1 auto !important;
}


/* Let the text block expand so the "Read more" area aligns */
body:has(#MainContent .blog-posts) .blog-posts .card__information{
 flex: 1 1 auto !important;
}


/* Prevent odd image sizing */
body:has(#MainContent .blog-posts) .blog-posts .card__media img{
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
}
/* =====================================================
  BLOG INDEX: typography normalisation
  ===================================================== */


body:has(#MainContent .blog-posts) .blog-posts{
 font-size: 1rem !important;
 line-height: 1.5 !important;
}


body:has(#MainContent .blog-posts) .blog-posts .card__heading,
body:has(#MainContent .blog-posts) .blog-posts .card__heading a{
 font-size: 1.35rem !important;   /* adjust if you want bigger/smaller */
 line-height: 1.2 !important;
}


body:has(#MainContent .blog-posts) .blog-posts .article-card__excerpt,
body:has(#MainContent .blog-posts) .blog-posts .card__information{
 font-size: 1rem !important;
 line-height: 1.5 !important;
}


/* =====================================================
  ARTICLE PAGE: robust targeting (fix white background)
  ===================================================== */


/* Background wash on article pages */
body:has(main#MainContent article),
body:has(#MainContent .article),
body:has(#MainContent [class*="article"]){
 background: rgb(238 246 234) !important;
}


/* Give the content breathing space */
body:has(main#MainContent article) #MainContent,
body:has(#MainContent .article) #MainContent,
body:has(#MainContent [class*="article"]) #MainContent{
 padding-top: 28px !important;
 padding-bottom: 64px !important;
 background: transparent !important;
}
/* Article panel styling */
body:has(main#MainContent article) main#MainContent article{
 background: rgba(255,255,255,0.55) !important;
 border: 1px solid rgba(48, 152, 66, 0.14) !important;
 border-radius: 18px !important;
 padding: 28px !important;
}

/* Recommendation cards: undo the heavy article styling above */
product-recommendations article,
product-recommendations article.vk-card,
product-recommendations article.vk-card.vk-card--reco {
  padding: 12px !important;
  background: linear-gradient(135deg, rgba(217,230,207,0.25) 0%, rgba(255,255,255,0.45) 100%) !important;
  border: 1px solid rgba(16,24,40,0.1) !important;
  border-radius: 16px !important;
}


/* =====================================================
  VK CART POLISH (scoped to cart only)
  Goal: stronger hierarchy, cleaner panels, clear CTA
  ===================================================== */


body.template-cart,
body.template-cart main#MainContent {
 background: #edf4ea; /* soft VK green wash */
}


/* Page width + breathing room */
body.template-cart main#MainContent {
 padding-top: 28px;
 padding-bottom: 64px;
}


/* Constrain cart width a bit so it doesn't feel empty */
body.template-cart .page-width {
 max-width: 1180px;
}


/* Two-column layout: reduce "floaty" feel */
body.template-cart cart-items,
body.template-cart .cart-items,
body.template-cart .cart__items,
body.template-cart .cart__footer,
body.template-cart .cart__blocks,
body.template-cart .cart__summary {
 border: none !important;
 box-shadow: none !important;
}


/* Give both sides a clean panel look */
body.template-cart .cart__items,
body.template-cart .cart__footer,
body.template-cart .cart__blocks,
body.template-cart .cart__summary,
body.template-cart .cart__warnings,
body.template-cart .cart__note {
 background: #f7fbf5;
 border: 1px solid rgba(48, 152, 66, 0.14);
 border-radius: 18px;
 padding: 18px;
}


/* Add spacing between left and right sections */
body.template-cart .cart__items,
body.template-cart .cart__blocks,
body.template-cart .cart__summary {
 margin-bottom: 16px;
}


/* Line items: tighten and align */
body.template-cart .cart-item {
 padding: 14px 0;
 border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.template-cart .cart-item:last-child {
 border-bottom: none;
}


/* Make thumbnails consistent */
body.template-cart .cart-item__image,
body.template-cart .cart-item__media img {
 width: 86px !important;
 height: 86px !important;
 object-fit: cover !important;
 border-radius: 12px;
}


/* Item title more readable */
body.template-cart .cart-item__name,
body.template-cart .cart-item__name a {
 font-weight: 650;
 line-height: 1.25;
}


/* Quantity controls: slightly larger tap targets */
body.template-cart quantity-input,
body.template-cart .quantity {
 transform: scale(1.05);
 transform-origin: left center;
}
body.template-cart .quantity__button {
 min-width: 40px;
 min-height: 40px;
}


/* Right column: make Checkout the dominant action */
body.template-cart .cart__ctas .button,
body.template-cart button[name="checkout"],
body.template-cart #checkout {
 width: 100%;
 min-height: 52px;
 border-radius: 14px;
 font-weight: 700;
 font-size: 1.05rem;
}


/* If theme uses a "secondary" button style, force it to read primary */
body.template-cart button[name="checkout"] {
 background: rgba(48, 152, 66, 0.90) !important;
 color: #fff !important;
 border: 1px solid rgba(48, 152, 66, 0.90) !important;
}
body.template-cart button[name="checkout"]:hover {
 background: rgba(48, 152, 66, 1) !important;
}


/* Make Discount + postcode areas feel less dominant vs Checkout */
body.template-cart .cart__dynamic-checkout-buttons,
body.template-cart .cart__note,
body.template-cart .cart__discount,
body.template-cart .cart__shipping {
 margin-top: 10px;
 opacity: 0.95;
}


/* Reduce excessive whitespace above the cart content if present */
body.template-cart .cart__warnings,
body.template-cart .cart__empty-text {
 margin-top: 0 !important;
}


/* =========================================================
  VK HEADER — FINAL ALIGNMENT (Sign in + Cart)
  Canonical, authoritative, last-in-file
  ========================================================= */


/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions {
 display: inline-flex;
 align-items: center;
 gap: 8px; /* visual breathing room */
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Shared pill geometry */
header-actions.vk-header-actions a.vk-header-account,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 40px;
 padding: 8px 14px;
 border-radius: 12px;
 box-sizing: border-box;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Typography alignment: Sign in == £199.00 */
header-actions.vk-header-actions a.vk-header-account .vk-header-account__text,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total {
 font-size: 15px !important;
 font-weight: 700 !important;
 line-height: 1;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Prevent numeric jitter as totals change */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total {
 font-variant-numeric: tabular-nums;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Count behaves as inline text, never affects height */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 margin-left: 6px;
 font-size: 11px;
 border-radius: 9px;
 position: static !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Safety: nothing is allowed to absolutely-position inside pills */
header-actions.vk-header-actions a.vk-header-cart *,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-account * {
 position: static;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */
/* =========================================================
VK HEADER — HARD ALIGNMENT FIX (ACCOUNT + CART)
Put at absolute bottom of base.css
========================================================= */


/* Cover both possible wrappers: <header-actions> element OR .header-actions class */
header-actions.vk-header-actions,
.header-actions.vk-header-actions,
header-actions.vk-header-actions .vk-header-actions__inner,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
.header-actions.vk-header-actions .vk-header-actions__inner {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Force identical pill box sizing */
header-actions.vk-header-actions a.vk-header-account,
header-actions.vk-header-actions a.vk-header-cart,
.header-actions.vk-header-actions a.vk-header-account,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
.header-actions.vk-header-actions a.vk-header-cart {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;


height: 40px !important;
min-height: 40px !important;


padding: 8px 14px !important;
box-sizing: border-box !important;


line-height: 1 !important; /* prevents anchor line-height from stretching */
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Make the actual text align (this is where mismatch often survives) */
header-actions.vk-header-actions a.vk-header-account .vk-header-account__text,
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total,
.header-actions.vk-header-actions a.vk-header-account .vk-header-account__text,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
.header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* Count badge must not affect height */
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__count,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
.header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;


height: 18px !important;
min-height: 18px !important;
line-height: 1 !important;


position: static !important;
margin-left: 6px !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* If the theme injects an icon/spacer into account/cart, stop it changing pill height */
header-actions.vk-header-actions a.vk-header-account svg,
header-actions.vk-header-actions a.vk-header-cart svg,
.header-actions.vk-header-actions a.vk-header-account svg,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
.header-actions.vk-header-actions a.vk-header-cart svg {
height: 18px !important;
width: 18px !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* === VK HEADER — FALLBACK: align pills even if wrapper class differs === */
/* Scoped to header area to avoid affecting other account/cart links */
#header-group a.vk-header-account,
#header-group a.vk-header-cart,
.shopify-section-header a.vk-header-account,
.shopify-section-header a.vk-header-cart {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;


 height: 40px !important;
 min-height: 40px !important;
 padding: 8px 14px !important;


 box-sizing: border-box !important;
 line-height: 1 !important;
}


/* Force text baseline consistency */
#header-group a.vk-header-account .vk-header-account__text,
#header-group a.vk-header-cart .vk-header-cart__total,
.shopify-section-header a.vk-header-account .vk-header-account__text,
.shopify-section-header a.vk-header-cart .vk-header-cart__total {
 font-size: 15px !important;
 font-weight: 700 !important;
 line-height: 1 !important;
}


/* === VK HEADER — FINAL TIDY (use with fallback selectors) === */


/* 1) Hard-normalise BOTH pills: identical height + typography + padding */
#header-group a.vk-header-account,
#header-group a.vk-header-cart,
.shopify-section-header a.vk-header-account,
.shopify-section-header a.vk-header-cart {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;


 height: 40px !important;
 min-height: 40px !important;
 padding: 8px 14px !important;


 box-sizing: border-box !important;
 line-height: 1 !important;


 /* makes pills look consistently “button-like” */
 border-radius: 12px !important;
}


/* 2) Force text to be identical (this usually fixes the “Sign in looks bigger” effect) */
#header-group a.vk-header-account .vk-header-account__text,
#header-group a.vk-header-cart .vk-header-cart__total,
.shopify-section-header a.vk-header-account .vk-header-account__text,
.shopify-section-header a.vk-header-cart .vk-header-cart__total {
 font-size: 15px !important;
 font-weight: 700 !important;
 line-height: 1 !important;
 margin: 0 !important;
}


/* 3) Ensure a clean gap between the two pills (even if wrapper gap is ignored) */
#header-group a.vk-header-account,
.shopify-section-header a.vk-header-account {
 margin-right: 8px !important;
}


/* 4) Micro-adjust: pull Sign in DOWN slightly to match the cart pill’s optical baseline */
#header-group a.vk-header-account,
.shopify-section-header a.vk-header-account {
 position: relative !important;
 top: 2px !important; /* change to 2px if still slightly high */
}


/* Optional: make Sign in pill visually match cart pill */
#header-group a.vk-header-account,
.shopify-section-header a.vk-header-account {
 background: rgba(48,152,66,.10) !important;
}


/* Optional: make Sign in pill visually match cart pill */
#header-group a.vk-header-account,
.shopify-section-header a.vk-header-account {
 background: rgba(48,152,66,.10) !important;
}
#header-group .vk-header-actions__inner,
.shopify-section-header .vk-header-actions__inner {
 align-items: center !important;
}


a.vk-header-account .vk-header-account__text,
a.vk-header-cart .vk-header-cart__total {
 line-height: 1 !important;
 margin: 0 !important;
 padding: 0 !important;
}


/* VK: Mobile header de-clutter to prevent overlap */
@media screen and (max-width: 749px) {
 /* Hide text labels that cause wrapping/overlap */
 .vk-account-text {
   display: none !important;
 }


 .vk-cart-total {
   display: none !important;
 }


 /* Make sure the logo doesn't blow out the row */
 .header__heading-logo,
 .header__heading-link img,
 .header__heading-logo-wrapper img {
   max-width: 110px;
   height: auto;
 }


 /* Ensure icons don't compress into each other */
 .header__icons,
 .header__icon {
   gap: 8px;
 }


 /* If your theme uses a header row container, keep it flexible */
 .header,
 .header__inner,
 .header-wrapper,
 .header__inline-menu {
   flex-wrap: wrap;
 }
}


/* =========================================================
  Shopify Theme Editor: Mobile preview override
  (Does NOT affect real desktop or real phones)
  ========================================================= */


[class*="Online-Store-UI-Preview--modeMobile"] header-actions.vk-header-actions .vk-header-account__text,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
[class*="Online-Store-UI-Preview--modeMobile"] header-actions.vk-header-actions .vk-header-cart__total{
 display: none !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


[class*="Online-Store-UI-Preview--modeMobile"] header-actions.vk-header-actions .vk-header-account__icon,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
[class*="Online-Store-UI-Preview--modeMobile"] header-actions.vk-header-actions .vk-header-cart__icon{
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


[class*="Online-Store-UI-Preview--modeMobile"] header-actions.vk-header-actions a.vk-header-account,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
[class*="Online-Store-UI-Preview--modeMobile"] header-actions.vk-header-actions a.vk-header-cart{
 width: 40px !important;
 min-width: 40px !important;
 height: 40px !important;
 padding: 0 !important;
 background: transparent !important;
 border: 0 !important;
 border-radius: 10px !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* =========================================================
  VK HEADER — MOBILE ICONS ONLY + HIDE THEME CART BUBBLE
  Paste as the LAST block in assets/base.css
  ========================================================= */


@media screen and (max-width: 749px){


 /* --- A) Force VK mobile icon row to be visible --- */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions{
   display: inline-flex !important;
   align-items: center !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-actions__inner{
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* Hide VK desktop pills on mobile */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-actions__desktop{
   display: none !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* Show VK mobile icons on mobile */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-actions__mobile{
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* Style VK icon pills */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions a.vk-header-icon{
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;


   width: 34px !important;
   height: 34px !important;
   padding: 0 !important;


   border-radius: 10px !important;
   border: 1px solid rgba(0,0,0,.12) !important;
   background: #f7f7f7 !important;


   position: relative !important;
   text-decoration: none !important;
   color: inherit !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-icon__svg{
   width: 16px !important;
   height: 16px !important;
   display: block !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


*/


 /* VK cart badge (only the VK one) */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-cart__count--mobile{
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;


   position: absolute !important;
   top: -5px !important;
   right: -5px !important;


   width: 18px !important;
   height: 18px !important;


   font-size: 11px !important;
   line-height: 1 !important;
   border-radius: 999px !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* --- B) Hide THE THEME’S default cart icon + bubble in the header --- */
 /* This is the “old green number on the right” you keep seeing */
 #header-group .header__icons a[href*="/cart"]:not(.vk-header-icon),
 .shopify-section-header .header__icons a[href*="/cart"]:not(.vk-header-icon),
 #header-group a.header__icon--cart:not(.vk-header-icon),
 .shopify-section-header a.header__icon--cart:not(.vk-header-icon){
   display: none !important;
 }


 /* Hide theme cart bubbles in header area only */
 #header-group .cart-count-bubble,
 .shopify-section-header .cart-count-bubble,
 #header-group [class*="cart-count"],
 .shopify-section-header [class*="cart-count"],
 #header-group [class*="count-bubble"],
 .shopify-section-header [class*="count-bubble"]{
   display: none !important;
   visibility: hidden !important;
   opacity: 0 !important;
 }
}


/* =========================================================
  VK — MOBILE HEADER ICON PILLS (THEME ICONS)
  Works in Shopify editor mobile preview (scaled) AND real mobile
  Goal:
  - Make account + cart small pill icons side-by-side
  - Remove / tame the big green count bubble on the far right
  ========================================================= */


/* Applies on real mobile widths */
@media screen and (max-width: 749px){
 #header-group .header__icons,
 .shopify-section-header .header__icons{
   display: flex !important;
   align-items: center !important;
   gap: 8px !important;
 }


 /* Make the actual icon links into small “pills” */
 #header-group .header__icon,
 .shopify-section-header .header__icon{
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;


   width: 34px !important;
   height: 34px !important;
   padding: 0 !important;


   border-radius: 10px !important;
   border: 1px solid rgba(0,0,0,.12) !important;
   background: #f7f7f7 !important;


   position: relative !important;
 }


 /* Keep the SVG tidy inside the pill */
 #header-group .header__icon svg,
 .shopify-section-header .header__icon svg{
   width: 16px !important;
   height: 16px !important;
   display: block !important;
 }


 /* OPTION A (recommended tonight): hide the “old” far-right bubble completely */
 #header-group .cart-count-bubble,
 .shopify-section-header .cart-count-bubble{
   display: none !important;
 }
}


/* Applies inside Shopify theme editor “mobile preview” even when iframe width > 749px */
[class*="Online-Store-UI-Preview--modeMobile"] #header-group .header__icons,
[class*="Online-Store-UI-Preview--modeMobile"] .shopify-section-header .header__icons{
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
}


[class*="Online-Store-UI-Preview--modeMobile"] #header-group .header__icon,
[class*="Online-Store-UI-Preview--modeMobile"] .shopify-section-header .header__icon{
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;


 width: 34px !important;
 height: 34px !important;
 padding: 0 !important;


 border-radius: 10px !important;
 border: 1px solid rgba(0,0,0,.12) !important;
 background: #f7f7f7 !important;


 position: relative !important;
}


[class*="Online-Store-UI-Preview--modeMobile"] #header-group .header__icon svg,
[class*="Online-Store-UI-Preview--modeMobile"] .shopify-section-header .header__icon svg{
 width: 16px !important;
 height: 16px !important;
 display: block !important;
}


/* Hide the far-right bubble in Shopify editor mobile preview */
[class*="Online-Store-UI-Preview--modeMobile"] #header-group .cart-count-bubble,
[class*="Online-Store-UI-Preview--modeMobile"] .shopify-section-header .cart-count-bubble{
 display: none !important;


/* =========================================================
  VK MOBILE HEADER ICONS (NO <header-actions> WRAPPER NEEDED)
  Converts existing:
    a.vk-header-account + a.vk-header-cart
  into small icon pills on mobile.
  Also hides the theme’s default cart bubble/icon in the header.
  ========================================================= */


@media screen and (max-width: 749px){


 /* --- 1) Hide THEME default cart icon/bubble in header (the stray green number) --- */
 #header-group .header__icon--cart,
 .shopify-section-header .header__icon--cart,
 #header-group .cart-count-bubble,
 .shopify-section-header .cart-count-bubble,
 #header-group [class*="count-bubble"],
 .shopify-section-header [class*="count-bubble"],
 #header-group [data-cart-count],
 .shopify-section-header [data-cart-count]{
   display: none !important;
   visibility: hidden !important;
   opacity: 0 !important;
 }


 /* --- 2) Make your existing VK account/cart links into icon buttons --- */
 #header-group a.vk-header-account,
 #header-group a.vk-header-cart,
 .shopify-section-header a.vk-header-account,
 .shopify-section-header a.vk-header-cart{
   width: 34px !important;
   height: 34px !important;
   min-width: 34px !important;
   min-height: 34px !important;


   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;


   padding: 0 !important;
   border-radius: 10px !important;


   background: #f7f7f7 !important;
   border: 1px solid rgba(0,0,0,.12) !important;


   position: relative !important;
   text-decoration: none !important;
   color: inherit !important;


   /* kills text layout without needing to delete spans */
   font-size: 0 !important;
   line-height: 0 !important;
 }


 /* Hide ANY text/totals inside the pills on mobile */
 #header-group a.vk-header-account span,
 #header-group a.vk-header-cart span,
 .shopify-section-header a.vk-header-account span,
 .shopify-section-header a.vk-header-cart span{
   display: none !important;
 }


 /* --- 3) Draw the icons via CSS (no HTML required) --- */
 #header-group a.vk-header-account::before,
 .shopify-section-header a.vk-header-account::before{
   content: "" !important;
   width: 16px !important;
   height: 16px !important;
   display: block !important;


   background: currentColor !important;
   -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2012a4.5%204.5%200%201%200-4.5-4.5A4.51%204.51%200%200%200%2012%2012Zm0%202c-4.42%200-8%202.24-8%205v1h16v-1C20%2016.24%2016.42%2014%2012%2014Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
           mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2012a4.5%204.5%200%201%200-4.5-4.5A4.51%204.51%200%200%200%2012%2012Zm0%202c-4.42%200-8%202.24-8%205v1h16v-1C20%2016.24%2016.42%2014%2012%2014Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
 }


 #header-group a.vk-header-cart::before,
 .shopify-section-header a.vk-header-cart::before{
   content: "" !important;
   width: 16px !important;
   height: 16px !important;
   display: block !important;


   background: currentColor !important;
   -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%2018a2%202%200%201%200%202%202a2%202%200%200%200-2-2Zm10%200a2%202%200%201%200%202%202a2%202%200%200%200-2-2ZM6.2%206l.4%202h12.9a1%201%200%200%201%201%20.76l-1.2%205A2%202%200%200%201%2017.35%2015H8.1a2%202%200%200%201-1.96-1.61L4.3%204H2V2h3a1%201%200%200%201%20.98%20.8L6.2%206Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
           mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%2018a2%202%200%201%200%202%202a2%202%200%200%200-2-2Zm10%200a2%202%200%201%200%202%202a2%202%200%200%200-2-2ZM6.2%206l.4%202h12.9a1%201%200%200%201%201%20.76l-1.2%205A2%202%200%200%201%2017.35%2015H8.1a2%202%200%200%201-1.96-1.61L4.3%204H2V2h3a1%201%200%200%201%20.98%20.8L6.2%206Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
 }


 /* --- 4) If your cart count exists, show it as a badge on the cart icon --- */
 #header-group a.vk-header-cart .vk-header-cart__count,
 .shopify-section-header a.vk-header-cart .vk-header-cart__count{
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;


   position: absolute !important;
   top: -5px !important;
   right: -5px !important;


   width: 18px !important;
   height: 18px !important;
   border-radius: 999px !important;


   font-size: 11px !important;
   font-weight: 800 !important;
   line-height: 1 !important;
 }
}
/* =========================================================
  VK BLOG CARDS — UNIFORM HEIGHT + IMAGE RATIO (HORIZON)
  Targets:
  .blog-post-item.vk-blog-card
  .blog-post-card
  .blog-post-card__image-container
  .blog-post-card__image
  .blog-post-card__content
  ========================================================= */


:root{
 --vk-blog-card-img-h: 220px;   /* change once here if you want bigger/smaller */
 --vk-blog-title-lines: 2;
 --vk-blog-excerpt-lines: 3;
}


.vk-blog-card .blog-post-card{
 height: 100% !important;
 display: flex !important;
 flex-direction: column !important;
 overflow: hidden !important; /* keeps rounded corners clean */
}


/* Make the image area deterministic */
.vk-blog-card .blog-post-card__image-container{
 width: 100% !important;
 height: var(--vk-blog-card-img-h) !important;
 overflow: hidden !important;
 display: block !important;
}


/* Ensure the image always fills the fixed area */
.vk-blog-card img.blog-post-card__image{
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 object-position: center center !important;
 display: block !important;
}


/* If Horizon sometimes applies a “large” modifier, neutralise it */
.vk-blog-card img.blog-post-card__image--large{
 height: 100% !important;
}


/* Content becomes a flexible column so bottoms align */
.vk-blog-card .blog-post-card__content{
 flex: 1 1 auto !important;
 display: flex !important;
 flex-direction: column !important;
}


/* Title clamp (works even if the title is an <a> or heading) */
.vk-blog-card .blog-post-card__content :where(h1,h2,h3,.h1,.h2,.h3,a){
 display: -webkit-box !important;
 -webkit-box-orient: vertical !important;
 -webkit-line-clamp: var(--vk-blog-title-lines) !important;
 overflow: hidden !important;
}


/* Excerpt clamp (tries common text containers) */
.vk-blog-card .blog-post-card__content :where(p,.rte,.article-card__excerpt,.blog-post-card__excerpt){
 display: -webkit-box !important;
 -webkit-box-orient: vertical !important;
 -webkit-line-clamp: var(--vk-blog-excerpt-lines) !important;
 overflow: hidden !important;
}


/* If there’s a “Read more” / meta row, push it to the bottom */
.vk-blog-card .blog-post-card__content :where(.button, .btn, .link, .read-more, .article-card__link){
 margin-top: auto !important;
}


/* =========================================================
  VK BLOG GRID — FORCE EQUAL HEIGHT CARDS (HORIZON)
  Fixes: slight misalignment between cards in same row
  ========================================================= */


/* 1) Make the blog list/grid stretch items to same row height */
.vk-blog-grid,
.blog-posts-list,
.blog-posts,
.blog-posts__list,
.blog-posts-grid {
 align-items: stretch !important;
}


/* Some themes use <ul> with grid/flex – enforce stretch */
.vk-blog-grid > *,
.blog-posts-list > *,
.blog-posts__list > *,
.blog-posts-grid > * {
 align-self: stretch !important;
}


/* 2) Ensure the card wrapper itself can stretch */
.vk-blog-card,
.blog-post-item.vk-blog-card {
 height: 100% !important;
}


/* 3) Hard-structure the inner layout so bottoms line up */
.vk-blog-card .blog-post-card__content{
 min-height: 170px !important;           /* tune if needed */
}


/* Date line can vary by font/spacing – keep it consistent */
.vk-blog-card .blog-post-card__content :where(time,.article-card__date,.blog-post-card__date){
 display: block !important;
 min-height: 18px !important;
}


/* Title area: reserve consistent space (even when shorter) */
.vk-blog-card .blog-post-card__content :where(h1,h2,h3,.h1,.h2,.h3,a){
 min-height: 2.6em !important;           /* ~2 lines */
}


/* Excerpt area: reserve consistent space */
.vk-blog-card .blog-post-card__content :where(p,.rte,.article-card__excerpt,.blog-post-card__excerpt){
 min-height: 3.9em !important;           /* ~3 lines */
}


/* Push "Read more" / link to the bottom */
.vk-blog-card .blog-post-card__content :where(.button,.btn,.link,.read-more,.article-card__link){
 margin-top: auto !important;
}
/* =========================================================
  VK HEADER – HARD OVERRIDE (FINAL SOURCE OF TRUTH)
  Purpose: Kill icon systems, keep pills only
  ========================================================= */


/* 1. Kill ALL VK mobile icon variants */
header-actions.vk-header-actions .vk-header-actions__mobile,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions a.vk-header-icon{
 display: none !important;
 visibility: hidden !important;
 pointer-events: none !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* 2. Force VK desktop pills everywhere (mobile + desktop) */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions .vk-header-actions__desktop{
 display: inline-flex !important;
 align-items: center !important;
 gap: 10px !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* 3. Kill THEME account/cart icons (all variants) */
.header__icon--account,
.header__icon--cart,
a.header__icon--account,
a.header__icon--cart{
 display: none !important;
}


/* 4. Kill ALL theme cart bubbles (corner numbers) */
.cart-count-bubble,
.header__cart-count-bubble,
.cart-count-bubble *,
.header__cart-count-bubble *{
 display: none !important;
}


/* 5. Safety: prevent JS from resurrecting icons */
header-actions.vk-header-actions [style*="display:flex"],
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions [style*="display:inline-flex"]{
 display: none !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


/* =========================================================
  FINAL: Kill ANY theme cart bubble/count badge in header
  (covers many theme naming variations)
  ========================================================= */


#header-group .cart-count-bubble,
#header-group .header__cart-count-bubble,
#header-group [class*="count-bubble"],
#header-group [class*="cart-count"],
#header-group [class*="cartCount"],
#header-group [data-cart-count],
#header-group [data-cart-count-bubble]{
 display:none !important;
}


/* ================================
  VK HEADER: MOBILE PILL STACK
  Goal: stack the two pills vertically and pin them to the right
  Desktop unaffected
  ================================ */


@media (max-width: 749px){


 /* Ensure the VK wrapper can align to the right */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions{
   display: block !important;
   width: auto !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* Stack pills vertically, align them to the right */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-actions__inner{
   display: flex !important;
   flex-direction: column !important;
   align-items: flex-end !important;
   justify-content: flex-start !important;
   gap: 8px !important;
   width: auto !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* Force the DESKTOP pill block to be used on mobile (because you want pills, not icons) */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-actions__desktop{
   display: flex !important;
   flex-direction: column !important;
   align-items: flex-end !important;
   gap: 8px !important;
   width: auto !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* Hide the mobile icon variant entirely */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions .vk-header-actions__mobile{
   display: none !important;
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */


 /* Make pills a bit more compact on mobile */
 header-actions.vk-header-actions a.vk-header-account,
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
 header-actions.vk-header-actions a.vk-header-cart{
   height: 36px !important;
   padding: 0 12px !important;
   min-width: 0 !important; /* critical: stop forced desktop width */
 }
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */
}


/* VK CANARY TEST — remove after */
/* --- VK HEADER ACTIONS: DISABLED (conflicting legacy block) --------------------
header-actions.vk-header-actions{
 outline: 6px solid red !important;
 background: rgba(255,0,0,.08) !important;
}
----- END VK HEADER ACTIONS: DISABLED ------------------------------------------ */

/* =========================================================
   VK HEADER ACTIONS — SINGLE SOURCE OF TRUTH (FINAL)
   - Desktop: two long pills side-by-side (Account + Cart)
   - Mobile: stack the SAME two pills vertically on the RIGHT
   - Theme cart bubble in header is hidden (prevents duplicates)
   ========================================================= */

.header__column--right .cart-bubble,
.header__column--right .cart-count-bubble,
.header__column--right .header__cart-count-bubble{
  display:none !important;
}

/* Ensure the header right column naturally right-aligns our pills */
.header__column--right{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
}

/* Wrapper */
header-actions.vk-header-actions{
  display:block !important;
}

/* Inner layout: desktop row */
header-actions.vk-header-actions .vk-header-actions__inner{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  white-space:nowrap !important;
}

/* Pills */
header-actions.vk-header-actions a.vk-header-account,
header-actions.vk-header-actions a.vk-header-cart{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  height:40px !important;
  padding:0 14px !important;
  box-sizing:border-box !important;

  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  background:#f7f7f7 !important;

  text-decoration:none !important;
  color:inherit !important;
  white-space:nowrap !important;
}

/* Typography alignment */
header-actions.vk-header-actions a.vk-header-account .vk-header-account__text,
header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total{
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total{
  font-variant-numeric:tabular-nums !important;
}

/* Count badge */
header-actions.vk-header-actions .vk-header-cart__count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:22px !important;
  height:22px !important;
  line-height:1 !important;

  border-radius:999px !important;
  font-size:13px !important;
  font-weight:800 !important;

  background:#1f7a1f !important;
  color:#fff !important;
  border:2px solid #f7f7f7 !important;
}

/* Desktop: keep equal pill width */
@media screen and (min-width: 750px){
  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart{
    min-width:209px !important;
  }
}

/* Mobile: stack vertically and tighten */
@media screen and (max-width: 749px){
  header-actions.vk-header-actions .vk-header-actions__inner{
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:6px !important;
  }

  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart{
    height:34px !important;
    padding:0 12px !important;
    border-radius:10px !important;
  }

  header-actions.vk-header-actions a.vk-header-account .vk-header-account__text,
  header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total{
    font-size:13px !important;
  }

  header-actions.vk-header-actions .vk-header-cart__count{
    width:18px !important;
    height:18px !important;
    font-size:11px !important;
  }
}

/* =========================
   VK FIX: MOBILE LOGO MUST NOT SHRINK/DISAPPEAR
   Targets actual theme markup: a.header__logo + CSS vars
   ========================= */
@media screen and (max-width: 749px){

  /* Stop left column collapsing */
  .header__column.header__column--left{
    flex: 0 0 auto !important;
    min-width: 110px !important;
    overflow: visible !important;
  }

  /* The logo link in your theme */
  a.header__logo{
    flex: 0 0 auto !important;
    min-width: 110px !important;
    max-width: none !important;
    overflow: visible !important;

    /* Force “desktop-like” sizing behaviour on mobile */
    --header-logo-image-width-mobile: 110px !important;
    --header-logo-image-height-mobile: 50px !important;
  }

  /* The theme logo container + image */
  a.header__logo .header-logo__image-container{
    width: 110px !important;
    min-width: 110px !important;
    max-width: none !important;
    overflow: visible !important;
  }

  a.header__logo img{
    width: 110px !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* =========================================================
   VK MOBILE HEADER LAYOUT
   Goal: keep top row = menu + logo + search
         VK pills get their own row under the header row
   ========================================================= */
@media screen and (max-width: 749px){

  /* 1) Let the header row wrap instead of crushing the logo */
  .header__columns{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* 2) Left column (menu + logo + search) should take full width */
  .header__column.header__column--left{
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  /* 3) Make sure the logo cannot collapse to near-zero width */
  a.header__logo{
    flex: 0 0 auto !important;
    min-width: 110px !important;
    overflow: visible !important;

    /* override theme's mobile shrink variables */
    --header-logo-image-width-mobile: 110px !important;
    --header-logo-image-height-mobile: 50px !important;
  }

  a.header__logo .header-logo__image-container{
    width: 110px !important;
    min-width: 110px !important;
    max-width: none !important;
  }

  a.header__logo img{
    width: 110px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  /* 4) Put VK pills on their own row under the header row */
  .header__column.header__column--right{
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  header-actions.vk-header-actions{
    position: static !important;      /* critical: no absolute */
    width: auto !important;
    margin: 6px 10px 0 10px !important;
  }

  /* 5) Stack pills vertically (you said this is preferred on mobile) */
  header-actions.vk-header-actions .vk-header-actions__inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
  }
}

/* =========================================================
   VK MOBILE TUNING — SMALL PHONES
   Put VK pills under logo + centered (prevents sitting on hero)
   ========================================================= */
@media screen and (max-width: 480px){

  /* Give the header a little breathing space so row 2 doesn't overlap the hero */
  .header__row.header__row--top{
    padding-bottom: 10px !important;
  }

  /* Make the "right column" row center-aligned on tiny phones */
  .header__column.header__column--right{
    justify-content: center !important;
  }

  header-actions.vk-header-actions{
    margin: 6px auto 0 auto !important;
  }

  header-actions.vk-header-actions .vk-header-actions__inner{
    align-items: center !important;
  }

  /* Slightly shrink pills on the smallest devices */
  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart{
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
  }

  header-actions.vk-header-actions a.vk-header-account .vk-header-account__text,
  header-actions.vk-header-actions a.vk-header-cart .vk-header-cart__total{
    font-size: 13px !important;
  }

  header-actions.vk-header-actions .vk-header-cart__count{
    width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   VK MOBILE POLISH (Option B)
   - Make Account/Sign-in pill slightly wider
   - Ensure header never overlays the hero image on mobile
   ========================================================= */

/* 1) Prevent transparent header overlay on mobile (push page content down by header height) */
@media screen and (max-width: 749px){
  body{
    /* Theme uses this boolean to decide if content should be offset by header height.
       Your inspector showed it as 0; forcing to 1 prevents pills/logo sitting on hero. */
    --transparent-header-offset-boolean: 1 !important;
  }
}

/* 2) Make the Account pill a bit larger on phones + keep both pills visually balanced */
@media screen and (max-width: 480px){

  /* Give the VK pills row a bit more breathing room under the logo */
  header-actions.vk-header-actions{
    margin-top: 8px !important;
  }

  /* Slightly increase the Account pill width so it doesn't look "smaller" than Cart */
  header-actions.vk-header-actions a.vk-header-account{
    min-width: 124px !important;
  }

  /* Keep Cart pill from collapsing too small as well */
  header-actions.vk-header-actions a.vk-header-cart{
    min-width: 150px !important;
  }

  /* Center text inside pills */
  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart{
    justify-content: center !important;
  }
}

/* =========================================================
   VK HEADER TIDY UPS (post-fix)
   - Make pills slightly bigger on real phones
   - Patch Surface Duo / narrow-wide edge cases only
   ========================================================= */

/* A) Slightly larger pills on standard phones */
@media screen and (max-width: 480px){
  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart{
    padding: 10px 16px !important;
    min-height: 44px !important; /* comfortable tap target */
    border-radius: 999px !important;
  }

  /* Make Sign in / My account feel less "small" */
  header-actions.vk-header-actions a.vk-header-account{
    min-width: 132px !important;
  }
}

/* B) Surface Duo / awkward widths: force pills BELOW logo so they never overlay hero */
@media screen and (max-width: 560px){
  header-actions.vk-header-actions{
    width: 100% !important;
    justify-content: center !important;
  }

  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart{
    max-width: calc(50% - 8px) !important;
  }
}

/* C) Ultra-narrow "responsive-only" widths: stack pills (prevents hero overlap entirely) */
@media screen and (max-width: 360px){
  header-actions.vk-header-actions{
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart{
    width: 92% !important;
    max-width: 340px !important;
  }
}

/* VK: Mobile shop page scroll trap fix (force page scroll) */
@media (max-width: 749px) {
  html, body {
    height: auto !important;
    overflow-y: auto !important;
    position: static !important;
  }

  /* If any wrapper is incorrectly set to viewport height */
  main, #MainContent, .content-for-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Common overlay/backdrop patterns that can block scrolling */
  .facets__overlay,
  .drawer__overlay,
  .modal-overlay,
  .overlay,
  .backdrop {
    pointer-events: none !important;
  }
}

/* --- VK HEADER: prevent layout shift on navigation --- */
header-actions.vk-header-actions a.vk-header-account,
header-actions.vk-header-actions a.vk-header-cart {
  min-height: 40px;
  line-height: 1;
}

/* Desktop fixed widths already exist — this stabilises mobile */
@media (max-width: 749px) {
  header-actions.vk-header-actions a.vk-header-account,
  header-actions.vk-header-actions a.vk-header-cart {
    min-height: 34px;
  }
}

/* VK header: reduce layout shift when cart text updates */
.vk-header-actions a.vk-header-cart,
.vk-header-actions a.vk-header-account{
  min-height: 40px;
  line-height: 1;
  align-items: center;
  display: inline-flex;
}
@media (max-width: 749px){
  .vk-header-actions a.vk-header-cart,
  .vk-header-actions a.vk-header-account{
    min-height: 34px;
  }
}

/* Prevent width reflow when scrollbars/viewport units resolve */
html { scrollbar-gutter: stable; }

/* Desktop fallback for older browsers */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* Reserve space so cart total/count updates don’t reflow header */
.vk-header-cart-total { display: inline-block; min-width: 84px; text-align: right; }
.vk-header-cart-count { display: inline-block; min-width: 20px; text-align: center; }

/* VK: Journal intro paragraph – prevent late font swap/layout shift */
.template-blog .blog__description,
.template-blog .rte,
.template-blog .rte p,
.template-blog p {
  font-family: var(--font-body-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 400;
  font-style: normal;
}

/* Ensure the browser reserves space consistently */
.template-blog .blog__description,
.template-blog .rte {
  font-size-adjust: 0.5; /* safe-ish fallback; remove if it looks odd */
}

/* ==========================
   VK Allergen Matrix – Mobile cards
   Scope: allergen page only
   ========================== */

/* NOTE: Removed legacy mobile-card layout rules from base.css to stop conflicts
   with the current JS-driven allergen matrix (desktop table + mobile list).
   If you still want legacy cards later, reintroduce them deliberately in ONE place. */

/* Hide the table on mobile only (but keep it in DOM) */
@media (max-width: 749px) {
  body.vk-template-page-allergen-matrix .vk-table-hidden-mobile,
  .page-allergen-matrix .vk-table-hidden-mobile {
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }
}

/* Allergen matrix - ensure pagination buttons appear on mobile */
@media (max-width: 768px) {
  .allergen-matrix .load-more,
  .allergen-matrix .show-all,
  .allergen-matrix__load-more,
  .allergen-matrix__show-all,
  .allergen-matrix button[data-action="load-more"],
  .allergen-matrix button[data-action="show-all"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    margin: 12px 6px !important;
  }

  .allergen-matrix .pagination,
  .allergen-matrix__pagination,
  .allergen-matrix [data-pagination] {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 10px 0 !important;
  }
}

/* Allergen matrix - ensure pagination controls are visible on mobile */
.vk-template-page-allergen-matrix button,
.vk-template-page-allergen-matrix a {
  -webkit-appearance: none;
}

/* Replace these selectors with your real pagination wrapper if you have it */
.vk-template-page-allergen-matrix .vk-pagination,
.vk-template-page-allergen-matrix .vk-load-more,
.vk-template-page-allergen-matrix .vk-show-all,
.vk-template-page-allergen-matrix .vk-table-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: static !important;
}

/* Allergen matrix: keep FAQ questions same size as the "Allergen guide FAQs" heading */
.vk-template-page-allergen-matrix .vk-faq-h3 {
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 900;
  margin: 10px 0 6px !important;
}

/* VK Allergen Matrix – unify “How to use this page” heading size with “Allergen guide FAQs”
   Scoped to this page template only to avoid impacting the rest of the site.
*/
.vk-template-page-allergen-matrix .vk-howto h2,
.vk-template-page-allergen-matrix .vk-howto .vk-h2,
.vk-template-page-allergen-matrix .vk-howto .vk-h2--faq {
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  margin: 0 0 10px !important;
}

/* ===========================
   VK Card System (reusable)
   Used by Party at Home now; can be reused on other pages.
   =========================== */

.vk-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.vk-party{ padding: 28px 0 48px; }
.vk-party__wrap{ display:block; }

.vk-mt{ margin-top: 18px; }

.vk-surface{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.vk-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.vk-grid{
  display: grid;
  gap: 14px;
}

.vk-grid--2{ grid-template-columns: 1fr; }
.vk-grid--3{ grid-template-columns: 1fr; }
.vk-grid--tight{ gap: 10px; }

@media (min-width: 900px){
  .vk-grid--2{ grid-template-columns: 1fr 1fr; }
  .vk-grid--3{ grid-template-columns: 1fr 1fr 1fr; }
}

.vk-kicker{
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0 0 6px;
}

.vk-h1{
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.vk-h2{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

.vk-h3{
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.vk-lead{
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0;
  opacity: 0.92;
  max-width: 70ch;
}

.vk-prose{
  font-size: 0.98rem;
  line-height: 1.5;
  opacity: 0.92;
}

.vk-prose p{ margin: 0 0 10px; }
.vk-prose p:last-child{ margin-bottom: 0; }

.vk-note{
  margin: 10px 0 0;
  font-size: 0.93rem;
  opacity: 0.85;
}

.vk-note--inline{
  margin: 0;
  align-self: center;
}

.vk-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.vk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.12);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  min-height: 42px;
}

.vk-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.08); }
.vk-btn:active{ transform: translateY(0px); }

.vk-btn--primary{
  background: #111;
  color: #fff;
  border-color: #111;
}

.vk-btn--ghost{
  background: #fff;
  color: #111;
}

.vk-callouts{
  display: grid;
  gap: 10px;
}

.vk-pill{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(0,0,0,0.02);
}

.vk-pill__label{
  display:block;
  font-size: 0.82rem;
  opacity: 0.72;
  margin-bottom: 2px;
}

.vk-pill__value{
  display:block;
  font-size: 1rem;
  font-weight: 800;
}

.vk-media__img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.vk-caption{
  margin-top: 10px;
  font-size: 0.92rem;
  opacity: 0.85;
}

.vk-video{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.vk-video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vk-review{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vk-stars{
  font-size: 16px;
  line-height: 1;
}

.vk-star{ opacity: 0.25; }
.vk-star--on{ opacity: 1; }

.vk-quote{
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}

.vk-review__meta{
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.vk-review__name{
  font-weight: 800;
  margin-top: 8px;
}

.vk-review__context{
  font-size: 0.9rem;
  opacity: 0.75;
}

.vk-alert{
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.12);
}

.vk-alert--success{ background: rgba(0, 128, 0, 0.06); }
.vk-alert--error{ background: rgba(200, 0, 0, 0.06); }

.vk-formGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px){
  .vk-formGrid{ grid-template-columns: 1fr 1fr; }
}

.vk-field{ display:block; }
.vk-label{
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

.vk-input, .vk-textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.14);
  padding: 10px 12px;
  font-size: 1rem;
  background: #fff;
}

.vk-textarea{ resize: vertical; }

.vk-fieldset{
  margin: 14px 0 0;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,0.02);
}

.vk-legend{
  font-weight: 800;
  padding: 0 6px;
}

.vk-checkGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

@media (min-width: 700px){
  .vk-checkGrid{ grid-template-columns: 1fr 1fr; }
}

.vk-check{
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.98rem;
}

.vk-smallprint{
  margin: 8px 0 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* Hide Klaviyo popups on Party at Home page only */
body[class*="page-party-at-home"] .klaviyo-form,
body[class*="page-party-at-home"] [class*="kl-private-"],
body[class*="page-party-at-home"] [id*="klaviyo"],
body[class*="page-party-at-home"] [class*="klaviyo"],
body[class*="page-party-at-home"] iframe[src*="klaviyo"]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Party at Home – card layout (adjust wrapper selector once confirmed) */
.vk-party-at-home .vk-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.vk-party-at-home .vk-grid{
  display: grid;
  gap: 16px;
}

@media (min-width: 900px){
  .vk-party-at-home .vk-grid--3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================
   PARTY AT HOME HERO: stronger typography/pills
   ========================================== */

/* Adjust these selectors if your hero wrapper differs */
.template-page .shopify-section:first-of-type h1,
.template-page .shopify-section:first-of-type .h1,
.template-page .shopify-section:first-of-type .title {
  font-family: Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.1;
  margin-bottom: 10px;
}

.template-page .shopify-section:first-of-type p,
.template-page .shopify-section:first-of-type .rte,
.template-page .shopify-section:first-of-type .subtitle {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Make “pills” bigger + more like Shop Online */
.template-page .shopify-section:first-of-type .pill,
.template-page .shopify-section:first-of-type .badge,
.template-page .shopify-section:first-of-type .tag,
.template-page .shopify-section:first-of-type .button--secondary,
.template-page .shopify-section:first-of-type .button--tertiary {
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}

/* ================================
   VIDEO: constrain + fit full frame
   ================================ */

/* Target common Shopify video wrappers */
.video,
.video-wrapper,
.video-section__media,
.media,
.shopify-section .video {
  max-width: 820px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
}

/* Ensure video shows whole frame (no cropping) */
video {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: #000;
  display: block;
}

/* =========================================================
   Allergen Matrix — TABLE ONLY (base.css, minimal + authoritative)
   Scope: body.vk-template-page-allergen-matrix
   Purpose:
   - Restore proper desktop layout (table left, cart right)
   - Ensure ONLY the table wrapper scrolls
   - Avoid column squashing and “drifting right”
   ========================================================= */

/* Prevent page-level horizontal scrollbar */
body.vk-template-page-allergen-matrix{ overflow-x: hidden; }

/* Desktop/tablet layout: table | cart */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.vk-template-page-allergen-matrix .vk-table-card{
    min-width: 0 !important; /* critical for grid children */
  }

  /* Make sure the card does not clip the table; scroll happens on wrap */
  body.vk-template-page-allergen-matrix .vk-table-card{ overflow: visible !important; }

  body.vk-template-page-allergen-matrix .vk-table-wrap{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 72vh !important;
    position: relative !important;  /* required for sticky within wrapper */
    -webkit-overflow-scrolling: touch !important;
  }

  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 340px !important;
    max-width: 340px !important;
    justify-self: end !important;
    align-self: start !important;
  }
}

@media (min-width: 1500px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: minmax(0, 1fr) 480px !important;
  }
  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 480px !important;
    max-width: 480px !important;
  }
}

@media (max-width: 1100px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: 1fr !important;
  }
  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Table sizing: allow natural column widths; wrapper scrolls */
body.vk-template-page-allergen-matrix table.vk-table{
  display: table !important;
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

/* Sticky header inside wrapper */
body.vk-template-page-allergen-matrix table.vk-table thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: #fff !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Sticky first columns */
body.vk-template-page-allergen-matrix .vk-sticky-col{
  position: sticky !important;
  left: 0 !important;
  z-index: 60 !important;
  background: #fff !important;
}
body.vk-template-page-allergen-matrix .vk-sticky-col2{
  position: sticky !important;
  left: 56px !important; /* checkbox col width */
  z-index: 59 !important;
  background: #fff !important;
}

/* Ensure intersection cells stay above everything */
body.vk-template-page-allergen-matrix table.vk-table thead .vk-sticky-col,
body.vk-template-page-allergen-matrix table.vk-table thead .vk-sticky-col2{
  z-index: 80 !important;
}

/* Product column: prevent “letter stacking” */
body.vk-template-page-allergen-matrix .vk-col-product,
body.vk-template-page-allergen-matrix td.vk-col-product{
  min-width: 320px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Mobile: keep things simple; don’t let desktop grid leak into mobile */
@media (max-width: 749px){
  body.vk-template-page-allergen-matrix .vk-layout{
    display: block !important;
  }
  body.vk-template-page-allergen-matrix .vk-table-wrap{
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================================================
   VK ALLERGEN MATRIX — TABLE RESTORE + MOBILE DUPLICATE FIX
   Scope: allergen matrix page only
   Paste at VERY BOTTOM of base.css
   ========================================================= */

/* -----------------------------
   0) Safety: page should never create a horizontal scrollbar
------------------------------ */
body.vk-template-page-allergen-matrix{
  overflow-x: hidden;
}

/* -----------------------------
   1) DESKTOP LAYOUT: table left, basket right (stable)
   (keeps what is now working, but makes it deterministic)
------------------------------ */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 16px !important;
    align-items: start !important;
  }

  /* Critical in grid: allow the table column to shrink so the wrapper can scroll */
  body.vk-template-page-allergen-matrix .vk-table-card,
  body.vk-template-page-allergen-matrix .vk-table-wrap{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 340px !important;
    max-width: 340px !important;
    justify-self: end !important;
    align-self: start !important;
  }
}

/* Wider screens: slightly larger cart */
@media (min-width: 1500px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: minmax(0, 1fr) 480px !important;
  }
  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 480px !important;
    max-width: 480px !important;
  }
}

/* Mid screens: stack */
@media (max-width: 1100px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: 1fr !important;
  }
  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* -----------------------------
   2) DESKTOP TABLE “NEW SCHOOL” STYLING
   Goal: real table geometry + breathing space + clear grid lines
------------------------------ */

/* Make sure the card DOES NOT clip the table (common cause of “messy/uncut”) */
body.vk-template-page-allergen-matrix .vk-table-card{
  overflow: visible !important;
}

/* Wrapper is the scroll container (ONLY thing that should scroll) */
body.vk-template-page-allergen-matrix .vk-table-wrap,
body.vk-template-page-allergen-matrix .vk-allergen__table-wrap{
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 72vh !important;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

/* Force table semantics back (prevents “rows floating with no structure”) */
body.vk-template-page-allergen-matrix table.vk-table,
body.vk-template-page-allergen-matrix .vk-table{
  display: table !important;
  width: max-content !important;   /* table can be wider than wrapper */
  min-width: 100% !important;      /* but never smaller than wrapper */
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Cell spacing + grid lines */
body.vk-template-page-allergen-matrix table.vk-table th,
body.vk-template-page-allergen-matrix table.vk-table td{
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  vertical-align: middle !important;
  background: #fff !important;
}

/* Add subtle vertical separators so columns don’t feel “crammed” */
body.vk-template-page-allergen-matrix table.vk-table th + th,
body.vk-template-page-allergen-matrix table.vk-table td + td{
  border-left: 1px solid rgba(0,0,0,0.06) !important;
}

/* Header styling */
body.vk-template-page-allergen-matrix table.vk-table thead th{
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  background: #f6faf7 !important;
  color: rgba(0,0,0,0.85) !important;

  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Row hover (desktop only; keeps it feeling modern) */
@media (hover:hover){
  body.vk-template-page-allergen-matrix table.vk-table tbody tr:hover td{
    background: rgba(0,0,0,0.02) !important;
  }
}

/* Checkbox column: keep narrow and centred */
body.vk-template-page-allergen-matrix .vk-col-select,
body.vk-template-page-allergen-matrix .vk-sticky-col.vk-col-select{
  width: 56px !important;
  min-width: 56px !important;
  text-align: center !important;
}

/* Product column: give it real width so names don’t crunch */
body.vk-template-page-allergen-matrix .vk-col-product,
body.vk-template-page-allergen-matrix th.vk-col-product,
body.vk-template-page-allergen-matrix td.vk-col-product{
  min-width: 360px !important;
  width: 360px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Status glyph columns (your “x” / tick columns): centred + consistent width */
body.vk-template-page-allergen-matrix td:not(.vk-col-product):not(.vk-col-select){
  text-align: center !important;
}

/* Sticky first columns (keep them readable over scroll) */
body.vk-template-page-allergen-matrix .vk-sticky-col{
  position: sticky !important;
  left: 0 !important;
  z-index: 60 !important;
  background: #fff !important;
}
body.vk-template-page-allergen-matrix .vk-sticky-col2{
  position: sticky !important;
  left: 56px !important; /* matches select col width */
  z-index: 60 !important;
  background: #fff !important;
}

/* Sticky header + sticky col intersection must stay on top */
body.vk-template-page-allergen-matrix table.vk-table thead .vk-sticky-col,
body.vk-template-page-allergen-matrix table.vk-table thead .vk-sticky-col2{
  z-index: 80 !important;
  background: #f6faf7 !important;
}

/* -----------------------------
   3) RIGHT PANEL (Selected items) — clean “new school” card
------------------------------ */
body.vk-template-page-allergen-matrix aside.vk-cart-card{
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04) !important;
}

/* -----------------------------
   4) MOBILE: REMOVE DUPLICATE DESKTOP TABLE
   Problem you’re seeing: mobile cards render, then the desktop table appears later.
   Fix: keep the table in DOM (for JS) but visually hide it on mobile.
------------------------------ */
@media (max-width: 749px){
  /* Keep mobile layout stack */
  body.vk-template-page-allergen-matrix .vk-layout{
    display: block !important;
  }

  /* Visually hide the DESKTOP table wrapper on mobile (but keep in DOM) */
  body.vk-template-page-allergen-matrix .vk-table-wrap,
  body.vk-template-page-allergen-matrix .vk-allergen__table-wrap,
  body.vk-template-page-allergen-matrix .vk-table-card{
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }

  /* Ensure any “table-only” elements can’t sneak back in */
  body.vk-template-page-allergen-matrix table.vk-table,
  body.vk-template-page-allergen-matrix .vk-table{
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }

  /* Make sure the mobile card list stays visible (generic safety) */
  body.vk-template-page-allergen-matrix .vk-mobile-list,
  body.vk-template-page-allergen-matrix .vk-mcard,
  body.vk-template-page-allergen-matrix .vk-mcards{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   VK ALLERGEN MATRIX — FIX GRID WIDTHS (DESKTOP)
   Paste at VERY BOTTOM of base.css
   ========================================================= */

@media (min-width: 750px){
  /* Ensure the allergen matrix container is not being constrained */
  body.vk-template-page-allergen-matrix .vk-container,
  body.vk-template-page-allergen-matrix .vk-allergen-matrix,
  body.vk-template-page-allergen-matrix .vk-layout{
    width: 100% !important;
    max-width: none !important;
  }

  /* The real fix: kill the hard-coded 524px/480px and make it responsive */
  body.vk-template-page-allergen-matrix .vk-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 480px !important; /* table grows, cart fixed */
    column-gap: 24px !important;
    row-gap: 24px !important;
    align-items: start !important;
  }

  /* If you want the cart a bit narrower (often looks better), use 420px instead:
     grid-template-columns: minmax(0, 1fr) 420px !important;
  */

  /* Make sure the table column is allowed to shrink within the grid */
  body.vk-template-page-allergen-matrix .vk-table-card,
  body.vk-template-page-allergen-matrix .vk-table-wrap{
    min-width: 0 !important;
  }
}

@media (min-width: 1200px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: minmax(0, 1fr) 520px !important;
  }
}

@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .page-width,
  body.vk-template-page-allergen-matrix .page-width--narrow,
  body.vk-template-page-allergen-matrix .page-width-narrow,
  body.vk-template-page-allergen-matrix .page-width-content,
  body.vk-template-page-allergen-matrix .page-width-normal{
    max-width: none !important;
    width: 100% !important;
  }
}

/* =========================================================
   VK ALLERGEN MATRIX — TABLE VISUAL POLISH
   ========================================================= */

body.vk-template-page-allergen-matrix .vk-table-card{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
  overflow: hidden !important; /* keeps rounded corners clean */
}

/* If your actual table element is inside vk-table-wrap, target it generically */
body.vk-template-page-allergen-matrix .vk-table-wrap table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px !important;
}

/* Header row: clearer + sticky (feels like a real data grid) */
body.vk-template-page-allergen-matrix .vk-table-wrap thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #f6f7f8 !important;
  color: rgba(0,0,0,.85) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid rgba(0,0,0,.18) !important;
}

/* Grid lines: more pronounced */
body.vk-template-page-allergen-matrix .vk-table-wrap th,
body.vk-template-page-allergen-matrix .vk-table-wrap td{
  padding: 10px 12px !important;
  border-right: 1px solid rgba(0,0,0,.14) !important;
  border-bottom: 1px solid rgba(0,0,0,.14) !important;
  vertical-align: middle !important;
}

/* Remove last right border to avoid double line at edge */
body.vk-template-page-allergen-matrix .vk-table-wrap tr > *:last-child{
  border-right: 0 !important;
}

/* Zebra striping for readability */
body.vk-template-page-allergen-matrix .vk-table-wrap tbody tr:nth-child(even){
  background: #fafafa !important;
}

/* Make "Product" column visually stronger */
body.vk-template-page-allergen-matrix .vk-table-wrap td:nth-child(2),
body.vk-template-page-allergen-matrix .vk-table-wrap th:nth-child(2){
  font-weight: 600 !important;
}

/* Make the X markers look neat + centered */
body.vk-template-page-allergen-matrix .vk-table-wrap td{
  text-align: center !important;
}
body.vk-template-page-allergen-matrix .vk-table-wrap td:nth-child(2){
  text-align: left !important; /* product name left */
}

/* =========================================================
   VK ALLERGEN MATRIX — SECTION SPACING
   ========================================================= */

body.vk-template-page-allergen-matrix .vk-layout{
  margin-top: 18px !important;
}

/* =========================================================
   VK ALLERGEN MATRIX — CART CARD POLISH
   ========================================================= */

body.vk-template-page-allergen-matrix .vk-cart-card{
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}

body.vk-template-page-allergen-matrix .vk-cart-card h2,
body.vk-template-page-allergen-matrix .vk-cart-card h3{
  font-size: 16px !important;
}

body.vk-template-page-allergen-matrix .vk-cart-inner{
  padding: 16px !important; /* was 14px; small uplift */
  font-size: 14px !important;
}

/* =========================================================
   VK ALLERGEN MATRIX — MOBILE: HIDE DESKTOP TABLE
   ========================================================= */

@media (max-width: 749px){
  body.vk-template-page-allergen-matrix .vk-table-card,
  body.vk-template-page-allergen-matrix .vk-table-wrap{
    display: none !important;
  }

  /* Keep cart visible */
  body.vk-template-page-allergen-matrix .vk-cart-card{
    display: block !important;
  }
}

/* =========================================================
   ALLERGEN MATRIX — MOBILE: REMOVE DUPLICATE BASKET
   ========================================================= */
@media (max-width: 749px){
  body.vk-template-page-allergen-matrix .vk-cart-card{
    display: none !important;
  }
  body.vk-template-page-allergen-matrix .vk-cart-card:last-of-type{
    display: block !important;
  }
}
/* =========================================================
   ALLERGEN MATRIX — BULLETS ALIGN LEFT (MOBILE)
   ========================================================= */
@media (max-width: 749px){
  body.vk-template-page-allergen-matrix .vk-container ul{
    text-align: left !important;
    padding-left: 1.2rem !important;
    margin-left: 0 !important;
  }
  body.vk-template-page-allergen-matrix .vk-container li{
    margin-left: 0 !important;
  }
}

/* =========================================================
   ALLERGEN MATRIX — DESKTOP: CENTRE TITLE + INTRO
   ========================================================= */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix h1{
    text-align: center !important;
  }

  body.vk-template-page-allergen-matrix h1 + p{
    text-align: center !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================================
   ALLERGEN MATRIX — TABLE: STICKY HEADER + REMOVE TOP COUNT
   ========================================================= */

/* Remove any table caption / top count line */
body.vk-template-page-allergen-matrix .vk-table-wrap caption{
  display: none !important;
}

/* If that “Showing 25 of 82 items” is a standalone element above the table */
body.vk-template-page-allergen-matrix .vk-table-wrap .vk-table-count,
body.vk-template-page-allergen-matrix .vk-table-wrap .vk-count,
body.vk-template-page-allergen-matrix .vk-table-wrap .count{
  display: none !important;
}

/* Make sticky header stick BELOW the site header */
body.vk-template-page-allergen-matrix .vk-table-wrap thead th{
  position: sticky !important;
  top: calc(var(--vk-header-height, 0px) + 8px) !important;
  z-index: 5 !important;
}

/* =========================================================
   ALLERGEN MATRIX — TABLE: VK GREEN HEADER + STRONGER GRID
   ========================================================= */

body.vk-template-page-allergen-matrix .vk-table-card{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}

/* VK-green header row */
body.vk-template-page-allergen-matrix .vk-table-wrap thead th{
  background: #dfe9d8 !important;   /* VK soft green */
  border-bottom: 2px solid rgba(0,0,0,.18) !important;
  font-weight: 700 !important;
}

/* Slightly stronger grid lines */
body.vk-template-page-allergen-matrix .vk-table-wrap th,
body.vk-template-page-allergen-matrix .vk-table-wrap td{
  border-right: 1px solid rgba(0,0,0,.16) !important;
  border-bottom: 1px solid rgba(0,0,0,.16) !important;
}
/* =========================================================
   ALLERGEN MATRIX — MOBILE: REMOVE DUPLICATE BASKET
   Cause: both .vk-mobile and .vk-layout are in DOM on mobile
   Fix: show cart in .vk-mobile; hide cart in .vk-layout
   ========================================================= */
@media (max-width: 749px){
  body.vk-template-page-allergen-matrix .vk-layout .vk-cart-card{
    display: none !important;
  }

  body.vk-template-page-allergen-matrix .vk-mobile .vk-cart-card{
    display: block !important;
  }
}

/* =========================================================
   ALLERGEN MATRIX — DESKTOP: REMOVE TOP "SHOWING X OF Y"
   Keep bottom count (footer), hide the one above table
   ========================================================= */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-layout .vk-table-header .vk-table-count,
  body.vk-template-page-allergen-matrix .vk-layout .vk-results-header .vk-table-count,
  body.vk-template-page-allergen-matrix .vk-layout .vk-topcount,
  body.vk-template-page-allergen-matrix .vk-layout .vk-table-topcount{
    display: none !important;
  }
}
/* =========================================================
   ALLERGEN MATRIX — DESKTOP: CONTAIN TABLE + STOP OVERFLOW JUMPS
   ========================================================= */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-layout .vk-table-wrap,
  body.vk-template-page-allergen-matrix .vk-layout .vk-table-container{
    max-width: 100%;
    overflow: auto;              /* critical: contain the grid */
    border-radius: 16px;         /* match your card look */
    border: 1px solid rgba(0,0,0,0.14);
    background: #fff;
  }

  body.vk-template-page-allergen-matrix .vk-layout table{
    width: 100%;
    border-collapse: separate;   /* better grid control */
    border-spacing: 0;
  }
}

/* Allergen Matrix — remove TOP results count only */
body.vk-template-page-allergen-matrix
.vk-layout
.vk-table-wrap
> .vk-results-bar {
  display: none !important;
}

/* Allergen Matrix — stop overflow/layout “jumps” caused by scrollbars/overflow */
body.vk-template-page-allergen-matrix {
  overflow-x: hidden; /* prevent any horizontal leak from shifting the page */
}

/* Keep the “card” from letting inner overflow affect layout */
body.vk-template-page-allergen-matrix .vk-table-card {
  overflow: hidden;
}

/* Make the table wrap the ONLY scroll container and stabilise scrollbar sizing */
body.vk-template-page-allergen-matrix .vk-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  /* Key line: prevents width/layout jump when scrollbar appears/disappears */
  scrollbar-gutter: stable;

  /* Optional but usually helps isolate repaint/layout jitter */
  contain: layout paint;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   ALLERGEN MATRIX — DESKTOP: EXCEL-LIKE TABLE STYLING
   ========================================================= */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-layout th,
  body.vk-template-page-allergen-matrix .vk-layout td{
    border-right: 1px solid rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(0,0,0,0.18);
    padding: 10px 12px;
    background-clip: padding-box;
  }

  body.vk-template-page-allergen-matrix .vk-layout thead th{
    background: #cfe3d7;       /* “VK green-ish” header */
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* First column (product) often benefits from being sticky too */
  body.vk-template-page-allergen-matrix .vk-layout .vk-col-product,
  body.vk-template-page-allergen-matrix .vk-layout td:first-child,
  body.vk-template-page-allergen-matrix .vk-layout th:first-child{
    background: #f7f8f9;
    position: sticky;
    left: 0;
    z-index: 4;
  }

  /* Zebra stripes (subtle) */
  body.vk-template-page-allergen-matrix .vk-layout tbody tr:nth-child(even) td{
    background: #fbfbfc;
  }
}


/* =========================================================
   VK ALLERGEN MATRIX — FINAL OVERRIDES (PASTE AT VERY BOTTOM)
   Goal:
   - Stronger, clearer “Excel-like” table (header + grid + zebra + hover)
   - Optional “boxed” styling for key text blocks (How-to + FAQs + tips)
   - Basket/card polish + button alignment
   - Keep MOBILE signed-off behaviour:
       - show mobile list UI
       - hide desktop table + hide desktop cart on mobile
   - Prevent overflow/jump jitter (scrollbar stable)
   ========================================================= */

body.vk-template-page-allergen-matrix { overflow-x: hidden; }

/* -----------------------------
   A) Layout: desktop table left, basket right
------------------------------ */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 420px !important; /* adjust: 380–520 if you want */
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.vk-template-page-allergen-matrix .vk-table-card,
  body.vk-template-page-allergen-matrix .vk-table-wrap{
    min-width: 0 !important; /* critical for scroll containers in grid */
  }

  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 420px !important;
    max-width: 420px !important;
    justify-self: end !important;
    align-self: start !important;
  }
}

@media (min-width: 1400px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: minmax(0, 1fr) 480px !important;
  }
  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 480px !important;
    max-width: 480px !important;
  }
}

/* Stack at smaller desktop widths */
@media (max-width: 1100px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: 1fr !important;
  }
  body.vk-template-page-allergen-matrix aside.vk-cart-card{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* -----------------------------
   B) Table container: ONLY the wrapper scrolls (stable)
------------------------------ */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-table-card{
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    overflow: hidden !important; /* clean rounded edges */
  }

  body.vk-template-page-allergen-matrix .vk-table-wrap{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 72vh !important;

    scrollbar-gutter: stable !important; /* stops “jump” when scrollbar appears */
    -webkit-overflow-scrolling: touch !important;
    contain: layout paint !important;    /* isolates jitter */
    background: #fff !important;
  }

  body.vk-template-page-allergen-matrix table.vk-table,
  body.vk-template-page-allergen-matrix .vk-table{
    display: table !important;
    width: max-content !important; /* can exceed wrapper width; wrapper scrolls */
    min-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
}

/* -----------------------------
   C) Excel-like visuals: stronger header + clearer grid
------------------------------ */
@media (min-width: 750px){
  /* Cells */
  body.vk-template-page-allergen-matrix .vk-table-wrap table th,
  body.vk-template-page-allergen-matrix .vk-table-wrap table td{
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,0.14) !important;
    vertical-align: middle !important;
    background: #fff !important;
  }

  /* Vertical separators */
  body.vk-template-page-allergen-matrix .vk-table-wrap table th + th,
  body.vk-template-page-allergen-matrix .vk-table-wrap table td + td{
    border-left: 1px solid rgba(0,0,0,0.12) !important;
  }

  /* Header: darker green + white text (prominent) */
  body.vk-template-page-allergen-matrix .vk-table-wrap table thead th{
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;

    background: #2f5f3a !important; /* dark green */
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;

    border-bottom: 2px solid rgba(0,0,0,0.25) !important;
    white-space: normal !important;
  }

  /* Zebra */
  body.vk-template-page-allergen-matrix .vk-table-wrap table tbody tr:nth-child(even) td{
    background: rgba(0,0,0,0.02) !important;
  }

  /* Hover (desktop only) */
  @media (hover:hover){
    body.vk-template-page-allergen-matrix .vk-table-wrap table tbody tr:hover td{
      background: rgba(47,95,58,0.06) !important;
    }
  }

  /* Product column: keep readable */
  body.vk-template-page-allergen-matrix .vk-table-wrap .vk-col-product,
  body.vk-template-page-allergen-matrix .vk-table-wrap th.vk-col-product,
  body.vk-template-page-allergen-matrix .vk-table-wrap td.vk-col-product{
    min-width: 360px !important;
    width: 360px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-weight: 700 !important;
  }

  /* Everything else centred */
  body.vk-template-page-allergen-matrix .vk-table-wrap table td{
    text-align: center !important;
  }
  body.vk-template-page-allergen-matrix .vk-table-wrap table td.vk-col-product{
    text-align: left !important;
  }

  /* Sticky first columns (if your markup uses these classes) */
  body.vk-template-page-allergen-matrix .vk-table-wrap .vk-sticky-col{
    position: sticky !important;
    left: 0 !important;
    z-index: 70 !important;
    background: #fff !important;
  }
  body.vk-template-page-allergen-matrix .vk-table-wrap .vk-sticky-col2{
    position: sticky !important;
    left: 56px !important;
    z-index: 69 !important;
    background: #fff !important;
  }
  body.vk-template-page-allergen-matrix .vk-table-wrap thead .vk-sticky-col,
  body.vk-template-page-allergen-matrix .vk-table-wrap thead .vk-sticky-col2{
    z-index: 90 !important;
    background: #2f5f3a !important;
    color: #fff !important;
  }
}

/* -----------------------------
   D) “Box” the key text blocks (minimal + safe)
   (Only affects elements that already have these classes)
------------------------------ */
body.vk-template-page-allergen-matrix .vk-howto,
body.vk-template-page-allergen-matrix .vk-faqs,
body.vk-template-page-allergen-matrix .vk-filters,
body.vk-template-page-allergen-matrix .vk-legend{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 14px !important;
}

/* If these are wrappers, give them padding */
body.vk-template-page-allergen-matrix .vk-howto,
body.vk-template-page-allergen-matrix .vk-faqs,
body.vk-template-page-allergen-matrix .vk-filters{
  padding: 14px 14px !important;
}

/* -----------------------------
   E) Basket polish (Selected items)
------------------------------ */
body.vk-template-page-allergen-matrix aside.vk-cart-card{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

body.vk-template-page-allergen-matrix .vk-cart-inner{
  padding: 16px !important;
  font-size: 14px !important;
}

/* Buttons inside cart: spacing + consistent sizing */
body.vk-template-page-allergen-matrix aside.vk-cart-card button,
body.vk-template-page-allergen-matrix aside.vk-cart-card .button{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
}

/* -----------------------------
   F) Remove TOP results count only (keep bottom count)
   Your DOM shows: div.vk-results-bar (role="status") above the table
------------------------------ */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-layout .vk-table-wrap > .vk-results-bar{
    display: none !important;
  }
}

/* -----------------------------
   G) MOBILE: prevent duplicates
   - Keep mobile list UI visible
   - Hide desktop table + hide desktop cart
------------------------------ */
@media (max-width: 749px){
  /* Hide the whole desktop UI area if it’s kept in DOM */
  body.vk-template-page-allergen-matrix .vk-layout{
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }

  /* Ensure mobile UI stays visible */
  body.vk-template-page-allergen-matrix .vk-mobile{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   VK ALLERGEN MATRIX — CLEAN FIX (RESTORE PERFECT TABLE)
   Scope: /pages/allergen-matrix only
   Goals:
   - Desktop: table + selected items side-by-side
   - Tablet: stacked
   - Table: horizontal scroll when needed (keeps all 12 allergens in one table)
   - Mobile: keep existing cards behaviour
   ========================================================= */

/* ---------- Layout container: sane defaults ---------- */
body.vk-template-page-allergen-matrix .vk-layout{
  display: block !important; /* stacked by default (tablet) */
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Desktop wide: two columns */
@media (min-width: 1100px){
  body.vk-template-page-allergen-matrix .vk-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important; /* table + selected */
    gap: 18px !important;
    align-items: start !important;
  }
}

/* ---------- Table wrapper: MUST scroll horizontally ---------- */
body.vk-template-page-allergen-matrix .vk-table-wrap{
  max-width: 100% !important;
  overflow-x: auto !important;          /* restore horizontal scroll */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Keep table natural sizing so scroll actually works */
body.vk-template-page-allergen-matrix .vk-table-wrap table,
body.vk-template-page-allergen-matrix table.vk-table{
  width: max-content !important;        /* allow wider than container */
  min-width: 100% !important;           /* but fill container if it fits */
  max-width: none !important;
  table-layout: auto !important;        /* DO NOT fix layout */
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Cell sizing: slightly compact (so it looks like before “strong”) */
body.vk-template-page-allergen-matrix .vk-table-wrap th,
body.vk-template-page-allergen-matrix .vk-table-wrap td{
  padding: 8px 10px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Header row */
body.vk-template-page-allergen-matrix .vk-table-wrap thead th{
  font-weight: 700 !important;
}

/* Product column: allow wrapping so names don’t blow width */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-table-wrap th.vk-col-product,
  body.vk-template-page-allergen-matrix .vk-table-wrap td.vk-col-product{
    min-width: 260px !important;
    width: 260px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left !important;
  }
}

/* ---------- Keep your green header cells (safe) ---------- */
@media (min-width: 750px){
  body.vk-template-page-allergen-matrix .vk-table-wrap table thead th.vk-sticky-col,
  body.vk-template-page-allergen-matrix .vk-table-wrap table thead th.vk-sticky-col2,
  body.vk-template-page-allergen-matrix .vk-table-wrap table thead .vk-sticky-col,
  body.vk-template-page-allergen-matrix .vk-table-wrap table thead .vk-sticky-col2{
    background: #2f5f3a !important;
    color: #fff !important;
  }
}

/* ---------- Selected items panel: keep it stable ---------- */
body.vk-template-page-allergen-matrix .vk-selected-items,
body.vk-template-page-allergen-matrix .selected-items{
  width: 100% !important;
  max-width: 420px !important;
}

/* ---------- IMPORTANT: remove “no scroll” / sticky-disabling hacks ---------- */
/* (Nothing here on purpose.) If you still have any older rules elsewhere
   that set .vk-table-wrap overflow:hidden or table-layout:fixed,
   this block will win because it’s at the end of base.css. */


   /* =========================================================
   ALLERGEN MATRIX — TABLE DENSITY (TABLE ONLY)
   Reduce font + padding so the table fits beside Selected items
   Scope: /pages/allergen-matrix only
   ========================================================= */

@media (min-width: 750px){
  /* Tighten ALL cells */
  body.vk-template-page-allergen-matrix .vk-table-wrap table th,
  body.vk-template-page-allergen-matrix .vk-table-wrap table td{
    font-size: 12px !important;       /* was feeling too big */
    padding: 6px 8px !important;      /* tighter cells */
    line-height: 1.2 !important;
    font-weight: 500 !important;      /* normal body weight */
  }

  /* Keep header row readable */
  body.vk-template-page-allergen-matrix .vk-table-wrap table thead th{
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Make allergen columns compact */
  body.vk-template-page-allergen-matrix .vk-table-wrap table thead th:not(.vk-col-product),
  body.vk-template-page-allergen-matrix .vk-table-wrap table tbody td:not(.vk-col-product){
    min-width: 60px !important;
  }

  /* Product column: still readable, but not huge */
  body.vk-template-page-allergen-matrix .vk-table-wrap table th.vk-col-product,
  body.vk-template-page-allergen-matrix .vk-table-wrap table td.vk-col-product{
    min-width: 220px !important;
    width: 220px !important;
    white-space: normal !important;
  }
}

/* =========================================================
   ALLERGEN MATRIX — STOP OVERLAP (TABLE + SELECTED ITEMS)
   Scoped to allergen matrix page only
   ========================================================= */

@media (min-width: 750px){
  /* The parent wrapper that holds BOTH the table and the selected-items card */
  body.vk-template-page-allergen-matrix .vk-layout{
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
  }

  /* LEFT: table side must be allowed to shrink */
  body.vk-template-page-allergen-matrix .vk-table-card{
    flex: 1 1 auto !important;
    min-width: 0 !important; /* critical: allows it to shrink instead of overlapping */
    max-width: 100% !important;
  }

  /* Ensure the table can scroll inside its card */
  body.vk-template-page-allergen-matrix .vk-table-wrap{
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Make the table size itself to content, so scroll works */
  body.vk-template-page-allergen-matrix .vk-table-wrap table{
    width: max-content !important;
    min-width: 100% !important;
  }

  /* RIGHT: selected items fixed column */
  body.vk-template-page-allergen-matrix .vk-cart-inner{
    flex: 0 0 420px !important;   /* fixed width column */
    width: 420px !important;
    max-width: 420px !important;
  }
}

/* When screen is narrower, stack them (no overlap) */
@media (max-width: 749px){
  body.vk-template-page-allergen-matrix .vk-layout{
    display: block !important;
  }

  body.vk-template-page-allergen-matrix .vk-cart-inner{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   ALLERGEN MATRIX — Selected items panel: make it larger
   Scope: allergen matrix page only
   ========================================================= */

@media (min-width: 1100px){
  body.vk-template-page-allergen-matrix .vk-layout{
    grid-template-columns: 1fr 420px !important; /* was ~340px in prior patch */
    gap: 22px !important;
    align-items: start !important;
  }

  /* Ensure the panel can actually take the new width */
  body.vk-template-page-allergen-matrix .vk-selected-items,
  body.vk-template-page-allergen-matrix .selected-items,
  body.vk-template-page-allergen-matrix .vk-cart-inner{
    width: 100% !important;
    max-width: 420px !important;
  }
}

/* Give the card breathing room and prevent cramped controls */
body.vk-template-page-allergen-matrix .vk-selected-items,
body.vk-template-page-allergen-matrix .selected-items,
body.vk-template-page-allergen-matrix .vk-cart-inner{
  padding: 18px !important; /* was 16px */
}

/* If the product rows feel squashed, add a bit of spacing */
body.vk-template-page-allergen-matrix .vk-selected-items * + *{
  margin-top: 6px;
}

/* =========================================================
   ALLERGEN MATRIX — RESPONSIVE SAFETY PATCH
   Goal:
   - On smaller screens: STOP side-by-side layout
   - Stack "Selected items" UNDER the table
   - Ensure table can horizontally scroll (so allergens aren’t cut off)
   ========================================================= */

/* Breakpoint: anything smaller than a “wide desktop” should not try to do 2 columns */
@media (max-width: 1199px){

  /* 1) Force single-column layout (table then selected-items) */
  body.vk-template-page-allergen-matrix .vk-layout{
    display: block !important;
  }

  /* 2) Make the table area full width and scroll horizontally if needed */
  body.vk-template-page-allergen-matrix .vk-table-wrap{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 3) Ensure the table is allowed to be wider than the viewport (so scroll works) */
  body.vk-template-page-allergen-matrix .vk-table-wrap table,
  body.vk-template-page-allergen-matrix table.vk-table{
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }

  /* 4) Slightly tighten table typography on smaller screens (prevents “blow-up”) */
  body.vk-template-page-allergen-matrix .vk-table-wrap th,
  body.vk-template-page-allergen-matrix .vk-table-wrap td{
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 8px 10px !important;
  }

  /* 5) Selected items: full width under the table */
  body.vk-template-page-allergen-matrix .vk-selected-items,
  body.vk-template-page-allergen-matrix .selected-items,
  body.vk-template-page-allergen-matrix .vk-cart-inner{
    width: 100% !important;
    max-width: none !important;
    margin-top: 16px !important;
  }

/* =========================================================
   CLS FIX — lock header height before JS runs
   Prevents header-menu resizing from shifting page
   ========================================================= */

#header-group {
  min-height: 96px;
}

/* Desktop header */
@media (min-width: 750px) {
  #header-group {
    min-height: 104px;
  }
}

/* =========================================================
   CLS FIX (HEADER MENU WRAP)
   Goal: stop the header nav wrapping to a 2nd line on first paint.
   This prevents the header height changing and shifting the page.
   ========================================================= */

/* Force the header menu row to stay one line */
.header-menu,
.header-menu * {
  box-sizing: border-box;
}

.header-menu .menu-list,
.header-menu .menu-list__list,
.header-menu ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-items: center;
}

/* If items are wider than the screen, scroll horizontally instead of wrapping */
.header-menu {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Avoid “jump” from late line-height/padding changes on links */
.header-menu a,
.header-menu .menu-list__list-item,
.header-menu li {
  line-height: 1.2 !important;
}
/* --------------------------------------------------
   HEADER BASKET STABILITY FIX
   Prevent CLS caused by basket total updates
-------------------------------------------------- */

.vk-header-cart__total {
  display: inline-block;
  min-width: 6.5ch;        /* enough for £1,234.56 */
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* === CLS FIX: lock header height === */
#header-group {
  min-height: 169px;
}

@media (min-width: 990px) {
  #header-group {
    min-height: 169px;
  }
}

/* ================================
  VK — HEADER BOTTOM ROW CLIP FIX (DESKTOP)
  Fix nav text being clipped inside .header__row--bottom
  ================================ */

/* Make the bottom header row tall enough and prevent clipping */
.header__row.header__row--bottom {
 height: auto !important;
 min-height: 48px !important;
 overflow: visible !important;
}

/* Ensure the columns + menu can center vertically */
.header__row.header__row--bottom .header__columns {
 min-height: 48px !important;
 align-items: center !important;
}

/* Ensure the header-menu area is not forcing a short height */
.header__row.header__row--bottom header-menu,
.header__row.header__row--bottom .header-menu,
.header__row.header__row--bottom .header-menu__inner,
.header__row.header__row--bottom nav[header-menu] {
 height: auto !important;
 overflow: visible !important;
}

/* Give the links a touch of vertical padding so they sit cleanly */
.header__row.header__row--bottom .menu-list__link,
.header__row.header__row--bottom .menu-list__link-title {
 line-height: 1.2 !important;
}

.header__row.header__row--bottom .menu-list__link {
 padding-top: 10px !important;
 padding-bottom: 10px !important;
}

/* ================================
   VK Header dropdown – force vertical list
   ================================ */

/* Most Horizon-like themes use details/summary + a submenu container */
header details[open] > .header__submenu,
header details[open] .header__submenu,
header details[open] > .menu-drawer__submenu,
header details[open] .menu-drawer__submenu,
header .mega-menu__content,
header .header__submenu {
  width: max-content;
  min-width: 220px;
  max-width: 320px;
}

/* Force the inner list to stack vertically */
header .header__submenu ul,
header .mega-menu__content ul,
header .header__submenu .list-menu,
header .mega-menu__content .list-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ensure list items don’t try to tile */
header .header__submenu li,
header .mega-menu__content li {
  width: 100%;
}

/* Optional: prevent the dropdown panel from stretching full width */
header .mega-menu__content,
header .header__submenu {
  left: auto;
  right: auto;
}

/* VK Cart Delete Button Fix - Flex Shrink Issue */
.cart-items__remove svg,
.button--tertiary.cart-items__remove svg,
button.cart-items__remove svg,
.cart-item .cart-items__remove svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: auto !important;
  display: block !important;
}

.cart-items__remove,
.button--tertiary.cart-items__remove,
button.cart-items__remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================
   VK MOBILE MENU GLASSMORPHISM FIX
   ============================================ */

.dialog-drawer {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Better glassmorphism on supporting browsers */
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
  .dialog-drawer {
    background: rgba(255, 255, 255, 0.75) !important;
  }
}

/* Enhanced backdrop behind mobile menu */
.dialog-drawer::backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ============================================
   VK MOBILE MENU GLASSMORPHISM FIX
   ============================================ */

div.menu-drawer,
.menu-drawer.color-scheme-6,
.menu-drawer.motion-reduce {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Better glassmorphism on supporting browsers */
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
  div.menu-drawer,
  .menu-drawer.color-scheme-6 {
    background: rgba(255, 255, 255, 0.75) !important;
  }
}

/* Backdrop behind menu */
.menu-drawer__backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ============================================
   VK CART DELETE BUTTON - Show on ALL screens
   ============================================ */

/* Remove the media query restriction - apply to all screen sizes */
.cart-items__remove,
.button--tertiary.cart-items__remove,
button.cart-items__remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================
   VK MOBILE CART - Complete fix for text cutoff
   ============================================ */

@media (max-width: 749px) {
  /* Reset all cart containers to prevent cutoff */
  .cart,
  .cart-page,
  .cart__items,
  .cart__summary,
  .cart-page__summary,
  .totals,
  .cart__ctas {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }
  
  /* Prevent any horizontal overflow */
  body.template-cart,
  .cart,
  .cart * {
    overflow-x: visible !important;
    max-width: 100% !important;
  }
  
  /* Ensure text isn't clipped */
  * {
    text-overflow: clip !important;
    white-space: normal !important;
  }
}
@media (max-width: 749px) {
  /* Remove padding from main containers */
  .cart__summary,
  .cart-page__summary {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Add extra left padding ONLY to text elements */
  .totals,
  .totals__label,
  .cart__summary-title,
  summary,
  .totals__subtotal,
  .totals__total {
    padding-left: 65px !important;
  }
  
  /* Keep buttons centered - NO extra left padding */
  .cart__ctas,
  .cart__dynamic-checkout-buttons,
  button {
    padding-left: 45 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ============================================
   VK MOBILE CART - Force viewport lock & fix text
   ============================================ */

@media (max-width: 749px) {
  /* Lock entire page to viewport */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* Force cart to fit viewport */
  .cart,
  .cart-page,
  main,
  #MainContent {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Make ALL children respect viewport */
  .cart *,
  .cart-page * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix text with proper padding */
  .cart__summary,
  .totals {
    padding: 20px !important;
  }
}

/* VK SHOP - Product card images FIX (must be last) */
body.page-width-narrow main[data-template*="collection.vk-shop-clean"] ul.product-grid img,
.vk-shop .vk-card__img,
:not(product-recommendations) > .vk-card img,
.vk-card:not(product-recommendations .vk-card) img {
  height: auto !important;
  max-height: 240px !important;
  width: 100% !important;
  object-fit: contain !important;
  padding: 16px !important;
  background: #f9f9f9 !important;
}

/* PRODUCT RECOMMENDATIONS — override: images fill card, no padding */
product-recommendations .vk-card img,
product-recommendations .vk-card__img,
product-recommendations article img,
product-recommendations .card-gallery img,
product-recommendations .card__media img {
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  border-radius: 14px !important;
  aspect-ratio: 1 / 1 !important;
}

/* --- 4. PROTEIN MODAL: mobile drawer style --- */
@media (max-width: 520px) {
  .vk-protein-modal__panel {
    padding: 20px 16px 16px !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 85vh !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(100%) !important;
  }

  .vk-protein-modal[aria-hidden="false"] .vk-protein-modal__panel {
    transform: translateY(0) !important;
  }

  .vk-protein-modal__title {
    font-size: 19px !important;
  }

  .vk-protein-modal__grid {
    gap: 10px !important;
  }

  .vk-protein-card {
    padding: 10px 8px !important;
  }

  .vk-protein-card__img {
    width: 56px !important;
    height: 56px !important;
  }

  .vk-protein-card__placeholder {
    font-size: 26px !important;
  }
}

/* =========================================================
   VK TILE FIX — FINAL (replaces ALL previous tile fix blocks)
   Paste at VERY BOTTOM of base.css (above product card block)
   ========================================================= */

/* Grid container: equal columns, equal row heights */
.vk-tileGrid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 10px !important;
}

/* Individual tiles: fill grid cell, center content */
button.vk-tile,
.vk-tileGrid > .vk-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: 4px !important;
  padding: 10px 8px !important;
  border-radius: 14px !important;
}

/* Constrain filter card width on mobile so tiles don't stretch too wide */
@media (max-width: 990px) {
  .vk-filterCard {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =====================================================
   VK SHOP: iPad / Tablet Fix (750px – 1099px)
   
   Problems at ~810px iPad portrait Safari:
   1. Filter card products bleed through behind it
   2. Tile text turns blue (Safari inherits --button-color)
   3. Show matching / Clear buttons get cut off
   4. Layout breaks — filter card overlays products
   
   Also covers iPad landscape (~1024px) where sidebar+grid
   is too cramped.
   
   Install: Paste at the VERY BOTTOM of base.css
   ===================================================== */

/* --- Force tile text colour (Safari fix) --- */
button.vk-tile,
.vk-tile,
.vk-tileGrid button,
.vk-filterCard button {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.vk-filterCard .vk-btnPrimary,
.vk-filterCard button.vk-btnPrimary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

button.vk-tile.is-active,
.vk-tile.is-active {
  color: #0f6b39 !important;
  -webkit-text-fill-color: #0f6b39 !important;
}

/* --- Tablet layout: filter card as proper overlay --- */
@media (max-width: 1099px) and (min-width: 750px) {

  /* Grid: single column, products below */
  .vk-shop__grid {
    grid-template-columns: 1fr !important;
    position: relative;
  }

  /* Filter card: centered, solid background, above everything */
  .vk-filterCard {
    position: relative !important;
    top: auto !important;
    z-index: 100 !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    margin: 0 auto 24px !important;
    max-width: 600px !important;
    width: 100% !important;
    padding: 20px !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Ensure the scrollable area flows naturally */
  .vk-filterCard__scroll {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Actions row: always visible, not cut off */
  .vk-filterCard__actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 14px !important;
    position: relative !important;
    z-index: 10 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
  }

  /* Buttons inside filter card: ensure visible */
  .vk-filterCard .vk-btnPrimary,
  .vk-filterCard .vk-btnGhost {
    padding: 14px 18px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    min-height: 48px !important;
  }

  /* Product grid: 2 columns on tablet */
  .vk-shop .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Tile grid: keep 2-column, ensure equal sizing */
  .vk-tileGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Tiles: equal height, centered content */
  button.vk-tile,
  .vk-tileGrid > .vk-tile {
    width: 100% !important;
    height: 100% !important;
    min-height: 64px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
  }

  /* Filter card title: slightly smaller on tablet */
  .vk-filterCard__title {
    font-size: 22px !important;
  }
}

/* --- Mobile: same fixes but tighter --- */
@media (max-width: 749px) {

  .vk-filterCard {
    z-index: 100 !important;
    background: #fff !important;
    margin: 0 auto 20px !important;
    max-width: 100% !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .vk-filterCard__scroll {
    overflow: visible !important;
    max-height: none !important;
  }

  .vk-filterCard__actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 14px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    padding: 12px 0 !important;
    z-index: 10 !important;
  }
}

/* =====================================================
   VK MARQUEE: Prevent disappearing on soft navigation
   
   Problem: Marquee trust bar disappears until hard refresh.
   Cause: Custom element `connectedCallback` fires before
          the element has layout (offsetWidth = 0), so
          #calculateNumberOfCopies returns 0 and no items
          render. Also, fetchpriority="low" + type="module"
          delays initialisation.
   
   Fix: CSS ensures content is always visible as a fallback.
   If marquee animation doesn't start, items still show.
   
   Install: Paste at the bottom of base.css
   ===================================================== */

/* Ensure marquee content is visible even before JS init */
marquee-component {
  min-height: 40px; /* prevent CLS */
}

/* If animation hasn't started, just show items in a row */
marquee-component:not([data-initialized]) .marquee__wrapper {
  display: flex;
  justify-content: center;
  gap: var(--marquee-gap, 24px);
  width: 100%;
}

marquee-component:not([data-initialized]) .marquee__content {
  display: flex;
  gap: var(--marquee-gap, 24px);
  justify-content: center;
}

/* Prevent the repeated items from being hidden */
.marquee__repeated-items {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   PRODUCT RECOMMENDATIONS — IMAGE OVERRIDE
   Must be at VERY BOTTOM of base.css to win specificity.
   The .vk-card img rules above apply contain + padding
   which is correct for the shop page but breaks the
   recommendation cards on the PDP.
   ========================================================= */
product-recommendations .vk-card img,
product-recommendations .vk-card .vk-card__img,
product-recommendations article img,
product-recommendations article .vk-card__img,
product-recommendations .resource-list__item img,
product-recommendations .resource-list__item .vk-card__img,
body product-recommendations .vk-card img,
body product-recommendations img.vk-card__img {
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
}