html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

.collection-ghostface {
  --ghostface-red: #a90000;
  --ghostface-red-dark: #380000;
  --ghostface-red-soft: rgba(169, 0, 0, 0.18);
  --ghostface-white: #f4f4f4;
  --ghostface-muted: rgba(255, 255, 255, 0.68);
  --ghostface-border: rgba(255, 255, 255, 0.14);

  --ghostface-backstage: url("../assets/ghostface-background-mobile.png");
  --ghostface-character-image: url("../assets/ghostface-busto.png");
  --ghostface-knife-image: url("../assets/ghostface-faca.png");

  --navbar-height: 60px;

  position: relative;
  min-height: 100vh;

  overflow-x: hidden;

  background: #000;
  color: #fff;
}

@media (min-width: 900px) {
  .collection-ghostface {
    --ghostface-backstage: url("../assets/ghostface-background-desktop.png");
  }
}

.collection-ghostface::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;

  background-image:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 26%),
    radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.72) 52%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), #000 96%),
    var(--ghostface-backstage);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: contrast(1.08) brightness(0.92);
  transform: scale(1.03);

  pointer-events: none;
}

@media (min-width: 981px) {
  .collection-ghostface::before {
    filter: contrast(1.05) brightness(1.50);
  }
}

@media (min-width: 900px) {
  .collection-ghostface::before {
    background-image:
      radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.72) 52%, #000 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.2), #000 96%),
      var(--ghostface-backstage);
  }
}

.collection-ghostface::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;

  pointer-events: none;

  opacity: 0.11;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 2px,
    transparent 5px
  );

  mix-blend-mode: overlay;
}

#ghostfaceRainCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

.ghostface-screen-flash {
  position: fixed;
  inset: 0;
  z-index: 90;

  pointer-events: none;

  background: rgba(255, 255, 255, 0);
  mix-blend-mode: screen;
}

.ghostface-screen-flash.flash {
  animation: ghostfaceCheckoutLightning 0.82s steps(1, end) forwards;
}

@keyframes ghostfaceCheckoutLightning {
  0% {
    background: rgba(255, 255, 255, 0);
  }

  10% {
    background: rgba(255, 255, 255, 0.58);
  }

  16% {
    background: rgba(255, 255, 255, 0.08);
  }

  23% {
    background: rgba(255, 255, 255, 0.42);
  }

  31% {
    background: rgba(255, 255, 255, 0);
  }

  42% {
    background: rgba(255, 255, 255, 0.28);
  }

  48% {
    background: rgba(255, 255, 255, 0.05);
  }

  58% {
    background: rgba(255, 255, 255, 0.34);
  }

  66%,
  100% {
    background: rgba(255, 255, 255, 0);
  }
}

main,
.footer {
  position: relative;
  z-index: 4;
}

/* ================================
   Botões
================================ */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;
  padding: 0 28px;

  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.5);

  color: #fff;

  cursor: pointer;

  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.btn-primary {
  border-color: var(--ghostface-red);
  background: rgba(120, 0, 0, 0.42);
  box-shadow: 0 0 26px rgba(120, 0, 0, 0.32);
}

.btn-primary:hover,
.btn-secondary:hover {
  background: #fff;
  color: #000;
}

/* Botões "Ver camisa" e "Chamar no WhatsApp" com o mesmo estilo */
.ghostface-hero-cta,
.ghostface-reservation .btn-primary.whatsapp-link {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.52);
  color: #fff;

  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.025),
    0 0 18px rgba(255, 255, 255, 0.04);
}

.ghostface-hero-cta:hover,
.ghostface-reservation .btn-primary.whatsapp-link:hover {
  border-color: rgba(169, 0, 0, 0.95);
  background:
    linear-gradient(
      180deg,
      rgba(169, 0, 0, 0.86),
      rgba(56, 0, 0, 0.95)
    );

  color: #fff;

  box-shadow:
    0 0 26px rgba(169, 0, 0, 0.42),
    inset 0 0 18px rgba(255, 255, 255, 0.05);

  transform: translateY(-1px);
}

/* ================================
   Hero / Countdown
================================ */

.ghostface-hero {
  position: relative;

  min-height: 100vh;
  padding: calc(var(--navbar-height) + 42px) clamp(22px, 5vw, 86px) 70px;

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 42px;

  overflow: hidden;
}

.ghostface-hero-copy,
.ghostface-hero-visual {
  position: relative;
  z-index: 2;
}

.ghostface-hero-copy {
  max-width: 760px;
}

.ghostface-hero-logo {
  width: clamp(128px, 10vw, 174px);
  height: auto;
  margin-bottom: 18px;

  display: block;

  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.12))
    drop-shadow(0 0 28px rgba(169, 0, 0, 0.2));
}

.ghostface-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin: 38px 0 24px;

  color: var(--ghostface-muted);

  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ghostface-eyebrow-text {
  display: inline-block;
}

.ghostface-eyebrow .ghostface-ring {
  flex: 0 0 auto;

  width: 10px;
  height: 10px;

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: var(--ghostface-red);

  box-shadow:
    0 0 12px rgba(255, 0, 0, 0.82),
    0 0 20px rgba(169, 0, 0, 0.45);

  animation: ghostfaceRingBlink 0.8s infinite;
}

.ghostface-title {
  margin: 0;

  font-size: clamp(3.3rem, 8vw, 8.8rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.18),
    5px 0 rgba(160, 0, 0, 0.45);
}

.ghostface-title-secondary {
  margin: 16px 0 0;

  color: var(--ghostface-red);

  font-size: clamp(2rem, 4.8vw, 5.4rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow:
    0 0 18px rgba(169, 0, 0, 0.52),
    4px 0 rgba(69, 0, 0, 0.22),
    0 0 32px rgba(169, 0, 0, 0.28);
}

.ghostface-glitch {
  animation: ghostfaceGlitch 6s infinite steps(1);
}

@keyframes ghostfaceGlitch {
  0%,
  92%,
  100% {
    transform: translate(0);
  }

  93% {
    transform: translate(7px, -2px);
  }

  94% {
    transform: translate(-5px, 2px);
  }

  95% {
    transform: translate(2px, 0);
  }
}

/* ================================
   Chamada desconhecida / Data do drop
================================ */

.phone-header,
.call-status,
.poster-date {
  position: relative;
  z-index: 2;
}

.phone-header {
  margin: 0 0 20px;

  display: flex;
  align-items: center;
  gap: 14px;
}

.phone-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #151515;

  color: #ff3333;

  box-shadow: 0 0 22px rgba(255, 0, 0, 0.18);

  animation: ghostfacePhoneRing 1.35s infinite;
}

.phone-svg {
  width: 22px;
  height: 22px;

  display: block;

  fill: #ff3333;
}

