/** Shopify CDN: Minification failed

Line 2558:1 Expected identifier but found whitespace
Line 2558:2 Unexpected "scale("
Line 2690:1 Unexpected "<"
Line 2699:1 Expected identifier but found "%"
Line 2700:0 Unexpected "{"
Line 2700:1 Unexpected "{"
Line 2701:8 Expected ":"
Line 2708:0 Unexpected "{"
Line 2708:1 Expected identifier but found "%"
Line 2709:0 Unexpected "<"
... and 22 more hidden warnings

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.relative {
  position: relative;
}

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

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

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

.icon-default {
  fill: currentColor;
}

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

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

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

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

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

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

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

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

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-menu-drawer) - 1);
}

.text-block {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

  &::backdrop {
    opacity: 0;
  }
}

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

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

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

  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

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

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

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

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

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

/* Collapsible row */

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

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

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

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

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

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

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

details[open] > summary .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

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

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

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

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

.tax-note:empty {
  display: none;
}

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

/* Volume pricing note should match unit-price styling (small, grey text) */
product-price .volume-pricing-note,
product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
  display: block;
  font-family: var(--font-body--family);
  font-weight: normal;
  font-size: var(--font-size--xs);
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.compare-at-price {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
}

.price-item__group {
  display: inline-block;
}

/* 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 elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

/* 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),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Global scrollbar styles */

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

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

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

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

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

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

/* 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);
  }
}
#shopify-section-template--22884559257815__collection_list_yAzXF7 .collection-card__content {
width: 100% !important;
align-items: center !important;
text-align: center !important;
}

#shopify-section-template--22884559257815__collection_list_yAzXF7 .collection-card__content > * {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
#shopify-block-template--22884559257815__collection_list_yAzXF7__group_qXf8MB__text_eGzLJN {

  width: 100% !important;

  text-align: center !important;

  margin-left: auto !important;

  margin-right: auto !important;

}

#shopify-block-template--22884559257815__collection_list_yAzXF7__group_qXf8MB__text_eGzLJN * {

  text-align: center !important;

}
#shopify-section-template--22884559257815__collection_list_yAzXF7 .collection-card__content > * {
align-self: center !important;
justify-self: center !important;
margin-inline: auto !important;
}
#shopify-section-template--22884559257815__collection_list_yAzXF7 .collection-card__content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* Mega Cortez wishlist */
product-card {
position: relative;
}

.mc-wishlist-button {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;

width: 38px;
height: 38px;
padding: 0;

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

border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: #111;

cursor: pointer;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);
}

.mc-wishlist-icon {
width: 21px;
height: 21px;
display: block;
}

.mc-wishlist-button.is-active .mc-wishlist-icon path {
fill: currentColor;
}

@media screen and (max-width: 749px) {
.mc-wishlist-button {
top: 10px;
right: 10px;
width: 36px;
height: 36px;
}

.mc-wishlist-icon {
width: 20px;
height: 20px;
}
}
.mc-header-wishlist {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-left: 8.5px
}

.mc-header-wishlist svg {
width: 24px;
height: 24px;
display: block;
}
/* TOP BRENDOVI - premium logo prikaz */
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card__image {
border-radius: 50%;
overflow: hidden;
background: #f5f5f5;
}

#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card__image img {
width: 72% !important;
height: 72% !important;
object-fit: contain !important;
object-position: center !important;
margin: auto !important;
mix-blend-mode: multiply;
}/* TOP BRENDOVI - sakrij nazive ispod logoa */
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card__content {
display: none !important;
}/* TOP BRENDOVI - klik/hover samo kao krug */
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card-border-style,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card__inner {
background: transparent !important;
box-shadow: none !important;
border: none !important;
transform: none !important;
}

#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card__link {
border-radius: 50% !important;
box-shadow: none !important;
outline: none !important;
}

#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card:hover,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card:focus-within {
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}

