/** Shopify CDN: Minification failed

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

**/
/* ============================================================
   CLEAN-SHIRT DESIGN SYSTEM
   Dark cinematic + brutalist type + neon accents
   Loaded after base.css — overrides Rise/Dawn defaults
   ============================================================ */

:root {
  /* Brand palette */
  --cs-black: #0A0A0A;
  --cs-black-deep: #000000;
  --cs-terracotta: #B56747;
  --cs-terracotta-dark: #7E3F26;
  --cs-white: #FAFAFA;
  --cs-white-pure: #FFFFFF;
  --cs-gray-900: #111111;
  --cs-gray-800: #1A1A1A;
  --cs-gray-700: #2A2A2A;
  --cs-gray-500: #666666;
  --cs-gray-300: #999999;
  --cs-gray-200: #CCCCCC;

  /* Accent — neon green */
  --cs-accent: #00FF88;
  --cs-accent-dim: #00CC6E;
  --cs-accent-glow: rgba(0, 255, 136, 0.4);
  --cs-accent-soft: rgba(0, 255, 136, 0.08);

  /* Semantic */
  --cs-bg: var(--cs-terracotta);
  --cs-fg: var(--cs-white);
  --cs-line: rgba(255, 255, 255, 0.12);
  --cs-line-strong: rgba(255, 255, 255, 0.24);

  /* Typography */
  --cs-font-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --cs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cs-font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;

  /* Motion */
  --cs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cs-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --cs-dur-fast: 200ms;
  --cs-dur-base: 400ms;
  --cs-dur-slow: 800ms;

  /* Spacing */
  --cs-space-xs: 0.5rem;
  --cs-space-sm: 1rem;
  --cs-space-md: 2rem;
  --cs-space-lg: 4rem;
  --cs-space-xl: 8rem;
  --cs-space-xxl: 12rem;
}

/* Load JetBrains Mono from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   SECTION DIVIDERS — neon green between every section
   ============================================================ */

.shopify-section {
  border-bottom: 1px solid var(--cs-accent);
}
.shopify-section:last-child {
  border-bottom: 0;
}

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */

html {
  background: var(--cs-bg);
  scroll-behavior: smooth;
}

body {
  background: var(--cs-bg) !important;
  color: var(--cs-fg) !important;
  font-family: var(--cs-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Custom text selection */
::selection {
  background: var(--cs-accent);
  color: var(--cs-black);
}

/* ============================================================
   TYPOGRAPHY — brutalist display, mono for tech accents
   ============================================================ */

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4 {
  font-family: var(--cs-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
  color: var(--cs-fg) !important;
  text-transform: none;
}

.h0, h1 { font-size: clamp(3rem, 10vw, 9rem) !important; }
.h1 { font-size: clamp(2.5rem, 7vw, 6rem) !important; }
.h2, h2 { font-size: clamp(2rem, 5vw, 4.5rem) !important; }
.h3, h3 { font-size: clamp(1.5rem, 3vw, 2.5rem) !important; }

/* Mono utility */
.cs-mono,
.cs-eyebrow {
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--cs-accent);
  font-weight: 500;
}

.cs-eyebrow::before {
  content: "→ ";
  opacity: 0.8;
}

/* Display glitch effect for hero headlines */
.cs-glitch {
  position: relative;
  display: inline-block;
}

.cs-glitch::before,
.cs-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.cs-glitch::before {
  color: var(--cs-accent);
  animation: cs-glitch-1 3s infinite linear alternate-reverse;
  mix-blend-mode: screen;
}

.cs-glitch::after {
  color: #FF006E;
  animation: cs-glitch-2 2.5s infinite linear alternate-reverse;
  mix-blend-mode: screen;
}

@keyframes cs-glitch-1 {
  0%, 90%, 100% { transform: translate(0); clip-path: inset(0 0 0 0); }
  91% { transform: translate(-2px, 1px); clip-path: inset(10% 0 60% 0); }
  93% { transform: translate(2px, -1px); clip-path: inset(40% 0 20% 0); }
  95% { transform: translate(-1px, 2px); clip-path: inset(70% 0 10% 0); }
}

@keyframes cs-glitch-2 {
  0%, 88%, 100% { transform: translate(0); clip-path: inset(0 0 0 0); }
  89% { transform: translate(2px, 2px); clip-path: inset(30% 0 40% 0); }
  92% { transform: translate(-2px, -1px); clip-path: inset(60% 0 15% 0); }
  97% { transform: translate(1px, 1px); clip-path: inset(5% 0 80% 0); }
}

/* ============================================================
   BUTTONS — brutalist, strong contrast, neon accent
   ============================================================ */

.button,
button.button,
.shopify-payment-button__button--unbranded,
.btn {
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  border-radius: 0 !important;
  padding: 1.1rem 2rem !important;
  min-height: 54px !important;
  position: relative;
  overflow: hidden;
  transition: all var(--cs-dur-fast) var(--cs-ease-out) !important;
  border: 1px solid transparent !important;
}

.button--primary,
button.button--primary {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border: 1px solid var(--cs-accent) !important;
  box-shadow: 0 0 0 0 var(--cs-accent-glow);
}

.button--primary:hover,
button.button--primary:hover {
  background: var(--cs-white) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-white) !important;
  box-shadow: 0 0 40px 0 var(--cs-accent-glow) !important;
  transform: translateY(-2px);
}

.button--secondary,
button.button--secondary {
  background: transparent !important;
  color: var(--cs-fg) !important;
  border: 1px solid var(--cs-accent) !important;
}

.button--secondary:hover,
button.button--secondary:hover {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-accent) !important;
  box-shadow: 0 0 32px 0 var(--cs-accent-glow) !important;
  transform: translateY(-2px);
}

