/** Shopify CDN: Minification failed

Line 3873:17 Unexpected "{"
Line 3873:26 Expected ":"
Line 3886:17 Unexpected "{"
Line 3886:26 Expected ":"
Line 3902:17 Unexpected "{"
Line 3902:26 Expected ":"
Line 3907:17 Unexpected "{"
Line 3907:26 Expected ":"
Line 3922:17 Unexpected "{"
Line 3922:26 Expected ":"
... and 12 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-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

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

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

html[scroll-lock],
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;
  cursor: pointer;
}

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

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

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

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

p:empty {
  display: none;
}

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

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

/* view transitions */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

.flip-x {
  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;
}

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

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

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

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

.relative {
  position: relative;
}

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

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

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

.icon-default {
  fill: currentColor;
}

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

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

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

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

/* Typography presets */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

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

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

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

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

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

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

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

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

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

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

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

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

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

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

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

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

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

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

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

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.field__input {
  flex-grow: 1;
  text-align: 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;
}

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

  50% {
    transform: scale(1.2);
  }

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

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

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Global scrollbar styles */

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

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

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

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

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

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

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

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

.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#shopify-section-template--31694724628822__collection_list_QxKfxN
  .collection-card
  .collection-card__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75));
  pointer-events: none;
  z-index: 10;
}

/* HERO HOMEPAGE - posizione pulsanti desktop */
@media screen and (min-width: 750px) {
  [id$="__hero_jVaWmY"] .hero__content-wrapper {
    padding-inline-start: 140px !important;
  }
}

/* HERO HOMEPAGE - pulsanti con angoli squadrati */
[id$="__hero_jVaWmY"] a.button-custom {
  --style-border-radius-buttons-primary: 0px !important;
  border-radius: 2px !important;
}

/* =========================================================
   MECHAPOP - 6 CATEGORIE HOME DESKTOP
   Card quadrate senza ritaglio
   ========================================================= */

@media screen and (min-width: 750px) {

  [id$="__collection_list_QxKfxN"] .resource-list__item {
    aspect-ratio: 1 / 1 !important;
    min-width: 0;
    overflow: hidden;
  }

  [id$="__collection_list_QxKfxN"] .collection-card,
  [id$="__collection_list_QxKfxN"] .collection-card__inner,
  [id$="__collection_list_QxKfxN"] .collection-card__image {
    width: 100% !important;
    height: 100% !important;
  }

  [id$="__collection_list_QxKfxN"] .resource-image__image,
  [id$="__collection_list_QxKfxN"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* =========================================================
   MECHAPOP - HERO MOBILE DEFINITIVA
   ========================================================= */

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

  /* 1. Nasconde TUTTO il contenuto HTML della Hero.
     Nel tuo caso contiene solamente i due pulsanti. */
  [id$="__hero_jVaWmY"] .hero__content-wrapper {
    display: none !important;
  }

  /* 2. Altezza Hero proporzionata all'immagine mobile verticale */
  [id$="__hero_jVaWmY"] {
    min-height: 125vw !important;
    height: 125vw !important;
    max-height: none !important;
    background: #000 !important;
  }

  [id$="__hero_jVaWmY"] .hero__container {
    min-height: 125vw !important;
    height: 125vw !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #000 !important;
  }

  /* 3. Media grid riempie esattamente tutta la Hero */
  [id$="__hero_jVaWmY"] .hero__media-grid {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 4. Solo immagine mobile */
  [id$="__hero_jVaWmY"] .hero__media-wrapper--mobile {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  [id$="__hero_jVaWmY"] .hero__media-wrapper--desktop {
    display: none !important;
  }

  /* 5. L'immagine riempie tutta la larghezza senza deformarsi */
  [id$="__hero_jVaWmY"] .hero__media-wrapper--mobile .hero__media {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* =========================================================
   MECHAPOP - HEADER MOBILE
   ========================================================= */

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

  #header-component .header-logo,
  #header-component .header-logo img {
    max-height: 95px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  #header-component .header__row {
    overflow: hidden !important;
  }
}

/* =========================================================
   MECHAPOP - RIMUOVE LINEA TRA HEADER E HERO SU MOBILE
   ========================================================= */

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

  #header-component,
  #header-component .header,
  #header-component .header__row {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  [id$="__hero_jVaWmY"] {
    border-top: 0 !important;
    margin-top: -1px !important;
  }
}

/* =========================================================
   MECHAPOP - COMPLETA IL KIT
   DESKTOP DEFINITIVO
   ========================================================= */

@media screen and (min-width: 750px) {

  [id$="__section_D3NVkP"] {
    position: relative !important;
  }

  [id$="__section_D3NVkP"] .section-content-wrapper {
    position: relative !important;
  }

  [id$="__section_D3NVkP"] .group-block {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 16px !important;

    width: 100% !important;
    height: auto !important;

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

    z-index: 5 !important;
    pointer-events: none !important;
  }

  [id$="__section_D3NVkP"] .group-block-content {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;

    width: 63% !important;

    margin-left: 5.2% !important;
    margin-right: auto !important;

    padding: 0 !important;
    gap: 0 !important;

    align-items: center !important;

    pointer-events: none !important;
  }

  [id$="__section_D3NVkP"] .group-block-content > a {
    position: relative !important;

    width: 78px !important;
    min-width: 78px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 8px 10px !important;

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

    background: #ffffff !important;
    color: #000000 !important;

    border: 1px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;

    pointer-events: auto !important;
  }


  /* PINZE */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(1) {
    left: 58px !important;
  }


  /* MARKER */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(2) {
    left: 92px !important;
  }


  /* COLORI */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(3) {
    left: 103px !important;
  }


  /* ACTION BASE */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(4) {
    left: 115px !important;
  }
}

/* =========================================================
   MECHAPOP - COMPLETA IL KIT
   MOBILE: HOTSPOT TRASPARENTI SUI 4 PRODOTTI
   ========================================================= */

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

  /*
   * Immagine e gruppo pulsanti occupano
   * esattamente la stessa cella.
   */
  [id$="__section_D3NVkP"] .section-content-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;

    position: relative !important;

    gap: 0 !important;
  }


  /* IMMAGINE */
  [id$="__section_D3NVkP"] .image-block {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;

    position: relative !important;
    z-index: 1 !important;
  }


  /*
   * Il gruppo dei quattro link viene sovrapposto
   * esattamente alla stessa immagine.
   */
  [id$="__section_D3NVkP"] .group-block {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;
    inset: auto !important;

    align-self: stretch !important;
    justify-self: stretch !important;

    width: 100% !important;
    height: 100% !important;

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

    background: transparent !important;
    border: 0 !important;

    z-index: 10 !important;

    pointer-events: none !important;
  }


  [id$="__section_D3NVkP"] .group-block-content {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

    pointer-events: none !important;
  }


  /*
   * Reset COMPLETO dei pulsanti desktop.
   * Da qui ogni <a> diventa un hotspot.
   */
  [id$="__section_D3NVkP"] .group-block-content > a {
    position: absolute !important;

    min-width: 0 !important;
    min-height: 0 !important;

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

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    background: transparent !important;
    color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-size: 0 !important;
    line-height: 0 !important;

    opacity: 0 !important;

    z-index: 20 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
  }


  /* =========================================================
   MECHAPOP - HOTSPOT MOBILE - TUNING FINALE
   ========================================================= */


  /* PINZE
     - parte più in basso per non coprire il testo
     - +3px sul lato destro
  */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(1) {
    left: 2% !important;
    top: 30% !important;

    width: calc(19% + 3px) !important;
    height: 68% !important;
  }


  /* MARKER
     - 3px più stretto a sinistra
     - 3px più stretto a destra
  */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(2) {
    left: calc(22% + 3px) !important;
    top: 30% !important;

    width: calc(17% - 6px) !important;
    height: 68% !important;
  }


  /* COLORI
     - 10px più stretto solo sul lato destro
  */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(3) {
    left: 40% !important;
    top: 30% !important;

    width: calc(14% - 10px) !important;
    height: 68% !important;
  }


  /* ACTION BASE
     - esteso di 8px verso sinistra
     - lato destro invariato
  */
  [id$="__section_D3NVkP"] .group-block-content > a:nth-of-type(4) {
    left: calc(55% - 8px) !important;
    top: 30% !important;

    width: calc(15% + 8px) !important;
    height: 68% !important;
  }
}

