/* =========================================================
   MIKHAIL V13.11.16
   GLOBAL DESKTOP PROPORTION & TYPOGRAPHY REFINEMENT
   Visual-only responsive overrides.
   Primary target: 1920 x ~1080 at 100% browser zoom.
   ========================================================= */

/* ---------- GLOBAL DESKTOP HEADER ---------- */
@media (min-width:1280px){
  .announcement{
    height:24px!important;
    font-size:8px!important;
    letter-spacing:.18em!important;
  }

  header{
    height:76px!important;
  }

  .nav{
    height:76px!important;
  }

  .brand{
    width:255px!important;
    height:58px!important;
  }

  .nav-side{
    gap:22px!important;
    font-size:9px!important;
    letter-spacing:.115em!important;
  }

  .wrap{
    width:min(1320px,calc(100% - 64px))!important;
  }

  footer{
    padding:46px 0 22px!important;
  }

  .footer-logo{
    width:260px!important;
  }
}

/* ---------- COMMON PAGE HERO / SECTION SCALE ---------- */
@media (min-width:1280px){
  .page-hero{
    padding:42px 0 28px!important;
  }

  .page-hero h1{
    font-size:clamp(42px,3.8vw,60px)!important;
    line-height:.96!important;
  }

  .page-hero p{
    max-width:650px!important;
    font-size:14px!important;
    line-height:1.7!important;
  }

  .section{
    padding:50px 0!important;
  }

  .section-head{
    margin-bottom:22px!important;
  }

  .section-head h2{
    font-size:clamp(34px,3.2vw,50px)!important;
  }

  .section-head p{
    font-size:13px!important;
  }

  .btn{
    min-height:42px!important;
    padding:0 19px!important;
    font-size:8px!important;
  }
}

/* ---------- HOME PAGE ---------- */
@media (min-width:1280px){
  .v13-hero{
    width:min(1260px,92vw)!important;
    grid-template-columns:minmax(0,1fr) minmax(330px,390px)!important;
    gap:34px!important;
    padding:28px 0 34px!important;
  }

  .v13-hero-copy{
    max-width:570px!important;
    padding-left:8px!important;
  }

  .v13-hero h1{
    font-size:clamp(48px,4.25vw,72px)!important;
    line-height:.94!important;
    margin:13px 0 18px!important;
  }

  .v13-hero p{
    max-width:520px!important;
    font-size:14px!important;
    line-height:1.7!important;
    margin-bottom:22px!important;
  }

  .v13-film{
    width:min(100%,390px)!important;
    height:440px!important;
  }

  .v13-manifesto{
    padding:50px 0!important;
  }

  .v13-manifesto-grid{
    gap:48px!important;
  }

  .v13-manifesto h2,
  .v13-section-head h2,
  .v13-private h2,
  .v13-close h2{
    font-size:clamp(34px,3vw,48px)!important;
  }

  .v13-manifesto-copy p{
    font-size:15px!important;
  }

  .v13-signature-grid,
  .v13-world-grid{
    gap:12px!important;
  }

  .v13-fragrance-card .media{
    height:285px!important;
  }

  .v13-fragrance-card h3{
    font-size:27px!important;
  }

  .v13-world{
    height:285px!important;
  }

  .v13-world-copy h3{
    font-size:29px!important;
  }

  .v13-private{
    min-height:330px!important;
    margin-bottom:50px!important;
  }

  .v13-private-media{
    min-height:330px!important;
  }
}

/* ---------- GENERIC SPLIT HERO (Private Label and similar pages) ---------- */
@media (min-width:1280px){
  .hero{
    height:min(620px,calc(100svh - 100px))!important;
    min-height:540px!important;
    grid-template-columns:46% 54%!important;
    max-width:1440px!important;
  }

  .hero-copy{
    padding:48px 54px!important;
  }

  .hero h1{
    font-size:clamp(46px,4.4vw,70px)!important;
    line-height:.94!important;
  }

  .hero p{
    font-size:14px!important;
    line-height:1.72!important;
  }

  .hero-video{
    min-height:0!important;
    height:100%!important;
  }

  .boutique-panel{
    min-height:390px!important;
    max-width:1120px!important;
  }

  .boutique-media{
    min-height:390px!important;
  }

  .boutique-copy{
    padding:38px 46px!important;
  }

  .boutique-copy h2{
    font-size:clamp(34px,3.2vw,50px)!important;
  }
}

