/* Self-hosted display font */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted body font (variable; covers 400-700) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brand tokens — single source of truth across the site */
:root {
  --teal: #2A9D8F;
  --teal-light: #4297A0;
  --coral: #E76F51;
  --coral-light: #E57F84;
  --navy: #264653;
  --navy-light: #2F5061;
  --cream: #FEFAE0;
  --ivory: #F4EAE6;
  --pink: #D4879C;
  --orange: #F4A261;
  --orange-bright: #FD9364;

  --text-primary: #264653;
  --text-secondary: #555;
  --text-light: #666;

  --shadow-soft: 0 4px 20px rgba(38, 70, 83, 0.08);
  --shadow-medium: 0 10px 40px rgba(38, 70, 83, 0.12);
  --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.5);

  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Universal reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Mobile: prevent horizontal scroll regardless of what any nested element does.
     `clip` is preferred over `hidden` because it does NOT create a scroll container,
     so it doesn't break position: sticky on iOS Safari. Fallback to hidden for
     pre-2022 browsers that don't support clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  /* Pair with html — body bounded to viewport width on every page */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

/* Mobile safety: large display words break instead of busting the viewport */
h1, h2, h3 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Touch target safety — links/buttons should be tap-friendly on mobile */
@media (max-width: 768px) {
  a, button, .btn, input[type="submit"], input[type="button"] {
    /* Ensures Apple's 44pt minimum tap target on small viewports */
    min-height: 32px;
  }
}

/* iOS prevents page zoom on focus when input font-size is ≥ 16px */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Footer links — tighter gap on narrow viewports so they don't wrap awkwardly */
@media (max-width: 480px) {
  .footer-links {
    gap: 0.75rem 1.25rem !important;
    margin-top: 1.25rem !important;
  }
  .footer-links a {
    padding: 0.25rem 0;  /* gives wrapped links a tappable hit area */
  }
  footer {
    padding: 2rem 5% !important;
  }
}

/* Very narrow viewports (320–375px) — shrink any spacious gaps that crowd content */
@media (max-width: 380px) {
  section {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* ============================================================
   Sold-out die-cut sticker
   Round coral seal, hand-tilted, with a stamped dashed ring.
   Sits on shop cards (.shop-card-image) and the PDP hero
   (.product-video-container). Announces drop status + adds play.
   ============================================================ */
.product-sticker {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  width: 104px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  transform: rotate(-12deg);
  box-shadow: 0 0 0 4px #fff, 0 8px 22px rgba(38, 70, 83, 0.28);
  pointer-events: none;
  animation: stickerPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.product-sticker::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.6);
}

.product-sticker .sticker-main {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  line-height: 0.9;
  letter-spacing: 1.5px;
}

.product-sticker .sticker-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-transform: uppercase;
  margin-top: 0.4rem;
  opacity: 0.95;
}

@keyframes stickerPop {
  from { opacity: 0; transform: rotate(-12deg) scale(0.4); }
  to   { opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* PDP hero video is full-bleed (100vw) — inset the seal from the screen edge */
.product-video-container .product-sticker {
  top: 1.5rem;
  right: 6%;
}

@media (max-width: 768px) {
  .product-sticker {
    width: 86px;
    height: 86px;
    top: 1rem;
    right: 1rem;
  }
  .product-sticker .sticker-main { font-size: 1.35rem; }
  .product-sticker .sticker-sub { font-size: 0.46rem; }
  .product-video-container .product-sticker { right: 5%; }
}