/* Arrow suffix on button hover */
.button::after {
  content: " →";
  display: inline-block;
  transition: transform var(--cs-dur-fast) var(--cs-ease-out);
  margin-left: 0.3em;
  opacity: 0.8;
}
.button:hover::after {
  transform: translateX(4px);
  opacity: 1;
}

/* Neutralize Dawn's inner button styles */
.button:not([disabled]):not(.button--tertiary)::after,
.shopify-challenge__button:after,
.customer button:not([disabled]):after {
  box-shadow: none !important;
}

/* ============================================================
   HEADER — minimal, monospace nav, neon underline
   ============================================================ */

.header-wrapper,
.section-header {
  background: var(--cs-bg) !important;
  border-bottom: 1px solid var(--cs-accent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header__menu-item,
header-menu summary,
.header__menu-item span,
.list-menu__item,
.list-menu--inline .list-menu__item {
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--cs-fg) !important;
  transition: color var(--cs-dur-fast) var(--cs-ease-out);
  padding: 0.6rem 1.1rem !important;
}

@media (min-width: 990px) {
  .header__menu-item,
  header-menu summary,
  .header__menu-item span,
  .list-menu__item,
  .list-menu--inline .list-menu__item {
    font-size: 1.05rem !important;
    letter-spacing: 0.14em !important;
  }
}

/* ============================================================
   MOBILE MENU DRAWER (burger menu)
   ============================================================ */

.menu-drawer,
.menu-drawer__inner-container,
.menu-drawer__navigation {
  background: var(--cs-bg) !important;
}

.menu-drawer__menu li,
.menu-drawer__menu-item,
.menu-drawer-menu-open .menu-drawer__menu-item {
  font-family: var(--cs-font-mono) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--cs-fg) !important;
  padding: 1.4rem 1.5rem !important;
  border-bottom: 1px solid var(--cs-line) !important;
  line-height: 1.2 !important;
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus {
  color: var(--cs-accent) !important;
  background: rgba(0, 255, 136, 0.04) !important;
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item.list-menu__item--active {
  color: var(--cs-accent) !important;
}

/* Sub-menu (chevron / submenu items) */
.menu-drawer__submenu .menu-drawer__menu-item {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
}

/* Account / language at the bottom */
.menu-drawer__utility-links a,
.menu-drawer__account,
.menu-drawer__localization {
  font-family: var(--cs-font-mono) !important;
  font-size: 1rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cs-fg) !important;
  padding: 1rem 1.5rem !important;
}

/* Arrow icons inside menu items — green */
.menu-drawer__menu-item svg,
.menu-drawer .icon {
  color: var(--cs-accent) !important;
  fill: var(--cs-accent) !important;
}

.header__menu-item:hover,
.header__menu-item:hover span {
  color: var(--cs-accent) !important;
  text-decoration: none !important;
}

.header__menu-item span::after {
  display: none !important;
}

/* Header logo */
.header__heading-logo {
  max-height: 36px;
  filter: brightness(0) invert(1);
}

/* ============================================================
   ANNOUNCEMENT BAR — marquee-ready, neon dots
   ============================================================ */

.utility-bar,
.announcement-bar {
  background: var(--cs-black-deep) !important;
  border-bottom: 1px solid var(--cs-accent) !important;
  color: var(--cs-fg) !important;
  padding: 0.6rem 0 !important;
}

.announcement-bar__message,
.utility-bar__message {
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--cs-fg) !important;
}

