@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");
:root,.dark{--background:#f8f6f1;--foreground:#352c25;--border:#dcd5ca;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button{background:none;border:0;color:inherit}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.12}h1{font-size:clamp(42px,5vw,76px);letter-spacing:-.045em}h2{font-size:clamp(32px,3vw,46px);letter-spacing:-.035em}h3{font-size:23px;letter-spacing:-.025em}em,.italic{font-weight:400;font-style:italic}p{color:#766c61;line-height:1.8}small{font-size:12px;letter-spacing:.14em;line-height:1.6;display:block}button:focus-visible,a:focus-visible{outline:2px solid #987357;outline-offset:5px}.announcement{height:35px;background:#3d3930;color:#f3eee6;text-align:center;font-size:12px;letter-spacing:.09em;display:flex;align-items:center;justify-content:center;gap:24px}.announcement span{opacity:.6;font-size:11px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#f8f6f1ee;position:sticky;top:0;z-index:30;backdrop-filter:blur(16px);border-bottom:1px solid #dcd5ca70}.logo{font-family:Georgia,serif;font-size:35px;line-height:1.05;letter-spacing:-.075em;white-space:nowrap}.logo span{font:8px/2 Arial,sans-serif;letter-spacing:.27em;display:block;text-align:center;margin-top:8px}.desktop-nav{display:flex;align-items:center;gap:36px;font-size:14px}.desktop-nav a{display:flex;align-items:center;gap:6px}.desktop-nav .active{border-bottom:1px solid #6c5a44}.header-icons{display:flex;align-items:center;gap:23px}.header-icons button{position:relative;display:flex}.bag-count{font-size:11px;margin-left:5px}.mobile-toggle{display:none!important}.nav-products{position:relative;padding:34px 0}.mega{visibility:hidden;opacity:0;transform:translateY(8px);position:absolute;top:75px;left:-32px;padding:30px;background:#f8f6f1;width:340px;box-shadow:0 15px 25px #30251a12;transition:.25s}.mega small{font-size:10px;margin-bottom:20px}.mega a{font-family:Georgia,serif;font-size:25px;padding:10px 0;justify-content:space-between}.nav-products:hover .mega,.nav-products:focus-within .mega{visibility:visible;opacity:1;transform:none}.hero{height:min(780px,calc(100svh - 135px));min-height:590px;position:relative;color:#fffaf1;overflow:hidden}.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-image{object-position:center 56%;animation:slowzoom 20s ease-in-out infinite alternate}.hero-shade{background:linear-gradient(90deg,#211d1985 0%,#211d1930 50%,#211d1900),linear-gradient(0deg,#211d195c,transparent 30%)}.hero-content{position:relative;padding:10% 7%;animation:reveal 1s both;max-width:900px}.eyebrow{font-size:11px;letter-spacing:.22em;display:flex;align-items:center;gap:12px}.eyebrow span{width:24px;height:1px;background:currentColor}.hero h1{font-size:clamp(62px,6.5vw,104px);letter-spacing:-.045em;line-height:1.04;margin:26px 0}.hero h1 span{display:block}.hero p{color:#f4eee3cf;font-size:15px}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:#3e392f;color:#fffaf1;min-height:54px;padding:15px 25px;font-size:13px;letter-spacing:.035em;border:1px solid transparent;transition:background .25s,transform .25s}.button:hover{background:#665744;transform:translateY(-2px)}.button.light{background:#f5f0e6;color:#3e392f}.button.light:hover{background:white}.button.outline{border-color:#827467;background:transparent;color:#3e392f}.full{width:100%}.hero-link{display:flex;align-items:center;gap:16px;font-size:13px;border-bottom:1px solid #fff6;padding-bottom:8px}.hero-bottom{position:absolute;bottom:28px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.13em}.slide-controls{display:flex;gap:18px;align-items:center}.slide-controls button{display:flex;align-items:center;gap:10px;font-size:10px;color:#fffb}.slide-controls i{width:20px;height:1px;background:#fff6;transition:width .5s}.slide-controls button[aria-pressed=true] i{width:48px;background:#fff}.manifesto-bar{padding:24px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);font-size:12px;letter-spacing:.035em}.manifesto-bar i{font-style:normal;font-size:19px;color:#8f7c60}.section{padding:90px 6%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:40px}.section-heading small{margin-bottom:15px;color:#867761}.section-heading p{font-size:14px}.text-link{display:inline-flex;align-items:center;gap:20px;font-size:13px;border-bottom:1px solid #aa9a86;padding-bottom:8px}.collection-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}.collection-panel{height:490px;position:relative;overflow:hidden;color:#f9f5ed}.collection-panel img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}.collection-panel:hover img{transform:scale(1.04)}.collection-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#211a14b8,transparent 85%)}.collection-panel>div{position:absolute;z-index:1;bottom:35px;left:35px;right:35px}.collection-panel h3{font-size:51px;margin:15px 0}.collection-panel p{color:#e8dfd3;font-size:14px}.collection-panel span{display:flex;justify-content:space-between;margin-top:22px;border-top:1px solid #ffffff44;padding-top:18px;font-size:13px}.madre img{object-position:50% 58%}.product-row{display:grid;grid-auto-columns:calc((100% - 72px)/4);grid-auto-flow:column;gap:24px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}.product-card{min-width:0;scroll-snap-align:start}.product-art{height:320px;display:block;position:relative;overflow:hidden;background:#e8e1d6}.product-art img{height:100%;width:100%;object-fit:cover;transition:transform .8s}.product-art:hover img{transform:scale(1.06)}.art-label,.art-caption{position:absolute;z-index:1;font-size:9px;letter-spacing:.1em}.art-label{top:18px;left:18px;color:#f4eee5;text-shadow:0 1px 5px #000}.art-caption{bottom:0;left:0;right:0;padding:12px 18px;display:flex;justify-content:space-between;background:#f8f6f1dc;backdrop-filter:blur(5px)}.badge{position:absolute;right:14px;top:40px;background:#f8f6f1e8;padding:3px 9px;font-size:10px}.product-line{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:20px}.product-line small{font-size:10px;letter-spacing:.12em;color:#8a7b68;margin-bottom:5px}.product-line h3{font-size:23px}.round{width:32px;height:32px;display:grid;place-items:center;border:1px solid #cfc4b5;border-radius:50%;transition:.3s;flex-shrink:0}.round:hover{background:#3e392f;color:white}.product-card p{font-size:13px;margin:10px 0;line-height:1.6}.price{font-size:12px;color:#645748}.story{display:grid;grid-template-columns:1fr 1fr;background:#eae5dc;min-height:640px;margin-top:30px}.story-photo img{width:100%;height:640px;object-fit:cover}.story-copy{padding:100px 13%;display:flex;flex-direction:column;align-items:start;justify-content:center}.story-copy h2{font-size:62px;margin:28px 0}.story-copy p{font-size:15px;margin-bottom:20px}.story-copy a{margin-top:12px}.discovery{text-align:center}.discovery h2{margin-top:15px}.families{display:flex;justify-content:center;gap:12px;margin:30px 0 40px;flex-wrap:wrap}.families button{border:1px solid #cfc4b5;border-radius:50px;padding:8px 24px;font-size:14px;transition:.25s}.families .selected,.families button:hover{background:#464335;color:white;border-color:#464335}.discovery .product-row{text-align:left}.cinematic{height:560px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;color:#fff7ea;overflow:hidden;text-align:center}.cinematic img{position:absolute;width:100%;height:100%;object-fit:cover;filter:brightness(.5);z-index:-1}.cinematic h2{font-size:clamp(42px,5.5vw,82px)}.cinematic p{color:#e4dace}.quality{border-top:1px solid var(--border)}.quality>div{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:30px}.quality article{display:flex;gap:25px;border-bottom:1px solid var(--border);padding:0 0 25px;margin-bottom:25px}.quality article>span{font-size:12px;color:#958674}.quality article p{font-size:14px;margin-top:10px}.newsletter{background:#e8e2d7;padding:65px 6%;display:grid;grid-template-columns:1.3fr 1fr;gap:90px;align-items:center}.newsletter h2{font-size:36px;margin:15px 0}.newsletter p{font-size:14px}.newsletter form{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid #9d8f7e;padding-bottom:8px;position:relative}.newsletter input{background:none;border:0;padding:14px 0;outline:none}.newsletter form small{position:absolute;top:70px;font-size:10px;letter-spacing:0;color:#807362}footer{background:#39382f;color:#f5f0e6;padding:65px 6% 20px}.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px}.footer-top .logo{font-size:43px;display:inline-block}.footer-top p{font-size:13px;margin-top:25px;color:#c0baab}.footer-top small{color:#bbb4a3;font-size:10px;margin-bottom:23px}.footer-top>div>a:not(.logo){display:block;font-size:13px;margin:10px 0}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;padding-top:20px;font-size:10px;color:#c3bcae}.footer-bottom>div{display:flex;gap:25px}.whatsapp{position:fixed;bottom:25px;right:25px;width:51px;height:51px;background:#4b5946;color:#fff;border:1px solid #fff5;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:35;box-shadow:0 4px 15px #0002}.whatsapp span{position:absolute;white-space:nowrap;right:60px;background:#4b5946;padding:8px 15px;border-radius:3px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.whatsapp:hover span,.whatsapp:focus-visible span{opacity:1}.page-intro{padding:65px 6% 50px;text-align:center;border-bottom:1px solid var(--border)}.page-intro h1{margin:15px 0 20px}.catalog-layout{display:grid;grid-template-columns:205px 1fr;gap:50px;padding:45px 5% 90px}.catalog-sidebar{align-self:start;position:sticky;top:135px;font-size:13px}.catalog-sidebar>div{margin:27px 0}.catalog-sidebar h3{font-size:23px;margin-bottom:12px}.catalog-sidebar a,.catalog-sidebar button{display:block;margin:6px 0;color:#786c5c}.catalog-sidebar .active{color:#352c25;text-decoration:underline}.catalog-sidebar small{font-size:10px}.catalog-main>section{scroll-margin-top:125px;margin-bottom:70px}.catalog-main h2{font-size:47px;margin:10px 0}.catalog-main section>p{font-size:14px;margin-bottom:30px}.catalog-toolbar{display:flex;justify-content:space-between;font-size:13px;margin-bottom:35px;color:#80735f}.catalog-toolbar label{display:flex;align-items:center;gap:10px}.catalog-toolbar select{background:none;border:0}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 22px}.product-grid .product-art{height:280px}.breadcrumb{padding:26px 6%;font-size:12px;color:#8d7c68}.detail{padding:0 6% 65px;display:grid;grid-template-columns:1.1fr 1fr;gap:7%}.detail-image{position:relative;width:100%;height:680px;padding:0;overflow:hidden}.detail-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.detail-image:hover img{transform:scale(1.04)}.detail-image>span{position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;padding:14px;background:#fff9;font-size:11px}.thumbnails{display:flex;gap:12px;margin-top:15px}.thumbnails button{width:70px;height:80px;padding:4px;border:1px solid transparent}.thumbnails button[aria-pressed=true]{border-color:#87745b}.thumbnails img{width:100%;height:100%;object-fit:cover}.detail-copy{padding-top:25px;align-self:start;position:sticky;top:120px}.detail-copy h1{margin:16px 0 20px;font-size:56px}.detail-price{margin-bottom:25px}.detail-copy>p{font-size:16px}.note-tag{display:inline-block;margin:20px 0 30px;background:#eae5da;padding:5px 14px;font-size:12px}.purchase{display:flex;gap:12px;margin-bottom:12px}.purchase>.button{flex:1}.quantity{display:inline-flex;border:1px solid #cfc4b5;align-items:center;height:42px}.quantity button{width:35px;display:grid;place-items:center}.quantity span{min-width:26px;text-align:center;font-size:14px}.purchase .quantity{height:54px}.purchase-note{font-size:12px!important;margin:20px 0}.detail-copy [data-slot=accordion-trigger]{font-size:14px;padding:21px 0}.detail-copy [data-slot=accordion-content]{color:#766c61;line-height:1.8}.product-story{text-align:center;background:#e9e3d8}.product-story h2{margin:20px 0}.product-story p{max-width:610px;margin:auto}.narrow{max-width:850px;margin:auto;min-height:450px}.narrow h1{margin:20px 0 30px;font-size:50px}.narrow h2{margin:30px 0 20px}.cart-sheet{padding:38px!important;width:min(100%,500px)!important;max-width:500px!important;overflow:auto}.cart-sheet [data-slot=sheet-title]{font-family:Georgia,serif;font-size:30px;font-weight:400}.shipping-progress{margin:25px 0;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.shipping-progress p{font-size:13px;color:#645c4b}.track{height:3px;background:#ded6ca;margin:15px 0}.track span{height:100%;display:block;background:#6a7658;transition:width .5s}.shipping-progress small{font-size:11px;letter-spacing:0;color:#8e8271}.bag-line{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--border);position:relative}.bag-line img{width:75px;height:100px;object-fit:cover}.bag-line small{font-size:9px}.bag-line h3{font-size:21px;margin:5px 0}.bag-line span{font-size:12px}.bag-line .quantity{display:flex;width:max-content;height:29px;margin-top:10px}.remove{align-self:end;margin-left:auto;font-size:10px;text-decoration:underline}.totals{display:flex;justify-content:space-between;margin:22px 0;font-size:14px}.centered{display:flex;justify-content:center;margin:20px auto;width:max-content}.empty{text-align:center;padding:35px 0}.empty p{margin:20px 0}.coupon{margin:30px 0}.coupon label{font-size:14px}.coupon>div{display:flex;margin-top:10px}.coupon input{min-width:0;flex:1}.coupon button{border:1px solid var(--border);padding:10px 20px}.coupon p{font-size:12px}.checkout{display:grid;grid-template-columns:1.2fr 1fr;gap:10%}.checkout h1{font-size:50px;margin:15px 0}.checkout form h3{margin:35px 0 20px}.checkout form label,.profile label{display:block;font-size:13px;margin-bottom:18px}.checkout input,.checkout select,.profile input,.coupon input,.search-dialog>input{display:block;width:100%;border:1px solid #cec3b3;padding:12px;background:transparent;border-radius:0;margin-top:7px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.setup-note{font-size:13px;color:#766c61;border:1px solid #cec3b3;padding:18px;margin:20px 0}.checkout aside{background:#ede8df;padding:30px;align-self:start}.checkout aside .full,.checkout aside .centered{display:none}.underlined{text-decoration:underline}.profile{margin:40px 0}.muted{font-size:13px;margin-top:25px}.search-dialog{max-width:700px!important;padding:35px!important}.search-results{max-height:55vh;overflow:auto}.search-results a{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--border);padding:18px 0}.search-results img{width:55px;height:65px;object-fit:cover}.search-results small{font-size:10px}.search-results span{font-size:12px}.search-results svg{margin-left:auto}.zoom-image{width:100%;max-height:70vh;object-fit:contain}.mobile-nav-link{padding:8px 22px;font-family:Georgia,serif;font-size:25px}.newsletter form:focus-within{outline:1px solid #8f7c60;outline-offset:5px}@keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.07)}}@media(min-width:1600px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1000px){.desktop-nav{gap:20px}.hero-content{padding-top:13%}.hero-actions{gap:20px}.product-row{grid-auto-columns:calc((100% - 40px)/3);gap:20px}.story-copy{padding:60px 12%}.story-copy h2{font-size:49px}.catalog-layout{grid-template-columns:160px 1fr;gap:30px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.newsletter{gap:35px}.newsletter h2{font-size:30px}.footer-top{gap:30px}.checkout{gap:5%}.detail{gap:5%}.detail-image{height:570px}.detail-copy h1{font-size:44px}}@media(max-width:700px){.announcement{font-size:9px;letter-spacing:.02em;height:30px}.announcement span{display:none}.header{height:78px;padding:0 5%}.logo{font-size:29px}.logo span{font-size:6px}.desktop-nav{display:none}.header-icons{gap:17px}.header-icons svg{width:19px}.mobile-toggle{display:flex!important}.hero{height:680px;min-height:0;max-height:calc(100svh - 108px)}.hero-image{object-position:65% center}.hero-shade{background:linear-gradient(90deg,#211d1990,#211d191a)}.hero-content{padding:70px 7%}.hero h1{font-size:62px;margin-top:25px}.hero p{font-size:13px}.hero-actions{align-items:start;flex-direction:column;gap:20px;margin-top:27px}.hero-actions .button{min-height:48px;font-size:12px}.hero-bottom>span{display:none}.hero-bottom>a{font-size:8px}.manifesto-bar{gap:15px;overflow:hidden;justify-content:center;padding:18px 4%;font-size:10px}.manifesto-bar span{white-space:nowrap}.manifesto-bar span:nth-of-type(n+3),.manifesto-bar i:nth-of-type(n+2){display:none}.section{padding:55px 6%}.section-heading{display:block;margin-bottom:28px}.section-heading p{margin-top:20px;font-size:13px}.section-heading .text-link{margin-top:20px}.section-heading h2{font-size:34px}.collection-grid{grid-template-columns:1fr;gap:20px}.collection-panel{height:420px}.collection-panel>div{left:25px;right:25px;bottom:25px}.collection-panel h3{font-size:46px}.collection-panel small{font-size:10px}.product-row{grid-auto-columns:76%;gap:20px}.product-art{height:340px}.story{grid-template-columns:1fr}.story-photo img{height:410px}.story-copy{padding:50px 8%}.story-copy h2{font-size:51px}.story-copy p{font-size:14px}.families{gap:8px}.families button{padding:7px 16px;font-size:12px}.cinematic{height:470px;padding:30px}.cinematic h2{font-size:48px}.quality>div{grid-template-columns:1fr;gap:35px}.quality h2{font-size:32px}.newsletter{grid-template-columns:1fr;padding:45px 6% 85px;gap:25px}.newsletter h2{font-size:31px}.newsletter form small{font-size:10px}.footer-top{grid-template-columns:1fr 1fr;gap:35px}.footer-top>div:first-child{grid-column:1/-1}.footer-bottom{flex-wrap:wrap;gap:18px}.footer-bottom>div{margin-right:50px}.whatsapp{bottom:18px;right:18px;width:46px;height:46px}.catalog-layout{display:block;padding:25px 6% 60px}.catalog-sidebar{display:none}.product-grid{gap:30px 15px}.product-grid .product-art{height:240px}.product-grid .product-line h3{font-size:20px}.product-grid .product-card p{font-size:12px}.product-grid .art-label{font-size:7px;left:10px}.product-grid .art-caption{padding:10px;font-size:8px}.product-grid .badge{font-size:8px}.page-intro{padding:45px 6% 35px}.page-intro h1{font-size:48px}.page-intro p{font-size:14px}.catalog-main h2{font-size:38px}.detail{grid-template-columns:1fr;gap:25px}.detail-image{height:470px}.detail-copy{position:static;padding-top:10px}.detail-copy h1{font-size:45px}.detail-image>span{font-size:9px}.breadcrumb{font-size:10px}.checkout{grid-template-columns:1fr;gap:40px}.checkout h1,.narrow h1{font-size:40px}.checkout aside{padding:22px}.cart-sheet{padding:28px!important}.cart-sheet [data-slot=sheet-title]{font-size:27px}.bag-line{gap:12px}.bag-line h3{font-size:19px}.search-dialog{padding:25px!important}.hero-content .eyebrow{font-size:9px}.form-grid{gap:0 12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.scroll-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.scroll-reveal.revealed{opacity:1;transform:none}.product-card p{font-size:16px}.price,.text-link,.button,.hero-link,.desktop-nav,.purchase-note,.bag-line span,.coupon label{font-size:14px}.product-line small,.art-caption,.badge,.shipping-progress small,.footer-top small,.footer-top>div>a:not(.logo),.footer-bottom{font-size:12px}.product-grid .product-card p{font-size:15px}.form-grid label,.checkout form label,.profile label{font-size:14px}.cinematic{isolation:isolate}@media(max-width:700px){.product-grid .product-art{height:230px}.product-grid .art-caption{font-size:10px}.product-line h3{font-size:22px}.product-grid .product-line h3{font-size:20px}.product-grid .product-card p{font-size:14px}.product-grid .price{font-size:12px}.hero-actions .button,.hero-link{font-size:14px}}



:root {
  --nature-green: #173b2d;
  --nature-green-soft: #2f5a45;
  --nature-cream: #f7f4eb;
  --nature-gold: #c79a55;
  --nature-gold-soft: #e0bd7b;
  --nature-ink: #22382d;
}

body {
  background: var(--nature-cream);
  color: var(--nature-ink);
}

.announcement {
  background: var(--nature-green);
  color: #f5f0e5;
}

.header {
  background: rgba(23, 59, 45, 0.96);
  color: #f7f4eb;
  border-bottom-color: rgba(199, 154, 85, 0.42);
}

.logo,
.footer-top .logo {
  color: var(--nature-gold-soft);
}

.logo span {
  color: #efe0bf;
}

.desktop-nav .active {
  border-bottom-color: var(--nature-gold);
}

.desktop-nav a:hover,
.header-icons button:hover,
.header-icons a:hover {
  color: var(--nature-gold-soft);
}

.mega {
  border-top-color: var(--nature-gold);
  background: var(--nature-cream);
  color: var(--nature-ink);
  border-radius: 16px;
}

.button {
  background: var(--nature-green);
  color: #f7f4eb;
}

.button:hover {
  background: var(--nature-green-soft);
}

.button.light {
  background: var(--nature-gold);
  color: #203528;
}

.button.light:hover {
  background: var(--nature-gold-soft);
}

.text-link,
.hero-link,
.underlined {
  color: var(--nature-green-soft);
}

.hero-link:hover,
.text-link:hover {
  color: var(--nature-gold);
}

.section-heading small,
.page-intro small,
.discovery > small,
.quality > small,
.story-copy > small {
  color: var(--nature-green-soft);
}

.collection-panel::after {
  background: linear-gradient(180deg, transparent 42%, rgba(23, 59, 45, 0.86));
}

.collection-panel {
  border-radius: 16px;
}

.collection-panel > div {
  color: #f7f4eb;
}

.collection-panel > div p,
.collection-panel > div small {
  color: rgba(247, 244, 235, 0.82);
}

.story-page {
  background: #f7f4eb;
}

.story-cards {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0;
  padding: 0 0 0;
  background: #f7f4eb;
}

.story-card {
  position: relative;
  width: min(92vw, 1280px);
  aspect-ratio: 3.25 / 1;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  box-shadow: none;
  border-bottom: 1px solid rgba(54, 71, 56, 0.12);
}

.story-card::before,
.story-card::after {
  content: '';
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.story-card::before {
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 244, 235, .9), transparent);
}