/* Sam krug daje diskretan klikabilni efekat */
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card__image {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card:hover .collection-card__image {
transform: scale(1.025);
}
}
/* TOP BRENDOVI - ukloni kvadratni active/hover efekat sa SVIH brendova */
#shopify-section-template--22884559257815__collection_list_yAzXF7
.resource-list__item,
#shopify-section-template--22884559257815__collection_list_yAzXF7
slideshow-slide,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card-border-style,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}

#shopify-section-template--22884559257815__collection_list_yAzXF7
.resource-list__item:hover,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.resource-list__item:focus-within,
#shopify-section-template--22884559257815__collection_list_yAzXF7
slideshow-slide:hover,
#shopify-section-template--22884559257815__collection_list_yAzXF7
slideshow-slide:focus-within,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card:hover,
#shopify-section-template--22884559257815__collection_list_yAzXF7
.collection-card:focus-within {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
outline: none !important;
}
/* MEGA CORTEZ PRODUCT CARD */

.mc-product-card {
background: transparent;
border: 0;
padding: 0;
}

/* okvir samo oko slike */
.mc-product-card__image {
position: relative;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 14px;
overflow: hidden;
}

.mc-product-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

/* tekst ispod slike */
.mc-product-meta {
padding-top: 14px;
}

.mc-product-brand {
font-size: 14px;
line-height: 1.2;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 7px;
color: #111;
}

.mc-product-title {
font-size: 14px;
line-height: 1.35;
font-weight: 600;
color: #111;
margin-bottom: 8px;
}
/* MEGA CORTEZ - brand + clean product title */

.mc-card-title-only {
display: none;
}

/* Samo na product karticama menjamo prikaz naslova */
product-card .mc-original-product-title {
display: none;
}

product-card .mc-card-title-only {
display: block;
}

product-card .mc-product-brand {
display: block;
margin-bottom: 4px;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
color: #111;
}

product-card .mc-product-name {
display: block;
font-size: 13px;
line-height: 1.35;
font-weight: 500;
color: #222;
}
/* ===== MEGA CORTEZ - okvir samo oko slike proizvoda ===== */

product-card .card-gallery {
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
border-radius: 14px !important;
overflow: hidden !important;
}

/* da i slika prati isti radius */
product-card .card-gallery slideshow-component,
product-card .card-gallery slideshow-slide,
product-card .card-gallery .product-media-container {
border-radius: 14px !important;
overflow: hidden !important;
}

/* bez dodatnog okvira oko ostatka kartice */
product-card .product-card__content {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
product-card .card-gallery {
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
border-radius: 12px !important;
overflow: hidden !important;
}

product-card .card-gallery slideshow-component,
product-card .card-gallery slideshow-slide,
product-card .card-gallery .product-media-container {
border-radius: 12px !important;
overflow: hidden !important;
}
/* MEGA CORTEZ - mobile product grid premium razmak */
@media screen and (max-width: 749px) {

product-card {
box-sizing: border-box;
padding-left: 8px;
padding-right: 8px;
}

product-card .card-gallery {
width: 100% !important;
box-sizing: border-box;
}

product-card .card-gallery img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}
: scale(1.06);
transform/*
/* ===== MEGA CORTEZ - BRENDOVI MOBILE MENU FINAL ===== */

/* sakrij naziv brenda */
[id^="HeaderDrawer-brendovi-"] .menu-drawer__menu-item-text {
display: none !important;
}

/* cela klikabilna kartica */
[id^="HeaderDrawer-brendovi-"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;

aspect-ratio: 1 / 1 !important;

background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
border-radius: 14px !important;

padding: 14px !important;
margin: 0 !important;

overflow: hidden !important;
box-sizing: border-box !important;
text-decoration: none !important;
}

/* wrapper logotipa */
[id^="HeaderDrawer-brendovi-"] .menu-drawer__link-image {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;

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

/* sam logo */
[id^="HeaderDrawer-brendovi-"] .menu-drawer__link-image img {
width: 100% !important;
height: 100% !important;

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

display: block !important;
}

/* ukloni liniju ispod stavke */
[id^="HeaderDrawer-brendovi-"] {
border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}
/* ===== MEGA CORTEZ - BRENDOVI MOBILE FINAL ===== */

a[id^="HeaderDrawer-brendovi-"] {

  aspect-ratio: 1 / 1 !important;

  background: #fff !important;

  border: 1px solid rgba(0, 0, 0, 0.10) !important;

  border-radius: 14px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 22px !important;

  overflow: hidden !important;

  box-sizing: border-box !important;

}

/* KLJUČNO: ovo je sama IMG slika */

a[id^="HeaderDrawer-brendovi-"] > img.menu-drawer__link-image {

  width: 100% !important;

  height: 100% !important;

  max-width: 100% !important;

  max-height: 100% !important;

  object-fit: contain !important;

  object-position: center !important;

  margin: 0 !important;

  padding: 0 !important;

  display: block !important;

}

/* NAJTRAZENIJE KATEGORIJE - isti fini okvir kao proizvodi */

#shopify-section-template--22884558930135__collection_list_g7xaC3 .collection-card,
#shopify-section-template--22884558930135__collection_list_g7xaC3 .collection-card-border-style {
border: none !important;
box-shadow: none !important;
}

#shopify-section-template--22884558930135__collection_list_g7xaC3 .collection-card__inner {
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: none !important;
}/* ===== KUPUJ PO KATEGORIJAMA - premium okvir ===== */