@media (min-width: 990px) {
  .announcement-bar__message,
  .utility-bar__message {
    font-size: 1.05rem !important;
  }
}

/* Injected pulsing dot before announcement */
.announcement-bar__message::before {
  content: "● ";
  color: var(--cs-accent);
  animation: cs-pulse 2s ease-in-out infinite;
  margin-right: 0.5em;
}

@keyframes cs-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px var(--cs-accent-glow); }
  50% { opacity: 0.4; text-shadow: 0 0 0 transparent; }
}

/* ============================================================
   HERO / SLIDESHOW — cinematic fullbleed
   ============================================================ */

.slideshow__text h1,
.slideshow__text h2,
.banner h1,
.banner h2,
.banner__heading {
  font-family: var(--cs-font-display) !important;
  font-size: clamp(3rem, 9vw, 8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}

.slideshow__text,
.banner__content {
  color: var(--cs-white-pure) !important;
}

/* Slideshow overlay darkened */
.slideshow__media::after,
.banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.slideshow__text-wrapper,
.banner__box {
  z-index: 2;
  position: relative;
}

.banner__box {
  background: transparent !important;
  box-shadow: none !important;
  padding: 3rem 2rem !important;
}

/* Slideshow subheading */
.slideshow__text p,
.banner__text {
  font-family: var(--cs-font-body) !important;
  font-size: clamp(1rem, 1.4vw, 1.35rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  max-width: 620px;
  opacity: 0.92;
  margin-top: 1.5rem !important;
}

/* Slideshow dots */
.slideshow__controls .slider-counter__link,
.slideshow__control-wrapper .dot {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 !important;
  width: 30px !important;
  height: 2px !important;
  transition: all var(--cs-dur-fast) var(--cs-ease-out);
}

.slideshow__controls [aria-current="true"],
.slideshow__control-wrapper .dot.active {
  background: var(--cs-accent) !important;
  box-shadow: 0 0 12px var(--cs-accent-glow);
}

/* ============================================================
   PRODUCT CARDS — brutalist grid
   ============================================================ */

.card-wrapper,
.card {
  background: var(--cs-bg) !important;
  border: 1px solid var(--cs-accent) !important;
  border-radius: 0 !important;
  overflow: hidden;
  position: relative;
  transition: transform var(--cs-dur-base) var(--cs-ease-out),
              box-shadow var(--cs-dur-base) var(--cs-ease-out);
}

.card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--cs-accent), 0 12px 32px var(--cs-accent-glow);
}

.card__inner,
.card__media {
  border-radius: 0 !important;
  background: var(--cs-bg) !important;
  overflow: hidden;
  position: relative;
}

.card__media img,
.card__inner img {
  transition: transform var(--cs-dur-slow) var(--cs-ease-out);
}

.card-wrapper:hover .card__media img {
  transform: scale(1.06);
}

.card__heading a,
.card-information .card__heading,
.full-unstyled-link {
  font-family: var(--cs-font-display) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.01em !important;
  color: var(--cs-fg) !important;
  text-transform: uppercase;
}

.card__heading a:hover {
  color: var(--cs-accent) !important;
}

.card__information,
.card-information {
  padding: 1.2rem 1rem !important;
}

/* Price */
.price,
.price__container,
.price__regular .price-item,
.price-item,
.product__price {
  font-family: var(--cs-font-mono) !important;
  font-weight: 500 !important;
  color: var(--cs-fg) !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
}

.price__sale .price-item--sale {
  color: var(--cs-accent) !important;
  font-weight: 700 !important;
}

.price__sale .price-item--regular {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: var(--cs-accent);
}

/* Sale badge */
.badge,
.card__badge .badge {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--cs-font-mono) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  padding: 0.4rem 0.8rem !important;
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */

.product__title h1,
.product__title {
  font-family: var(--cs-font-display) !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
  text-transform: uppercase;
  color: var(--cs-fg) !important;
}