@keyframes ghostfacePhoneRing {
  0%,
  100% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(12deg);
  }

  30% {
    transform: rotate(-12deg);
  }

  45% {
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(-8deg);
  }
}

.caller-info strong {
  display: block;

  color: #fff;

  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.caller-info span {
  display: block;
  margin-top: 5px;

  color: rgba(255, 255, 255, 0.52);

  font-size: 0.82rem;
}

.call-status {
  width: fit-content;
  margin: 0 0 18px;
  padding: 7px 12px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 1px solid rgba(255, 0, 0, 0.24);
  background: rgba(255, 0, 0, 0.06);

  color: #ff4a4a;

  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.call-status .ghostface-ring {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;
}

.poster-date {
  width: fit-content;
  margin-top: 18px;

  display: inline-block;

  padding: 10px 14px;

  background: #7a0000;
  color: #fff;

  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  box-shadow: 0 0 24px rgba(255, 0, 0, 0.35);
}

.ghostface-description {
  max-width: 600px;
  margin: 26px 0 0;

  color: rgba(255, 255, 255, 0.76);

  font-size: clamp(0.96rem, 1.4vw, 1.08rem);
  line-height: 1.7;
}

.ghostface-countdown-description {
  max-width: 600px;
  margin: 22px 0 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  line-height: 1.7;
}

.ghostface-countdown-block {
  margin-top: 18px;
}

.ghostface-countdown-label {
  margin: 0 0 18px;

  color: rgba(255, 255, 255, 0.76);

  font-size: clamp(1.22rem, 0.95vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ghostface-countdown {
  --ghostface-countdown-gap: clamp(8px, 1vw, 12px);

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

  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--ghostface-countdown-gap);
}

.ghostface-countdown div {
  box-sizing: border-box;

  flex: 0 0 clamp(82px, 6.5vw, 108px);
  width: clamp(82px, 6.5vw, 108px);
  min-width: 0;

  aspect-ratio: 0.68 / 1;

  padding: 0 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(169, 0, 0, 0.42);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);

  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.58),
    inset 0 0 18px rgba(255, 255, 255, 0.025);

  text-align: center;
}

.ghostface-countdown span {
  display: block;

  color: #fff;

  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 900;
  line-height: 1;

  transform: scaleX(1.06) scaleY(1.75);
  transform-origin: center;

  letter-spacing: 0.01em;

  text-shadow: 0 0 14px rgba(255, 0, 0, 0.62);
}

.ghostface-countdown small {
  display: block;
  margin-top: 18px;

  color: rgba(255, 255, 255, 0.58);

  font-size: clamp(0.58rem, 0.72vw, 0.76rem);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ghostface-hero-cta {
  margin-top: 30px;
}

/* ================================
   Visual Hero
================================ */

.ghostface-hero-visual {
  min-height: 640px;

  display: grid;
  place-items: center;
}

.ghostface-character {
  width: min(100%, 560px);
  min-height: 420px;
  aspect-ratio: 1 / 1.2;

  background-image: var(--ghostface-character-image, url("../assets/ghostface-busto.png"));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  flex: 0 0 auto;

  filter:
    drop-shadow(0 0 32px rgba(255, 255, 255, 0.24))
    drop-shadow(0 0 70px rgba(255, 255, 255, 0.08))
    contrast(1.18);

  animation: ghostfaceBreathe 3.4s ease-in-out infinite;
}

@keyframes ghostfaceBreathe {
  0%,
  100% {
    transform: scale(1) translateY(10px);
  }

  50% {
    transform: scale(1.035) translateY(-5px);
  }
}

.ghostface-material-card {
  position: absolute;
  right: 0;
  bottom: 8%;
  z-index: 5;

  width: min(560px, 78vw);
  min-width: min(100%, 390px);
  padding: 22px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(10px);

  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.9);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ghostface-material-top {
  display: block;

  color: #fff;

  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ghostface-material-base {
  display: block;

  color: #a90000;

  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ghostface-material-image {
  width: 100%;
  max-height: 220px;
  margin: 22px 0;

  display: block;

  object-fit: contain;
  background: #000;

  filter: none;
  box-shadow: none;
}

.ghostface-material-process {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;

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

.ghostface-material-process .ghostface-material-top,
.ghostface-material-process .ghostface-material-base {
  margin-top: 0;
}

.ghostface-ring {
  width: 11px;
  height: 11px;

  border-radius: 50%;
  background: var(--ghostface-red);
  box-shadow: 0 0 18px rgba(255, 0, 0, 0.9);

  animation: ghostfaceRingBlink 0.8s infinite;
}

@keyframes ghostfaceRingBlink {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0.2;
  }
}

/* ================================
   Produto
================================ */

.ghostface-products-section,
.ghostface-reservation,
.ghostface-newsletter-section {
  position: relative;
  z-index: 4;

  padding: 100px 5%;

  text-align: center;
}

.ghostface-products-section h2,
.ghostface-reservation h2 {
  margin: 0 0 24px;

  font-size: clamp(2.1rem, 4vw, 3rem);
  text-transform: uppercase;
}

.ghostface-section-subtitle {
  margin: 0 0 12px;

  color: var(--ghostface-muted);

  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ghostface-products-description,
.ghostface-reservation p {
  max-width: 700px;
  margin: 0 auto;

  color: rgba(255, 255, 255, 0.68);

  line-height: 1.7;
}

.ghostface-products-grid {
  width: min(980px, 100%);
  margin: 56px auto 0;

  display: grid;
  grid-template-columns: 1fr;
}

.ghostface-empty-products {
  padding: 24px;

  border: 1px dashed rgba(255, 255, 255, 0.18);

  color: var(--ghostface-muted);
}

.ghostface-product-card {
  position: relative;

  padding: clamp(18px, 3vw, 30px);

  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: clamp(24px, 4vw, 54px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(circle at top left, rgba(77, 1, 1, 0.18), transparent 42%),
    rgba(8, 8, 8, 0.86);

  text-align: left;
  backdrop-filter: blur(8px);

  box-shadow:
    0 0 70px rgba(0, 0, 0, 0.66),
    inset 0 0 30px rgba(255, 255, 255, 0.02);
}

.ghostface-product-card::before {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0.12;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 2px,
      transparent 6px
    );
}

.ghostface-product-media,
.ghostface-product-info {
  position: relative;
  z-index: 1;
}

.ghostface-product-media {
  padding: 22px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.45);
}

.ghostface-product-main-image {
  width: 100%;
  height: clamp(300px, 38vw, 460px);

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.12))
    drop-shadow(0 0 38px rgba(169, 0, 0, 0.16));
}

.ghostface-product-thumbs {
  margin-top: 18px;

  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ghostface-thumb-btn {
  width: 72px;
  height: 72px;
  padding: 5px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);

  cursor: pointer;
  opacity: 0.62;

  transition: 0.25s ease;
}

.ghostface-thumb-btn:hover,
.ghostface-thumb-btn.active {
  border-color: #fff;
  opacity: 1;
}

.ghostface-thumb-btn img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.ghostface-product-tag {
  display: block;
  margin-bottom: 12px;

  color: var(--ghostface-muted);

  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ghostface-product-info h3 {
  margin: 0 0 14px;

  color: #fff;

  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.14),
    5px 0 rgba(169, 0, 0, 0.55);
}

.ghostface-product-collection {
  display: block;
  margin-bottom: 24px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ghostface-product-description {
  margin: 0 0 22px;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.75;
}

.ghostface-product-meta {
  margin-bottom: 22px;

  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ghostface-product-price {
  margin: 0;

  color: #fff;

  font-size: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ghostface-product-status {
  display: inline-flex;
  align-items: center;

  padding: 8px 11px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ghostface-controls {
  display: grid;
  gap: 16px;
}

.ghostface-option-label,
.ghostface-quantity-control {
  display: block;
  margin-bottom: 8px;

  color: rgba(255, 255, 255, 0.66);

  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ghostface-size-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ghostface-size-btn {
  width: 58px;
  height: 46px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);

  color: #fff;

  cursor: pointer;

  font-weight: 900;

  transition: 0.25s ease;
}

.ghostface-size-btn:hover,
.ghostface-size-btn.active {
  border-color: #fff;
  background: #fff;
  color: #000;
}

.ghostface-quantity-control input {
  width: 100%;
  max-width: 180px;
  margin-top: 8px;
  padding: 14px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.45);

  color: #fff;

  font-size: 1rem;
  outline: none;
}

.ghostface-quantity-control input:focus {
  border-color: #fff;
}

.ghostface-buy-button {
  --ghostface-buy-progress: 0%;

  position: relative;

  width: min(100%, 390px);
  height: 62px;

  overflow: visible;
  isolation: isolate;

  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(0, 0, 0, 0.68);

  color: #fff;

  cursor: pointer;

  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
}

.ghostface-buy-button:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(
      180deg,
      rgba(169, 0, 0, 0.2),
      rgba(0, 0, 0, 0.82)
    );

  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.08),
    0 0 30px rgba(169, 0, 0, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.035);

  filter: brightness(1.08);
  transform: translateY(-1px);
}

.ghostface-buy-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 4px;
}

.ghostface-buy-button:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.ghostface-buy-button::before {
  content: "";
  position: absolute;
  inset: 0;

  width: var(--ghostface-buy-progress);

  background: linear-gradient(90deg, #380000, #a40000, #5a0000);

  z-index: -1;

  transition: width 0.18s ease;
}

.ghostface-buy-button::after {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0;

  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 70%, rgba(255, 255, 255, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px);

  mix-blend-mode: screen;
}

.ghostface-buy-button.loading::after {
  opacity: 1;
}

.ghostface-stab-knife {
  position: absolute;
  left: clamp(28px, var(--ghostface-buy-progress), calc(100% - 28px));
  top: 50%;
  z-index: 5;

  width: 92px;
  height: 92px;

  background-image: var(--ghostface-knife-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  pointer-events: none;

  /*
    Durante o carregamento:
    a imagem original tem a lâmina para baixo.
    Com rotate(-90deg), a lâmina aponta para a direita.
  */
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.9);
  transform-origin: center;

  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.46))
    drop-shadow(0 0 18px rgba(160, 0, 0, 0.72));

  transition:
    left 0.22s ease,
    opacity 0.16s ease,
    transform 0.28s ease,
    filter 0.22s ease;
}

/* Faca aparece enquanto o botão está carregando */
.ghostface-buy-button.loading .ghostface-stab-knife {
  opacity: 1;
}

.ghostface-buy-button.knife-finished .ghostface-stab-knife {
  left: calc(100% - 34px);

  /*
    Final:
    cabo no lado esquerdo superior,
    lâmina no lado direito inferior.
  */
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}

/* Pequena tremida/susto em cada avanço da barra */
.ghostface-buy-button.strike .ghostface-stab-knife {
  animation: ghostfaceKnifeSlideHit 0.26s ease;
}

@keyframes ghostfaceKnifeSlideHit {
  0% {
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.86);
    filter:
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.36))
      drop-shadow(0 0 14px rgba(160, 0, 0, 0.58));
  }

  45% {
    transform: translate(-50%, -50%) rotate(-90deg) scale(1.08);
    filter:
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.62))
      drop-shadow(0 0 28px rgba(200, 0, 0, 0.9));
  }

  100% {
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.95);
    filter:
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.46))
      drop-shadow(0 0 18px rgba(160, 0, 0, 0.72));
  }
}