#shopify-section-template--22884558930135__collection_list_frJAfh .collection-card,
#shopify-section-template--22884558930135__collection_list_frJAfh .collection-card-border-style {
border: none !important;
box-shadow: none !important;
}

#shopify-section-template--22884558930135__collection_list_frJAfh .collection-card__inner {
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: none !important;
}<style>
<footer class="mc-footer">

<div class="mc-footer__inner">

<!-- ===== BREND + KONTAKT ===== -->
<div class="mc-footer__brand">

<a href="{{ routes.root_url }}" class="mc-footer__logo-link">
{% if settings.logo != blank %}
{{
settings.logo
| image_url: width: 320
| image_tag:
class: 'mc-footer__logo-img',
alt: 'Mega Cortez',
loading: 'lazy'
}}
{% else %}
<div class="mc-footer__logo-text">
<span>MEGA</span>
<span>CORTEZ</span>
</div>
{% endif %}
</a>

<p class="mc-footer__intro">
Tvoj shop za originalnu obuću, odeću i aksesoare poznatih svetskih brendova.
</p>

<div class="mc-footer__contact">

<!-- ADRESA -->
<a
href="https://www.google.com/maps/search/?api=1&query=Trg+Cire+Milekica+6+22000+Sremska+Mitrovica"
target="_blank"
rel="noopener"
class="mc-footer__contact-row"
>
<span class="mc-footer__contact-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/>
<circle cx="12" cy="10" r="2.5"/>
</svg>
</span>

<span>
Trg Ćire Milekića 6<br>
22000 Sremska Mitrovica, Srbija
</span>
</a>

<!-- TELEFON -->
<a href="tel:+38122621270" class="mc-footer__contact-row">
<span class="mc-footer__contact-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 3h4l2 5-3 2c1.8 3.6 3.8 5.6 7.4 7.4l2-3 5 2v4c0 1.1-.9 2-2 2C10.1 22.4 1.6 13.9 1.6 4.5c0-.8.7-1.5 1.5-1.5Z"/>
</svg>
</span>

<span>
<strong>+381 22 621 270</strong><br>
<small>
Pon–Pet: 08:30–20:00<br>
Subota: 08:30–16:00<br>
Nedelja: neradna
</small>
</span>
</a>

<!-- EMAIL -->
<a
href="mailto:megacortezsrbija@gmail.com"
class="mc-footer__contact-row"
>
<span class="mc-footer__contact-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<rect x="2" y="4" width="20" height="16" rx="2"/>
<path d="m3 6 9 7 9-7"/>
</svg>
</span>

