/*
 * MM Stickers automotive visual layer.
 * Loaded only for an authenticated manager using ?mm_automotive_preview=1.
 * All selectors are scoped to .mm-automotive-preview to protect storefront UI.
 */
:root {
  --mm-auto-surface: #f5f6f8;
  --mm-auto-paper: #ffffff;
  --mm-auto-red: #e60012;
  --mm-auto-red-dark: #a8000d;
  --mm-auto-ink: #171717;
  --mm-auto-graphite: #333333;
  --mm-auto-line: rgba(23, 23, 23, 0.1);
  --mm-auto-shadow: 0 12px 30px rgba(23, 23, 23, 0.09);
}

body.mm-automotive-preview {
  background: var(--mm-auto-surface);
  color: var(--mm-auto-ink);
  overflow-x: clip;
}

body.mm-automotive-preview #page {
  position: relative;
  isolation: isolate;
  background-color: var(--mm-auto-surface);
  background-image:
    linear-gradient(to bottom, transparent 0 max(750px, calc(56.28vw - 190px)), var(--mm-auto-surface) max(941px, 56.28vw)),
    url("mm-automotive-racing-final.webp?ver=1793458640");
  background-position: center top;
  background-size: 100% 100%, max(100vw, 1672px) auto;
  background-repeat: no-repeat;
}

/* Keep both the artwork and its lower fade anchored to the desktop viewport. */
@media (min-width: 1280px) {
  body.mm-automotive-preview #page {
    background-attachment: fixed, fixed;
  }

}

body.mm-automotive-preview #masthead {
  position: relative;
  background: transparent;
}

body.mm-automotive-preview .header-storefront.menu {
  background: rgba(255, 255, 255, 0.12);
}

body.mm-automotive-preview .site-content {
  position: relative;
  background: transparent;
}

body.mm-automotive-preview .header-widgets > .container,
body.mm-automotive-preview #before-shop-page > div,
body.mm-automotive-preview .site-content > .container {
  position: relative;
  border: 1px solid rgba(23, 23, 23, 0.07);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(23, 23, 23, 0.045);
}

body.mm-automotive-preview .header-widgets > .container {
  margin-top: 18px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

@media (min-width: 1280px) {
  body.mm-automotive-preview #masthead.site-header.box-shadow {
    box-shadow: none;
  }

  body.mm-automotive-preview #theme-header.header-storefront.menu {
    border-top: 0;
    border-bottom: 0;
  }

  body.mm-automotive-preview .mm-store-notices {
    border-top: 0;
    border-bottom: 0;
    background: transparent;
  }

  body.mm-automotive-preview .mm-store-notices__grid {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body.mm-automotive-preview .header-widgets > .container {
    background: rgba(255, 255, 255, 0.82);
  }

  body.mm-automotive-preview .site-content > .container,
  body.mm-automotive-preview #before-shop-page > div {
    background: rgba(255, 255, 255, 0.85);
  }

  body.mm-automotive-preview #inner-content-wrapper.container {
    border-radius: 18px;
  }

  body.single-product.mm-automotive-preview #inner-content-wrapper.container {
    background: rgba(255, 255, 255, 0.85);
  }

  body.single-product.mm-automotive-preview #primary .product > .summary {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 22px rgba(23, 23, 23, 0.06);
  }

  body.single-product.mm-automotive-preview {
    background-image:
      linear-gradient(to bottom, transparent 0 max(750px, calc(56.28vw - 190px)), var(--mm-auto-surface) max(941px, 56.28vw)),
      url("mm-automotive-racing-final.webp?ver=1793458640");
    background-position: center top;
    background-size: 100% 100%, max(100vw, 1672px) auto;
    background-repeat: no-repeat;
    background-attachment: fixed, fixed;
  }

  body.single-product.mm-automotive-preview #page {
    background: transparent;
  }

  body.mm-automotive-preview #custom_html-4 .aws-container .aws-search-form {
    overflow: hidden;
    height: 46px;
    border: 1px solid rgba(23, 23, 23, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(23, 23, 23, 0.08);
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }

  body.mm-automotive-preview #custom_html-4 .aws-container .aws-search-form:focus-within {
    border-color: rgba(230, 0, 18, 0.58);
    box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12), 0 8px 22px rgba(23, 23, 23, 0.08);
  }

  body.mm-automotive-preview #custom_html-4 .aws-container .aws-search-field {
    border: 0;
    background: #fff;
    color: var(--mm-auto-ink);
    font-size: 14px;
  }

  body.mm-automotive-preview #custom_html-4 .aws-container .aws-search-form .aws-search-btn {
    width: 48px;
    margin: 0;
    border: 0;
    background: var(--mm-auto-red);
  }

  body.mm-automotive-preview #custom_html-4 .aws-container .aws-search-form .aws-search-btn:hover {
    background: var(--mm-auto-red-dark);
  }

  body.mm-automotive-preview #custom_html-4 .aws-container .aws-search-form .aws-search-btn_icon {
    color: #fff;
  }

  body.mm-automotive-preview #custom_html-4 .aws-container .aws-search-form .aws-search-btn_icon svg path {
    fill: #fff;
  }

  body.home.mm-automotive-preview #before-shop-page > div:not(:has(*)) {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.mm-automotive-preview #custom_html-3 {
    background: rgba(255, 255, 255, 0.85);
  }
}