.ghostface-blood-drops {
  position: absolute;
  inset: 0;
  z-index: 3;

  overflow: hidden;
  pointer-events: none;
}

.ghostface-drop {
  position: absolute;
  top: -10px;

  width: 5px;
  height: 20px;

  border-radius: 999px;
  background: #a00000;

  opacity: 0;

  animation: ghostfaceDrip 0.9s ease forwards;
}

@keyframes ghostfaceDrip {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

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

.ghostface-buy-text {
  position: relative;
  z-index: 4;
}

.ghostface-reservation .btn-primary {
  margin-top: 32px;
}

.ghostface-newsletter-section {
  padding-top: 40px;
}

/* ================================
   Footer
================================ */

.footer {
  padding: 54px 5%;

  color: rgba(255, 255, 255, 0.62);

  text-align: center;
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: 0.25s ease;
}

.footer a:hover {
  color: #fff;
}

/* ================================
   Desktop: personagem + card alinhados
================================ */
@media (min-width: 981px) {
  .ghostface-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
    gap: clamp(24px, 4vw, 64px);
  }

  .ghostface-hero-visual {
    --ghostface-character-width: clamp(340px, 30vw, 540px);
    --ghostface-card-extra-width: clamp(70px, 7vw, 130px);

    position: relative;

    width: min(
      100%,
      calc(var(--ghostface-character-width) + var(--ghostface-card-extra-width))
    );

    min-height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    justify-self: end;
  }

  .ghostface-character {
    width: var(--ghostface-character-width);
    max-width: none;

    margin: 0 auto;

    animation: ghostfaceBreatheDesktop 3.4s ease-in-out infinite;
  }

  .ghostface-material-card {
    position: relative;
    right: auto;
    bottom: auto;
    transform: none;

    z-index: 6;

    width: min(
      100%,
      calc(var(--ghostface-character-width) + var(--ghostface-card-extra-width))
    );

    min-width: min(100%, var(--ghostface-character-width));
    max-width: none;
    box-sizing: border-box;

    /*
      Centraliza o card com o personagem.
      O valor negativo sobe o card para colar e ajuda a cortar visualmente o busto.
    */
    margin: -92px auto 0;
  }
}