/* ---------- PERFUMES / COLLECTION PRODUCT GRIDS ---------- */
@media (min-width:1280px){
  .collection-page .wrap{
    width:min(1280px,calc(100% - 64px))!important;
  }

  .collection-page .page-hero{
    padding-top:34px!important;
    padding-bottom:24px!important;
  }

  .collection-page .page-hero h1{
    font-size:clamp(40px,3.5vw,56px)!important;
  }

  .collection-group-head h2{
    font-size:clamp(29px,2.4vw,38px)!important;
  }

  .collection-page .product-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;
    gap:10px!important;
    padding:10px!important;
  }

  .collection-page .product-grid .card{
    padding:4px!important;
  }

  .collection-page .product-grid .card-info{
    padding:8px 3px 4px!important;
  }

  .collection-page .product-grid .card h3{
    font-size:17px!important;
  }

  .collection-page .product-grid .price{
    font-size:18px!important;
  }

  .collection-page .product-grid .card-actions .btn{
    min-height:32px!important;
    padding:7px 6px!important;
  }
}

/* ---------- COLLECTIONS LANDING ---------- */
@media (min-width:1280px){
  body.collections-landing .wrap{
    width:min(1260px,calc(100% - 64px))!important;
  }

  body.collections-landing .grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;
    gap:10px!important;
    padding:10px!important;
  }

  body.collections-landing .card h3{
    font-size:18px!important;
  }
}

/* ---------- CANDLES ---------- */
@media (min-width:1280px){
  .candle-hero{
    width:min(1260px,92vw)!important;
    min-height:440px!important;
    grid-template-columns:1fr .72fr!important;
  }

  .candle-copy{
    padding:46px 52px!important;
  }

  .candle-copy h1{
    font-size:clamp(46px,4.2vw,66px)!important;
    margin:12px 0 16px!important;
  }

  .candle-film video{
    width:min(64%,360px)!important;
    max-width:360px!important;
  }

  .candle-intro{
    padding:54px 0!important;
  }

  .candle-intro h2,
  .collection-head h2,
  .candle-lifestyle h2,
  .closing h2{
    font-size:clamp(34px,3.2vw,50px)!important;
  }

  .candle-showcase{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))!important;
    gap:12px!important;
    margin:26px auto 58px!important;
  }

  .candle-showcase .visual{
    height:320px!important;
  }

  .candle-showcase h3{
    font-size:29px!important;
  }

  .candle-lifestyle{
    margin-bottom:60px!important;
  }

  .candle-lifestyle figure{
    height:320px!important;
  }

  .closing{
    padding-bottom:68px!important;
  }
}

/* ---------- SIGNATURE EDITION ---------- */
@media (min-width:1280px){
  .signature-page{
    padding:48px 0 70px!important;
  }

  .signature-page .wrap{
    width:min(1240px,calc(100% - 64px))!important;
  }

  .signature-head{
    max-width:700px!important;
    margin-bottom:26px!important;
  }

  .signature-head h1{
    font-size:clamp(40px,4.3vw,62px)!important;
  }

  .signature-head p{
    font-size:14px!important;
  }

  .signature-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))!important;
    gap:12px!important;
  }

  .signature-card .copy{
    padding:15px!important;
  }

  .signature-card h2{
    font-size:24px!important;
  }

  .signature-card p{
    font-size:12px!important;
  }

  .signature-price{
    font-size:20px!important;
  }

  .signature-actions a,
  .signature-actions button{
    min-height:38px!important;
    font-size:9px!important;
  }
}

/* ---------- THE HOUSE ---------- */
@media (min-width:1280px){
  .hv-wrap{
    width:min(1100px,calc(100% - 64px))!important;
  }

  .hv-hero{
    min-height:66vh!important;
    padding:82px 0 56px!important;
  }

  .hv-hero h1{
    font-size:clamp(48px,5.15vw,82px)!important;
    line-height:.93!important;
    max-width:760px!important;
  }

  .hv-lead{
    max-width:650px!important;
    margin-top:24px!important;
    font-size:clamp(15px,1.1vw,18px)!important;
    line-height:1.65!important;
  }

  .hv-section{
    padding:78px 0!important;
  }

  .hv-grid2{
    gap:64px!important;
  }

  .hv-section h2{
    font-size:clamp(34px,3.6vw,54px)!important;
  }

  .hv-section h3{
    font-size:clamp(26px,2.5vw,38px)!important;
  }

  .hv-copy{
    font-size:15px!important;
    line-height:1.72!important;
  }

  .hv-signature{
    font-size:clamp(23px,2.4vw,34px)!important;
    padding:22px 0!important;
    margin-top:30px!important;
  }

  .hv-timeline{
    margin-top:40px!important;
  }

  .hv-time{
    padding:28px 26px!important;
    min-height:205px!important;
  }

  .hv-time h3{
    font-size:27px!important;
  }

  .hv-time p{
    font-size:14px!important;
  }

  .hv-details{
    margin-top:34px!important;
  }

  .hv-love-grid{
    min-height:620px!important;
  }

  .hv-love-copy{
    padding:58px 54px!important;
  }

  .hv-love-copy h2{
    font-size:clamp(40px,4vw,60px)!important;
  }

  .hv-love-copy .sub{
    font-size:22px!important;
    margin-bottom:26px!important;
  }

  .hv-love-copy p{
    font-size:15px!important;
  }

  .hv-mantra{
    font-size:23px!important;
  }

  .hv-pillars{
    margin-top:40px!important;
  }

  .hv-pillar{
    padding:28px 24px!important;
  }

  .hv-pillar h3{
    font-size:27px!important;
  }

  .hv-trade-card{
    padding:46px!important;
    gap:44px!important;
  }

  .hv-closing{
    padding:82px 0 88px!important;
  }

  .hv-closing h2{
    font-size:clamp(42px,4.5vw,66px)!important;
  }
}