.story-card::after {
  inset: auto -8% -42px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(247, 244, 235, .98) 0 34%, rgba(247, 244, 235, .72) 49%, transparent 72%);
  filter: blur(8px);
  transform: rotate(-1deg);
}

.story-card + .story-card {
  margin-top: -8px;
}

.story-banner-card-alt .story-hero-copy {
  transform: translateX(6px);
}

.story-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.story-card-copy {
  position: relative;
  z-index: 5;
  width: 37%;
  padding: clamp(24px, 4vw, 58px) 0 clamp(24px, 4vw, 58px) clamp(4%, 6vw, 80px);
  color: #304332;
}

.story-hero-copy {
  width: min(52%, 620px);
  margin: 0 auto;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  color: #2f4134;
}

.story-card-copy small {
  color: #6f704f;
  font-size: 10px;
  letter-spacing: .18em;
}

.story-hero-copy small {
  color: rgba(49, 59, 46, 0.8);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.story-card-copy h2 {
  margin: 12px 0 16px;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: .98;
  color: #3d4630;
}

.story-hero-copy h2 {
  margin: 18px 0 16px;
  font-size: clamp(42px, 4vw, 84px);
  line-height: 0.92;
  color: #2f4134;
  font-weight: 400;
}

.story-card-copy p {
  max-width: 330px;
  color: #5d604d;
  font-size: 13px;
  line-height: 1.55;
}

.story-hero-copy p {
  max-width: 540px;
  color: rgba(47, 65, 52, 0.9);
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.4;
  font-family: Georgia, serif;
  font-style: italic;
}

.story-card-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 14% -16% 10% -8%;
  background: radial-gradient(ellipse, rgba(247, 244, 235, .88), rgba(247, 244, 235, .44) 55%, transparent 76%);
  filter: blur(11px);
}