@keyframes ghostfaceBreatheDesktop {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

@media (max-width: 620px) {
  .ghostface-hero {
    padding-inline: 20px;
  }

  .ghostface-title {
    font-size: clamp(2.7rem, 15vw, 4rem);
  }

  .ghostface-eyebrow {
    gap: 9px;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .ghostface-eyebrow .ghostface-ring {
    width: 8px;
    height: 8px;
  }

  .ghostface-countdown {
    --ghostface-countdown-gap: 5px;

    width: 100%;
    max-width: 420px;

    justify-content: center;
    flex-wrap: nowrap;
  }

  .ghostface-countdown div {
    flex: 0 0 calc((100% - 15px) / 4);
    width: calc((100% - 15px) / 4);

    aspect-ratio: 0.68 / 1;

    padding: 0 2px;
  }

  .ghostface-countdown span {
    font-size: clamp(1.35rem, 7vw, 1.85rem);

    transform: scaleX(1.04) scaleY(1.75);
    transform-origin: center;
  }

  .ghostface-countdown small {
    margin-top: 14px;

    font-size: clamp(0.44rem, 2.35vw, 0.58rem);
    letter-spacing: 0.01em;
  }

  .ghostface-countdown-label {
    font-size: 0.8rem;
    margin-bottom: 15px;
    letter-spacing: 0.15em;
  }

  .ghostface-products-section,
  .ghostface-reservation,
  .ghostface-newsletter-section {
    padding: 72px 5%;
  }

  .ghostface-product-media {
    padding: 14px;
  }

  .ghostface-product-main-image {
    height: 300px;
  }

  .ghostface-thumb-btn {
    width: 60px;
    height: 60px;
  }

  .ghostface-size-buttons {
    width: 100%;
  }

  .ghostface-size-btn {
    flex: 1;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
  .phone-header {
    justify-content: center;
    margin-bottom: 18px;

    text-align: left;
  }

  .phone-icon {
    width: 42px;
    height: 42px;
  }

  .phone-svg {
    width: 20px;
    height: 20px;
  }

  .caller-info strong {
    font-size: 0.76rem;
  }

  .caller-info span {
    font-size: 0.74rem;
  }

  .call-status {
    margin-inline: auto;
    margin-bottom: 18px;

    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .poster-date {
    margin: 16px auto 0;

    font-size: 0.66rem;
    letter-spacing: 0.1em;

    text-align: center;
  }

  @media (max-width: 620px) {
    .ghostface-material-card {
      width: 100%;
      max-width: 390px;
      padding: 14px;
      margin: 10px auto 34px;

      text-align: center;
    }

    .ghostface-material-top,
    .ghostface-material-base {
      font-size: 1rem;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .ghostface-material-image {
      max-height: 180px;
      margin: 18px 0;
      background: #000;
      filter: none;
      box-shadow: none;
    }

    .ghostface-material-process {
      justify-content: center;
      text-align: center;
    }
  }
}

/* ================================
   Mobile: ordem final do hero
   logo > contador > descrição contador > eyebrow > título > subtítulo > descrição > CTA > personagem > card
================================ */

@media (max-width: 980px) {
  .ghostface-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;

    padding-top: calc(var(--navbar-height) + 34px);
  }

  .ghostface-hero-copy,
  .ghostface-hero-visual {
    display: contents;
  }

  .ghostface-hero-logo {
    order: 1;
    width: clamp(128px, 28vw, 170px);
    margin: 0 auto 18px;
  }

  .phone-header {
    order: 2;
    justify-content: center;
    margin: 0 auto 18px;

    text-align: left;
  }

  .call-status {
    order: 3;
    margin: 0 auto 18px;
  }

  .ghostface-countdown-block {
    order: 4;
    width: 100%;
    max-width: 720px;
    margin: 8px auto 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
  }

  .ghostface-countdown {
    margin-inline: auto;
    justify-content: center;
  }

  .poster-date {
    margin-inline: auto;
  }

  .ghostface-countdown-description {
    order: 5;
    max-width: 600px;
    margin: 22px auto 0;

    text-align: center;
  }

  .ghostface-eyebrow {
    order: 6;
    justify-content: center;
    margin-top: 36px;

    text-align: center;
  }

  .ghostface-title {
    order: 7;
    width: 100%;

    text-align: center;
  }

  .ghostface-title-secondary {
    order: 8;
    width: 100%;

    text-align: center;
  }

  .ghostface-description {
    order: 9;
    margin-inline: auto;

    text-align: center;
  }

  .ghostface-hero-cta {
    order: 10;
  }

  .ghostface-character {
    order: 11;

    width: min(100%, 390px);
    max-width: 390px;

    /* Remove a caixa alta herdada do desktop */
    min-height: 0;
    height: clamp(310px, 88vw, 430px);
    aspect-ratio: auto;

    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;

    margin: 46px auto 0;

    animation: ghostfaceBreatheMobile 3.4s ease-in-out infinite;
  }

  .ghostface-material-card {
    order: 12;

    position: relative;
    right: auto;
    bottom: auto;
    transform: none;

    width: min(100%, 390px);
    min-width: 0;
    max-width: 390px;
    box-sizing: border-box;

    /* Cola o card no character */
    margin: -46px auto 34px;

    text-align: center;
  }
}

@keyframes ghostfaceBreatheMobile {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

/* ================================
   Ajuste do título Ghostface no mobile
================================ */

@media (max-width: 620px) {

  .ghostface-material-top,
  .ghostface-material-base {
    font-size: 1rem;
    letter-spacing: 0.06em;
  }

  .ghostface-material-image {
    max-height: 180px;
    margin: 18px 0;
  }

  .ghostface-material-process {
    justify-content: center;
    text-align: center;
  }

  .ghostface-title {
    max-width: 100%;
    font-size: clamp(2.15rem, 12.4vw, 3.35rem);
    line-height: 0.92;
    letter-spacing: 0.045em;

    text-shadow:
      0 0 18px rgba(255, 255, 255, 0.16),
      3px 0 rgba(160, 0, 0, 0.42);
  }

  .ghostface-title-secondary {
    font-size: clamp(1.55rem, 8.6vw, 2.65rem);
    line-height: 0.95;
    letter-spacing: 0.045em;

    text-shadow:
      0 0 16px rgba(169, 0, 0, 0.48),
      3px 0 rgba(255, 255, 255, 0.18);
  }

  .ghostface-glitch {
    animation: ghostfaceGlitchMobile 6s infinite steps(1);
  }
    .ghostface-character {
    height: clamp(280px, 100vw, 390px);
    margin: 42px auto 0;
  }

  .ghostface-material-card {
    margin: -42px auto 34px;
  }
}

@keyframes ghostfaceGlitchMobile {
  0%,
  92%,
  100% {
    transform: translate(0);
  }

  93% {
    transform: translate(2px, -1px);
  }

  94% {
    transform: translate(-2px, 1px);
  }

  95% {
    transform: translate(1px, 0);
  }
}

@media (max-width: 380px) {
  .ghostface-title {
    font-size: clamp(2rem, 11.6vw, 3rem);
    letter-spacing: 0.035em;
  }

  .ghostface-title-secondary {
    font-size: clamp(1.4rem, 8vw, 2.3rem);
    letter-spacing: 0.035em;
  }
  
  .ghostface-countdown {
    --ghostface-countdown-gap: 4px;
  }

  .ghostface-countdown div {
    flex-basis: calc((100% - 12px) / 4);
    width: calc((100% - 12px) / 4);
  }

  .ghostface-countdown span {
    font-size: clamp(1.25rem, 6.5vw, 1.65rem);
    transform: scaleX(1.03) scaleY(1.65);
  }

  .ghostface-countdown small {
    margin-top: 12px;
    font-size: 0.43rem;
  }

  .ghostface-character {
    height: clamp(260px, 104vw, 360px);
  }

  .ghostface-material-card {
    margin: -38px auto 34px;
  }
}

.ghostface-reservation-info {
  width: min(100%, 420px);
  margin: 0 0 22px;
  padding: 14px 16px;

  display: grid;
  gap: 8px;

  border: 1px solid rgba(169, 0, 0, 0.42);
  background:
    linear-gradient(
      180deg,
      rgba(169, 0, 0, 0.16),
      rgba(0, 0, 0, 0.42)
    );

  color: #fff;

  box-shadow:
    0 0 22px rgba(169, 0, 0, 0.16),
    inset 0 0 18px rgba(255, 255, 255, 0.025);
}

.ghostface-reservation-info strong {
  display: block;

  color: #fff;

  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ghostface-reservation-info span {
  display: block;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.84rem;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .ghostface-reservation-info {
    width: 100%;
    margin-inline: auto;

    text-align: center;
  }
}

/* ================================
   Ghostface - Correção de status,
   badge e estados por tamanho
================================ */

.ghostface-product-media {
  position: relative;
}

.ghostface-product-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  right: auto;
  z-index: 8;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);

  color: #fff;

  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.42),
    inset 0 0 16px rgba(255, 255, 255, 0.035);
}

.ghostface-product-badge.product-badge--coming-soon {
  border-color: rgba(216, 164, 65, 0.72);
  color: #f8d982;
  box-shadow:
    0 0 22px rgba(216, 164, 65, 0.18),
    inset 0 0 16px rgba(255, 255, 255, 0.035);
}

.ghostface-product-badge.product-badge--sold-out {
  border-color: rgba(169, 0, 0, 0.82);
  color: #ff8a8a;
  box-shadow:
    0 0 24px rgba(169, 0, 0, 0.22),
    inset 0 0 16px rgba(255, 255, 255, 0.035);
}

.ghostface-product-badge.product-badge--unavailable {
  border-color: rgba(180, 180, 180, 0.34);
  color: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.06),
    inset 0 0 16px rgba(255, 255, 255, 0.025);
}

/* Status textual ao lado do preço */

.ghostface-product-status {
  transition:
    border-color 0.24s ease,
    background 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease;
}

.ghostface-product-status--disponivel {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(134, 239, 172, 0.08);
  color: #fff;
  box-shadow: 0 0 16px rgba(134, 239, 172, 0.12);
}

.ghostface-product-status--em_breve {
  border-color: rgba(216, 164, 65, 0.66);
  background: rgba(216, 164, 65, 0.08);
  color: #f8d982;
  box-shadow: 0 0 16px rgba(216, 164, 65, 0.12);
}

.ghostface-product-status--esgotado {
  border-color: rgba(169, 0, 0, 0.68);
  background: rgba(169, 0, 0, 0.08);
  color: #ff8a8a;
  box-shadow: 0 0 16px rgba(169, 0, 0, 0.14);
}

.ghostface-product-status--indisponivel {
  border-color: rgba(180, 180, 180, 0.26);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.52);
}

.ghostface-product-status--oculto {
  display: none;
}

/* Botões de tamanho por status */

.ghostface-size-btn {
  position: relative;
}

.ghostface-size-btn--disponivel {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.ghostface-size-btn--disponivel:hover,
.ghostface-size-btn--disponivel.active {
  border-color: #fff;
  background: #fff;
  color: #000;
}

.ghostface-size-btn--em_breve {
  border-color: rgba(216, 164, 65, 0.66);
  background: rgba(216, 164, 65, 0.08);
  color: #f8d982;
}

.ghostface-size-btn--em_breve:hover,
.ghostface-size-btn--em_breve.active {
  border-color: #f8d982;
  background: #f8d982;
  color: #000;
}

.ghostface-size-btn--esgotado {
  border-color: rgba(169, 0, 0, 0.72);
  background: rgba(169, 0, 0, 0.08);
  color: #ff8a8a;
}

.ghostface-size-btn--esgotado:hover,
.ghostface-size-btn--esgotado.active {
  border-color: #ff8a8a;
  background: rgba(169, 0, 0, 0.92);
  color: #fff;
}

.ghostface-size-btn--indisponivel,
.ghostface-size-btn.is-unavailable {
  border-color: rgba(180, 180, 180, 0.24);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.42);
}

.ghostface-size-btn--indisponivel:hover,
.ghostface-size-btn.is-unavailable:hover {
  border-color: rgba(180, 180, 180, 0.24);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.42);
}