/* ---------- PRODUCT DETAIL ---------- */
@media (min-width:1280px){
  .product-layout{
    width:min(1240px,calc(100% - 64px))!important;
    gap:40px!important;
    padding:42px 0 60px!important;
  }

  .product-carousel .product-image{
    height:min(560px,calc(100vh - 190px))!important;
    min-height:330px!important;
  }

  .product-info h1{
    font-size:clamp(42px,3.8vw,60px)!important;
  }

  .lede{
    font-size:14px!important;
  }

  .notes{
    margin-top:26px!important;
  }

  .note-row{
    padding:16px 0!important;
  }
}

/* ---------- CONTACT / CHECKOUT / FORMS ---------- */
@media (min-width:1280px){
  .contact-card{
    padding:24px!important;
  }

  .contact-card h3{
    font-size:27px!important;
  }

  .field input,
  .field textarea,
  .field select{
    padding:11px!important;
  }

  .field textarea{
    min-height:120px!important;
  }
}

/* ---------- LARGE DESKTOP / ULTRAWIDE ---------- */
@media (min-width:1800px){
  .wrap{
    width:min(1360px,calc(100% - 96px))!important;
  }

  .v13-hero{
    width:min(1320px,90vw)!important;
  }

  .hv-wrap{
    width:min(1140px,calc(100% - 96px))!important;
  }

  .collection-page .wrap,
  body.collections-landing .wrap,
  .signature-page .wrap{
    width:min(1300px,calc(100% - 96px))!important;
  }
}

/* ---------- LAPTOP: retain luxury, avoid cramped scaling ---------- */
@media (min-width:851px) and (max-width:1279px){
  .brand{width:250px!important;height:64px!important}
  header{height:84px!important}
  .nav{height:84px!important}
  .nav-side{gap:18px!important;font-size:9px!important}
  .page-hero h1{font-size:clamp(42px,4.8vw,58px)!important}
  .hv-hero h1{font-size:clamp(48px,6.2vw,76px)!important}
}

/* Mobile and small tablets deliberately keep the existing responsive design. */

/* =========================================================
   MIKHAIL V13.11.22.15 — GLOBAL DESKTOP HEADER ALIGNMENT
   Keeps the shared header/navigation on the same left/right
   guide across every page, regardless of page-specific .wrap widths.
   ========================================================= */
@media (min-width:1101px){
  header .wrap.nav{
    width:calc(100% - 80px)!important;
    max-width:none!important;
    margin-left:40px!important;
    margin-right:40px!important;
  }
}
@media (min-width:851px) and (max-width:1100px){
  header .wrap.nav{
    width:calc(100% - 46px)!important;
    max-width:none!important;
    margin-left:23px!important;
    margin-right:23px!important;
  }
}

/* =========================================================
   MIKHAIL V13.11.22.15A — COLLECTIONS / PERFUMES HEADER LOCK
   These two body classes previously narrowed every .wrap,
   including the injected site header. Lock the shared header
   to the same desktop guide used by the rest of the site.
   ========================================================= */
@media (min-width:1101px){
  body.collections-landing > header > .wrap.nav,
  body.collection-page > header > .wrap.nav{
    width:calc(100% - 80px)!important;
    max-width:none!important;
    margin:0 40px!important;
  }
}
@media (min-width:851px) and (max-width:1100px){
  body.collections-landing > header > .wrap.nav,
  body.collection-page > header > .wrap.nav{
    width:calc(100% - 46px)!important;
    max-width:none!important;
    margin:0 23px!important;
  }
}