/** Shopify CDN: Minification failed

Line 3730:7 Expected ":"

**/
/* =========================
   RESET / BASE
========================= */

* {
  box-sizing: border-box;
}

: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 {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

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

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

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;
}

dialog {
  --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;
}

: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;
  }

  :root {
    view-transition-name: none;
  }

  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;
  }

  html:active-view-transition-type(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 HELPERS
========================= */

.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 {
  --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 {
  --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 {
  --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);

  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;
  position: relative;

  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);

  /* FIX: no quotes */
  min-height: var(--section-min-height, auto);
}

.section > * {
  grid-column: 2;
}

.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);
}

.section--page-width > * {
  grid-column: 2;
}

.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;
}

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

.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 {
  /* FIX: no quotes */
  min-height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================
   UTILITIES
========================= */

.hidden {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    display: none !important;
  }
}

.hide-when-empty:empty {
  display: none !important;
}

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

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile:not(:focus, :active) {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    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;
  }
}

.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;
  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);
  background-color: var(--color-background);
  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);
}

.icon-default {
  fill: currentColor;
}

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

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

/* =========================
   TYPOGRAPHY
========================= */

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));
}

@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;
}

/* 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;
}

p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-primary, .button-secondary)):hover,
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6)
  a:where(:not(.button, .button-primary, .button-secondary)):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);
}

summary::-webkit-details-marker {
  display: none;
}

/* Transparent header positioning */
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 > .header-section {
  z-index: var(--layer-sticky);
}

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

/* =========================
   CARDS (product/collection/resource)
========================= */

.collection-card,
.featured-blog-posts-card {
  width: 100%;
  position: relative;
  height: 100%;
}

/* Editorial layout (flattened nesting) */
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .collection-card__image,
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .featured-blog-posts-card__image,
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .blog-placeholder-svg,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .collection-card__image,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .featured-blog-posts-card__image,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .blog-placeholder-svg {
  aspect-ratio: 99;
  height: 100%;
}

.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .collection-card__inner,
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .featured-blog-posts-card__inner,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .collection-card__inner,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .featured-blog-posts-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .collection-card__content,
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .featured-blog-posts-card__content,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .collection-card__content,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .featured-blog-posts-card__content {
  flex-shrink: 0;
}

.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio:not(.collection-card--image-bg) .collection-card__content,
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio .featured-blog-posts-card__content,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio:not(.collection-card--image-bg) .collection-card__content,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio .featured-blog-posts-card__content {
  height: auto;
}

.collection-card__inner,
.featured-blog-posts-card__inner {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: var(--layer-flat);
  pointer-events: none;
}

.collection-card__content,
.featured-blog-posts-card__content {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  gap: var(--gap);
}

.collection-card__link,
.featured-blog-posts-card__link {
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
}

.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);
  z-index: var(--layer-flat);
}

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

.product-card__content {
  position: relative;
  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;
  }
}

/* =========================
   PRODUCT GRID
========================= */

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

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

@media screen and (min-width: 750px) {
  .product-grid-container {
    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;
}

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

@media screen and (max-width: 749px) {
  .product-grid__card .group-block > * {
    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;
  }

  :root:active-view-transition-type(product-grid) details[open] floating-panel-component .checkbox *,
  :root:active-view-transition-type(product-grid) details[open] floating-panel-component .facets__pill-label {
    transition: none;
  }

  :root:active-view-transition-type(product-grid) .facets--vertical details[open] floating-panel-component {
    view-transition-name: none;
  }

  :root:active-view-transition-type(product-grid) .product-grid {
    view-transition-name: product-grid;
  }

  :root:active-view-transition-type(product-grid) footer {
    view-transition-name: footer;
  }

  :root:active-view-transition-type(product-grid) .product-grid__item,
  :root:active-view-transition-type(product-grid) 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);
}

results-list[initialized] .product-grid__item {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  results-list[initialized] .product-grid__item {
    opacity: 0;
    transform: translateY(10px);
  }
}

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

: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;
}

.text-block > style + * {
  margin-block-start: 0;
}

/* =========================
   DIALOGS
========================= */

.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);
}

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

@media screen and (max-width: 749px) {
  .dialog-modal {
    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;
}

.dialog-modal[open]::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;
}

.dialog-modal.dialog-closing::backdrop {
  opacity: 0;
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  --start-x: var(--custom-transform-from, 100%);
  --end-x: var(--custom-transform-to, 0px);
  --start-opacity: 1;
  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;
  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;
  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* =========================
   BUTTONS / FORMS
========================= */

.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;
}

.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);
}

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;
}

@media screen and (min-width: 750px) {
  .show-more__button:hover {
    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[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[data-expanded='true'] .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* =========================
   PRODUCT MEDIA (flattened where needed)
========================= */

media-gallery {
  display: block;
  width: 100%;
}

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

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

:not(.dialog-zoomed-gallery) > .product-media-container {
  --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%;
  position: relative;
  overflow: hidden;
}

:not(.dialog-zoomed-gallery) > .product-media-container.constrain-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.media-gallery--grid .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  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;
  }

  body:has(header-component[transparent]) .product-media-container.constrain-height {
    --viewport-offset: 0px;
  }

  .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 {
    grid-column: span 2;
  }

  media-gallery.media-gallery--grid slideshow-component {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid {
    display: grid;
  }
}

.product-media-container--model {
  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;
}

.product-media-container.media-fit 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;
}

.product-media-container__zoom-button: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;
}

zoom-dialog dialog[open] {
  opacity: 1;
}

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

zoom-dialog dialog::backdrop {
  background: transparent;
}

.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;
  border-radius: 50%;
}

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  .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);
}

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

.dialog-thumbnails-list__thumbnail[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 {
  display: flex;
  flex: 1;
}

.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

:is(product-model, deferred-media) {
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
: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;
  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 {
  bottom: calc(var(--thumbnail-width) / 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 {
    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 {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-lg);
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  overflow: hidden;
}

deferred-media:has(:focus-visible) {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  deferred-media: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));
}

.deferred-media__poster-icon svg:hover,
.video-placeholder-wrapper__poster-icon svg:hover {
  color: rgb(var(--color-white-rgb) / var(--opacity-80));
}

@media screen and (min-width: 750px) {
  .deferred-media__poster-icon svg,
  .video-placeholder-wrapper__poster-icon svg {
    width: 4rem;
    height: 4rem;
  }
}

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  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);
  margin-inline-end: var(--margin-md);
}

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

/* =========================
   SWATCHES (flattened)
========================= */

.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999;
  --min-height-unitless: 15.9999;
  --min-height: 16px;
  --min-width: 16px;

  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  --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-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));

  --swatch-width: min(
    calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  --swatch-height: min(
    calc(var(--min-height) + 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);

  background-size: var(--swatch-width) var(--swatch-height);
}

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

.swatch.swatch--unscaled {
  --swatch-width: var(--variant-picker-swatch-width);
  --swatch-height: var(--variant-picker-swatch-height);
}

.swatch.swatch--filter {
  --swatch-width: var(--max-filter-size);
  --swatch-height: var(--max-filter-size);
  border-radius: var(--variant-picker-swatch-radius);
}

.swatch.swatch--pill {
  --swatch-width: var(--max-pill-size);
  --swatch-height: var(--max-pill-size);
  border-radius: var(--variant-picker-swatch-radius);
}

.swatch.swatch--filter,
.swatch.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));
}

.swatch.swatch--variant-image {
  background-size: cover;
}

@media screen and (min-width: 750px) {
  .swatch {
    --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));
  font-weight: var(--font-paragraph--weight);
  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;
}

@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;
}

.background-overlay::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);

  --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);
}

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

.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) {
  .size-style {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style (flattened) */
.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));
}

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

.custom-typography 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-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-style,
  .layout-panel-flex {
    --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);
  }

  .layout-panel-flex--row:not(.mobile-column) > .menu {
    flex: 1 1 min-content;
  }

  .layout-panel-flex--row:not(.mobile-column) > .text-block {
    flex: 1 1 var(--max-width--display-tight);
  }

  .layout-panel-flex--row:not(.mobile-column) > .image-block {
    flex: 1 1 var(--size-style-width-mobile-min);
  }

  .layout-panel-flex--row:not(.mobile-column) > .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);
}

.field__input: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 (flattened) */
.rte :is(h1, h2, h3, h4, h5, h6),
.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);
}

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

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

.rte :is(ul, ol):not(:is(ul, ol) :is(ul, ol)),
.shopify-policy__title :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
  margin-block-end: 1em;
}

.rte blockquote,
.shopify-policy__title 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 .rte-table-wrapper,
.shopify-policy__title .rte-table-wrapper {
  overflow-x: auto;
}