<span>megacortezsrbija@gmail.com</span>
</a>

</div>
</div>


<!-- ===== INFORMACIJE ===== -->
<details class="mc-footer__column" open>
<summary>
<span>INFORMACIJE</span>
<svg viewBox="0 0 24 24">
<path d="m6 9 6 6 6-6"/>
</svg>
</summary>

<div class="mc-footer__links">
<a href="/pages/o-nama">
O nama <span>›</span>
</a>

<a href="/pages/kontakt">
Kontakt <span>›</span>
</a>

<a href="/pages/dostava">
Dostava <span>›</span>
</a>

<a href="/pages/placanje">
Plaćanje <span>›</span>
</a>

<a href="/pages/zamena-i-povracaj">
Zamena i povraćaj <span>›</span>
</a>
</div>
</details>


<!-- ===== PRAVNE INFORMACIJE ===== -->
<details class="mc-footer__column" open>
<summary>
<span>PRAVNE INFORMACIJE</span>
<svg viewBox="0 0 24 24">
<path d="m6 9 6 6 6-6"/>
</svg>
</summary>

<div class="mc-footer__links">

<a href="/policies/privacy-policy">
Politika privatnosti <span>›</span>
</a>

<a href="/policies/terms-of-service">
Uslovi i pravila <span>›</span>
</a>

<a href="/policies/refund-policy">
Politika povraćaja <span>›</span>
</a>

<a href="/pages/zamena-i-povracaj">
Zamena i reklamacije <span>›</span>
</a>

</div>
</details>


<!-- ===== DRUŠTVENE MREŽE + NEWSLETTER ===== -->
<div class="mc-footer__social-column">

<details class="mc-footer__social-details" open>
<summary>
<span>PRATITE NAS</span>

<svg viewBox="0 0 24 24">
<path d="m6 9 6 6 6-6"/>
</svg>
</summary>

<div class="mc-footer__socials">

<!-- INSTAGRAM -->
<a
href="https://www.instagram.com/megacortez_?igsi=MWc1czRhMm9jeHU1&utm_source=qr"
target="_blank"
rel="noopener"
aria-label="Mega Cortez Instagram"
>
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="18" height="18" rx="5"/>
<circle cx="12" cy="12" r="4"/>
<circle cx="17.5" cy="6.5" r="1"/>
</svg>
</a>

<!-- FACEBOOK -->
<a
href="https://www.facebook.com/share/1Dh21uRtFj/?mibextid=wwXIfr"
target="_blank"
rel="noopener"
aria-label="Mega Cortez Facebook"
>
<svg viewBox="0 0 24 24">
<path d="M14 8h3V4h-3c-3 0-5 2-5 5v3H6v4h3v6h4v-6h3l1-4h-4V9c0-.7.3-1 1-1Z"/>
</svg>
</a>

<!-- TIKTOK -->
<a
href="https://www.tiktok.com/@megacortezsport?_r=1&_t=ZS-99BMTpcWI6O"
target="_blank"
rel="noopener"
aria-label="Mega Cortez TikTok"
>
<svg viewBox="0 0 24 24">
<path d="M14 4v11.5a4.5 4.5 0 1 1-4-4.47"/>
<path d="M14 4c.7 2.5 2.3 4 5 4"/>
</svg>
</a>

</div>
</details>


<!-- NEWSLETTER -->
<div class="mc-footer__newsletter">

<h3>PRIJAVI SE NA NEWSLETTER</h3>

<p>
Budi prvi koji saznaje za nove kolekcije i posebne ponude.
</p>

{% form 'customer', id: 'mc-footer-newsletter-form' %}

<input
type="hidden"
name="contact[tags]"
value="newsletter"
>

<div class="mc-footer__newsletter-form">

<input
type="email"
name="contact[email]"
placeholder="Unesite vaš email"
aria-label="Email adresa"
required
autocomplete="email"
>