.story-card-copy p {
  position: relative;
}

.story-card-note {
  position: relative;
  margin-top: clamp(48px, 7vw, 92px);
  padding-left: 22px;
  border-left: 1px solid #aa7d2d;
}

.story-card-note strong {
  display: block;
  font: 400 clamp(28px, 3vw, 45px)/1 Georgia, serif;
  color: #65502d;
}

.story-card-note span {
  display: block;
  margin: 7px 0;
  font-size: 11px;
  letter-spacing: .16em;
}

.story-card-caption {
  display: block;
  margin-top: 120px;
  color: #6f704f;
  font-size: 10px;
  letter-spacing: .18em;
}

.story-card-boundaries .story-card-copy,
.story-card-method .story-card-copy,
.story-card-questions .story-card-copy,
.story-card-today .story-card-copy {
  width: 40%;
}

.story-card-boundaries .story-card-copy h2,
.story-card-method .story-card-copy h2,
.story-card-questions .story-card-copy h2,
.story-card-today .story-card-copy h2 {
  font-size: clamp(30px, 2.8vw, 46px);
}

.story-card-formula .button {
  margin-top: 22px;
}

.formula-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.formula-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(101, 80, 45, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #4d4b39;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 18px 24px;
  margin-top: 26px;
  max-width: 470px;
}

.stat-grid div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-grid strong {
  font: 400 clamp(28px, 3vw, 42px) / 1 Georgia, serif;
  color: #6a5b3c;
}