.rte table,
.shopify-policy__title table {
  width: 100% !important;
  border-collapse: collapse;
}

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

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

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

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

/* Checkbox */
.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 {
    --checkbox-size: 16px;
    --checkbox-border-radius: 5px;
    --checkbox-label-padding: 6px;
  }
}

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

.checkbox.checkbox--disabled {
  --checkbox-cursor: not-allowed;
}

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

.checkbox__input:focus-visible {
  outline: none;
}

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

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

.checkbox__input: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[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--3xs);
  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);
}

.quantity-selector: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) {
  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;
}

.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

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

/* Pills */
.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);
}

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

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

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

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

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

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

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

/* Fly to cart animation */
fly-to-cart {
  --offset-y: 10px;

  position: fixed;
  width: var(--width, 40px);
  height: var(--height, 40px);
  left: 0;
  top: 0;

  /* FIX: no calc(infinity) */
  z-index: 2147483647;

  pointer-events: none;
  border-radius: var(--style-border-radius-buttons-primary);
  overflow: hidden;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 0;
  background-color: var(--color-foreground);
  translate: var(--start-x, 0) var(--start-y, 0);
  transform: translate(-50%, -50%);
  animation-name: travel-x, travel-y, travel-scale;
  animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
  animation-duration: 0.6s;
  animation-composition: accumulate;
  animation-fill-mode: both;
}

fly-to-cart.fly-to-cart--main {
  --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
  --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
  --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
}

fly-to-cart.fly-to-cart--quick {
  --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
  --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
  animation-duration: 0.6s;
}

fly-to-cart.fly-to-cart--sticky {
  --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
  --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
  --radius: var(--style-border-radius-buttons-primary);
  animation-duration: 0.8s;
}

@media (max-width: 749px) {
  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
  }
}

@keyframes travel-scale {
  0% { opacity: var(--start-opacity, 1); }
  5% { opacity: 1; }
  100% {
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
  }
}

@keyframes travel-x { to { translate: var(--travel-x, 0) 0; } }
@keyframes travel-y { to { translate: 0 var(--travel-y, 0); } }

/* =========================
   ANIMATIONS (bottom)
========================= */

@keyframes grow {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes move-and-fade {
  from { transform: translate(var(--start-x, 0), var(--start-y, 0)); opacity: var(--start-opacity, 0); }
  to { transform: translate(var(--end-x, 0), var(--end-y, 0)); opacity: var(--end-opacity, 1); }
}

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

@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 */
.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);
}

@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);
}

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

/* Video placeholder */
.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;
}

/* =========================
   GLOBAL SCROLLBAR (webkit)
========================= */

::-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));
}

/* Product card title truncation */
[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;
}

@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;
  }
}

/* Hover z-index */
.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 */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  .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%);
  }
}

/* === Whisper: header alignment (desktop) === */
@media (min-width: 750px) {
  #header-component .header__column--left {
    justify-content: flex-start !important;
  }

  #header-component .header__column--center {
    justify-content: center !important;
  }

  #header-component .header__column--right {
    justify-content: flex-end !important;
  }
}
.header-search-bar {
  max-width: 300px;
}

.header-search-bar__input {
  height: 36px;
  font-size: 14px;
}
/* FORCE SEARCH BAR SIZE (override) */
.header .header-search-bar {
  width: 320px !important;
  max-width: 320px !important;
  flex: 0 0 320px !important;
}

.header .header-search-bar__input {
  width: 100% !important;
  height: 36px !important;
  font-size: 14px !important;
  padding: 0 12px !important;
}
/* 1) Strânge spațiile dintre cele 3 coloane */
.header .header__columns{
  column-gap: 18px !important;
}

/* 2) Grupează frumos elementele din dreapta (limbă + search + iconițe) */
.header .header__column--right{
  gap: 14px !important;
  justify-content: flex-end !important;
}

/* 3) Meniu mai “tight” în centru */
.header .header__column--center{
  justify-content: center !important;
}

/* 4) Search bar mai elegant (mai mic, mai modern) */
.header header-component .header-search-bar,
.header .header-search-bar{
  width: 320px !important;
  max-width: 320px !important;
  flex: 0 0 320px !important;
}

.header .header-search-bar__input{
  height: 34px !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}

/* 5) Limba (dropdown) să stea aliniată pe vertical cu search + iconițe */
.header .dropdown-localization,
.header localization-form-component{
  display: flex !important;
  align-items: center !important;
}
/* --- FIX LIMBĂ (dropdown) --- */

/* containerul din header */
.header .dropdown-localization,
.header localization-form-component {
  display: flex !important;
  align-items: center !important;
}

/* select-ul (butonul propriu-zis) */
.header .dropdown-localization select.localization-form__select,
.header .menu-drawer__localization select.localization-form__select,
.header select.localization-form__select {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 34px 0 12px !important; /* loc pentru săgeată */
  border: 1px solid rgb(var(--color-border-rgb)) !important;
  border-radius: 999px !important;
  background: rgb(var(--color-background-rgb)) !important;
  color: rgb(var(--color-foreground-rgb)) !important;
  font-size: 14px !important;
  min-width: 120px !important;
  cursor: pointer !important;
/* ===== Custom language dropdown ===== */
.lang-dd { position: relative; }

.lang-dd__details { position: relative; }

.lang-dd__button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(var(--color-border-rgb));
  border-radius: 999px;
  background: rgb(var(--color-background-rgb));
  color: rgb(var(--color-foreground-rgb));
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.lang-dd__button::-webkit-details-marker { display: none; }
.lang-dd__caret{ opacity: .7; }

.lang-dd__panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  padding: 6px;
  border: 1px solid rgb(var(--color-border-rgb));
  border-radius: 12px;
  background: rgb(var(--color-background-rgb));
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
  z-index: 50;
}

