/** Shopify CDN: Minification failed

Line 2395:0 All "@import" rules must come first

**/
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap');

* {
  box-sizing: border-box;
}

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

:root {
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

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

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

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

/* Only lock .page-wrapper where it is the scroll container. Below 990px the document scrolls, and
   overflow on .page-wrapper would make it the sticky header's scroll container, moving the header off screen. */
@media (min-width: 990px) {
  html[scroll-lock] .page-wrapper {
    overflow: hidden;
  }
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-inline-end var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }

  /* The theme drawer opens from the inline-end edge, so the shift mirrors in RTL */
  [dir='rtl'] .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: var(--theme-drawer-width, var(--sidebar-width));
  }
}

.page-wrapper--drawer-open {
  margin-inline-end: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

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

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

.product-card,
.collection-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;
}

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

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

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

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

p:empty {
  display: none;
}

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

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

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

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

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

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

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

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

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

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

  width: 100%;

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

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

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

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  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);
  background-color: var(--color-background);
}

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

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

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

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

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

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

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

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

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

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

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

/* Utility */

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

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

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

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

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

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

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

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

  text-align: start;
}

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

  text-align: center;
}

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

  text-align: end;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

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

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

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

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  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);
}

@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 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  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);
}

@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 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  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);
}

@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 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  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);
}

@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 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  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);
}

@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 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, 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);
}

@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 {
  color: currentcolor;
  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 {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

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

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

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

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

/* Buttons */
.button,
.button-secondary,
.button-custom,
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-weight: var(--font-paragraph--weight);
  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-focus-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:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

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

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

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

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

.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-custom {
  --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-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --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);
}

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

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  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;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

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

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

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

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;

  /* Keep the fixed close button clear of the status bar and inline-end notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

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

/* Safe-area env() values are physical; in RTL the button sits by the left-side notch */
[dir='rtl'] .close-button {
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-left, 0px));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.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);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

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

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

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

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (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: start;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

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

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.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);
  inset-inline-start: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

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

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

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

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

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

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

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

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

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

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

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

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

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

  50% {
    transform: scale(1.2);
  }

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

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

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > slideshow-arrows .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

/* Clipped controls preserve accessible paging without intercepting touch taps. */
@media (hover: none) and (pointer: coarse) {
  .resource-list__carousel > [animate-arrows] > :where(slideshow-arrows) > .slideshow-control:not(:focus-visible) {
    position: absolute;
    clip: rect(0 0 0 0);
    animation: none;
  }

  .resource-list__carousel > [animate-arrows] > :where(slideshow-arrows) > .slideshow-control:focus-visible {
    opacity: 1;
    animation: none;
  }
}

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

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Global scrollbar styles */

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

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

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

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

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

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    .spacing-style {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}


/* AutiCarely: Barlow product price and Add to Cart styling */
/* Hide quantity selector and its Horizon wrapper */
.product-information .quantity-selector-wrapper,
.product-information quantity-selector-component,
.product-information .quantity-selector,
.product-information .quantity-label,
product-form-component .quantity-selector-wrapper,
product-form-component quantity-selector-component,
product-form-component .quantity-selector,
product-form-component .quantity-label {
  display: none !important;
}

/* Current price */
product-price,
product-price .price,
.product-details product-price .price,
product-price .price-item__group.price,
product-price .price-item__group.price bdi,
.product-information product-price .price-item__group.price,
.product-information product-price .price-item__group.price bdi {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  color: #a5d4fd !important;
  letter-spacing: 0 !important;
}

/* Old struck-through price — latest requested styling */
product-price s,
product-price del,
product-price .compare-at-price,
product-price [class*="compare"],
product-price .price-item__group.compare-at-price,
product-price .price-item__group.compare-at-price bdi {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  letter-spacing: 0.3px !important;
  color: #25517a !important;
  opacity: 1 !important;
  text-decoration-line: line-through !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: #25517a !important;
  margin-inline-start: 4px !important;
  align-self: flex-end !important;
}

/* Add to Cart button */
.add-to-cart-button,
product-form-component .add-to-cart-button,
.product-information .add-to-cart-button {
  background-color: #a5d4fd !important;
  border-color: #a5d4fd !important;
  border-radius: 999px !important;
  min-height: 70px !important;
  padding-block: 18px !important;
  padding-inline: 24px !important;
}

.add-to-cart-button,
.add-to-cart-button .add-to-cart-text,
.add-to-cart-button span,
product-form-component .add-to-cart-button,
product-form-component .add-to-cart-button .add-to-cart-text,
product-form-component .add-to-cart-button span,
.product-information .add-to-cart-button,
.product-information .add-to-cart-button .add-to-cart-text,
.product-information .add-to-cart-button span {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  letter-spacing: 1.5px !important;
  color: #fdfde0 !important;
  text-transform: none !important;
}

.add-to-cart-button svg,
product-form-component .add-to-cart-button svg,
.product-information .add-to-cart-button svg {
  width: 22px !important;
  height: 22px !important;
  color: #fdfde0 !important;
  fill: none !important;
  stroke: #fdfde0 !important;
  stroke-width: 1.6 !important;
}

.add-to-cart-button svg path,
product-form-component .add-to-cart-button svg path,
.product-information .add-to-cart-button svg path {
  fill: none !important;
  stroke: #fdfde0 !important;
}


