/* AnsaSkin Beauty — black, gold and warm ivory storefront. Content is managed in the panel. */
:root{--ink:#191916;--paper:#fbf8f3;--surface:#fffdf9;--surface-sunk:#f3ece2;--terracotta:#a86f28;--gold:#bb853c;--line:#e8dfd2;--r-lg:14px;--brand-cta:#191916;--brand-cta-text:#fff}
body[data-theme=ansaskin]{background:var(--paper);color:var(--ink)}
.site-header{background:var(--chrome);color:#fff;border-bottom:1px solid var(--chrome-line);backdrop-filter:none}.site-header .icon-btn,.site-header .main-nav>a,.site-header .nav-item>a{color:#fff}.site-header .megamenu{color:#191916}.site-header .theme-brandmark{width:160px;max-height:48px;object-fit:contain}.announcement{background:#23231f;color:#f9f4eb;font-size:12px;min-height:30px}.announcement a{color:inherit}.header-inner{max-width:1480px;padding-inline:32px}.badge-count{background:#d9ab58;color:#171713}
.section{padding-block:38px}.wrap{max-width:1440px;padding-inline:48px}.section-head{margin-bottom:24px}.section-head h2{font-size:clamp(27px,3vw,39px);letter-spacing:-.04em}.eyebrow{color:#8C581F;letter-spacing:.15em;font-size:11px}.btn{border-radius:11px;font-weight:600}.btn-primary{background:#1c1d19;color:#fff}.btn-primary:hover{background:color-mix(in srgb,var(--brand-cta,#252522),#fff 12%)}.btn-gold{background:#bd853b;color:#fff}.btn-outline{background:#fffaf2;border-color:#dfcfba}.btn:disabled{opacity:.45;cursor:not-allowed}
.luxury-carousel{position:relative;margin:12px auto 0;max-width:1580px;padding:0 16px}.luxury-slide>picture{display:contents}.luxury-slides{display:flex;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:15px}.luxury-slides::-webkit-scrollbar{display:none}.luxury-slide{position:relative;flex:0 0 100%;min-height:540px;aspect-ratio:2.1;scroll-snap-align:start;overflow:hidden;background:#eee2cc}.luxury-slide img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.luxury-slide-copy{position:relative;z-index:1;max-width:48%;padding:clamp(35px,6vw,95px);min-height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:linear-gradient(90deg,rgba(248,240,222,.96),rgba(248,240,222,.6) 60%,transparent)}.luxury-slide-copy h1,.luxury-slide-copy h2{font-size:clamp(34px,4.2vw,66px);line-height:1.05;letter-spacing:-.045em;margin:0 0 18px}.luxury-slide-copy p{font-size:16px;max-width:330px;margin-bottom:26px}.carousel-arrow{position:absolute;z-index:2;top:48%;border:0;background:#fffc;color:#3c352b;border-radius:50%;width:38px;height:38px;font-size:24px}.carousel-arrow.prev{left:28px}.carousel-arrow.next{right:28px}.carousel-dots{display:flex;justify-content:center;gap:9px;padding:14px}.carousel-dots button{width:9px;height:9px;border:1px solid #ac843c;border-radius:50%;padding:0;background:transparent}.carousel-dots button[aria-current=true]{background:#c18d3c}
.trust-strip{background:#f8f2e9;border-radius:12px;margin:10px auto;max-width:1440px;padding:24px 32px;gap:12px}.trust-strip>div{border-right:1px solid #e5d9c8}.trust-strip>div:last-child{border:0}.trust-strip img{width:30px;height:30px;margin:auto auto 9px}.trust-strip b{font-size:13px}.trust-strip small{font-size:12px;color:var(--muted)}
.theme-builder[data-section-type=category_grid] .grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.collection-card{border:0;background:transparent;border-radius:12px;overflow:hidden}.cc-media{aspect-ratio:1/1.18;background:#efe2ce;border-radius:12px;overflow:hidden}.cc-media img{object-fit:cover;width:100%;height:100%}.cc-body{background:#f0e5d6;text-align:center;padding:12px}.cc-body h3{font-family:var(--font-body);font-size:15px;font-weight:600}.cc-body p:empty{display:none}
.product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}.card-media{aspect-ratio:1/1.14;border-radius:12px;overflow:visible;background:#eee2d1;margin-bottom:15px;display:flex;flex-direction:column}.card-media>a{display:block;overflow:hidden;border-radius:12px;flex:1;min-height:0}.card-media img{width:100%;height:100%;object-fit:cover}.card-quickadd{position:static;opacity:1;translate:none;padding:0;margin-top:0;order:2;display:none}.product-card{padding-bottom:49px}.product-card>.card-media .card-quickadd{position:absolute;display:block;bottom:0;left:0;right:0}.card-quickadd .btn{min-height:40px}.card-title{font-family:var(--font-body);font-size:15px;line-height:1.4;font-weight:600;margin-bottom:5px}.card-cat{display:none}.card-desc{font-size:12px;color:#78736b;line-height:1.5;margin-bottom:8px}.card-foot{margin-top:auto}.price{font-size:16px}.price-was{font-size:12px}.price-off{font-size:10px;color:#986022}.wish-btn{background:#fff;top:9px;right:9px;width:30px;height:30px}.badge-stack{top:10px;left:9px}.badge-upcoming{background:#fff9e9;color:#76501a;border:1px solid #d9bf8d;font-size:10px}
.theme-product-rail{grid-auto-columns:minmax(210px,calc((100% - 88px)/5));gap:22px}.pdp{grid-template-columns:1fr 1fr;gap:55px;padding-block:22px 40px}.pdp-info h1{font-size:clamp(30px,3vw,44px)}.pdp-info .lede{font-size:15px!important}.pdp-gallery{grid-template-columns:65px 1fr}.pdp-main-img{aspect-ratio:4/5;border-radius:13px;cursor:zoom-in}.pdp-thumbs{gap:9px}.pdp-thumb[aria-current=true]{border:2px solid #b9853c}.pdp-price{font-size:26px;font-weight:650}.stock{font-size:12px}.pdp-info .btn-lg{min-width:140px!important}.pdp-usp{margin-top:22px;padding-top:18px}.pdp-usp div{font-size:12px}.launch-panel{background:#f4eadb;border:1px solid #e5d3b7;border-radius:14px;padding:22px;margin-top:22px}.launch-panel h2{font-size:24px}.launch-panel label{display:block;font-size:13px;margin-block:12px 5px}.launch-panel .launch-consent{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;font-size:12px}.routine-section{padding-top:0}.routine-panel{padding:28px;border-radius:16px;background:#f4ecdf}.routine-panel .theme-product-rail{grid-auto-columns:minmax(180px,calc((100% - 66px)/4))}.mobile-purchase{display:none}.image-zoom{border:0;padding:0;background:#fffdf8;border-radius:16px;overflow:hidden;width:min(90vw,900px);max-height:90vh}.image-zoom::backdrop{background:#000b}.image-zoom img{width:100%;height:auto;max-height:82vh;object-fit:contain}.image-zoom button{position:absolute;right:12px;top:12px;background:#fff;border:1px solid #ddd;border-radius:50%;width:36px;height:36px}.share-product{margin-top:14px;font-size:13px}
.site-footer{background:var(--chrome);color:var(--chrome-ink)}.site-footer .theme-brandmark{max-width:165px}.site-footer a{color:var(--chrome-ink)}.quote-card{background:#fff;border:1px solid #eee5da;border-radius:12px}.section-sunk{background:#f4eee5}
@media(min-width:1500px){.luxury-slide{min-height:620px}}
@media(max-width:1000px){.wrap{padding-inline:28px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.luxury-slide{min-height:410px}.luxury-slide-copy{padding:45px;max-width:53%}.pdp{gap:26px}.header-inner{padding-inline:22px}.theme-product-rail{grid-auto-columns:30%}}
@media(max-width:767px){.wrap{padding-inline:18px}.header-inner{padding-inline:18px;min-height:68px}.site-header .theme-brandmark{width:125px}.header-actions{gap:4px}.header-actions .icon-btn{width:31px;height:35px}.announcement{font-size:10px;padding-inline:10px}.section{padding-block:26px}.section-head{align-items:center;gap:12px}.section-head h2{font-size:29px}.section-head .text-link{font-size:12px;white-space:nowrap}.luxury-carousel{padding:0;margin-top:7px}.luxury-slides{border-radius:0}.luxury-slide{min-height:300px;aspect-ratio:1.36}.luxury-slide img{object-position:65% center}.luxury-slide-copy{padding:30px 25px;max-width:62%;background:linear-gradient(90deg,#f6ead5e8,#f6ead577 75%,transparent)}.luxury-slide-copy h1,.luxury-slide-copy h2{font-size:32px}.luxury-slide-copy p{font-size:12px;line-height:1.5;margin-bottom:17px}.luxury-slide-copy .btn{font-size:11px;min-height:35px;padding:8px 14px}.carousel-arrow{width:27px;height:27px;font-size:20px}.carousel-arrow.prev{left:13px}.carousel-arrow.next{right:13px}.carousel-dots{padding:10px}.trust-strip{padding:20px 9px;margin:5px 9px;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.trust-strip img{width:25px;height:25px}.trust-strip b{font-size:10px}.trust-strip small{font-size:9px}.theme-builder[data-section-type=category_grid] .grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,29%);grid-template-columns:none;overflow:auto;scroll-snap-type:x mandatory;gap:11px}.cc-body{padding:8px 3px}.cc-body h3{font-size:11px}.cc-body p{display:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 13px}.theme-product-rail{grid-auto-columns:44%;gap:13px}.card-title{font-size:13px}.card-desc{font-size:11px}.card-quickadd .btn{font-size:12px}.pdp{display:flex;flex-direction:column;padding-top:0;gap:25px}.pdp-gallery{position:static;display:flex;flex-direction:column-reverse;width:100%}.pdp-thumbs{flex-direction:row;overflow:auto}.pdp-thumb{min-width:62px;width:62px}.pdp-info{width:100%}.pdp-info h1{font-size:33px}.pdp-price{font-size:26px}.pdp-info .qty{flex:0 0 100px}.pdp-info .btn-lg{min-width:120px!important}.pdp-usp b{font-size:11px}.routine-panel{padding:20px 14px}.routine-panel .section-head h2{font-size:26px}.routine-panel .theme-product-rail{grid-auto-columns:43%}.mobile-purchase{display:flex;position:fixed;z-index:65;bottom:0;left:0;right:0;padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:8px;align-items:center;background:#fffdf8;border-top:1px solid #dec9a9;box-shadow:0 -4px 15px #00000009}.mobile-purchase>div{flex:1;min-width:0}.mobile-purchase strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.mobile-purchase span{display:block;font-size:15px;font-weight:700}.mobile-purchase .btn{font-size:11px;padding:10px;min-height:40px}.site-footer{padding-bottom:95px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid .f-col-last{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.luxury-slides{scroll-behavior:auto!important}}
.site-header .icon-btn svg{stroke:#fff}.luxury-slide img{object-fit:cover;object-position:center 42%}.luxury-slide-copy{background:linear-gradient(90deg,#f7eedc 0%,#f7eedce8 60%,transparent)}
@media(max-width:767px){.luxury-slide img{object-fit:cover;object-position:63% center}.luxury-slide-copy{background:linear-gradient(90deg,#f6ead5ed,#f6ead5bb 55%,transparent)}}
.story-panel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:center;background:#f6eee1;border-radius:15px;padding:30px}.story-panel>img{border-radius:12px;width:100%}.story-panel h2{font-size:36px}.story-panel .lede{font-size:15px}.story-benefits article{margin-block:18px}.story-benefits h3{font-family:var(--font-body);font-size:14px;font-weight:600}.story-benefits p{font-size:13px;color:#716c63}.story-benefits img{width:35px;height:35px;object-fit:contain;float:left;margin-right:12px}.story-ingredients,.story-steps{display:grid;grid-template-columns:1fr 2fr;gap:28px;align-items:center}.story-ingredients{background:#f6eee1;padding:28px;border-radius:15px}.story-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.story-tiles img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:14px}.story-ingredients .story-tiles img{border-radius:50%;max-width:95px;margin:auto}.story-tiles h3{font-family:var(--font-body);font-size:14px;margin-block:12px 6px}.story-tiles p{font-size:12px;color:#716c63}.story-tiles h3 span{color:#9a6524}.story-ingredients .story-tiles{text-align:center}.story-panel:has(>img):not(:has(.story-benefits)){grid-template-columns:1fr 1fr}
@media(max-width:767px){.story-panel,.story-panel:has(>img):not(:has(.story-benefits)){grid-template-columns:1fr;padding:20px}.story-panel h2{font-size:29px}.story-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}.story-ingredients,.story-steps{grid-template-columns:1fr}.story-tiles{gap:12px}.story-tiles h3{font-size:12px}.story-tiles p{font-size:11px}.story-ingredients{padding:20px}}
.product-card{padding-bottom:0}.product-card .card-media{display:block;aspect-ratio:1/1.14;flex:none;overflow:hidden}.product-card .card-media>a{display:block;width:100%;height:100%}.product-card>.card-quickadd{position:static!important;display:block;opacity:1;translate:none;margin-top:12px;padding:0}.card-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}.card-foot{min-height:30px}.collection-card .cc-body{position:static;background:#f0e5d6;color:var(--ink)}.collection-card .cc-body h3{color:var(--ink)}.collection-card .cc-media::after{display:none}
.luxury-slide{width:100%;min-width:0}.luxury-slide-copy{min-width:0}.story-panel:not(:has(>img)){grid-template-columns:1fr 1fr}
@media(max-width:767px){.luxury-carousel .luxury-slide{min-height:350px;aspect-ratio:auto}.luxury-slide-copy{max-width:69%;padding:28px 22px;min-height:350px}.luxury-slide-copy h1,.luxury-slide-copy h2{font-size:29px;line-height:1.06;margin-bottom:13px}.luxury-slide-copy .eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:16px}.luxury-slide-copy p{font-size:11px;line-height:1.45;margin-bottom:16px}.story-panel:not(:has(>img)){grid-template-columns:1fr}.wrap.section>.luxury-slide{min-height:300px!important}.wrap.section>.luxury-slide .luxury-slide-copy{min-height:300px}.trust-strip b{font-size:10px}.trust-strip small{font-size:10px}.trust-strip{padding:17px 8px}.collection-card .cc-body{position:static}.collection-card .cc-body h3{font-size:11px}}
@media(max-width:767px){.pdp-gallery .pdp-thumbs,.pdp-gallery .pdp-main-img{order:0}.trust-strip small{display:none}}
@media(min-width:1001px){.shop-layout .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.routine-item{min-width:0}.routine-select{display:flex;align-items:center;gap:7px;font-size:11px;min-height:40px;margin-bottom:8px}.routine-total{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;margin-top:20px;border-top:1px solid #dfd0b9}.routine-total strong{display:block;font-size:25px}.routine-total span{font-size:12px}.routine-total+.field-hint{margin-top:10px}
.pdp-usp svg{margin:0 auto 6px;color:#a66d29}.pdp-usp span{font-size:11px;display:block;margin-top:4px}

/* Compact navigation and content must fit the smallest supported phones. */
.mobile-nav{background:var(--chrome);color:#fff;border-color:var(--chrome-line)}.mobile-nav a,.mobile-nav .icon-btn{color:#fff}.mobile-nav h4{color:#c8b693}.mobile-nav .theme-brandmark{width:150px;max-width:100%;object-fit:contain}.mobile-nav .m-group+.m-group{border-color:var(--chrome-line)}
.product-card{min-width:0}.card-foot .price{white-space:normal;overflow-wrap:normal;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px;row-gap:3px;line-height:1.45}.card-foot .price-was,.card-foot .price-off{margin-left:0;white-space:nowrap}.badge-stack{max-width:calc(100% - 50px)}.badge-stack .badge{white-space:normal;line-height:1.15;max-width:100%}.collection-card .cc-body h3{margin:0}
@media(max-width:767px){
.header-inner{display:flex;justify-content:space-between;gap:6px;padding-inline:10px;min-height:64px}.header-inner>.row{flex-wrap:nowrap;gap:7px;min-width:0}.header-inner .wordmark{min-width:0}.site-header .theme-brandmark{width:clamp(72px,33vw,136px);height:auto;max-height:68px}.header-inner .nav-toggle{flex:0 0 28px;width:28px;padding:4px}.header-actions{gap:1px;flex:0 0 auto}.header-actions .icon-btn{width:28px;height:40px;padding:4px}.header-actions .icon-btn svg{width:20px;height:20px}
.luxury-carousel .luxury-slide,.wrap.section>.luxury-slide{display:flex;flex-direction:column;min-height:0!important;aspect-ratio:auto!important;height:auto!important;overflow:hidden}.luxury-slide img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;background:#eee2cc}.luxury-slide-copy,.wrap.section>.luxury-slide .luxury-slide-copy{max-width:none;width:100%;min-height:0;padding:22px 30px 26px;background:#f4e8d5;box-sizing:border-box}.luxury-slide-copy h1,.luxury-slide-copy h2{font-size:29px;overflow-wrap:break-word}.luxury-slide-copy p{font-size:12px;max-width:none}.luxury-slide-copy .eyebrow{margin-bottom:12px}.carousel-arrow{top:calc(37.5vw - 14px)}.card-foot .price{font-size:14px}.badge-upcoming{font-size:8px;letter-spacing:.03em;padding:5px}.product-card .card-media img{object-fit:contain}.section-head{flex-wrap:wrap}.section-head h2{min-width:0}.mobile-purchase .btn{padding-inline:8px}.mobile-purchase strong{max-width:100%}
}
@media(max-width:340px){.trust-strip{padding:20px 6px;gap:3px}.trust-strip b{font-size:9px}.trust-strip small{font-size:8px}.cc-body h3{font-size:10px}.header-inner{padding-inline:7px;gap:3px}.header-inner>.row{gap:3px}.header-actions .icon-btn{width:26px}.site-header .theme-brandmark{width:104px}.wrap{padding-inline:14px}.card-title{font-size:12px}.card-foot .price{font-size:13px}.card-quickadd .btn{font-size:11px;padding-inline:6px}.pdp-info h1{font-size:29px}.luxury-slide-copy{padding-inline:25px}.luxury-slide-copy h1,.luxury-slide-copy h2{font-size:27px}.mobile-purchase{gap:5px;padding-inline:8px}.mobile-purchase .btn{font-size:10px;padding-inline:7px}}

.about-copy{max-width:1050px}.about-copy>img{float:right;width:42%;margin:0 0 24px 32px;border-radius:14px}.about-copy h2{font-size:30px;margin-top:26px}.about-copy::after{content:"";display:block;clear:both}@media(max-width:767px){.about-copy>img{float:none;width:100%;max-height:340px;object-fit:contain;margin:0 0 24px}.about-copy h2{font-size:25px}}
/* Preserve full packaging and labels across portrait and landscape photographs. */
.pdp-main-img img,.pdp-thumb img,.cc-media img{object-fit:contain}.pdp-main-img{background:#f1e8d9}
.product-card .card-media img{object-fit:contain}
@media(max-width:767px){.site-footer{padding-bottom:40px}body:has(.mobile-purchase) .site-footer{padding-bottom:95px}}



/* ── "Made for your skin's needs" concern wheel ─────────────────────────────
   Circles are labels on row 1; each explanation is a grid item on row 2
   spanning every column, so it opens full width beneath the rail instead of
   stretching one circle's column. Radios drive it, so there is no JavaScript
   and the whole thing is keyboard operable. */
.concern-wheel .section-head{margin-bottom:4px}
.concern-rail{display:grid;grid-template-columns:repeat(var(--concern-columns,5),minmax(118px,160px));justify-content:start;column-gap:24px;row-gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 2px 4px;scrollbar-width:none}
.concern-rail::-webkit-scrollbar{display:none}
.concern-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.concern-summary{grid-row:1;grid-column:var(--i);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;text-align:center;min-width:0}
.concern-dot{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;overflow:hidden;background:#f1e8d9;border:1px solid #e3d2b6;transition:border-color .18s,transform .18s}
.concern-dot img{width:100%;height:100%;object-fit:cover}
.concern-summary:hover .concern-dot{border-color:#b9853c;transform:translateY(-2px)}
.concern-toggle:focus-visible+.concern-summary .concern-dot{outline:2px solid #b9853c;outline-offset:3px}
.concern-toggle:checked+.concern-summary .concern-dot{border:2px solid #b9853c}
.concern-label{font-size:13px;font-weight:600;color:#3c352b;max-width:140px}
.concern-toggle:checked+.concern-summary .concern-label{color:#8a6220}
.concern-body{grid-row:2;grid-column:1/-1;display:none;gap:22px;align-items:flex-start;background:#f8f1e5;border:1px solid #e5d3b7;border-radius:14px;padding:22px;margin-top:16px;position:sticky;left:0}
.concern-body img{width:124px;height:124px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.concern-body h3{font-size:20px;margin:0 0 7px}
.concern-body p{margin:0 0 10px;font-size:14px;line-height:1.55}
.concern-rail:has(.concern-toggle[data-concern="0"]:checked) .concern-body[data-concern="0"],
.concern-rail:has(.concern-toggle[data-concern="1"]:checked) .concern-body[data-concern="1"],
.concern-rail:has(.concern-toggle[data-concern="2"]:checked) .concern-body[data-concern="2"],
.concern-rail:has(.concern-toggle[data-concern="3"]:checked) .concern-body[data-concern="3"],
.concern-rail:has(.concern-toggle[data-concern="4"]:checked) .concern-body[data-concern="4"],
.concern-rail:has(.concern-toggle[data-concern="5"]:checked) .concern-body[data-concern="5"]{display:flex}
@media(max-width:767px){
.concern-rail{grid-template-columns:repeat(var(--concern-columns,5),minmax(100px,34vw));column-gap:14px}
.concern-dot{width:88px;height:88px}
.concern-label{font-size:12px;max-width:106px}
.concern-body{flex-direction:column;gap:13px;padding:17px;width:calc(100vw - 36px)}
.concern-body img{width:100%;height:180px}
}

/* ── Footer columns ────────────────────────────────────────────────────────
   Desktop shows every column open and the toggle is inert. Under 768px each
   column collapses to a tappable heading. Checkbox-driven, so it needs no
   JavaScript and a no-JS visitor still gets working disclosure. */
.f-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.f-head{display:block}
.f-head h4{margin:0}
@media(max-width:767px){
.f-col{border-bottom:1px solid #2a2724}
.f-col .f-head{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:14px 0;margin:0}
.f-col .f-head::after{content:"+";font-size:19px;line-height:1;color:#c9b998;transition:transform .18s}
.f-toggle:checked+.f-head::after{content:"−"}
.f-toggle:focus-visible+.f-head{outline:2px solid #c9b998;outline-offset:3px}
.f-col .footer-links{display:none;padding-bottom:12px}
.f-toggle:checked+.f-head+.footer-links{display:block}
.footer-grid{grid-template-columns:1fr;gap:0}
.footer-grid>div:first-child{grid-column:auto;padding-bottom:18px}
.footer-grid .f-col-last{grid-column:auto}
}

/* ── PDP trust rows ────────────────────────────────────────────────────────
   creme.css turns each row into a baseline flex, while an older rule still
   gave the icon `margin: 0 auto`. The auto margin pushed every icon to the
   middle of its row and baseline-aligned a 25px SVG against 11px text, so the
   three rows landed at different indents with ragged spacing. Fixed three-part
   row instead: icon column, label, supporting text. */
.pdp-usp{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px;padding-top:18px}
.pdp-usp>div{display:grid;grid-template-columns:26px 1fr;align-items:center;column-gap:12px;row-gap:2px;text-align:left}
.pdp-usp svg{margin:0;grid-row:1/3;align-self:center;color:#a66d29;width:22px;height:22px}
.pdp-usp b{grid-column:2;font-size:13px;font-weight:650;color:#191916;margin:0;line-height:1.25}
.pdp-usp span{grid-column:2;display:block;margin:0;font-size:12px;line-height:1.3;color:var(--muted)}

/* ── Motion ────────────────────────────────────────────────────────────────
   Reveals are opt-in from JS: without it nothing carries [data-reveal] and
   every element renders normally, so content is never hidden behind a script.
   Transform and opacity only, so these stay off the main thread. */
@media(prefers-reduced-motion:no-preference){
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);transition-delay:var(--reveal-delay,0ms)}
[data-reveal][data-revealed]{opacity:1;transform:none}
.product-card .card-media img,.collection-card img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.product-card:hover .card-media img,.collection-card:hover img{transform:scale(1.045)}
.product-card{transition:box-shadow .3s ease,transform .3s ease}
.product-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(60,44,20,.10)}
.btn{transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .18s ease}
.btn:active{transform:translateY(1px)}
.carousel-arrow{transition:background-color .2s ease,transform .2s ease}
.carousel-arrow:hover{background:#fff;transform:scale(1.07)}
.carousel-dots button{transition:background-color .25s ease,width .25s ease}
.carousel-dots button[aria-current=true]{width:22px;border-radius:5px}
}

/* ── Product cards ─────────────────────────────────────────────────────────
   One 4:5 frame everywhere, equal card heights in a row, and the purchase
   control pinned to the bottom so prices and buttons line up across a grid
   regardless of how long a product name runs. */
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}
.product-card{display:flex;flex-direction:column;height:100%}
.product-card .card-media{aspect-ratio:4/5;background:#f2e8d8;border-radius:12px}
.product-card .card-quickadd{margin-top:auto;padding-top:12px}
.card-cat{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9a8c74;margin:0 0 5px}
.card-benefits{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0;padding:0;list-style:none}
.card-benefits li{font-size:10.5px;line-height:1;padding:6px 9px;border-radius:999px;background:#f3ead9;border:1px solid #e7d8bd;color:#6f5c3c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.badge-save{background:#2f2a22;color:#fff;font-weight:650}
.card-foot{margin-top:11px}
@media(max-width:1200px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 13px}
.card-benefits{gap:5px;margin-top:7px}
.card-benefits li{font-size:9.5px;padding:5px 7px}
.card-benefits li:nth-child(n+2){display:none}
}

/* ── Product card polish ───────────────────────────────────────────────────
   Hover effects are gated behind `hover: hover` so a phone never gets a
   sticky :hover state after a tap, and touch gets its own press feedback
   instead of nothing. */
.product-card{border:1px solid #efe6d6;border-radius:14px;padding:11px 11px 14px;background:#fffdf9}
.product-card .card-media{margin-bottom:12px;border-radius:10px}
.product-card .card-cat{padding-inline:2px}
.product-card .card-title{margin:0 0 4px;padding-inline:2px;line-height:1.3}
.product-card .card-desc{padding-inline:2px;color:var(--muted)}
.product-card .card-benefits{padding-inline:2px}
.product-card .card-foot{padding-inline:2px}
.product-card .badge-stack{top:9px;left:9px}
.product-card .wish-btn{top:9px;right:9px}
@media(hover:hover){
.product-card:hover{border-color:#e2cfae;transform:translateY(-3px);box-shadow:0 16px 36px rgba(60,44,20,.11)}
.product-card:hover .card-media img{transform:scale(1.05)}
.product-card:hover .card-title a{color:#8a6220}
}
@media(hover:none){
.product-card{transition:transform .14s ease,box-shadow .14s ease}
.product-card:active{transform:scale(.985);box-shadow:0 6px 18px rgba(60,44,20,.10)}
.product-card .card-quickadd .btn:active{transform:scale(.97)}
}
.card-title a{transition:color .2s ease}
.card-quickadd .btn-primary{background:var(--brand-cta,#252522);border-color:var(--brand-cta,#252522)}
@media(hover:hover){.card-quickadd .btn-primary:hover{background:color-mix(in srgb,var(--brand-cta,#252522),#fff 12%);border-color:var(--brand-cta,#252522)}}

/* ── Standalone promo strip ────────────────────────────────────────────────
   The section builder pins this slide to `aspect-ratio: 3.1` inline, which is
   fine for a heading and a button but clips anything longer — adding a
   supporting line pushed the CTA 76px below the slide's hidden overflow. Treat
   the ratio as a floor instead: a minimum height, then grow with the copy. */
@media(min-width:768px){
.wrap.section>.luxury-slide{aspect-ratio:auto!important;min-height:380px!important;display:flex;align-items:center}
.wrap.section>.luxury-slide .luxury-slide-copy{padding:42px clamp(32px,4.4vw,64px);max-width:52%;min-height:0}
.wrap.section>.luxury-slide .luxury-slide-copy h2{font-size:clamp(30px,3.1vw,44px);margin-bottom:14px}
.wrap.section>.luxury-slide .luxury-slide-copy p:not(.eyebrow){font-size:15px;line-height:1.55;max-width:38ch;margin-bottom:22px}
}

/* ── Sitewide motion and interaction ───────────────────────────────────────
   The reveal transition above is shared by every page; what follows is the
   interaction layer — focus, hover and press — for the surfaces outside the
   homepage and the PDP.

   Three rules hold throughout:
   • everything sits inside `prefers-reduced-motion: no-preference`, so a
     visitor who asks for stillness gets a completely static site;
   • hover effects are gated behind `hover: hover`, because a phone resolves
     :hover on tap and leaves the state stuck after the finger lifts;
   • touch gets its own `:active` feedback instead, which is what a tap
     actually wants — a press, not a lift.
   Only transform and opacity are animated on the scroll path, so reveals stay
   off the main thread; colour transitions are confined to input states. */
@media(prefers-reduced-motion:no-preference){

/* Journal and article cards, matching the product-card treatment. */
.post-card{transition:transform .3s ease,box-shadow .3s ease}
.post-card .pc-media img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){
  .post-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(60,44,20,.10)}
  .post-card:hover .pc-media img{transform:scale(1.045)}
}
@media(hover:none){
  .post-card{transition:transform .14s ease,box-shadow .14s ease}
  .post-card:active{transform:scale(.985);box-shadow:0 6px 18px rgba(60,44,20,.10)}
}

/* Panels and cards on account, cart, checkout and the corporate pages. */
.panel,.order-card,.auth-card{transition:box-shadow .3s ease,border-color .3s ease}
@media(hover:hover){
  .order-card:hover{box-shadow:0 10px 26px rgba(60,44,20,.08)}
}

/* Form fields: a focus ring that arrives rather than snaps. Colour only —
   never animate height or padding on a focused field, it shifts the layout
   under the cursor. */
.input,.select,textarea.input,.field input,.field select,.field textarea{
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease
}

/* Text links already carry a border-bottom that changes colour on hover, so
   they need no second underline — drawing one would double the rule. What is
   missing is the arrow: most of these end in "↗", and nudging it is the cue
   that the link leads somewhere. The glyph is inline text, so it is shifted
   through the gap rather than transformed. */
.text-link{transition:border-color .2s ease,color .2s ease,gap .22s ease}
@media(hover:hover){
  .text-link:hover{gap:9px}
}

/* FAQ and any other <details> disclosure. */
.accordion summary{transition:color .2s ease}
.accordion details[open] .acc-body{animation:ansa-acc .32s cubic-bezier(.22,.61,.36,1)}
@keyframes ansa-acc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Account navigation and footer columns. */
.account-nav a,.footer-grid a{transition:color .2s ease,opacity .2s ease}

/* Icon buttons in the header. */
.icon-btn{transition:background-color .2s ease,transform .18s ease}
@media(hover:hover){.icon-btn:hover{transform:translateY(-1px)}}
.icon-btn:active{transform:translateY(0) scale(.94)}

/* Collection and category tiles already zoom their image; give the tile the
   same lift the product card has so a grid of mixed cards moves as one. */
.collection-card{transition:transform .3s ease,box-shadow .3s ease}
@media(hover:hover){
  .collection-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(60,44,20,.10)}
}
@media(hover:none){.collection-card:active{transform:scale(.985)}}

/* Thumbnail rail on the PDP. */
.pdp-thumb{transition:border-color .2s ease,transform .2s ease}
@media(hover:hover){.pdp-thumb:hover{transform:translateY(-2px)}}

/* Quantity steppers, pills and small controls. */
.qty button,.pill,.link-btn{transition:background-color .2s ease,color .2s ease,transform .16s ease}
.qty button:active,.link-btn:active{transform:scale(.93)}

/* Tablet keeps the full treatment; the only thing that changes with width is
   how far a revealed element travels, so the movement stays proportionate to
   the viewport rather than looking large on a phone and timid on a desktop. */
}
@media(prefers-reduced-motion:no-preference) and (max-width:767px){
  [data-reveal]{transform:translateY(10px)}
}
@media(prefers-reduced-motion:no-preference) and (min-width:1200px){
  [data-reveal]{transform:translateY(18px)}
}

/* ── Auth brand band ───────────────────────────────────────────────────────
   The sign-in, register and reset cards sit on the cream panel, where the
   white wordmark has no contrast at all. Rather than keep a second coloured
   logo in rotation, the mark gets the surface it is drawn for: the same
   near-black the site header uses, so the band reads as brand rather than as
   a box someone forgot to style.

   The anchor carries an inline `display:inline-block`, which no stylesheet can
   override, so the band is built from padding and background only — nothing
   here depends on changing its display type. */
.auth-card .wordmark{
  background:rgb(13,14,12);
  border-radius:14px;
  padding:16px 22px;
  line-height:0;            /* kills the inline descender gap under the img */
  border:0
}
.auth-card .wordmark .theme-brandmark{max-width:166px;max-height:40px}
@media(max-width:767px){
  .auth-card .wordmark{padding:14px 18px}
  .auth-card .wordmark .theme-brandmark{max-width:150px;max-height:36px}
}
@media(prefers-reduced-motion:no-preference){
  .auth-card .wordmark{transition:transform .25s ease,box-shadow .25s ease}
  @media(hover:hover){
    .auth-card .wordmark:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,14,12,.22)}
  }
}

/* ── Tap targets: WCAG 2.2 SC 2.5.8 (Target Size, Minimum — AA) ────────────
   Audited 2026-10-21 at 390/768/1440: footer column links render 16–18px
   tall, megamenu links 16px, carousel dots 22x9, and the header wordmark
   109x21. All fall under the 24x24 CSS px minimum, and none qualify for the
   Inline exception — they are navigation lists and controls, not links
   sitting inside a sentence. (`.text-link` inside prose IS exempt and is
   deliberately left alone.)

   The fix enlarges the hit area with a transparent ::after rather than
   padding, so nothing moves: the links keep their measured rhythm and the
   dots keep their size. Measured clearances before choosing the numbers —
   footer columns have 17px vertical gaps and the dots a 31px pitch (22 wide
   + 9 gap) — so a 24px area cannot overlap its neighbour and steal its tap. */
.site-footer a,
.megamenu a,
.site-header .wordmark,
.carousel-dots button{position:relative}

.site-footer a::after,
.megamenu a::after,
.site-header .wordmark::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  /* `width:100%` tracks the link; `min-width` catches the short labels —
     "FAQ" measures 23px, one pixel under the minimum on its own. */
  width:100%;min-width:24px;height:24px;
  /* behind the text so it can never cover a sibling's own label */
  z-index:0
}

.carousel-dots button::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:24px;height:24px;z-index:0
}

/* A collapsed mobile footer column needs no guard here: the disclosure is
   `.f-toggle:checked + .f-head + .footer-links{display:block}`, so a closed
   column's links are `display:none` and render no ::after at all. */

/* Second tap-target batch: breadcrumbs, product-card titles and the
   standalone action links. Same ::after technique, but height-only — these
   sit in flowing text far more often than the footer links do, and forcing a
   minimum width could push one link's hit area over its neighbour on the
   same line. Height is the dimension that actually fails here: the measured
   boxes are 13–23px tall but comfortably wide.

   `.text-link` inside a sentence stays exempt under SC 2.5.8's Inline
   exception; it is included anyway because a taller hit area costs nothing
   and the same class is used for standalone actions ("Share product ↗",
   "Save to wishlist ♡") where the exception does not apply. */
.breadcrumb a,
.card-title a,
.text-link,
.link-btn,
.toc a,
.trust-strip a{position:relative}

.breadcrumb a::after,
.card-title a::after,
.text-link::after,
.link-btn::after,
.toc a::after,
.trust-strip a::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:24px;z-index:0
}

/* ── Product card: alternate image on hover ────────────────────────────────
   Pattern sourced from 21st.dev's product-card family (image carousel with a
   cross-fade), then rebuilt here: those components are React + framer-motion
   and carry ratings, review counts, colour swatches and "free shipping"
   flags, none of which this catalogue has. What ports is the interaction —
   a second photograph fading in over the packshot — which is worth having
   because every AnsaSkin product has six images and the card showed one.

   Blade renders the second <img> only when a real second image exists, so a
   single-image product gets no extra element and no extra request. */
/* The anchor wraps both frames and becomes their positioning context; it is
   the element that already fills the media box, so nothing moves. */
.card-media > a{position:relative;display:block;width:100%;height:100%}

.card-media .card-img-alt{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  /* Not display:none — a hidden image cannot be decoded ahead of the hover,
     which is what makes the swap snap rather than fade. */
  pointer-events:none
}

@media(prefers-reduced-motion:no-preference){
  .card-media .card-img-main,
  .card-media .card-img-alt{transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
}

/* Hover only. A phone resolves :hover on tap and would strand the card on
   its second image after the finger lifts, so touch keeps the packshot —
   the gallery is one tap away on the product page. */
@media(hover:hover){
  .product-card:hover .card-img-alt,
  .product-card:focus-within .card-img-alt{opacity:1}
  .product-card:hover .card-img-main,
  .product-card:focus-within .card-img-main{opacity:0}
  /* The existing zoom applies to both frames so the pair moves as one. */
  .product-card:hover .card-media img{transform:scale(1.045)}
}

/* ── Legibility floor for labels ───────────────────────────────────────────
   Audited 2026-10-22 at 390px: seven label styles rendered under 11px, the
   smallest an 8px "Upcoming Product" badge, with the discount badge and the
   benefit chips at 9.5px. Apple and Android both put their legibility floor
   around 11px, and a discount is commercially important text to set smaller
   than that.

   This raises only the floor. The hierarchy is untouched — badges stay
   smaller than chips, which stay smaller than body — and nothing above 11px
   moves, so the type scale and the art direction are unchanged. Padding is
   trimmed a touch where the type grew, so the pills keep their footprint and
   the card grid does not reflow. */
@media(max-width:767px){
  .badge-upcoming{font-size:11px;padding:4px 7px}
  .badge-save,.badge-out{font-size:11px}
  .card-benefits li{font-size:11px;padding:4px 8px}
  .price-off{font-size:11px}
  .trust-strip b{font-size:11px}
}

/* ── Free-delivery progress ────────────────────────────────────────────────
   Shown in the bag only when there is a real threshold to work toward; see
   partials/free-shipping-progress.blade.php. Uses the existing tokens, so it
   follows whichever palette is active. */
.free-ship{margin:4px 0 14px}
.free-ship__text{font-size:12.5px;color:var(--ink);margin:0 0 7px}
.free-ship__track{height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.free-ship__fill{display:block;height:100%;border-radius:999px;background:var(--ink)}
.free-ship.is-qualified .free-ship__fill{background:var(--success)}
@media(prefers-reduced-motion:no-preference){
  .free-ship__fill{transition:width .45s cubic-bezier(.22,.61,.36,1)}
}

/* ── Carousel pause control (WCAG 2.2.2, Level A) ──────────────────────────
   Injected by integration.js only when autoplay is actually running, so it
   never appears next to a single slide or for a visitor who asked for
   reduced motion.

   Sized past the 24px target minimum like the rest of the storefront's
   controls, and drawn with currentColor so it follows whichever palette is
   active rather than needing a rule per palette. */
.carousel-pause{
  width:26px;height:26px;min-width:26px;min-height:26px;padding:0;
  margin-left:6px;border:0;border-radius:50%;
  background:transparent;color:var(--ink,#252522);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  /* The dots sit on the slide image; a soft ground keeps the glyph readable
     over a light or dark photograph. */
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 32%, transparent)
}
/* Two bars when playing (press to pause), a triangle when paused (press to
   play) — the control shows the action, not the state, which is the
   convention every media player uses. */
.carousel-pause::before{
  content:"";display:block;width:8px;height:9px;
  /* Two bars drawn as a gradient. A clip-path polygon cannot describe two
     disjoint rectangles in one closed path — the first attempt rendered as a
     notched blob. */
  background:linear-gradient(to right,
    currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%)
}
.carousel-pause[aria-pressed="true"]::before{
  width:9px;background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%)
}
.carousel-pause:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* The dots and the pause control are one control group, centred as a whole.

   This used to carry a 32px spacer pseudo-element on the opposite side, which
   centred the DOTS and let the control hang off the right of centre. Centring
   the group is what reads as deliberate, and it needs nothing but the flex
   row's own `justify-content:center` — margins are part of flex layout, so
   the control's 6px separation is inside the centred group rather than
   something to compensate for.

   `align-items` is the other half: the row never set it, so it defaulted to
   `stretch`, which for children carrying their own height (9px dots, a 26px
   button) places each at the start of the cross axis. The dot centreline then
   sat ~8px above the button's. */
.carousel-dots{align-items:center}
.carousel-dots button{flex:0 0 auto}
@media(prefers-reduced-motion:no-preference){
  .carousel-pause{transition:box-shadow .2s ease,transform .18s ease}
  .carousel-pause:active{transform:scale(.92)}
}
@media(hover:hover){
  .carousel-pause:hover{box-shadow:inset 0 0 0 1px currentColor}
}

/* ── Mobile header: centred logo, larger icons ─────────────────────────────
   The logo sits inside `.row.gap-2` next to the burger, so it was pinned to
   the left — 95px off centre at 390px. It is lifted out of that flow and
   centred on the header itself; the burger keeps the left, the actions keep
   the right.

   The icons grow vertically and in glyph size, NOT in width, and that is
   deliberate. Measured at 360px, a centred logo clears the action group by
   only 5px. Widening the four buttons by even 2px each would push them into
   the logo on the narrowest phones, so the extra size is taken where there
   is actually room: a taller button, a bigger glyph, and a taller header to
   hold them. */
/* Three tracks, the outer two equal, so the centre track — and the logo in
   it — is centred on the header box however much wider the four action icons
   are than the single menu button. It runs from the breakpoint where the
   primary nav is hidden, so the tablet header is centred too; before this it
   was only ever applied below 768px, and a tablet showed the logo sitting
   against the menu button in a left-hand track.

   The logo used to be centred with `position:absolute;left:50%;translate`
   over a `space-between` flex row. Out of flow it could not be kept off the
   icons by the layout, only by a hand-measured `max-width:calc(100vw - 244px)`
   that encoded the icon count and ignored both the header's padding and the
   scrollbar. In the grid the centre track is bounded by its neighbours, so
   overlap is not expressible.

   `display:contents` lifts the menu button and the wordmark out of the
   wrapper they share, so each can take a track of its own and the markup the
   desktop header relies on is untouched. The centre track is the only one
   allowed to shrink, so a narrow phone takes width off the logo rather than
   off the controls. */
@media(max-width:1024px){
  .site-header .header-inner{
    display:grid;
    /* A plain `1fr` keeps each track's content as an automatic minimum, so
       the two outer tracks stay equal — and the logo stays on the header's
       true centre — only while the action group fits inside its fr share.
       The icon widths below are sized so it does, down to 320px; the logo
       cap further down is the other half of that budget. */
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
    /* The blueprint's bar: 64px tall, 16px gutters. The 78px height was for
       the stacked lockup, which the compact one replaced — at 132px wide it
       stands 35px tall, so the taller bar bought nothing but a thicker band
       of black above the fold. */
    min-height:64px;
    padding-inline:16px
  }
  .site-header .header-inner > .row.gap-2{display:contents}
  .site-header .row.gap-2 > .nav-toggle{grid-column:1;justify-self:start}
  .site-header .row.gap-2 > .wordmark{
    grid-column:2;justify-self:center;
    min-width:0;display:flex;align-items:center
  }
  .site-header .header-inner > .header-actions{grid-column:3;justify-self:end}
  .site-header .row.gap-2 > .wordmark .theme-brandmark{
    max-width:100%;height:auto
  }
}

@media(max-width:767px){

  /* The action group has to fit inside half of what is left after the logo,
     or the right track floors wider than the left one and the logo slides
     off true centre. Four buttons at 25px with no gap is 100px, inside the
     fr share at 360px. Width is all that comes in: each button is still 48px
     tall and its glyph 24px, so the target stays past the 24px minimum in
     the dimension a thumb actually misses. */
  .site-header .header-actions{gap:0}
  .site-header .header-actions .icon-btn{width:25px}
  .site-header .nav-toggle{width:26px}

  /* Taller target and a bigger glyph. Button width is left alone on purpose:
     a centred wordmark clears the action group by only 5px at 360px. The
     padding is what makes room for the glyph — svg carries max-width:100%,
     so a 28px button with 4px padding capped it at 20px however wide the
     width declaration was. */
  .site-header .header-actions .icon-btn{height:48px;padding:2px}
  .site-header .header-actions .icon-btn svg{width:24px;height:24px}
  .site-header .nav-toggle{height:48px;padding:2px}
  .site-header .nav-toggle svg{width:24px;height:24px}
}


/* ── Saving badge, wishlist and WhatsApp ───────────────────────────────── */

/* The percentage is computed in Blade from the product's own price and MRP —
   no new field, no rounding that could overstate it (round(), not ceil()).
   It renders only when both figures exist and the saving is at least 1%. */
/* Scoped to the product page on purpose: `.price-off` already existed for
   the discount badge on product cards (10px, gold). An unscoped rule here
   restyled every card on the site as a side effect of adding the badge to
   the PDP — caught by diffing against production, not by looking at the PDP. */
.pdp-price .price-off{
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--success);
  border-radius:999px;padding:3px 9px;margin-left:10px;white-space:nowrap;
  align-self:center
}
.price-off[hidden]{display:none}

/* "Save to wishlist" was a text link with an underline, below the fold of the
   buying block and easy to miss. It is now a bordered control above the stock
   line, with the heart filling when the product is saved. */
.wish-form{margin:0 0 14px}
.wish-save{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:8px 16px;
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer
}
.wish-save svg{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round
}
.wish-save[aria-pressed="true"]{border-color:var(--terracotta);color:var(--terracotta)}
.wish-save[aria-pressed="true"] svg{fill:currentColor}
.wish-save:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){
  .wish-save{transition:border-color .2s ease,color .2s ease,background-color .2s ease}
}
@media(hover:hover){
  .wish-save:hover{border-color:var(--ink);background:var(--surface-sunk)}
}

/* Inline WhatsApp on the product page.

   A floating corner button was built first and removed: measured at 360,
   390, 768 and 1440 it sat on top of links, cards and the PDP's own "Add to
   cart" at many scroll positions. Overlapping scrolling content is what a
   fixed button does, so no amount of repositioning fixes it. These inline
   controls cannot cover anything, and the product-page one carries the
   product name in the prefilled message.

   #252522, not the brighter #25D366: white on #25D366 is 1.98:1, failing
   even the 3:1 WCAG 1.4.11 asks of the glyph. #128C7E was the next try at
   4.14:1 — enough for an icon, short of the 4.5:1 the label beside it needs
   at 13px. This is darker again and measures 5.2:1. */
.wa-inline{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:14px;min-height:44px;padding:10px 18px;
  border-radius:999px;text-decoration:none;
  background:#0F7A6E;color:#fff;font-size:13px;font-weight:650
}
.wa-inline svg{width:19px;height:19px;flex:0 0 auto;fill:currentColor;stroke:none}
.wa-inline:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .wa-inline{transition:background-color .2s ease}
}
@media(hover:hover){
  .wa-inline:hover{background:#0B6457}
}
/* At 320 the label wrapped to two lines and the pill became a 62px blob.
   The padding and gap come in rather than the type, so the control keeps its
   shape and the text stays one line on the narrowest phones. */
@media(max-width:359px){
  .wa-inline{padding:10px 14px;gap:7px;font-size:12.5px}
  .wa-inline svg{width:17px;height:17px}
}

.wa-footer{margin-top:16px}

/* The palettes recolour every footer link to --p-footer-link, an off-white
   that drops this label to ~4.1:1 on the green. The button is not a footer
   link in the usual sense, so it keeps pure white — stated at a specificity
   that beats `html[data-palette] .site-footer a`. */
html[data-palette] .site-footer a.wa-inline,
.site-footer a.wa-inline,
a.wa-inline{color:#fff}


/* ── Busy state for async submits ─────────────────────────────────────────
   Add to cart and wishlist post in the background. The button was only
   disabled, which on a slow connection reads as a tap that did nothing. The
   label stays put and a ring spins beside it, so nothing reflows. */
@keyframes ansa-spin{to{transform:rotate(360deg)}}
[data-busy="true"]{position:relative}
[data-busy="true"]::before{
  content:"";display:inline-block;vertical-align:-2px;
  width:13px;height:13px;margin-right:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:ansa-spin .65s linear infinite
}
/* No spinner where motion is unwelcome — disabled plus aria-busy already
   say it, and a frozen ring says nothing at all. */
@media(prefers-reduced-motion:reduce){
  [data-busy="true"]::before{display:none}
}


/* ── Quick view ───────────────────────────────────────────────────────────
   Same mechanics as the search overlay — data-open, a visibility transition,
   and the shared close/focus machinery in integration.js — so it inherits
   Escape, the backdrop click, the scroll lock and focus return without a
   second implementation of any of them. */
.qv-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(37,37,34,.42);
  opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),visibility .22s;
  display:grid;place-items:center;padding:var(--s4)
}
.qv-overlay[data-open="true"]{opacity:1;visibility:visible}
/* The panel fades rather than rising.
 *
 * A composited layer moved by a fractional number of pixels is resampled,
 * which softens every edge it owns — here the rounded corners and the
 * shadow, for the whole 250ms. Only whole-pixel moves stay crisp, and a
 * timed transition cannot promise those. Opacity costs nothing to
 * rasterise, so the border stays sharp from the first frame; the backdrop
 * fading in behind it still gives the dialog its sense of arrival. */
.qv-panel{
  position:relative;background:var(--surface,#fff);border-radius:var(--r-lg);
  width:min(880px,100%);max-height:88vh;overflow:auto;overscroll-behavior:contain;
  box-shadow:var(--shadow-lg);
  opacity:0;transition:opacity .2s var(--ease)
}
.qv-overlay[data-open="true"] .qv-panel{opacity:1}
.qv-close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:40px;height:40px;border-radius:50%;background:var(--surface,#fff)
}
.qv-content{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:var(--s6);padding:var(--s6)}
.qv-media img{width:100%;height:auto;border-radius:var(--r);background:var(--surface-sunk);object-fit:cover}
.qv-body h2{font-size:clamp(22px,2.4vw,30px);margin:4px 0 10px}
.qv-price{font-size:23px;font-weight:650;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:10px 0}
.qv-body .text-link{display:inline-block}
[data-quick-view-loading]{padding:var(--s6)}

@media(prefers-reduced-motion:reduce){
  .qv-overlay,.qv-panel{transition:none}
}

@media(max-width:767px){
  .qv-overlay{padding:0;place-items:end stretch}
  .qv-panel{
    width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0
  }
  /* One column on a phone, and the image gives way to the buying block —
     the shopper opened this to choose a size, not to look at the photograph
     again. */
  .qv-content{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5) var(--s4) var(--s6)}
  .qv-media img{max-height:34vh;object-fit:contain}
}

/* Secondary to the card's own buy action, and quiet enough to stay that way. */
.card-quickview{display:inline-block;margin-top:9px;font-size:12px}


/* Inline checkout validation. Deliberately not colour alone: the message is
   the signal, the colour reinforces it. */
.field-error{
  margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--danger);
  display:flex;align-items:flex-start;gap:6px
}
.field-error::before{content:"!";
  flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:10px;line-height:15px;text-align:center
}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field [aria-invalid="true"]:focus{outline-color:var(--danger)}

/* ── Compact brand lockup below the desktop breakpoint ─────────────────────
   The compact mark is 967x258 against the desktop lockup's 1559x297, so at a
   given box width it sets the wordmark roughly 1.4x taller. Width is pinned
   per breakpoint and the height follows the aspect ratio; the max-height only
   stops a wide box from growing the header bar. Picked so the tablet logo
   reads at about the same optical size as the desktop one, rather than
   jumping when the breakpoint flips. */
@media(max-width:1024px){.site-header .theme-brandmark{width:152px;max-height:48px}}
/* The logo's share of the width. Equal outer tracks give each side
   (available - logo - gaps)/2, and that has to stay at or above the action
   group, or the grid floors the right track wider and true centre is lost.
   31vw satisfies it from 360px up; the two narrower steps buy the margin
   back on phones below the sizes we test. */
@media(max-width:767px){.site-header .theme-brandmark{width:clamp(80px,29vw,132px);max-height:40px}}
/* Below the blueprint's smallest width the 16px gutters cost more than they
   are worth: 32px of padding against a 320px screen is a tenth of the bar.
   The gutter and the icons both come in a step so the logo keeps a usable
   width and the tracks stay equal. */
@media(max-width:359px){
  .site-header .header-inner{padding-inline:12px;gap:8px}
  .site-header .header-actions .icon-btn{width:24px}
  .site-header .theme-brandmark{width:80px}
}

/* ── Floating WhatsApp control ─────────────────────────────────────────────
   Replaces the inline pills that sat in the footer column and in the product
   buy-box. Those put a saturated WhatsApp green inside an ivory-and-gold
   layout and, on the product page, read as a third call to action beside Add
   to bag. Floating, it is available everywhere and owns no space in the page.

   It sits above the sticky mobile purchase bar rather than over it: that bar
   is the primary action on a phone and must not be covered. The offset is
   taken from the same safe-area inset the bar uses. */
.wa-fab{
  position:fixed;z-index:70;right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 18px;border-radius:999px;
  background:#0F7A6E;color:#fff;font-size:13px;font-weight:650;
  text-decoration:none;box-shadow:0 8px 24px rgba(13,14,12,.28)
}
.wa-fab svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor;stroke:none}
.wa-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* A page with the purchase bar gives the control the bar's height plus a gap,
   so the two never overlap on a product page. */
body:has(.mobile-purchase) .wa-fab{bottom:calc(76px + env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:no-preference){
  .wa-fab{transition:background-color .2s ease,transform .18s ease}
  .wa-fab:active{transform:scale(.96)}
}
@media(hover:hover){.wa-fab:hover{background:#0B6457}}
/* Circular on a phone: the label is what makes it wide, and a wide floating
   control covers product cards as the page scrolls. */
@media(max-width:767px){
  .wa-fab{width:52px;padding:0;justify-content:center;gap:0}
  .wa-fab__label{display:none}
}

/* ── Journal cards, two up on a phone ──────────────────────────────────────
   `.grid-3` collapses to a single column at 760px, which gave the related
   reading rail one enormous card per screen. Two up reads as a set and puts
   the second article above the fold; the type steps down with it so the
   headline still fits a half-width card. */
@media(max-width:760px){
  .grid-3:has(> .post-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 13px}
  .grid-3:has(> .post-card) .post-card h3{font-size:14.5px;line-height:1.3}
  .grid-3:has(> .post-card) .post-card p{font-size:12px}
  .grid-3:has(> .post-card) .post-meta{font-size:10px;letter-spacing:.04em}
  .grid-3:has(> .post-card) .pc-media{aspect-ratio:4/3;margin-bottom:10px}
}

/* ── Reference sections: figures band, before/after, spin & win ────────────
   The structure is taken from the Shiva's Signature Salon reference — a dark
   full-bleed band of counted figures, a dragged comparison, a reel of offers.
   The colour is not: that site is maroon and bright gold on warm ivory, which
   against AnsaSkin's ivory-and-gold would read as a second brand. The band
   takes a deep espresso drawn from the existing ink, the figures the gold
   already used for the cart badge, and the eyebrow rule is untouched. */
:root{
  /* Chrome: the dark the header, footer, drawer and bands share. */
  --chrome:#252522;
  --chrome-ink:#cec9bf;
  --chrome-line:#36362f;
  /* The bands are the same surface, with gold for the figures. */
  --band:var(--chrome);--band-ink:var(--chrome-ink);--band-figure:#d9ab58
}

.stat-band{background:var(--band);color:var(--band-ink);padding-block:34px;margin-block:10px}
.stat-band-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}
.stat-item{display:flex;align-items:center;gap:14px;min-width:0}
.stat-icon{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(244,233,220,.1)}
.stat-icon img{width:24px;height:24px;object-fit:contain}
.stat-figure{font-family:var(--font-display);font-size:clamp(27px,3vw,38px);line-height:1;color:var(--band-figure);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-caption{font-size:13px;margin-top:6px;color:var(--band-ink);opacity:.86;line-height:1.35}
@media(max-width:760px){
  .stat-band{padding-block:26px}
  .stat-band-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .stat-icon{flex:0 0 38px;width:38px;height:38px}
  .stat-icon img{width:20px;height:20px}
  .stat-caption{font-size:11.5px}
}

.section-head-center{justify-content:center;text-align:center}
.section-head-center .lede{margin-inline:auto;max-width:56ch}

/* The divider is a styled range input, so dragging, tapping, arrow keys and
   screen-reader output all come from the platform rather than from pointer
   maths. The visible handle is a sibling the script positions. */
.compare-wrap{position:relative;max-width:980px;margin:22px auto 0;border-radius:15px;overflow:hidden;background:var(--surface-sunk);isolation:isolate}
.compare-img{display:block;width:100%;height:auto}

/* The overlay is the same full-size image as the one underneath, revealed by
   clipping rather than by being given a narrower box. Sizing the overlay
   instead meant its image had to be re-sized to match the one beneath it,
   which only held while both kept their natural ratio — the moment the frame
   was constrained to fit a screen, the two halves stopped lining up. Clipping
   leaves both images identical, so they line up by construction whatever the
   frame does. */
.compare-after{position:absolute;inset:0;width:100%;clip-path:inset(0 50% 0 0)}
.compare-after .compare-img{width:100%;height:100%}

/* One screen, from the heading to the disclaimer. The photographs are
   portrait, so at the full 980px the frame alone stood 660px tall and the
   section ran past the fold on every laptop. */
@media(min-width:768px){
  .compare-wrap{height:min(56svh,520px);max-width:none;width:fit-content}
  .compare-wrap .compare-img{width:auto;height:100%;max-width:none;object-fit:cover}
  .compare-after .compare-img{width:auto}
}
.compare-tag{position:absolute;top:14px;z-index:2;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:650;letter-spacing:.04em;background:rgba(13,14,12,.72);color:#fff}
.compare-tag-before{right:14px}
.compare-tag-after{left:14px}
.compare-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;background:transparent}
.compare-range:focus-visible+.compare-handle{outline:2px solid var(--gold);outline-offset:3px}
.compare-handle{position:absolute;top:0;bottom:0;z-index:3;left:50%;translate:-50% 0;width:3px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(13,14,12,.18)}
.compare-handle::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(13,14,12,.3)}
.compare-note{max-width:980px;margin:14px auto 0;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
@media(max-width:760px){
  .compare-wrap{border-radius:12px}
  .compare-handle::after{width:34px;height:34px}
  .compare-tag{top:10px;font-size:10px;padding:4px 10px}
}

.spin-section{background:var(--band);color:var(--band-ink);padding-block:clamp(44px,7vw,86px)}
.spin-section .eyebrow{color:var(--band-figure)}
.spin-section h2{color:var(--band-ink)}
.spin-section .lede{color:rgba(244,233,220,.82)}
.spin-machine{max-width:520px;margin:26px auto 0;text-align:center}
.spin-reel{height:92px;display:grid;place-items:center;padding:0 18px;border-radius:14px;overflow:hidden;background:rgba(244,233,220,.07);border:1px solid rgba(217,171,88,.34)}
.spin-face{font-family:var(--font-display);font-size:clamp(19px,2.4vw,26px);line-height:1.15;color:var(--band-ink)}
.spin-go{margin-top:18px;min-width:168px}
.spin-go[disabled]{opacity:.5;cursor:not-allowed}
.spin-result{margin-top:18px;padding:16px;border-radius:12px;background:rgba(244,233,220,.07);border:1px dashed rgba(217,171,88,.5)}
.spin-result strong{display:block;font-size:19px;color:var(--band-figure);letter-spacing:.08em}
.spin-result p{font-size:12px;margin-top:6px;color:rgba(244,233,220,.78)}
.spin-note{font-size:11px;margin-top:16px;color:rgba(244,233,220,.6);line-height:1.5}
@media(prefers-reduced-motion:no-preference){
  .spin-reel[data-spinning="true"] .spin-face{animation:spin-roll .11s linear infinite}
  @keyframes spin-roll{from{transform:translateY(-100%);opacity:.25}to{transform:translateY(100%);opacity:.25}}
}

/* ── Trust strip on a phone ────────────────────────────────────────────────
   It was forced to four columns below 767px, which at 390px is 85px a
   column: every label wrapped to two lines and the supporting line under it
   was hidden outright to make the row fit. Four cramped columns with their
   explanations deleted say less than two columns that can be read, so the
   row goes two up — the same shape the figures band and the journal cards
   take on a phone — and the descriptions come back. */
@media(max-width:767px){
  .trust-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 12px;
    padding:20px 16px;
    text-align:left
  }
  .trust-strip>div{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:10px;
    border-right:0
  }
  .trust-strip img{grid-row:span 2;margin:0;width:26px;height:26px}
  .trust-strip b{font-size:12px;line-height:1.25;align-self:end}
  .trust-strip small{display:block;font-size:10.5px;line-height:1.3;align-self:start;color:var(--muted)}
}
@media(max-width:340px){
  .trust-strip{padding:18px 12px;gap:14px 10px}
  .trust-strip b{font-size:11px}
  .trust-strip small{font-size:10px}
}

/* ── Hero: edge to edge, and sized against the viewport ────────────────────
   The carousel was capped at 1580px with a 16px gutter and a rounded corner,
   so on a 1920 screen the hero sat in a 1548px box with white down both
   sides, and its height came from a fixed aspect ratio rather than from the
   screen — 670px of a 900px viewport at 1440.

   From the tablet breakpoint up the slide now spans the full width and takes
   its height from the viewport, with a px ceiling so a short wide window
   does not stretch the photograph past its natural height. `svh` is the
   small viewport height, which is the stable one while a mobile browser's
   chrome slides in and out.

   Phones are deliberately left alone: there the slide stacks the photograph
   above the copy rather than overlaying it, so a full-height slide would
   push every word of the hero off the first screen. */
@media(min-width:768px){
  .luxury-carousel{max-width:none;margin-top:0;padding:0}
  .luxury-slides{border-radius:0}
  .luxury-slide{
    /* Height is bounded by the WIDTH as well as the viewport. A slide that
       takes 76svh on a 768px tablet is a 1.1:1 box, and these banners are
       2.1:1 and 2.5:1 — covering it throws away nearly half the frame and
       leaves a product cropped top and bottom. Tying the ceiling to vw keeps
       the box near the images' own proportions, so cover trims rather than
       butchers. */
    min-height:min(72svh,52vw,780px);
    aspect-ratio:auto;
    border-radius:0
  }
  .luxury-slide-copy{padding-inline:clamp(40px,6vw,110px)}
  .carousel-dots{position:relative;margin-top:-54px;z-index:2}
}
@media(min-width:1500px){
  .luxury-slide{min-height:min(80svh,860px)}
}

/* ── Figures band: centre each figure in its column ────────────────────────
   The items were flush to the left of four equal columns, so the figures
   read as four left-aligned blocks with a widening ragged gap after the
   last one rather than as a row. Centring the group inside its own column
   makes the rhythm even across the band at every width, with or without the
   optional icon. */
.stat-item{justify-content:center}
.stat-item .stat-figure,.stat-item .stat-caption{text-align:center}
.stat-item:has(.stat-icon) .stat-figure,
.stat-item:has(.stat-icon) .stat-caption{text-align:left}
@media(max-width:760px){
  .stat-band-grid{gap:22px 10px}
}

/* ── Category cards ────────────────────────────────────────────────────────
   Photograph on top in a 4:3 frame, then a row carrying the category name,
   its tagline and a gold arrow. The old card laid the title over the bottom
   of the image in white, which fought every photograph that was pale there —
   and all of these are, because they are shot on ivory.

   Two up on a phone, two on a tablet, four on a desktop. */
.category-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px
}

.category-cards .collection-card{
  background:#f6eddf;
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(71,53,26,.035);
  display:flex;
  flex-direction:column
}
.category-cards .cc-media{aspect-ratio:4/3;background:#f1e4d0;overflow:hidden;border-radius:0}
.category-cards .cc-media img{width:100%;height:100%;object-fit:contain;padding:10px}
@media(max-width:767px){.category-cards .cc-media img{padding:7px}}
.category-cards .cc-body{
  position:static;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  background:#f6eddf;
  text-align:left;
  flex:1
}
.category-cards .cc-copy{min-width:0;flex:1}
.category-cards .cc-body h3{
  font-family:var(--font-display);
  font-size:19px;
  line-height:1.15;
  color:var(--ink);
  margin:0
}
.category-cards .cc-body p{
  display:block;
  font-size:12.5px;
  line-height:1.4;
  color:#77766e;
  margin:6px 0 0
}
.category-cards .cc-arrow{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--gold);
  color:#fff
}
@media(prefers-reduced-motion:no-preference){
  .category-cards .collection-card{transition:transform .35s ease,box-shadow .35s ease}
  .category-cards .cc-media img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .category-cards .cc-arrow{transition:background-color .25s ease,transform .25s ease}
}
@media(hover:hover){
  .category-cards .collection-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(71,53,26,.12)}
  .category-cards .collection-card:hover .cc-media img{transform:scale(1.045)}
  .category-cards .collection-card:hover .cc-arrow{background:var(--ink);transform:rotate(-45deg)}
}
.category-cards .collection-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:1000px){
  .category-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:767px){
  .category-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  .category-cards .collection-card{border-radius:17px}
  .category-cards .cc-media{aspect-ratio:1/1}
  .category-cards .cc-body{padding:12px 13px;gap:8px}
  .category-cards .cc-body h3{font-size:14.5px}
  .category-cards .cc-body p{font-size:11px;margin-top:4px}
  .category-cards .cc-arrow{width:32px;height:32px}
  .category-cards .cc-arrow svg{width:15px;height:15px}
}
@media(max-width:340px){
  .category-cards .cc-body h3{font-size:13px}
  .category-cards .cc-body p{font-size:10.5px}
  .category-cards .cc-arrow{width:28px;height:28px}
}

/* ── Mobile and tablet header ──────────────────────────────────────────────
   The reference header, measured off it: a 66px bar, an 18.8px gutter, and
   four action icons whose centres fall 48px apart — a 40px button beside an
   8px gap. The brand sits at the left, next to the menu button.

   That last part is what makes the rest possible. A centred brand has to pay
   for BOTH side columns out of the same line, so at 390px four 40px buttons
   would leave the middle about 22px and the logo would collapse. Left of
   centre it pays for one, and the same line comfortably holds a 40px target
   and a readable wordmark. The two cannot both be had below 1025px; this is
   the reference's trade and it is the one being made here.

   The logo's width is still derived rather than guessed: --logo-max is what
   the line has left once the gutters, the menu button and the action group
   are paid for, and min() takes whichever is smaller. */
@media(max-width:1024px){
  .site-header .header-inner{
    --header-h-m:66px;
    --header-pad:19px;
    --icon-size:22px;
    --icon-gap:8px;
    --logo-w:132px;
    --target:40px;
    --brand-gap:9px;
    --clearance:12px;

    --actions-w:calc(4 * var(--target) + 3 * var(--icon-gap));
    --logo-max:calc(100vw - 2 * var(--header-pad) - var(--target) - var(--brand-gap) - var(--actions-w) - var(--clearance));

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--brand-gap);
    min-height:var(--header-h-m);
    padding-inline:var(--header-pad)
  }
  .site-header .header-inner > .row.gap-2{
    display:flex;
    align-items:center;
    gap:var(--brand-gap);
    min-width:0
  }
  .site-header .header-actions{gap:var(--icon-gap);flex:0 0 auto}
  .site-header .header-actions .icon-btn,
  .site-header .nav-toggle{width:var(--target);flex:0 0 var(--target);padding:0}
  .site-header .header-actions .icon-btn svg,
  .site-header .nav-toggle svg{width:var(--icon-size);height:var(--icon-size)}
  .site-header .theme-brandmark{
    width:min(var(--logo-w),var(--logo-max));
    max-width:100%;
    height:auto;
    max-height:calc(var(--header-h-m) - 18px)
  }
}

/* Tablet */
@media(min-width:768px) and (max-width:1024px){
  .site-header .header-inner{--logo-w:145px}
}

/* Standard and large mobile */
@media(min-width:391px) and (max-width:767px){
  .site-header .header-inner{--icon-size:20px}
}

/* Small mobile: the target comes in a step so the wordmark keeps a width
   worth reading. Still past the 24px minimum. */
@media(max-width:390px){
  .site-header .header-inner{
    --header-pad:12px;
    --icon-size:18px;
    --target:36px;
    --logo-w:118px
  }
}
@media(max-width:359px){
  .site-header .header-inner{
    --header-pad:10px;
    --icon-gap:6px;
    --target:32px;
    --logo-w:96px
  }
}


/* The counting figure must not move the page.
   It rewrites its own text every frame on the way up, and an intermediate
   value is wider than the final one is tall: in a 170px column on a phone,
   "12,345+" wrapped to two lines where "25,000+" did not, so the band grew a
   line and shrank again mid-count. A height change above the viewport moves
   the scroll position under the reader — WebKit's scroll anchoring parked an
   in-flight smooth scroll at 678px instead of the 1500px it was sent to, and
   the overlay scroll-position suite caught it. Holding the figure to one
   line keeps the band's height constant for the whole animation. */
.stat-figure{white-space:nowrap}

/* ── Desktop header at its narrowest ──────────────────────────────────────
   Between 1025px — where the primary nav comes back — and roughly 1035px,
   the logo, the eight nav links and the four icons together measured a few
   pixels more than the bar, so `.header-actions` ran 3.3px past the right
   edge and the whole page carried a horizontal scrollbar. The band is narrow
   but it is exactly the width of a small laptop.

   The gutter and the nav's own gap come in across the first slice of the
   desktop range and are back to their full size by 1120px, which buys far
   more than the few pixels needed without the links ever wrapping. */
@media(min-width:1025px) and (max-width:1120px){
  .site-header .header-inner{padding-inline:20px}
  .site-header .main-nav{gap:clamp(10px,1.3vw,26px)}
}

/* ── Page header, timeline and statement band ─────────────────────────────
   The three shapes the About page needed that the section library did not
   already have. All three reuse the band colour and the gold the figures
   band introduced, so a page built from them reads as the same storefront. */

.page-head{
  position:relative;
  padding-block:clamp(44px,7vw,86px);
  background:var(--paper);
  isolation:isolate
}
.page-head-image::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--page-head-image);background-size:cover;background-position:center;
  opacity:.22
}
.page-head .eyebrow{margin-bottom:14px}
.page-head h1{font-size:clamp(34px,5vw,62px);line-height:1.04;letter-spacing:-.04em;margin:0}
.page-head .lede{max-width:58ch}
.page-crumbs{margin-top:24px}
.page-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font-size:12.5px}
.page-crumbs li+li::before{content:"/";margin-right:8px;color:var(--muted)}
.page-crumbs a{color:var(--muted)}
.page-crumbs a:hover{color:var(--ink)}
.page-crumbs [aria-current]{color:var(--ink);font-weight:600}
@media(max-width:767px){
  .page-head{padding-block:34px}
  .page-crumbs{margin-top:18px}
}

/* The rule runs behind the years rather than between them, so a milestone
   with two lines of copy does not break the line. */
/* The dated story timeline on About.
 *
 * Named `story-timeline`, NOT `timeline`: the account order-status list in
 * creme.css already owns that class, and this file loads after it. Styling
 * both as `.timeline` reset the order list's padding and moved its rail,
 * leaving the status dots floating to the left of the line they belong on. */
.story-timeline{list-style:none;margin:28px 0 0;padding:0;position:relative}
.story-timeline::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline-item{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;padding:0 0 30px 26px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:"";position:absolute;left:-4px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--paper)
}
.timeline-year{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.timeline-copy h3{font-family:var(--font-body);font-size:16px;font-weight:650;margin:0 0 6px}
.timeline-copy p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
@media(max-width:767px){
  .timeline-item{grid-template-columns:1fr;gap:6px;padding-left:22px;padding-bottom:24px}
  .timeline-year{font-size:20px}
  .timeline-copy h3{font-size:14.5px}
  .timeline-copy p{font-size:13px}
}

.statement-band{background:var(--band);color:var(--band-ink);padding-block:clamp(48px,7vw,92px)}
.statement-band .eyebrow,.statement-band .section-heading span{color:var(--band-figure)}
.statement-band h2{color:var(--band-ink)}
.statement-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,60px);align-items:start;margin-top:26px}
.statement-copy{font-size:15px;line-height:1.7;color:rgba(244,233,220,.86)}
.statement-copy p+p{margin-top:15px}
.statement-cards{display:grid;gap:14px}
.statement-card{padding:18px 20px;border-radius:13px;background:rgba(244,233,220,.06);border:1px solid rgba(217,171,88,.26)}
.statement-card h3{font-family:var(--font-body);font-size:15px;font-weight:650;color:var(--band-ink);margin:0 0 6px}
.statement-card p{font-size:13px;line-height:1.55;color:rgba(244,233,220,.74);margin:0}
.statement-cta{margin-top:30px;text-align:center}
@media(max-width:860px){
  .statement-grid{grid-template-columns:1fr;gap:26px}
}

/* ── Customer reviews ──────────────────────────────────────────────────────
   The list was a bare `.grid-3` whose empty state was one line of grey text,
   so a product with no reviews yet looked like a section that had failed to
   load rather than one waiting for its first entry. Reviews are cards now,
   and the empty state is a card too — it says what to do instead of what is
   missing. */
/* ─ Reviews: summary, list, and the form ───────────────────────────────
   The section used to open straight into the cards with no score, no
   count and no sense of the spread, and the form below it was a bare
   stack of labels with the rating as a dropdown. */
.review-summary{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;margin-bottom:20px
}
.review-score{display:grid;justify-items:center;gap:4px;text-align:center;padding-right:24px;border-right:1px solid var(--line)}
.review-score b{font-family:var(--font-display);font-size:42px;line-height:1;font-weight:600}
.review-score .stars{color:var(--gold);letter-spacing:2px;font-size:14px;line-height:1}
.review-score .stars-rest{color:var(--line)}
.review-score small{font-size:12px;color:var(--muted);white-space:nowrap}

.review-bars{list-style:none;margin:0;padding:0;display:grid;gap:7px;min-width:0}
.review-bars li{display:grid;grid-template-columns:36px minmax(0,1fr) 28px;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.review-bars__star{display:flex;align-items:center;gap:2px;font-weight:600;color:var(--ink-soft,#44423C);font-variant-numeric:tabular-nums}
.review-bars__star span{color:var(--gold);font-size:10px}
.review-bars__track{height:7px;border-radius:999px;background:var(--surface-sunk);overflow:hidden}
.review-bars__track i{display:block;height:100%;width:var(--pct,0%);border-radius:inherit;background:var(--gold)}
.review-bars__count{text-align:right;font-variant-numeric:tabular-nums}

@media(max-width:620px){
  .review-summary{grid-template-columns:1fr;gap:18px;padding:18px}
  .review-score{padding-right:0;padding-bottom:16px;border-right:0;border-bottom:1px solid var(--line)}
  .review-score b{font-size:36px}
}

.review-list{display:grid;gap:16px;margin-top:4px}
@media(min-width:900px){.review-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

.review-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:11px
}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The filled stars carry the rating; the rest are drawn faint so the score
   reads as "four of five" at a glance rather than as four marks. */
/* Scoped to the review card: `.stars` is also used by the testimonial quote
   cards, which set their own colour but would have inherited this size and
   tracking. */
.review-card .stars{color:var(--gold);letter-spacing:2px;font-size:14px;line-height:1}
.review-card .stars-rest{color:var(--line)}
.review-title{font-family:var(--font-body);font-size:15.5px;font-weight:650;line-height:1.3;margin:0}
.review-body{font-size:14px;line-height:1.6;color:var(--ink-soft,#4a463f);margin:0}
.review-photos{display:flex;flex-wrap:wrap;gap:8px}
.review-photos img{width:62px;height:62px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}

.review-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:12px;border-top:1px solid var(--line)}
.review-by{display:flex;align-items:center;gap:10px;min-width:0}
.review-by .avatar{
  flex:0 0 32px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-sunk);color:var(--terracotta);
  font-size:13px;font-weight:700;text-transform:uppercase
}
.review-by strong{display:block;font-size:13.5px;line-height:1.2}
.review-by small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.review-helpful{
  font-size:12px;font-weight:600;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;background:transparent;min-height:34px;white-space:nowrap
}
.review-helpful span{color:var(--ink)}
.review-helpful[aria-pressed="true"]{border-color:var(--gold);color:var(--ink)}
@media(hover:hover){.review-helpful:hover{border-color:var(--ink);color:var(--ink)}}

.review-reply{margin-top:2px;padding:13px 15px;border-radius:11px;background:var(--surface-sunk)}
.review-reply strong{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--terracotta);margin-bottom:5px}
.review-reply p{font-size:13.5px;line-height:1.55;margin:0;color:var(--ink-soft,#4a463f)}

.review-empty{
  grid-column:1/-1;
  background:var(--white);
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  padding:30px 24px;
  text-align:center;
  color:var(--muted)
}
.review-empty svg{color:var(--gold);margin:0 auto 10px;display:block}
.review-empty h3{font-family:var(--font-body);font-size:15.5px;font-weight:650;color:var(--ink);margin:0 0 6px}
.review-empty p{font-size:13.5px;line-height:1.55;margin:0;max-width:44ch;margin-inline:auto}

/* Reviews pagination. The shared Tailwind pagination view reads as another
   site's component here — grey borders, square corners, an orange focus
   ring — so the reviews list gets the theme's own pill buttons, with the
   page position stated between them. */
.review-pager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line)
}
.review-pager__btn{
  display:inline-flex;align-items:center;gap:7px;
  min-height:42px;padding:0 20px;border-radius:var(--r-pill);
  background:var(--white);color:var(--ink);
  border:1px solid var(--line-strong);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)
}
.review-pager__btn:hover{border-color:var(--ink)}
.review-pager__btn:active{transform:translateY(1px)}
.review-pager__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.review-pager__btn.is-disabled{
  color:var(--muted);border-color:var(--line);
  background:transparent;pointer-events:none
}
.review-pager__status{font-size:13px;color:var(--muted);letter-spacing:.02em}

/* Show more: the pager's job, done without a page load. Sized like a real
   action rather than a text link, since it is the main way through the list. */
.review-more-wrap{display:flex;justify-content:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.review-more{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 28px;border-radius:var(--r-pill);
  background:var(--white);color:var(--ink);
  border:1px solid var(--line-strong);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.03em;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)
}
.review-more:hover{border-color:var(--ink)}
.review-more:active{transform:translateY(1px)}
.review-more:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.review-more[disabled]{color:var(--muted);border-color:var(--line);cursor:default}

/* Why a vote did not register — most often that it needs an account. Empty
   until there is something to say, so it takes no room in the normal case. */
.review-helpful-note{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted)}
.review-helpful-note:empty{display:none}
@media(max-width:520px){
  .review-pager{gap:10px}
  .review-pager__status{order:3;width:100%;text-align:center}
}

/* The write-a-review disclosure: a real panel, with the fields laid out
   rather than stacked bare under the summary. */
#reviews .accordion{border-top:1px solid var(--line);margin-top:26px}
#reviews .accordion > summary{padding-block:16px;font-weight:650}
#reviews .panel{display:grid;gap:4px;background:var(--white)}
#reviews .panel label{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:12px}
#reviews .panel label:first-of-type{margin-top:0}
#reviews .panel .input,#reviews .panel .select{width:100%}
#reviews .panel textarea.input{min-height:112px;resize:vertical}
#reviews .panel input[type=file]{font-size:12.5px;color:var(--muted)}
#reviews .panel .btn{justify-self:start;margin-top:18px}
/* One column on purpose. The labels and their fields are siblings in the
   form, not wrapped pairs, so a two-column grid puts every label in the left
   column and every field in the right — which reads as a table of unrelated
   things rather than as a form. A measure cap does the job two columns were
   meant to do. */
#reviews .panel{max-width:560px}

/* ── Empty states, policy pages and the help sidebar ───────────────────────
   `.state` is the shared empty state — wishlist, unpublished policy, and so
   on. It was being dropped straight into `.product-grid` as one grid item,
   so on the wishlist it was squeezed into a single column: the heading broke
   across three lines and the button stretched to fill a 195px cell. It spans
   the whole grid now, and carries a card so an empty page reads as a state
   rather than as content that failed to arrive. */
.product-grid > .state,
.grid > .state,
.review-list > .state{
  grid-column:1/-1;
  /* Spanning the tracks is not enough on its own: a grid item is sized by
     its own content unless it is told to fill the area it was given. */
  justify-self:center;
  width:100%
}

.state{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(30px,5vw,54px) clamp(22px,4vw,40px);
  max-width:620px
}
.state h1,.state h2{margin-bottom:12px}
.state h2{font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.state p{margin-bottom:22px;font-size:14px;line-height:1.6}
.state p:last-child{margin-bottom:0}
/* A `.state` on a page that is otherwise bare keeps the generous frame it
   had; one inside a grid of products sits tighter against its neighbours. */
.product-grid > .state,.grid > .state{padding-block:clamp(26px,4vw,40px)}

/* The legal pages render their empty state inside a prose column, where the
   card would otherwise inherit the column's text alignment. */
.legal .state{margin-inline:auto;text-align:center}

/* `hr` carries a page-level margin that is far too big inside a 240px
   sidebar: it opened a gap between the last link and the contact button
   wide enough to read as a missing block. */
.toc hr{margin-block:18px}
.toc .label{margin-bottom:12px}
.toc ul{margin:0}

/* The write-a-review panel sat at a 560px cap while the cards above it ran
   the full width of the column, so the two edges disagreed. The panel now
   matches them and the fields carry the measure instead. */
#reviews .panel{max-width:none}
#reviews .panel .input,#reviews .panel .select{max-width:460px}
#reviews .panel textarea.input{max-width:620px}

.review-note{
  margin:0 0 16px;padding:11px 15px;border-radius:11px;
  font-size:13.5px;line-height:1.5
}
.review-note-warn{background:#fdf3e3;border:1px solid #e7cfa3;color:#6b4a16}
.review-note-ok{background:#eef5ec;border:1px solid #bfd6b8;color:#33502b}

/* A button inside a prose column is still a button: the column underlines
   its links, which left the contact button in the policy empty state looking
   like a link that had been boxed by mistake. */
.prose .state .btn,.legal .state .btn{text-decoration:none;border-bottom:0}
.state .btn{display:inline-flex;align-items:center;justify-content:center}

/* The checkout's own design system lives in checkout.css, scoped under
   .sr-checkout. The rules that used to sit here — the cream sticky summary,
   the dashed "coming soon" tiles and the first checkout sheet — were
   replaced wholesale by it and are gone rather than left to rot. */

/* ─ Coupon cards (PDP) ─────────────────────────────────────────────────
   Was a dashed rectangle holding a code, an internal name and the
   conditions — but never the discount itself, which is the only part
   worth reading from across the page. It is now a real ticket: a stub
   carrying the saving, a punched perforation, and the code beside the
   control that copies it.

   The notches are filled with the page's own paper colour, because the
   card sits directly on it. */
.coupon-cards{
  display:flex;gap:12px;margin-top:24px;
  overflow-x:auto;overflow-y:hidden;
  padding-block:2px;                 /* room for the card's shadow */
  scroll-snap-type:x proximity;
  scrollbar-width:thin
}
.coupon-card{
  --stub:78px;
  --notch:11px;
  flex:0 0 268px;scroll-snap-align:start;
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:var(--stub) minmax(0,1fr);
  background:var(--white,#fff);
  border:1px solid var(--line,#E4DCD0);
  border-radius:var(--r,12px);
  box-shadow:0 1px 2px rgba(37,37,34,.04),0 6px 16px rgba(37,37,34,.05);
  overflow:hidden
}

/* The stub: one number, large, on the brand gold. */
.coupon-card__stub{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:14px 8px;text-align:center;
  background:linear-gradient(160deg,#CFA055 0%,#A86F28 100%);
  color:#fff
}
.coupon-card__stub b{
  font-size:21px;font-weight:700;line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums
}
.coupon-card__stub small{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9
}

/* The perforation, and the two notches punched through it. */
.coupon-card__body{
  position:relative;
  padding:13px 14px 13px 17px;
  display:grid;gap:5px;align-content:center;min-width:0
}
.coupon-card__body::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;
  border-left:1.5px dashed var(--line-strong,#CFC4B4)
}
.coupon-card::before,
.coupon-card::after{
  content:"";position:absolute;left:var(--stub);z-index:2;
  width:var(--notch);height:var(--notch);
  margin-left:calc(var(--notch) / -2);
  border-radius:50%;
  background:var(--paper,#FAF7F2)
}
.coupon-card::before{top:calc(var(--notch) / -2)}
.coupon-card::after{bottom:calc(var(--notch) / -2)}

.coupon-card__name{
  margin:0;font-size:13px;font-weight:650;color:var(--ink,#252522);
  line-height:1.3;overflow-wrap:anywhere
}
/* Wraps rather than squeezes: a truncated coupon code is useless, so the
   Copy button drops below it before the code gives up a character. */
.coupon-card__code{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.coupon-card__code code{
  flex:0 1 auto;min-width:max-content;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--terracotta,#a86f28);
  background:var(--surface-sunk,#F3EEE6);
  border-radius:7px;padding:5px 9px;
  white-space:nowrap
}
.coupon-card__code button{
  flex:0 0 auto;
  min-height:32px;padding:0 13px;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--ink,#252522);background:transparent;
  border:1px solid var(--line-strong,#CFC4B4);border-radius:7px;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease
}
.coupon-card__code button:hover{background:var(--surface-sunk,#F3EEE6);border-color:var(--ink,#252522)}
.coupon-card__code button:focus-visible{outline:2px solid var(--terracotta,#a86f28);outline-offset:2px}
/* Set by the copy handler, so the confirmation is visible and not just a
   word swap. */
.coupon-card__code button[data-copied]{
  background:var(--sage-tint,#EDF1EA);
  border-color:var(--success,#4E7A5B);
  color:var(--success,#4E7A5B)
}
.coupon-card__terms{
  margin:0;font-size:11.5px;line-height:1.45;color:var(--muted,#6A665F);
  overflow-wrap:anywhere
}

@media(max-width:767px){
  .coupon-cards{
    gap:10px;
    /* Edge-to-edge scroller: a card half-cut at the gutter is the clue
       that there are more of them. */
    margin-inline:-18px;padding-inline:18px
  }
  .coupon-card{flex-basis:264px;--stub:68px}
  .coupon-card__stub b{font-size:19px}
  /* Just enough off the code and the button for both to sit on one line
     beside a six-to-eight character code. */
  .coupon-card__body{padding:12px 12px 12px 15px}
  .coupon-card__code code{font-size:12.5px;letter-spacing:.05em;padding:5px 8px}
  .coupon-card__code button{padding:0 11px}
}

@media(prefers-reduced-motion:reduce){
  .coupon-card__code button{transition:none}
}

/* ─ Write a review ─────────────────────────────────────────────────────
   Was a disclosure with no affordance and a stack of unspaced fields. */
.review-write{margin-top:26px;border-top:1px solid var(--line);border-radius:0}
.review-write>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0;font-size:15px;font-weight:650
}
.review-write>summary::-webkit-details-marker{display:none}
.review-write>summary::after{
  content:"+";font-size:21px;font-weight:400;line-height:1;color:var(--muted);
  transition:transform .2s var(--ease,ease)
}
.review-write[open]>summary::after{content:"−"}
.review-write>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.review-form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;display:grid;gap:16px;margin-bottom:8px
}
.review-form .field{display:grid;gap:6px;min-width:0}
.review-form label{font-size:12.5px;font-weight:650;letter-spacing:.02em;color:var(--ink-soft,#44423C)}
.review-form .field-optional{font-weight:400;color:var(--muted);letter-spacing:0}
.review-form .field-hint{margin:0;font-size:11.5px;color:var(--muted)}
.review-form .input{width:100%;min-width:0;min-height:46px;padding:11px 13px;font:inherit;font-size:14.5px;background:var(--white);border:1px solid var(--line-strong);border-radius:10px}
.review-form textarea.input{min-height:120px;line-height:1.55;resize:vertical}
.review-form .input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(37,37,34,.08)}
/* The file input keeps doing the work; the label gives it a face. The
   input is moved off-screen rather than display:none, so it stays
   focusable and the label still opens the picker without JavaScript. */
.review-form input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
/* `.field>label` is more specific than a lone class and forces
   display:block, which stacked the icon above the text. */
.review-form .field>label.file-drop{
  display:flex;align-items:center;gap:13px;margin-bottom:0;
  padding:14px 16px;cursor:pointer;
  background:var(--surface-sunk);
  border:1.5px dashed var(--line-strong);border-radius:12px;
  transition:border-color .16s var(--ease,ease),background .16s var(--ease,ease)
}
/* Same specificity ladder as the base rule, or the border never changes. */
.review-form .field>label.file-drop:hover{border-color:var(--gold);background:var(--white)}
.file-drop__icon{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);color:var(--terracotta);border:1px solid var(--line)
}
.file-drop__text{display:grid;gap:2px;min-width:0}
.file-drop__text b{font-size:13.5px;font-weight:650;color:var(--ink)}
/* `.field>label` uppercases its contents, which is right for the field
   name beside it but not for a hint — and definitely not for a filename
   once one is chosen. */
.file-drop__text small{
  font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;
  text-transform:none;letter-spacing:0;font-weight:400
}
/* Keyboard focus lands on the hidden input; the ring has to show on the
   thing people can actually see. */
.review-form input[type=file]:focus-visible+.file-drop,
.review-form input[type=file]:focus-visible~.file-drop,
.file-drop:has(+input[type=file]:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.review-form .field>label.file-drop[data-has-files]{border-style:solid;border-color:var(--gold);background:var(--white)}
.review-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.review-form__submit{justify-self:start;min-width:170px}

/* The star rating input. The row is reversed so a checked star can light
   every star before it with a plain sibling selector. */
.rating-input{border:0;margin:0;padding:0}
.rating-input legend{padding:0;margin-bottom:6px;font-size:12.5px;font-weight:650;letter-spacing:.02em;color:var(--ink-soft,#44423C)}
.rating-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.rating-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rating-stars label{
  cursor:pointer;font-size:30px;line-height:1;padding:2px 3px;
  /* Warm enough to read as "choose one" rather than as disabled; the
     gold on hover and on selection is what carries the state. */
  color:#D9C9AE;
  transition:color .12s ease,transform .12s ease
}
.rating-stars input:checked~label,
.rating-stars label:hover,
.rating-stars label:hover~label{color:var(--gold)}
.rating-stars label:hover{transform:scale(1.08)}
.rating-stars input:focus-visible+label{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  .rating-stars label{transition:none}
  .rating-stars label:hover{transform:none}
}

/* ─ Announcement bar ───────────────────────────────────────────────────
   Rows come from the Announcements module, each with its own colours,
   optional link and optional dismiss. Several rotate in place rather than
   being crammed onto one line. */
/* The container no longer paints or pads: each item carries its own
   colour and must bleed to both edges, or an announcement with a custom
   background sits as a stripe inset from the header behind it. */
.announcement{position:relative;display:block;min-height:34px;padding:0;background:none}
.announcement__item{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:34px;padding:7px 46px;text-align:center;line-height:1.35;
  /* Inherited from .announcement before this split. */
  background:var(--ink);color:var(--ivory)
}
.announcement__item[hidden]{display:none}
.announcement__text{overflow-wrap:anywhere}
.announcement a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  font-weight:600;white-space:nowrap
}
.announcement__close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;
  width:30px;height:30px;padding:0;
  background:transparent;border:0;border-radius:50%;
  color:inherit;opacity:.7;cursor:pointer;
  transition:opacity .16s var(--ease,ease),background .16s var(--ease,ease)
}
.announcement__close:hover{opacity:1;background:rgba(255,255,255,.14)}
.announcement__close:focus-visible{outline:2px solid currentColor;outline-offset:1px;opacity:1}

@media(max-width:767px){
  .announcement__item{padding:7px 38px;gap:7px}
  .announcement a{white-space:normal}
}

/* Reference values/reviews: two readable cards per row on phones. Keep the
   desktop grid/rail configuration controlled by the storefront builder. */
@media(max-width:767px){
  .values-section .wrap,.reviews-section .wrap{padding-inline:20px}
  .values-section .grid,.reviews-section .grid,.reviews-section .theme-quote-rail{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;
    grid-auto-columns:auto;gap:12px;overflow:visible;padding:0
  }
  .values-section .value-card,.reviews-section .quote-card{
    min-width:0;margin:0;padding:16px 13px;border:1px solid var(--line);
    border-radius:14px;background:var(--white);overflow-wrap:anywhere
  }
  .values-section .vc-num{font-size:25px;margin-bottom:14px}
  .values-section .value-card h3{font-size:14px;line-height:1.35;margin-bottom:8px}
  .values-section .value-card p{font-size:12px;line-height:1.6}
  .reviews-section .quote-card{gap:14px}
  .reviews-section .quote-card blockquote{font-size:15px;line-height:1.45}
  .reviews-section .quote-card .rating{flex-wrap:wrap;gap:6px}
  .reviews-section .quote-card .stars{font-size:12px;letter-spacing:0}
  .reviews-section .quote-card footer{align-items:flex-start;gap:8px;flex-wrap:wrap}
  .reviews-section .quote-card .avatar{width:30px;height:30px;flex:0 0 30px;font-size:12px}
  .reviews-section .quote-card cite{font-size:12px;min-width:0}
  .reviews-section .quote-card cite small{font-size:11px;line-height:1.45;margin-top:3px}
  .values-section .section-head,.reviews-section .section-head{gap:14px;margin-bottom:24px}
  .reviews-section .section-head .text-link{font-size:12px}
}

/* Account entry: one visual system for sign-in and registration. */
.auth-experience{
  width:min(1120px,calc(100% - 64px));margin:12px auto 56px;min-height:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;
  background:var(--surface);border:1px solid var(--line);border-radius:24px;
  overflow:hidden;box-shadow:0 12px 40px rgba(60,44,20,.045)
}
.auth-experience .auth-art{min-height:590px;background:var(--surface-sunk)}
.auth-experience .auth-art>img{position:absolute;inset:0;object-position:center}
.auth-experience .aa-quote{inset:auto 28px 28px;padding:28px;background:rgba(251,248,243,.94);border:1px solid rgba(255,255,255,.6);border-radius:16px}
.auth-experience .aa-quote .eyebrow{margin:0 0 14px;font-size:10px}
.auth-experience .aa-quote h2{font-size:36px;line-height:1.12;margin-bottom:16px}
.auth-experience .aa-quote>p:last-child{font-size:13px;line-height:1.65;margin:0;color:var(--muted);max-width:290px}
.auth-experience .auth-panel{padding:40px 44px}
.auth-experience .auth-card{max-width:400px;min-width:0}
/* The mark above the heading, sized like the header's. */
.auth-brand{display:inline-block;margin-bottom:22px}
.auth-brand .theme-brandmark{height:34px;width:auto;max-width:190px;object-fit:contain;display:block}
.auth-experience .auth-intro{margin-bottom:28px}
.auth-experience .auth-intro>.eyebrow{font-size:10px;margin:0 0 12px}
.auth-experience .auth-card h1{font-size:clamp(30px,3vw,38px);line-height:1.12;letter-spacing:-.03em;margin:0 0 12px}
.auth-experience .auth-intro>.muted{font-size:14px;line-height:1.65;margin:0;max-width:350px}
.auth-experience .field{margin-bottom:18px}
.auth-experience .field>label{font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-bottom:8px}
.auth-experience .input{
  min-height:50px;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--white);padding:12px 14px;font-size:16px;line-height:1.5;box-shadow:none
}
.auth-experience .input:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(168,111,40,.12)}
.auth-experience .input[aria-invalid=true]{border-color:var(--danger)}
.auth-experience .input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--surface) inset;caret-color:var(--ink)}
.auth-experience .input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--surface) inset,0 0 0 3px rgba(168,111,40,.12)}
.auth-experience .auth-password{position:relative}
.auth-experience .auth-password .input{padding-right:70px}
.auth-experience .auth-password-toggle{position:absolute;right:5px;top:5px;min-width:58px;min-height:40px;padding:8px;font-size:12px;font-weight:600;color:var(--ink-soft);border-radius:7px}
.auth-experience .auth-password-toggle:hover{background:var(--surface-sunk)}
.auth-experience .auth-options{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:2px 0 24px;font-size:12px}
.auth-experience .auth-options .check{align-items:center;margin:0;font-size:12px;min-height:32px;gap:8px}
.auth-experience .auth-options .check input{margin:0;border-radius:4px;color:var(--terracotta);border:1px solid var(--line-strong)}
.auth-experience .auth-options .text-link{font-size:12px;line-height:1.6}
.auth-experience .btn-primary{min-height:50px;gap:12px;font-size:14px;border-radius:10px}
.auth-experience .auth-switch{border-top:1px solid var(--line);padding-top:22px;margin:24px 0 0;text-align:center;font-size:13px;line-height:1.9}
.auth-experience .auth-switch .text-link{font-size:13px}
.auth-experience .auth-privacy{font-size:11px;line-height:1.65;color:var(--muted);text-align:center;margin:14px 0 0}
.auth-experience .auth-privacy a{text-decoration:underline;text-underline-offset:3px}
.auth-experience .field-hint{font-size:11px;margin:7px 0 0}
.auth-experience .field-error{font-size:12px;line-height:1.5;margin:7px 0 0}
.auth-experience .auth-card>.wordmark{display:none!important}
@media(max-width:900px){
  .auth-experience{width:min(520px,calc(100% - 40px));grid-template-columns:1fr;margin:8px auto 40px}
  .auth-experience .auth-art{display:none}
  .auth-experience .auth-panel{padding:32px}
}
@media(max-width:480px){
  .auth-experience{width:calc(100% - 32px);margin:4px auto 32px;border-radius:18px}
  .auth-experience .auth-panel{padding:28px 20px}
  .auth-experience .auth-intro{margin-bottom:24px}
  .auth-experience .auth-card h1{font-size:30px}
  .auth-experience .auth-intro>.muted{font-size:13px}
  .auth-experience .auth-options{gap:8px}
}

/* Homepage journal: a contained editorial set with a lead story on mobile. */
.journal-section .journal-heading{align-items:flex-end;gap:20px;margin-bottom:26px}
.journal-heading .eyebrow{margin:0 0 10px;font-size:10px}
.journal-heading h2{font-size:clamp(29px,3.2vw,40px)}
.journal-heading .text-link{font-size:13px;white-space:nowrap;margin-bottom:3px}
.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.journal-card{
  display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:var(--surface);
  transition:border-color .2s ease,box-shadow .2s ease
}
.journal-media{aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunk)}
.journal-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.journal-copy{padding:22px;display:flex;flex-direction:column;flex:1;min-width:0;align-items:flex-start}
.journal-category{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:12px}
.journal-copy h3{font-size:22px;line-height:1.3;letter-spacing:-.02em;margin:0 0 12px;overflow-wrap:break-word}
.journal-excerpt{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 22px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.journal-card-foot{margin-top:auto;width:100%;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.journal-card-foot>span:first-child{font-size:10px;color:var(--muted);line-height:1.5}
.journal-read{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;line-height:1.5}
.journal-read>span{color:var(--terracotta)}
.journal-card:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px}
@media(hover:hover){
  .journal-card:hover{border-color:var(--line-strong);box-shadow:0 10px 28px rgba(60,44,20,.07)}
  .journal-card:hover .journal-media img{transform:scale(1.025)}
  .journal-card:hover .journal-read{color:var(--terracotta)}
}
@media(max-width:767px){
  .journal-section .wrap{padding-inline:20px}
  .journal-section .journal-heading{gap:14px;margin-bottom:22px;align-items:flex-start}
  .journal-heading .text-link{font-size:12px;margin-top:28px}
  .journal-heading .eyebrow{font-size:9px;letter-spacing:.1em}
  .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .journal-grid-featured>.journal-card:first-child{grid-column:1/-1}
  .journal-copy{padding:16px}
  .journal-copy h3{font-size:16px;line-height:1.35;margin-bottom:14px}
  .journal-category{font-size:9px;letter-spacing:.08em;margin-bottom:9px}
  .journal-excerpt{display:none}
  .journal-card-foot{gap:10px;padding-top:12px}
  .journal-card-foot>span:first-child{font-size:9px}
  .journal-read{font-size:11px;gap:5px}
  .journal-grid-featured>.journal-card:first-child .journal-copy h3{font-size:22px}
  .journal-grid-featured>.journal-card:first-child .journal-excerpt{display:-webkit-box;margin-bottom:18px}
  .journal-grid-featured>.journal-card:first-child .journal-media{aspect-ratio:16/9}
}
@media(min-width:480px) and (max-width:767px){
  .journal-grid-featured>.journal-card:first-child{display:grid;grid-template-columns:44% minmax(0,1fr)}
  .journal-grid-featured>.journal-card:first-child .journal-media{aspect-ratio:auto;height:100%;min-height:250px}
  .journal-grid-featured>.journal-card:first-child .journal-copy h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.journal-card,.journal-media img{transition:none}}

/* Main hero: distinct image/copy panels, with controls clear of the artwork. */
.storefront-hero{max-width:1488px;margin:18px auto 12px;padding:0 24px}
.storefront-hero .luxury-slides{border-radius:22px;background:var(--surface-sunk)}
.storefront-hero .luxury-slide{
  display:grid;grid-template-columns:44% minmax(0,1fr);align-items:stretch;
  min-height:500px;aspect-ratio:auto;border-radius:0;background:var(--surface-sunk)
}
.storefront-hero .luxury-slide>picture{display:block;position:relative;grid-column:2;grid-row:1;min-width:0;min-height:100%;overflow:hidden}
.storefront-hero .luxury-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;aspect-ratio:auto}
.storefront-hero .luxury-slide-copy{
  grid-column:1;grid-row:1;width:100%;max-width:none;min-height:0;
  background:var(--surface-sunk);padding:48px clamp(28px,4vw,64px);
  justify-content:center;align-items:flex-start
}
.storefront-hero .luxury-slide-copy .eyebrow{font-size:10px;letter-spacing:.17em;line-height:1.5;margin:0 0 20px;color:var(--terracotta)}
.storefront-hero .luxury-slide-copy h1,.storefront-hero .luxury-slide-copy h2{
  font-size:clamp(36px,4.3vw,62px);line-height:1.04;letter-spacing:-.04em;
  margin:0 0 22px;max-width:10.5em;text-wrap:balance
}
.storefront-hero .luxury-slide-copy p:not(.eyebrow){font-size:14px;line-height:1.7;max-width:35ch;color:var(--ink-soft);margin:0 0 28px}
.storefront-hero .hero-cta-group{display:flex;flex-wrap:wrap;align-items:center;gap:18px 20px}
.storefront-hero .hero-cta-group .btn{min-height:48px;padding:12px 22px;border-radius:10px;font-size:13px;gap:12px}
.storefront-hero .hero-secondary{font-size:12px;font-weight:500;border-bottom:1px solid var(--line-strong);padding-block:6px;white-space:nowrap}
.storefront-hero .hero-secondary:hover{color:var(--terracotta);border-color:currentColor}
.storefront-hero .hero-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 0}
.storefront-hero .carousel-arrow{position:static;inset:auto;display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;font-size:25px;line-height:1;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.storefront-hero .carousel-dots{position:static;margin:0;padding:0;gap:8px;min-height:40px}
.storefront-hero .carousel-dots button[data-slide-index]{width:7px;height:7px;border-color:var(--terracotta)}
.storefront-hero .carousel-dots button[aria-current=true]{width:22px;background:var(--terracotta)}
.storefront-hero .carousel-dots .carousel-pause{width:32px;height:32px;min-width:32px;min-height:32px;margin-left:8px}
.storefront-hero .carousel-arrow:focus-visible,.storefront-hero .hero-secondary:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
@media(min-width:1500px){.storefront-hero .luxury-slide{min-height:570px}}
@media(min-width:768px) and (max-width:1000px){
  .storefront-hero{padding-inline:20px}
  .storefront-hero .luxury-slide{grid-template-columns:46% minmax(0,1fr);min-height:450px}
  .storefront-hero .luxury-slide-copy{padding:32px}
  .storefront-hero .luxury-slide-copy h1,.storefront-hero .luxury-slide-copy h2{font-size:38px}
}
@media(max-width:767px){
  .storefront-hero{margin:0 auto 8px;padding:0;max-width:none}
  .storefront-hero .luxury-slides{border-radius:0}
  .storefront-hero .luxury-slide{display:flex;flex-direction:column;min-height:0!important;height:auto!important;aspect-ratio:auto!important}
  .storefront-hero .luxury-slide>picture{min-height:0;width:100%;flex:0 0 auto}
  .storefront-hero .luxury-slide img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/10;max-height:none;object-fit:cover;object-position:60% 52%}
  .storefront-hero .luxury-slide-copy{padding:24px 24px 26px;flex:1;min-height:0;justify-content:flex-start}
  .storefront-hero .luxury-slide-copy .eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:12px}
  .storefront-hero .luxury-slide-copy h1,.storefront-hero .luxury-slide-copy h2{font-size:clamp(30px,6.8vw,38px);line-height:1.08;max-width:13em;margin-bottom:14px}
  .storefront-hero .luxury-slide-copy p:not(.eyebrow){font-size:13px;line-height:1.6;max-width:43ch;margin-bottom:20px}
  .storefront-hero .hero-cta-group{gap:12px 18px}
  .storefront-hero .hero-cta-group .btn{min-height:44px;font-size:12px;padding:11px 18px}
  .storefront-hero .hero-secondary{font-size:11px;min-height:36px;display:inline-flex;align-items:center;gap:6px}
  .storefront-hero .hero-controls{padding:8px 20px;gap:18px;border-bottom:1px solid var(--line)}
}
@media(max-width:380px){
  .storefront-hero .luxury-slide-copy{padding:22px 20px 24px}
  .storefront-hero .hero-cta-group{gap:8px 14px}
  .storefront-hero .hero-cta-group .btn{padding-inline:14px;font-size:11px}
}

/* Four campaign stories: recognizable navigation and crop-safe small tablets. */
.storefront-hero .luxury-slide-copy .eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;letter-spacing:.12em}
.storefront-hero .hero-brand{color:var(--ink-soft);font-weight:600}
.storefront-hero .hero-eyebrow-divider{width:18px;height:1px;background:var(--line-strong)}
.storefront-hero .luxury-slide:nth-child(2) .luxury-slide-copy{background:#eee5d9}
.storefront-hero .luxury-slide:nth-child(3) .luxury-slide-copy{background:#f5f0e7}
.storefront-hero .luxury-slide:nth-child(4) .luxury-slide-copy{background:#edf0e8}
.storefront-hero .hero-controls{gap:14px;padding:12px 8px}
.storefront-hero .hero-slide-count{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;margin-right:auto;min-width:64px}
.storefront-hero [data-hero-current]{color:var(--ink);font-weight:600}
.storefront-hero .hero-count-line{width:18px;height:1px;background:var(--line-strong)}
.storefront-hero .carousel-dots{gap:5px;flex:1;justify-content:center}
.storefront-hero .carousel-dots button[data-slide-index]{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;height:40px;padding:9px 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:11px;line-height:1.4}
.storefront-hero .carousel-dots button[data-slide-index][aria-current=true]{width:auto;background:var(--surface-sunk);color:var(--ink)}
.storefront-hero .hero-story-number{font-size:9px;color:var(--terracotta);font-variant-numeric:tabular-nums}
.storefront-hero .carousel-dots button[data-slide-index]::after{display:none}
.storefront-hero .carousel-dots button[data-slide-index]:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
@media(max-width:999px){
  .storefront-hero .hero-controls{padding-inline:20px;gap:12px}
  .storefront-hero .hero-slide-count{font-size:10px;min-width:54px}
  .storefront-hero .carousel-dots{gap:5px;flex:0 1 auto}
  .storefront-hero .carousel-dots button[data-slide-index]{width:25px;height:40px;padding:0;border-radius:0;background:transparent}
  .storefront-hero .carousel-dots button[data-slide-index]::before{content:"";width:100%;height:3px;border-radius:2px;background:var(--line-strong)}
  .storefront-hero .carousel-dots button[data-slide-index][aria-current=true]{width:25px;background:transparent}
  .storefront-hero .carousel-dots button[data-slide-index][aria-current=true]::before{background:var(--terracotta)}
  .storefront-hero .hero-story-number,.storefront-hero .hero-story-label{display:none}
  .storefront-hero .carousel-arrow{width:36px;height:36px;flex-basis:36px}
  .storefront-hero .carousel-dots .carousel-pause{margin-left:5px}
}
@media(min-width:600px) and (max-width:767px){
  .storefront-hero{padding:14px 18px 0;margin:0 auto 10px}
  .storefront-hero .luxury-slides{border-radius:20px}
  .storefront-hero .luxury-slide{display:grid;grid-template-columns:46% minmax(0,1fr);min-height:440px!important;height:auto!important}
  .storefront-hero .luxury-slide>picture{grid-column:2;grid-row:1;min-height:100%;width:100%}
  .storefront-hero .luxury-slide img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-position:60% center}
  .storefront-hero .luxury-slide-copy{grid-column:1;grid-row:1;padding:28px 24px;justify-content:center}
  .storefront-hero .luxury-slide-copy h1,.storefront-hero .luxury-slide-copy h2{font-size:33px;line-height:1.1}
  .storefront-hero .luxury-slide-copy p:not(.eyebrow){font-size:13px}
  .storefront-hero .hero-brand,.storefront-hero .hero-eyebrow-divider{display:none}
  .storefront-hero .hero-controls{border-bottom:0}
}
@media(max-width:380px){
  .storefront-hero .hero-controls{gap:7px;padding-inline:14px}
  .storefront-hero .carousel-dots{gap:4px}
  .storefront-hero .carousel-dots button[data-slide-index],.storefront-hero .carousel-dots button[data-slide-index][aria-current=true]{width:20px}
  .storefront-hero .luxury-slide-copy .eyebrow{font-size:8px;gap:8px}
  .storefront-hero .hero-eyebrow-divider{width:12px}
}
.storefront-hero .hero-headline-line{display:block}

/* Values: a soft local reveal, a sage halo and a restrained pointer response. */
.values-section{position:relative;overflow:hidden;background:linear-gradient(125deg,#edf1eb,#f1f4ef 55%,#e6ede8)}
.values-section .value-card{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);box-shadow:0 3px 16px rgba(36,58,45,.025);transition:transform .5s ease,opacity .5s ease,border-color .25s ease,box-shadow .25s ease}
.values-section .value-card::before{content:"";position:absolute;z-index:-1;inset:-60px -40px auto auto;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(148,178,151,.16),transparent 70%);transition:transform .5s ease,opacity .5s ease;opacity:.6}
.values-section .value-card::after{content:"";position:absolute;bottom:0;left:24px;width:32px;height:2px;background:#91a68c;transition:width .35s ease}
@media(prefers-reduced-motion:no-preference){
  .values-section [data-values-motion]>.value-card{opacity:0;transform:translateY(20px);transition-delay:var(--value-delay,0ms)}
  .values-section [data-values-visible]>.value-card{opacity:1;transform:none}
  @media(hover:hover){
    .values-section [data-values-visible]>.value-card:hover{transform:translateY(-5px);transition-delay:0ms;box-shadow:0 12px 28px rgba(36,58,45,.09);border-color:#bccbb8}
    .values-section .value-card:hover::before{transform:scale(1.35);opacity:1}
    .values-section .value-card:hover::after{width:72px}
  }
}
@media(prefers-reduced-motion:reduce){.values-section .value-card,.values-section .value-card::before,.values-section .value-card::after{transition:none}}

/* The everyday-care feature is a compact two-column card, including phones. */
.care-feature-section{padding-block:34px}
.care-feature{display:grid;grid-template-columns:42% minmax(0,1fr);border:1px solid #dfe6de;border-radius:22px;overflow:hidden;background:#edf2ed}
.care-feature-media{position:relative;display:block;min-width:0;overflow:hidden;background:#d2deda}
.care-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.care-feature-copy{padding:48px clamp(28px,4vw,58px);min-height:410px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.care-feature-copy .eyebrow{font-size:10px;letter-spacing:.13em;color:#506b5c;margin:0 0 16px}
.care-feature-copy h2{font-size:clamp(30px,3.5vw,46px);line-height:1.12;letter-spacing:-.03em;max-width:13em;margin:0 0 18px;text-wrap:balance}
.care-feature-description{font-size:14px;color:#526057;line-height:1.65;max-width:38ch;margin:0 0 24px}
.care-feature-copy .btn{min-height:44px;font-size:13px;padding:11px 20px;gap:10px;background:#263e34;border-color:#263e34}
@media(max-width:767px){
  .care-feature-section{padding:24px 18px}
  .care-feature{grid-template-columns:40% minmax(0,1fr);border-radius:16px}
  .care-feature-copy{min-height:0;padding:24px 20px}
  .care-feature-copy .eyebrow{font-size:8px;line-height:1.55;letter-spacing:.09em;margin-bottom:10px}
  .care-feature-copy h2{font-size:clamp(22px,4.3vw,29px);margin-bottom:12px;line-height:1.15;text-wrap:pretty}
  .care-feature-description{font-size:12px;line-height:1.55;margin-bottom:16px}
  .care-feature-copy .btn{font-size:11px;min-height:40px;padding:9px 12px;gap:6px}
}
@media(max-width:380px){
  .care-feature-section{padding-inline:14px}
  .care-feature{grid-template-columns:38% minmax(0,1fr)}
  .care-feature-copy{padding:20px 14px}
  .care-feature-copy h2{font-size:21px}
  .care-feature-description{font-size:11px}
  .care-feature-copy .btn{font-size:10px;padding-inline:10px}
}

/* Newsletter: a calm, high-contrast invitation with a clearly labelled field. */
.newsletter-signup{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:44px 48px;border-radius:22px;background:var(--band);color:#f7faf5;border:1px solid rgba(217,171,88,.22)}
.newsletter-signup .eyebrow{font-size:10px;color:var(--band-figure);margin:0 0 12px;letter-spacing:.14em}
.newsletter-signup h2{color:#f7faf5;font-size:clamp(28px,3vw,38px);line-height:1.15;letter-spacing:-.025em;max-width:14em;margin:0 0 14px}
.newsletter-description{font-size:13px;color:#d7d1c7;line-height:1.65;max-width:38ch}
.newsletter-signup .newsletter-form{display:block;min-width:0}
.newsletter-form>label{display:block;font-size:12px;font-weight:500;margin:0 0 9px;color:#f7faf5}
.newsletter-fields{display:flex;gap:8px;min-width:0}
.newsletter-signup .input{flex:1;min-width:0;min-height:50px;margin:0;padding:12px 14px;border:1px solid #ded0ba;border-radius:10px;background:#fff;color:var(--ink);font-size:16px}
.newsletter-signup .input:focus{outline:none;border-color:#d9ab58;box-shadow:0 0 0 3px rgba(217,171,88,.22)}
.newsletter-signup .newsletter-submit{flex:0 0 auto;gap:10px;min-height:50px;padding:12px 20px;border-radius:10px;background:var(--band-figure);color:#252522;font-size:13px;font-weight:600;border:1px solid var(--band-figure)}
.newsletter-signup .newsletter-submit:hover{background:#fff}
.newsletter-privacy{font-size:11px;line-height:1.6;color:#d7d1c7;margin:12px 0 0}
.newsletter-privacy a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.newsletter-feedback{font-size:13px;padding:12px;border:1px solid #b49c70;border-radius:8px;background:#3d382b;color:#fff;margin-top:14px}
@media(max-width:900px){.newsletter-signup{grid-template-columns:1fr;gap:24px;padding:32px}}
@media(max-width:480px){
  .newsletter-section .wrap{padding-inline:18px}
  .newsletter-signup{padding:26px 22px;border-radius:18px;gap:22px}
  .newsletter-signup h2{font-size:28px}
  .newsletter-description{font-size:12px}
  .newsletter-signup .input{padding-inline:12px;min-height:48px}
  .newsletter-signup .newsletter-submit{padding:10px 13px;min-height:48px;font-size:12px;gap:6px}
}

/* Account overview and navigation. All links retain their existing routes. */
.account-layout{gap:30px;grid-template-columns:220px minmax(0,1fr);padding-block:12px 44px;align-items:start}
.account-main{min-width:0}
.account-nav{padding:12px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.account-nav-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 12px;margin:0 0 12px}
.account-nav a{min-height:44px;font-size:13px;gap:10px;border-radius:10px}
.account-nav a[aria-current=page]{background:#263e34;color:#fff}
.account-nav form button{border-radius:10px;min-height:44px;color:var(--muted);white-space:nowrap}
.account-page-header{margin-bottom:24px}
.dashboard-welcome{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:26px 28px;background:#edf2ed;border:1px solid #e0e6dc;border-radius:18px}
.dashboard-welcome .eyebrow{font-size:9px;letter-spacing:.12em;color:#506b5c;margin:0 0 10px}
.dashboard-welcome h1{font-size:clamp(29px,3vw,38px);line-height:1.12;margin:0 0 10px;overflow-wrap:anywhere}
.dashboard-welcome .muted{font-size:13px;line-height:1.6;margin:0}
.dashboard-welcome>.btn{flex-shrink:0;gap:8px;background:var(--surface);font-size:12px}
.dashboard-stats{gap:12px;margin-bottom:24px}
.dashboard-stats .stat-link{position:relative;display:block;min-width:0;padding:20px;border-radius:14px;background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease}
.dashboard-stats .stat-link b{font-family:var(--font-display);font-size:34px;line-height:1.1;font-weight:500;margin:0 0 12px;color:#263e34}
.dashboard-stats .stat-link>span{font-size:11px;color:var(--muted);line-height:1.4}
.dashboard-stats .stat-link i{position:absolute;right:14px;top:14px;color:#9aab97;font-style:normal;font-size:14px}
.dashboard-overview>.panel{padding:24px;border-radius:18px;background:var(--surface);margin:0 0 20px}
.dashboard-overview .panel-head{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dashboard-overview .panel-head h2{font-size:23px}
.dashboard-overview .panel-head .text-link{font-size:12px}
.dashboard-empty{text-align:center;padding:16px 12px 22px}
.dashboard-empty-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#edf2ed;color:#53705d;margin:0 auto 16px}
.dashboard-empty-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dashboard-empty h3{font-size:23px;margin:0 0 10px}
.dashboard-empty p{font-size:13px;line-height:1.65;color:var(--muted);max-width:36ch;margin:0 auto 20px}
.dashboard-empty .btn{font-size:12px;gap:10px}
.dashboard-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px}
.dashboard-details .label{font-size:9px;letter-spacing:.09em;margin:0 0 6px}
.dashboard-details>div>p:last-child{font-size:13px;line-height:1.65;margin:0;overflow-wrap:anywhere}
.dashboard-details .text-link{font-size:12px}
@media(hover:hover){.dashboard-stats .stat-link:hover{border-color:#a9bba5;box-shadow:0 5px 18px rgba(38,62,52,.06)}}
@media(max-width:1000px){
  .dashboard-welcome{align-items:flex-start;flex-direction:column;gap:18px}
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .account-layout{grid-template-columns:minmax(0,1fr);gap:22px;padding-block:0 28px}
  .account-nav{display:flex;flex-wrap:nowrap;gap:6px;position:static;overflow-x:auto;max-width:100%;padding:8px;border-radius:13px;scrollbar-width:thin;scrollbar-color:#b7c8b1 transparent}
  .account-nav a,.account-nav form{flex:0 0 auto;white-space:nowrap}
  .account-nav-title,.account-nav .nav-sep{display:none}
  .account-nav form{margin:0}
  .account-nav a{min-height:40px;padding:9px 12px;font-size:12px}
  .account-nav svg{width:15px;height:15px;flex-shrink:0}
}
@media(max-width:480px){
  .account-layout{gap:18px}
  .dashboard-welcome{padding:22px 20px;border-radius:16px}
  .dashboard-welcome h1{font-size:29px}
  .dashboard-welcome .muted{font-size:12px}
  .dashboard-stats{gap:10px;margin-bottom:20px}
  .dashboard-stats .stat-link{padding:18px 16px}
  .dashboard-stats .stat-link b{font-size:30px;margin-bottom:10px}
  .dashboard-overview>.panel{padding:20px 18px;border-radius:16px}
  .dashboard-overview .panel-head h2{font-size:21px}
  .dashboard-details{gap:18px 14px}
  .dashboard-details>div>p:last-child{font-size:12px}
}
@media(max-width:380px){
  .newsletter-fields{flex-direction:column;gap:10px}
  .newsletter-signup .newsletter-submit{width:100%;justify-content:center}
}

/* A real coupon invitation, with a persistent revealed state. */
.spin-section{background:var(--paper);color:#f9f7ef;padding-block:30px}
.offer-shell{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:52px;padding:44px 48px;border-radius:24px;background:var(--band);border:1px solid rgba(217,171,88,.22);overflow:hidden}
.offer-copy{min-width:0}
.offer-copy>.eyebrow{font-size:10px;letter-spacing:.15em;color:var(--band-figure);margin:0 0 18px}
.spin-section .offer-copy h2{font-size:clamp(30px,3.3vw,45px);line-height:1.12;letter-spacing:-.03em;color:#f9f7ef;margin:0 0 18px;max-width:12em;text-wrap:balance}
.offer-description{font-size:14px;line-height:1.7;color:#d7d1c7;max-width:35ch}
.offer-description p{margin:0}
.offer-how{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:28px;color:#d7d1c7}
.offer-how>span:not(.offer-step-arrow){display:grid;place-items:center;width:24px;height:24px;border:1px solid #786a50;border-radius:50%;font-size:9px;font-variant-numeric:tabular-nums}
.offer-how p{font-size:10px;line-height:1.5;margin:0}
.offer-step-arrow{font-size:13px;margin-inline:3px;color:#b49c70}
.spin-section .spin-machine{width:100%;max-width:450px;margin:0 auto;min-width:0;text-align:center}
.offer-ticket{position:relative;border-radius:18px;background:#fcfaf4;color:var(--ink);border:1px solid #e5dbca;padding:26px 28px;box-shadow:0 10px 26px rgba(0,0,0,.07)}
.offer-gift{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f3e9d8;color:#a86f28;margin:0 auto 14px}
.offer-gift svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.offer-ticket-label{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:#796748;margin:0 0 12px}
.spin-section .spin-reel{height:auto;min-height:0;padding:0 0 22px;margin-bottom:22px;background:none;border:0;border-radius:0;border-bottom:1px dashed #ded0ba;overflow:visible}
.spin-section .spin-face{font-size:clamp(26px,3vw,37px);line-height:1.18;color:#252522;display:block;text-wrap:balance}
.spin-section .spin-go{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:100%;min-width:0;min-height:46px;margin:0;background:var(--band-figure);color:#252522;border:1px solid var(--band-figure);border-radius:10px;font-size:13px;padding:12px 18px}
.spin-section .spin-go:hover{background:#e2b76b}
.spin-section .spin-go[disabled]{opacity:1;color:#78613d;background:#f3e9d8;border-color:#e5d7bf;cursor:default}
.spin-section .spin-go:focus-visible,.offer-copy-code:focus-visible{outline:2px solid var(--band-figure);outline-offset:3px}
.spin-section .spin-result{margin:20px 0 0;padding:18px 0 0;border:0;border-top:1px dashed #ded0ba;border-radius:0;background:none}
.spin-section .spin-result .offer-result-label{font-size:10px;color:#8c662c;margin:0 0 10px;text-transform:uppercase;letter-spacing:.09em}
.offer-code-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#f5edde;border:1px solid #e5d7bf;border-radius:9px}
.offer-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:18px;letter-spacing:.07em;font-weight:600;color:#252522;overflow-wrap:anywhere;user-select:all;min-width:0;text-align:left}
.offer-copy-code{font-size:11px;font-weight:600;min-height:32px;flex-shrink:0;padding:6px;color:#80591f;border-radius:5px}
.spin-section .spin-result .offer-terms{font-size:11px;line-height:1.6;color:#766b5b;margin:12px 0 0}
.spin-section .spin-note{font-size:10px;line-height:1.6;color:#cbc1b2;max-width:36ch;margin:14px auto 0}
@media(max-width:900px){
  .offer-shell{gap:28px;padding:32px}
  .offer-how{flex-direction:column;align-items:flex-start;gap:6px}
  .offer-how>span{display:none!important}
  .offer-how p::before{content:'✓';margin-right:7px;color:#d9ab58}
  .offer-ticket{padding:24px 20px}
}
@media(max-width:599px){
  .spin-section{padding-block:24px}
  .spin-section>.wrap{padding-inline:18px}
  .offer-shell{grid-template-columns:minmax(0,1fr);padding:28px 24px;gap:24px;border-radius:20px}
  .offer-copy>.eyebrow{font-size:9px;margin-bottom:12px}
  .spin-section .offer-copy h2{font-size:30px;max-width:13em;margin-bottom:12px;text-wrap:pretty}
  .offer-description{font-size:13px;max-width:none}
  .offer-how{flex-direction:row;gap:14px;margin-top:16px}
  .offer-how p{font-size:10px}
  .offer-ticket{padding:22px}
  .offer-gift{width:40px;height:40px;margin-bottom:12px}
  .spin-section .spin-face{font-size:29px}
  .spin-section .spin-reel{padding-bottom:18px;margin-bottom:18px}
}
@media(max-width:380px){
  .offer-shell{padding:24px 18px;gap:20px}
  .offer-ticket{padding:22px 16px}
  .spin-section .offer-copy h2{font-size:28px}
  .offer-code-row{flex-wrap:wrap;justify-content:center;gap:4px}
  .offer-code{text-align:center}
}

/* Compact, bar-only navigation for the homepage hero. */
.storefront-hero .hero-controls.hero-controls-minimal{min-height:32px;height:32px;padding:4px 20px;gap:0;border:0}
.storefront-hero .hero-controls-minimal .carousel-dots{display:flex;flex:0 1 auto;justify-content:center;gap:8px;margin:0;padding:0}
.storefront-hero .hero-controls-minimal .carousel-dots button[data-slide-index]{display:inline-flex;align-items:center;justify-content:center;width:32px;min-width:0;height:24px;min-height:24px;padding:0;border:0;border-radius:0;background:transparent}
.storefront-hero .hero-controls-minimal .carousel-dots button[data-slide-index]::before{content:"";display:block;width:100%;height:3px;border-radius:2px;background:var(--line-strong)}
.storefront-hero .hero-controls-minimal .carousel-dots button[data-slide-index][aria-current=true]::before{background:var(--terracotta)}
.storefront-hero .hero-controls-minimal .carousel-dots button[data-slide-index]::after{display:none}

/* The approved white lockup needs its own dark ground on light auth panels. */
.auth-brand{background:var(--chrome,#23231f);padding:14px 18px;border-radius:8px;line-height:0}