.product__info-wrapper,
.product__info-container {
  background: var(--cs-bg);
  color: var(--cs-fg);
}

.product__description,
.product__description p {
  font-family: var(--cs-font-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: var(--cs-gray-200) !important;
}

.product-form__buttons .button,
.product-form__submit {
  width: 100%;
  min-height: 64px !important;
  font-size: 0.95rem !important;
}

/* Variant picker (size / color) — works for both cs-product and Dawn main-product */
.product-form__input input[type=radio]+label,
.product-form__input fieldset label,
.product-form__input--pill input[type=radio]+label,
fieldset.product-form__input input+label {
  border-radius: 0 !important;
  border: 1px solid var(--cs-line-strong) !important;
  background: transparent !important;
  color: var(--cs-fg) !important;
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase;
  font-size: 0.82rem !important;
  letter-spacing: 0.1em;
  min-height: 48px !important;
  padding: 0.5rem 1.2rem !important;
  transition: all var(--cs-dur-fast) var(--cs-ease-out);
  font-weight: 500 !important;
  box-shadow: none !important;
}

/* SELECTED state — green neon glow */
.product-form__input input[type=radio]:checked+label,
.product-form__input--pill input[type=radio]:checked+label,
fieldset.product-form__input input:checked+label,
.product-form__input input[type=radio]:checked+label::after {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px var(--cs-accent-glow), 0 0 0 1px var(--cs-accent) inset !important;
  text-shadow: none !important;
}

/* Remove Dawn's default outline/shadow on selected pill */
.product-form__input input[type=radio]:checked+label::before,
.product-form__input input[type=radio]:checked+label::after {
  display: none !important;
}

.product-form__input input[type=radio]+label:hover,
fieldset.product-form__input input+label:hover {
  border-color: var(--cs-accent) !important;
  color: var(--cs-accent) !important;
}

.product-form__input input[type=radio]:checked+label:hover {
  color: var(--cs-black) !important;
}

/* Color swatches (for color variants) */
.product-form__input--swatch input[type=radio]:checked+label {
  outline: 2px solid var(--cs-accent) !important;
  outline-offset: 3px !important;
}

/* Variant picker label/heading (e.g. "Taglia: M") */
.product-form__input legend,
.product-form__input .form__label {
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  color: var(--cs-fg) !important;
  margin-bottom: 0.6rem !important;
}

.product-form__input legend .form__label-value,
.product-form__input--swatch__legend strong {
  color: var(--cs-accent) !important;
  font-weight: 700 !important;
  margin-left: 0.4em !important;
}

/* Quantity */
.quantity {
  border: 1px solid var(--cs-line-strong) !important;
  border-radius: 0 !important;
}

.quantity__input,
.quantity__button {
  background: transparent !important;
  color: var(--cs-fg) !important;
  font-family: var(--cs-font-mono) !important;
}

/* ============================================================
   IMAGE WITH TEXT, MULTICOLUMN, COLLAGE etc
   ============================================================ */

.image-with-text__heading,
.multicolumn-card__info h3,
.collection-hero__title {
  font-family: var(--cs-font-display) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.image-with-text__text,
.multicolumn-card__info p {
  font-family: var(--cs-font-body) !important;
  opacity: 0.85;
  line-height: 1.65 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer,
.footer__content-top,
.footer__content-bottom {
  background: var(--cs-black-deep) !important;
  color: var(--cs-fg) !important;
  border-top: 1px solid var(--cs-line) !important;
}

.footer__heading,
.footer-block__heading {
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-size: 0.82rem !important;
  color: var(--cs-accent) !important;
  margin-bottom: 1.2rem;
}

.footer a,
.footer__content a {
  color: var(--cs-gray-200) !important;
  transition: color var(--cs-dur-fast) var(--cs-ease-out);
}

.footer a:hover {
  color: var(--cs-accent) !important;
  text-decoration: none !important;
}

.copyright,
.footer__copyright {
  font-family: var(--cs-font-mono) !important;
  font-size: 0.72rem !important;
  opacity: 0.6;
  letter-spacing: 0.1em;
}

/* ============================================================
   CART DRAWER
   ============================================================ */

.cart-drawer,
cart-drawer {
  background: var(--cs-bg) !important;
  color: var(--cs-fg) !important;
  border-left: 1px solid var(--cs-line);
}

.cart-drawer .drawer__heading {
  font-family: var(--cs-font-display) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ============================================================
   INPUTS / FORMS
   ============================================================ */

input[type=text],
input[type=email],
input[type=number],
input[type=tel],
input[type=password],
textarea,
.field__input {
  background: transparent !important;
  border: 1px solid var(--cs-line-strong) !important;
  border-radius: 0 !important;
  color: var(--cs-fg) !important;
  font-family: var(--cs-font-body) !important;
  padding: 1rem !important;
  transition: border-color var(--cs-dur-fast) var(--cs-ease-out);
}

input:focus,
textarea:focus,
.field__input:focus {
  border-color: var(--cs-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--cs-accent-soft) !important;
}

label,
.field__label {
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem !important;
  color: var(--cs-gray-200) !important;
}

/* ============================================================
   UTILITY: SCROLL REVEAL + NOISE OVERLAY
   ============================================================ */

.cs-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--cs-dur-slow) var(--cs-ease-out),
              transform var(--cs-dur-slow) var(--cs-ease-out);
}

.cs-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle film grain overlay on dark sections */
.cs-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cs-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--cs-gray-700);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cs-accent);
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--cs-fg);
  transition: color var(--cs-dur-fast) var(--cs-ease-out);
}