/* AutiCarely: small gap after AC product content — Behavior Bundle */
.shopify-section:has(.ac-product-content),
.shopify-section:has([class*="ac-product-content"]) {
  margin-bottom: 40px !important;
}


/* AutiCarely homepage-only Shrine migration fixes */

/* Homepage Shrine slideshow: restore the original horizontal slider behavior */
shrine-home-slideshow-component {
  display: block;
  width: 100%;
}
shrine-home-slideshow-component .slideshow {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
shrine-home-slideshow-component .slideshow::-webkit-scrollbar {
  display: none !important;
}
shrine-home-slideshow-component .slideshow__slide {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  scroll-snap-align: start !important;
}
shrine-home-slideshow-component .slideshow__media {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}
shrine-home-slideshow-component .slideshow__media > img,
shrine-home-slideshow-component .slideshow__media picture,
shrine-home-slideshow-component .slideshow__media picture > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
shrine-home-slideshow-component .slideshow__control-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
shrine-home-slideshow-component .slider-counter__link--dots {
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  padding: 3px !important;
}
shrine-home-slideshow-component .slider-counter__link--dots .dot {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}
shrine-home-slideshow-component .slider-counter__link--dots.is-active .dot {
  background: currentColor !important;
}


/* Restore Shrine slideshow image sizing on the homepage */
shrine-home-slideshow-component .slideshow__media {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}
shrine-home-slideshow-component .slideshow__media > img,
shrine-home-slideshow-component .slideshow__media picture,
shrine-home-slideshow-component .slideshow__media picture > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* The Shrine featured-product title includes a linked duplicate for its original responsive styling. */
.shopify-section:has(shrine-home-media-gallery) .featured-product .product__title > a {
  display: none !important;
}

/* Restore the mobile product-media carousel instead of stacking every image vertically. */
@media screen and (max-width: 749px) {
  .shopify-section:has(shrine-home-media-gallery) .featured-product .product__media-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shopify-section:has(shrine-home-media-gallery) .featured-product .product__media-list::-webkit-scrollbar {
    display: none !important;
  }
  .shopify-section:has(shrine-home-media-gallery) .featured-product .product__media-item {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
  }
}

/* Keep featured-product gallery controls at icon size on the homepage only. */
.shopify-section:has(shrine-home-media-gallery) .featured-product .product__media-wrapper button svg,
.shopify-section:has(shrine-home-media-gallery) .featured-product .product__media-wrapper button svg * {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}
.shopify-section:has(shrine-home-media-gallery) .featured-product .product__media-wrapper button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* AutiCarely mobile drawer styling */
.menu-drawer,.menu-drawer__inner-container,.menu-drawer__navigation-container,header-drawer .menu-drawer{background:linear-gradient(180deg,#f4faff 0%,#e3f3fa 100%)!important}
.menu-drawer__inner-container:before{content:"";display:block;height:6px;background:linear-gradient(90deg,#1a4a7a,#7ec8e3)}
.menu-drawer__close-button,.menu-drawer .close-button{color:#1a4a7a!important}
.menu-drawer__menu-item,.menu-drawer__menu a,.menu-drawer__navigation a{color:#1a4a7a!important;font-weight:700!important;font-size:1.7rem!important;letter-spacing:.2px;padding:16px 20px!important;margin:8px 16px!important;background:#fff;border-left:5px solid #7ec8e3;border-radius:12px;box-shadow:0 2px 8px rgba(26,74,122,.08);display:flex!important;align-items:center;justify-content:space-between;transition:all .2s ease}
.menu-drawer__menu-item:after{content:"›";font-size:1.8rem;color:#7ec8e3}
.menu-drawer__menu-item:hover,.menu-drawer__menu-item:active,.menu-drawer__menu-item[aria-current=page]{background:#1a4a7a!important;color:#fff!important;border-left-color:#7ec8e3}
.menu-drawer__menu-item:hover:after,.menu-drawer__menu-item:active:after{color:#fff}
.menu-drawer__menu li{border:none!important}
.menu-drawer-container:before,.overlay,.header__overlay{background:rgba(26,74,122,.45)!important}


/* ===== AutiCarely – Contact (clean version) ===== */
form[action*="/contact"]{background:#fff;padding:20px 16px;border-radius:14px;border:1px solid #d6ecf5;box-shadow:inset 0 4px 0 #1a4a7a,0 4px 16px rgba(26,74,122,.08)}
form[action*="/contact"] input:not([type="submit"]):not([type="checkbox"]),form[action*="/contact"] textarea{height:48px!important;min-height:48px!important;padding:0 14px!important;font-size:16px!important;font-weight:500!important;line-height:48px;color:#1a4a7a!important;background:#f4faff!important;border:1.5px solid #7ec8e3!important;border-radius:8px!important;box-shadow:none!important}
form[action*="/contact"] textarea{height:100px!important;min-height:100px!important;max-height:180px!important;padding:12px 14px!important;line-height:1.4!important;resize:vertical!important}
form[action*="/contact"] label,form[action*="/contact"] .field__label,form[action*="/contact"] input::placeholder,form[action*="/contact"] textarea::placeholder{font-size:15px!important;font-weight:500!important;color:#3b78ae!important;opacity:1!important}
form[action*="/contact"] input:focus,form[action*="/contact"] textarea:focus{border-color:#1a4a7a!important;background:#fff!important;box-shadow:0 0 0 3px rgba(255,226,122,.7)!important;outline:none!important}
form[action*="/contact"] button[type="submit"],form[action*="/contact"] input[type="submit"]{height:48px!important;font-size:16px!important;font-weight:700!important;background:#ffe27a!important;color:#1a4a7a!important;border:2px solid #1a4a7a!important;border-radius:8px!important;width:100%}
form[action*="/contact"] button[type="submit"]:active{background:#1a4a7a!important;color:#ffe27a!important}


/* Contact button pale yellow and focus ring update */
form[action*="/contact"] button[type="submit"],
form[action*="/contact"] input[type="submit"] {
  background: #fff7cc !important;
  color: #1a4a7a !important;
  border: 2px solid #1a4a7a !important;
}
form[action*="/contact"] button[type="submit"]:active {
  background: #1a4a7a !important;
  color: #fff7cc !important;
}
form[action*="/contact"] input:focus,
form[action*="/contact"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 244, 184, 0.9) !important;
}

/* AutiCarely – Contact page title only */
body:has(form[action*="/contact"]) h1 {
  color: #a5d2fe !important;
}

/* ===== AutiCarely – Header مثل الصورة 2 ===== */

/* الشعار كبير */
header .header-logo img,
header .header-logo__image,
header [class*="logo"] img {
  width: 250px !important;
  max-width: 62vw !important;
  height: auto !important;
}

/* إخفاء البحث والحساب */
header [class*="search"],
header a[href*="/account"],
header [class*="account"] {
  display: none !important;
}

/* Removed old rule that hid the cart bubble and its child elements. */

/* أيقونات رفيعة وبنفس الأزرق */
header svg {
  color: #3b78ae !important;
  stroke-width: 1.5px;
}

/* =====================================================
   AutiCarely – Full Custom CSS (v8)
   ===================================================== */

/* ---------- 1. HEADER (عرض كامل) ---------- */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}
.shopify-section-group-header-group,
#header-group,
.section-header,
header-component,
header.header,
.header {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
}
.header__row,
.header__columns {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
header {
  --icon-stroke-width: 2.5px;
  --page-margin: 0px;
}

/* أيقونات المنيو والسلة: أزرق أفتح + خط غليظ */
header svg:not(.cart-bubble svg) {
  color: #3b78ae !important;
  stroke: #3b78ae;
}
header svg:not(.cart-bubble svg) path,
header svg:not(.cart-bubble svg) line,
header svg:not(.cart-bubble svg) rect,
header svg:not(.cart-bubble svg) circle {
  stroke-width: 2.5px !important;
}

/* الشعار */
header .header-logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
header .header-logo img,
header .header-logo__image {
  width: 250px !important;
  max-width: 62vw !important;
  height: auto !important;
}

/* إخفاء البحث والحساب */
header a[href*="/account"],
header a[aria-label*="Account" i],
header button[aria-label*="Search" i],
header a[aria-label*="Search" i] {
  display: none !important;
}

/* ---------- 2. MOBILE MENU DRAWER ---------- */
.menu-drawer,
.menu-drawer__inner-container,
.menu-drawer__navigation-container {
  background: linear-gradient(180deg, #f4faff 0%, #e3f3fa 100%) !important;
}
.menu-drawer__inner-container::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #1a4a7a, #7ec8e3);
}
.menu-drawer__close-button,
.menu-drawer .close-button {
  color: #1a4a7a !important;
}
.menu-drawer__menu {
  margin-top: 48px !important;
}
.menu-drawer__menu-item {
  color: #1a4a7a !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 16px !important;
  margin: 6px 16px !important;
  background: #ffffff;
  border-left: 4px solid #7ec8e3;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(26, 74, 122, 0.08);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.menu-drawer__menu-item::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
  color: #7ec8e3;
}
.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:active,
.menu-drawer__menu-item[aria-current="page"] {
  background: #1a4a7a !important;
  color: #ffffff !important;
}
.menu-drawer__menu-item:hover::after,
.menu-drawer__menu-item:active::after {
  color: #ffffff;
}
.menu-drawer__menu li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.menu-drawer-container::before,
.overlay,
.header__overlay {
  background: rgba(26, 74, 122, 0.45) !important;
}

/* ---------- 3. CONTACT PAGE ---------- */
body:has(form[action*="/contact"]) {
  background: #f4faff !important;
}
body:has(form[action*="/contact"]) main h1 {
  color: #a5d2fe !important;
  -webkit-text-stroke: 1.5px #1a4a7a;
  paint-order: stroke fill;
}
form[action*="/contact"] {
  background: #ffffff;
  padding: 20px 16px;
  border-radius: 14px;
  border: 1px solid #d6ecf5;
  box-shadow: inset 0 4px 0 #1a4a7a, 0 4px 16px rgba(26, 74, 122, 0.08);
}
form[action*="/contact"] input:not([type="submit"]):not([type="checkbox"]),
form[action*="/contact"] textarea {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 48px;
  color: #1a4a7a !important;
  background: #f4faff !important;
  border: 1.5px solid #7ec8e3 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
form[action*="/contact"] textarea {
  height: 100px !important;
  min-height: 100px !important;
  max-height: 180px !important;
  padding: 12px 14px !important;
  line-height: 1.4 !important;
  resize: vertical !important;
}
form[action*="/contact"] label,
form[action*="/contact"] .field__label,
form[action*="/contact"] input::placeholder,
form[action*="/contact"] textarea::placeholder {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #3b78ae !important;
  opacity: 1 !important;
}
form[action*="/contact"] input:focus,
form[action*="/contact"] textarea:focus {
  border-color: #1a4a7a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 244, 184, 0.9) !important;
  outline: none !important;
}
form[action*="/contact"] button[type="submit"],
form[action*="/contact"] input[type="submit"] {
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: #fff7cc !important;
  color: #1a4a7a !important;
  border: 2px solid #1a4a7a !important;
  border-radius: 8px !important;
  width: 100%;
}
form[action*="/contact"] button[type="submit"]:active {
  background: #1a4a7a !important;
  color: #fff7cc !important;
}
.form-status,
.form__message {
  background: #fff9d6 !important;
  border-left: 5px solid #fff7cc;
  color: #1a4a7a !important;
  border-radius: 10px;
  padding: 12px 16px;
}

/* AutiCarely — ONLY the main product title: deep blue, no outline */
.product-information a[ref="productTitleLink"],
.product-information a[ref="productTitleLink"] *,
.product-information a[ref="productTitleLink"] p,
.product-information a[ref="productTitleLink"] .text-block,
.product-information a[ref="productTitleLink"] :is(h1,h2,h3,h4,h5,h6) {
  color: #3b78ae !important;
  -webkit-text-fill-color: #3b78ae !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
  paint-order: normal !important;
}

/* AutiCarely — product title typography matching reference screenshot */
@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&display=swap');
.product-information a[ref="productTitleLink"],
.product-information a[ref="productTitleLink"] *,
.product-information a[ref="productTitleLink"] p,
.product-information a[ref="productTitleLink"] .text-block,
.product-information a[ref="productTitleLink"] :is(h1,h2,h3,h4,h5,h6),
.featured-product .product__title,
.featured-product .product__title > *,
.featured-product .product__title a {
  font-family: "Faculty Glyphic", serif !important;
  color: #3b78ae !important;
  -webkit-text-fill-color: #3b78ae !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
  paint-order: normal !important;
}


/* AutiCarely — precise blog/article/contact title colors; keep product styles untouched */
.template-blog .blog-post-card__title,
.template-blog .blog-post-card__title *,
.template-blog .blog-post-title,
.template-blog .article-card__title,
.template-article .article__title,
.template-article .article-title,
.template-article .blog-post-title,
.template-article main article h1,
.template-article main article h2,
body:has(form[action*="/contact"]) main h1,
body:has(form[action*="/contact"]) main h2,
body:has(form[action*="/contact"]) main h3,
body:has(form[action*="/contact"]) main h4 {
  color: #3b78ae !important;
  -webkit-text-fill-color: #3b78ae !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}


/* AutiCarely — exact description banner gradient restoration only */
.template-product rte-formatter div[style*="linear-gradient(135deg, #1f4e84"],
.template-product div[style*="linear-gradient(135deg, #1f4e84"] {
  background: linear-gradient(135deg, #1f4e84 0%, #4a9fd4 100%) !important;
  background-image: linear-gradient(135deg, #1f4e84 0%, #4a9fd4 100%) !important;
  background-color: #1f4e84 !important;
}

/* AutiCarely — white text ONLY on Behavior Bundle description banner */
.template-product .text-block--text_aEtTtq rte-formatter div[style*="linear-gradient(135deg, #1f4e84"] > h2,
.template-product .text-block--text_aEtTtq div[style*="linear-gradient(135deg, #1f4e84"] > h2,
.template-product rte-formatter div[style*="linear-gradient(135deg, #1f4e84"] > h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* AutiCarely — FORCE white heading in exact Behavior Bundle banner */
.template-product .text-block--text_aEtTtq h2,
.template-product .text-block--text_aEtTtq rte-formatter h2,
.template-product .text-block--text_aEtTtq div[style*="#1f4e84"] h2,
.template-product rte-formatter div[style*="#1f4e84"] h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* AutiCarely — exact white title in Behavior Bundle description banner */
.template-product .text-block--text_aEtTtq div[style*="linear-gradient(135deg, #1f4e84"] h2,
.template-product .text-block--text_aEtTtq rte-formatter div[style*="linear-gradient(135deg, #1f4e84"] h2,
.template-product .text-block--text_aEtTtq div[style*="#1f4e84"] h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* AutiCarely — unscoped exact blue description banner title fix */
div[style*="linear-gradient(135deg, #1f4e84"] > h2,
div[style*="linear-gradient(135deg, #1f4e84"] h2,
div[style*="#1f4e84"] > h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* AutiCarely — force exact inline-gradient banner heading white */
div[style*="#1f4e84"] > h2,
div[style*="#1f4e84"] h2,
div[style*="linear-gradient"] h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* AutiCarely — normal-sized prices in collection product cards only */
.template-collection product-card .price,
.template-collection product-card .price bdi,
.template-collection product-card .price-item__group,
.template-collection product-card .price-item__group bdi,
.template-collection product-card .compare-at-price,
.template-collection product-card .compare-at-price bdi {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* AutiCarely — blue current-price pill on collection cards only */
.template-collection product-card .price,
.template-collection product-card .price-item__group.price {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  background: #3b78ae !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.template-collection product-card .price bdi,
.template-collection product-card .price-item__group.price bdi {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: inherit !important;
  text-decoration: none !important;
}
.template-collection product-card .compare-at-price,
.template-collection product-card .price-item__group.compare-at-price {
  display: inline-flex !important;
  background: transparent !important;
  color: #3b78ae !important;
  -webkit-text-fill-color: #3b78ae !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
}
.template-collection product-card .compare-at-price bdi,
.template-collection product-card .price-item__group.compare-at-price bdi {
  color: #3b78ae !important;
  -webkit-text-fill-color: #3b78ae !important;
  font-size: inherit !important;
}

/* AutiCarely — make collection price pill clickable through the product-card link */
.template-collection product-card .product-card__link {
  z-index: 5 !important;
}
.template-collection product-card .price,
.template-collection product-card .price bdi,
.template-collection product-card .price-item__group,
.template-collection product-card .price-item__group bdi {
  pointer-events: none !important;
}


header .cart-bubble,
header .cart-bubble__background {
  background: #1a4a7a !important;
  background-color: #1a4a7a !important;
}
header .cart-bubble__text,
header .cart-bubble__text-count {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* AutiCarely — final cart badge colors only */
header .cart-bubble,
header cart-icon .cart-bubble,
header .cart-bubble__background,
header cart-icon .cart-bubble__background {
  background-color: #1a4a7a !important;
  background: #1a4a7a !important;
}
header .cart-bubble__text,
header .cart-bubble__text-count,
header cart-icon .cart-bubble__text,
header cart-icon .cart-bubble__text-count {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* AutiCarely — cart bubble colors and visible real item count */
header cart-icon .cart-bubble:not(.visually-hidden),
header .cart-bubble:not(.visually-hidden) {
  background: #3b78ae !important;
  background-color: #3b78ae !important;
  color: #fff7cc !important;
  opacity: 1 !important;
  visibility: visible !important;
}
header cart-icon .cart-bubble__background,
header .cart-bubble__background {
  background: #3b78ae !important;
  background-color: #3b78ae !important;
}
header cart-icon .cart-bubble__text,
header cart-icon .cart-bubble__text-count,
header .cart-bubble__text,
header .cart-bubble__text-count {
  color: #fff7cc !important;
  -webkit-text-fill-color: #fff7cc !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
header cart-icon .cart-bubble__text-count.hidden,
header .cart-bubble__text-count.hidden {
  display: inline !important;
}


/* AutiCarely — Shrine-inspired cart page styling */
.auticarely-cart-reservation {
  width: 100%;
  background: #08658a;
  color: #fffbe8;
  text-align: center;
  padding: 16px 14px;
  font-weight: 800;
  font-size: clamp(16px, 4vw, 24px);
  letter-spacing: .025em;
}
.auticarely-cart-reservation__message { display: block; }
.cart-page__items { min-width: 0; }
.cart-page__items img { border-radius: 2px; }
.cart-page__summary {
  background: #f1f5f7;
  padding: 22px 18px 28px !important;
  border-radius: 0;
}
.auticarely-cart-discount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid #c9dbe1;
}
.auticarely-cart-discount input {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid #8fb0bf;
  border-radius: 14px;
  background: #f8fafb;
  color: #235480;
  font: inherit;
  letter-spacing: .04em;
}
.auticarely-cart-discount button {
  min-width: 105px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: #08658a;
  color: #fffbe8;
  font: inherit;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.cart-page__summary .cart-summary,
.cart-page__summary .cart-summary__total,
.cart-page__summary .totals { color: #235480; }
.cart-page__summary .cart-summary__total-value,
.cart-page__summary .totals__subtotal-value { color: #7ec8e3; font-weight: 800; }
.cart-page__summary button[name="checkout"],
.cart-page__summary .cart-summary__checkout-button {
  width: 100%;
  min-height: 64px;
  border-radius: 999px;
  background: #7ec8e3;
  color: #fffbe8;
  font-weight: 800;
}
@media (max-width: 749px) {
  .cart-page { gap: 18px; }
  .cart-page__summary { margin-inline: -12px; padding: 20px 18px 28px !important; }
  .auticarely-cart-discount { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
  .auticarely-cart-discount button { min-width: 0; padding-inline: 12px; }
}

/* =====================================================
   AutiCarely – Full Custom CSS (v10)
   ===================================================== */

/* ---------- 1. HEADER (عرض كامل) ---------- */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}
.shopify-section-group-header-group,
#header-group,
header-component,
header.header {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
}
header .header__row,
header .header__columns {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
header {
  --icon-stroke-width: 2.5px;
  --page-margin: 0px;
}
header svg:not(.cart-bubble svg) {
  color: #3b78ae !important;
  stroke: #3b78ae;
}
header svg:not(.cart-bubble svg) path,
header svg:not(.cart-bubble svg) line,
header svg:not(.cart-bubble svg) rect,
header svg:not(.cart-bubble svg) circle {
  stroke-width: 2.5px !important;
}
header .cart-bubble.cart-bubble,
header cart-icon .cart-bubble {
  --color-foreground: #1a4a7a;
  --color-background: #fff4b8;
  --color-foreground-rgb: 26, 74, 122;
  --color-background-rgb: 255, 244, 184;
  color: #fff4b8 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
header .cart-bubble.cart-bubble .cart-bubble__background {
  background: #1a4a7a !important;
  background-color: #1a4a7a !important;
  opacity: 1 !important;
  border-radius: 50% !important;
}
header .cart-bubble.cart-bubble .cart-bubble__text,
header .cart-bubble.cart-bubble .cart-bubble__text-count {
  color: #fff4b8 !important;
  -webkit-text-fill-color: #fff4b8 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  position: relative;
  z-index: 3;
}
header .header-logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
header .header-logo img,
header .header-logo__image {
  width: 250px !important;
  max-width: 62vw !important;
  height: auto !important;
}
header a[href*="/account"],
header a[aria-label*="Account" i],
header button[aria-label*="Search" i],
header a[aria-label*="Search" i] {
  display: none !important;
}

/* ---------- 2. MOBILE MENU DRAWER ---------- */
.menu-drawer,
.menu-drawer__inner-container,
.menu-drawer__navigation-container {
  background: linear-gradient(180deg, #f4faff 0%, #e3f3fa 100%) !important;
}
.menu-drawer__inner-container::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #1a4a7a, #7ec8e3);
}
.menu-drawer__close-button,
.menu-drawer .close-button {
  color: #1a4a7a !important;
}
.menu-drawer__menu {
  margin-top: 48px !important;
}
.menu-drawer__menu-item {
  color: #1a4a7a !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 16px !important;
  margin: 6px 16px !important;
  background: #ffffff;
  border-left: 4px solid #7ec8e3;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(26, 74, 122, 0.08);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.menu-drawer__menu-item::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
  color: #7ec8e3;
}
.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:active,
.menu-drawer__menu-item[aria-current="page"] {
  background: #1a4a7a !important;
  color: #ffffff !important;
}
.menu-drawer__menu-item:hover::after,
.menu-drawer__menu-item:active::after {
  color: #ffffff;
}
.menu-drawer__menu li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.menu-drawer-container::before,
.overlay,
.header__overlay {
  background: rgba(26, 74, 122, 0.45) !important;
}

/* ---------- 3. CONTACT PAGE ---------- */
body:has(form[action*="/contact"]) {
  background: #f4faff !important;
}
body:has(form[action*="/contact"]) main h1 {
  color: #a5d2fe !important;
  -webkit-text-stroke: 1.5px #1a4a7a;
  paint-order: stroke fill;
}
form[action*="/contact"] {
  background: #ffffff;
  padding: 20px 16px;
  border-radius: 14px;
  border: 1px solid #d6ecf5;
  box-shadow: inset 0 4px 0 #1a4a7a, 0 4px 16px rgba(26, 74, 122, 0.08);
}
form[action*="/contact"] input:not([type="submit"]):not([type="checkbox"]),
form[action*="/contact"] textarea {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 48px;
  color: #1a4a7a !important;
  background: #f4faff !important;
  border: 1.5px solid #7ec8e3 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
form[action*="/contact"] textarea {
  height: 100px !important;
  min-height: 100px !important;
  max-height: 180px !important;
  padding: 12px 14px !important;
  line-height: 1.4 !important;
  resize: vertical !important;
}
form[action*="/contact"] label,
form[action*="/contact"] .field__label,
form[action*="/contact"] input::placeholder,
form[action*="/contact"] textarea::placeholder {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #235480 !important;
  opacity: 1 !important;
}
form[action*="/contact"] input:focus,
form[action*="/contact"] textarea:focus {
  border-color: #1a4a7a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 244, 184, 0.9) !important;
  outline: none !important;
}
form[action*="/contact"] button[type="submit"],
form[action*="/contact"] input[type="submit"] {
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: #fff4b8 !important;
  color: #1a4a7a !important;
  border: 2px solid #1a4a7a !important;
  border-radius: 8px !important;
  width: 100%;
}
form[action*="/contact"] button[type="submit"]:active {
  background: #1a4a7a !important;
  color: #fff4b8 !important;
}
.form-status,
.form__message {
  background: #fff9d6 !important;
  border-left: 5px solid #fff4b8;
  color: #1a4a7a !important;
  border-radius: 10px;
  padding: 12px 16px;
}

/* ---------- 4. CART (صفحة وشريط السلة) ---------- */

/* الخلفية */
body:has(cart-items-component) main,
.cart-page,
cart-drawer-component .cart-drawer__dialog,
cart-drawer-component .cart-drawer__content {
  background: #f4faff !important;
}

/* شريط المؤقت (Cart reserved) */
body:has(cart-items-component) [class*="reserved"],
body:has(cart-items-component) [class*="timer"] {
  background: #1a4a7a !important;
  color: #fff4b8 !important;
  font-weight: 700 !important;
}

/* بطاقة المنتج */
cart-items-component .cart-items__table-row {
  background: #ffffff !important;
  border: 1px solid #d6ecf5 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 10px rgba(26, 74, 122, 0.08);
}

/* اسم المنتج */
cart-items-component .cart-items__title,
cart-items-component .cart-items__title a {
  color: #1a4a7a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* الأسعار */
cart-items-component .cart-items__price,
cart-items-component .cart-items__price * {
  color: #1a4a7a !important;
  font-weight: 800 !important;
}
cart-items-component s,
cart-items-component del,
cart-items-component .compare-at-price {
  color: #7a97b3 !important;
  font-weight: 500 !important;
}

/* زر الحذف */
cart-items-component .cart-items__remove,
cart-items-component .cart-items__remove svg {
  color: #3b78ae !important;
}

/* اختيار الكمية */
cart-items-component quantity-selector-component,
cart-items-component .quantity-selector {
  border: 1.5px solid #7ec8e3 !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: #f4faff !important;
}
cart-items-component quantity-selector-component button,
cart-items-component .quantity-selector button {
  background: #f4faff !important;
  color: #1a4a7a !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
cart-items-component quantity-selector-component button:active {
  background: #1a4a7a !important;
  color: #fff4b8 !important;
}
cart-items-component quantity-selector-component input {
  color: #1a4a7a !important;
  font-weight: 700 !important;
  background: #ffffff !important;
}

/* حقل كود الخصم + زر ADD */
.cart-discount input,
input[name="discount"],
input[placeholder*="discount" i] {
  background: #ffffff !important;
  border: 1.5px solid #7ec8e3 !important;
  border-radius: 12px !important;
  color: #1a4a7a !important;
  font-size: 15px !important;
  height: 48px !important;
}
.cart-discount button,
button[aria-label*="discount" i] {
  background: #1a4a7a !important;
  color: #fff4b8 !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  height: 48px !important;
}

/* المجموع */
.cart__summary,
.cart-totals {
  background: #ffffff !important;
  border: 1px solid #d6ecf5 !important;
  border-radius: 14px !important;
  padding: 16px !important;
}
.cart-totals *,
.cart__summary * {
  color: #1a4a7a !important;
}
.cart-totals__original-container,
.cart__total-label,
.cart__total-value {
  font-weight: 800 !important;
  font-size: 18px !important;
}

/* زر Check out */
.cart__checkout-button,
button[name="checkout"],
.cart__ctas button {
  background: #1a4a7a !important;
  color: #fff4b8 !important;
  border: 2px solid #1a4a7a !important;
  border-radius: 14px !important;
  height: 54px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 0 #7ec8e3;
  opacity: 1 !important;
}
.cart__checkout-button:active,
button[name="checkout"]:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #7ec8e3;
}


/* AutiCarely v10 — Horizon-specific selector fixes */
html, body { overflow-x: clip !important; }
#header-component,
header-component#header-component,
.shopify-section-group-header-group,
#header-group {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
#header-component .header__row,
#header-component .header__columns {
  width: 100% !important;
  max-width: none !important;
}
#header-component .header__columns {
  padding-inline: 16px !important;
}
#header-component .header-logo,
#header-component [id="header-logo"],
#header-component .header__column--center .header-logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-inline: 0 !important;
}
#header-component .header-logo img,
#header-component .header-logo__image,
#header-component [id="header-logo"] img {
  width: min(250px, 62vw) !important;
  max-width: 62vw !important;
  height: auto !important;
}
#header-component .header-actions__action svg,
#header-component .header__menu-button svg,
#header-component .menu-drawer-container svg {
  color: #3b78ae !important;
  stroke: #3b78ae !important;
}
#header-component .header-actions__action svg path,
#header-component .header-actions__action svg line,
#header-component .header-actions__action svg rect,
#header-component .header-actions__action svg circle {
  stroke-width: 2.5px !important;
}
#header-component .cart-bubble__background { background: #1a4a7a !important; }
#header-component .cart-bubble__text,
#header-component .cart-bubble__text-count {
  color: #fff4b8 !important;
  -webkit-text-fill-color: #fff4b8 !important;
}
#header-component shopify-account,
#header-component .account-button,
#header-component button[aria-label*="Search" i],
#header-component a[aria-label*="Search" i] { display: none !important; }

/* Horizon's drawer/menu elements */
#Details-menu-drawer-container .menu-drawer,
#Details-menu-drawer-container .menu-drawer__inner-container,
#Details-menu-drawer-container .menu-drawer__navigation-container,
menu-drawer-component .menu-drawer,
menu-drawer-component .menu-drawer__inner-container,
menu-drawer-component .menu-drawer__navigation-container {
  background: linear-gradient(180deg, #f4faff 0%, #e3f3fa 100%) !important;
}
#Details-menu-drawer-container .menu-drawer__inner-container::before,
menu-drawer-component .menu-drawer__inner-container::before {
  content: "" !important;
  display: block !important;
  height: 6px !important;
  background: linear-gradient(90deg, #1a4a7a, #7ec8e3) !important;
}
#Details-menu-drawer-container .menu-drawer__menu-item,
menu-drawer-component .menu-drawer__menu-item,
#Details-menu-drawer-container .menu-drawer a,
menu-drawer-component .menu-drawer a {
  color: #1a4a7a !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  min-height: 0 !important;
  padding: 12px 16px !important;
  margin: 6px 16px !important;
  background: #fff !important;
  border-left: 4px solid #7ec8e3 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(26,74,122,.08) !important;
}
#Details-menu-drawer-container .menu-drawer__menu-item::after,
menu-drawer-component .menu-drawer__menu-item::after {
  content: "›";
  color: #7ec8e3 !important;
}
#Details-menu-drawer-container .menu-drawer__menu-item[aria-current="page"],
menu-drawer-component .menu-drawer__menu-item[aria-current="page"] {
  background: #1a4a7a !important;
  color: #fff !important;
}

/* Actual Horizon cart product and quantity controls */
cart-items-component .cart-items__details,
cart-items-component .cart-item,
cart-drawer-component .cart-items__details,
cart-drawer-component .cart-item {
  color: #1a4a7a !important;
}
cart-items-component .cart-items__title,
cart-items-component .cart-items__title a,
cart-drawer-component .cart-items__title,
cart-drawer-component .cart-items__title a {
  color: #1a4a7a !important;
  font-weight: 700 !important;
}
cart-items-component .quantity-selector,
cart-items-component quantity-input,
cart-drawer-component .quantity-selector,
cart-drawer-component quantity-input {
  border: 1.5px solid #7ec8e3 !important;
  border-radius: 10px !important;
  background: #f4faff !important;
}
cart-items-component .quantity-selector button,
cart-items-component quantity-input button,
cart-drawer-component .quantity-selector button,
cart-drawer-component quantity-input button {
  color: #1a4a7a !important;
  background: #f4faff !important;
}
cart-items-component .quantity-selector input,
cart-items-component quantity-input input,
cart-drawer-component .quantity-selector input,
cart-drawer-component quantity-input input {
  color: #1a4a7a !important;
  background: #fff !important;
}


/* AutiCarely — restore white product page background */
body:has(product-information),
body:has(.product-information),
body:has(product-details),
body:has(.product__info-container) {
  background: #ffffff !important;
}
body:has(product-information) main,
body:has(.product-information) main,
body:has(product-details) main,
body:has(.product__info-container) main,
.product-information,
.product-information__content,
.product-details,
.product__info-container {
  background-color: #ffffff !important;
}


/* AutiCarely — restore white backgrounds on product, blog and contact content only */
body:has(product-information) main,
body:has(.product-information) main,
body:has(product-details) main,
body:has(.product__info-container) main,
body:has(form[action*="/contact"]) main,
body:has(form[action*="/contact"]) main .shopify-section,
body:has(form[action*="/contact"]) main .section,
main#MainContent,
#MainContent {
  background-color: #ffffff !important;
}
body:has(article) main article,
body:has(.article-template) main .article-template,
body:has(.blog-articles) main .blog-articles,
body:has(.blog) main .blog {
  background-color: #ffffff !important;
}
/* Header and footer are intentionally excluded from these background rules. */
/* Keep the original white page background outside the cart and menu drawers. */
body,
body main,
main#MainContent,
#MainContent,
.shopify-section,
.shopify-section .section,
.shopify-section .section-background,
.product-information,
.product-information__content,
.product-details,
.product__info-container,
.blog,
.blog-articles,
.article-template,
.article,
.article-content,
article,
.page-width:has(.article),
body:has(form[action*="/contact"]),
body:has(form[action*="/contact"]) main,
body:has(form[action*="/contact"]) .shopify-section,
body:has(form[action*="/contact"]) .section,
body:has(product-information) main,
body:has(.product-information) main,
body:has(product-details) main,
body:has(.product__info-container) main {
  background-color: #ffffff !important;
}
/* Preserve intentionally colored cards, images and interactive components. */
.shopify-section-group-header-group,
.menu-drawer,
.menu-drawer__inner-container,
.cart-page,
cart-drawer-component .cart-drawer__dialog,
cart-drawer-component .cart-drawer__content,
.auticarely-cart-reservation,
.auticarely-cart-discount button {
  background-color: revert-layer;
}




/* AutiCarely — white background for blog articles and contact page content only */
body:has(article) main article,
body:has(.article-template) main .article-template,
body:has(.blog-articles) main .blog-articles,
body:has(form[action*="/contact"]) main form[action*="/contact"] {
  background-color: #ffffff !important;
}


/* AutiCarely — restore the original header background color */
#header-component,
header-component#header-component,
.shopify-section-group-header-group,
#header-group,
#header-component .header__row,
#header-component .header__columns,
header.header {
  background-color: #E6F3F8 !important;
  background-image: none !important;
}


/* AutiCarely — restore footer background color */
#footer-group,
.shopify-section-group-footer-group,
footer,
.footer,
.footer__content-top,
.footer__content-bottom {
  background-color: #E3F4FB !important;
  background-image: none !important;
}





/* AutiCarely — full-bleed footer background, preserve content spacing */
#footer-group,
.shopify-section-group-footer-group,
#footer-group > .shopify-section,
.shopify-section-group-footer-group > .shopify-section {
  background: #E3F4FB !important;
  background-color: #E3F4FB !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
#footer-group .footer,
.shopify-section-group-footer-group .footer,
#footer-group footer,
.shopify-section-group-footer-group footer {
  background: #E3F4FB !important;
  background-color: #E3F4FB !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
#footer-group .page-width,
.shopify-section-group-footer-group .page-width {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 20px !important;
}


/* AutiCarely — unify all footer background layers */
#footer-group,
#footer-group > *,
#footer-group .shopify-section,
#footer-group .shopify-section > *,
.shopify-section-group-footer-group,
.shopify-section-group-footer-group > *,
.shopify-section-group-footer-group .shopify-section,
.shopify-section-group-footer-group .shopify-section > *,
#footer-group footer,
#footer-group .footer,
.shopify-section-group-footer-group footer,
.shopify-section-group-footer-group .footer,
#footer-group .footer__content-top,
#footer-group .footer__content-bottom,
.shopify-section-group-footer-group .footer__content-top,
.shopify-section-group-footer-group .footer__content-bottom {
  background-color: #E3F4FB !important;
  background-image: none !important;
}

/* Footer: full-width #E3F4FB */
.shopify-section-group-footer-group,
.shopify-section-group-footer-group .section,
.shopify-section-group-footer-group .section-wrapper,
.shopify-section-group-footer-group .section-background,
.shopify-section-group-footer-group .section-content-wrapper,
footer,
.footer {
  background-color: #E3F4FB !important;
  --color-background: #E3F4FB;
}

/* Extend footer color to both screen edges */
.shopify-section-group-footer-group,
footer {
  box-shadow: 0 0 0 100vmax #E3F4FB;
  clip-path: inset(0 -100vmax);
}