/* MW4Services dark editorial theme with subtle Halloween light accents. */
body.sa-tpl-shop {
  background-image:
    radial-gradient(ellipse at 12% 2%, rgba(112, 75, 150, .13), transparent 34%),
    radial-gradient(ellipse at 90% 2%, rgba(225, 139, 66, .10), transparent 30%);
  background-attachment: fixed;
}

.sa-header {
  background: rgba(9, 10, 13, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.sa-hero > div.relative.flex {
  min-height: clamp(430px, 66vh, 690px);
  margin: 1.25rem clamp(1rem, 4vw, 3.5rem) 3rem;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(112, 75, 150, .18), transparent 38%),
    radial-gradient(ellipse at 14% 5%, rgba(225, 139, 66, .13), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(12, 13, 16, .97) 58%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 28px 80px rgba(0, 0, 0, .28);
}

.sa-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.6rem, 5.6vw, 5rem) !important;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.sa-hero p.text-sm {
  color: rgb(var(--cl-accent));
  letter-spacing: .16em;
}

.sa-hero p.text-base {
  max-width: 54ch;
  line-height: 1.75;
}

.glitch-btn,
.glitch-btn::before,
.glitch-btn::after {
  border-radius: 999px;
}

.glitch-btn::before,
.glitch-btn::after {
  clip-path: none;
}

.sa-products .sa-product-card.chamfer,
.sa-features .sa-feature.chamfer {
  --chamfer-w: 1px;
  --chamfer-c: 18px;
  padding: 1px;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .20);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.sa-products .sa-product-card.chamfer::before,
.sa-products .sa-product-card.chamfer::after,
.sa-features .sa-feature.chamfer::before,
.sa-features .sa-feature.chamfer::after {
  clip-path: none;
  border-radius: 18px;
}

.sa-products .sa-product-card.chamfer::before,
.sa-features .sa-feature.chamfer::before {
  background: rgba(255, 255, 255, .11);
}

.sa-products .sa-product-card.chamfer::after,
.sa-features .sa-feature.chamfer::after {
  inset: 1px;
  background: linear-gradient(155deg, rgba(27, 30, 36, .98), rgba(15, 17, 21, .98));
}

.sa-products .sa-product-card.chamfer:hover,
.sa-features .sa-feature.chamfer:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .32), 0 0 28px rgba(112, 75, 150, .08);
}

.sa-products .sa-product-card > a > div:first-child {
  overflow: hidden;
  border-radius: 17px 17px 0 0;
}

.sa-products .sa-product-card img {
  filter: saturate(.82);
  transition: filter 300ms ease, transform 500ms ease;
}

.sa-products .sa-product-card:hover img {
  filter: saturate(1);
}

.sa-products .sa-product-card h3 {
  letter-spacing: .015em;
}

.sa-products .sa-product-card-cta {
  border-radius: 999px !important;
}

.sa-faq-list,
.sa-socials-list {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(24, 26, 32, .95), rgba(14, 15, 19, .96));
  overflow: hidden;
}

.sa-faq > .container > div.w-full.mx-auto.max-w-3xl.chamfer,
.sa-socials > .container > div.w-full.mx-auto.max-w-3xl.chamfer {
  --chamfer-w: 1px;
  --chamfer-c: 18px;
  padding: 1px;
  border-radius: 18px;
}

.sa-faq > .container > div.w-full.mx-auto.max-w-3xl.chamfer::before,
.sa-faq > .container > div.w-full.mx-auto.max-w-3xl.chamfer::after,
.sa-socials > .container > div.w-full.mx-auto.max-w-3xl.chamfer::before,
.sa-socials > .container > div.w-full.mx-auto.max-w-3xl.chamfer::after {
  clip-path: none;
  border-radius: 18px;
}

@media (max-width: 640px) {
  .sa-hero > div.relative.flex {
    min-height: auto;
    margin: .75rem .75rem 2.25rem;
    padding: 4rem 1.25rem 3rem;
    border-radius: 20px;
  }

  .sa-hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.5rem) !important;
  }

  .sa-products .sa-product-card.chamfer,
  .sa-features .sa-feature.chamfer {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-products .sa-product-card.chamfer,
  .sa-features .sa-feature.chamfer,
  .sa-products .sa-product-card img {
    transition: none;
  }
}

/* Feature the main one-hour lobby above the three mastery camo offers. */
#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card {
  box-shadow: 0 0 0 1px rgba(225, 139, 66, .30), 0 22px 60px rgba(0, 0, 0, .34), 0 0 42px rgba(225, 139, 66, .10);
}