body.mm-automotive-preview .wpc-filters-widget-wrapper .wpc-filters-section,
body.mm-automotive-preview .wpc-filter-content {
  color: var(--mm-auto-ink);
}

body.mm-automotive-preview .wpc-filter-content select {
  min-height: 46px;
  border: 1px solid rgba(230, 0, 18, 0.28);
  border-radius: 9px;
  background-color: var(--mm-auto-red);
  box-shadow: 0 7px 16px rgba(230, 0, 18, 0.16);
}

body.mm-automotive-preview .wpc-filter-content select:hover,
body.mm-automotive-preview .wpc-filter-content select:focus {
  border-color: var(--mm-auto-red-dark);
  background-color: var(--mm-auto-red-dark);
  outline: 3px solid rgba(230, 0, 18, 0.14);
  outline-offset: 2px;
}

body.mm-automotive-preview .wpc-filter-content label {
  color: var(--mm-auto-graphite);
  letter-spacing: 0.01em;
}

body.mm-automotive-preview .woocommerce ul.products li.product,
body.mm-automotive-preview #custom_html-3 .wpb-wps-slider-item figure {
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.09);
  border-radius: 14px;
  background: var(--mm-auto-paper);
  box-shadow: 0 8px 22px rgba(23, 23, 23, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body.mm-automotive-preview .woocommerce ul.products li.product:hover,
body.mm-automotive-preview #custom_html-3 .wpb-wps-slider-item figure:hover {
  border-color: rgba(230, 0, 18, 0.34);
  box-shadow: var(--mm-auto-shadow);
  transform: translateY(-4px);
}

body.mm-automotive-preview .woocommerce ul.products li.product .price,
body.mm-automotive-preview #custom_html-3 .wpb-wps-slider-item .pro_price_area,
body.mm-automotive-preview .woocommerce-Price-amount {
  color: var(--mm-auto-red-dark);
  font-weight: 800;
}

body.mm-automotive-preview .woocommerce ul.products li.product .button,
body.mm-automotive-preview #custom_html-3 .wpb_cart_button .button {
  border: 1px solid var(--mm-auto-red);
  border-radius: 8px;
  background: var(--mm-auto-red);
  box-shadow: 0 7px 15px rgba(230, 0, 18, 0.18);
}

body.mm-automotive-preview .woocommerce ul.products li.product .button:hover,
body.mm-automotive-preview #custom_html-3 .wpb_cart_button .button:hover {
  border-color: var(--mm-auto-red-dark);
  background: var(--mm-auto-red-dark);
}

body.mm-automotive-preview .woocommerce span.onsale,
body.mm-automotive-preview .new-product::before {
  background-color: var(--mm-auto-red);
}

/* Cart Block: retain the approved racing artwork while keeping its UI opaque enough to use. */
@media (min-width: 768px) {
  body.woocommerce-cart.mm-automotive-preview .wc-block-cart__main,
  body.woocommerce-cart.mm-automotive-preview .wc-block-cart__sidebar {
    border-color: rgba(23, 23, 23, 0.1);
    background: rgba(255, 255, 255, 0.88);
  }

  body.woocommerce-cart.mm-automotive-preview .wc-block-components-product-details,
  body.woocommerce-cart.mm-automotive-preview .wc-block-components-quantity-selector,
  body.woocommerce-cart.mm-automotive-preview .wc-block-components-totals-coupon,
  body.woocommerce-cart.mm-automotive-preview .wc-block-components-text-input input,
  body.woocommerce-cart.mm-automotive-preview .wc-block-components-combobox .wc-block-components-combobox-control input {
    background-color: rgba(255, 255, 255, 0.96);
  }

  body.woocommerce-cart.mm-automotive-preview .wp-block-woocommerce-empty-cart-block {
    border: 1px solid rgba(23, 23, 23, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 28px rgba(23, 23, 23, 0.045);
  }
}

@media (max-width: 1279px) {
  body.mm-automotive-preview #page {
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, 0.29) 0 590px, var(--mm-auto-surface) 765px),
      url("mm-automotive-racing-final.webp?ver=1793458640");
    background-size: 100% 100%, 1360px auto;
  }
}

@media (max-width: 767px) {
  body.mm-automotive-preview #page {
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, 0.96), #fff 50%, rgba(255, 255, 255, 0.96)),
      repeating-linear-gradient(135deg, rgba(23, 23, 23, 0.018) 0 1px, transparent 1px 8px);
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    background-size: 100% 100%, 12px 12px;
  }

  body.mm-automotive-preview .site-content,
  body.mm-automotive-preview .header-widgets > .container,
  body.mm-automotive-preview #before-shop-page > div,
  body.mm-automotive-preview .site-content > .container {
    background: rgba(255, 255, 255, 0.97);
  }

  body.mm-automotive-preview .header-widgets > .container {
    margin-top: 8px;
    border-radius: 12px;
  }

  body.mm-automotive-preview .woocommerce ul.products li.product:hover,
  body.mm-automotive-preview #custom_html-3 .wpb-wps-slider-item figure:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mm-automotive-preview .woocommerce ul.products li.product,
  body.mm-automotive-preview #custom_html-3 .wpb-wps-slider-item figure {
    transition: none;
  }
}