<button
type="submit"
aria-label="Prijavi se na newsletter"
>
<svg viewBox="0 0 24 24">
<path d="m22 2-7 20-4-9-9-4Z"/>
<path d="M22 2 11 13"/>
</svg>
</button>

</div>

{% if form.posted_successfully? %}
<p class="mc-footer__success">
Hvala! Uspešno ste se prijavili.
</p>
{% endif %}

{% if form.errors %}
<div class="mc-footer__error">
{{ form.errors | default_errors }}
</div>
{% endif %}

{% endform %}

<div class="mc-footer__privacy-note">

<svg viewBox="0 0 24 24">
<rect x="5" y="10" width="14" height="11" rx="2"/>
<path d="M8 10V7a4 4 0 0 1 8 0v3"/>
</svg>

<span>
Ne šaljemo spam. Odjavite se u bilo kom trenutku.
</span>

</div>

</div>

</div>

</div>


<!-- ===== BENEFITI ===== -->
<div class="mc-footer__benefits">

<!-- DOSTAVA -->
<div class="mc-footer__benefit">

<span class="mc-footer__benefit-icon">
<svg viewBox="0 0 24 24">
<path d="M3 6h11v10H3Z"/>
<path d="M14 9h4l3 3v4h-7Z"/>
<circle cx="7" cy="18" r="2"/>
<circle cx="18" cy="18" r="2"/>
</svg>
</span>

<span>
<strong>BESPLATNA DOSTAVA</strong>
<small>Za porudžbine preko 8.000 RSD</small>
</span>

</div>


<!-- ZAMENA -->
<div class="mc-footer__benefit">

<span class="mc-footer__benefit-icon">
<svg viewBox="0 0 24 24">
<path d="M20 7v5h-5"/>
<path d="M4 17v-5h5"/>
<path d="M6.1 8A7 7 0 0 1 18 6l2 1"/>
<path d="M17.9 16A7 7 0 0 1 6 18l-2-1"/>
</svg>
</span>

<span>
<strong>ZAMENA I POVRAĆAJ</strong>
<small>U roku od 14 dana</small>
</span>

</div>


<!-- ORIGINAL -->
<div class="mc-footer__benefit">

<span class="mc-footer__benefit-icon">
<svg viewBox="0 0 24 24">
<path d="M12 3 19 6v5c0 5-3 8-7 10-4-2-7-5-7-10V6Z"/>
<path d="m9 12 2 2 4-4"/>
</svg>
</span>

<span>
<strong>100% ORIGINAL</strong>
<small>Garantujemo originalnost proizvoda</small>
</span>

</div>


<!-- PODRŠKA -->
<div class="mc-footer__benefit">

<span class="mc-footer__benefit-icon">
<svg viewBox="0 0 24 24">
<path d="M4 13v-2a8 8 0 0 1 16 0v2"/>
<path d="M4 13a2 2 0 0 1 2-2h1v6H6a2 2 0 0 1-2-2Z"/>
<path d="M20 13a2 2 0 0 0-2-2h-1v6h1a2 2 0 0 0 2-2Z"/>
<path d="M17 17c0 2-2 3-5 3"/>
</svg>
</span>

<span>
<strong>PODRŠKA KUPCIMA</strong>
<small>Tu smo kada vam je potrebna pomoć</small>
</span>

</div>

</div>


<!-- ===== COPYRIGHT ===== -->
<div class="mc-footer__copyright">
© {{ 'now' | date: '%Y' }} Mega Cortez. Sva prava zadržana.
</div>

</footer>


<style>

/* ==================================================
MEGA CORTEZ PREMIUM FOOTER
================================================== */

.mc-footer {
width: 100%;
background: #fafafa;
color: #171717;
border-top: 1px solid rgba(0,0,0,.08);
box-sizing: border-box;
}

.mc-footer *,
.mc-footer *::before,
.mc-footer *::after {
box-sizing: border-box;
}

.mc-footer a {
color: inherit;
text-decoration: none;
}

