@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&display=swap');
@import url('motion.css');
:root{--cream:#f5f0e7;--paper:#fbf8f2;--brown:#4b372b;--gold:#a57b4b;--line:#d8cfc2;--sage:#71806c}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--brown);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}button,input{font:inherit}.header{height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4vw;border-bottom:1px solid var(--line);background:rgba(251,248,242,.95);position:relative;z-index:9}.brand{font-family:Italiana,serif;font-size:1.75rem;letter-spacing:.18em}.nav{display:flex;gap:34px;font-size:.72rem;letter-spacing:.12em}.cart{justify-self:end;font-size:.72rem}.menu{display:none;border:0;background:none}.hero{display:grid;grid-template-columns:42% 58%;min-height:calc(100vh - 82px);background:var(--cream)}.hero-copy{padding:8vw 5vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.overline{text-transform:uppercase;letter-spacing:.18em;font-size:.67rem;color:var(--gold)}.hero h1,.section-title,.page-head h1,.story h1,.missing h1,.empty h1{font-family:Italiana,serif;font-weight:400;line-height:.97}.hero h1{font-size:clamp(4.2rem,8vw,9rem);margin:25px 0}.hero-copy>p:not(.overline){max-width:460px;line-height:1.8;color:#715e51}.hero-visual img{height:calc(100vh - 82px);object-fit:cover}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:1px solid var(--brown);background:transparent;font-size:.72rem;letter-spacing:.08em;cursor:pointer}.button.dark{background:var(--brown);color:white}.hero .button{margin-top:25px}.section{padding:110px 4vw}.section-intro{text-align:center;max-width:660px;margin:0 auto 55px}.section-title{font-size:clamp(3rem,6vw,6rem);margin:12px 0}.section-intro p{line-height:1.8}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px 22px}.card-image{position:relative;overflow:hidden;background:var(--cream)}.card-image img{aspect-ratio:4/5;object-fit:cover;transition:.5s}.card-image:hover img{transform:scale(1.025)}.card-image>span{position:absolute;top:15px;left:15px;background:var(--paper);padding:7px 10px;font-size:.62rem;letter-spacing:.12em}.card>p{text-transform:uppercase;font-size:.62rem;letter-spacing:.14em;color:var(--gold);margin:17px 0 7px}.card h3{font-family:Italiana;font-size:1.55rem;font-weight:400;margin:0 0 10px}.card>div{display:flex;justify-content:space-between;gap:15px}.card>div span{font-size:.75rem;color:#7d6c60;line-height:1.5}.card strong{font-size:.74rem;white-space:nowrap}.ingredient{display:grid;grid-template-columns:58% 42%;background:#e8e0d4}.ingredient img{height:650px;object-fit:cover}.ingredient-copy{padding:6vw;display:flex;flex-direction:column;justify-content:center}.ingredient-copy h2{font-family:Italiana;font-weight:400;font-size:clamp(3rem,6vw,6rem);margin:20px 0}.ingredient-copy p{line-height:1.9}.ritual{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ritual div{padding:55px 4vw;border-right:1px solid var(--line)}.ritual span{font-family:Italiana;font-size:2.5rem;color:var(--gold)}.ritual h3{font-family:Italiana;font-size:1.8rem;font-weight:400}.ritual p{font-size:.8rem;line-height:1.7;color:#76665b}.footer{padding:70px 4vw;background:var(--brown);color:var(--cream);display:flex;justify-content:space-between}.footer strong{font-family:Italiana;font-size:2rem;letter-spacing:.15em}.footer p{font-size:.7rem;opacity:.65}.page-head{text-align:center;padding:90px 4vw 45px}.page-head h1{font-size:clamp(4rem,9vw,9rem);margin:15px 0}.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:45px}.filters button{border:1px solid var(--line);background:transparent;padding:10px 16px;color:var(--brown);font-size:.68rem}.filters button.active{background:var(--brown);color:white}.shop-grid{padding:0 4vw 120px}.product-detail{display:grid;grid-template-columns:56% 44%;min-height:calc(100vh - 82px)}.detail-visual{background:var(--cream)}.detail-visual img{height:calc(100vh - 82px);object-fit:cover;position:sticky;top:0}.detail-info{padding:6vw 5vw}.detail-info h1{font-family:Italiana;font-size:clamp(3rem,5vw,5.5rem);font-weight:400;line-height:1;margin:18px 0}.price{font-size:.9rem}.desc{line-height:1.85;color:#756358;margin:35px 0}.detail-info fieldset{border:0;padding:0;margin:30px 0}.detail-info legend{display:flex;justify-content:space-between;width:100%;font-size:.72rem}.detail-info legend em{font-style:normal;color:var(--gold)}.options{display:flex;gap:8px;margin-top:12px}.options button{border:1px solid var(--line);background:none;padding:12px 18px;color:var(--brown)}.options button.chosen{background:var(--brown);color:white}.purchase{display:grid;grid-template-columns:105px 1fr;gap:10px}.quantity{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid}.quantity button{border:0;background:none}.quantity span{display:grid;place-items:center}.full{width:100%;margin-top:10px}.message{min-height:20px;font-size:.75rem;color:var(--gold)}details{border-top:1px solid var(--line);padding:18px 0;font-size:.78rem}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer}details p,details li{line-height:1.7;color:#76665b}.missing,.empty{text-align:center;padding:15vh 4vw}.missing h1,.empty h1{font-size:clamp(3rem,7vw,7rem)}.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:7vw;padding:0 4vw 110px}.cart-item{display:grid;grid-template-columns:170px 1fr;gap:25px;padding:25px 0;border-top:1px solid var(--line)}.cart-item img{aspect-ratio:4/5;object-fit:cover}.cart-item p{font-size:.68rem;color:var(--gold)}.cart-item h2{font-family:Italiana;font-size:1.7rem;font-weight:400;margin:12px 0}.cart-control{display:flex;gap:12px;align-items:center;margin-top:25px}.cart-control button{width:32px;height:32px;border:1px solid var(--line);background:none}.cart-control .remove{width:auto;border:0;text-decoration:underline;margin-left:10px;font-size:.7rem}.cart-layout aside{border:1px solid var(--line);padding:28px;height:max-content;position:sticky;top:100px}.cart-layout aside h2{font-family:Italiana;font-size:2rem;font-weight:400}.cart-layout aside p{display:flex;justify-content:space-between;font-size:.75rem}.cart-layout aside .total{border-top:1px solid var(--line);padding-top:18px;margin-top:18px;font-size:.9rem}.clear{border:0;background:none;width:100%;text-decoration:underline;margin-top:18px;font-size:.7rem}.story{max-width:950px;margin:auto;padding:11vw 4vw}.story h1{font-size:clamp(4rem,8vw,8rem)}.story>p{max-width:650px;line-height:2;font-size:1rem}.story img{margin-top:60px}.routine-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--cream)}.routine-hero img{height:70vh;object-fit:cover}.routine-hero div{padding:7vw}.routine-hero h1{font-family:Italiana;font-size:clamp(3.5rem,7vw,7rem);font-weight:400;margin:20px 0}.routine-hero p{line-height:1.9}.checkout{max-width:700px;margin:auto;padding:8vw 4vw 12vw}.checkout h1{font-family:Italiana;font-size:clamp(4rem,8vw,8rem);font-weight:400}.checkout label{display:grid;gap:8px;margin:18px 0;font-size:.72rem}.checkout input{background:transparent;border:1px solid var(--line);padding:15px}.checkout small{display:block;margin-top:18px;color:#8b786a}
@media(max-width:800px){.header{height:66px;grid-template-columns:1fr auto auto;gap:12px}.brand{font-size:1.25rem}.menu{display:block}.nav{display:none;position:absolute;top:66px;left:0;right:0;padding:25px;background:var(--paper);flex-direction:column;border-bottom:1px solid var(--line)}.nav.open{display:flex}.hero{grid-template-columns:1fr}.hero-copy{padding:70px 22px;min-height:60vh}.hero h1{font-size:18vw}.hero-visual img{height:58vh}.section{padding:80px 18px}.grid{grid-template-columns:repeat(2,1fr);gap:38px 10px}.card h3{font-size:1.2rem}.card>div{display:block}.card strong{display:block;margin-top:8px}.ingredient{grid-template-columns:1fr}.ingredient img{height:55vh}.ingredient-copy{padding:65px 22px}.ritual{grid-template-columns:1fr}.ritual div{border-right:0;border-bottom:1px solid var(--line)}.footer{padding:50px 22px;display:block}.page-head{padding:60px 20px 35px}.shop-grid{padding:0 18px 80px}.product-detail{grid-template-columns:1fr}.detail-visual img{height:auto;position:static}.detail-info{padding:55px 20px}.detail-info h1{font-size:13vw}.purchase{grid-template-columns:95px 1fr}.cart-layout{grid-template-columns:1fr;padding:0 18px 80px}.cart-item{grid-template-columns:105px 1fr;gap:14px}.cart-item h2{font-size:1.25rem}.cart-layout aside{position:static}.routine-hero{grid-template-columns:1fr}.routine-hero img{height:55vh}.routine-hero div{padding:65px 22px}.story{padding:90px 22px}.checkout{padding:70px 22px}.missing,.empty{padding:15vh 20px}}

/* === mobile navigation + back-to-top refinement === */
@media(max-width:800px){
  .header{position:sticky;top:0;z-index:100;background:rgba(251,248,242,.97);backdrop-filter:blur(12px)}
  body.menu-open{overflow:hidden}
  .nav{display:flex;position:fixed;top:82px;left:14px;right:14px;bottom:auto;padding:34px 24px;background:rgba(245,240,231,.98);border:1px solid var(--line);box-shadow:0 24px 60px rgba(75,55,43,.16);flex-direction:column;gap:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px) scale(.985);transform-origin:top center;transition:opacity .24s,transform .24s,visibility .24s}
  .nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(75,55,43,.14);font-family:Italiana,serif;font-size:28px;letter-spacing:.02em}
  .nav a:last-child{border-bottom:0}.menu{display:block;border:0;background:none;color:var(--brown);font:600 10px 'DM Sans',sans-serif;letter-spacing:.14em;padding:12px}
  .menu[aria-expanded="true"]{color:var(--gold)}
}
@media(max-width:600px){.nav{top:70px}}
.back-to-top{position:fixed;right:20px;bottom:22px;width:46px;height:46px;border:1px solid var(--gold);border-radius:50%;background:rgba(251,248,242,.95);color:var(--brown);display:grid;place-items:center;font-size:17px;z-index:80;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;box-shadow:0 10px 28px rgba(75,55,43,.12)}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}

