/* Mobile header and resilient hero-video polish. Loaded after app.css. */

.video-hero{
  background:
    radial-gradient(circle at 72% 28%,rgba(233,166,35,.13),transparent 34%),
    radial-gradient(circle at 30% 72%,rgba(255,217,242,.08),transparent 38%),
    linear-gradient(145deg,#21171d 0%,#160f14 58%,#24181f 100%);
}

.hero-video{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease,visibility 0s linear .5s;
  -webkit-user-select:none;
  user-select:none;
}

.video-hero.video-is-playing .hero-video{
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease;
}

.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-start-playback-button{
  display:none!important;
  -webkit-appearance:none;
  opacity:0!important;
  pointer-events:none!important;
}

/* Featured scents stay visually grouped instead of turning into a long list. */
.featured-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.featured-grid .product-card{min-width:0}
.featured-grid .product-info{padding:16px}
.featured-grid .product-info h3{font-size:21px;line-height:1.08}

@media(max-width:800px){
  .brand{
    width:132px;
    height:76px;
    justify-content:center;
    overflow:visible;
  }

  /*
   * Keep the SVG vector at its final display size. Safari can soften SVGs when
   * they are first rasterised and then enlarged with transform/filter effects.
   * The source artwork has generous whitespace, so the image box is deliberately
   * taller than the header while the visible mark stays centred in the nav.
   */
  .brand img,
  .brand:hover img{
    width:118px;
    height:122px;
    max-width:none;
    object-fit:contain;
    object-position:center;
    border-radius:0;
    transform:none!important;
    filter:none!important;
    transition:opacity .2s ease;
    image-rendering:auto;
    will-change:auto;
  }

  .featured-products-section{
    padding-top:58px;
    padding-bottom:64px;
  }

  .featured-products-section .section-head{
    align-items:end;
    gap:14px;
    margin-bottom:22px;
  }

  .featured-products-section .section-head h2{
    font-size:clamp(34px,10vw,46px);
    line-height:.95;
  }

  .featured-products-section .section-head>a{
    flex:0 0 auto;
    font-size:14px;
    margin-bottom:2px;
  }

  .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px;
    width:100%;
  }

  .featured-grid .product-card{
    border-radius:14px;
    box-shadow:0 8px 24px rgba(83,55,71,.08);
  }

  .featured-grid .product-image{
    display:block;
    width:100%;
    aspect-ratio:1/1;
  }

  .featured-grid .product-info{
    padding:11px 12px 13px;
  }

  .featured-grid .product-info h3{
    margin:0 0 6px;
    font-size:16px;
    line-height:1.08;
    min-height:2.16em;
  }

  .featured-grid .price,
  .featured-grid .price-prefix,
  .featured-grid .old-price{
    font-size:13px;
  }

  .featured-grid .old-price{
    margin-left:4px;
  }
}

@media(max-width:420px){
  .brand{
    width:124px;
    height:74px;
  }

  .brand img,
  .brand:hover img{
    width:112px;
    height:116px;
    transform:none!important;
    filter:none!important;
  }

  .featured-grid{
    gap:10px;
  }

  .featured-grid .product-info{
    padding:10px 10px 12px;
  }

  .featured-grid .product-info h3{
    font-size:15px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-video{
    transition:none;
  }
}