.ghostface-size-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.ghostface-size-btn--oculto {
  display: none;
}

/* Card mudando visualmente conforme o tamanho selecionado */

.ghostface-product-card {
  transition:
    border-color 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease,
    box-shadow 0.24s ease;
}

.ghostface-product-card--coming-soon {
  border-color: rgba(216, 164, 65, 0.34);
  box-shadow:
    0 0 70px rgba(0, 0, 0, 0.66),
    0 0 28px rgba(216, 164, 65, 0.08),
    inset 0 0 30px rgba(255, 255, 255, 0.02);
}

.ghostface-product-card--sold-out {
  border-color: rgba(169, 0, 0, 0.36);
  box-shadow:
    0 0 70px rgba(0, 0, 0, 0.66),
    0 0 30px rgba(169, 0, 0, 0.1),
    inset 0 0 30px rgba(255, 255, 255, 0.02);
}

.ghostface-product-card--sold-out .ghostface-product-main-image {
  filter:
    grayscale(0.65)
    brightness(0.82)
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.08))
    drop-shadow(0 0 38px rgba(169, 0, 0, 0.12));
}

.ghostface-product-card--unavailable {
  opacity: 0.72;
  filter: grayscale(0.45);
  border-color: rgba(180, 180, 180, 0.22);
}