/* === mobile fixed-menu containing-block safeguard === */
@media(max-width:800px){
  .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fbf8f2}
}


/* === 2026-09 mobile editorial menu redesign === */
@media(max-width:800px){
  .header{
    position:sticky;
    top:0;
    z-index:130;
    background:#fbf8f2;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  body.menu-open{overflow:hidden}
  .menu{
    position:relative;
    min-width:58px;
    height:40px;
    padding:0 12px;
    border:1px solid rgba(75,55,43,.28);
    border-radius:999px;
    background:transparent;
    color:var(--brown);
    font:600 9px/1 'DM Sans',sans-serif;
    letter-spacing:.14em;
    transition:background .22s,color .22s,border-color .22s;
  }
  .menu[aria-expanded="true"]{
    background:var(--brown);
    border-color:var(--brown);
    color:var(--paper);
  }
  .nav{
    display:flex;
    position:fixed;
    top:82px;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    padding:clamp(44px,9vh,78px) 26px 34px;
    background:#f3ede4;
    border:0;
    box-shadow:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .24s ease,transform .24s ease,visibility .24s;
    counter-reset:velaire-nav;
    z-index:120;
  }
  .nav::before{
    content:"VELAIRE  /  MENU";
    display:block;
    margin-bottom:26px;
    color:var(--gold);
    font:600 9px/1 'DM Sans',sans-serif;
    letter-spacing:.22em;
  }
  .nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav a{
    position:relative;
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    min-height:84px;
    padding:0;
    border:0;
    border-bottom:1px solid rgba(75,55,43,.18);
    color:var(--brown);
    font-family:Italiana,serif;
    font-size:clamp(34px,10vw,48px);
    line-height:1;
    letter-spacing:.01em;
  }
  .nav a::before{
    counter-increment:velaire-nav;
    content:"0" counter(velaire-nav);
    color:var(--gold);
    font:600 9px/1 'DM Sans',sans-serif;
    letter-spacing:.14em;
  }
  .nav a::after{
    content:"↗";
    display:block!important;
    color:var(--gold);
    font:400 18px/1 'DM Sans',sans-serif;
    transform:translateX(0);
    transition:transform .2s ease;
  }
  .nav a:active::after{transform:translateX(3px)}
}
@media(max-width:600px){
  .nav{top:70px;padding:38px 22px 30px}
  .nav a{min-height:78px}
}