/** Shopify CDN: Minification failed

Line 3079:0 Unexpected "}"

**/
/* Keep the storefront font override ahead of other cascade layers. */
@layer kirilov-apple-fonts;

* {
  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-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right 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)));
  }
}

.page-wrapper--drawer-open {
  margin-right: 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;
}

.product-card__content {
  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 */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Utility */

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

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

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

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

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

.contents {
  display: contents;
}

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

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

  display: flex;
  flex-direction: column;
}

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

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

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

.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;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--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: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

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

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

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) 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%;
  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%;
  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;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  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 */

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

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

  to {
    opacity: 1;
  }
}

.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__content:empty {
  display: none;
}

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

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

/* 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 */
    :is(.spacing-style, .inherit-spacing) {
      --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);
  }
}
/* =========================================
   KIRILOV FLOATING SIGNATURE
   ========================================= */

.kirilov-floating-signature {
  position: fixed;
  right: 5px;
  bottom: 58px !important;

  width: 72px;
  height: 170px;

  z-index: 50;

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

  pointer-events: none;

  /* Force signature to PURE BLACK */
  filter: brightness(0) saturate(100%) contrast(200%);
  opacity: 1;

  /* GPU acceleration for smooth motion */
  transform: translate3d(0, 0, 0);
  will-change: transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.kirilov-floating-signature img,
.kirilov-floating-signature svg {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  /* Important for SVG/image sharpness */
  image-rendering: auto;

  filter: brightness(0) saturate(100%) contrast(200%);
  opacity: 1;
}


/* MOBILE */
@media screen and (max-width: 749px) {
  .kirilov-floating-signature {
    right: 3px;
    bottom: 50px !important;

    width: 56px;
    height: 135px;
  }
}

/* KIRILOV SIGNATURE - HOMEPAGE ONLY */
body:not(.page-type-index) .kirilov-signature {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* KIRILOV SIGNATURE — PERMANENT PURE BLACK, NO COLOR TRANSITION */
body.page-type-index .kirilov-signature img {
  -webkit-filter: brightness(0) saturate(100%) contrast(200%) !important;
  filter: brightness(0) saturate(100%) contrast(200%) !important;
  opacity: 1 !important;
}

/* =====================================================
   KIRILOV — BLACK ANNOUNCEMENT BARS
   CLEAN FINAL VERSION
   ===================================================== */


/* =====================================================
   TOP ANNOUNCEMENT BAR
   ===================================================== */

.kirilov-topbar {  position: relative;

  width: 100%;
  height: 32px;
  min-height: 32px;

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

  padding: 0 55px;

  box-sizing: border-box;

  background: #000;
  color: #fff;

  overflow: hidden;

  z-index: 0 !important;
}


/* TOP BAR TEXT */

.kirilov-topbar__text {
  display: block;

  font-family: var(--font-body--family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;

  color: #fff;

  text-align: center;
  white-space: nowrap;

  margin: 0;
  padding: 0;
}


/* TOP BAR CLOSE BUTTON */

.kirilov-topbar__close {
  position: absolute;

  top: 50%;
  right: 18px;

  transform: translateY(-50%);

  width: 28px;
  height: 28px;

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

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;
  color: #fff;

  font-family: var(--font-body--family);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  z-index: 2;
}

.kirilov-topbar__close:hover {
  opacity: 0.65;
}


/* =====================================================
   INFINITE FREE SHIPPING BAR
   ===================================================== */

.kirilov-shipping-bar {
  position: relative;

  width: 100%;
  height: 30px;
  min-height: 30px;

  display: flex;
  align-items: center;

  overflow: hidden;

  box-sizing: border-box;

  background: #000;
  color: #fff;

  z-index: 0 !important;
}


/* =====================================================
   MASTER MARQUEE TRACK
   ===================================================== */

.kirilov-shipping-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  width: max-content;
  min-width: max-content;

  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: transform;

  animation-name: kirilov-shipping-marquee;
  animation-duration: 24s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;

  -webkit-animation-name: kirilov-shipping-marquee;
  -webkit-animation-duration: 24s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
}


/* =====================================================
   EACH COPY OF THE TEXT
   IMPORTANT:
   BOTH GROUPS IN theme.liquid MUST BE IDENTICAL
   ===================================================== */

.kirilov-shipping-group {
  display: flex;
  align-items: center;
  justify-content: space-around;

  flex: 0 0 auto;

  /*
    Guarantees that one complete copy always
    fills at least the whole browser width.
    This prevents empty space on desktop.
  */
  min-width: 100vw;

  box-sizing: border-box;

  margin: 0;

  padding-left: 35px;
  padding-right: 35px;

  gap: 70px;
}


/* SHIPPING TEXT */

.kirilov-shipping-group span {
  display: block;

  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  font-family: var(--font-body--family);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;

  color: #fff;

  white-space: nowrap;

  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* =====================================================
   TRUE SEAMLESS INFINITE MOVEMENT

   Because there are TWO IDENTICAL groups,
   moving exactly -50% places group #2
   exactly where group #1 originally started.
   ===================================================== */

@keyframes kirilov-shipping-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@-webkit-keyframes kirilov-shipping-marquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media screen and (max-width: 749px) {

  /* TOP BAR */

  .kirilov-topbar {
    height: 30px;
    min-height: 30px;

    padding-left: 34px;
    padding-right: 38px;
  }

  .kirilov-topbar__text {
    font-size: 10px;
    line-height: 1.1;
  }

  .kirilov-topbar__close {
    right: 6px;

    width: 26px;
    height: 26px;

    font-size: 20px;
  }


  /* SHIPPING BAR */

  .kirilov-shipping-bar {
    height: 27px;
    min-height: 27px;
  }

  .kirilov-shipping-group {
    min-width: 100vw;

    gap: 55px;

    padding-left: 27px;
    padding-right: 27px;
  }

  .kirilov-shipping-group span {
    font-size: 11px;
  }

  .kirilov-shipping-track {
    animation-duration: 20s;
    -webkit-animation-duration: 20s;
  }
}


/* =====================================================
   DRAWER MUST ALWAYS BE ABOVE BOTH BLACK BARS
   ===================================================== */

/*
   Header creates the stacking context that contains
   KIRILOV navigation + drawer.
*/

#header-group {
  position: relative;
  z-index: 100 !important;
}


/*
   Bars remain underneath the opened drawer.
*/

.kirilov-topbar,
.kirilov-shipping-bar {
  z-index: 0 !important;
}


/*
   Horizon header drawer wrapper
*/

header-drawer,
.header-drawer,
.menu-drawer-container {
  position: relative;
  z-index: 9998 !important;
}


/*
   Actual white navigation drawer
*/

.menu-drawer,
.menu-drawer__container,
.menu-drawer__navigation {
  z-index: 9999 !important;
}


/*
   Grey/dark page overlay behind drawer
*/

.menu-drawer__backdrop,
.header-drawer__backdrop {
  z-index: 9997 !important;
}


/* =====================================================
   EXTRA DRAWER PROTECTION
   ===================================================== */

header-drawer[open],
header-drawer:has(details[open]),
.header-drawer:has(details[open]) {
  z-index: 9999 !important;
}


/* =====================================================
   PREVENT MARQUEE FLASH / FLICKER
   ===================================================== */

.kirilov-shipping-bar,
.kirilov-shipping-track,
.kirilov-shipping-group,
.kirilov-shipping-group span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/*
   DO NOT pause the animation when Reduce Motion
   is enabled, because this promotional bar is
   intended to remain continuously moving.
*/

@media (prefers-reduced-motion: reduce) {
  .kirilov-shipping-track {
    animation-duration: 32s;
    -webkit-animation-duration: 32s;
  }
}

/* =====================================================
   KIRILOV — FAST & SMOOTH DRAWER ACCORDION
   ===================================================== */

header-drawer accordion-custom {
  --animation-speed-slow: 160ms;
}

/* =========================================================
   KIRILOV MENU — CLEAN FINAL VERSION
   Desktop + Mobile
   Replaces the old overlapping menu overrides.
   ========================================================= */

/* One alignment value for the VISUAL left edge of the custom X
   X button: left 14px, width 40px, X line width 22px
   Visual X starts at 14 + (40 - 22) / 2 = 23px. */
:root {
  --kirilov-drawer-left: 23px;
  --kirilov-drawer-right: 20px;
}

/* =========================================================
   MAIN MENU — TYPOGRAPHY + UNDERLINE
   ========================================================= */

.menu-drawer__menu-item,
.menu-drawer summary.menu-drawer__menu-item,
.header__submenu .header__menu-item,
.header__submenu summary.header__menu-item {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: 100%;

  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;

  padding-top: 11px !important;
  padding-bottom: 11px !important;

  color: #000 !important;
  text-decoration: none !important;
}

/* Underline only the menu text. */
.menu-drawer__menu-item > span,
.menu-drawer__menu-item > a,
.header__submenu .header__menu-item > span {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* Themes that place text directly inside the link. */
.menu-drawer__menu-item:not(summary),
.header__submenu a.header__menu-item {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* =========================================================
   MAIN MENU — EXACT LEFT ALIGNMENT WITH X
   ========================================================= */

/* Remove inherited/container indentation first. */
.menu-drawer__navigation,
.menu-drawer__navigation-container,
.menu-drawer__menu {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.menu-drawer__menu {
  margin-top: 0 !important;
}

/* Normalize every top-level row and any details wrapper. */
.menu-drawer__navigation .menu-drawer__menu > li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.menu-drawer__navigation .menu-drawer__menu > li > details {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* FINAL SALE + MEN + WOMEN + BAGS + ACCESSORIES:
   all start at exactly the same x-position as the visual left edge of X. */
.menu-drawer__navigation .menu-drawer__menu > li > a.menu-drawer__menu-item,
.menu-drawer__navigation .menu-drawer__menu > li > button.menu-drawer__menu-item,
.menu-drawer__navigation .menu-drawer__menu > li > summary.menu-drawer__menu-item,
.menu-drawer__navigation .menu-drawer__menu > li > details > summary.menu-drawer__menu-item,
.menu-drawer__navigation .menu-drawer__menu > li .menu-drawer__menu-item {
  margin-left: 0 !important;
  left: auto !important;
  transform: none !important;
  padding-left: var(--kirilov-drawer-left) !important;
  padding-right: 42px !important;
}

/* =========================================================
   MENU ARROWS
   ========================================================= */

/* Remove Shopify/default menu arrows/icons. */
.menu-drawer__menu-item .icon-caret,
.menu-drawer__menu-item .icon-arrow,
.menu-drawer__menu-item .icon-plus,
.menu-drawer summary svg,
.header__submenu .icon-caret,
.header__submenu .icon-arrow,
.header__submenu summary svg {
  display: none !important;
}

/* Custom right arrow for expandable items. */
.menu-drawer summary.menu-drawer__menu-item::after,
.menu-drawer details > summary.menu-drawer__menu-item::after,
.header__submenu details > summary.header__menu-item::after {
  content: "›" !important;
  display: block !important;
  position: absolute !important;
  right: var(--kirilov-drawer-right) !important;
  top: 50% !important;
  margin-left: 0 !important;

  font-family: var(--font-body--family) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 300 !important;

  text-decoration: none !important;
  color: #000 !important;
  transform: translateY(-50%) !important;
}

/* =========================================================
   NEW LABEL
   ========================================================= */

.menu-drawer__menu-item .new,
.menu-drawer__menu-item .badge,
.menu-drawer__menu-item [class*="new"],
.header__submenu .new,
.header__submenu .badge {
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-left: 7px !important;
  position: relative;
  top: -4px !important;
}

/* =========================================================
   FINAL SALE
   ========================================================= */

.menu-drawer a[href*="/pages/final-sale"],
.menu-drawer__menu-item[href*="/pages/final-sale"],
.header__submenu a[href*="/pages/final-sale"] {
  color: #d60000 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

.menu-drawer a[href*="/pages/final-sale"]:hover,
.header__submenu a[href*="/pages/final-sale"]:hover {
  color: #d60000 !important;
}

/* Final Sale gets the same right arrow as the expandable rows. */
.menu-drawer__navigation .menu-drawer__menu > li > a[href*="/pages/final-sale"] {
  position: relative !important;
}

.menu-drawer__navigation .menu-drawer__menu > li > a[href*="/pages/final-sale"]::after {
  content: "›" !important;
  position: absolute !important;
  right: var(--kirilov-drawer-right) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  color: #000 !important;
  font-family: var(--font-body--family) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* =========================================================
   BOTTOM MENU
   LOG IN / SHOPPING BAG / CONTACT US
   ========================================================= */

.menu-drawer__utility-links {
  padding-left: var(--kirilov-drawer-left) !important;
  padding-right: 24px !important;
}

.menu-drawer__utility-links a,
.menu-drawer__account,
.menu-drawer__utility-links .menu-drawer__account,
.menu-drawer__utility-links li a {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: #000 !important;

  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;

  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.menu-drawer__utility-links li {
  margin-bottom: 15px !important;
}

.menu-drawer__utility-links svg,
.menu-drawer__account svg,
.menu-drawer a[href*="/account"] svg,
.menu-drawer a[href*="/cart"] svg,
.menu-drawer a[href*="/pages/contact"] svg,
.menu-drawer a[href*="/contact"] svg {
  width: 12px !important;
  height: 12px !important;
  margin-right: 11px !important;
  flex-shrink: 0 !important;
}

.menu-drawer__utility-links a,
.menu-drawer__account {
  display: flex !important;
  align-items: center !important;
}

.menu-drawer a[href*="/account"] {
  margin-top: 38px !important;
}

/* Full-width separator above bottom links. */
.menu-drawer a[href*="/account"]::before {
  content: "" !important;
  position: absolute !important;
  top: -20px !important;
  left: -20px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 1px !important;
  background: #d9d9d9 !important;
  display: block !important;
  pointer-events: none !important;
}

/* =========================================================
   CLOSE X — SAME POSITION / SIZE ON PC + MOBILE
   ========================================================= */

.menu-drawer .menu-drawer__close-button,
.menu-drawer button[aria-label*="Close"],
.menu-drawer button[aria-label*="close"] {
  position: absolute !important;
  top: 16px !important;
  left: 14px !important;
  right: auto !important;

  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

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

  transform: translateY(-6px) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  touch-action: manipulation !important;
}

/* Hide Shopify's original X. */
.menu-drawer .menu-drawer__close-button svg,
.menu-drawer button[aria-label*="Close"] svg,
.menu-drawer button[aria-label*="close"] svg {
  display: none !important;
  opacity: 0 !important;
}

/* Draw the custom X. */
.menu-drawer .menu-drawer__close-button::before,
.menu-drawer .menu-drawer__close-button::after,
.menu-drawer button[aria-label*="Close"]::before,
.menu-drawer button[aria-label*="Close"]::after,
.menu-drawer button[aria-label*="close"]::before,
.menu-drawer button[aria-label*="close"]::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 22px !important;
  height: 1.5px !important;
  background: #000 !important;
  border: 0 !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

.menu-drawer .menu-drawer__close-button::before,
.menu-drawer button[aria-label*="Close"]::before,
.menu-drawer button[aria-label*="close"]::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.menu-drawer .menu-drawer__close-button::after,
.menu-drawer button[aria-label*="Close"]::after,
.menu-drawer button[aria-label*="close"]::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* =========================================================
   MENU VERTICAL POSITION
   ========================================================= */

.menu-drawer__navigation {
  padding-top: 42px !important;
}

/* Mobile keeps the same geometry; explicit block prevents theme
   mobile defaults from re-introducing different left padding. */
@media screen and (max-width: 749px) {
  .menu-drawer__navigation .menu-drawer__menu > li > a.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li > button.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li > summary.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li > details > summary.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li .menu-drawer__menu-item {
    padding-left: var(--kirilov-drawer-left) !important;
  }
}

/* Desktop keeps the same geometry; explicit block prevents theme
   desktop defaults from re-introducing different left padding. */
@media screen and (min-width: 750px) {
  .menu-drawer__navigation .menu-drawer__menu > li > a.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li > button.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li > summary.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li > details > summary.menu-drawer__menu-item,
  .menu-drawer__navigation .menu-drawer__menu > li .menu-drawer__menu-item {
    padding-left: var(--kirilov-drawer-left) !important;
  }
}

/* =========================================================
   KIRILOV — TRUE BOTTOM MENU FIX
   Targets the REAL custom classes from header-drawer.liquid:
   .kirilov-utility-item / .kirilov-utility-icon
   ========================================================= */

/*
   TOP main-menu text starts at --kirilov-drawer-left (23px).
   The bottom utility LI elements are absolutely positioned, so put
   THEIR left edge at the same 23px coordinate.
*/
.menu-drawer__navigation
  > .menu-drawer__menu
  > .kirilov-utility-item {
  left: var(--kirilov-drawer-left) !important;
  right: var(--kirilov-drawer-right) !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
}

/*
   The icon itself must begin at that exact left edge.
   This overrides the general main-menu rule that adds 23px padding
   to every .menu-drawer__menu-item, including the bottom rows.
*/
body .menu-drawer__navigation
  > .menu-drawer__menu
  > .kirilov-utility-item
  > a.menu-drawer__menu-item--mainlist {
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
  transform: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;

  min-height: 36px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;

  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

/* Force the actual text span smaller too. */
body .menu-drawer__navigation
  > .menu-drawer__menu
  > .kirilov-utility-item
  > a.menu-drawer__menu-item--mainlist
  > .menu-drawer__menu-item-text {
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

/* Small bottom icons. */
body .menu-drawer__navigation
  > .menu-drawer__menu
  > .kirilov-utility-item
  .kirilov-utility-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  flex: 0 0 11px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .menu-drawer__navigation
  > .menu-drawer__menu
  > .kirilov-utility-item
  .kirilov-utility-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Slightly tighter row spacing while keeping their bottom positions. */
.menu-drawer__menu > .kirilov-utility-item:nth-last-child(4) {
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}

.menu-drawer__menu > .kirilov-utility-item:nth-last-child(3) {
  bottom: calc(54px + env(safe-area-inset-bottom)) !important;
}

.menu-drawer__menu > .kirilov-utility-item:nth-last-child(1) {
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

/* Same alignment and sizing on mobile. */
@media screen and (max-width: 749px) {
  .menu-drawer__navigation
    > .menu-drawer__menu
    > .kirilov-utility-item {
    left: var(--kirilov-drawer-left) !important;
    right: var(--kirilov-drawer-right) !important;
  }

  body .menu-drawer__navigation
    > .menu-drawer__menu
    > .kirilov-utility-item
    > a.menu-drawer__menu-item--mainlist {
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    font-size: 12px !important;
  }

  body .menu-drawer__navigation
    > .menu-drawer__menu
    > .kirilov-utility-item
    > a.menu-drawer__menu-item--mainlist
    > .menu-drawer__menu-item-text {
    font-size: 12px !important;
  }
}
/* =========================================
   MOBILE ONLY — NARROWER DRAWER
   ========================================= */

@media screen and (max-width: 749px) {
  .menu-drawer {
    width: 85vw !important;
    max-width: 85vw !important;
  }
}

/* =========================================
   SLOWER FREE SHIPPING BAR
   PC + MOBILE
   ========================================= */

.kirilov-shipping-track {
  animation-duration: 36s !important;
  -webkit-animation-duration: 36s !important;
}

@media screen and (max-width: 749px) {
  .kirilov-shipping-track {
    animation-duration: 32s !important;
    -webkit-animation-duration: 32s !important;
  }
}

/* =========================================================
   KIRILOV — 3 IDENTICAL LINE HAMBURGER MENU
   DESKTOP + MOBILE
========================================================= */

/* Hide Shopify's original hamburger SVG */
#header-component .header-drawer-icon--open svg {
  display: none !important;
}

/* Hamburger container */
#header-component .header-drawer-icon--open {
  position: relative !important;

  width: 17px !important;
  height: 12px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  flex: none !important;

  background: none !important;
}

/* Create all 3 lines from the exact same line */
#header-component .header-drawer-icon--open::before {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 17px !important;
  height: 2px !important;

  background: currentColor !important;

  box-shadow:
    0 5px 0 currentColor,
    0 10px 0 currentColor !important;
}

/* Disable the old bottom pseudo-line */
#header-component .header-drawer-icon--open::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   KIRILOV — FINAL LIVE SIGNATURE POSITION
========================================================= */

body.page-type-index .kirilov-signature {
  bottom: 54px !important;
}

@media screen and (max-width: 749px) {
  body.page-type-index .kirilov-signature {
    bottom: 34px !important;
  }
}

/* =========================================================
   KIRILOV — APPLE FONT FOR ALL STOREFRONT TEXT
   Changes font families only. Existing sizes, weights,
   spacing, colors, layout and animation rules are preserved.

   Apple devices use their native San Francisco font.
   Other devices use an installed SF Pro font when available,
   then Helvetica / Arial. No font downloads are required.
========================================================= */

:root,
body {
  --kirilov-apple-font-family: -apple-system, BlinkMacSystemFont,
    'SF Pro Display', 'SF Pro Text', 'SF Pro',
    'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-body--family: var(--kirilov-apple-font-family) !important;
  --font-subheading--family: var(--kirilov-apple-font-family) !important;
  --font-heading--family: var(--kirilov-apple-font-family) !important;
  --font-accent--family: var(--kirilov-apple-font-family) !important;
  --font-paragraph--family: var(--kirilov-apple-font-family) !important;
  --font-h1--family: var(--kirilov-apple-font-family) !important;
  --font-h2--family: var(--kirilov-apple-font-family) !important;
  --font-h3--family: var(--kirilov-apple-font-family) !important;
  --font-h4--family: var(--kirilov-apple-font-family) !important;
  --font-h5--family: var(--kirilov-apple-font-family) !important;
  --font-h6--family: var(--kirilov-apple-font-family) !important;
  --button-font-family-primary: var(--kirilov-apple-font-family) !important;
  --button-font-family-secondary: var(--kirilov-apple-font-family) !important;
}

.custom-typography,
.custom-typography > * {
  --font-family: var(--kirilov-apple-font-family) !important;
}

/*
  Cover headings, links, prices, buttons, inputs, menu labels,
  custom sections, footer text and content inserted later.
  Important declarations in this first layer also override
  hardcoded font families in the theme's unlayered section CSS.
  Preserve SVG artwork and font-based icons.
*/
@layer kirilov-apple-fonts {
  :where(html, body, body *):not(
    :where(
      svg,
      svg *,
      .icon,
      .icon *,
      .svg-wrapper,
      .svg-wrapper *,
      [data-icon-font],
      [data-icon-font] *,
      .fa,
      .fas,
      .far,
      .fal,
      .fab,
      .fad,
      .fat,
      [class^='fa-'],
      [class*=' fa-'],
      [class^='material-icons'],
      [class*=' material-icons'],
      [class^='material-symbols'],
      [class*=' material-symbols']
    )
  ) {
    font-family: var(--kirilov-apple-font-family) !important;
  }
}

/* KIRILOV — full logo centred horizontally */
#header-component .header-logo__image {
  transform: translateY(7.742%);
  transform-origin: center;
}

/* Navigation height */
#header-component .header__row--top .header__columns {
  min-height: 88px;
}

/* Keep the extended V visible */
#header-component .header__row--top,
#header-component .header__row--top .header__columns,
#header-component a.header-logo,
#header-component a.header-logo > span {
  overflow: visible;
}

/* Mobile navigation height */
@media screen and (max-width: 749px) {
  #header-component .header__row--top .header__columns {
    min-height: 72px;
  }
}
}

@media screen and (max-width: 749px) {
  #header-component img.header-logo__image {
    position: relative !important;
    left: 1px !important;
  }
}

@media screen and (max-width: 749px) {
  #header-component img.header-logo__image {
    position: relative !important;
    left: 1px !important;
  }
}

/* =========================================================
   KIRILOV — SMOOTH BOTTOM-UP V OPENING LOADER
   Exact V asset, no needles, no tracing, no distortion.
   ========================================================= */

html.kirilov-loading,
html.kirilov-loading body {
  overflow: hidden !important;
}

.kirilov-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;

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

  width: 100%;
  height: 100%;

  background: #ffffff;
  opacity: 1;
  visibility: visible;
  pointer-events: all;

  transition:
    opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.48s;

  will-change: opacity;
}

.kirilov-loader__stage {
  position: relative;

  width: auto;
  height: 160px;
  aspect-ratio: 263 / 507;

  overflow: visible;

  opacity: 1;
  transform: translateZ(0);

  transition:
    opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);

  will-change: opacity, transform;
}

.kirilov-loader__v {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;

  opacity: 1;

  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);

  transform: translateZ(0);

  transition:
    -webkit-clip-path 2.28s cubic-bezier(0.45, 0, 0.15, 1),
    clip-path 2.28s cubic-bezier(0.45, 0, 0.15, 1);

  will-change: clip-path;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Reveal the exact embroidery progressively from the bottom upward. */
.kirilov-loader--reveal-v .kirilov-loader__v {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

/* Completed V disappears softly before the white screen reveals the store. */
.kirilov-loader--hide-v .kirilov-loader__stage {
  opacity: 0;
  transform: scale(0.992) translateZ(0);
}

.kirilov-loader.kirilov-loader--finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Desktop size. */
@media screen and (min-width: 750px) {
  .kirilov-loader__stage {
    height: 220px;
  }
}

/* Large desktop size. */
@media screen and (min-width: 1400px) {
  .kirilov-loader__stage {
    height: 236px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kirilov-loader__v {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transition: none;
  }

  .kirilov-loader__stage {
    transition-duration: 0.2s;
  }

  .kirilov-loader {
    transition-duration: 0.2s;
  }
}