.ghostface-product-card--unavailable .ghostface-product-main-image {
  filter:
    grayscale(1)
    brightness(0.68)
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.06));
}

.ghostface-product-card--hidden {
  display: none;
}

/* ================================
   Ghostface - Cores dos tamanhos
   Disponível: verde
   Em breve: amarelo
   Esgotado: apagado
================================ */

/* Base dos botões de tamanho */
.ghostface-size-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.72);

  transition:
    border-color 0.24s ease,
    background 0.24s ease,
    color 0.24s ease,
    opacity 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
}

/* ================================
   Disponível - Verde
================================ */

.ghostface-size-btn.ghostface-size-btn--disponivel {
  border-color: rgba(34, 197, 94, 0.62);
  background: rgba(34, 197, 94, 0.08);
  color: #86efac;

  box-shadow:
    0 0 14px rgba(34, 197, 94, 0.08),
    inset 0 0 14px rgba(255, 255, 255, 0.02);
}

.ghostface-size-btn.ghostface-size-btn--disponivel:hover,
.ghostface-size-btn.ghostface-size-btn--disponivel.active {
  border-color: #86efac;
  background:
    linear-gradient(
      180deg,
      rgba(34, 197, 94, 0.95),
      rgba(21, 128, 61, 0.98)
    );
  color: #000;

  box-shadow:
    0 0 22px rgba(34, 197, 94, 0.34),
    inset 0 0 16px rgba(255, 255, 255, 0.12);
}

/* ================================
   Em breve - Amarelo
================================ */

.ghostface-size-btn.ghostface-size-btn--em_breve {
  border-color: rgba(216, 164, 65, 0.66);
  background: rgba(216, 164, 65, 0.08);
  color: #f8d982;

  box-shadow:
    0 0 14px rgba(216, 164, 65, 0.08),
    inset 0 0 14px rgba(255, 255, 255, 0.02);
}

.ghostface-size-btn.ghostface-size-btn--em_breve:hover,
.ghostface-size-btn.ghostface-size-btn--em_breve.active {
  border-color: #f8d982;
  background:
    linear-gradient(
      180deg,
      rgba(248, 217, 130, 0.95),
      rgba(216, 164, 65, 0.98)
    );
  color: #000;

  box-shadow:
    0 0 22px rgba(216, 164, 65, 0.32),
    inset 0 0 16px rgba(255, 255, 255, 0.12);
}

/* ================================
   Esgotado - Apagado
================================ */

.ghostface-size-btn.ghostface-size-btn--esgotado {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.34);

  opacity: 0.46;
  filter: grayscale(1);

  box-shadow: none;
}

/* Mesmo selecionado, esgotado continua apagado */
.ghostface-size-btn.ghostface-size-btn--esgotado:hover,
.ghostface-size-btn.ghostface-size-btn--esgotado.active {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.46);

  opacity: 0.58;
  filter: grayscale(1);

  box-shadow: none;
}

/* Risco discreto no botão esgotado */
.ghostface-size-btn.ghostface-size-btn--esgotado::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;

  height: 1px;

  background: rgba(255, 255, 255, 0.42);

  transform: rotate(-12deg);
  pointer-events: none;
}

/* ================================
   Indisponível / oculto
================================ */

.ghostface-size-btn.ghostface-size-btn--indisponivel,
.ghostface-size-btn.is-unavailable {
  cursor: not-allowed;

  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
  color: rgba(255, 255, 255, 0.24);

  opacity: 0.36;
  filter: grayscale(1);
  box-shadow: none;
}

.ghostface-size-btn.ghostface-size-btn--indisponivel:hover,
.ghostface-size-btn.is-unavailable:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
  color: rgba(255, 255, 255, 0.24);

  transform: none;
  box-shadow: none;
}

.ghostface-size-btn.ghostface-size-btn--oculto {
  display: none;
}

/* ================================
   Esgotado selecionado - destaque sutil
================================ */

.ghostface-size-btn.ghostface-size-btn--esgotado.active {
  border-color: rgba(255, 138, 138, 0.72);
  background:
    linear-gradient(
      180deg,
      rgba(169, 0, 0, 0.22),
      rgba(255, 255, 255, 0.035)
    );

  color: rgba(255, 210, 210, 0.78);

  opacity: 0.9;
  filter: grayscale(0.35);

  box-shadow:
    0 0 14px rgba(169, 0, 0, 0.42),
    inset 0 0 14px rgba(255, 255, 255, 0.045);
}

/* Mantém o risco visível no esgotado selecionado */
.ghostface-size-btn.ghostface-size-btn--esgotado.active::after {
  background: rgba(255, 138, 138, 0.72);
  height: 1px;
}

.caller-info .caller-status {
  width: fit-content;
  margin-top: 7px;
  padding: 7px 12px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 1px solid rgba(255, 0, 0, 0.24);
  background: rgba(255, 0, 0, 0.06);

  color: #ff4a4a;

  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Corrige a interferência do .caller-info span original */
.caller-info .caller-status .ghostface-ring {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  display: inline-block;
  margin-top: 0;

  background: var(--ghostface-red);
  color: inherit;

  animation: ghostfaceRingBlink 0.8s infinite;
}

.caller-info .caller-status-text {
  display: inline-block;
  margin-top: 0;

  color: #ff4a4a;
  font-size: inherit;
  line-height: 1;

  animation: ghostfaceTextBlink 0.8s infinite;
}

/* Texto piscando junto com o ring */
@keyframes ghostfaceTextBlink {
  0%,
  45% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.65);
  }

  46%,
  100% {
    opacity: 0.35;
    text-shadow: none;
  }
}

.ghostface-countdown-description + .ghostface-title {
  margin-top: clamp(28px, 4vw, 52px);
}