.lang-dd__item{
  display: flex;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  color: rgb(var(--color-foreground-rgb));
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.lang-dd__item:hover{
  background: rgb(var(--color-foreground-rgb) / 0.06);
}

.lang-dd__item.is-active{
  background: rgb(var(--color-foreground-rgb) / 0.10);
  font-weight: 600;
}
/* ===== FIX Whisper: Language selector (RO/EN) ===== */
.header .dropdown-localization .localization-form__select,
.header .menu-drawer__localization .localization-form__select,
.header localization-form-component .localization-form__select {
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 1px solid rgb(var(--color-border-rgb)) !important;
  border-radius: 999px !important;

  padding: 8px 36px 8px 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;

  background-color: rgb(var(--color-background-rgb)) !important;
  color: rgb(var(--color-foreground-rgb)) !important;

  cursor: pointer !important;
}

.header .dropdown-localization .language-selector,
.header .menu-drawer__localization .language-selector {
  padding: 0 !important;
  gap: 8px !important;
}

.header .dropdown-localization .language-selector .svg-wrapper.icon-caret,
.header .menu-drawer__localization .language-selector .svg-wrapper.icon-caret {
  right: 12px !important;
}

.header .dropdown-localization .localization-form__select option,
.header .menu-drawer__localization .localization-form__select option {
  background: #fff !important;
  color: #000 !important;
}
/* ===== RO/EN deasupra Account + Cos (doar pe desktop) ===== */
@media screen and (min-width: 750px) {
  /* Transformăm coloana din dreapta într-un grid cu 2 coloane:
     - stânga: localization + search
     - dreapta: RO/EN (sus) + iconițe (jos)
  */
  .header__column--right {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--gap-xl);
    row-gap: 6px;
  }

  /* Localization (dacă există) sus-stânga */
  .header__column--right .dropdown-localization,
  .header__column--right dropdown-localization-component {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  /* Search jos-stânga */
  .header__column--right .header-search-bar {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  /* RO/EN sus-dreapta */
  .header__column--right {
  position: relative;
}

/* RO / EN – poziționare liberă */
.header__column--right .language-inline {
  position: absolute;
  top: -16px;              /* mai sus */
  right: 0;
  transform: translateX(28px); /* mai în dreapta */
  display: flex;
  gap: 6px;
  z-index: 50;
}

  /* Iconițe jos-dreapta */
  .header__column--right header-actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  /* Butoane mai mici */
  .language-inline__btn {
    font-size: 11px;
    padding: 2px 7px;
    line-height: 1;
  }
  .language-inline__inner { gap: 6px; }
}
/* ===== Fix RO/EN: in dreapta sus, deasupra iconitelor (desktop) ===== */
@media screen and (min-width: 750px) {

  /* facem containerul header-ului "ancora" pentru pozitionare */
  header-component .header__row--top .header__columns {
    position: relative;
  }

  /* urcam butoanele RO/EN in coltul dreapta-sus */
  header-component .header__row--top .language-inline {
    position: absolute !important;
    top: 2px;              /* mai sus/jos */
    right: 36px;           /* distanta fata de marginea dreapta (ajustezi) */
    z-index: 20;
    margin: 0 !important;
  }

  /* facem butoanele mai mici */
  header-component .language-inline__btn {
    font-size: 11px;
    padding: 2px 7px;
    line-height: 1;
  }

  header-component .language-inline__inner {
    gap: 6px;
  }
}
/* ===== RO/EN (language-inline) sus-dreapta, deasupra account+cart (desktop) ===== */
@media screen and (min-width: 750px) {

  /* Ancora: coloana din dreapta a header-ului */
  header-component .header__row--top .header__column--right {
    position: relative;
  }

  /* Pozitionam RO/EN in coltul din dreapta sus al coloanei */
  header-component .header__row--top .header__column--right .language-inline {
    position: absolute !important;
    top: -14px;      /* mai sus/jos (ex: -14px mai sus) */
    right: 0px;      /* lipit de dreapta */
    z-index: 50;
    margin: 0 !important;
  }

  /* Facem butoanele mai mici */
  header-component .header__row--top .language-inline__inner {
    gap: 6px;
  }

  header-component .header__row--top .language-inline__btn {
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 999px;
  }

  /* Ca sa nu se calce RO/EN peste iconite, impingem usor continutul din dreapta in jos */
  header-component .header__row--top .header__column--right {
    padding-top: 2px;
  }
}
.account-actions__sign-in-text {
  display: none !important;
}
/* Hide the "Other sign-in options" CTA in the account popover */
.account-actions__link.button {
  display: none !important;
}
/* ===== Force move RO/EN sus-dreapta in header (Whisper) ===== */
@media screen and (min-width: 750px) {

  /* facem header-ul un “container” pentru pozitionare */
  header-component .header__row--top .header__columns{
    position: relative !important;
  }

  /* mutam RO/EN in coltul din dreapta sus al header-ului */
  header-component .header__row--top .language-inline{
    position: absolute !important;
    top: 6px !important;          /* urca/coboara (ex: 0px, -6px, 10px) */
    right: 18px !important;       /* mai spre dreapta/stanga */
    z-index: 9999 !important;
    margin: 0 !important;
  }

  /* dimensiune mai mica + rotunjire */
  header-component .header__row--top .language-inline__btn{
    font-size: 10px !important;
    padding: 2px 7px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  /* ca sa NU se suprapuna peste iconite */
  header-component .header__row--top header-actions{
    margin-top: 14px !important;
  }
}
@media screen and (min-width: 750px) {
  .language-inline{
    position: fixed !important;
    top: 2px !important;
    right: 18px !important;
    z-index: 999999 !important;
  }
}
.language-inline{
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 999999 !important;
}
/* === HEADER: aliniere search + account + cart (Whisper) === */

/* 1) Colțul din dreapta: ține totul lipit de dreapta și pe aceeași linie */
.header__column--right{
  position: relative;
  align-items: center;
  gap: 14px;
}

/* 2) Bara de căutare: mai compactă și aliniată cu iconițele */
.header__column--right .header-search-bar{
  width: 320px;            /* modifică: 260-420 cum îți place */
  max-width: 38vw;         /* ca să nu rupă layout-ul */
  margin: 0;
  align-self: center;
}

/* 3) Iconițele (account + cart): lipite frumos între ele */
.header__column--right header-actions{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* 4) (opțional) dacă iconițele sunt prea sus/jos, le corectează fin */
.header__column--right .header-actions__action{
  transform: translateY(0px); /* pune 1px sau -1px dacă vrei micro-ajustare */
}
body { outline: 5px solid red !important; }
}
/* Language switch (RO/EN) – pills */
.language-inline{
  display:flex;
  align-items:center;
  gap:2px;
  padding:0;
}

.language-inline__btn{
  border:1px solid rgba(0,0,0,.35);
  background:#fff;
  color:#111;
  padding:2px 4px;
  font-size:8px;
  line-height:1;
  border-radius:999px;
  cursor:pointer;
}

.language-inline__btn.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}
.language-inline__btn:hover{
  border-color:#111;
}
/* Repoziționare RO / EN sus-dreapta */
.header__column--right {
  position: relative; /* container de referință */
}
.header__column--right .language-inline {
  position: absolute !important;
  top: -46px;          /* mai sus */
  right: -9;            /* colț dreapta */
  display: flex;
  gap: 6px;
  z-index: 50;
}
.language-inline {
  position: fixed !important;
  top: -46px !important;
  right: -90px !important;
  z-index: 99999 !important;
}
.header-search-bar {
  position: fixed !important;
  top: 40px;          /* sub RO/EN – ajustezi */
  right: 140px;        /* mai la stânga de iconițe */
  width: 160px;       /* ajustezi după gust */
  z-index: 9998;
}
.header-actions {
  position: fixed !important;
  top: 40px;        /* SAME ca search */
  right: 10px;      /* lipite de marginea dreaptă */
  display: flex;
  gap: 14px;
  z-index: 9999;
}
:root{
  --hdr-top: 38px;          /* cât de sus sunt search+iconițe */
  --hdr-right: 22px;        /* cât de aproape de dreapta */
  --hdr-gap: 14px;          /* spațiu între search și iconițe */
  --hdr-search-w: 420px;    /* lățime bară căutare */
}

/* 1) Search sus-dreapta */
.header-search-bar{
  position: fixed !important;
  top: var(--hdr-top) !important;
  right: calc(var(--hdr-right) + 98px) !important; /* lasă loc pentru iconițe */
  width: var(--hdr-search-w) !important;
  max-width: calc(100vw - 108px) !important;
  z-index: 9998 !important;
}

/* 2) Iconițe (account+cart) sus-dreapta */
.header-actions{
  position: fixed !important;
  top: calc(var(--hdr-top) + 2px) !important; /* mai jos / mai sus */
  right: calc(var(--hdr-right) - 24px) !important; /* mai în dreapta */
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 9999 !important;
}

/* 3) RO/EN și mai sus, chiar în colț */
.header__column--right{
  position: relative;
}
.header__column--right .language-inline{
  position: fixed !important;
  top: 10px !important;      /* cât de sus sunt RO/EN */
  right: var(--hdr-right) !important;
  z-index: 10000 !important;
}

/* Mută iconițele (account + cos) */
header-actions{
  position: absolute !important;
  top: 36px !important;     /* sus/jos */
  right: -36px !important;   /* stanga/dreapta */
  z-index: 9999 !important;
}

/* Ca să meargă absolute, containerul trebuie să fie relative */
.header__columns{
  position: relative !important;
}
/* ============================
   SEARCH BAR – DIMENSIUNE + POZITIE
   ============================ */

/* container search */
.header-search-bar{
  position: absolute !important;
  top: 38px !important;        /* mai sus / mai jos */
  right: 156px !important;     /* mai in stanga / dreapta */
  width: 260px !important;    /* latime bara */
  z-index: 9998 !important;
}

/* input search */
.header-search-bar input[type="search"]{
  height: 40px !important;    /* inaltime */
  font-size: 14px !important; /* text */
  padding: 0 16px !important;
  border-radius: 999px !important;
}

/* ca absolute sa functioneze */
.header__columns{
  position: relative !important;
}
/* ============================= */
/* TOP INFO BAR – FINAL (CLEAN)  */
/* ============================= */

.top-info-bar{
  background:#6cbc3d;
  color:#fff;
  font-size:12.5px;
  font-weight:500;
  line-height:1;
}

.top-info-bar__inner{
  display: flex;
  align-items: center;
  justify-content: center; /* AICI este cheia */
  gap: 236px;               /* controlează distanța dintre cele 3 */
  padding: 10px 16px;
}
.top-info-bar__item{
  flex: 0 0 auto;
}

.top-info-bar__item{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  border: none !important;
}

/* SCOATE complet separatorii (barele verticale) */
.top-info-bar__item::before,
.top-info-bar__item::after{
  content:none !important;
}

/* Adu marginile puțin spre centru */
.top-info-bar__item:first-child{ margin-right:-6px; }
.top-info-bar__item:last-child{  margin-left:-6px; }

/* Mobil */
@media (max-width: 749px){
  .top-info-bar__inner{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:8px;
    gap: 12px;
  }
}
/* Whisper – mută logo-ul spre dreapta (mai aproape de meniu) */
.header-logo__image-container--original{
  margin-right: -20px;  /* crește valoarea ca să se ducă mai spre dreapta */
}
/* Whisper – reglaj fin logo */
.header-logo__image-container--original{
  transform: translateX(20px); /* + = spre dreapta, - = spre stânga */
}
/* === WHISPER – account + cart TIGHT FIX === */
.header__column--right .header-actions__inner{
  display: flex !important;
  gap: 2px !important;        /* AICI se controlează spațiul */
}
.header__column--right .header-actions__inner > *{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* =========================================================
   PREMIUM KIDS HEADER + ANNOUNCEMENT BAR (Shopify OS 2.0)
   Paste at END of Assets/base.css (or theme.css)
   ========================================================= */

/* ---------- A) Bara verde (announcement bar) ---------- */

/* 1) inaltime mai slim + text clar */
.announcement-bar,
.announcement-bar__message {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* 2) aduce stanga/dreapta mai aproape de centru (ca la Aronia) */
.announcement-bar__message,
.announcement-bar .page-width,
.announcement-bar__message .page-width {
  max-width: 1200px !important;     /* schimba 1100/1200/1300 dupa gust */
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* 3) daca mesajele sunt in 3 "bucati", le grupam mai bine */
.announcement-bar__message {
  display: flex !important;
  align
}
/* ===== Sticky Mini Header (Aronia-like) ===== */
.sticky-mini-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);

  transform: translateY(-110%);
  transition: transform .18s ease;
  padding: 6px 0;
}