/* =========================================================
   MECHAPOP - PRODUCT PAGE CTA SQUADRATI
   ========================================================= */

.product-information .buy-buttons-block .add-to-cart-button,
.product-information .buy-buttons-block .button,
.product-information .shopify-app-block button,
.product-information .shopify-app-block a[role="button"],
.product-information .shopify-app-block [role="button"],
.product-information .shopify-app-block [class*="button"],
.product-information .shopify-app-block [class*="btn"],
.product-information .shopify-app-block [class*="preorder"],
.product-information .shopify-app-block [class*="notify"],
.product-information .shopify-app-block [class*="stock"] {
  border-radius: 0 !important;
}

/* Anche eventuali box informativi generati dall'app preorder */
.product-information .shopify-app-block > div {
  border-radius: 0 !important;
}

/* MechaPop - checkout dinamico prodotto squadrato */
.product-information .shopify-payment-button__button,
.product-information .shopify-payment-button__button--unbranded {
  border-radius: 0 !important;
}

/* MechaPop - fix barra annunci tagliata */
.announcement-bar__slide {
  --line-height: 1.25 !important;
  line-height: 1.25 !important;
  overflow: visible !important;
}

.announcement-bar__text {
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  overflow: visible !important;
}

.announcement-bar__slides,
.announcement-bar__slider,
.announcement-bar {
  overflow: visible !important;
}

/* =========================================================
   MechaPop Market - Secondary text global standard
   Standard secondary/muted text: #666666
   Incollare IN FONDO ad Assets/base.css
   ========================================================= */

/* Product details + "Quale sarà il prossimo?" + Schema colori */
.mp-product-details {
  --mp-muted: #666666 !important;
}

/* Breadcrumb: il valore salvato nel Theme Editor può restare #777777,
   ma questa regola lo sovrascrive visivamente in tutto il sito. */
.mp-breadcrumb__current,
.mp-breadcrumb__separator {
  color: #666666 !important;
}

/* Community: stelle vuote e contatore recensioni */
.community-card__star--empty {
  color: #666666 !important;
  -webkit-text-stroke-color: #666666 !important;
}

.community-card__rating-count {
  color: #666666 !important;
}