a:hover {
  color: var(--cs-accent);
}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

@media (max-width: 749px) {
  :root {
    --cs-space-xl: 5rem;
    --cs-space-xxl: 7rem;
  }
}

/* ============================================================
   THIRD-PARTY APPS / BUNDLES — force dark + neon
   Target Shopify Bundles, Buy Together, Complementary widgets
   ============================================================ */

/* MBC Bundles widget title override — replace "Titolo predefinito del widget" */
[data-app-block-name*="bundle" i] h1,
[data-app-block-name*="bundle" i] h2,
[data-app-block-name*="bundle" i] h3,
.shopify-app-block h1,
.shopify-app-block h2,
.shopify-app-block h3,
.shopify-bundles h1,
.shopify-bundles h2,
.shopify-bundles h3 {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  visibility: hidden;
}

[data-app-block-name*="bundle" i] h1::before,
[data-app-block-name*="bundle" i] h2::before,
[data-app-block-name*="bundle" i] h3::before,
.shopify-app-block h1::before,
.shopify-app-block h2::before,
.shopify-app-block h3::before,
.shopify-bundles h1::before,
.shopify-bundles h2::before,
.shopify-bundles h3::before {
  content: "SCEGLI LA TUA COMBO";
  display: block;
  visibility: visible;
  font-family: var(--cs-font-display) !important;
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cs-fg) !important;
  text-align: center;
}