.sticky-mini-header.is-visible{
  transform: translateY(0);
}

.sticky-mini-inner{
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 18px;
}

.sticky-mini-logo img{
  max-height: 34px;
  width: auto;
  display: block;
}

.sticky-mini-textlogo{
  color: #fff;
  font-weight: 700;
}

.sticky-mini-nav a,
.sticky-mini-nav a:visited{
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  opacity: .95;
}

.sticky-mini-menu{
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 990px){
  .sticky-mini-nav{ display: none; }           /* pe mobil ascunzi meniul */
  .sticky-mini-inner{ grid-template-columns: 140px 1fr; }
}
/* Search in Sticky Mini Header */
.sticky-mini-search{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 640px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 6px 10px;
}

.sticky-mini-search__input{
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  padding: 8px 10px;
  font-size: 14px;
}

.sticky-mini-search__input::placeholder{
  color: rgba(255,255,255,.85);
}

.sticky-mini-search__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 6px 10px;
  cursor: pointer;
}

.sticky-mini-search__btn svg{
  fill: currentColor;
}
/* FIX: Whisper – mini header compact + continut vizibil */
.sticky-mini-header{
  height: 64px !important;          /* controleaza banda */
  display: flex !important;
  align-items: center !important;
}

/* containerul interior */
.sticky-mini-inner{
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;

  display: grid !important;
  grid-template-columns: 70px 1fr auto !important; /* logo | search | menu */
  align-items: center !important;
  gap: 16px !important;
}

/* logo */
.sticky-mini-logo img{
  max-height: 38px !important;
  width: auto !important;
}

/* search - sa nu dispara */
.sticky-mini-search{
  height: 42px !important;
  max-width: 640px !important;
  width: 100% !important;

  background: #f5f6f8 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 999px !important;
  padding: 0 10px !important;
}

.sticky-mini-search__input{
  height: 42px !important;
  color: #111 !important;
}

.sticky-mini-search__btn{
  color: #111 !important;
}

/* meniu dreapta */
.sticky-mini-nav a,
.sticky-mini-nav a:visited{
  color: #111 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* pe mobil: ascunde meniul, lasa doar logo + search */
@media (max-width: 990px){
  .sticky-mini-nav{ display: none !important; }
  .sticky-mini-inner{ grid-template-columns: 70px 1fr !important; }
}
/* ===========================
   STICKY MINI HEADER – FINAL
   =========================== */

:root{
  --mini-accent: #22c55e; /* accent (verde fresh). schimba daca vrei */
}

/* bara */
.sticky-mini-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  height: 66px;
  display: flex;
  align-items: center;

  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);

  transform: translateY(-110%);
  transition: transform .18s ease;
}

.sticky-mini-header.is-visible{
  transform: translateY(0);
}

/* container */
.sticky-mini-inner{
  width: 100%;
  max-width: 1240px;     /* apropiat de Aronia */
  margin: 0 auto;
  padding: 0 18px;

  display: grid;
  grid-template-columns: 86px minmax(280px, 640px) 1fr;
  align-items: center;
  gap: 18px;
}

/* logo */
.sticky-mini-left{
  display: flex;
  align-items: center;
}
.sticky-mini-logo img{
  max-height: 40px;
  width: auto;
  display: block;
}

/* search */
.sticky-mini-search{
  height: 44px;
  width: 100%;
  max-width: 640px;

  display: flex;
  align-items: center;

  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 0 10px;

  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.sticky-mini-search__input{
  height: 44px;
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #111;
  padding: 0 10px;
  font-size: 14px;
}

.sticky-mini-search__input::placeholder{
  color: rgba(0,0,0,.55);
}

.sticky-mini-search__btn{
  border: 0;
  background: transparent;
  color: #111;
  padding: 0 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* focus premium + accent discret */
.sticky-mini-search:focus-within{
  background: #fff;
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}
.sticky-mini-search:focus-within .sticky-mini-search__btn{
  color: var(--mini-accent);
}

/* meniu */
.sticky-mini-nav{
  justify-self: end;
}
.sticky-mini-menu{
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sticky-mini-nav a,
.sticky-mini-nav a:visited{
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .2px;
  padding: 10px 2px;
  opacity: .9;
  transition: opacity .12s ease, color .12s ease;
}
.sticky-mini-nav a:hover{
  opacity: 1;
  color: var(--mini-accent);
}

/* mobile */
@media (max-width: 990px){
  .sticky-mini-nav{ display: none; }
  .sticky-mini-inner{
    grid-template-columns: 70px 1fr;
    gap: 12px;
  }
  .sticky-mini-header{ height: 62px; }
  .sticky-mini-search{ height: 42px; }
  .sticky-mini-search__input{ height: 42px; }
}
/* FORCE OVERRIDE – ca să bată peste Whisper */
.sticky-mini-header{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.10) !important;
  height:66px !important;
  display:flex !important;
  align-items:center !important;
}

.sticky-mini-inner{
  width:100% !important;
  max-width:1240px !important;
  margin:0 auto !important;
  padding:0 18px !important;
  display:grid !important;
  grid-template-columns:86px minmax(280px, 640px) 1fr !important;
  align-items:center !important;
  gap:18px !important;
}
/* ===== Finisaj final (layout + echilibru vizual) ===== */

/* mai mult aer stanga/dreapta */
#stickyMiniHeader .sticky-mini-inner{
  padding: 0 24px !important;
  max-width: 1280px !important;
  grid-template-columns: 110px minmax(260px, 560px) 1fr !important;
}

/* logo mai prezent */
#stickyMiniHeader .sticky-mini-logo img{
  max-height: 44px !important;
}

/* search mai “premium”: un pic mai scurt, border mai fin */
#stickyMiniHeader .sticky-mini-search{
  max-width: 560px !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* buton search cu accent discret (brand) */
#stickyMiniHeader .sticky-mini-search:focus-within{
  border-color: rgba(34,197,94,.55) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.16) !important;
}
#stickyMiniHeader .sticky-mini-search:focus-within .sticky-mini-search__btn{
  color: #22c55e !important;
}

/* meniu: spacing + nu lipit de margine */
#stickyMiniHeader .sticky-mini-menu{
  gap: 22px !important;
}
#stickyMiniHeader .sticky-mini-nav a{
  padding: 10px 4px !important;
  font-weight: 700 !important;
}

/* animatie mai smooth la aparitie */
#stickyMiniHeader{
  transition: transform .22s ease, box-shadow .22s ease !important;
}
#stickyMiniHeader.is-visible{
  box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
}
/* ===== RETUS FINAL – echilibru vizual ===== */

/* 1) Logo mai prezent + aliniere perfectă */
#stickyMiniHeader .sticky-mini-left{
  align-items: center !important;
}
#stickyMiniHeader .sticky-mini-logo img{
  max-height: 48px !important;   /* 46–52 dupa gust */
}

/* 2) Search mai scurt + mai “crisp” */
#stickyMiniHeader .sticky-mini-inner{
  grid-template-columns: 120px minmax(240px, 520px) 1fr !important;
}
#stickyMiniHeader .sticky-mini-search{
  max-width: 520px !important;
  height: 42px !important;
}
#stickyMiniHeader .sticky-mini-search__input{
  height: 42px !important;
  font-size: 14px !important;
}

/* 3) Meniu: mai aproape de centru + hover premium */
#stickyMiniHeader .sticky-mini-inner{
  max-width: 1240px !important;   /* il “strange” putin spre centru */
  padding: 0 22px !important;
}
#stickyMiniHeader .sticky-mini-menu{
  gap: 20px !important;
}
#stickyMiniHeader .sticky-mini-nav a{
  position: relative !important;
  padding: 10px 6px !important;
}