.mc-footer__inner {
max-width: 1400px;
margin: 0 auto;
padding: 64px 40px 52px;

display: grid;
grid-template-columns: 1.25fr .9fr .9fr 1.15fr;
gap: 54px;
}


/* ===== LOGO ===== */

.mc-footer__logo-img {
display: block;
width: auto;
max-width: 115px;
max-height: 70px;
object-fit: contain;
margin-bottom: 24px;
}

.mc-footer__logo-text {
margin-bottom: 24px;
width: max-content;
font-size: 27px;
line-height: .82;
font-weight: 900;
letter-spacing: -.06em;
}

.mc-footer__logo-text span {
display: block;
}

.mc-footer__logo-text span:first-child {
color: #ef3d35;
}

.mc-footer__logo-text span:last-child {
color: #2878e5;
}


/* ===== INTRO ===== */

.mc-footer__intro {
max-width: 320px;
margin: 0 0 30px;
font-size: 14px;
line-height: 1.65;
color: #555;
}


/* ===== KONTAKT ===== */

.mc-footer__contact {
display: flex;
flex-direction: column;
gap: 20px;
}

.mc-footer__contact-row {
display: flex;
align-items: flex-start;
gap: 13px;

font-size: 14px;
line-height: 1.5;
}

.mc-footer__contact-row small {
color: #666;
font-size: 12px;
line-height: 1.55;
}

.mc-footer__contact-icon {
flex: 0 0 22px;
width: 22px;
margin-top: 1px;
}

.mc-footer__contact-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}


/* ===== COLUMNS ===== */

.mc-footer__column,
.mc-footer__social-details {
border: 0;
}

.mc-footer summary {
list-style: none;
}

.mc-footer summary::-webkit-details-marker {
display: none;
}

.mc-footer__column summary,
.mc-footer__social-details summary {
display: flex;
justify-content: space-between;
align-items: center;

margin-bottom: 19px;

font-size: 14px;
line-height: 1.3;
font-weight: 800;
letter-spacing: .015em;

cursor: pointer;
}