body:has([data-ghostface-motion-toggle][aria-pressed="true"]) 
.caller-info .caller-status-text {
  animation: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body:has([data-ghostface-motion-toggle][aria-pressed="true"])
.phone-icon {
  animation: none !important;
  transform: rotate(0deg) !important;
}

/* ================================
   Produto Ghostface - Layout mobile
   Ordem:
   tag > título > coleção > descrição > imagem > meta > controles
================================ */

@media (max-width: 768px) {
  .ghostface-products-grid {
    width: 100%;
    margin-top: 38px;
  }

  .ghostface-product-card {
    display: flex;
    flex-direction: column;
    gap: 18px;

    padding: 18px;
    overflow: hidden;

    text-align: center;
  }

  /*
    Faz os filhos de .ghostface-product-info participarem
    diretamente da ordenação do card.
  */
  .ghostface-product-info {
    display: contents;
  }

  .ghostface-product-tag {
    order: 1;
    margin-bottom: 0;

    text-align: center;
  }

  .ghostface-product-info h3 {
    order: 2;
    margin-bottom: 0;

    font-size: clamp(2.1rem, 13vw, 3.2rem);
    line-height: 0.9;
    letter-spacing: 0.055em;

    text-align: center;
  }

  .ghostface-product-collection {
    order: 3;
    margin-bottom: 0;

    text-align: center;
  }

  .ghostface-product-description {
    order: 4;
    max-width: 100%;
    margin: 0 auto;

    font-size: 0.88rem;
    line-height: 1.65;

    text-align: center;
  }

  .ghostface-product-media {
    order: 5;
    width: 100%;
    box-sizing: border-box;

    padding: 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ghostface-product-main-image {
    width: 100%;
    height: clamp(230px, 78vw, 340px);

    object-fit: contain;
  }

  .ghostface-product-thumbs {
    width: 100%;
    margin-top: 14px;

    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ghostface-thumb-btn {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
  }

  .ghostface-product-meta {
    order: 6;

    justify-content: center;
    margin-bottom: 0;

    text-align: center;
  }

  [data-ghostface-reservation-wrap] {
    order: 7;
  }

  .ghostface-controls {
    order: 8;
    width: 100%;

    text-align: left;
  }

  .ghostface-size-selector,
  .ghostface-quantity-control {
    width: 100%;
  }

  .ghostface-option-label,
  .ghostface-quantity-control {
    text-align: left;
  }

  .ghostface-size-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .ghostface-size-btn {
    width: 100%;
    min-width: 0;
  }

  .ghostface-quantity-control input {
    max-width: none;
  }

  .ghostface-buy-button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .ghostface-product-card {
    padding: 14px;
  }

  .ghostface-product-info h3 {
    font-size: clamp(1.9rem, 12vw, 2.65rem);
    letter-spacing: 0.045em;
  }

  .ghostface-product-description {
    font-size: 0.82rem;
  }

  .ghostface-product-main-image {
    height: clamp(210px, 82vw, 300px);
  }

  .ghostface-thumb-btn {
    width: 52px;
    height: 52px;
  }
}

/* ================================
   Ajuste desktop/laptop tipo MacBook
   Evita sobreposição do título com personagem/card
================================ */

@media (min-width: 981px) and (max-width: 1500px) and (max-height: 950px) {
  .ghostface-hero {
    gap: clamp(56px, 5vw, 86px);
    padding-left: clamp(46px, 5vw, 86px);
    padding-right: clamp(34px, 4vw, 64px);
  }

  .ghostface-hero-copy {
    max-width: 700px;
    min-width: 0;
  }

  /*
    Desce o título um pouco na tela.
    Pode aumentar para 72px se quiser mais distância.
  */
  .ghostface-countdown-description + .ghostface-title {
    margin-top: clamp(52px, 6vh, 72px);
  }

  /*
    Reduz levemente o título só em laptops.
    Isso evita ele invadir o card da direita.
  */
  .ghostface-title {
    font-size: clamp(6.8rem, 6.7vw, 6.8rem);
    letter-spacing: 0.065em;
  }

  .ghostface-title-secondary {
    font-size: clamp(2.8rem, 4.2vw, 4.4rem);
    letter-spacing: 0.065em;
  }

  /*
    Move personagem + card juntos como um bloco.
    Não separa os dois.
  */
  .ghostface-hero-visual {
    transform: translateX(clamp(22px, 2.8vw, 46px));
  }
}

/* ================================
   Ajuste de espaçamento do subtítulo
   "Edição Limitada"
================================ */

.ghostface-title-secondary {
  line-height: 1.08;
}

/* Dá mais respiro entre "Edição Limitada" e o texto abaixo */
.ghostface-title-secondary + .ghostface-description {
  margin-top: 32px;
}

@media (min-width: 981px) and (max-width: 1500px) and (max-height: 950px) {
  .ghostface-title-secondary {
    line-height: 1.08;
  }

  .ghostface-title-secondary + .ghostface-description {
    margin-top: 32px;
  }
}

/* ================================
   Ghostface - Controle de quantidade mobile-friendly
================================ */

.ghostface-quantity-control {
  display: grid;
  gap: 8px;
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.66);

  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ghostface-quantity-label {
  display: block;

  color: rgba(255, 255, 255, 0.66);

  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ghostface-quantity-stepper {
  width: 100%;
  max-width: 220px;

  display: grid;
  grid-template-columns: 52px minmax(70px, 1fr) 52px;
  align-items: stretch;

  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.45);

  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.025),
    0 0 18px rgba(169, 0, 0, 0.08);
}

.ghostface-qty-btn {
  min-height: 50px;

  border: 0;
  background:
    linear-gradient(
      180deg,
      rgba(169, 0, 0, 0.18),
      rgba(0, 0, 0, 0.72)
    );

  color: #fff;

  cursor: pointer;

  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;

  transition:
    background 0.24s ease,
    color 0.24s ease,
    opacity 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
}

.ghostface-qty-btn:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.ghostface-qty-btn:last-child {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.ghostface-qty-btn:hover:not(:disabled),
.ghostface-qty-btn:focus-visible:not(:disabled) {
  background:
    linear-gradient(
      180deg,
      rgba(169, 0, 0, 0.86),
      rgba(56, 0, 0, 0.95)
    );

  color: #fff;

  box-shadow:
    0 0 18px rgba(169, 0, 0, 0.35),
    inset 0 0 14px rgba(255, 255, 255, 0.05);
}

.ghostface-qty-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 3px;
}

.ghostface-qty-btn:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.ghostface-quantity-stepper .ghostface-product-qty {
  width: 100%;
  max-width: none;
  min-height: 50px;
  margin-top: 0;
  padding: 0 8px;

  border: 0;
  background: rgba(0, 0, 0, 0.62);

  color: #fff;

  font-size: 1rem;
  font-weight: 900;
  text-align: center;

  outline: none;

  appearance: textfield;
  -moz-appearance: textfield;
}

.ghostface-quantity-stepper .ghostface-product-qty::-webkit-outer-spin-button,
.ghostface-quantity-stepper .ghostface-product-qty::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.ghostface-quantity-stepper:focus-within {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 22px rgba(169, 0, 0, 0.22),
    inset 0 0 18px rgba(255, 255, 255, 0.035);
}

@media (max-width: 768px) {
  .ghostface-quantity-stepper {
    max-width: none;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
  }

  .ghostface-qty-btn {
    min-height: 54px;
    font-size: 1.35rem;
  }

  .ghostface-quantity-stepper .ghostface-product-qty {
    min-height: 54px;
    font-size: 1.05rem;
  }
}

/* ================================
   Ghostface - Ícones de contato
================================ */

.ghostface-reservation-socials {
  margin-top: 22px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ghostface-social-icon {
  width: 46px;
  height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.58);

  color: #fff;

  cursor: pointer;

  transition:
    border-color 0.24s ease,
    background 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.24s ease;
}

.ghostface-social-icon svg {
  width: 22px;
  height: 22px;

  display: block;

  fill: currentColor;
}

.ghostface-social-icon:hover,
.ghostface-social-icon:focus-visible {
  border-color: rgba(169, 0, 0, 0.95);

  background:
    linear-gradient(
      180deg,
      rgba(169, 0, 0, 0.86),
      rgba(56, 0, 0, 0.95)
    );

  color: #fff;

  box-shadow:
    0 0 24px rgba(169, 0, 0, 0.38),
    inset 0 0 16px rgba(255, 255, 255, 0.05);

  transform: translateY(-1px);
}

.ghostface-copy-feedback {
  min-height: 20px;
  margin: 12px 0 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 0.76rem;
  line-height: 1.5;
  text-align: center;
}

/* Botão de e-mail no footer com aparência de link */
.footer-copy-email {
  border: 0;
  padding: 0;

  background: transparent;

  color: rgba(255, 255, 255, 0.7);

  cursor: pointer;

  font: inherit;
  text-decoration: underline;

  transition: color 0.25s ease;
}

.footer-copy-email:hover,
.footer-copy-email:focus-visible {
  color: #fff;
}

/* ================================
   Ghostface Product Image Label
================================ */

.ghostface-product-main-figure {
  position: relative;

  width: 100%;
  margin: 0;

  display: block;
}

.ghostface-product-main-figure .ghostface-product-main-image {
  width: 100%;
}

.ghostface-product-image-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;

  max-width: calc(100% - 28px);
  padding: 8px 11px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.86),
      rgba(25, 0, 0, 0.82)
    );

  color: rgba(255, 255, 255, 0.86);

  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  box-shadow:
    0 0 18px rgba(0, 0, 0, 0.72),
    inset 0 0 14px rgba(255, 255, 255, 0.025);

  pointer-events: none;
}