/* underline elegant la hover */
#stickyMiniHeader .sticky-mini-nav a::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 2px;
  background: #22c55e;           /* accent verde (schimba daca vrei) */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .14s ease;
  border-radius: 2px;
  opacity: .9;
}
#stickyMiniHeader .sticky-mini-nav a:hover::after{
  transform: scaleX(1);
}
/* ===== FINAL POLISH (aliniere + inaltime + echilibru) ===== */

/* 1) bara putin mai joasa (sa nu para groasa) */
#stickyMiniHeader{
  height: 62px !important;
}

/* 2) aliniere perfecta pe verticala */
#stickyMiniHeader .sticky-mini-inner{
  height: 62px !important;
  align-items: center !important;
}

/* 3) logo centrat si putin mai mare */
#stickyMiniHeader .sticky-mini-logo img{
  max-height: 46px !important;
}

/* 4) search mai compact (sa nu “traga” prea mult) */
#stickyMiniHeader .sticky-mini-search{
  height: 40px !important;
  max-width: 500px !important;
}
#stickyMiniHeader .sticky-mini-search__input{
  height: 40px !important;
}

/* 5) meniu: spatiere si aliniere */
#stickyMiniHeader .sticky-mini-menu{
  gap: 18px !important;
}
#stickyMiniHeader .sticky-mini-nav{
  align-self: center !important;
}
/* ===== Mini header: adaugare iconite cont + cos ===== */

#stickyMiniHeader .sticky-mini-inner{
  /* logo | search | nav | icons */
  grid-template-columns: 120px minmax(240px, 520px) 1fr auto !important;
}

#stickyMiniHeader .sticky-mini-icons{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-self: end !important;
}

#stickyMiniHeader .sticky-mini-icon{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: #111 !important;
  background: transparent !important;
}

#stickyMiniHeader .sticky-mini-icon:hover{
  background: rgba(0,0,0,.05) !important;
}

#stickyMiniHeader .sticky-mini-icon svg{
  fill: currentColor !important;
}

/* badge cos */
#stickyMiniHeader .sticky-mini-badge{
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 18px !important;
  text-align: center !important;
  background: #22c55e !important; /* accent */
  color: #fff !important;
}
@media (max-width: 990px){
  #stickyMiniHeader .sticky-mini-nav{ display:none !important; }
  #stickyMiniHeader .sticky-mini-inner{
    grid-template-columns: 70px 1fr auto !important; /* logo | search | icons */
  }
}
/* lupa: perfect centrata + aspect clean */
#stickyMiniHeader .sticky-mini-search__btn{
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
}

#stickyMiniHeader .sticky-mini-search__btn svg{
  display: block !important;
}
/* ===== Account popover (mobile) – polish estetic ===== */

/* containerul popover-ului */
.account-actions__nav{
  padding: 18px !important;
}