.mc-footer__column summary svg,
.mc-footer__social-details summary > svg {
display: none;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.mc-footer__links {
display: flex;
flex-direction: column;
}

.mc-footer__links a {
display: flex;
align-items: center;
justify-content: space-between;

min-height: 45px;

border-bottom: 1px solid rgba(0,0,0,.08);

font-size: 13px;

transition:
opacity .2s ease,
padding-left .2s ease;
}

.mc-footer__links a:hover {
opacity: .6;
padding-left: 3px;
}

.mc-footer__links a span {
font-size: 19px;
color: #777;
}


/* ===== SOCIAL ===== */

.mc-footer__socials {
display: flex;
gap: 13px;

margin-bottom: 36px;
}

.mc-footer__socials a {
width: 42px;
height: 42px;

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

border: 1px solid rgba(0,0,0,.10);
border-radius: 50%;

background: #fff;

transition:
transform .2s ease,
background .2s ease;
}

.mc-footer__socials a:hover {
transform: translateY(-2px);
background: #f2f2f2;
}

.mc-footer__socials svg {
width: 20px;
height: 20px;

fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}


/* ===== NEWSLETTER ===== */

.mc-footer__newsletter h3 {
margin: 0 0 11px;

font-size: 14px;
line-height: 1.3;
font-weight: 800;
}

.mc-footer__newsletter > p {
margin: 0 0 17px;

font-size: 13px;
line-height: 1.55;
color: #666;
}

.mc-footer__newsletter-form {
height: 52px;

display: flex;

background: #fff;
border: 1px solid rgba(0,0,0,.14);
border-radius: 10px;
overflow: hidden;
}

.mc-footer__newsletter-form input {
min-width: 0;
flex: 1;

border: 0;
outline: 0;
box-shadow: none;

background: transparent;

padding: 0 16px;

font: inherit;
font-size: 13px;
color: #111;
}

.mc-footer__newsletter-form button {
flex: 0 0 56px;

border: 0;

background: #181818;
color: #fff;

cursor: pointer;

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

.mc-footer__newsletter-form button svg {
width: 21px;
height: 21px;

fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}

.mc-footer__privacy-note {
margin-top: 13px;

display: flex;
align-items: center;
gap: 8px;

color: #777;
font-size: 11px;
line-height: 1.4;
}

.mc-footer__privacy-note svg {
flex: 0 0 15px;

width: 15px;
height: 15px;

fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.mc-footer__success {
margin-top: 10px;
font-size: 12px;
color: #2f7042;
}

.mc-footer__error {
margin-top: 10px;
font-size: 12px;
}


/* ===== BENEFITI ===== */

.mc-footer__benefits {
max-width: 1400px;
margin: 0 auto;

padding: 30px 40px;

border-top: 1px solid rgba(0,0,0,.08);
border-bottom: 1px solid rgba(0,0,0,.08);

display: grid;
grid-template-columns: repeat(4, 1fr);
}

.mc-footer__benefit {
min-width: 0;

display: flex;
align-items: center;
gap: 13px;

padding: 0 25px;

border-right: 1px solid rgba(0,0,0,.08);
}

.mc-footer__benefit:first-child {
padding-left: 0;
}

.mc-footer__benefit:last-child {
border-right: 0;
padding-right: 0;
}

.mc-footer__benefit-icon {
flex: 0 0 45px;

width: 45px;
height: 45px;

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

border-radius: 50%;
background: #f0f0f0;
}

.mc-footer__benefit-icon svg {
width: 23px;
height: 23px;

fill: none;
stroke: #111;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.mc-footer__benefit > span:last-child {
min-width: 0;
}

.mc-footer__benefit strong,
.mc-footer__benefit small {
display: block;
}

.mc-footer__benefit strong {
margin-bottom: 3px;

font-size: 11px;
line-height: 1.3;
font-weight: 800;
}

.mc-footer__benefit small {
font-size: 11px;
line-height: 1.4;
color: #666;
}


/* ===== COPYRIGHT ===== */

.mc-footer__copyright {
max-width: 1400px;
margin: 0 auto;

padding: 23px 30px 27px;

text-align: center;

color: #555;
font-size: 12px;
}


/* ==================================================
TABLET
================================================== */

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

.mc-footer__inner {
grid-template-columns: 1fr 1fr;
gap: 45px;
}

.mc-footer__benefits {
grid-template-columns: 1fr 1fr;
row-gap: 26px;
}

.mc-footer__benefit:nth-child(2) {
border-right: 0;
}

}


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

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

.mc-footer__inner {
display: block;

padding: 40px 18px 30px;
}


/* BRAND */

.mc-footer__brand {
padding-bottom: 30px;
}

.mc-footer__logo-img {
max-width: 88px;
max-height: 60px;
margin-bottom: 20px;
}

.mc-footer__intro {
max-width: 340px;

margin-bottom: 27px;

font-size: 13px;
}

.mc-footer__contact {
gap: 18px;
}

.mc-footer__contact-row {
font-size: 13px;
}


/* MOBILE ACCORDIONS */

.mc-footer__column,
.mc-footer__social-details {
border-top: 1px solid rgba(0,0,0,.09);
}

.mc-footer__column summary,
.mc-footer__social-details summary {
min-height: 62px;

margin: 0;

font-size: 13px;
}

.mc-footer__column summary svg,
.mc-footer__social-details summary > svg {
display: block;

transition: transform .2s ease;
}

.mc-footer__column[open] summary svg,
.mc-footer__social-details[open] summary > svg {
transform: rotate(180deg);
}

.mc-footer__links {
padding-bottom: 14px;
}

.mc-footer__links a {
min-height: 43px;
padding: 0 4px;

font-size: 13px;
}


/* SOCIAL */

.mc-footer__socials {
margin: 4px 0 20px;
padding-bottom: 7px;
}

.mc-footer__socials a {
width: 40px;
height: 40px;
}


/* NEWSLETTER */

.mc-footer__newsletter {
padding-top: 28px;
}

.mc-footer__newsletter h3 {
font-size: 14px;
}

.mc-footer__newsletter > p {
font-size: 12px;
}

.mc-footer__newsletter-form {
height: 52px;
}


/* BENEFITS */

.mc-footer__benefits {
display: flex;
flex-direction: column;

padding: 28px 18px;

gap: 23px;
}

.mc-footer__benefit,
.mc-footer__benefit:first-child,
.mc-footer__benefit:last-child {
padding: 0;

border-right: 0;
}

.mc-footer__benefit-icon {
flex-basis: 43px;
width: 43px;
height: 43px;
}

.mc-footer__benefit strong {
font-size: 11px;
}

.mc-footer__benefit small {
font-size: 11px;
}

.mc-footer__copyright {
padding: 23px 18px 28px;
font-size: 11px;
}

}

</style>


<script>
document.addEventListener('DOMContentLoaded', function () {

const footerDetails = document.querySelectorAll(
'.mc-footer__column, .mc-footer__social-details'
);

function setFooterAccordionState() {

if (window.innerWidth <= 749) {

footerDetails.forEach(function (item) {
item.removeAttribute('open');
});

} else {

footerDetails.forEach(function (item) {
item.setAttribute('open', '');
});

}

}

setFooterAccordionState();

});
</script>

/* ==================================================
MEGA CORTEZ FOOTER ICON FIX
Ovo smanjuje sve ikonice i vraća izgled kao na mockupu
================================================== */

/* reset za sve svg u footeru */
.mc-footer svg {
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
}

/* kontakt ikonice: adresa / telefon / email */
.mc-footer__contact-icon {
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 0 !important;
}

.mc-footer__contact-icon svg {
width: 20px !important;
height: 20px !important;
display: block !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}

/* strelice na accordion naslovima */
.mc-footer__column summary svg,
.mc-footer__social-details summary svg {
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
display: block !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}

/* social ikonice */
.mc-footer__socials a {
width: 42px !important;
height: 42px !important;
flex: 0 0 42px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}

.mc-footer__socials a svg {
width: 18px !important;
height: 18px !important;
display: block !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}

/* benefit ikonice dole */
.mc-footer__benefit-icon {
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #f2f2f2 !important;
line-height: 0 !important;
}

.mc-footer__benefit-icon svg {
width: 20px !important;
height: 20px !important;
display: block !important;
fill: none !important;
stroke: #111 !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}

/* privacy / lock ikonica */
.mc-footer__privacy-note svg {
width: 14px !important;
height: 14px !important;
flex: 0 0 14px !important;
display: block !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}

/* da se redovi lepo poravnaju */
.mc-footer__contact-row,
.mc-footer__benefit {
align-items: center !important;
}

/* mobile dodatno zatezanje */
@media screen and (max-width: 749px) {
.mc-footer__contact-icon {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
}

.mc-footer__contact-icon svg {
width: 18px !important;
height: 18px !important;
}

.mc-footer__socials a {
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
}

.mc-footer__socials a svg {
width: 17px !important;
height: 17px !important;
}

.mc-footer__benefit-icon {
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
}

.mc-footer__benefit-icon svg {
width: 18px !important;
height: 18px !important;
}

.mc-footer__column summary svg,
.mc-footer__social-details summary svg {
width: 15px !important;
height: 15px !important;
}
}
</style>


/* Mega Cortez — brand logo desktop pozicija */
@media screen and (min-width: 990px) {
[data-testid="product-information-details"] {
position: relative !important;
}

[data-testid="product-information-details"] .mc-product-brand-badge {
position: absolute !important;
top: 158px !important;
right: 0 !important;
margin: 0 !important;
transform: none !important;
z-index: 2;
}
}


.card__media .media img,
.product-card .media img {
object-fit: contain !important;
object-position: center !important;
padding: 16px !important;
box-sizing: border-box !important;
}