/* "Ti servirà anche": variante e prezzo barrato */
.mp-bundle__variant,
.mp-bundle__price s {
  color: #666666 !important;
}

/* Nuovi arrivi / contenuti: prezzo precedente barrato */
.mp-bottom-grid__compare {
  color: #666666 !important;
}

/* Utility: eventuali elementi custom esplicitamente marcati come muted/secondary */
.mp-text-muted,
.mp-text-secondary {
  color: #666666 !important;
}

/* =========================================================
   MechaPop Market - POTREBBERO INTERESSARTI
   Rifinitura sezione nativa Horizon Product Recommendations
   Incollare IN FONDO ad Assets/base.css
   ========================================================= */

/* Solo raccomandazioni "related", non complementary */
product-recommendations.product-recommendations[data-intent="related"] {
  --mp-related-muted: #666666;
}

/* Compatta la sezione */
product-recommendations.product-recommendations[data-intent="related"] .section {
  padding-block-start: 24px !important;
  padding-block-end: 32px !important;
}

/* Titolo sezione */
product-recommendations.product-recommendations[data-intent="related"]
  .section-resource-list__content {
  margin-bottom: 4px;
}

product-recommendations.product-recommendations[data-intent="related"]
  .section-resource-list__content
  :is(.text-block, h2, h3, [role="heading"]) {
  color: #111111 !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

/* Card più pulite */
product-recommendations.product-recommendations[data-intent="related"]
  .product-grid__card {
  gap: 6px !important;
  padding: 0 !important;
}

product-recommendations.product-recommendations[data-intent="related"]
  .product-card
  a.contents
  .text-block {
  width: 100% !important;
}

product-recommendations.product-recommendations[data-intent="related"]
  .product-card
  a.contents
  .text-block
  p {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #111111 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* Prezzo */
product-recommendations.product-recommendations[data-intent="related"]
  product-price {
  margin-top: 1px !important;
  color: #111111 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

product-recommendations.product-recommendations[data-intent="related"]
  product-price
  s {
  color: var(--mp-related-muted) !important;
}

/* Desktop: mantiene le card ordinate e non eccessivamente grandi */
@media screen and (min-width: 750px) {
  product-recommendations.product-recommendations[data-intent="related"]
    .resource-list--grid {
    align-items: start;
  }

  product-recommendations.product-recommendations[data-intent="related"]
    .resource-list__item {
    min-width: 0;
  }
}

/* Mobile: una card ampia + anteprima della successiva */
@media screen and (max-width: 749px) {
  product-recommendations.product-recommendations[data-intent="related"] .section {
    padding-block-start: 20px !important;
    padding-block-end: 24px !important;
  }

  product-recommendations.product-recommendations[data-intent="related"]
    .section-resource-list__content
    :is(.text-block, h2, h3, [role="heading"]) {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  product-recommendations.product-recommendations[data-intent="related"]
    .resource-list__carousel {
    --mobile-card-size: 72cqw;
  }

  product-recommendations.product-recommendations[data-intent="related"]
    .product-card
    a.contents
    .text-block
    p {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  product-recommendations.product-recommendations[data-intent="related"]
    product-price {
    font-size: 13px !important;
  }
}

/* ============================================================
   MECHAPOP MARKET - FILTRI COLLEZIONE v1
   Horizon + Shopify Search & Discovery

   Obiettivi:
   - Desktop: sidebar verticale pulita, compatta e coerente col mockup
   - Mobile: mantiene il drawer nativo Horizon, ma con stile MechaPop
   - Checkbox selezionate: #B91017
   - Testi secondari: #666666
   - Nessuna modifica alla logica Search & Discovery
   ============================================================ */


/* ============================================================
   DESKTOP - BARRA SUPERIORE COLLECTION
   ============================================================ */
@media screen and (min-width: 750px) {

  .collection-wrapper .facets.facets-controls-wrapper {
    align-items: center !important;
    gap: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 2px !important;
    border-bottom: 1px solid #E7E7E3 !important;
    color: #666666 !important;
  }

  /* "Filtri" -> "FILTRA PER" senza modificare Liquid */
  .collection-wrapper .facets--filters-title {
    font-size: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .collection-wrapper .facets--filters-title::after {
    content: "FILTRA PER";
    display: inline-block;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .035em;
    color: #111111;
  }

  .collection-wrapper .products-count-wrapper {
    color: #666666 !important;
    font-size: 12px !important;
  }


  /* ============================================================
     DESKTOP - SIDEBAR
     ============================================================ */

  .collection-wrapper
  .facets-block-wrapper--vertical:not(#filters-drawer) {
    --facets-margin: 0 24px 0 0 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer) {
    --checkbox-size: 18px;
    --checkbox-border: 1px solid #BDBDB8;
    --checkbox-border-radius: 0px;
    --checkbox-label-padding: 8px;

    color: #111111 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__form-wrapper {
    color: #666666 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__filters-wrapper {
    margin-inline-end: 0 !important;
    border-top: 1px solid #E7E7E3;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__item {
    border-bottom: 1px solid #E7E7E3;
  }

  /* Evita l'effetto Horizon che sbiadisce gli altri filtri in hover */
  .collection-wrapper
  .facets--vertical
  .facets__filters-wrapper:hover
  .facets__summary,
  .collection-wrapper
  .facets--vertical
  .facets__filters-wrapper:has(.facets__panel[open])
  .facets__summary {
    opacity: 1 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__summary {
    min-height: 0 !important;
    padding: 14px 0 10px !important;
    align-items: center !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
    color: #111111 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__label {
    margin: 0 !important;
    color: #111111 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__summary
  .icon-caret {
    width: 12px !important;
    height: 12px !important;
    color: #666666 !important;
    opacity: 1 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__inputs {
    gap: 0 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__inputs-wrapper {
    margin: 2px 0 10px !important;
    padding: 0 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__inputs-list {
    gap: 7px !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__inputs-list-item {
    min-height: 24px !important;
  }


  /* ============================================================
     DESKTOP - CHECKBOX
     ============================================================ */

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox__label {
    min-width: 0 !important;
    line-height: 18px !important;
    align-items: center !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox
  .icon-checkmark {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 1px solid #BDBDB8 !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox__label-text {
    padding-inline-start: 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox:not(.checkbox--disabled):hover
  .icon-checkmark {
    border-color: #B91017 !important;
    background: #FFFFFF !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox:not(.checkbox--disabled):hover
  .checkbox__label-text {
    color: #111111 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox__input:checked
  + .checkbox__label
  .icon-checkmark {
    border-color: #B91017 !important;
    background: #B91017 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox__input:checked
  + .checkbox__label
  .icon-checkmark path {
    stroke: #FFFFFF !important;
    opacity: 1 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox__input:checked
  + .checkbox__label
  .checkbox__label-text {
    color: #111111 !important;
    font-weight: 700 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__inputs-list-item--disabled
  .checkbox__label-text,
  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .checkbox__input:disabled
  + .checkbox__label {
    color: #A6A6A2 !important;
  }


  /* ============================================================
     DESKTOP - PREZZO
     ============================================================ */

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .price-facet__inputs-wrapper {
    gap: 8px !important;
    padding: 0 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .price-facet__field {
    min-height: 42px !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .price-facet__input {
    min-height: 42px !important;
    padding: 10px 10px 10px 28px !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    box-shadow: inset 0 0 0 1px #BDBDB8 !important;
    font-size: 13px !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .price-facet__input:focus {
    box-shadow: inset 0 0 0 1px #B91017 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .price-facet__label {
    padding: 10px !important;
    color: #666666 !important;
    font-size: 13px !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .price-facet__separator {
    color: #666666 !important;
    font-size: 12px !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .price-facet__highest-price {
    padding: 8px 0 12px !important;
    color: #666666 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }


  /* ============================================================
     DESKTOP - FILTRI ATTIVI / CANCELLA TUTTO
     ============================================================ */

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets-remove {
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets-remove__pill {
    border-radius: 0 !important;
    font-size: 11px !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__clear-all-link {
    padding: 4px 0 !important;
    color: #B91017 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .collection-wrapper
  .facets--vertical:not(.facets--drawer)
  .facets__clear-all-link:hover {
    color: #B91017 !important;
    text-decoration-color: #B91017 !important;
  }
}


/* ============================================================
   MOBILE - PULSANTE "FILTRO"
   ============================================================ */
@media screen and (max-width: 749px) {

  .collection-wrapper .facets-toggle {
    min-height: 54px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .collection-wrapper .facets-toggle__button {
    gap: 8px !important;
    color: #111111 !important;
    font-weight: 700 !important;
  }

  .collection-wrapper .facets-toggle__button .svg-wrapper {
    color: #111111 !important;
  }

  .collection-wrapper .filter-count-bubble {
    border-color: #FFFFFF !important;
  }

  .collection-wrapper .filter-count-bubble__background {
    background: #B91017 !important;
  }

  .collection-wrapper .filter-count-bubble__text {
    color: #FFFFFF !important;
    font-weight: 800 !important;
  }
}


/* ============================================================
   MOBILE - DRAWER FILTRI
   ============================================================ */

#filters-drawer {
  --checkbox-size: 22px;
  --checkbox-border: 1px solid #BDBDB8;
  --checkbox-border-radius: 0px;
  --checkbox-label-padding: 10px;
}

#filters-drawer .theme-drawer__dialog {
  background: #FFFFFF !important;
}

#filters-drawer .theme-drawer__header {
  padding: 20px 22px 16px !important;
  border-bottom: 1px solid #E7E7E3 !important;
  background: #FFFFFF !important;
}

#filters-drawer .theme-drawer__title {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #111111 !important;
}

#filters-drawer .theme-drawer__title {
  font-size: 0 !important;
}

#filters-drawer .theme-drawer__title::before {
  content: "FILTRI";
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #111111;
}

#filters-drawer .theme-drawer__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  margin-inline-start: 7px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #B91017 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#filters-drawer .theme-drawer__close-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: #F7F7F5 !important;
  color: #666666 !important;
}

#filters-drawer .facets-drawer__filters {
  padding: 0 22px !important;
}

#filters-drawer .facets__filters-wrapper {
  border-top: 0 !important;
}

#filters-drawer .facets__item {
  border-bottom: 1px solid #E7E7E3 !important;
}

#filters-drawer .facets__summary {
  min-height: 0 !important;
  padding: 18px 0 14px !important;
  align-items: center !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: #111111 !important;
  opacity: 1 !important;
}

#filters-drawer .facets__label {
  margin: 0 !important;
  color: #111111 !important;
}

#filters-drawer .facets__summary .icon-caret {
  width: 13px !important;
  height: 13px !important;
  color: #666666 !important;
  opacity: 1 !important;
}

#filters-drawer .facets__inputs {
  gap: 0 !important;
}

#filters-drawer .facets__inputs-wrapper {
  margin: 2px 0 14px !important;
  padding: 0 !important;
}

#filters-drawer .facets__inputs-list {
  gap: 12px !important;
}

#filters-drawer .checkbox__label {
  min-width: 0 !important;
  line-height: 22px !important;
  align-items: center !important;
}

#filters-drawer .checkbox .icon-checkmark {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border: 1px solid #BDBDB8 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
}

#filters-drawer .checkbox__label-text {
  padding-inline-start: 10px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: #333333 !important;
}

#filters-drawer
.checkbox:not(.checkbox--disabled):hover
.icon-checkmark {
  border-color: #B91017 !important;
  background: #FFFFFF !important;
}

#filters-drawer
.checkbox__input:checked
+ .checkbox__label
.icon-checkmark {
  border-color: #B91017 !important;
  background: #B91017 !important;
}

#filters-drawer
.checkbox__input:checked
+ .checkbox__label
.icon-checkmark path {
  stroke: #FFFFFF !important;
  opacity: 1 !important;
}

#filters-drawer
.checkbox__input:checked
+ .checkbox__label
.checkbox__label-text {
  color: #111111 !important;
  font-weight: 700 !important;
}

#filters-drawer
.checkbox__input:disabled
+ .checkbox__label {
  color: #A6A6A2 !important;
}


/* ============================================================
   MOBILE - PREZZO
   ============================================================ */

#filters-drawer .price-facet__inputs-wrapper {
  gap: 10px !important;
  padding: 0 !important;
}

#filters-drawer .price-facet__field {
  min-height: 48px !important;
}

#filters-drawer .price-facet__input {
  min-height: 48px !important;
  padding: 12px 10px 12px 30px !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: #111111 !important;
  box-shadow: inset 0 0 0 1px #BDBDB8 !important;
  font-size: 15px !important;
}

#filters-drawer .price-facet__input:focus {
  box-shadow: inset 0 0 0 1px #B91017 !important;
}

#filters-drawer .price-facet__label {
  padding: 12px !important;
  color: #666666 !important;
  font-size: 15px !important;
}

#filters-drawer .price-facet__separator {
  color: #666666 !important;
  font-size: 14px !important;
}

#filters-drawer .price-facet__highest-price {
  padding: 10px 0 14px !important;
  color: #666666 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}


/* ============================================================
   MOBILE - FILTRI ATTIVI
   ============================================================ */

#filters-drawer .facets-remove {
  gap: 6px !important;
  padding: 12px 0 0 !important;
  margin: 0 0 4px !important;
}

#filters-drawer .facets-remove__pill {
  border-radius: 0 !important;
  font-size: 12px !important;
}


/* ============================================================
   MOBILE - AZIONI IN FONDO
   ============================================================ */

#filters-drawer .facets__drawer-actions {
  gap: 10px !important;
  padding: 12px 22px 20px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .08) !important;
}

