/* V3.2 — a quieter masthead, moving house ribbon and editorial closing. */
.header{height:96px;padding:0 4.5%;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;border-bottom:1px solid #e3dfd7}
.header .wordmark{position:static;transform:none;justify-self:start;align-items:flex-start;text-align:left}
.header .wordmark>span{font-size:30px;font-weight:450;letter-spacing:4.4px}
.header .wordmark small{font-size:6px;letter-spacing:2.2px;margin-top:10px;color:#776e62}
.header .nav{height:auto;position:static;padding:0;border:0;gap:34px;font-size:9px;letter-spacing:1.1px;background:transparent;box-shadow:none;white-space:nowrap}
.header .nav a{padding:13px 0}
.header .nav a:after{bottom:7px}
.header-tools{gap:20px}
.header-tools .icon-button{width:28px;height:44px}
.header .bag-button{height:44px;gap:8px}
.header .bag-text{display:none}
.header .bag-count{display:inline-flex;min-width:19px;height:19px;border:1px solid #d6d0c5;border-radius:50%;font-size:8px}
.header .bag-count:before,.header .bag-count:after{content:none}
.hero{height:calc(100svh - 126px);min-height:650px;max-height:850px}

.house-ribbon{padding:24px 0 20px;background:var(--paper);border-bottom:1px solid #e2ded5;overflow:hidden}
.house-ribbon-heading{margin:0 6.8%;display:flex;align-items:center;justify-content:space-between;min-height:25px;font-size:8px;letter-spacing:1.8px;color:#7c7368}
.marquee-toggle{display:inline-flex;align-items:center;gap:9px;padding:5px 0 5px 15px;font-size:9px;letter-spacing:.3px;color:#70685c;min-height:30px}
.marquee-control-icon{display:block;width:9px;height:10px;border-inline:2px solid currentColor}
.marquee-toggle[aria-pressed="true"] .marquee-control-icon{width:0;height:0;border:0;border-left:8px solid currentColor;border-block:5px solid transparent}
.house-marquee{overflow:hidden;margin-top:5px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.house-track{display:flex;width:max-content}
.house-group{display:flex;align-items:center;width:max(840px,100vw);flex:none}
.house-group .brand-link{flex:1 0 0;min-height:110px;padding:20px 40px}
.house-group .brand-logo--dior{width:118px}
.house-group .brand-logo--ysl{width:181px}
.house-group .brand-logo--tom{width:170px}
.house-ribbon.is-ready .house-track{animation:house-drift 38s linear infinite}
.house-ribbon.is-paused .house-track,.house-ribbon:focus-within .house-track{animation-play-state:paused}
@media(hover:hover){.house-ribbon:hover .house-track{animation-play-state:paused}}
@keyframes house-drift{to{transform:translateX(-50%)}}

.atelier-footer{padding:45px 6.8% 23px;background:var(--paper);color:#34312b}
.footer-directory{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:50px;padding-bottom:35px}
.footer-identity .wordmark{align-items:flex-start;text-align:left}
.footer-identity .wordmark>span{font-family:var(--sans);font-size:25px;font-weight:450;letter-spacing:3px}
.footer-identity .wordmark small{font-size:6px;letter-spacing:1.8px;margin-top:10px;color:#857b6b}
.footer-identity>p{font-size:11px;line-height:1.8;color:#7b7266;margin-top:17px}
.footer-column{display:flex;align-items:flex-start;flex-direction:column;gap:8px}
.footer-column h2{font-family:var(--sans);font-size:8px;font-weight:500;letter-spacing:1.7px;color:#8a7e6d;margin-bottom:8px}
.footer-column>a,.footer-column .footer-link{font-size:11px;line-height:1.8;padding:0;text-align:left}
.footer-column>a:hover,.footer-column .footer-link:hover{text-decoration:underline;text-underline-offset:4px}
.footer-connect .facebook-link{display:flex;gap:48px;align-items:center}
.footer-connect>p{font-size:10px;color:#81776b}
.footer-connect .footer-link{font-size:10px;color:#81776b;margin-top:3px}
.atelier-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ded8cd;padding-top:18px;color:#7e7569;font-size:8px;letter-spacing:.2px}
.atelier-footer .legal-note{max-width:100%;font-size:8px;line-height:1.8;color:#8a8175;margin:16px 0 0}

@media(max-width:1100px){
  .header{gap:22px;padding-inline:4%;height:88px}
  .header .wordmark>span{font-size:27px;letter-spacing:3.5px}
  .header .nav{gap:24px;font-size:8px;letter-spacing:.8px}
  .header-tools{gap:15px}
  .hero{height:calc(100svh - 118px);min-height:610px;max-height:800px}
}
@media(max-width:980px){
  .header{height:84px;grid-template-columns:1fr auto 1fr;gap:15px}
  .header .mobile-menu{display:flex;width:32px;height:44px;justify-self:start}
  .header .wordmark{justify-self:center;align-items:center;text-align:center}
  .header .nav{display:none;position:absolute;top:100%;left:0;right:0;padding:28px 5%;background:var(--paper);border-block:1px solid #e3dfd7;box-shadow:0 15px 20px #16120c0a;z-index:12;flex-direction:column;align-items:stretch;gap:6px;font-size:11px}
  .header .nav.open{display:flex}
  .header .nav a{padding:12px 0}
  .header .nav a:after{bottom:7px}
  .hero{height:calc(100svh - 114px)}
}
@media(max-width:760px){
  .header{height:80px;padding:0 20px;gap:8px;display:grid}
  .header .wordmark{position:static;transform:none}
  .header .wordmark>span{font-size:24px;letter-spacing:3.2px}
  .header .wordmark small{font-size:5px;letter-spacing:1.5px;margin-top:9px}
  .header .header-tools{gap:8px}
  .header-tools .icon-button{width:25px;height:44px}
  .header .bag-button{gap:5px}
  .header .bag-count{min-width:16px;height:16px;font-size:7px}
  .hero{height:700px;min-height:0;max-height:none}
  .house-ribbon{padding:18px 0 12px}
  .house-ribbon-heading{margin-inline:24px;font-size:6px;letter-spacing:1.4px}
  .marquee-toggle{font-size:8px;gap:7px}
  .house-group{width:780px}
  .house-group .brand-link{min-height:97px;padding:20px 28px}
  .house-group .brand-logo--dior{width:106px}
  .house-group .brand-logo--ysl{width:166px}
  .house-group .brand-logo--tom{width:155px}
  .atelier-footer{padding:34px 25px 24px}
  .footer-directory{grid-template-columns:1fr 1fr;gap:32px 20px;padding-bottom:29px}
  .footer-identity{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px}
  .footer-identity .wordmark>span{font-size:20px;letter-spacing:2.1px}
  .footer-identity .wordmark small{font-size:5px;letter-spacing:1.2px;margin-top:8px}
  .footer-identity>p{font-size:8px;line-height:1.8;margin:0}
  .footer-column{gap:8px}
  .footer-column h2{font-size:7px;letter-spacing:1.4px;margin-bottom:4px}
  .footer-column>a,.footer-column .footer-link{font-size:10px}
  .footer-connect .facebook-link{gap:30px}
  .footer-connect>p,.footer-connect .footer-link{font-size:9px}
  .atelier-footer .footer-bottom{font-size:7px;gap:8px 20px;flex-wrap:wrap;padding-top:17px}
  .atelier-footer .footer-bottom>span:first-child{width:auto}
  .atelier-footer .footer-bottom>a{margin-left:auto}
  .atelier-footer .legal-note{font-size:7px;margin-top:14px;line-height:1.8}
}
@media(max-width:380px){
  .header{padding-inline:15px}
  .header .wordmark>span{font-size:22px;letter-spacing:2.6px}
  .header .wordmark small{font-size:4.5px;letter-spacing:1.3px}
  .header .header-tools{gap:5px}
  .hero{height:650px}
  .footer-identity{align-items:flex-start;flex-direction:column;gap:15px}
  .footer-identity>p{font-size:10px}
}
@media(max-width:360px){.hero h1{font-size:44px}.hero h1 em{font-size:1em}}
@media(prefers-reduced-motion:reduce){
  .house-ribbon.is-ready .house-track{animation:none}
  .house-marquee{overflow-x:auto;mask-image:none}
  .house-group--duplicate,.marquee-toggle{display:none}
}

/* A persistent contact link, shared by the home, collection and product pages. */
.whatsapp-float{position:fixed;right:28px;bottom:28px;z-index:30;display:flex;align-items:center;justify-content:center;gap:11px;min-height:54px;padding:0 22px;border:1px solid #ffffff30;border-radius:999px;background:#185a46;color:#fff;font-family:var(--sans);font-size:11px;letter-spacing:.5px;line-height:1;box-shadow:0 5px 22px #102d242b;transition:background .2s,transform .2s}
.whatsapp-float svg{width:25px;height:25px;fill:currentColor;stroke:none}
.whatsapp-float:hover{background:#104333;transform:translateY(-2px)}
.whatsapp-float:focus-visible{outline:2px solid #185a46;outline-offset:4px}
.hero-bottom{padding-right:155px}
body.modal-open .whatsapp-float{visibility:hidden}
body:has(.toast.visible) .whatsapp-float{bottom:90px}
@media(max-width:760px){
  .hero-bottom{padding-right:66px}
  .whatsapp-float{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:54px;height:54px;padding:0;gap:0}
  .whatsapp-float svg{width:27px;height:27px}
  .whatsapp-float>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}.whatsapp-float:hover{transform:none}}