@media (max-width: 768px) {
  .ghostface-product-image-label {
    left: 10px;
    bottom: 10px;

    padding: 7px 9px;

    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }
}

/* ================================
   Ghostface Product Image Label
   Label abaixo da imagem e acima das thumbs
================================ */

.ghostface-product-main-figure {
  position: relative;

  width: 100%;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mantém a imagem centralizada dentro do figure */
.ghostface-product-main-figure .ghostface-product-main-image {
  width: 100%;

  display: block;
}

/* Label agora fica abaixo da imagem, não sobreposta */
.ghostface-product-image-label {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

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

  margin: 12px auto 0;
  padding: 8px 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.86),
      rgba(25, 0, 0, 0.82)
    );

  color: rgba(255, 255, 255, 0.9);

  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;

  box-shadow:
    0 0 18px rgba(0, 0, 0, 0.72),
    inset 0 0 14px rgba(255, 255, 255, 0.025);

  pointer-events: none;
}

/* Dá um respiro entre a label e as miniaturas */
.ghostface-product-main-figure + .ghostface-product-thumbs {
  margin-top: 18px;
}

/* Mobile */
@media (max-width: 768px) {
  .ghostface-product-image-label {
    margin-top: 10px;
    padding: 7px 10px;

    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .ghostface-product-main-figure + .ghostface-product-thumbs {
    margin-top: 14px;
  }
}

/* ================================
   Ghostface Navbar Mobile
   Correção final da navbar normal
   sem scroll
================================ */

@media (max-width: 600px) {
  /* Estado normal, sem scroll */
  .collection-ghostface .navbar-ghostface:not(.is-scrolled) {
    height: 100px;
    min-height: 100px;

    padding: 9px 10px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Distância controlada entre logo e botões */
    gap: 4px;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-navbar-logo {
    width: 100%;
    height: 36px;
    margin: 0;

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

    flex: 0 0 36px;

    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-navbar-logo img {
    width: auto;
    height: 34px;
    max-height: 34px;
    max-width: 128px;

    display: block;
    object-fit: contain;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .nav-links {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 38px;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .nav-links li {
    min-width: 0;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-motion-toggle,
  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-home-link,
  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-cart-link {
    min-height: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-motion-toggle {
    width: auto !important;
    padding: 0 8px;
    gap: 6px;

    font-size: 0.46rem;
    letter-spacing: 0.035em;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-home-link,
  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-cart-link {
    padding: 0 10px;

    font-size: 0.56rem;
    letter-spacing: 0.08em;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-cart-link {
    gap: 7px;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-cart-text {
    display: inline-block;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-cart-icon {
    display: none;
  }
}

/* Telas menores */
@media (max-width: 380px) {
  .collection-ghostface .navbar-ghostface:not(.is-scrolled) {
    height: 96px;
    min-height: 96px;

    padding: 8px 8px 9px;
    gap: 3px;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-navbar-logo {
    height: 34px;
    flex-basis: 34px;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-navbar-logo img {
    height: 31px;
    max-height: 31px;
    max-width: 118px;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .nav-links {
    gap: 5px;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-motion-toggle {
    padding: 0 7px;
    gap: 5px;

    font-size: 0.42rem;
    letter-spacing: 0.025em;
  }

  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-home-link,
  .collection-ghostface .navbar-ghostface:not(.is-scrolled) .ghostface-cart-link {
    padding: 0 8px;

    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }
}

/* Mantém o estado com scroll enxuto */
@media (max-width: 600px) {
  .collection-ghostface .navbar-ghostface.is-scrolled {
    height: 60px;
    min-height: 60px;

    padding: 0 12px;

    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .collection-ghostface .navbar-ghostface.is-scrolled .ghostface-navbar-logo {
    display: none !important;
  }

  .collection-ghostface .navbar-ghostface.is-scrolled .nav-links {
    width: auto;
    height: 38px;

    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .collection-ghostface .navbar-ghostface.is-scrolled .ghostface-home-item {
    display: none !important;
  }

  .collection-ghostface .navbar-ghostface.is-scrolled .ghostface-cart-text {
    display: none !important;
  }

  .collection-ghostface .navbar-ghostface.is-scrolled .ghostface-cart-icon {
    display: block !important;
  }
}