#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card > a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: stretch;
}

#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card > a > div:first-child {
  min-height: 100%;
  border-right: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 0 !important;
}

#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card > a > div:first-child img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: auto !important;
  object-fit: cover;
}

#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card > a > div:last-child {
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}

@media (max-width: 640px) {
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card > a {
    display: flex !important;
    flex-direction: column;
  }

  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card > a > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  }

  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-dsr]:first-child .sa-product-card > a > div:first-child img {
    min-height: 0;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Compact the operator hero without cropping the transparent cutout. */
.sa-hero > div.relative.flex {
  min-height: clamp(380px, 58vh, 560px);
  padding-block: clamp(2rem, 5vw, 4rem);
}

.sa-hero img {
  width: auto;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .sa-hero > div.relative.flex {
    min-height: auto;
    padding-block: 2rem;
  }
  .sa-hero img {
    max-height: 300px;
  }
}


/* Hero art direction: keep the card compact while letting the operator break its lower edge. */
.sa-hero > div.relative.flex {
  min-height: clamp(460px, 56vh, 560px);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.sa-hero > div.relative.flex > .container.relative.flex > .flex.flex-col {
  position: relative;
  z-index: 2;
}
.sa-hero img {
  height: clamp(420px, 35vw, 560px);
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform: translateY(42px);
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .6));
}
.sa-hero h1 {
  background-image: linear-gradient(180deg, #f2f3f5 0 47%, #f7b52f 53% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
  .sa-hero > div.relative.flex {
    min-height: auto;
    padding-block: 2rem;
  }
  .sa-hero img {
    height: 280px;
    max-width: 100%;
    max-height: 280px;
    transform: none;
    margin: 0 auto;
  }
}


/* Cinematic hero composition: the operator layers over the card, not into its height. */
.sa-hero > div.relative.flex {
  height: clamp(560px, 68vh, 640px);
  min-height: 0;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  background-image: radial-gradient(ellipse at 76% 42%, rgba(225, 139, 66, .22), transparent 40%), linear-gradient(115deg, rgba(0, 0, 0, .22), transparent 68%);
}
.sa-hero > div.relative.flex > .container.relative.flex {
  position: relative;
  height: 100%;
  align-items: center;
}
.sa-hero > div.relative.flex > .container.relative.flex > .flex.flex-col.gap-4 {
  position: relative;
  z-index: 2;
  width: min(56%, 820px);
  max-width: min(56%, 820px);
}
.sa-hero img {
  position: absolute;
  z-index: 1;
  top: -2.5rem;
  right: -1.5rem;
  height: min(900px, calc(100% + 320px));
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .65));
}
.sa-hero p::after {
  content: "INSTANT DELIVERY   •   24/7 DISCORD SUPPORT   •   MW4 CAMO SERVICES";
  display: block;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #e4e1dc;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .sa-hero > div.relative.flex {
    height: auto;
    min-height: 0;
    padding-block: 2rem;
  }
  .sa-hero > div.relative.flex > .container.relative.flex {
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .sa-hero > div.relative.flex > .container.relative.flex > .flex.flex-col.gap-4 {
    width: 100%;
    max-width: 100%;
  }
  .sa-hero img {
    position: relative;
    top: auto;
    right: auto;
    height: 280px;
    max-width: 100%;
    max-height: 280px;
    transform: none;
    margin: 0 auto;
  }
  .sa-hero p::after {
    font-size: 10px;
    letter-spacing: .08em;
  }
}


/* The benefits row belongs beneath the description only. */
.sa-hero p.text-sm::after {
  content: none;
  display: none;
}


/* Scale the tall portrait beyond the hero box; the box height stays fixed. */
.sa-hero img {
  height: min(980px, calc(100% + 480px));
}


@media (max-width: 768px) {
  .sa-hero img {
    height: 280px;
  }
}