#filters-drawer .facets__clear-all,
#filters-drawer .facets__see-results {
  min-height: 52px !important;
  padding: 12px 18px !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

#filters-drawer .facets__clear-all {
  border: 1px solid #B91017 !important;
  background: #FFFFFF !important;
  color: #B91017 !important;
}

#filters-drawer .facets__see-results {
  border: 1px solid #B91017 !important;
  background: #B91017 !important;
  color: #FFFFFF !important;
}

#filters-drawer .facets__see-results:hover,
#filters-drawer .facets__see-results:focus-visible {
  background: #A30E14 !important;
  border-color: #A30E14 !important;
  color: #FFFFFF !important;
}

/* MECHAPOP - "Filtro" -> "Filtra" nel pulsante mobile collection */
@media screen and (max-width: 749px) {

  .collection-wrapper .facets-toggle__button {
    font-size: 0 !important;
  }

  .collection-wrapper .facets-toggle__button::after {
    content: "Filtra";
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    color: #111111;
  }
}

/* MECHAPOP - Header desktop icon size final */
@media screen and (min-width: 750px) {

  #header-component .header-actions svg,
  #header-component .search-action svg,
  #header-component .header-actions__cart-icon svg,
  #header-component .Vtl-WishlistHeader__HeartIconWrapper {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  #header-component .account-button__icon {
    width: 23px !important;
    height: 25px !important;
  }

  #header-component .header-actions__action {
    min-width: 42px !important;
    min-height: 42px !important;
  }
}

