/* Shared by the storefront and Customizer iframe. Layout remains editable:
   device-specific editor rules override these defaults without fighting !important. */
.cr-hero .cr-hero-slider { padding-bottom: 0; }
.cr-hero {
  --cr-hero-panel-height: 650px;
  --cr-hero-panel-gutter: 40px;
  --cr-hero-stack-width: 52%;
  --cr-hero-stack-gap: 18px;
  --cr-hero-logo-limit: 510px;
  --cr-hero-model-width: 43%;
  --cr-hero-model-height: 96%;
}
.cr-hero .cr-hero-slider__viewport { position: relative; overflow: hidden; border-radius: 20px; }
.cr-hero .cr-hero-slider__track { display: flex; align-items: stretch; overflow: visible; }
.cr-hero .cr-hero-slide {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--cr-hero-panel-height);
  max-height: none;
  padding: 40px var(--cr-hero-panel-gutter) 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.cr-hero .cr-hero-slide__grid { position: relative; z-index: 60; display: block; width: 100%; min-height: 0; }
.cr-hero .cr-hero-slide > :is(.cr-hero__headline,.cr-hero__sub,.cr-hero__actions) { position: relative; z-index: 60; }
.cr-hero .cr-hero-slide > :has(.cr-hero__headline,.cr-hero__sub,.cr-hero__actions) { position: relative; z-index: 60; }
.cr-hero .cr-hero-slide__col--content,
.cr-hero .cr-hero-slide__content-stack {
  position: relative;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
/* Branded slides have a separate content column and an uncluttered model zone. */
.cr-hero .cr-hero-slide:has(> .cr-hero-slide__content-stack) { align-items: flex-start; }
.cr-hero .cr-hero-slide:has(> .cr-hero-slide__content-stack) > .cr-hero-slide__grid { display: none; }
.cr-hero .cr-hero-slide > .cr-hero-slide__content-stack {
  width: var(--cr-hero-stack-width);
  max-width: 560px;
  margin: 0;
  gap: var(--cr-hero-stack-gap);
}
.cr-hero .cr-hero-slide__emblem { width: 100%; max-width: var(--cr-hero-logo-limit); margin: 0; }
.cr-hero .cr-hero-slide__emblem-img,
.cr-hero .cr-toxika-logo-picture,
.cr-hero .cr-toxika-logo-img,
.cr-hero .cr-hero-slide__content-stack > img {
  display: block;
  width: 100%;
  max-width: var(--cr-hero-logo-limit);
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.cr-hero .cr-hero__headline {
  margin: 0;
  max-width: 100%;
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.cr-hero .cr-hero-slide .cr-hero__sub {
  margin: 0;
  max-width: 100%;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  border-top-color: color-mix(in srgb, var(--cr-hero-accent, #ad5966) 66%, transparent);
  background: linear-gradient(155deg,rgba(30,27,34,.95),rgba(12,12,16,.98));
  color: #e2e2ec;
  box-shadow: 0 8px 22px rgba(0,0,0,.36);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.cr-hero .cr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  margin: 0;
}
.cr-hero .cr-hero__actions .cr-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 24px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.4;
  font-size: 13px;
  border-radius: 999px;
}
.cr-hero .cr-hero-slide__model-wrapper,
.cr-hero .cr-toxika-model-wrap {
  position: absolute;
  inset: auto 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: var(--cr-hero-model-width);
  height: var(--cr-hero-model-height);
  max-width: 580px;
  max-height: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 5;
}
.cr-hero .cr-hero-slide :is(.cr-hero-slide__model-wrapper,.cr-toxika-model-wrap,.cr-hero-slide__model-picture,.cr-toxika-model-picture,.cr-hero-slide__model-img,.cr-toxika-model-img) {
  transform: none !important;
  translate: none !important;
}
.cr-hero .cr-hero-slide__model-picture,
.cr-hero .cr-toxika-model-picture { display: flex; width: 100%; height: 100%; justify-content: flex-end; align-items: flex-end; }
.cr-hero .cr-hero-slide__model-img,
.cr-hero .cr-toxika-model-img { display: block; width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: right bottom; }
.cr-hero .cr-hero-slide[data-cr-slide-id="31"] {
  --cr-hero-accent: #be6e50;
  background-image: url('https://cinderrot.com/wp-content/uploads/2026/10/cinderrot-tombstone-transparent.png'),linear-gradient(112deg,rgba(255,255,255,.04),transparent 42%);
  background-image: image-set(url('https://cinderrot.com/wp-content/uploads/2026/11/cinderrot-tombstone-transparent.webp') type('image/webp'),url('https://cinderrot.com/wp-content/uploads/2026/10/cinderrot-tombstone-transparent.png') type('image/png')),linear-gradient(112deg,rgba(255,255,255,.04),transparent 42%);
  background-repeat: no-repeat;
  background-position: -130px bottom,center;
  background-size: auto 88%,cover;
}
.cr-hero .cr-hero-slide[data-cr-slide-id="31"]::after {
  /* The moving theme watermark conflicts with the integrated gravestone. */
  content: none !important;
}
.cr-hero .cr-hero-slide--toxika { --cr-hero-accent: #9ac347; }
.cr-hero .cr-hero-slide:not(:has(> .cr-hero-slide__content-stack)) .cr-hero__sub { max-width: min(100%, 52ch); }
.cr-hero .cr-hero-slide__tombstone-bg { display: none; }
.cr-hero .cr-toxika-frame-top-picture,
.cr-hero .cr-toxika-frame-bottom-picture { position: absolute; left: 16.667%; width: 66.667%; height: clamp(48px, 7vw, 100px); z-index: 4; pointer-events: none; line-height: 0; }
.cr-hero .cr-toxika-frame-top-picture { top: 0; }
.cr-hero .cr-toxika-frame-bottom-picture { bottom: 0; }
.cr-hero .cr-toxika-frame-top,
.cr-hero .cr-toxika-frame-bottom { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-hero .cr-toxika-frame-top { object-position: top center; }
.cr-hero .cr-toxika-frame-bottom { object-position: bottom center; }
.cr-hero .cr-hero-slide__media { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; z-index: 0; mask-image: none; -webkit-mask-image: none; pointer-events: none; }
.cr-hero .cr-hero-slide__media :is(picture,img,video) { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cr-hero .cr-hero-slide--has-bg-photo:not(.cr-hero-slide--photo-only)::after { position: absolute; inset: 0; width: auto; aspect-ratio: auto; background: linear-gradient(180deg,rgba(8,8,12,.35),rgba(8,8,12,.82)); opacity: 1; filter: none; transform: none; z-index: 1; pointer-events: none; }
.cr-hero .cr-hero-flame-right-surge { display: none; }
.cr-hero .cr-hero-slider__nav,
.cr-hero .cr-hero-slider__pause { position: absolute; top: auto; bottom: 20px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; z-index: 100; transform: none; background: rgba(9,9,12,.9); color: #fff; }
.cr-hero .cr-hero-slider__nav--prev { left: auto; right: 76px; }
.cr-hero .cr-hero-slider__nav--next { left: auto; right: 22px; }
.cr-hero .cr-hero-slider__pause { right: 130px; }
.cr-hero .cr-hero-slider__dots { left: 24px; right: 194px; bottom: 35px; z-index: 100; display: flex; flex-wrap: wrap; gap: 8px; }
.cr-hero .cr-hero-slider__dot { width: 16px; flex: 0 0 16px; }
.cr-hero .cr-hero-slider__dot.is-active { width: 30px; flex-basis: 30px; }
.cr-hero .cr-hero-slider :is(a,button):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (width >= 1400px) {
  .cr-hero { --cr-hero-panel-height: 680px; --cr-hero-panel-gutter: 52px; --cr-hero-logo-limit: 535px; --cr-hero-stack-gap: 20px; }
}
@media (992px <= width < 1200px) {
  .cr-hero { --cr-hero-panel-height: 592px; --cr-hero-panel-gutter: 32px; --cr-hero-logo-limit: 460px; --cr-hero-stack-gap: 15px; --cr-hero-model-height: 92%; }
}
@media (768px <= width < 992px) {
  .cr-hero { --cr-hero-panel-height: 540px; --cr-hero-panel-gutter: 22px; --cr-hero-logo-limit: 390px; --cr-hero-stack-gap: 12px; --cr-hero-model-height: 87%; --cr-hero-model-width: 41%; --cr-hero-stack-width: 55%; }
}
@media (max-width: 767px) {
  /* The controls have their own row instead of covering the lower artwork.
     A growing text stack pushes the model down; no fixed card height crops it. */
  .cr-hero .cr-hero-slider { padding-bottom: 60px; }
  .cr-hero .cr-hero-slide { min-height: 490px; padding: 24px 16px 24px; justify-content: center; align-items: center; gap: 14px; }
  .cr-hero .cr-hero-slide:has(> .cr-hero-slide__content-stack) { justify-content: flex-start; align-items: center; }
  .cr-hero .cr-hero-slide > .cr-hero-slide__content-stack { width: 100%; max-width: 420px; margin: 0 auto; gap: 10px; }
  .cr-hero .cr-hero-slide__emblem,
  .cr-hero .cr-toxika-logo-picture { width: min(100%, 300px); }
  .cr-hero .cr-hero-slide__content-stack > img { display: block; width: min(100%, 300px); max-width: 100%; height: auto; object-fit: contain; margin: 0 auto; }
  .cr-hero .cr-hero-slide__model-wrapper,
  .cr-hero .cr-toxika-model-wrap { position: relative; inset: auto; align-self: flex-end; flex: 0 0 auto; width: 76%; max-width: var(--cr-hero-phone-art-width, 320px); height: var(--cr-hero-phone-art-height, clamp(240px, 70vw, 300px)); max-height: none; margin: auto -16px 0 0; }
  .cr-hero .cr-hero-slide:has(> .cr-hero-slide__content-stack) { padding-bottom: 0; }
  .cr-hero .cr-hero-slide--toxika { padding-top: 46px; }
  .cr-hero .cr-toxika-frame-top-picture,
  .cr-hero .cr-toxika-frame-bottom-picture { height: 42px; }
  .cr-hero .cr-hero-slide .cr-hero__sub { padding: 9px 14px; font-size: 13px; line-height: 1.45; }
  .cr-hero .cr-hero__actions { width: 100%; }
  .cr-hero .cr-hero__actions .cr-btn { min-height: 44px; padding: 10px 18px; }
  .cr-hero .cr-hero__headline { width: 100%; text-align: center; }
  .cr-hero .cr-hero__headline-lead { font-size: clamp(24px, 7vw, 38px); line-height: 1.12; letter-spacing: .04em; }
  .cr-hero .cr-hero__headline-accent { font-size: clamp(26px, 7.5vw, 42px); line-height: 1.14; letter-spacing: .01em; overflow-wrap: normal; }
  .cr-hero .cr-hero-slide[data-cr-slide-id="31"] { background-position: -80px bottom,center; background-size: auto 52%,cover; }
  .cr-hero .cr-hero-slider__nav,
  .cr-hero .cr-hero-slider__pause { bottom: 8px; }
  .cr-hero .cr-hero-slider__dots { left: 16px; right: 178px; bottom: 23px; gap: 6px; }
  .cr-hero .cr-hero-slider__dot { width: 9px; flex-basis: 9px; }
  .cr-hero .cr-hero-slider__dot.is-active { width: 18px; flex-basis: 18px; }
  .cr-hero .cr-hero-slider__nav--next { right: 16px; }
  .cr-hero .cr-hero-slider__nav--prev { right: 68px; }
  .cr-hero .cr-hero-slider__pause { right: 120px; }
}

@media (576px <= width < 768px) {
  .cr-hero { --cr-hero-phone-art-width: 420px; --cr-hero-phone-art-height: clamp(320px, 55vw, 395px); }
  .cr-hero .cr-hero-slide > .cr-hero-slide__content-stack { max-width: 480px; gap: 14px; }
  .cr-hero .cr-toxika-logo-picture { width: min(100%, 365px); }
  .cr-hero .cr-hero-slide .cr-hero__sub { font-size: 14px; }
}

@media (width < 576px) {
  .cr-hero .cr-hero__actions .cr-btn { min-width: min(100%, 172px); }
}