/* Third-party bundle widget container — full green border */
.shopify-bundles,
.shopify-app-block,
[data-app-block-name*="bundle" i] {
  background: var(--cs-bg) !important;
  color: var(--cs-fg) !important;
  border: 1px solid var(--cs-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Generic bundle-related elements — only recolor existing borders */
[class*="bundle" i]:not(.cs-bundle):not(.cs-bundle__heading):not(.cs-bundle__media):not(.cs-bundle__content):not(.cs-bundle__feature):not([class*="cs-bundle__"]),
[class*="complementary" i],
[class*="upsell" i],
[class*="frequently" i] {
  background: var(--cs-bg) !important;
  color: var(--cs-fg) !important;
  border-color: var(--cs-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Inner cards / items */
[class*="bundle" i] [class*="card" i]:not(.cs-bundle):not(.cs-bundle__heading):not(.cs-bundle__media),
[class*="bundle" i] [class*="product" i]:not(.cs-product):not(.cs-product__title):not(.cs-product__info),
[class*="complementary" i] [class*="card" i],
[class*="upsell" i] [class*="card" i] {
  background: var(--cs-gray-900) !important;
  border: 1px solid var(--cs-line-strong) !important;
  border-radius: 0 !important;
  color: var(--cs-fg) !important;
}

/* Buttons inside bundle widgets */
[class*="bundle" i] button:not(.cs-bundle__cta),
[class*="bundle" i] [class*="button" i]:not(.cs-bundle__cta),
[class*="complementary" i] button,
[class*="upsell" i] button,
.shopify-bundles button,
[data-app-block-name*="bundle" i] button {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border: 1px solid var(--cs-accent) !important;
  border-radius: 0 !important;
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 1rem 1.5rem !important;
  transition: all var(--cs-dur-fast) var(--cs-ease-out) !important;
}

[class*="bundle" i] button:hover,
[class*="complementary" i] button:hover,
[class*="upsell" i] button:hover,
.shopify-bundles button:hover {
  background: var(--cs-white) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-white) !important;
  box-shadow: 0 0 30px var(--cs-accent-glow) !important;
}

/* Disabled / secondary buttons (the gray "AGGIUNGI BUNDLE") */
[class*="bundle" i] button[disabled],
[class*="bundle" i] [class*="disabled" i],
[class*="bundle" i] [aria-disabled="true"] {
  background: transparent !important;
  color: var(--cs-fg) !important;
  border: 1px solid var(--cs-line-strong) !important;
  opacity: 0.7 !important;
}

/* Prices */
[class*="bundle" i] [class*="price" i],
[class*="complementary" i] [class*="price" i] {
  color: var(--cs-fg) !important;
  font-family: var(--cs-font-mono) !important;
}

[class*="bundle" i] s,
[class*="bundle" i] del,
[class*="bundle" i] [class*="compare" i] {
  color: var(--cs-gray-300) !important;
  text-decoration-color: var(--cs-accent) !important;
}

[class*="bundle" i] [class*="sale" i],
[class*="bundle" i] [class*="discount" i] {
  color: var(--cs-accent) !important;
  font-weight: 700 !important;
}

/* Variant selectors / dropdowns within bundle widget */
[class*="bundle" i] select,
[class*="bundle" i] [class*="dropdown" i],
[class*="bundle" i] [class*="select" i]:not(.cs-bundle-variant) {
  background: var(--cs-bg) !important;
  color: var(--cs-fg) !important;
  border: 1px solid var(--cs-line-strong) !important;
  border-radius: 0 !important;
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.6rem 0.9rem !important;
}

/* Enhanced variant button group (replaces native select) */
.cs-bundle-variant {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.cs-bundle-variant__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 38px;
  padding: 0 0.85rem;
  background: transparent !important;
  color: var(--cs-fg) !important;
  border: 1px solid var(--cs-line-strong) !important;
  border-radius: 0 !important;
  font-family: var(--cs-font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  cursor: pointer;
  transition: all var(--cs-dur-fast) var(--cs-ease-out) !important;
  line-height: 1;
}

.cs-bundle-variant__btn:hover {
  border-color: var(--cs-accent) !important;
  color: var(--cs-accent) !important;
}

.cs-bundle-variant__btn.is-selected,
.cs-bundle-variant__btn[aria-checked="true"],
.cs-bundle-variant__btn[aria-pressed="true"] {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px var(--cs-accent-glow), 0 0 0 1px var(--cs-accent) inset !important;
}

/* ============================================================
   AGGRESSIVE: Any "selected" button-like element inside bundle
   widgets becomes green, no matter the app's CSS naming
   ============================================================ */

[class*="bundle" i] button[aria-checked="true"],
[class*="bundle" i] button[aria-pressed="true"],
[class*="bundle" i] button[aria-selected="true"],
[class*="bundle" i] [role="radio"][aria-checked="true"],
[class*="bundle" i] [role="tab"][aria-selected="true"],
[class*="bundle" i] [class*="selected" i]:not([class*="unselected" i]),
[class*="bundle" i] [class*="active" i]:not([class*="inactive" i]),
[class*="bundle" i] [class*="is-checked" i],
[class*="bundle" i] input:checked + label,
[class*="bundle" i] input:checked + span,
[class*="complementary" i] [class*="selected" i],
[class*="upsell" i] [class*="selected" i],
[data-app-block-name*="bundle" i] [aria-checked="true"],
[data-app-block-name*="bundle" i] [class*="selected" i] {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-accent) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  box-shadow: 0 0 16px var(--cs-accent-glow), 0 0 0 1px var(--cs-accent) inset !important;
  outline: none !important;
}

/* Hover non-selected size buttons inside bundle widgets */
[class*="bundle" i] button[role="radio"]:not([aria-checked="true"]):hover,
[class*="bundle" i] [class*="size" i] button:not(.is-selected):hover,
[class*="bundle" i] label:not([class*="selected" i]):hover {
  border-color: var(--cs-accent) !important;
  color: var(--cs-accent) !important;
  background: transparent !important;
}

/* ============================================================
   ULTRA AGGRESSIVE: Shopify Buy Together / Multibuy / Bundles
   These widgets often don't have "bundle" in classes.
   Target by data-attributes and broad sibling patterns.
   ============================================================ */

/* Any radio:checked in any product-like context becomes green
   (only IMMEDIATE following label/span — never general sibling) */
[id^="shopify-block-"] [type="radio"]:checked + label,
[id^="shopify-block-"] [type="radio"]:checked + span,
section[id*="bundle" i] label[for]:has(input:checked),
[class*="multi" i][class*="buy" i] [type="radio"]:checked + label,
[class*="combo" i] [type="radio"]:checked + label,
[class*="kit" i] [type="radio"]:checked + label {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px var(--cs-accent-glow), 0 0 0 1px var(--cs-accent) inset !important;
  border-radius: 0 !important;
}

/* Any button with aria-pressed/checked true in app blocks */
[id^="shopify-block-"] button[aria-pressed="true"],
[id^="shopify-block-"] button[aria-checked="true"],
[id^="shopify-block-"] [aria-selected="true"],
[id^="shopify-block-"] .selected,
[id^="shopify-block-"] .is-selected,
[id^="shopify-block-"] .active,
[id^="shopify-block-"] .is-active {
  background: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-accent) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px var(--cs-accent-glow) !important;
}

/* Size-like buttons with short uppercase text inside any product widget */
[id^="shopify-block-"] button:focus,
[id^="shopify-block-"] [role="button"]:focus {
  outline: 2px solid var(--cs-accent) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   UNIVERSAL — Any size button marked by cs-bundle-enhancer JS
   Catches ANY bundle widget regardless of CSS naming
   ============================================================ */

.cs-size-selected,
[data-cs-selected="true"] {
  background: var(--cs-accent) !important;
  background-color: var(--cs-accent) !important;
  color: var(--cs-black) !important;
  border-color: var(--cs-accent) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 18px var(--cs-accent-glow), 0 0 0 1px var(--cs-accent) inset !important;
  transition: all 0.18s ease-out !important;
}

.cs-size-selected *,
[data-cs-selected="true"] * {
  color: var(--cs-black) !important;
}

/* Plus icons between bundle cards */
[class*="bundle" i] [class*="plus" i],
[class*="bundle" i] [class*="separator" i] svg {
  color: var(--cs-accent) !important;
  fill: var(--cs-accent) !important;
}

/* Headings / titles */
[class*="bundle" i] h1,
[class*="bundle" i] h2,
[class*="bundle" i] h3,
[class*="bundle" i] h4 {
  color: var(--cs-fg) !important;
  font-family: var(--cs-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
   CUSTOM SECTIONS
   ============================================================ */

/* Ticker / marquee — robust flex marquee */
.cs-ticker {
  width: 100%;
  padding: 1rem 0 !important;
  border-top: 1px solid var(--cs-accent) !important;
  border-bottom: 1px solid var(--cs-accent) !important;
  background: var(--cs-bg) !important;
  overflow: hidden !important;
  display: block !important;
}

.cs-ticker__viewport {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

.cs-ticker__track {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  align-items: center;
  animation: cs-ticker-scroll 60s linear infinite;
  will-change: transform;
}

.cs-ticker__item {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0 !important;
  white-space: nowrap;
  margin: 0 2rem;
  font-family: var(--cs-font-mono) !important;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.15em;
  font-weight: 500;
  color: var(--cs-fg);
  line-height: 1.2;
}

.cs-ticker__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cs-accent);
  box-shadow: 0 0 10px var(--cs-accent), 0 0 20px var(--cs-accent-glow);
  animation: cs-pulse 1.8s ease-in-out infinite;
  margin-right: 0.7rem;
  flex-shrink: 0;
}

.cs-ticker__label {
  color: var(--cs-accent);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-right: 0.55em;
  white-space: nowrap;
}

.cs-ticker__text {
  color: var(--cs-fg);
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 990px) {
  .cs-ticker {
    padding: 1.2rem 0 !important;
  }
  .cs-ticker__item {
    font-size: 1.15rem;
    margin: 0 2.5rem;
  }
  .cs-ticker__dot {
    width: 12px;
    height: 12px;
  }
}

@keyframes cs-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