/* lista sa fie pe 2 coloane cu gap frumos */
.account-actions__list{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* fiecare item */
.account-actions__list-item{
  margin: 0 !important;
}

/* butoane: aspect premium */
.account-actions__link{
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  font-weight: 650 !important;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

/* hover / tap */
.account-actions__link:hover{
  border-color: rgba(0,0,0,.22) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  transform: translateY(-1px) !important;
}

/* icon-ul sa nu fie prea mare */
.account-actions__icon{
  display: inline-flex !important;
  align-items: center !important;
}

/* pe ecrane foarte mici: 1 coloana */
@media (max-width: 360px){
  .account-actions__list{
    grid-template-columns: 1fr !important;
  }
}
.account-actions__link.button-secondary{
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: none !important;
}
/* optional: titlu */
.account-actions__title{
  margin-bottom: 12px !important;
  font-size: 18px !important;
  font-weight: 750 !important;
}
/* ===== Account popover: 2 butoane pe un rand + mai mici ===== */

.account-actions__nav{
  padding: 14px 16px !important;
}

.account-actions__list{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* unul langa altul */
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* buton mai mic + mai atractiv */
.account-actions__link{
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 12px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

.account-actions__link:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  border-color: rgba(0,0,0,.18) !important;
}

/* pe ecrane foarte mici: revine pe 1 coloana */
@media (max-width: 360px){
  .account-actions__list{ grid-template-columns: 1fr !important; }
}
/* ===== Card/popover: look mai premium ===== */
.account-actions__nav{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(10px) !important;
}
/* primul buton = accent */
.account-actions__list-item:first-child .account-actions__link{
  background: #22c55e !important;  /* verde accent */
  color: #fff !important;
  border-color: rgba(34,197,94,.65) !important;
  box-shadow: 0 10px 26px rgba(34,197,94,.28) !important;
}
.account-actions__list-item:first-child .account-actions__link:hover{
  box-shadow: 0 14px 34px rgba(34,197,94,.34) !important;
}
/* FORCE: 2 coloane (side-by-side) */
.account-actions__nav .account-actions__list{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
}

/* scoate orice "width: 100%" / block care le pune una sub alta */
.account-actions__nav .account-actions__list-item{
  width: auto !important;
  margin: 0 !important;
}

.account-actions__nav .account-actions__link{
  width: 100% !important;         /* fiecare in coloana lui */
  display: inline-flex !important;
}
/* Accent doar pentru login */
.account-actions__nav a[href*="/account/login"]{
  background: #22c55e !important;
  color: #fff !important;
  border-color: rgba(34,197,94,.65) !important;
  box-shadow: 0 12px 26px rgba(34,197,94,.28) !important;
}

/* Register ramane alb (secondary) */
.account-actions__nav a[href*="/account/register"]{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
}
.account-actions__nav .account-actions__link{
  min-height: 40px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.account-actions__nav .account-actions__link{
  min-height: 40px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
/* ===== FIX FINAL: butoane side-by-side in account popover ===== */

/* containerul cu cele 2 butoane */
.account-actions__list{
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  width: 100% !important;

  /* anuleaza orice spacing ciudat */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;

  /* anuleaza limitari care le imping in stanga */
  justify-content: space-between !important;
  align-items: stretch !important;
}

/* fiecare buton ia jumatate din latime */
.account-actions__list-item{
  flex: 1 1 0 !important;
  width: auto !important;
  margin: 0 !important;
}

/* link-ul sa umple complet coloana lui */
.account-actions__link{
  width: 100% !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

.account-actions__link:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
  border-color: rgba(0,0,0,.18) !important;
}

/* accent DOAR pe login (Autentificare) */
.account-actions__nav a[href*="/account/login"]{
  background: #22c55e !important;
  color: #fff !important;
  border-color: rgba(34,197,94,.65) !important;
  box-shadow: 0 12px 26px rgba(34,197,94,.28) !important;
}

/* register ramane light */
.account-actions__nav a[href*="/account/register"]{
  background: #ffffff !important;
  color: #111 !important;
}

/* optional: pe ecrane foarte mici revine pe coloana */
@media (max-width: 360px){
  .account-actions__list{
    flex-direction: column !important;
  }
}
/* ===== NUCLEAR FIX: Whisper mobile account buttons side-by-side ===== */

.account-actions__nav .account-actions__list{
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: 12px !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ANULEAZA orice "clear/float" care forteaza rand nou */
.account-actions__nav .account-actions__list-item{
  float: none !important;
  clear: none !important;
  display: block !important;
  flex: 1 1 0 !important;
  width: 50% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* butonul umple coloana lui */
.account-actions__nav .account-actions__link{
  float: none !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;

  justify-content: center !important;
  align-items: center !important;

  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

/* hover */
.account-actions__nav .account-actions__link:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.14) !important;
  border-color: rgba(0,0,0,.18) !important;
}

/* Accent DOAR login */
.account-actions__nav a[href*="/account/login"]{
  background: #22c55e !important;
  color: #fff !important;
  border-color: rgba(34,197,94,.65) !important;
  box-shadow: 0 12px 26px rgba(34,197,94,.28) !important;
}

/* Register secundar */
.account-actions__nav a[href*="/account/register"]{
  background: #fff !important;
  color: #111 !important;
}
/* ===== Account popover – butoane mici, verticale ===== */

.account-actions__list{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* buton compact */
.account-actions__link{
  min-height: 34px !important;
  padding: 6px 12px !important;

  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;

  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: background .15s ease, box-shadow .15s ease, transform .12s ease !important;
}

.account-actions__link:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.12) !important;
}

/* Accent doar pentru Autentificare */
.account-actions__nav a[href*="/account/login"]{
  background: #22c55e !important;
  color: #fff !important;
  border-color: rgba(34,197,94,.6) !important;
  box-shadow: 0 6px 14px rgba(34,197,94,.28) !important;
}

/* Creeaza cont – discret */
.account-actions__nav a[href*="/account/register"]{
  background: #f8f8f8 !important;
  color: #111 !important;
}
/* ===== FINAL: butoane foarte mici + mai distantate ===== */

.account-actions__nav .account-actions__list{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;              /* mai depărtate între ele */
  padding: 0 !important;
  margin: 0 !important;
}

/* butoane mult mai mici */
.account-actions__nav .account-actions__link,
.account-actions__nav .account-actions__link.button-secondary{
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 14px !important;

  font-size: 11.5px !important;
  line-height: 26px !important;
  font-weight: 600 !important;

  border-radius: 999px !important;   /* pill elegant */
  box-shadow: 0 3px 8px rgba(0,0,0,.08) !important;
}

/* hover discret */
.account-actions__nav .account-actions__link:hover{
  transform: translateY(-0.5px) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.12) !important;
}

/* Autentificare – accent light, nu masiv */
.account-actions__nav a[href*="/account/login"]{
  background: #6cbc3d !important;
  color: #fff !important;
  border: none !important;
}

/* Creează cont – foarte discret */
.account-actions__nav a[href*="/account/register"]{
  background: #f4f4f4 !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
/* ===== FINAL POLISH: putin mai mari + mai aerisite ===== */

.account-actions__nav .account-actions__list{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;          /* +2px spatiu intre ele */
  padding: 0 !important;
  margin: 0 !important;
}

.account-actions__nav .account-actions__link,
.account-actions__nav .account-actions__link.button-secondary{
  height: 30px !important;       /* +4px */
  min-height: 30px !important;
  padding: 0 16px !important;    /* +2px lateral */

  font-size: 12.5px !important;  /* +1px */
  line-height: 30px !important;
  font-weight: 600 !important;

  border-radius: 999px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.09) !important;
}

/* Autentificare – accent echilibrat */
.account-actions__nav a[href*="/account/login"]{
  background: #6cbc3d !important;
  color: #fff !important;
}

/* Creeaza cont – discret */
.account-actions__nav a[href*="/account/register"]{
  background: #f5f5f5 !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
/* ===== DISTANTA REALA intre butoane (Whisper override) ===== */

.account-actions__nav .account-actions__list{
  display: flex !important;
  flex-direction: column !important;
}

/* FORTAM distanta pe butoane */
.account-actions__nav .account-actions__list-item{
  margin-bottom: 14px !important;
}

/* ultimul fara spatiu */
.account-actions__nav .account-actions__list-item:last-child{
  margin-bottom: 0 !important;
}
/* ===== ACCOUNT POPOVER – FIX FINAL ===== */

/* containerul care tine butoanele */
.account-actions__nav .account-actions__list{
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 0 !important;   /* creeaza spatiu real intre ele */
}

/* fiecare item creeaza spatiu prin padding intern */
.account-actions__nav .account-actions__list-item{
  padding: 6px 0 !important;    /* ASTA e distanta vizuala */
}

/* butoane – DIMENSIUNE FINALA */
.account-actions__nav .account-actions__link,
.account-actions__nav .account-actions__link.button-secondary{
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 18px !important;

  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 32px !important;

  border-radius: 999px !important;
  border: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: background .15s ease, transform .12s ease, box-shadow .12s ease !important;
}

/* CULOARE IDENTICA cu bara verde de sus */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  background: #7ac143 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(122,193,67,.35) !important;
}

/* hover */
.account-actions__nav a:hover{
  background: #6ab233 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(122,193,67,.45) !important;

}

/* 2) Asigură layout vertical corect + spațiu între butoane */
.account-actions__nav .account-actions__list{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;                 /* distanța dorită */
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Stil butoane + culoarea ca bara verde de sus */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  background: #7ac143 !important;       /* verde ca top bar */
  color: #fff !important;
  border: none !important;

  height: 30px !important;
  min-height: 30px !important;
  padding: 0 16px !important;
  font-size: 12.5px !important;
  line-height: 30px !important;
  font-weight: 600 !important;

  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* resetăm orice “lipire” din temă */
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* 4) FORTĂM distanța chiar dacă tema încearcă să le lipească */
.account-actions__nav a[href*="/account/register"]{
  margin-top: 14px !important;          /* distanță garantată între ele */
}

/* hover */
.account-actions__nav a[href*="/account/login"]:hover,
.account-actions__nav a[href*="/account/register"]:hover{
  background: #6ab233 !important;
}
/* ===== Account popover – fix layout (nu taie textul) ===== */

/* chenar mai mic DAR stabil */
.account-actions__nav{
  width: auto !important;
  max-width: 360px !important;      /* mic, dar nu strange continutul */
  padding: 16px !important;
  border-radius: 16px !important;
}

/* butoanele sa fie pe latime suficienta si textul sa nu se rupa */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  min-width: 210px !important;      /* IMPORTANT: previne "bulinele" */
  width: 210px !important;          /* le face egale */
  white-space: nowrap !important;
  text-align: center !important;

  height: 32px !important;
  min-height: 32px !important;
  padding: 0 18px !important;

  border-radius: 999px !important;
  background: #7ac143 !important;   /* verde top bar */
  color: #fff !important;
  border: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* distanta REALA intre ele */
.account-actions__nav a[href*="/account/register"]{
  margin-top: 14px !important;
}

/* hover */
.account-actions__nav a[href*="/account/login"]:hover,
.account-actions__nav a[href*="/account/register"]:hover{
  background: #6ab233 !important;
}
/* ===== Micșorează chenarul Cont ===== */

.account-actions__nav{
  max-width: 300px !important;   /* mai îngust */
  padding: 12px !important;      /* mai mic decât înainte */
  border-radius: 14px !important;
}
/* ===== Centreaza titlul si butoanele in card ===== */

/* titlul "Cont" */
.account-actions__title{
  text-align: center !important;
}

/* lista de butoane */
.account-actions__list{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* CENTRU */
}

/* fiecare buton centrat */
.account-actions__list-item{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
/* ===== Centreaza butoanele in card ===== */

/* containerul listei */
.account-actions__nav .account-actions__list{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;      /* centru */
  justify-content: center !important;
}

/* fiecare item sa nu ramana "lipit" stanga */
.account-actions__nav .account-actions__list-item{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;  /* centru */
}

/* butonul efectiv centrat */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== Centreaza boxul care contine butoanele (Whisper) ===== */

/* gaseste orice container din popover care ARE butoanele de login/register */
.account-actions__nav :has(> a[href*="/account/login"]),
.account-actions__nav :has(> a[href*="/account/register"]){
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* daca butoanele sunt in interiorul unui LI/DIV, le centram si pe ele */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  margin: 0 auto !important;
}
/* ===== Centreaza PERFECT cardul interior + spacing sigur ===== */

/* cardul alb interior (cel care inconjoara butoanele) */
.account-actions__nav .account-actions__list{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  /* scoate orice offset din tema */
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* centreaza fiecare rand (li) */
.account-actions__nav .account-actions__list-item{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;

  /* anuleaza orice "lipire" */
  margin: 0 !important;
  padding: 0 !important;
}

/* butoanele: anuleaza orice margin negativ/transform din tema */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  margin: 0 auto !important;
  transform: none !important;
}

/* SPATIU GARANTAT intre ele: doar pe al 2-lea buton */
.account-actions__nav .account-actions__list-item + .account-actions__list-item{
  margin-top: 14px !important;
}
/* ==========================
   Account popover: FINAL (centrare + spacing + chenar mic)
   ========================== */

/* 1) micșorează chenarul mare */
.account-actions__nav{
  padding: 12px 14px !important;
  max-width: 340px !important;
}

/* 2) selectăm direct containerul care conține cele 2 linkuri (login + register)
      și îl facem coloană centrată cu gap */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  /* resetăm orice “lipire” din temă */
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* containerul comun al butoanelor = părintele lor */
.account-actions__nav a[href*="/account/login"]{
  /* nimic aici, doar îl folosim ca ancoră */
}

/* facem părintele comun flex-col + center + gap */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/login"]{
  /* noop */
}

.account-actions__nav a[href*="/account/login"]{
  /* noop */
}

/* AICI e trucul: părintele ambelor linkuri îl selectăm cu :has() */
.account-actions__nav :has(> a[href*="/account/login"]):has(> a[href*="/account/register"]){
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;               /* distanța dintre ele */
  width: 100% !important;
}

/* 3) dimensiune + culoare ca bara de sus */
.account-actions__nav a[href*="/account/login"],
.account-actions__nav a[href*="/account/register"]{
  width: 230px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 18px !important;

  border-radius: 999px !important;
  background: #7ac143 !important;
  color: #fff !important;
  border: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
}
/* ===== Titlu "Cont" – look premium ===== */

.account-actions__title{
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #7ac143 !important;          /* verde ca bara de sus */
  letter-spacing: .2px !important;
  margin: 4px 0 14px !important;
}

/* linie discreta sub titlu */
.account-actions__title::after{
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(122,193,67,.35) !important;
  margin: 10px auto 0 !important;
}
/* Categories bar (Custom Liquid) */
.categories-bar{
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.categories-bar__list{
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.categories-bar__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #2b2b2b;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.categories-bar__link:hover{
  color: #5bbf5a;          /* verdele de sus */
  border-bottom-color: #5bbf5a;
}
/* Categories bar */
.categories-bar{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.categories-bar__list{
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  margin:0;
  list-style:none;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.categories-bar__link{
  display:inline-flex;
  align-items:center;
  font-weight:700;
  font-size:14px;
  color:#2b2b2b;
  text-decoration:none;
  white-space:nowrap;
  padding:6px 2px;
  border-bottom:2px solid transparent;
}

.categories-bar__link:hover{
  color:#5bbf5a;
  border-bottom-color:#5bbf5a;
}
/* Categories bar inside sticky mini header */
.categories-bar--mini{
  background: transparent;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 10px;
}

.categories-bar--mini .categories-bar__list{
  padding: 10px 16px;
  justify-content: center;
  gap: 18px;
}

.categories-bar--mini .categories-bar__link{
  font-size: 13px;
  font-weight: 700;
  padding: 6px 2px;
}

/* pe mobil: să nu se înghesuie, să poți scroll pe orizontală */
@media (max-width: 749px){
  .categories-bar--mini .categories-bar__list{
    justify-content: flex-start;
    overflow-x: auto;
  }
}
/* FIX: o singură linie verde la hover pe categorii */
.categories-bar__link{
  position: relative;
  text-decoration: none !important;
}

.categories-bar__link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #28c76f; /* verdele tău */
  transition: width .25s ease;
}

.categories-bar__link:hover::after,
.categories-bar__link:focus::after{
  width: 100%;
}

/* elimină orice underline / border dublu din temă */
.categories-bar__link:hover{
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Main header categories bar */
.categories-bar--main{
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Mini header categories bar (already used) */
.categories-bar--mini{
  background: transparent;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 10px;
}
.categories-bar--main{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.categories-bar__list{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:10px 16px;
  overflow-x:auto;
  white-space:nowrap;
}

.categories-bar__link{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
/* Bara superioara custom – schimbare din verde in albastru */
.top-info-bar,
.header-top-bar,
.custom-top-bar {
  background-color:rgb(31, 136, 228) !important;
}
/* Cont popup – butoane (Autentificare / Creează cont) la fel ca bara de sus */
.account-actions__link.button-secondary,
.account-actions__link.button-secondary:visited,
.account-actions__link.button-secondary:hover,
.account-actions__link.button-secondary:active {
  background: #1e88e5 !important;
  border-color: #1e88e5 !important;
  color: #fff !important;
}

/* daca tema aplica stil pe butoane prin alt selector */
.account-actions__list .button,
.account-actions__list a.button {
  background: #1e88e5 !important;
  border-color: #1e88e5 !important;
  color: #fff !important;
}
/* Titlu popup Cont */
.account-actions__title,
.account-actions h2,
.account-actions__heading {
  color: #1e88e5 !important; /* aceeași culoare ca bara */
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
}
/* Linie sub titlul Cont */
.account-actions__title::after,
.account-actions h2::after {
  background-color: #1e88e5 !important;
}
.account-actions__title {
  text-transform: none;
}
/* Categories bar – look Aronia */
.categories-bar{
  background: #f7f7ff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.categories-bar__list{
  display:flex;
  gap: 28px;
  align-items:center;
  justify-content:center;
  padding: 14px 16px;
  margin: 0;
  list-style: none;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.categories-bar__link{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  color: #4b3c83; /* mov “aronia-like” */
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
}

.categories-bar__icon svg{
  width: 18px;
  height: 18px;
  display:block;
}

/* Face iconitele “duotone” simplu */
.categories-bar__icon svg *{
  fill: currentColor;
}

/* Hover/active – o singura linie frumoasa */
.categories-bar__link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  transition: .18s ease;
}
.categories-bar__link:hover::after,
.categories-bar__link:focus-visible::after{
  background: #67b34b; /* verde ca Aronia (schimbi cu albastru daca vrei) */
}
/* Categories bar - full width */
.categories-bar{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* keep content aligned like the rest of the site */
.categories-bar__list{
  max-width: 1200px;   /* poți crește dacă tema are alt max */
  margin: 0 auto;
  padding: 0 20px;     /* spațiu frumos la margini */
  list-style: none;
  display: flex;
  gap: 26px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
/* Color theme for your site */
:root{
  --kidz-bar-bg: #f6f8ff;      /* fundal light albăstrui */
  --kidz-bar-text: #1f2937;    /* text închis */
  --kidz-accent: #2563eb;      /* accent albastru (hover/active) */
}

.categories-bar{
  background: var(--kidz-bar-bg);
}

.categories-bar__link{
  color: var(--kidz-bar-text);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.categories-bar__link:hover{
  background: rgba(37, 99, 235, .08);
  color: var(--kidz-accent);
  transform: translateY(-1px);
}

/* o singură linie jos (ca să nu mai fie “dublă”) */
.categories-bar__link::after{
  content:"";
  display:block;
  height: 2px;
  width: 0;
  background: var(--kidz-accent);
  border-radius: 2px;
  transition: width .15s ease;
}
.categories-bar__link:hover::after{
  width: 100%;
}
.categories-bar__icon{
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
/* =========================
   CATEGORIES BAR (FULL WIDTH)
   ========================= */

:root{
  --catbar-bg: #1e6eea;        /* albastrul barei */
  --catbar-text: #ffffff;      /* text alb */
  --catbar-hover: rgba(255,255,255,.22);
  --catbar-underline: rgba(255,255,255,.85);
}

/* Bara full width chiar daca e intr-un container */
.categories-bar{
  background: var(--catbar-bg);
  color: var(--catbar-text);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.categories-bar__list{
  list-style: none;
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 16px;
}

.categories-bar__link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--catbar-text);
  text-decoration: none !important; /* taie sublinierile default */
  font-weight: 700;
  letter-spacing: .2px;
  padding: 8px 10px;
  border-radius: 999px;
  line-height: 1;
}

/* o singura linie la hover (nu doua) */
.categories-bar__link::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: var(--catbar-underline);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  border-radius: 999px;
}

.categories-bar__link:hover{
  background: var(--catbar-hover);
}

.categories-bar__link:hover::after{
  transform: scaleX(1);
}

.categories-bar__icon{
  font-size: 16px;
  line-height: 1;
}

.categories-bar__text{
  font-size: 15px;
}

/* =========================
   MINI HEADER (mai mic)
   ========================= */

/* Cand bara e in sticky mini header, o facem mai compacta */
.sticky-mini-header .categories-bar__list{
  padding: 6px 12px;
  gap: 16px;
}

.sticky-mini-header .categories-bar__text{
  font-size: 13px;
}

.sticky-mini-header .categories-bar__icon{
  font-size: 14px;
}

.sticky-mini-header .categories-bar__link{
  padding: 6px 8px;
}
/* 1) Scoate linia de sub hover (ramane doar chenarul) */
.categories-bar__link::after{
  display: none !important;
  content: none !important;
}
/* 2) Micsoreaza bara pe verticala */
.categories-bar__list{
  padding: 6px 12px !important;   /* era prea mare */
  gap: 18px !important;
}

.categories-bar__link{
  padding: 6px 10px !important;   /* mai compact */
}

.categories-bar__icon{
  font-size: 14px !important;
}

.categories-bar__text{
  font-size: 14px !important;
}
.categories-bar{
  border-bottom: 0 !important; /* optional: scoate linia de jos a barei */
}
/* MINI header categories bar: mai mica pe verticala */
.categories-bar--mini{
  padding: 0 !important;
}

.categories-bar--mini .categories-bar__list{
  padding: 6px 14px !important;   /* inaltimea barei */
  gap: 16px !important;
  min-height: 44px !important;    /* tine totul compact */
  align-items: center !important;
}

.categories-bar--mini .categories-bar__link{
  padding: 6px 10px !important;
  line-height: 1 !important;
  font-size: 14px !important;
}

.categories-bar--mini .categories-bar__icon{
  font-size: 14px !important;
}
/* Aliniere verticala in sticky mini header */
.sticky-mini-header .sticky-mini-inner{
  display: flex !important;
  align-items: center !important;
}
/* =========================
   CATEGORIES BAR – FULL WIDTH (MAIN HEADER)
   ========================= */
.categories-bar--main {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
/* =========================
   CATEGORIES BAR – STICKY MINI HEADER (ON WHITE)
   ========================= */
.sticky-mini-header .categories-bar {
  background: transparent !important;
  padding: 6px 0 !important;
  box-shadow: none !important;
}

.sticky-mini-header .categories-bar__list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 12px;
}

.sticky-mini-header .categories-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;

  /* culori pe alb */
  color: #0b2a5a;
  background: rgba(31, 111, 235, 0.08);
  border: 1px solid rgba(31, 111, 235, 0.20);
}

/* hover: doar chenarul (NU linie verde) */
.sticky-mini-header .categories-bar__link:hover,
.sticky-mini-header .categories-bar__link:focus-visible {
  background: rgba(31, 111, 235, 0.14);
  border-color: rgba(31, 111, 235, 0.35);
  outline: none;
}

/* scoate orice underline/linie extra pe hover (din tema ta) */
.sticky-mini-header .categories-bar__link::after,
.sticky-mini-header .categories-bar__link::before {
  content: none !important;
  display: none !important;
}
:root{
  --ki-blue: #2F86FF; /* mai deschis (poți ajusta) */
}

/* bara de sus (announcement/top bar) */
.announcement-bar,
.top-info-bar,
.header__top-bar{
  background: var(--ki-blue) !important;
}

/* bara categorii (main) */
.categories-bar--main{
  background: var(--ki-blue) !important;
}
/* Bara de căutare mare în header */
.header-search-bar,
.header__search,
.search{
  max-width: 780px !important;
  width: 100% !important;
}

.header-search-bar input,
.header__search input,
.search input{
  height: 54px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  padding-left: 18px !important;
}
/* === BIG SEARCH BAR IN HEADER === */
.header-search-bar,
.header__search,
.header__column .search,
.header__column--center .search{
  width: 100% !important;
  max-width: 820px !important;
}

.header-search-bar input,
.header__search input,
.search input{
  height: 54px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  padding: 0 56px 0 18px !important;
}

/* iconița lupă mai „curată” și centrată */
.header-search-bar button,
.header__search button,
.search button{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  margin-right: 6px !important;
}
:root{
  --ki-blue: #2F86FF; /* mai deschis */
}

/* bara de sus */
.announcement-bar,
.top-info-bar,
.header__top-bar{
  background: var(--ki-blue) !important;
}

/* bara categorii */
.categories-bar--main{
  background: var(--ki-blue) !important;
}
/* === FULL BLEED (până la margini) pentru bara de categorii === */
.categories-bar{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* scoate din container */
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}

/* Dacă ai varianta din headerul secundar (sticky) */
.sticky-mini-header .categories-bar{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* === SEARCH BAR – centrată, lungă, premium === */
.header-search-bar,
.header__search,
.header__column--center .search,
.header__column--center .header-search-bar{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* input */
.header-search-bar input,
.header__search input,
.search input{
  width: 100% !important;
  max-width: 760px !important;   /* lungime (poți urca la 860) */
  height: 54px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  padding: 0 58px 0 18px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.06) !important;
}

/* buton lupă */
.header-search-bar button,
.header__search button,
.search button{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  margin-left: -52px !important; /* intră peste input, ca “premium” */
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}
:root{
  --ki-blue: #3B93FF; /* mai deschis decât acum */
}

/* Bara de sus (announcement/top bar) – prinde pe majoritatea temelor */
.announcement-bar,
.announcement-bar__wrapper,
.top-info-bar,
.header__top-bar{
  background: var(--ki-blue) !important;
}
.announcement-bar *,
.announcement-bar__wrapper *,
.top-info-bar *,
.header__top-bar *{
  color: #fff !important;
}

/* Bara de categorii */
.categories-bar{
  background: var(--ki-blue) !important;
}
.categories-bar__link{
  color: #fff !important;
}
/* 1) fă wrapper-ul din header full-bleed */
header .page-width,
header .page-width-desktop,
header .container,
header .header__row,
header .header__row-inner{
  max-width: none !important;
  width: 100% !important;
}

/* 2) scoate padding-ul lateral din wrapper (ăla te oprește să ajungi la margini) */
header .page-width,
header .page-width-desktop,
header .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) bara de categorii – full width */
.categories-bar{
  width: 100% !important;
  border-radius: 0 !important;
}
/* fallback: dacă tema folosește padding pe header wrapper */
header [class*="page-width"],
header [class*="container"],
header [class*="wrapper"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* FULL WIDTH pentru bara de categorii */
.categories-bar,
.categories-bar--mini {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}
/* 1) Permite ieșirea în afara containerelor (altfel stânga e tăiată) */
.header,
.header__row,
.header__row-inner,
.header-wrapper,
.sticky-mini-header,
.shopify-section-header,
.announcement-bar {
  overflow: visible !important;
}

/* 2) Full-bleed REAL (centrare pe viewport, nu pe container) */
nav.categories-bar {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin: 0 !important;          /* anulăm margin-urile vechi */
  border-radius: 0 !important;
}

/* 3) Scoate padding-ul care poate crea spațiul “fals” */
nav.categories-bar .categories-bar__list {
  margin: 0 !important;
  padding-left: 12px !important;  /* mic padding intern, controlat */
  padding-right: 12px !important;
}
/* ============================
   HEADER SEARCH — centered + bigger
   ============================ */

/* containerul barei de căutare */
.header-search-bar,
.header__column--right .search {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* ajustează ușor vertical (dacă e prea sus/jos schimbă 50% -> 52% etc) */
  top: 50% !important;
  translate: 0 -50% !important;

  width: min(1000px, 75vw) !important;  /* mai mare */
  max-width: 1000px !important;
  z-index: 9998 !important;
}

/* input */
.header-search-bar input,
.header-search-bar input[type="search"],
.header__column--right .search input,
.header__column--right .search input[type="search"]{
  width: 100% !important;
  height: 52px !important;
  border-radius: 999px !important;

  padding: 0 56px 0 20px !important; /* loc pt icon */
  font-size: 16px !important;

  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
}

/* focus mai “clean” */
.header-search-bar input:focus,
.header__column--right .search input:focus{
  outline: none !important;
  border-color: rgba(0,0,0,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.10) !important;
}

/* buton/lupă – mai frumos + centrat */
.header-search-bar button,
.header__column--right .search button{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,.04) !important;
}

/* pe ecrane mai mici o facem mai scurtă */
@media (max-width: 990px){
  .header-search-bar,
  .header__column--right .search{
    width: min(520px, 70vw) !important;
  }
}
/* FORCE search bar width (desktop) */
@media (min-width: 990px){
  .header-search-bar,
  .header__column--right .search,
  header .search,
  header .header-search-bar {
    width: 95vw !important;
    max-width: 1400px !important;
    min-width: 920px !important;
  }

  /* dacă input-ul are limită separat */
  .header-search-bar input,
  .header__column--right .search input,
  header .search input {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (min-width: 990px){
  .header-search-bar,
  .header__column--right .search {
    margin-left: -320px !important; /* mută spre stânga */
  }
}
.header-search-bar input {
  font-size: 17px;
}

.header-search-bar input:focus {
  box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15);
}
.categories-bar {
  background: linear-gradient(90deg, #3fa2ff, #4da9ff);
}
.categories-bar__list {
  min-height: 40px;
  padding: 6px 12px;
}
/* Test: prinde bara din headerul mare */
header .categories-bar {
  outline: 4px solid red !important;
}
/* ===== CATEGORIES BAR – SAFE BASE (main + mini) ===== */

/* bara (nav) */
.categories-bar {
  width: 100% !important;
  display: block !important;
}

/* lista */
.categories-bar__list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* MINI (header secundar / sticky) */
.categories-bar--mini .categories-bar__list {
  min-height: 44px !important;
  padding: 6px 14px !important;
  gap: 14px !important;
}

/* MAIN (header principal) */
.categories-bar--main .categories-bar__list {
  min-height: 44px !important;
  padding: 6px 14px !important;
  gap: 14px !important;
}
/* Center categories bar items (main + mini) */
.categories-bar__list{
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.categories-bar{
  width: 100% !important;
}
.categories-bar--main{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.categories-bar--main .categories-bar__list{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}
/* === FORCE categories bar to be full width + centered, only inside the MAIN header area === */
header .categories-bar,
.header .categories-bar,
#shopify-section-header .categories-bar,
section[id*="header"] .categories-bar{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
}

/* Remove any internal container padding that keeps it “inset” */
header .categories-bar .categories-bar__list,
.header .categories-bar .categories-bar__list,
#shopify-section-header .categories-bar .categories-bar__list,
section[id*="header"] .categories-bar .categories-bar__list{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.categories-bar{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.categories-bar__list{
  justify-content: center !important;
  width: 100% !important;
}