/* =========================================================
   MECHAPOP MARKET — MEGA MENU FINAL v5 — MOBILE PARITY + HEADER FIX.1
   Target: Shopify Horizon 4.1.5

   FIX v4:
   - removes the oversized flex-basis rules from v3
   - columns use their REAL content width
   - starts from the left
   - 30px maximum equal gap
   - gap reduces only on narrower desktop breakpoints
   - flex-shrink + wrapping prevent any text overlap
   - no product previews
   - TCG · IN ARRIVO remains a direct link

   IMPORTANT:
   Remove the previous "MEGA MENU FINAL v3" block
   and keep ONLY this FINAL v4 block.
   ========================================================= */

@media screen and (min-width: 990px) {

  .header-menu .menu-list__submenu-inner {
    background: #ffffff;
    padding: 24px 32px 26px !important;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 16px 30px rgb(0 0 0 / 0.08);
    max-height: min(74vh, 680px) !important;
    overflow-y: auto;
    scrollbar-color: #bdbdbd transparent;
  }

  .header-menu .mega-menu {
    width: 100%;
  }

  /* Remove all featured product previews */
  .header-menu .mega-menu__content,
  .header-menu .mega-menu__content-list,
  .header-menu .mega-menu__content-list-item {
    display: none !important;
  }

  .header-menu .mega-menu__grid {
    display: block !important;
    width: 100% !important;
  }

  /* =========================================================
     REAL DYNAMIC COLUMNS
     ========================================================= */
  .header-menu .mega-menu__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    /* Equal spacing. 30px on normal desktop. */
    gap: 30px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .header-menu .mega-menu__column {
    /*
      Natural content width instead of the large v3 fixed basis.
      shrink=1 means that, if required, columns become narrower
      and their text wraps instead of overlapping.
    */
    flex: 0 1 max-content !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 360px !important;
  }

  .header-menu .mega-menu__column > div {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Column titles */
  .header-menu .mega-menu__link--parent {
    position: relative;
    display: flex;
    width: max-content;
    max-width: 100%;
    padding: 0 0 11px !important;
    margin: 0 0 7px !important;
    color: #111111 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .header-menu .mega-menu__link--parent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: #B91017;
  }

  /* Child links */
  .header-menu .mega-menu__column ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-menu .mega-menu__column ul li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-menu .mega-menu__column ul .mega-menu__link {
    position: relative;
    display: inline-flex;
    align-items: center;

    width: max-content;
    max-width: 100%;

    padding: 5px 0 !important;
    color: #242424 !important;
    font-size: 13.5px !important;
    line-height: 1.28 !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    transition:
      color 160ms ease,
      transform 160ms ease;
  }

  .header-menu .mega-menu__column ul .mega-menu__link:hover,
  .header-menu .mega-menu__column ul .mega-menu__link:focus-visible {
    color: #B91017 !important;
    transform: translateX(3px);
  }

  /* =========================================================
     PREORDER
     Horizon renders these entries differently because they are
     direct children, not grouped third-level links.
     Turn that single vertical list into horizontal "category columns".
     ========================================================= */
  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__list {
    display: block !important;
    width: 100% !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column > div,
  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column > div > ul,
  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column > ul {
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column ul {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 30px !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column ul li {
    flex: 0 1 max-content !important;
    min-width: 0 !important;
    max-width: 230px !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column ul .mega-menu__link {
    position: relative;
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 0 0 11px !important;
    margin: 0 !important;
    color: #111111 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column ul .mega-menu__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: #B91017;
  }

  /* =========================================================
   TOP LEVEL UNDERLINE — PERSISTENTE
   Usa il titolo e NON il ::after del link,
   riservato da Horizon alla safety-box.
   ========================================================= */

.header-menu
.menu-list__list-item:not([slot="overflow"])
> .menu-list__trigger
> .menu-list__link
.menu-list__link-title,

.header-menu
.menu-list__list-item:not([slot="overflow"])
> .menu-list__link
.menu-list__link-title {
  position: relative;
}

/* Linea rossa nascosta */
.header-menu
.menu-list__list-item:not([slot="overflow"])
> .menu-list__trigger
> .menu-list__link
.menu-list__link-title::after,

.header-menu
.menu-list__list-item:not([slot="overflow"])
> .menu-list__link
.menu-list__link-title::after {
  content: "";
  position: absolute;

  left: var(--gap-sm);
  right: var(--gap-sm);
  bottom: -8px;

  height: 2px;
  background: #B91017;

  transform: scaleX(0);
  transform-origin: center;
  transition: transform 160ms ease;

  pointer-events: none;
}

/* Hover */
.header-menu
.menu-list__list-item:hover
> .menu-list__trigger
> .menu-list__link
.menu-list__link-title::after,

.header-menu
.menu-list__list-item:hover
> .menu-list__link
.menu-list__link-title::after,

/* Tastiera */
.header-menu
.menu-list__list-item:focus-within
> .menu-list__trigger
> .menu-list__link
.menu-list__link-title::after,

.header-menu
.menu-list__list-item:focus-within
> .menu-list__link
.menu-list__link-title::after,

/* Mega-menu realmente aperto da Horizon */
.header-menu
.menu-list__list-item:has(.menu-list__disclosure[aria-expanded="true"])
> .menu-list__trigger
> .menu-list__link
.menu-list__link-title::after {
  transform: scaleX(1) !important;
}

  /* TCG · IN ARRIVO */
  .header-menu a[href*="/pages/tcg-in-arrivo"] {
    color: #ffffff !important;
  }

  .header-menu a[href*="/pages/tcg-in-arrivo"] .menu-list__link-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    white-space: nowrap;
  }

  .header-menu a[href*="/pages/tcg-in-arrivo"]:hover .menu-list__link-title,
  .header-menu a[href*="/pages/tcg-in-arrivo"]:focus-visible .menu-list__link-title {
    color: #B91017 !important;
  }

  .header-menu .menu-list__submenu-inner::-webkit-scrollbar {
    width: 8px;
  }

  .header-menu .menu-list__submenu-inner::-webkit-scrollbar-thumb {
    background: #c8c8c8;
    border-radius: 0;
  }

  .header-menu .menu-list__submenu-inner::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* =========================================================
   Narrow desktop:
   Reduce the SAME gap for every column before text can collide.
   ========================================================= */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-menu .mega-menu__list {
    gap: 24px !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column ul {
    gap: 24px !important;
  }
}

@media screen and (min-width: 1050px) and (max-width: 1199px) {
  .header-menu .mega-menu__list {
    gap: 16px !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column ul {
    gap: 16px !important;
  }

  .header-menu .menu-list__submenu-inner {
    padding-inline: 24px !important;
  }

  .header-menu .mega-menu__column {
    max-width: 300px !important;
  }
}

@media screen and (min-width: 990px) and (max-width: 1049px) {
  .header-menu .mega-menu__list {
    gap: 10px !important;
  }

  .header-menu .menu-list__list-item:has(> .menu-list__trigger a[href*="/collections/preorder"])
  .mega-menu__column ul {
    gap: 10px !important;
  }

  .header-menu .menu-list__submenu-inner {
    padding-inline: 18px !important;
  }

  .header-menu .mega-menu__column {
    max-width: 260px !important;
  }
}

/* =========================================================
   MOBILE — PARITÀ VISIVA CON DESKTOP
   - gruppi tipo LINEA / GRADE con underline rosso
   - collezioni sotto al relativo gruppo
   - leggibilità e spaziatura coerenti
   ========================================================= */
@media screen and (max-width: 989px) {

  .menu-drawer__navigation {
    --mechapop-menu-red: #B91017;
  }

  /* Top level */
  .menu-drawer__menu-item--mainlist {
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  /* Titolo della categoria quando entri nel sottomenu */
  .menu-drawer__title {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .025em !important;
  }

  /* -------------------------
     GRUPPI DI SECONDO LIVELLO
     es. LINEA / GRADE
     ------------------------- */

  /* Accordion mode */
  .menu-drawer__menu--childlist
    .menu-drawer__list-item--deep
    summary.menu-drawer__menu-item--parent,

  /* Flat mode */
  .menu-drawer__menu--childlist
    .menu-drawer__list-item--flat:has(.menu-drawer__menu--grandchildlist)
    > .menu-drawer__menu-item--parent {
    position: relative !important;
    min-height: auto !important;
    padding: 18px 0 13px !important;
    margin: 0 !important;

    color: #111111 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  /* underline rosso come desktop */
  .menu-drawer__menu--childlist
    .menu-drawer__list-item--deep
    summary.menu-drawer__menu-item--parent::after,

  .menu-drawer__menu--childlist
    .menu-drawer__list-item--flat:has(.menu-drawer__menu--grandchildlist)
    > .menu-drawer__menu-item--parent::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 7px !important;
    width: 34px !important;
    height: 2px !important;
    background: var(--mechapop-menu-red) !important;
  }

  /* Mantiene + / accordion sulla destra */
  .menu-drawer__menu--childlist
    summary.menu-drawer__menu-item--parent
    .icon-plus {
    margin-left: auto !important;
  }

  /* -------------------------
     COLLEZIONI / TERZO LIVELLO
     ------------------------- */
  .menu-drawer__menu--grandchildlist {
    padding: 2px 0 12px !important;
    margin: 0 !important;
  }

  .menu-drawer__menu--grandchildlist .menu-drawer__list-item {
    margin: 0 !important;
  }

  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child {
    min-height: auto !important;
    padding: 7px 0 !important;
    color: #262626 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
  }

  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child:hover,
  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child:focus-visible,
  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--active {
    color: var(--mechapop-menu-red) !important;
  }

  /* separazione discreta fra gruppi */
  .menu-drawer__menu--childlist > .menu-drawer__list-item--deep,
  .menu-drawer__menu--childlist > .menu-drawer__list-item--flat {
    border-bottom: 1px solid #ededed !important;
  }

  /* I link semplici di secondo livello non devono sembrare titoli di gruppo */
  .menu-drawer__menu--childlist
    > .menu-drawer__list-item:not(.menu-drawer__list-item--deep):not(.menu-drawer__list-item--flat)
    > .menu-drawer__menu-item--parent {
    padding-block: 11px !important;
    font-weight: 600 !important;
  }

  .menu-drawer__menu-item:hover,
  .menu-drawer__menu-item:focus-visible,
  .menu-drawer__menu-item--active {
    color: var(--mechapop-menu-red) !important;
  }

  .menu-drawer a[href*="/pages/tcg-in-arrivo"] .menu-drawer__menu-item-text {
    color: var(--mechapop-menu-red) !important;
    font-weight: 800 !important;
  }
}

/* =========================================================
   ANNOUNCEMENT BAR — CENTRATURA DESKTOP + MOBILE
   Corregge anche il centraggio della seconda riga quando va a capo.
   ========================================================= */
.announcement-bar__slider {
  justify-content: center !important;
}

.announcement-bar__slides {
  width: 100% !important;
  max-width: 680px !important;
  margin-inline: auto !important;
}

.announcement-bar__slide {
  width: 100% !important;
  place-content: center !important;
  text-align: center !important;
  overflow: visible !important;
}

.announcement-bar__text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 4px 12px !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  overflow: visible !important;
  text-wrap: balance;
}

/* =========================================================
   MOBILE — FIX SFARFALLIO BIANCO TRA ANNUNCI E HEADER
   Le due ombre nere coprono eventuali gap sub-pixel durante lo scroll.
   Nessuna modifica alle altezze.
   ========================================================= */
@media screen and (max-width: 989px) {

  .shopify-section-group-header-group,
  .shopify-section-group-header-group > .shopify-section,
  .header-section,
  header-component,
  .header__row--top,
  .announcement-bar {
    background-color: #080808 !important;
  }

  .announcement-bar {
    box-shadow: 0 2px 0 #080808 !important;
  }

  .header-section,
  header-component,
  .header__row--top {
    box-shadow: 0 -2px 0 #080808 !important;
  }
}

/* =========================================================
   MECHAPOP — ANNOUNCEMENT BAR MOBILE v1
   PUNTO 3
   - riga 1: spedizione + preorder
   - riga 2: nuovi arrivi centrato su tutta la barra
   - non modifica desktop
   ========================================================= */

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

  .announcement-bar__text--mechapop {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;

    width: 100% !important;
    max-width: none !important;

    column-gap: 12px !important;
    row-gap: 2px !important;

    text-align: center !important;
  }

  .announcement-bar__text--mechapop .announcement-bar__item {
    min-width: 0;
    white-space: nowrap;
  }

  .announcement-bar__item--shipping {
    justify-self: end;
  }

  .announcement-bar__item--preorder {
    justify-self: start;
  }

  .announcement-bar__item--new {
    grid-column: 1 / -1;
    justify-self: center;

    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   MECHAPOP — ANNOUNCEMENT BAR DESKTOP v1
   PUNTO 4
   - centra l'intero gruppo rispetto alla barra
   - mantiene i 3 messaggi sulla stessa riga
   - non modifica mobile
   ========================================================= */

@media screen and (min-width: 750px) {

  .announcement-bar__text--mechapop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    gap: 34px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }

  .announcement-bar__text--mechapop .announcement-bar__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* =========================================================
   MECHAPOP — PAGINE STANDARD DESKTOP
   Allineamento definitivo
   ========================================================= */

@media screen and (min-width: 750px) {

  main [id$="__page-content"],
  main .text-block[class*="__heading"]:has(h1) {
    transform: translateX(80px) !important;
  }

}

/* =========================================================
   FOOTER BOTTOM — LAYOUT DEFINITIVO DESKTOP
   ========================================================= */

#MechaPopFooter-{{ section.id }} .mp-footer__bottom {
  display: grid !important;
  grid-template-columns: max-content max-content 1fr !important;
  align-items: end !important;
  column-gap: 18px !important;

  width: 100% !important;

  padding-top: 14px !important;
  padding-bottom: 12px !important;
}

/* COPYRIGHT — sinistra */
#MechaPopFooter-{{ section.id }} .mp-footer__company {
  grid-column: 1 !important;

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

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

  align-self: end !important;
}

/*
  Il wrapper destro scompare come elemento di layout:
  pagamenti e social partecipano direttamente alla griglia.
*/
#MechaPopFooter-{{ section.id }} .mp-footer__bottom-right {
  display: contents !important;
}

/* PAGAMENTI — subito dopo copyright */
#MechaPopFooter-{{ section.id }} .mp-footer__payments {
  grid-column: 2 !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;

  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;

  align-self: end !important;
}

#MechaPopFooter-{{ section.id }} .mp-footer__payment-icon {
  display: block !important;

  width: auto !important;
  height: 22px !important;
  max-width: 40px !important;

  margin: 0 !important;
}

/* SOCIAL NATIVI HORIZON — estrema destra */
#MechaPopFooter-{{ section.id }} .mp-footer__social-native {
  grid-column: 3 !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;

  justify-self: end !important;
  align-self: end !important;

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

#MechaPopFooter-{{ section.id }} .mp-footer__social-native .social-icons__icon-wrapper {
  width: 24px !important;
  height: 24px !important;
}

#MechaPopFooter-{{ section.id }} .mp-footer__social-native a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px !important;
  height: 24px !important;
}

#MechaPopFooter-{{ section.id }} .mp-footer__social-native .social-icons__icon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

#MechaPopFooter-{{ section.id }} .mp-footer__social-native .social-icons__icon-label {
  display: none !important;
}

/* Elimina la copia testuale INSTAGRAM / YOUTUBE sotto il brand */
#MechaPopFooter-{{ section.id }} .mp-footer__brand > .mp-footer__socials {
  display: none !important;
}

/* =========================================================
   MECHAPOP - HEADER MOBILE
   Compatta Account + Preferiti + Carrello
   ========================================================= */

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

  /* Gruppo destro più compatto */
  #header-component header-actions {
    gap: 0 !important;
  }

  /* Account */
  #header-component header-actions .account-button {
    width: 36px !important;
    min-width: 36px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Preferiti */
  #header-component header-actions .mp-wishlist-header-action {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

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

  /* Carrello */
  #header-component header-actions > .header-actions__action {
    width: 36px !important;
    min-width: 36px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}