.stat-grid span {
  color: #4b4f3d;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.question-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.question-list div {
  padding: 12px 18px;
  border: 1px solid rgba(101, 80, 45, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #4d4b39;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story-card-copy-center {
  width: min(42%, 500px);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.story-card-copy-center::before {
  inset: 4% -20% 2%;
}

.story-card-copy-center p {
  margin: 0 auto;
}

.story-card-copy-center .button {
  margin-top: 22px;
}

.story-card-note::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -22px -30px;
  background: radial-gradient(ellipse, rgba(247, 244, 235, .8), transparent 72%);
  filter: blur(8px);
}

.story-card-origin .story-card-copy,
.story-card-craft .story-card-copy,
.story-card-world .story-card-copy {
  width: 38%;
  margin-left: 0;
  padding-left: clamp(4%, 6vw, 80px);
  padding-right: 0;
}

.story-card-formula .story-card-copy {
  width: 38%;
  margin-left: 0;
  padding-left: clamp(4%, 6vw, 80px);
}

/* Hero CTA uses the real HTML label; no pseudo-text replacement. */

/* Keep the hero as one clean editorial frame; the reference has no lower utility strip. */
.hero-shade {
  background: linear-gradient(90deg, rgba(31, 25, 18, .38), rgba(31, 25, 18, .05) 68%, transparent),
    linear-gradient(0deg, rgba(31, 25, 18, .16), transparent 38%);
}

.hero-content {
  padding: 7% 7%;
}

.kinder-tomorrow,
.hero:is(.slide-0, .slide-1, .slide-2) h1,
.hero:is(.slide-0, .slide-1, .slide-2) h1::after {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.kinder-tomorrow {
  font-style: italic;
  color: #e0b76b;
  letter-spacing: -0.02em;
}

.hero:is(.slide-0, .slide-1, .slide-2) h1::after {
  font-size: clamp(40px, 5vw, 72px);
  line-height: .96;
  color: #e0b76b;
  font-style: italic;
}

.hero-bottom {
  display: none;
}

.hero:is(.slide-0, .slide-1, .slide-2) .hero-actions .button:hover {
  background: var(--nature-gold);
  border-color: var(--nature-gold);
  color: var(--nature-green);
}

@media (max-width: 700px) {
  .hero-content {
    padding: 54px 7%;
  }

  .hero:is(.slide-0, .slide-1, .slide-2) h1::after {
    font-size: clamp(36px, 10vw, 52px);
  }
}

/* =========================================================
   STATIC HTML VERSION - shared interaction components
   ========================================================= */
.site-drawer,.site-modal{display:none}
.site-drawer.open,.site-modal.open{display:block}
.drawer-backdrop,.modal-backdrop{position:fixed;inset:0;background:#211d1970;z-index:80;backdrop-filter:blur(3px)}
.site-drawer-panel{position:fixed;right:0;top:0;bottom:0;width:min(500px,94vw);background:var(--background);z-index:81;padding:38px;overflow:auto;box-shadow:-20px 0 50px #0002}
.site-modal-panel{position:fixed;z-index:81;left:50%;top:50%;transform:translate(-50%,-50%);width:min(700px,92vw);max-height:88vh;overflow:auto;background:var(--background);padding:35px}
.close-ui{position:absolute;right:20px;top:18px;font-size:25px;line-height:1}
.search-dialog input{display:block;width:100%;border:1px solid #cec3b3;padding:12px;background:transparent;margin:25px 0}
.search-results a{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--border);padding:18px 0}
.search-results img{width:55px;height:65px;object-fit:cover}
.search-results svg{margin-left:auto}
.mobile-panel{display:flex;flex-direction:column;gap:10px}
.mobile-nav-link{padding:8px 22px;font-family:Georgia,serif;font-size:25px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:100;background:#39382f;color:#fff;padding:14px 22px;box-shadow:0 8px 30px #0003}
.catalog-banner{width:100%;height:280px;object-fit:cover;margin:20px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.story-page .story-cards{padding-top:0}
.story-page .story-card{margin-bottom:0}
.no-results{padding:30px 0;color:#766c61}
@media(max-width:700px){
  .site-drawer-panel{padding:28px}
  .site-modal-panel{padding:25px}
  .catalog-banner{height:230px}
}

details{border-bottom:1px solid var(--border);padding:20px 0}
details summary{cursor:pointer;font-family:Georgia,serif;font-size:18px}
.faq-list{margin-top:30px}

/* =========================================================
   VISUAL FIDELITY PATCH
   Restores the supplied site's editorial typography, imagery
   and restrained nature-luxury treatment.
   ========================================================= */

/* The campaign type uses Cormorant Garamond for its large editorial moments. */
.hero h1,
.cinematic h2,
.story-copy h2,
.collection-panel h3,
.page-intro h1,
.catalog-main h2,
.detail-copy h1,
.section-heading h2,
.quality h2,
.product-story h2,
.narrow h1,
.logo {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* The missing campaign photograph belongs behind the cinematic ritual copy. */
.cinematic {
  min-height: 560px;
  height: min(620px, 62vw);
  background:
    linear-gradient(90deg, rgba(23, 27, 20, .18), rgba(23, 27, 20, .04)),
    #314232;
}
.cinematic > img {
  content: none;
  display: block;
  z-index: 0;
  filter: brightness(.54) saturate(.88);
  object-position: center center;
}
.cinematic > *:not(img) {
  position: relative;
  z-index: 1;
}
.cinematic > small {
  font-size: 12px;
  letter-spacing: .22em;
}
.cinematic > small::after {
  content: none;
}
.cinematic > h2 {
  font-size: clamp(58px, 7vw, 104px);
  font-weight: 500;
  letter-spacing: -.045em;
  text-shadow: 0 2px 22px rgba(20,24,18,.18);
}
.cinematic > p {
  font-size: 20px;
  line-height: 1.25;
}
.cinematic > p::after { content: none; }
.cinematic > .button { font-size: 12px; }
.cinematic > .button::before { content: none; }

/* The catalogue intentionally has no left sidebar: the supplied reference
   uses the full editorial width for its collection banners and product grid. */
.catalog-layout {
  display: block;
  padding: 40px 5% 90px;
}
.catalog-sidebar { display: none !important; }
.catalog-main {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}
.catalog-main > section {
  padding: 30px;
}
.catalog-main .catalog-banner {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

/* Give the catalogue a calm, gallery-like product grid. */
.product-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 42px 24px;
}
.product-card {
  transition: transform .35s ease, box-shadow .35s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(37,65,48,.11);
}
.product-card .product-art {
  min-height: 300px;
}

/* Refined header controls: same visual language as the original lucide icons,
   but implemented locally so this version has no icon-library dependency. */
.header-icons {
  gap: 20px;
}
.header-icons > button,
.header-icons > a {
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.header-icons svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.bag-count {
  position: absolute;
  left: 14px;
  top: -7px;
  margin: 0;
  font-size: 10px;
  line-height: 1;
  color: currentColor;
}

/* Keep the collection cards more photographic and less like UI panels. */
.collection-panel img {
  transition: transform 1.1s cubic-bezier(.2,.65,.25,1);
}
.collection-panel:hover img {
  transform: scale(1.035);
}
.collection-panel > div span {
  transition: color .25s ease;
}
.collection-panel:hover > div span {
  color: var(--nature-gold-soft);
}

/* Softer section rhythm and elegant separators. */
.manifesto-bar {
  letter-spacing: .13em;
}
.section {
  padding-top: 95px;
  padding-bottom: 95px;
}
.section-heading {
  margin-bottom: 42px;
}
.section-heading h2 {
  margin-top: 12px;
}
.story {
  box-shadow: 0 24px 70px rgba(17,49,36,.13);
}
.story-copy h2 span {
  display: inline-block;
}
.quality {
  padding-top: 90px;
}
.newsletter {
  border-top: 1px solid rgba(224,189,123,.18);
}

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .product-grid { grid-template-columns: 1fr; }
  .catalog-main > section { padding: 18px; }
  .cinematic { height: 620px; }
  .cinematic > p { font-size: 18px; }
}

/* Guaranteed local campaign image layer for the philosophy section.
   The original art is kept in the HTML as well as CSS so file:// previews
   never lose the photograph because of a background URL resolution issue. */
.story {
  position: relative;
  background: #28352b !important;
}
.story-photo {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.story-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24,22,17,.56), rgba(24,22,17,.16) 68%, rgba(24,22,17,.04));
}
.story-photo img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  filter: brightness(.72) saturate(.88);
}
.story-copy {
  position: relative;
  z-index: 2;
}
.story-copy > small {
  color: #f0d69b !important;
}
.story-copy h2 {
  color: #fff8e9;
}
.story-copy h2 .gold-italic {
  color: #e0b76b;
}
.story-copy p {
  color: rgba(255,248,233,.88);
}

/* =========================================================
   ANANDA INTERNATIONAL STORY — supplied editorial artwork
   ========================================================= */
.ananda-story-page{margin:0;padding:0;background:#f3efe3}
.ananda-story-art{width:100%;line-height:0;overflow:hidden;background:#f3efe3}
.ananda-story-image{display:block;width:100%;height:auto;max-width:1536px;margin:0 auto;object-fit:contain}
/* Keep the exact supplied copy in the DOM without visually duplicating
   the lettering already present in the supplied artwork. */
.ananda-story-transcript{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:normal!important;border:0!important}
@media(max-width:700px){
  .ananda-story-image{width:100%;min-width:0}
}

/* Story page keeps the normal Mistic Aura shell around the editorial artwork. */


/* =========================================================
   HERO + COLLECTION IMAGE FIT — final editorial refinement
   ========================================================= */
.hero-image {
  object-fit: cover;
  object-position: 57% 50%;
  transform: scale(1.035);
  transform-origin: center center;
  filter: saturate(.88) contrast(.97);
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(28,38,29,.52) 0%, rgba(28,38,29,.24) 42%, rgba(28,38,29,.03) 78%),
    linear-gradient(0deg, rgba(22,30,23,.28), transparent 42%);
}
.hero-content {
  padding: clamp(72px, 9vw, 125px) 7%;
  max-width: 820px;
}
.hero .eyebrow {
  color: #f0d69b;
  letter-spacing: .24em;
}
.hero h1 {
  max-width: 760px;
  margin: 28px 0 25px;
  font-size: clamp(58px, 7.2vw, 108px);
  line-height: .91;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(20,25,20,.18);
}
.hero h1 span { color: #fff9ed; }
.hero h1 em {
  color: #e0b76b;
  font-style: italic;
}
.hero .hero-content > p {
  color: rgba(255,249,237,.9);
  font-size: 15px;
  line-height: 1.65;
  max-width: 500px;
}
.hero-actions { margin-top: 34px; }
.hero-actions .button.light {
  border: 1px solid rgba(224,183,107,.8);
  border-radius: 999px;
  background: rgba(247,244,235,.96);
  color: #173b2d;
  padding: 14px 25px 14px 27px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}
.hero-actions .button.light:hover {
  background: #e0b76b;
  border-color: #e0b76b;
  color: #173b2d;
}

/* Collection banners are editorial crops rather than full-image thumbnails.
   A controlled crop makes the incense boxes/objects feel closer and premium. */
.catalog-main .catalog-banner {
  height: clamp(330px, 29vw, 470px);
  max-height: none;
  object-fit: cover;
  object-position: center center;
  overflow: hidden;
  transform: scale(1.035);
  transform-origin: center;
  margin: 24px 0 28px;
}
.catalog-main > section {
  overflow: hidden;
}
#madre-tierra .catalog-banner { object-position: 50% 52%; }
#triskel .catalog-banner { object-position: 50% 48%; }

@media (max-width: 700px) {
  .hero-image {
    object-position: 60% center;
    transform: scale(1.02);
  }
  .hero-content { padding: 66px 7% 100px; }
  .hero h1 {
    font-size: clamp(52px, 14vw, 72px);
    line-height: .93;
  }
  .hero .hero-content > p { font-size: 13px; }
  .catalog-main .catalog-banner {
    height: 300px;
    transform: scale(1.02);
  }
}


/* =========================================================
   FINAL POLISH — navigation, hero, floating action & story
   ========================================================= */

/* Products navigation chevron: small, aligned and visually quiet. */
.nav-products > a {
  gap: 8px;
}
.nav-chevron {
  display: inline-flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
}
.nav-chevron svg {
  width: 10px;
  height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}
.nav-products:hover > a .nav-chevron svg,
.nav-products:focus-within > a .nav-chevron svg {
  transform: translateY(2px);
}

/* Larger header controls, with enough breathing room to feel premium. */
.header-icons {
  gap: 25px;
}
.header-icons > button,
.header-icons > a {
  width: 30px;
  height: 30px;
}
.header-icons svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.55;
}
.bag-count {
  left: 18px;
  top: -5px;
  font-size: 10px;
  min-width: 9px;
  text-align: center;
}

/* Hero: the message is the focal point, with a restrained editorial crop. */
.hero-content {
  padding-top: clamp(82px, 9vw, 130px);
}
.hero h1 {
  max-width: 900px;
  font-size: clamp(55px, 7vw, 104px);
  line-height: .92;
}
.hero h1 span,
.hero h1 em {
  display: inline;
}
.hero-actions .button.light {
  min-width: 170px;
  justify-content: center;
  gap: 18px;
  padding: 14px 24px;
}

/* Keep the hero photograph close enough to read as an atmosphere,
   without losing the natural composition. */
.hero-image {
  object-position: 56% 52%;
  transform: scale(1.065);
}

/* Floating gold action: replace the tiny placeholder glyph with a
   clean, centered visual mark and make it easier to tap. */
.whatsapp {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0;
  box-shadow: 0 12px 35px rgba(22, 45, 34, .22);
}
.whatsapp::before {
  content: "✦";
  font-size: 22px;
  line-height: 1;
}
.whatsapp span {
  display: none;
}

/* The cinematic CTA is a real Products link, not CSS-generated text. */
.cinematic > .button {
  min-width: 190px;
  justify-content: center;
}

/* Our Story: keep the Mistic Aura header/footer full width, but make
   the supplied editorial artwork an inset premium story panel. */
.story-art-body {
  background: #eee8da;
}
.story-art-body .ananda-story-page {
  padding: clamp(28px, 4vw, 60px) 0 clamp(45px, 6vw, 90px);
}
.story-art-body .ananda-story-art {
  width: min(94vw, 1500px);
  margin: 0 auto;
  border: 1px solid rgba(91, 75, 45, .16);
  border-radius: 26px;
  overflow: hidden;
  background: #f3efe3;
  box-shadow: 0 28px 80px rgba(55, 45, 28, .13);
}
.story-art-body .ananda-story-image {
  width: 100%;
  max-width: none;
  height: auto;
}
.story-art-body .ananda-story-transcript {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: normal !important;
  border: 0 !important;
}

@media (max-width: 700px) {
  .header-icons {
    gap: 18px;
  }
  .header-icons > button,
  .header-icons > a {
    width: 28px;
    height: 28px;
  }
  .header-icons svg {
    width: 21px;
    height: 21px;
  }
  .bag-count {
    left: 16px;
    top: -5px;
  }
  .hero-image {
    object-position: 60% center;
    transform: scale(1.035);
  }
  .hero h1 {
    font-size: clamp(50px, 13.5vw, 72px);
    line-height: .94;
  }
  .hero-actions .button.light {
    min-width: 165px;
  }
  .whatsapp {
    width: 58px;
    height: 58px;
  }
  .whatsapp::before {
    font-size: 20px;
  }
  .story-art-body .ananda-story-page {
    padding: 20px 0 50px;
  }
  .story-art-body .ananda-story-art {
    width: 94vw;
    border-radius: 18px;
  }
}

/* =========================================================
   FINAL CORRECTION — original hero + true product colors
   ========================================================= */
.hero-image {
  object-position: center 56%;
  transform: none;
  filter: none;
}
.hero-shade {
  background: linear-gradient(90deg, rgba(33,29,25,.52) 0%, rgba(33,29,25,.18) 55%, rgba(33,29,25,0) 100%),
              linear-gradient(0deg, rgba(33,29,25,.24), transparent 42%);
}
.hero-content {
  max-width: 760px;
}
.hero h1 {
  font-size: clamp(68px, 7.1vw, 110px);
  line-height: .92;
}
.hero h1 span { color: #fff9ed; }
.hero h1 em { color: #e0b76b; }

/* The journey message now belongs to the philosophy panel, while the
   hero remains the original Light / Breathe / Pause introduction. */
.story-copy h2 {
  font-size: clamp(52px, 5.4vw, 82px);
  line-height: .95;
  letter-spacing: -.045em;
}
.story-copy h2 span { display: inline; }
.story-copy p { max-width: 560px; }
.story-copy .text-link {
  color: #d9b16a;
  border-bottom-color: rgba(217,177,106,.65);
}

/* Product photography is shown exactly as supplied in assets — no sepia,
   desaturation, brightness or color filters. */
.product-art img,
.product-grid .product-art img,
.detail-image img,
.bag-line img,
.search-results img {
  filter: none !important;
}


/* =========================================================
   FINAL POLISH — newsletter colour + golden hover cursor
   ========================================================= */

/* Newsletter/signup band now shares the same deep green tone
   as the Mistic Aura header for a continuous brand language. */
.newsletter {
  background: #123f32 !important;
  color: #f5eee1;
}
.newsletter h2,
.newsletter p,
.newsletter small,
.newsletter a,
.newsletter input {
  color: #f5eee1;
}
.newsletter input::placeholder {
  color: rgba(245,238,225,.72);
}
.newsletter input {
  border-color: rgba(245,238,225,.38);
}
.newsletter button {
  color: #e3b85f;
  border-color: rgba(227,184,95,.5);
}
.newsletter button:hover {
  color: #f3c96e;
}



/* Footer links/buttons use the same warm-gold interaction language. */
footer a,
.newsletter a,
.text-link,
.button,
.header a,
.header button,
.collection-panel,
.product-card a,
.product-card button {
  transition: color .25s ease, border-color .25s ease, background-color .25s ease, opacity .25s ease;
}
footer a:hover,
.newsletter a:hover,
.text-link:hover {
  color: #dcb15b;
}


/* =========================================================
   OUR STORY — clean editorial artwork
   The embedded reference-site header has been physically cropped
   from the artwork, so only the story canvas sits between the
   Mistic Aura header and footer.
   ========================================================= */
.story-art-body .ananda-story-page {
  background: #f2ede1;
}
.story-art-body .ananda-story-art {
  background: #f7f2e6;
  border-color: rgba(104, 82, 45, .20);
  box-shadow:
    0 22px 65px rgba(48, 42, 30, .10),
    0 2px 10px rgba(48, 42, 30, .05);
}
.story-art-body .ananda-story-image {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}


/* =========================================================
   FINAL HOMEPAGE RESTORATION
   ========================================================= */

/* The original fragrance-family discovery section is an
   editorial selector, not a generic product carousel. */
.discovery {
  text-align: center;
}
.discovery .section-heading {
  text-align: left;
}
.discovery .families {
  margin: 32px 0 42px;
}
.discovery .product-row {
  text-align: left;
}

/* Return the hero to the original visual hierarchy:
   Light / Breathe / Pause is represented by the source artwork
   and the original homepage copy remains in the HTML flow. */
.hero .hero-content {
  max-width: 900px;
}
.hero .hero-actions .button.light {
  min-width: 168px;
}


/* =========================================================
   LATEST HERO REFERENCE — Fragrance for a kinder tomorrow
   ========================================================= */
.hero-content .eyebrow {
  letter-spacing: .18em;
}
.hero-content h1 {
  max-width: 760px;
  font-size: clamp(58px, 6.7vw, 100px);
  line-height: .90;
  margin-top: 22px;
}
.hero-content h1 em {
  color: #dfb35b;
}
.hero-content > p {
  margin-top: 24px;
  line-height: 1.6;
  color: rgba(250,245,235,.88);
}
.hero-actions {
  margin-top: 26px;
}
.hero-explore {
  min-width: 170px;
  min-height: 46px;
  height: 46px;
  padding: 10px 20px;
  justify-content: center;
  gap: 20px;
  border: 1px solid #dcb25d;
  border-radius: 999px;
  background: rgba(32, 35, 25, .26);
  color: #f4e9d2;
  box-shadow: none;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .13em;
  text-decoration: none;
}
.hero-explore:hover,
.hero-explore:focus-visible {
  background: #dcb25d;
  border-color: #dcb25d;
  color: #173f32;
  transform: translateY(-1px);
}
.hero-explore span {
  color: inherit;
  transition: transform .25s ease;
}
.hero-explore:hover span,
.hero-explore:focus-visible span {
  transform: translateX(3px);
}

/* Do not add an underline/line between the hero message and CTA. */
.hero-actions .hero-explore {
  border-bottom: 1px solid #dcb25d !important;
}
.hero-actions .hero-explore:hover {
  border-bottom-color: #dcb25d !important;
}

/* The user's requested "Explore our world" interaction in the
   cinematic section uses the same gold/green treatment. */
.cinematic .button.light:hover,
.cinematic .button.light:focus-visible {
  background: #dcb25d;
  color: #173f32;
  border-color: #dcb25d;
}

/* ---------------------------------------------------------
   MESSAGE-US FLOATING ACTION
   --------------------------------------------------------- */
.whatsapp {
  width: 62px;
  height: 62px;
  right: 28px;
  bottom: 25px;
  background: #4b5946;
  border: 1px solid rgba(255,255,255,.34);
  color: #f8f1e5;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.whatsapp .message-icon {
  width: 25px;
  height: 25px;
  display: block;
}
.whatsapp .message-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.whatsapp:hover {
  background: #dcb25d;
  color: #173f32;
  border-color: #dcb25d;
}
.whatsapp span {
  right: 72px;
  background: #173f32;
  color: #f5eee1;
  border: 1px solid rgba(220,178,93,.55);
  border-radius: 999px;
  padding: 9px 15px;
}

/* Product cards retain their source-asset colours. */
.product-art img,
.detail-image img,
.product-grid .product-art img {
  filter: none !important;
}


/* =========================================================
   CARD & BANNER ROUNDING — SITE-WIDE
   Gives product cards, collection banners, editorial panels,
   and confirmation cards the same soft premium geometry.
   ========================================================= */

/* Product cards shown on the homepage and Products page. */
.product-card {
  border-radius: 20px;
  overflow: hidden;
}
.product-card .product-art {
  border-radius: 20px;
  overflow: hidden;
}

/* Collection/banner images on the Products page. */
.catalog-main .catalog-banner,
.catalog-banner {
  border-radius: 22px;
  overflow: hidden;
  display: block;
}

/* Homepage collection cards. */
.collection-panel {
  border-radius: 22px;
  overflow: hidden;
}

/* The large editorial/cinematic banner on the homepage. */
.cinematic {
  border-radius: 24px;
  overflow: hidden;
}

/* Product detail hero image. */
.detail-image {
  border-radius: 22px;
  overflow: hidden;
}

/* Story/editorial photo panels. */
.story-photo {
  border-radius: 22px;
  overflow: hidden;
}

/* Add-to-bag / notice card from the user's screenshot.
   The backdrop remains full-screen, but the actual card is soft
   and rounded rather than a sharp rectangle. */
.site-modal-panel {
  border-radius: 22px;
  box-shadow: 0 25px 70px rgba(25, 28, 23, .20);
}

/* Search and other modal content use the same geometry. */
.search-dialog {
  border-radius: 22px;
}

/* Keep the rounded edges clean on hover — image itself remains
   clipped inside the card. */
.product-art img,
.collection-panel img,
.catalog-banner,
.cinematic img,
.detail-image img,
.story-photo img {
  border-radius: inherit;
}

/* On smaller screens use a slightly tighter radius. */
@media (max-width: 700px) {
  .product-card,
  .product-card .product-art,
  .collection-panel,
  .catalog-banner,
  .detail-image,
  .story-photo,
  .cinematic,
  .site-modal-panel,
  .search-dialog {
    border-radius: 16px;
  }
}


/* =========================================================
   FINAL LAYOUT — balanced hero + story transition
   ========================================================= */

/* Keep the hero content centered vertically so its visual
   distance from the top and bottom of the image is balanced. */
.hero {
  position: relative;
}
.hero-content {
  top: 50%;
  transform: translateY(-50%);
  padding-top: 0;
}
.hero-content .hero-actions {
  margin-bottom: 0;
}

/* The lower edge of the hero should have the same breathing
   room as the upper edge. */
@media (min-width: 701px) {
  .hero {
    min-height: 680px;
  }
  .hero-content {
    max-height: calc(100% - 110px);
  }
}

/* ---------------------------------------------------------
   STORY TRANSITION BETWEEN THE TWO LARGE IMAGE BANNERS
   ---------------------------------------------------------
   The journey/philosophy copy belongs in the light section
   between the photographic banners, rather than floating over
   the second banner.
*/
.story {
  position: relative;
  background: #f2eee4;
  color: #173f32;
  padding: clamp(72px, 8vw, 120px) max(7vw, 48px);
  border-radius: 0;
  overflow: hidden;
}

.story .story-content {
  width: min(100%, 1160px);
  margin: 0 auto;
}

.story .eyebrow {
  color: #173f32;
}

.story .story-content h2 {
  max-width: 850px;
  margin: 20px 0 28px;
  color: #173f32;
  font-size: clamp(48px, 6vw, 86px);
  line-height: .93;
}

.story .story-content h2 em {
  color: #d7a94f;
}

.story .story-content p {
  max-width: 720px;
  color: #4d5b52;
  line-height: 1.75;
}

.story .story-content .text-link {
  display: inline-flex;
  margin-top: 28px;
  color: #173f32;
  border-bottom: 1px solid rgba(23,63,50,.35);
}

/* On mobile keep the same visual breathing room. */
@media (max-width: 700px) {
  .hero-content {
    top: auto;
    transform: none;
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .story {
    padding: 64px 24px 72px;
  }

  .story .story-content h2 {
    font-size: clamp(42px, 12vw, 64px);
  }
}


/* =========================================================
   LATEST REFERENCE POLISH
   ========================================================= */

/* The large photographic banner shown in the latest reference
   should run cleanly edge-to-edge with square outer corners.
   Other product cards/banners keep their rounded treatment. */
.cinematic {
  border-radius: 0 !important;
}
.cinematic > img {
  border-radius: 0 !important;
}

/* The Explore our world CTA is intentionally pill-shaped. */
.cinematic > .button,
.cinematic .button.light,
.hero-explore {
  border-radius: 999px !important;
}

/* "Breathe." is the expressive word in the cinematic headline:
   warm gold + italic editorial serif treatment. */
.cinematic > h2 .gold-italic {
  color: #dfb35b !important;
  font-style: italic !important;
  font-family: inherit;
  font-weight: 500;
}


/* =========================================================
   PRODUCT CARD TYPOGRAPHY & OVERLAY ALIGNMENT
   ========================================================= */

/* Keep every label anchored to the same visual position,
   regardless of the photograph beneath it. */
.product-art .art-label {
  top: 16px;
  left: 16px;
  right: auto;
  max-width: calc(100% - 145px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(37, 35, 28, .28);
  color: #fffaf0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .105em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
}

/* Most-loved badge belongs in the upper-right corner,
   never directly against the product packaging. */
.product-art .badge {
  top: 16px;
  right: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250,247,240,.92);
  color: #3f493d;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 5px 18px rgba(31,29,23,.10);
  backdrop-filter: blur(5px);
}

/* Give the "FRAGRANCE STUDY" strip a consistent height and
   vertically centered text so every card lines up. */
.product-art .art-caption {
  min-height: 54px;
  padding: 13px 18px;
  align-items: center;
  font-size: 10px;
  letter-spacing: .13em;
  line-height: 1;
  border-top: 1px solid rgba(80,70,55,.08);
}

/* Consistent spacing between image and product information. */
.product-card .product-line {
  margin-top: 22px;
  align-items: flex-start;
}
.product-card .product-line > div {
  min-width: 0;
}
.product-card .product-line small {
  margin-bottom: 7px;
}
.product-card .product-line h3 {
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.05;
}
.product-card .round {
  margin-top: 2px;
  width: 40px;
  height: 40px;
}

/* Description text gets a controlled width and predictable
   vertical rhythm, keeping adjacent cards visually aligned. */
.product-card > p {
  max-width: 95%;
  margin: 13px 0 14px;
  font-size: 14px;
  line-height: 1.65;
}
.product-card .price {
  display: block;
  margin-top: 4px;
  padding-bottom: 3px;
}

/* Slightly more photographic breathing room on the card image. */
.product-art {
  border-radius: 20px;
}
.product-art img {
  object-position: center center;
}

@media (max-width: 700px) {
  .product-art .art-label {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 115px);
    padding: 5px 8px;
  }
  .product-art .badge {
    top: 12px;
    right: 12px;
  }
  .product-art .art-caption {
    min-height: 50px;
    padding: 12px 15px;
  }
  .product-card .product-line {
    margin-top: 18px;
  }
}


/* =========================================================
   PRODUCT CARD — PREMIUM EDITORIAL LIFT
   ========================================================= */

/* Cards should clearly sit above the page background instead of
   visually dissolving into it. */
.product-card {
  position: relative;
  background: #f8f5ed;
  border: 1px solid rgba(76, 65, 48, .10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 10px 24px rgba(49, 42, 31, .07),
    0 24px 55px rgba(49, 42, 31, .06);
  transition:
    transform .35s cubic-bezier(.2,.75,.25,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

/* A subtle lift on hover makes the card feel tactile without
   becoming overly animated. */
.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(76, 65, 48, .16);
  box-shadow:
    0 16px 30px rgba(49, 42, 31, .10),
    0 30px 70px rgba(49, 42, 31, .10);
}

/* Image area is clean — no artificial tint/filter. */
.product-card .product-art {
  height: 330px;
  border-radius: 0;
  background: #e8e1d6;
  box-shadow: inset 0 -1px 0 rgba(76, 65, 48, .08);
}

/* Product family label: positioned consistently and kept readable
   against both light and dark photography. */
.product-card .art-label {
  top: 18px;
  left: 20px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(35, 33, 27, .26);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: #fff9ef;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Best-loved badge gets a quieter, premium treatment. */
.product-card .badge {
  top: 18px;
  right: 18px;
  z-index: 4;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(249,246,238,.94);
  color: #3c443b;
  box-shadow: 0 6px 18px rgba(34,29,23,.10);
  font-size: 10px;
  letter-spacing: .02em;
}

/* Product information sits on a slightly warm surface, with
   generous spacing so title/description/price don't feel cramped. */
.product-card .product-line {
  margin: 0;
  padding: 22px 22px 0;
  align-items: flex-start;
}
.product-card .product-line small {
  margin-bottom: 7px;
  letter-spacing: .14em;
}
.product-card .product-line h3 {
  font-size: 25px;
  line-height: 1.12;
}
.product-card > p {
  padding: 0 22px;
  margin: 13px 0 0;
  font-size: 14px;
  line-height: 1.65;
}
.product-card .price {
  display: block;
  padding: 0 22px 24px;
  margin-top: 15px;
}

/* The + button belongs visually to the card's content area. */
.product-card .round {
  width: 40px;
  height: 40px;
  margin-top: 1px;
  background: rgba(248,245,237,.72);
  border-color: #d1c6b6;
}
.product-card .round:hover {
  background: #173f32;
  color: #f8f3e8;
  border-color: #173f32;
}

/* No caption strip means the photograph transitions directly into
   the card content. */
.product-card .art-caption {
  display: none !important;
}

/* Homepage discovery row: give each card a little more separation
   from its neighbours and from the page itself. */
.discovery .product-row {
  gap: 28px;
  padding: 10px 5px 30px;
}
.discovery .product-card {
  min-width: 0;
}

/* Product catalogue grid uses the same lifted visual language. */
.product-grid .product-card {
  height: 100%;
}
.product-grid .product-card .product-art {
  height: 340px;
}

/* Mobile proportions. */
@media (max-width: 700px) {
  .product-card {
    border-radius: 18px;
  }
  .product-card .product-art,
  .product-grid .product-card .product-art {
    height: 300px;
  }
  .product-card .product-line {
    padding: 18px 18px 0;
  }
  .product-card > p {
    padding: 0 18px;
  }
  .product-card .price {
    padding: 0 18px 20px;
  }
  .product-card .product-line h3 {
    font-size: 23px;
  }
  .product-card .art-label {
    left: 15px;
    top: 15px;
  }
  .product-card .badge {
    right: 15px;
    top: 15px;
  }
}


/* =========================================================
   HOMEPAGE FLOW — DISCOVERY BETWEEN THE TWO PHOTO BANNERS
   ========================================================= */
.story + .discovery {
  margin-top: 0;
  position: relative;
  z-index: 2;
  background: #f7f3e9;
  box-shadow: 0 -14px 35px rgba(42, 38, 29, .035);
}

.discovery + .cinematic {
  margin-top: 0;
}

@media (min-width: 701px) {
  .story + .discovery {
    padding-top: clamp(74px, 7vw, 110px);
    padding-bottom: clamp(78px, 7vw, 112px);
  }
}


/* =========================================================
   FINAL POLISH — SHIPPING OFFER + MESSAGE BUTTON
   ========================================================= */

/* Moving warm-gold gradient highlights the shipping offer while
   keeping the deep-green brand background untouched. */
.announcement {
  background: #123f32;
  color: transparent;
}
.announcement,
.announcement span {
  background-image: linear-gradient(
    105deg,
    #b98735 0%,
    #f5d98a 22%,
    #fff0b2 38%,
    #c7953f 55%,
    #f1cf7b 72%,
    #a9792e 100%
  );
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: announcementGoldSweep 4.8s ease-in-out infinite;
}
.announcement {
  /* Restore the green as the actual bar background after
     text clipping is applied. */
  position: relative;
}
.announcement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #123f32;
}
.announcement span {
  opacity: 1;
  font-size: 11px;
}
@keyframes announcementGoldSweep {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Replace the previous sparkle/diamond pseudo-element completely.
   The button now contains only the clean message icon from HTML. */
.whatsapp::before,
.whatsapp::after {
  content: none !important;
  display: none !important;
}
.whatsapp {
  font-size: 0;
}
.whatsapp .message-icon {
  width: 27px;
  height: 27px;
  display: block;
}
.whatsapp .message-icon path:first-child {
  stroke-width: 1.45;
}
.whatsapp .message-icon path:last-child {
  stroke-width: 1.55;
}

/* Keep the message button visually identifiable as a support/chat
   action rather than a decorative symbol. */
.whatsapp {
  background: #4b5946;
  color: #f7f0e4;
}
.whatsapp:hover {
  background: #dcb25d;
  color: #173f32;
}

@media (prefers-reduced-motion: reduce) {
  .announcement,
  .announcement span {
    animation: none;
  }
}


/* =========================================================
   FIRST-GLANCE / ABOVE-THE-FOLD COMPOSITION
   =========================================================
   The announcement bar + navigation + complete hero belong in
   the initial viewport. The hero therefore fills only the space
   remaining after the two bars instead of forcing the user to
   scroll before seeing the full opening composition.
   ========================================================= */

html, body {
  min-height: 100%;
}

.announcement {
  position: relative;
  z-index: 40;
}

.header {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Desktop/tablet: exactly one viewport after announcement + header. */
.hero {
  height: calc(100svh - 135px);
  min-height: 0 !important;
  max-height: none;
}

/* Keep the complete hero composition comfortably inside that height. */
.hero-content {
  top: 50%;
  transform: translateY(-50%);
  padding: 0 7%;
  max-width: min(900px, 62vw);
}

.hero-content h1 {
  margin: 20px 0 20px;
  font-size: clamp(52px, 6vw, 92px);
  line-height: .92;
}

.hero-content > p {
  margin-top: 0;
}

.hero-actions {
  margin-top: 24px;
}

/* Keep the bottom navigation visible without crowding the copy. */
.hero-bottom {
  bottom: 20px;
}

/* At shorter desktop heights, reduce type slightly rather than
   allowing the headline/button to run outside the first screen. */
@media (min-width: 701px) and (max-height: 760px) {
  .hero-content h1 {
    font-size: clamp(48px, 5.4vw, 76px);
    margin: 14px 0 14px;
  }
  .hero-content .eyebrow {
    font-size: 10px;
  }
  .hero-actions {
    margin-top: 18px;
  }
  .hero-bottom {
    bottom: 14px;
  }
}

/* Mobile gets a compact first screen too, while preserving readable
   text and the navigation controls. */
@media (max-width: 700px) {
  .announcement {
    height: 32px;
    padding: 0 12px;
    font-size: 9px;
  }

  .header {
    height: 74px;
    padding: 0 20px;
  }

  .hero {
    height: calc(100svh - 106px);
    min-height: 0 !important;
  }

  .hero-content {
    top: 50%;
    transform: translateY(-50%);
    padding: 0 28px;
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: clamp(47px, 13vw, 70px);
    line-height: .91;
    margin: 18px 0;
  }

  .hero-content > p {
    font-size: 13px;
  }

  .hero-actions {
    margin-top: 20px;
  }

  .hero-bottom {
    left: 28px;
    right: 28px;
    bottom: 15px;
  }
}


/* =========================================================
   PRODUCT PACK OPTIONS + PURCHASE POLISH
   ========================================================= */

/* Rounded confirmation CTA, matching the premium card geometry. */
.site-modal-panel .button {
  border-radius: 2px 18px 18px 2px;
}

/* Pack information appears before the selector, exactly where the
   shopper needs it before making a purchase decision. */
.pack-info {
  margin: 24px 0 20px;
  padding: 18px 20px;
  background: #eee9df;
  border: 1px solid #ddd4c6;
  border-radius: 14px;
}
.pack-info strong {
  display: block;
  margin-bottom: 5px;
  color: #173f32;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 400;
}
.pack-info p {
  margin: 0;
  color: #71695f;
  font-size: 13px;
  line-height: 1.65;
}
.pack-info b { color: #3e392f; font-weight: 600; }

.variant-picker {
  margin: 18px 0 8px;
}
.variant-picker label {
  display: block;
  margin-bottom: 8px;
  color: #5d554b;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.variant-picker select {
  width: 100%;
  min-height: 52px;
  padding: 12px 44px 12px 16px;
  border: 1px solid #cfc4b5;
  border-radius: 12px;
  background: #f8f6f1;
  color: #173f32;
  outline: none;
  cursor: pointer;
  appearance: auto;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.variant-picker select:hover,
.variant-picker select:focus {
  border-color: #c79a4c;
  box-shadow: 0 0 0 3px rgba(199,154,76,.12);
  background: #fffdf8;
}

/* The live price sits immediately below the pack choice. */
.detail-copy > #product-price {
  margin: 12px 0 20px;
  color: #173f32;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 500;
}

/* Buy-now hover: the wording turns warm gold, as requested. */
#buy-now:hover,
#buy-now:hover span,
#buy-now:focus-visible,
#buy-now:focus-visible span {
  color: #c99b4e;
  border-color: #c99b4e;
  background: rgba(201,155,78,.06);
}

/* Keep the confirmation card's CTA clearly rounded on every page. */
#notice-modal .site-modal-panel .button {
  border-radius: 14px;
}

@media (max-width: 700px) {
  .pack-info { padding: 16px; }
  .variant-picker select { min-height: 50px; }
  .detail-copy > #product-price { font-size: 20px; }
}


/* =========================================================
   STABILITY PATCH — preserve the approved homepage composition
   ========================================================= */
.announcement {
  height: 35px !important;
  background: #123f32 !important;
  color: #dcb15b !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  overflow: hidden;
}
.announcement::before { background: #123f32 !important; }
.announcement > span {
  display: inline-block !important;
  opacity: 1 !important;
  font-size: 11px !important;
  color: #dcb15b !important;
  background-image: linear-gradient(105deg,#b98735 0%,#f5d98a 22%,#fff0b2 38%,#c7953f 55%,#f1cf7b 72%,#a9792e 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: announcementGoldSweep 4.8s ease-in-out infinite;
}

/* The complete opening composition must fit in the first desktop viewport. */
@media (min-width: 701px) {
  .hero {
    height: calc(100svh - 135px) !important;
    min-height: 0 !important;
  }
  .hero-content {
    top: 0 !important;
    transform: none !important;
    padding: clamp(62px, 9vh, 100px) 7% 100px !important;
    max-width: 900px !important;
  }
  .hero-content h1 {
    font-size: clamp(50px, 5.6vw, 88px) !important;
    line-height: .94 !important;
    margin: 18px 0 18px !important;
  }
  .hero-content > p { font-size: 15px !important; }
  .hero-actions { margin-top: 20px !important; }
  .hero-bottom { bottom: 18px !important; }
}

/* Restore the approved story CTA treatment; hover becomes the gold pill. */
.story-copy .text-link {
  display: inline-flex !important;
  align-items: center;
  gap: 20px;
  color: #d9b16a !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom-color: rgba(217,177,106,.65) !important;
  border-radius: 999px;
  padding: 10px 18px !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
.story-copy .text-link:hover {
  background: #dcb15b !important;
  color: #173f32 !important;
  border-color: #dcb15b !important;
}

@media (max-width: 700px) {
  .announcement { height: 32px !important; gap: 12px !important; }
  .announcement > span { font-size: 9px !important; }
  .announcement-calm { display: none !important; }
  .hero { height: calc(100svh - 106px) !important; min-height: 0 !important; }
  .hero-content { top: 0 !important; transform: none !important; padding: 68px 28px 90px !important; }
}

/* Product-card guidance: keep the card itself as the product entry point. */
.product-card[data-product-link]{cursor:pointer;}
.product-card[data-product-link]:focus-visible{outline:2px solid #987357;outline-offset:6px;border-radius:22px;}
.card-details-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:max-content;margin-top:10px;padding-bottom:5px;border-bottom:1px solid #b6a58f;color:#786b5b;font-size:11px;letter-spacing:.045em;transition:color .25s,border-color .25s,transform .25s;}
.card-details-link span{font-size:14px;transition:transform .25s;}
.card-details-link:hover{color:#3e392f;border-color:#8f7c60;transform:translateY(-1px);}
.card-details-link:hover span{transform:translateX(3px);}
@media(max-width:700px){.card-details-link{font-size:10px;margin-top:9px;}.card-details-link span{font-size:13px;}}

/* =========================================================
   PRODUCT CARD — QUIET PRODUCT DISCOVERY
   ========================================================= */

.product-card {
  cursor: pointer;
}

/* Keeps the price and product link visually connected */
.product-card .product-footer {
  padding: 0 22px 25px;
  margin-top: 17px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

/* Price is the primary information */
.product-card .product-footer .price {
  padding: 0;
  margin: 0;
  color: #51483d;
  font-size: 13px;
  letter-spacing: .01em;
}

/* Small editorial-style discovery cue */
.product-card .explore-product {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: #857563;
  font-size: 11px;
  letter-spacing: .045em;

  padding-bottom: 3px;
  border-bottom: 1px solid rgba(133,117,99,.35);

  transition:
    color .3s ease,
    border-color .3s ease,
    gap .3s ease;
}

.product-card .explore-product span {
  font-size: 14px;
  line-height: 1;
  transition: transform .3s ease;
}

/* Subtle premium hover — not a big button */
.product-card:hover .explore-product,
.product-card .explore-product:hover {
  color: #b8893f;
  border-bottom-color: rgba(184,137,63,.65);
  gap: 12px;
}

.product-card:hover .explore-product span {
  transform: translateX(3px);
}

/* Don't let the card hover make the CTA look like a separate box */
.product-card .explore-product:focus-visible {
  outline: 2px solid #b8893f;
  outline-offset: 5px;
}

/* Mobile */
@media (max-width: 700px) {
  .product-card .product-footer {
    padding: 0 18px 21px;
    margin-top: 15px;
  }

  .product-card .product-footer .price {
    font-size: 12px;
  }

  .product-card .explore-product {
    font-size: 10px;
  }
}/* Account / auth additions */
.account-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;font-size:13px}.account-toolbar .text-link{background:none;border:0;padding:0}.account-address-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:25px 0}.account-address{border:1px solid #d9d0c3;background:#fffdf7;padding:22px;border-radius:14px}.account-address p{font-size:13px;margin-top:8px}.account-orders{margin-top:25px}.account-order{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:18px 0;gap:20px}.account-order>div:last-child{display:flex;gap:20px;align-items:center;font-size:12px}.account-order strong{font-weight:400}.form-message{display:none}.form-message.show{display:block;padding:12px 14px;border-radius:10px;background:#e7e1d6;color:#5d503f;font-size:13px;margin:15px 0}.form-message.error{background:#f4e4df;color:#8b3e2f}.hidden{display:none!important}@media(max-width:700px){.account-address-grid{grid-template-columns:1fr}.account-order{align-items:flex-start}.account-order>div:last-child{flex-direction:column;gap:3px;align-items:flex-end}}

/* --- Stock states (added for live inventory wiring) --- */
.stock-status{font-size:12px;letter-spacing:.03em;margin:14px 0 0;font-weight:600}
.stock-status.ok{color:#2f5a3f}
.stock-status.low{color:#8a6a24}
.stock-status.out{color:#8b3e2f}
.badge.out{background:#f4e0dbe8;color:#8b3e2f}
.badge.low{background:#f6ecd8e8;color:#8a6a24}
.product-card.is-sold-out .product-art img{opacity:.55}
.price{font-size:14px}
.round:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.round:disabled:hover{background:transparent;color:inherit}
#add-product:disabled,#buy-now:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Account authentication loading state */
/*---------------------------------------------------------
   ACCOUNT AUTHENTICATION UX
   --------------------------------------------------------- */

.account-page-shell {
  min-height: 520px;
}

.account-live {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.account-page-shell.account-ready .account-live {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: accountReveal 240ms ease both;
}

.account-auth-loading {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #7c6e5e;
  font-size: 13px;
  letter-spacing: .03em;
}

.account-auth-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(141,119,89,.22);
  border-top-color: #8d7759;
  border-radius: 50%;
  animation: accountSpinner .7s linear infinite;
}

.account-page-shell.account-ready .account-auth-loading {
  display: none;
}

@keyframes accountSpinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes accountReveal {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}