/* Keep the featured 1-hour lobby layout stable during reveal/scroll. */
#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card {
  box-shadow: rgba(225, 139, 66, 0.3) 0 0 0 1px, rgba(0, 0, 0, 0.34) 0 22px 60px, rgba(225, 139, 66, 0.1) 0 0 42px;
}
#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: stretch;
}
#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child {
  min-height: 100%;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 0 !important;
}
#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  aspect-ratio: auto !important;
}
#products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:last-child {
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}
@media (max-width: 640px) {
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a {
    display: flex !important;
    flex-direction: column;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child img {
    min-height: 0;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Mobile refinement for the featured lobby card. */
@media (max-width: 640px) {
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card {
    width: 100%;
    overflow: hidden;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a {
    display: flex !important;
    width: 100%;
    min-width: 0;
    flex-direction: column;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child {
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:last-child {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: clamp(1rem, 5vw, 1.5rem);
    gap: .875rem;
  }
}

/* Prevent the desktop 100% image height from stretching the lobby card on phones. */
@media (max-width: 640px) {
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card {
    height: auto !important;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a {
    height: auto !important;
    min-height: 0 !important;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  #products-1786774545482 > .container > .w-full > .flex.flex-wrap > [data-name="mw4 bot lobby 1 hour"] .sa-product-card > a > div:first-child img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
  }
}

/* Halloween home refresh: cinematic battlefield, amber edge-light, compact responsive hero. */
body.sa-tpl-shop {
  background-color: #08090b;
  background-image:
    radial-gradient(ellipse at 8% 4%, rgba(226, 112, 32, .11), transparent 34%),
    radial-gradient(ellipse at 96% 12%, rgba(116, 52, 24, .12), transparent 32%);
  background-attachment: fixed;
}
.sa-header {
  background: rgba(8, 9, 12, .94);
  border-bottom-color: rgba(231, 137, 49, .18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.sa-hero > div.relative.flex {
  position: relative;
  isolation: isolate;
  min-height: clamp(470px, 58vw, 620px);
  height: clamp(500px, 64vh, 640px);
  margin: 1rem clamp(.75rem, 3vw, 2.5rem) 2.5rem;
  padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.25rem, 5vw, 4.5rem);
  border: 1px solid rgba(236, 145, 49, .24);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 24px 70px rgba(0,0,0,.35);
}
.sa-hero > div.relative.flex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 78% 20%, rgba(235, 132, 42, .14), transparent 34%),
    linear-gradient(180deg, rgba(6,7,9,.1), rgba(6,7,9,.25));
}
.sa-hero > div.relative.flex > .container.relative.flex {
  position: relative;
  z-index: 1;
  height: 100%;
  align-items: center;
}
.sa-hero > div.relative.flex > .container.relative.flex > .flex.flex-col.gap-4 {
  width: min(58%, 800px);
  max-width: min(58%, 800px);
}
.sa-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.6rem, 5.3vw, 5rem) !important;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
  background-image: linear-gradient(180deg, #f6f5f2 0 48%, #ffb02e 54% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sa-hero p.text-sm {
  color: #ff9e35;
  letter-spacing: .16em;
}
.sa-hero img {
  right: -1rem;
  filter: drop-shadow(0 22px 42px rgba(0,0,0,.68));
}
.sa-products .sa-product-card.chamfer,
.sa-features .sa-feature.chamfer {
  border-color: rgba(226, 133, 47, .17);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}
.sa-products .sa-product-card.chamfer:hover,
.sa-features .sa-feature.chamfer:hover {
  box-shadow: 0 22px 48px rgba(0,0,0,.38), 0 0 28px rgba(226,133,47,.12);
}
.sa-products .sa-product-card.chamfer::before,
.sa-features .sa-feature.chamfer::before {
  background: rgba(239, 148, 56, .22);
}
.sa-faq-list,
.sa-socials-list {
  border-color: rgba(226,133,47,.18);
  background: linear-gradient(155deg, rgba(25,23,22,.97), rgba(12,13,15,.98));
}
.sa-products h2,
.sa-features h2,
.sa-faq h2,
.sa-socials h2 {
  text-wrap: balance;
}
@media (max-width: 768px) {
  .sa-hero > div.relative.flex {
    min-height: 0;
    height: auto;
    margin: .75rem .75rem 2rem;
    padding: 2rem 1.125rem 1.5rem;
    background-position: 68% center !important;
    border-radius: 18px;
  }
  .sa-hero > div.relative.flex::before {
    background: linear-gradient(180deg, rgba(5,6,8,.55), rgba(5,6,8,.82) 44%, rgba(5,6,8,.2));
  }
  .sa-hero > div.relative.flex > .container.relative.flex {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .sa-hero > div.relative.flex > .container.relative.flex > .flex.flex-col.gap-4 {
    width: 100%;
    max-width: 100%;
  }
  .sa-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.2rem, 10.8vw, 3.4rem) !important;
  }
  .sa-hero img {
    position: relative;
    inset: auto;
    height: 250px;
    width: auto;
    max-width: 100%;
    max-height: 250px;
    margin: -.25rem auto -1.25rem;
    object-fit: contain;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa-products .sa-product-card.chamfer,
  .sa-features .sa-feature.chamfer,
  .sa-products .sa-product-card img {
    transition: none;
  }
}