@font-face{font-family:Geist;src:url('/assets/geist.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ink:#111b2a;--navy:#0b1423;--lime:#c9f478;--muted:#7a7e86;--line:#e8e9eb;--surface:#f5f6f7;--radius:14px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;color:var(--ink);font-family:Geist,Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{background:none;border:0;padding:0}a{color:inherit;text-decoration:none}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible{outline:2px solid #709e38}button{transition:background .2s,color .2s,transform .2s}button:hover{color:#60892d}svg{width:22px;height:22px;display:block;flex-shrink:0}h1,h2,h3,h4,p{margin:0}h2{font-size:30px;font-weight:600;letter-spacing:-1.15px;line-height:1.2}.container{max-width:1320px;margin:auto;padding:0 40px}.announcement{min-height:35px;background:var(--navy);color:#e5e8ec;display:flex;align-items:center;justify-content:space-between;padding:8px max(40px,calc((100vw - 1240px)/2));font-size:10px;letter-spacing:.15px}.announcement>span:first-child{color:#a2aab6}.announcement a{color:var(--lime);margin-left:10px}.announcement a span{margin-left:5px}.announcement-divider{margin-left:13px;color:#59616d}.announcement button{font-size:10px;color:#c9ced6}.header-main{height:94px;display:flex;align-items:center;gap:70px}.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:780;font-size:27px;letter-spacing:-1.2px}.brand-mark{display:block;position:relative;width:28px;height:30px}.brand-mark:before,.brand-mark:after{content:'';width:10px;height:31px;border-radius:2px;position:absolute;left:9px;top:0;transform:rotate(43deg);background:#7cb764}.brand-mark:after{transform:rotate(-43deg);background:#c5ed83;mix-blend-mode:multiply}.brand-period{font-size:10px;align-self:flex-start;letter-spacing:0;margin:5px 0 0 -7px}.search{display:flex;align-items:center;gap:12px;background:#f5f6f7;border:1px solid #eeeff0;border-radius:7px;height:43px;flex:1;max-width:580px;padding:0 15px;color:#7c848f}.search svg{width:18px}.search input{width:100%;min-width:0;background:transparent;border:0;outline:0;font-size:12px;color:var(--ink)}.search kbd{font:12px Geist;border:1px solid #dddfe3;border-radius:4px;padding:1px 6px;color:#949aa2}.header-actions{display:flex;align-items:center;gap:22px;margin-left:auto}.icon-button{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:32px}.icon-button svg{width:21px}.action-divider{height:24px;border-left:1px solid var(--line);margin:0 0 0 -1px}.cart-button{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px}.cart-count{font-size:10px;display:grid;place-items:center;background:var(--navy);color:white;width:19px;height:19px;border-radius:50%;margin-left:0}.small-badge{position:absolute;right:-4px;top:-4px;border-radius:50%;background:var(--lime);font-size:9px;min-width:15px;height:15px;display:grid;place-items:center}.hidden{display:none!important}.navigation{height:51px;display:flex;justify-content:space-between;border-top:1px solid var(--line);align-items:stretch}.nav-links{display:flex;align-items:stretch;gap:34px}.nav-links>button,.nav-links>a{font-size:12px;position:relative;display:flex;align-items:center;gap:7px}.nav-links .active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--ink)}.new-dot{width:5px;height:5px;border-radius:50%;background:#81b444}.deals-nav{color:#5e8133}.deals-nav svg{width:15px;height:15px}.nav-editorial{display:flex;align-items:center;font-size:11px;gap:9px;color:#5c6470}.nav-editorial svg{width:15px}.site-header{border-bottom:1px solid var(--line)}.category-strip{display:grid;grid-template-columns:repeat(6,1fr);padding:24px 80px 25px;gap:15px}.category-strip button{display:flex;align-items:center;justify-content:center;gap:11px;font-size:12px}.category-strip svg{width:25px;height:27px;stroke-width:1.4}.category-strip button:hover{transform:translateY(-2px)}.hero{position:relative;overflow:hidden;border-radius:var(--radius);background:#060e18 url('/assets/hero-phones.png') center/cover no-repeat;min-height:465px;color:white}.hero-content{padding:51px 50px 65px;position:relative;z-index:1;width:58%}.eyebrow{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:600;letter-spacing:1.65px;line-height:1.5}.hero .eyebrow{font-size:9px;letter-spacing:1.9px;color:#c1c8d3}.lime-dot{display:inline-block;width:5px;height:5px;background:var(--lime);border-radius:50%;flex-shrink:0}.hero h1{font-size:64px;line-height:1.06;letter-spacing:-3px;font-weight:580;margin:22px 0 21px}.hero h1>span{color:var(--lime)}.hero p{font-size:13px;line-height:1.8;color:#afb9ca}.hero-cta{display:flex;align-items:center;gap:20px;margin-top:26px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 21px;border-radius:5px;font-size:12px;font-weight:600}.button svg{width:17px;height:17px}.button-lime{background:var(--lime);color:#192513}.button-lime:hover{background:#d9ffa0;color:#15200e;transform:translateY(-2px)}.button-dark{background:var(--navy);color:#fff}.button-dark:hover{background:#263951;color:white}.hero-cta>span{font-size:11px;color:#aab4c4}.hero-cta strong{font-size:15px;color:#e8edf5;font-weight:500;margin-left:4px}.hero-proof{display:flex;align-items:center;gap:10px;font-size:9px;color:#95a2b5;margin-top:23px}.proof-stars{color:#96ba6c;font-size:12px;letter-spacing:2px}.hero-proof .proof-stars{color:var(--lime);font-size:10px}.hero-bottom{position:absolute;bottom:22px;left:50px;right:30px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#8995a8}.hero-pages{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:7px}.hero-pages button{width:6px;height:6px;background:#66707e;border-radius:10px}.hero-pages button.selected{background:var(--lime);width:25px}.slide-count{letter-spacing:1px;font-size:10px;color:#e8edf4}.slide-count span{color:#798696;margin-left:6px}.hero-feature{position:absolute;bottom:64px;right:30px;padding:12px 17px;display:flex;align-items:center;gap:12px;border:1px solid #ffffff24;border-radius:8px;background:#14243760;backdrop-filter:blur(15px);font-size:11px;color:#e1e8ef}.hero-feature small{display:block;font-size:7px;letter-spacing:1.5px;color:#92a4b9;margin-top:6px}.feature-spark{font-size:30px;color:var(--lime)}.benefits{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 8px;margin-bottom:15px;gap:20px}.benefits>div{display:flex;align-items:center;justify-content:center;gap:14px;position:relative}.benefits>div+div:before{content:'';position:absolute;left:-10px;height:29px;border-left:1px solid var(--line)}.benefits svg{width:29px;height:29px;stroke-width:1.3}.benefits p{font-size:11px;font-weight:550}.benefits small{display:block;font-size:9px;font-weight:400;color:#818691;margin-top:5px}.deals-section{background:var(--navy);padding:24px;border-radius:var(--radius);display:grid;grid-template-columns:1fr 3fr;gap:25px;scroll-margin-top:25px}.deal-intro{padding:7px 0 5px 10px;color:white}.deal-intro .eyebrow{color:var(--lime);font-size:9px;letter-spacing:1.5px}.deal-intro .eyebrow svg{height:15px;width:15px;fill:var(--lime);stroke-width:0}.deal-intro h2{font-size:29px;letter-spacing:-1px;line-height:1.15;margin:15px 0 11px;font-weight:550}.deal-intro>p{font-size:10px;line-height:1.7;color:#969fab}.countdown{display:flex;align-items:flex-start;gap:8px;margin:21px 0}.countdown>div{text-align:center}.countdown strong{width:43px;height:41px;background:#202938;border:1px solid #ffffff08;display:grid;place-items:center;border-radius:5px;font-size:23px;font-weight:450;font-variant-numeric:tabular-nums}.countdown small{display:block;font-size:7px;letter-spacing:1px;color:#8993a3;margin-top:7px}.countdown>span{font-size:22px;color:#6f7989;padding-top:4px}.text-link{display:inline-flex;align-items:center;gap:13px;font-size:11px;font-weight:550;white-space:nowrap}.text-link svg{width:17px;height:17px}.text-link.light{color:var(--lime);font-size:10px}.deal-products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.product-card{position:relative;background:white;border-radius:9px;overflow:hidden;padding:14px 17px 17px;min-width:0}.product-image-button{display:block;width:100%}.product-art{background-image:url('/assets/products.png');background-size:300% 200%;background-repeat:no-repeat;aspect-ratio:1;mix-blend-mode:multiply}.art-buds{background-position:0 0}.art-watch{background-position:50% 0}.art-power{background-position:100% 0}.art-phone{background-position:0 100%}.art-laptop{background-position:50% 100%}.art-headphones{background-position:100% 100%}.product-card .product-art{width:78%;margin:0 auto;transition:transform .35s}.product-card:hover .product-art{transform:scale(1.045)}.product-badge{position:absolute;top:14px;left:14px;background:#edf5e5;color:#567d2c;font-size:8px;font-weight:650;letter-spacing:.1px;padding:5px 7px;border-radius:4px;z-index:1}.wish-button{position:absolute;right:11px;top:10px;width:28px;height:28px;display:grid;place-items:center;color:#92969c;border-radius:50%;z-index:1}.wish-button:hover{background:#f0f3eb}.wish-button svg{width:16px;height:16px;stroke-width:1.4}.wish-button.saved{color:#6a9836}.wish-button.saved svg{fill:#c9f478}.product-info{margin-top:9px}.product-info h3{font-size:12px;letter-spacing:-.2px;font-weight:600}.product-info>p{color:#8c9099;font-size:9px;margin-top:4px}.product-rating{display:flex;align-items:center;gap:6px;font-size:8px;color:#9398a0;margin-top:10px}.product-rating .stars{color:#9cb979;font-size:9px;letter-spacing:1px}.product-rating strong{font-weight:500;color:#596170}.product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:11px}.price{font-size:16px;font-weight:650;letter-spacing:-.4px}.old-price{font-size:10px;text-decoration:line-through;color:#969ba3;margin-left:7px;font-weight:400;letter-spacing:0}.add-button{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;border:1px solid #dce1e5}.add-button svg{width:14px;height:14px}.add-button:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}.stock-line{margin-top:12px;padding-top:9px;border-top:3px solid #f0f2eb;position:relative;color:#8a9098;font-size:8px}.stock-line:before{content:'';position:absolute;top:-3px;left:0;width:62%;height:3px;background:#b9d399}.stock-line span{color:#6f873e;font-weight:500}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:20px}.section-heading .eyebrow{margin-bottom:8px;font-size:8px;letter-spacing:1.5px}.muted{color:#9297a0}.collections-section{padding-top:49px}.collections-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.collection-card{overflow:hidden;border-radius:9px;background:#f1f3f4;height:208px;position:relative;text-align:left;isolation:isolate}.collection-card>div:first-child{position:relative;z-index:2;padding:20px;pointer-events:none}.collection-card>div>span:first-child{font-size:7px;letter-spacing:1.2px;color:#737e8a;display:block;margin-bottom:10px}.collection-card h3{font-size:18px;line-height:1.25;letter-spacing:-.5px;font-weight:550}.collection-link{display:flex;align-items:center;gap:8px;font-size:8px;margin-top:15px}.collection-link svg{width:13px;height:13px}.collection-card .product-art{position:absolute;width:170px;right:-30px;bottom:-34px;z-index:1;transition:transform .4s;transform:rotate(-9deg)}.collection-card:hover .product-art{transform:rotate(-4deg) scale(1.07)}.collection-card.laptops{background:#f0f0ed}.collection-card.laptops .product-art{width:197px;right:-37px;bottom:-24px;transform:rotate(-8deg)}.collection-card.audio{background:#ecf0ec}.collection-card.audio .product-art{width:161px;right:-22px;bottom:-38px;transform:rotate(12deg)}.collection-card.wearables{background:#f0edf2}.collection-card.wearables .product-art{right:-38px;bottom:-35px;transform:rotate(16deg)}.favorites-section{padding-top:47px}.product-tabs{display:flex;gap:4px;margin-bottom:2px}.product-tabs button{padding:8px 13px;border-radius:5px;color:#858a93;font-size:10px}.product-tabs button.active{background:var(--navy);color:white}.favorites-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.favorites-grid .product-card{border:1px solid var(--line);padding:15px 19px 19px}.favorites-grid .product-art{width:85%;margin-top:8px}.favorites-grid .product-info{padding-top:11px;border-top:1px solid #f0f1f2;margin-top:15px}.favorites-grid .product-info h3{font-size:13px}.favorites-grid .product-rating{margin-top:8px}.favorites-grid .product-bottom{margin-top:14px}.favorites-grid .add-button{background:#f4f6f1;border:0}.community-note{display:flex;align-items:center;justify-content:center;gap:11px;font-size:10px;color:#8b919a;padding:25px 0 4px}.community-note strong{color:#626c77;font-weight:500}.community-note svg{width:14px;height:14px;color:#8f9c84}.journal-section{padding:43px 0 45px}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.journal-card{text-align:left}.journal-image{height:195px;border-radius:9px;position:relative;overflow:hidden;isolation:isolate;background:#dbe2e9}.article-tag{position:absolute;top:17px;left:17px;background:#ffffffb8;border-radius:3px;font-size:7px;letter-spacing:.8px;padding:6px 8px;z-index:2}.journal-image .product-art{width:190px;position:absolute;right:8px;bottom:-38px;transform:rotate(15deg);transition:transform .4s}.journal-card:hover .product-art{transform:rotate(10deg) scale(1.07)}.journal-audio{background:#e6e6dd}.journal-audio .product-art{width:215px;bottom:-39px;right:-14px;transform:rotate(-20deg)}.journal-watch{background:#dce4dc}.journal-watch .product-art{width:222px;bottom:-46px;right:-17px;transform:rotate(-15deg)}.journal-decoration{position:absolute;bottom:25px;left:20px;font-size:25px;line-height:1.03;letter-spacing:-1px;font-weight:550;color:#465766;z-index:2}.journal-audio .journal-decoration{color:#5d6151}.journal-watch .journal-decoration{color:#4b6055}.article-meta{display:flex;gap:12px;font-size:7px;letter-spacing:1px;color:#6e805b;margin:17px 0 9px;font-weight:600}.article-meta>span{font-weight:400;color:#9ca1a9;position:relative;padding-left:11px}.article-meta>span:before{position:absolute;left:0;content:'·'}.journal-card h3{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:14px;font-weight:550;letter-spacing:-.3px}.journal-card h3 svg{width:16px;height:16px}.journal-card p{font-size:10px;color:#8a909a;margin-top:8px}.newsletter{display:flex;align-items:center;gap:28px;background:#eaf2df;border:1px solid #e4ecd9;border-radius:12px;padding:30px 32px;margin-bottom:48px;position:relative;overflow:hidden}.newsletter-decoration{font-size:80px;color:#718954;line-height:1;margin-right:0}.newsletter .eyebrow{font-size:8px;letter-spacing:1.5px;color:#677a52}.newsletter h2{margin:6px 0 8px;font-size:29px;letter-spacing:-1px}.newsletter p{font-size:11px;color:#718068}.newsletter form{margin-left:auto;width:40%;flex-shrink:0}.email-field{border:1px solid #d6dfcc;background:#fff;border-radius:6px;padding:5px;display:flex}.email-field input{background:transparent;border:0;padding:10px;min-width:0;flex:1;font-size:11px;outline-offset:0}.email-field button{background:var(--navy);color:white;border-radius:4px;padding:10px 16px;display:flex;align-items:center;gap:13px;font-size:10px;white-space:nowrap}.email-field svg{width:14px;height:14px}.newsletter form>span{display:block;margin-top:9px;font-size:8px;color:#8a9581}footer{background:var(--navy);color:#b3bcc9;padding:44px 0 0}.footer-main{display:grid;grid-template-columns:1.6fr .85fr 1fr 1fr 1.15fr;gap:35px;padding-bottom:37px}.footer-brand .brand{color:white;font-size:24px}.footer-brand .brand-mark{transform:scale(.87);transform-origin:left center;margin-right:-3px}.footer-brand .brand-mark:after{mix-blend-mode:normal}.footer-brand>p{font-size:10px;line-height:1.85;color:#8793a5;margin:17px 0}.footer-location{font-size:8px;display:flex;align-items:center;gap:6px;color:#97a68b}.footer-location .lime-dot{width:4px;height:4px}footer h4{font-size:10px;font-weight:500;color:#f0f3f6;margin:3px 0 18px}.footer-main>div:not(:first-child)>button,.footer-main>div:not(:first-child)>a{display:block;color:#8793a5;font-size:10px;margin-bottom:11px}.footer-main button:hover{color:var(--lime)!important}.footer-signoff>span{font-size:12px;letter-spacing:1px;color:#9daaad;line-height:1.65;font-weight:550}.payment-methods{display:flex;gap:5px;margin-top:23px;flex-wrap:wrap}.payment-methods b{background:#ffffff0a;border:1px solid #ffffff19;border-radius:3px;font-size:8px;padding:5px;color:#aeb9c8}.footer-bottom{border-top:1px solid #ffffff12;display:flex;justify-content:space-between;padding:18px 0 23px;color:#637184;font-size:8px}.footer-bottom>div{display:flex;gap:22px}.footer-bottom button{font-size:8px}.footer-bottom>div>span{margin-left:12px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,25px);background:var(--navy);color:white;border:1px solid #ffffff24;padding:15px 22px;border-radius:9px;box-shadow:0 8px 30px #0002;z-index:20;font-size:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--line);border-radius:16px;max-width:min(850px,94vw);width:850px;padding:40px;color:var(--ink);box-shadow:0 25px 120px #0003;max-height:90dvh}dialog::backdrop{background:#040b1880;backdrop-filter:blur(4px)}.modal-close{position:absolute;right:17px;top:15px;z-index:5;border-radius:50%;background:#f4f5f6}body:has(dialog[open]){overflow:hidden}.modal-product{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.modal-product .product-art{width:100%;background-color:#f7f8f9;border-radius:10px}.modal-product h2{font-size:32px;line-height:1.1;margin:10px 0 13px}.modal-product .product-rating{font-size:11px}.modal-description{color:#77808e;font-size:13px;line-height:1.8;margin:18px 0}.modal-price{font-size:27px;font-weight:650;margin:20px 0}.product-specs{list-style:none;padding:0;display:grid;gap:9px;font-size:11px;color:#596775;margin:18px 0 22px}.product-specs li:before{content:'✓';color:#759e45;margin-right:8px}.modal-product .button{width:100%}.in-stock{font-size:10px;color:#628638;display:block;margin-bottom:15px}.modal-product .old-price{font-size:15px}.modal-heading{margin-bottom:10px}.modal-subtitle{font-size:12px;color:#818b97;line-height:1.6;margin-bottom:25px}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.catalog-grid .product-card{border:1px solid var(--line)}.catalog-grid .product-info h3{font-size:11px}.catalog-grid .product-art{margin-top:16px}.catalog-grid .old-price{font-size:9px;display:block;margin:3px 0 0}.empty-state{text-align:center;padding:45px 15px}.empty-state>svg{width:40px;height:40px;margin:0 auto 18px;color:#819568}.empty-state h3{font-size:21px;font-weight:550}.empty-state p{font-size:13px;line-height:1.7;color:#84909d;margin:12px 0 23px}.cart-dialog{position:fixed;left:auto;right:0;top:0;bottom:0;margin:0;border-radius:16px 0 0 16px;max-height:100dvh;height:100dvh;width:470px;max-width:100vw;padding:30px}.cart-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:23px}.cart-title h2{font-size:25px;margin-top:8px;letter-spacing:-.7px}.cart-title .eyebrow{font-size:8px}.cart-title h2 span{font-size:13px;color:#929ba4;margin-left:4px}.cart-item{display:grid;grid-template-columns:76px 1fr auto;gap:15px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}.cart-item .product-art{border-radius:7px;background-color:#f5f6f7}.cart-item h3{font-size:12px;margin-bottom:6px}.cart-item p{font-size:10px;color:#87919c}.quantity-control{display:flex;align-items:center;gap:12px;margin-top:10px}.quantity-control button{width:22px;height:22px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center}.quantity-control span{font-size:11px}.cart-item-price{font-size:12px;text-align:right}.remove-item{font-size:9px;color:#9b7b76;display:block;margin:12px 0 0 auto}.cart-summary{margin-top:28px}.cart-summary>div{display:flex;justify-content:space-between;font-size:12px;margin-bottom:15px}.cart-summary>div.cart-total{font-weight:600;font-size:20px;padding-top:18px;border-top:1px solid var(--line)}.cart-summary .button{width:100%;margin-top:10px}.shipping-progress{background:#f2f6ec;padding:14px;border-radius:6px;font-size:10px;color:#71824d;margin-top:20px;text-align:center}.cart-disclaimer{color:#8c94a0;font-size:10px;line-height:1.7;text-align:center;margin:14px 0}.prose{max-width:620px;margin:auto}.prose .eyebrow{margin-bottom:15px}.prose h2{font-size:33px;margin-bottom:22px;line-height:1.2}.prose h3{font-size:17px;margin:25px 0 10px}.prose p{color:#78828f;font-size:13px;line-height:1.9;margin:12px 0}.prose .button{margin-top:18px}.account-form{display:grid;gap:14px;max-width:390px;margin:0 auto}.account-form h2{margin-bottom:0}.account-form>p{color:#85909c;font-size:12px;line-height:1.7}.account-form label{font-size:11px;font-weight:500;display:grid;gap:8px}.account-form input{padding:13px;border:1px solid #dbe0e5;border-radius:6px}.no-results{grid-column:1/-1;padding:40px;color:#88919a;font-size:13px;text-align:center}.account-card{text-align:center;padding:25px}.account-card>svg{margin:0 auto 18px;width:45px;height:45px;color:#76974c}.account-card h2{margin-bottom:15px}.account-card p{color:#84909a;line-height:1.8;margin-bottom:23px;font-size:13px}
@media(min-width:1500px){.container{max-width:1400px}.announcement{padding-left:calc((100vw - 1320px)/2);padding-right:calc((100vw - 1320px)/2)}.hero{min-height:495px}.hero-content{padding-top:58px}.hero h1{font-size:70px}.product-card .product-art{width:77%}.deal-intro{padding:13px 0 6px 12px}.deal-intro h2{font-size:32px}.deal-intro>p{font-size:11px}.countdown{margin:25px 0}.collection-card{height:220px}}
@media(max-width:1100px){.container{padding:0 25px}.announcement{padding-left:25px;padding-right:25px}.header-main{gap:35px}.header-actions{gap:16px}.category-strip{padding:23px 20px}.hero-content{padding:45px 35px 70px}.hero h1{font-size:55px}.hero{min-height:450px}.hero-bottom{left:35px}.hero-feature{right:20px}.benefits{gap:12px}.benefits>div{gap:10px}.benefits p{font-size:10px}.benefits small{font-size:8px}.deals-section{grid-template-columns:.9fr 3fr;gap:18px;padding:20px}.deal-intro{padding-left:3px}.deal-intro h2{font-size:24px}.product-card{padding:13px 12px}.old-price{font-size:8px;margin-left:4px}.price{font-size:14px}.deal-products{gap:10px}.countdown{gap:6px;margin:18px 0}.countdown strong{width:37px;height:37px;font-size:21px}.collection-card>div:first-child{padding:17px}.collection-card h3{font-size:16px}.collection-card{height:190px}.collection-card .product-art{width:142px;bottom:-25px}.collection-card.laptops .product-art{width:150px;right:-32px;bottom:-36px}.collection-card.audio .product-art{width:140px;bottom:-27px}.collection-card.wearables .product-art{bottom:-22px;right:-27px}.newsletter{gap:20px;padding:26px}.newsletter-decoration{font-size:65px}.newsletter h2{font-size:26px}.newsletter p{font-size:10px}.newsletter form{width:41%}.footer-main{gap:25px}.footer-signoff{display:none}.footer-main{grid-template-columns:1.6fr 1fr 1fr 1fr}.journal-image .product-art{right:-24px}.journal-audio .product-art,.journal-watch .product-art{right:-50px}.journal-decoration{font-size:22px;left:17px}}
@media(max-width:800px){.announcement>span:first-child,.announcement>button{display:none}.announcement{justify-content:center}.header-main{gap:22px;height:80px}.brand{font-size:23px}.brand-mark{transform:scale(.85)}.header-actions{gap:14px}.bag-label,.action-divider,#account-button{display:none}.search{height:39px}.navigation{height:46px}.nav-links{gap:26px}.nav-editorial{font-size:10px}.category-strip{padding:20px 0;gap:10px}.category-strip button{font-size:10px;gap:7px}.category-strip svg{width:21px;height:24px}.hero{min-height:419px;background-position:55% center}.hero-content{padding:36px 28px 66px;width:65%;background:linear-gradient(90deg,#060d18bb,transparent)}.hero h1{font-size:48px;letter-spacing:-2.4px}.hero .eyebrow{font-size:7px;letter-spacing:1.25px}.hero p{font-size:11px}.hero-cta{gap:13px}.hero-cta>span{font-size:9px}.hero-cta strong{font-size:12px}.hero .button{padding:13px 16px;font-size:11px;gap:10px}.hero-feature{display:none}.hero-bottom{left:28px}.hero-proof{font-size:8px}.benefits{grid-template-columns:repeat(2,1fr);row-gap:24px;padding:26px 0;margin-bottom:10px}.benefits>div{justify-content:flex-start;padding-left:25px}.benefits>div:nth-child(3):before{display:none}.benefits p{font-size:11px}.benefits small{font-size:9px}.deals-section{grid-template-columns:1fr;padding:22px;gap:22px}.deal-intro{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;position:relative;padding:0}.deal-intro .eyebrow{grid-column:1}.deal-intro h2{grid-column:1;font-size:25px;margin-bottom:0}.deal-intro h2 br{display:none}.deal-intro>p{display:none}.countdown{grid-column:2;grid-row:1/3;justify-self:end;margin:0}.deal-intro .text-link{position:absolute;bottom:-11px;right:0;font-size:9px}.countdown{margin-bottom:19px}.deal-products{gap:12px}.product-card{padding:12px}.deal-products .product-art{margin-top:15px}.stock-line{font-size:7px}.section-heading h2{font-size:27px}.collections-section,.favorites-section{padding-top:37px}.collections-grid{grid-template-columns:repeat(2,1fr);gap:14px}.collection-card{height:190px}.collection-card h3{font-size:21px}.collection-card .product-art{width:173px;right:-10px;bottom:-34px}.collection-card.laptops .product-art{width:150px;right:-30px;bottom:-38px}.collection-card.audio .product-art{width:170px;right:0;bottom:-34px}.collection-card.wearables .product-art{right:-15px;bottom:-25px}.favorites-section .section-heading{align-items:flex-start;flex-direction:column;gap:15px}.favorites-grid{grid-template-columns:repeat(2,1fr);gap:15px}.favorites-grid .product-art{width:74%}.community-note{font-size:8px;gap:7px}.community-note .proof-stars{font-size:9px}.journal-section{padding-top:32px}.journal-grid{gap:16px}.journal-image{height:168px}.journal-decoration{font-size:20px;bottom:19px}.journal-image .product-art{width:160px;right:-46px;bottom:-26px}.journal-audio .product-art,.journal-watch .product-art{width:183px;right:-70px;bottom:-27px}.article-tag{left:10px;top:12px;font-size:6px;letter-spacing:.5px;padding:5px}.journal-card h3{font-size:12px;line-height:1.5}.journal-card p{font-size:9px;line-height:1.7}.article-meta{font-size:6px;gap:5px}.article-meta>span{padding-left:6px}.newsletter{flex-wrap:wrap;gap:15px;padding:25px}.newsletter-decoration{font-size:59px;margin-right:5px}.newsletter form{width:100%;margin:4px 0 0}.footer-main{gap:25px;grid-template-columns:1.5fr 1fr 1fr}.footer-main>div:nth-child(4){display:none}.footer-bottom>div{gap:13px}.footer-bottom>div>span{display:none}.catalog-grid{grid-template-columns:repeat(2,1fr)}dialog{padding:32px}.modal-product{gap:22px}.modal-product h2{font-size:26px}}
@media(max-width:520px){.container{padding:0 18px}.announcement{font-size:8px;padding:9px 10px;min-height:30px}.announcement a{margin-left:7px}.announcement-divider{margin-left:7px}.header-main{height:113px;flex-wrap:wrap;gap:0;align-content:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}.brand{font-size:24px;gap:7px}.header-actions{gap:19px}.header-actions svg{width:20px}.search{order:3;flex-basis:100%;margin-top:13px;height:35px;max-width:none}.search input{font-size:10px}.search kbd{display:none}.cart-button{gap:7px}.navigation{height:45px}.nav-links{gap:22px;width:100%;justify-content:space-between}.nav-links>button,.nav-links>a{font-size:10px}.new-dot{width:4px;height:4px}.nav-editorial{display:none}.deals-nav svg{width:12px}.category-strip{padding:19px 0;gap:0}.category-strip button{flex-direction:column;gap:7px;font-size:8px}.category-strip svg{width:21px;height:23px}.hero{min-height:478px;background-size:auto 320px;background-position:71% 112px;background-color:#050d17;border-radius:10px}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#050d17 0%,#050d17e0 28%,transparent 61%,#050d1740 85%,#050d17 100%);pointer-events:none}.hero-content{padding:28px 24px 0;width:100%;background:none;z-index:2}.hero .eyebrow{font-size:6px;letter-spacing:1.4px}.hero h1{font-size:47px;line-height:1.03;letter-spacing:-2.5px;margin:17px 0 15px}.hero h1 br{display:none}.hero h1>span{display:block}.hero p{font-size:10px;line-height:1.7;max-width:205px}.hero-cta{margin-top:19px;gap:12px}.hero .button{padding:11px 13px;font-size:10px}.hero-cta>span{font-size:8px}.hero-cta strong{font-size:11px;margin-left:2px}.hero-proof{position:absolute;top:417px;font-size:7px;margin:0}.hero-proof .proof-stars{font-size:8px}.hero-bottom{z-index:3;bottom:20px;left:24px;right:20px;font-size:6px;letter-spacing:1.2px}.hero-pages{left:65%}.hero-pages button{width:5px;height:5px}.hero-pages button.selected{width:19px}.slide-count{font-size:8px}.benefits{gap:19px 10px;padding:24px 0;margin-bottom:0}.benefits>div{padding-left:2px;gap:9px}.benefits>div:nth-child(even){padding-left:12px}.benefits svg{width:24px;height:24px}.benefits p{font-size:9px}.benefits small{font-size:7px;margin-top:4px}.benefits>div+div:before{left:-3px;height:26px}.deals-section{border-radius:10px;padding:21px 15px 16px;gap:18px;margin-top:4px}.deal-intro .eyebrow{font-size:7px;letter-spacing:1px}.deal-intro .eyebrow svg{width:12px;height:12px}.deal-intro h2{font-size:22px;margin-top:11px;max-width:190px}.deal-intro h2 br{display:initial}.countdown{gap:5px;margin:0 0 19px}.countdown strong{width:31px;height:33px;font-size:19px}.countdown small{font-size:6px;margin-top:5px}.countdown>span{font-size:18px}.deal-intro .text-link{font-size:8px;bottom:0;gap:7px}.deal-intro .text-link svg{width:13px}.deal-products{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:11px;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:#354253 transparent}.deal-products .product-card{flex:0 0 72%;scroll-snap-align:start;padding:13px 15px}.deal-products .product-art{width:73%;margin-top:12px}.deal-products .product-info h3{font-size:13px}.deal-products .product-info>p{font-size:9px}.deal-products .product-rating{font-size:9px}.deal-products .price{font-size:18px}.deal-products .old-price{font-size:10px}.deal-products .stock-line{font-size:8px}.deal-products .add-button{width:30px;height:30px}.collections-section,.favorites-section{padding-top:32px}.section-heading{margin-bottom:18px;gap:8px;align-items:center}.section-heading .eyebrow{font-size:6px;letter-spacing:1px;margin-bottom:6px}.section-heading h2{font-size:24px;letter-spacing:-.9px}.section-heading>.text-link{font-size:0;gap:0}.section-heading>.text-link svg{width:23px;height:23px;border:1px solid #dddfe3;border-radius:50%;padding:4px}.collections-grid{gap:11px}.collection-card{height:191px}.collection-card>div:first-child{padding:16px 13px}.collection-card>div>span:first-child{font-size:5.5px;letter-spacing:.8px;margin-bottom:8px}.collection-card h3{font-size:16px;letter-spacing:-.4px;line-height:1.2}.collection-link{font-size:7px;margin-top:11px;gap:5px}.collection-card .product-art{width:139px;right:-21px;bottom:-29px}.collection-card.laptops .product-art{width:146px;right:-26px;bottom:-26px}.collection-card.audio .product-art{width:137px;right:-18px;bottom:-24px}.collection-card.wearables .product-art{right:-28px;bottom:-20px}.favorites-section .section-heading{gap:13px;margin-bottom:12px}.product-tabs{gap:3px;width:100%;justify-content:space-between}.product-tabs button{padding:8px 9px;font-size:9px}.favorites-grid{gap:11px}.favorites-grid .product-card{padding:12px}.favorites-grid .product-art{width:95%;margin-top:17px}.product-badge{font-size:6px;padding:4px 6px;top:10px;left:10px}.wish-button{right:6px;top:5px}.wish-button svg{width:14px;height:14px}.favorites-grid .product-info{margin-top:7px;padding-top:11px}.favorites-grid .product-info h3{font-size:11px}.favorites-grid .product-info>p{font-size:8px}.product-rating{gap:4px;font-size:7px}.product-rating .stars{font-size:8px;letter-spacing:.2px}.price{font-size:14px}.old-price{display:block;font-size:8px;margin-left:0;margin-top:3px}.add-button{width:25px;height:25px}.community-note{font-size:7px;gap:7px;flex-wrap:wrap;line-height:1.7;padding-top:20px}.community-note svg{display:none}.community-note .proof-stars{font-size:8px}.journal-section{padding:29px 0}.journal-grid{grid-template-columns:1fr;gap:25px}.journal-image{height:195px}.journal-decoration{font-size:30px;left:24px;bottom:28px}.journal-image .product-art{width:210px;right:10px;bottom:-48px}.journal-audio .product-art,.journal-watch .product-art{width:225px;right:-8px;bottom:-45px}.article-tag{left:20px;top:19px;font-size:7px;padding:6px 8px}.article-meta{font-size:7px;margin-top:13px;gap:12px}.journal-card h3{font-size:15px;line-height:1.3}.journal-card p{font-size:10px;margin-top:5px}.newsletter{padding:24px 20px;gap:15px;margin-bottom:30px}.newsletter-decoration{font-size:48px;margin:0}.newsletter .eyebrow{font-size:6px;letter-spacing:1px}.newsletter h2{font-size:25px;margin:5px 0 7px}.newsletter p{font-size:8px}.newsletter form{margin-top:5px}.email-field input{font-size:10px;padding:10px 7px}.email-field button{font-size:9px;padding:10px 11px;gap:8px}.newsletter form>span{font-size:7px}footer{padding-top:30px}.footer-main{grid-template-columns:1fr 1fr;gap:25px 20px;padding-bottom:25px}.footer-brand{grid-column:1/-1}.footer-brand .brand{font-size:24px}.footer-brand>p{margin:12px 0;line-height:1.8}.footer-location{font-size:8px}.footer-main>div:nth-child(2),.footer-main>div:nth-child(3){padding-top:5px}.footer-main h4{margin-bottom:15px}.footer-main>div:not(:first-child)>button,.footer-main>div:not(:first-child)>a{font-size:10px;margin-bottom:12px}.footer-bottom{font-size:7px;gap:12px;flex-direction:column;padding:16px 0 20px}.footer-bottom button{font-size:7px}.footer-bottom>div{gap:20px}dialog{padding:30px 19px;border-radius:12px;max-width:94vw}.modal-product{grid-template-columns:1fr;gap:15px}.modal-product>.product-art{width:65%;margin:auto}.modal-product h2{font-size:28px}.modal-product .modal-description{margin:10px 0;font-size:12px}.modal-price{margin:15px 0}.product-specs{margin:14px 0;grid-template-columns:1fr 1fr;font-size:9px;gap:10px}.modal-product .in-stock{margin-bottom:13px}.catalog-grid{gap:9px}.catalog-grid .product-card{padding:10px}.catalog-grid .product-art{width:100%}.catalog-grid .price{font-size:14px}.catalog-grid .product-rating{flex-wrap:wrap}.modal-heading{font-size:25px}.modal-subtitle{font-size:10px}.cart-dialog{max-width:100vw;padding:24px;border-radius:0}.cart-title h2{font-size:24px}.cart-item{gap:10px;grid-template-columns:65px 1fr auto}.prose h2{font-size:28px}.prose p{font-size:12px}}
.collection-card>div:first-child{position:absolute;top:0;left:0;width:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Composites rendered by app.js */
/* The campaign dots sit under .hero-content's stacking context, which is
   wider than the text it holds — lift the whole bottom strip so the dots,
   not the invisible padding above them, receive the click. */
.hero-bottom{z-index:2}
.catalog-tools{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.catalog-count{font-size:10px;color:#9297a0;white-space:nowrap}
.modal-product .text-link{margin-top:16px;color:#6f7b88;font-size:10px}
.modal-product .text-link.saved{color:#5f8a2e}
.modal-product .text-link svg{width:14px;height:14px}
.modal-product .text-link.saved svg{fill:var(--lime)}
.article-divider{border:0;border-top:1px solid var(--line);margin:40px auto;max-width:620px}
.cart-summary .remove-item{margin-top:6px}

/* ==========================================================================
   The multi-page storefront.
   Everything above dresses the home page and the dialogs it opens. Everything
   below dresses the pages the router renders into <main>: listing, product,
   bag, checkout, account, editorial and legal — plus the chrome that follows a
   shopper across all of them.
   ========================================================================== */

/* -- page furniture: the head of an interior page, and its small messages -- */
/* Off-screen until it is focused, and a real control the moment it is: the
   first thing in the document must not be a permanent line of grey text. */
.skip-link{position:fixed;left:14px;top:-70px;z-index:40;background:var(--navy);color:#fff;border-radius:5px;padding:13px 19px;font-size:12px;font-weight:600;box-shadow:0 8px 30px #0003;transition:top .15s}
.skip-link:focus{top:14px}
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:18px 0 0;font-size:10px;color:#8b929c}
.breadcrumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.breadcrumbs li{list-style:none}
.breadcrumbs li+li:before{content:'/';margin-right:7px;color:#c2c7ce}
/* The listing's trail separates its crumbs with a chevron icon instead of a
   list, and an unsized icon renders at its own 24px next to 10px text. */
.breadcrumbs svg{width:12px;height:12px;flex-shrink:0;color:#c2c7ce}
.breadcrumbs a:hover{color:#60892d}
.breadcrumbs [aria-current=page]{color:#5c6672}
.page-head{padding:30px 0 24px;max-width:790px}
.breadcrumbs+.page-head,.site-note+.page-head{padding-top:14px}
.page-head .eyebrow{font-size:8px;letter-spacing:1.5px;color:#8b929c;margin-bottom:11px}
.page-title{font-size:36px;font-weight:600;letter-spacing:-1.5px;line-height:1.15}
.page-lede{font-size:13px;line-height:1.9;color:#78828f;margin-top:13px;max-width:640px}
.section-divider{border:0;border-top:1px solid var(--line);margin:38px 0}
.site-note{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:11px 15px;margin:20px 0 0;font-size:11px;line-height:1.7;color:#6f7885}
.site-note svg{width:15px;height:15px;color:#8a9683;margin-top:2px}
.site-note code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;background:#eceef0;border-radius:3px;padding:1px 5px}
.notice{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:7px;padding:13px 16px;margin:0 0 18px;font-size:12px;line-height:1.7}
.notice svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.notice strong{font-weight:600}
.notice a{text-decoration:underline;text-underline-offset:3px}
.notice-error{background:#fbefee;border-color:#f0dcd9;color:#8f4841}
.notice-success{background:#edf5e5;border-color:#dfebd2;color:#567d2c}
.notice-info{background:#eef2f6;border-color:#e0e7ee;color:#4e5c6b}
.badge-pill{display:inline-flex;align-items:center;gap:5px;background:#eef0f2;color:#67707c;border-radius:20px;padding:4px 9px;font-size:8px;font-weight:600;letter-spacing:.9px;text-transform:uppercase}
.pill-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.stat{background:#fff;padding:17px 18px}
.stat strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.8px}
.stat span{display:block;font-size:8px;letter-spacing:1.4px;text-transform:uppercase;color:#8d949e;margin-top:7px}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.65;margin-right:8px;vertical-align:-2px;animation:nx-spin .7s linear infinite}
.button .spinner{margin-right:0}
@keyframes nx-spin{to{transform:rotate(360deg)}}
/* A .button with no colour modifier is an outline button rather than invisible
   text — the consent panel and the page forms both ship one. */
.button:not(.button-lime):not(.button-dark){border:1px solid var(--line);background:#fff}
.button:not(.button-lime):not(.button-dark):hover{border-color:#c3ccb4;background:var(--surface);color:#4c6a26}

/* -- listing: the filter rail, the sort bar, the pager --------------------- */
.listing-layout{display:grid;grid-template-columns:225px 1fr;gap:30px;align-items:start;padding-top:4px}
.filter-rail{position:sticky;top:20px;min-width:0}
/* The rail is a <details> so it can fold away on a phone. Above the collapse
   width there is nothing to fold: the summary goes, and the panel is held open
   so a rail someone closed on a phone is not still closed on a desktop. */
.filter-rail>summary{display:none}
.filter-rail::details-content{content-visibility:visible;display:block;block-size:auto}
.filter-group{padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid var(--line)}
.filter-group:last-child{border-bottom:0;margin-bottom:0}
.filter-title{display:block;font-size:9px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#8a9099;margin-bottom:12px}
/* Each group ships as a <details>, so its title is the control that opens it:
   it needs the hit area, the cursor and the +/- of every other disclosure in
   this sheet, and not the browser's triangle in the middle of small caps. */
summary.filter-title{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;padding:2px 0;margin-bottom:8px;cursor:pointer;list-style:none}
summary.filter-title::-webkit-details-marker{display:none}
summary.filter-title:after{content:'+';font-size:14px;font-weight:400;line-height:1;color:#a3a9b2}
[open]>summary.filter-title:after{content:'–'}
summary.filter-title:hover{color:#60892d}
.filter-list{display:grid;gap:4px;list-style:none;margin:0;padding:0}
.filter-list li{min-width:0}
.filter-list a,.filter-list label:not(.form-label){display:flex;align-items:center;gap:9px;min-height:26px;font-size:11px;color:#5f6874}
.filter-list a:hover,.filter-list label:not(.form-label):hover{color:#60892d}
/* Only the tick boxes are 15px squares. The price fields in the same list are
   .form-input and were being shrunk to a 28px stub by an unqualified rule. */
.filter-list input[type=checkbox],.filter-list input[type=radio]{accent-color:#7ba548;width:15px;height:15px;flex-shrink:0;margin:0}
.filter-list [aria-current=page]{color:var(--ink);font-weight:600}
/* The count, which is the span that follows the label — not the label itself,
   which this rule used to push into the middle of its own row. */
.filter-list span+span{margin-left:auto;font-size:9px;color:#9ba1a9}
.filter-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 13px;font-size:10px;color:#5f6874;white-space:nowrap}
.filter-chip:hover{border-color:#cbd3bf;color:#4c6a26}
/* aria-current is how the listing marks the sort, the page size and the price
   band it is showing, so it selects a chip exactly as .active and aria-pressed
   do — without it the chosen sort looked the same as the six it was chosen
   over. */
.filter-chip.active,.filter-chip[aria-pressed=true],.filter-chip[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
/* the tick, so the selected chip is not selected by its fill alone */
.filter-chip.active:before,.filter-chip[aria-pressed=true]:before,.filter-chip[aria-current]:before{content:'✓';font-size:9px}
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;font-size:10px;color:#8b929c}
.active-filters .filter-chip:after{content:'×';font-size:12px;line-height:1;color:#9aa1a9}
.active-filters .filter-chip.active:after,.active-filters .filter-chip[aria-pressed=true]:after,.active-filters .filter-chip[aria-current]:after{color:#c9ced6}
.sort-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line)}
/* Two shapes ship under each of these names. A real <select> is a control and
   keeps the box; a <nav> of links is a row of chips and must not be wrapped in
   one — boxed, the chips inside it read as a control inside a control, and the
   label ahead of them sat on the border. */
.sort-select,.view-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-width:0;font-size:11px;color:#5f6874}
.sort-select>.muted,.view-toggle>.muted{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#8a9099}
select.sort-select{display:block;min-height:36px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:9px 11px}
.result-summary{font-size:10px;color:#9297a0}
.view-toggle:has(button){gap:0;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.view-toggle button{width:34px;height:32px;display:grid;place-items:center;color:#8b929c}
.view-toggle button+button{border-left:1px solid var(--line)}
.view-toggle svg{width:15px;height:15px}
.view-toggle [aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:inset 0 -2px 0 var(--navy)}
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:34px 0 8px}
.pagination-link,.pagination-current{min-width:34px;height:34px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;font-size:11px}
.pagination-link:hover{border-color:#b9c3cd;color:#4c6a26}
.pagination-current{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.pagination [aria-disabled=true]{opacity:.45;pointer-events:none}

/* -- product detail: gallery, buy box, tabs, reviews ---------------------- */
.product-detail{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start;padding-top:22px}
.product-gallery{position:sticky;top:20px;display:grid;gap:12px;min-width:0}
.gallery-main{display:grid;place-items:center;aspect-ratio:1;background:var(--surface);border-radius:12px;overflow:hidden;padding:26px}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-main .product-art{width:82%}
.gallery-thumbs{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.gallery-thumb{width:62px;height:62px;flex:0 0 auto;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px}
.gallery-thumb img{width:100%;height:100%;object-fit:contain}
.gallery-thumb .product-art{width:100%}
.gallery-thumb.active,.gallery-thumb[aria-current=true]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.product-summary{min-width:0}
.product-summary h1{font-size:31px;font-weight:600;letter-spacing:-1.2px;line-height:1.15;margin-top:9px}
.product-summary .price{font-size:27px}
.product-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font-size:10px;color:#8b929c}
.product-meta strong{color:#5b6572;font-weight:550}
.buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 16px}
.buy-row .button{flex:1 1 190px}
.qty-field{display:inline-flex;align-items:center;height:44px;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.qty-field button{width:38px;height:100%;display:grid;place-items:center;color:#5f6874}
.qty-field button:hover{background:var(--surface)}
.qty-field svg{width:14px;height:14px}
.qty-field input{width:46px;height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:13px;-moz-appearance:textfield}
.qty-field input::-webkit-inner-spin-button,.qty-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:18px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{display:flex;align-items:flex-start;gap:10px;font-size:10px;line-height:1.6;color:#8b929c}
/* 10px is the caption under a heading. A trust item that is only its label has
   no heading, so it is the label that has to be readable. */
.trust-item:not(:has(strong)){align-items:center;font-size:11px}
.trust-item svg{width:19px;height:19px;color:#7f9a63;stroke-width:1.4}
.trust-item strong{display:block;font-size:11px;font-weight:550;color:var(--ink);margin-bottom:3px}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font-size:10px;color:#8b929c}
.share-row a,.share-row button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;color:#6a727d}
.share-row a:hover,.share-row button:hover{border-color:#c3ccb4;color:#4c6a26}
.share-row svg{width:15px;height:15px}
.detail-tabs{display:flex;gap:2px;margin-top:44px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.detail-tab{padding:12px 15px;font-size:11px;color:#838a94;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.detail-tab.active,.detail-tab[aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--navy)}
.detail-panel{padding:24px 0 6px;max-width:760px;font-size:13px;line-height:1.9;color:#78828f}
.detail-panel h3{font-size:15px;color:var(--ink);margin:22px 0 8px}
/* .prose centres its measure, which is right on a legal page and wrong here:
   the panel is already a column, and its text has to start where the tab that
   opened it starts rather than 70px inside it. */
.detail-panel .prose{margin-left:0;margin-right:0}
.detail-panel ul,.detail-panel ol{padding-left:18px;margin:10px 0}
.detail-panel li{margin:7px 0}
.spec-table{width:100%;max-width:640px;border-collapse:collapse;font-size:12px}
.spec-table th{width:38%;text-align:left;font-weight:550;color:#5f6874;vertical-align:top;padding:11px 16px 11px 0;border-bottom:1px solid var(--line)}
.spec-table td{color:#7d8692;padding:11px 0;border-bottom:1px solid var(--line)}
.reviews{max-width:760px}
.review{padding:18px 0;border-bottom:1px solid var(--line)}
.review-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#8b929c}
.review-head strong{font-size:12px;font-weight:600;color:var(--ink)}
.review-head .stars{font-size:10px;letter-spacing:1px;color:#9cb979}
.review-body{margin-top:9px;font-size:12px;line-height:1.85;color:#77808e}
.review-form{display:grid;gap:14px;margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:22px}
.rating-input{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rating-input label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 8px 0 4px;font-size:11px;color:#6a727d;cursor:pointer}
.rating-input input{accent-color:#7ba548;width:15px;height:15px;margin:0}
.rating-input label:has(input:checked){color:#567d2c;font-weight:600}
.recommend-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.recommend-rail .product-card{border:1px solid var(--line)}

/* -- imagery: a shop photograph stands in the sprite art's box ------------- */
.product-photo{display:block;width:100%;max-width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.product-card .product-photo{width:78%;margin:0 auto;transition:transform .35s}
.product-card:hover .product-photo{transform:scale(1.045)}
.favorites-grid .product-photo{width:85%;margin-top:8px}
.catalog-grid .product-photo{margin-top:16px}
.cart-item .product-photo,.order-line .product-photo{width:100%;background:#f5f6f7;border-radius:7px}
.modal-product .product-photo{width:100%;background:#f7f8f9;border-radius:10px}
/* The lettered stand-in: the sprite sheet is not this product, so no artwork
   at all is drawn behind the letter. */
.product-art-blank{background-image:none;background-color:var(--surface);border-radius:8px;display:grid;place-items:center;mix-blend-mode:normal;color:#aeb5bd}
.product-art-blank span{font-size:40px;font-weight:200;letter-spacing:-1px;line-height:1}
.collection-photo{position:absolute;right:-16px;bottom:-16px;z-index:1;width:58%;max-width:180px;aspect-ratio:1;object-fit:contain;transform:rotate(-8deg);transition:transform .4s;mix-blend-mode:multiply}
.collection-card:hover .collection-photo{transform:rotate(-4deg) scale(1.07)}
.journal-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .4s}
.journal-card:hover .journal-photo{transform:scale(1.05)}
/* A photograph fills the whole tile, so the lettering on top of it needs a
   floor to stand on and a colour that survives one. */
.journal-image:has(.journal-photo):has(.journal-decoration):after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0b142300 42%,#0b1423a6)}
.journal-image:has(.journal-photo) .journal-decoration{color:#fff}
.product-info h3 a:hover{color:#60892d}
/* Stock: the bar is the quantity, the colour is only the temperature. Out of
   stock is grey, not red — nothing has gone wrong, there is simply none. */
.stock-line.low:before{width:17%;background:#dcb06a}
.stock-line.low span{color:#a9772e}
.stock-line.out{border-top-color:#eceef0}
.stock-line.out:before{display:none}
.stock-line.out span{color:#6d737b}

/* -- commerce: the bag page, the checkout and what it summarises ----------- */
.cart-page{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start}
.cart-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cart-lines .cart-item:last-child{border-bottom:0}
.cart-aside,.checkout-aside{position:sticky;top:20px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:9px;padding:22px}
.checkout-layout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
.checkout-main{min-width:0}
.checkout-step{border:1px solid var(--line);border-radius:9px;padding:22px 24px;margin-bottom:16px}
.checkout-step>h2{font-size:17px;letter-spacing:-.4px;margin-bottom:4px}
.checkout-step>p{font-size:11px;line-height:1.7;color:#85909c;margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid>*{min-width:0}
/* a field that wants the whole row instead of half of it */
.form-grid>.full,.form-grid>[data-span=full]{grid-column:1/-1}
.form-field{display:grid;gap:7px;min-width:0}
.form-label{font-size:11px;font-weight:550}
.form-label span{margin-left:5px;font-weight:400;color:#9298a1}
.form-input,.form-select,.form-textarea{width:100%;min-height:42px;background:#fff;border:1px solid #dbe0e5;border-radius:6px;padding:12px 13px;font-size:12px;color:var(--ink)}
.form-textarea{min-height:104px;line-height:1.7;resize:vertical}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:2px solid #709e38;outline-offset:2px;border-color:#b9cba3}
.form-input[aria-invalid=true],.form-select[aria-invalid=true],.form-textarea[aria-invalid=true]{border-color:#c79a94;background:#fdf7f6}
.form-help{font-size:10px;line-height:1.6;color:#8b929c}
.form-error{font-size:10px;line-height:1.6;color:#8f4841}
.form-error:before{content:'!';font-weight:700;margin-right:6px}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.method-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.method-option{display:flex;align-items:flex-start;gap:12px;min-height:52px;border:1px solid var(--line);border-radius:8px;padding:14px 16px;cursor:pointer}
.method-option input{accent-color:#7ba548;width:16px;height:16px;flex-shrink:0;margin:1px 0 0}
.method-option:has(input:checked){border-color:#a7c284;background:#f8fbf3;box-shadow:inset 0 0 0 1px #a7c284}
.method-option-body{flex:1;min-width:0}
.method-option-body strong{display:block;font-size:12px;font-weight:600}
.method-option-body p,.method-option-body small{display:block;margin-top:4px;font-size:10px;line-height:1.7;color:#85909c}
.order-summary{border:1px solid var(--line);border-radius:9px;padding:20px}
.cart-aside .order-summary,.checkout-aside .order-summary{border:0;border-radius:0;padding:0}
.order-summary h2,.order-summary h3{font-size:15px;letter-spacing:-.3px;margin-bottom:16px}
.summary-line{display:flex;justify-content:space-between;gap:16px;margin-bottom:13px;font-size:12px;color:#5f6874}
.summary-line strong{font-weight:550;color:var(--ink)}
.summary-line.cart-total{margin-bottom:0;padding-top:15px;border-top:1px solid var(--line);font-size:19px;font-weight:600;color:var(--ink)}
.promo-row{display:flex;gap:8px;margin:4px 0 16px}
.promo-row .form-input{flex:1;min-width:0}
.payment-status{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:15px 17px;font-size:12px;line-height:1.7;color:#5f6874}
.payment-status svg{width:18px;height:18px;flex-shrink:0}
.status-pill,.order-status{display:inline-flex;align-items:center;justify-self:start;gap:6px;background:#eef0f2;color:#5b6572;border-radius:20px;padding:5px 10px;font-size:9px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap}
/* The word in the pill already says which state this is; the tint only makes
   it quicker to find down a column of them. */
.status-pill.positive,.order-status.positive,.status-pill[data-state=paid],.order-status[data-state=paid],.status-pill[data-state=delivered],.order-status[data-state=delivered]{background:#edf5e5;color:#4f732a}
.status-pill.pending,.order-status.pending,.status-pill[data-state=pending],.order-status[data-state=pending]{background:#fbf2e3;color:#8f6522}
.status-pill.negative,.order-status.negative,.status-pill[data-state=cancelled],.order-status[data-state=cancelled],.status-pill[data-state=failed],.order-status[data-state=failed]{background:#f8eceb;color:#8f4841}
.order-lines{list-style:none;margin:16px 0 0;padding:0}
.order-line{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line);font-size:11px;color:#85909c}
.order-line h3,.order-line strong{font-size:12px;font-weight:600;color:var(--ink)}
.order-line .product-art{width:100%;border-radius:6px;background-color:var(--surface)}

/* -- account: a rail of sections, and the panels behind it ----------------- */
.account-layout{display:grid;grid-template-columns:215px 1fr;gap:30px;align-items:start}
.account-nav{position:sticky;top:20px;display:grid;gap:3px;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px}
.account-nav-link{display:flex;align-items:center;gap:10px;min-height:38px;padding:9px 11px;border-radius:6px;font-size:11px;color:#5f6874}
.account-nav-link svg{width:16px;height:16px;color:#97a0aa}
.account-nav-link:hover{background:var(--surface);color:#4c6a26}
.account-nav-link.active,.account-nav-link[aria-current=page]{background:var(--navy);color:#fff;font-weight:600}
.account-nav-link.active svg,.account-nav-link[aria-current=page] svg{color:var(--lime)}
.account-panel{min-width:0;border:1px solid var(--line);border-radius:9px;padding:26px}
.account-panel+.account-panel{margin-top:16px}
.account-panel>h2{font-size:19px;letter-spacing:-.5px;margin-bottom:6px}
.account-panel>p{font-size:12px;line-height:1.8;color:#85909c}
.data-table{width:100%;border-collapse:collapse;font-size:11px}
.data-table th{text-align:left;font-size:8px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#8a9099;padding:0 14px 11px 0;border-bottom:1px solid var(--line)}
.data-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);color:#5f6874;vertical-align:top}
.data-table tbody tr:last-child td{border-bottom:0}
.order-card{border:1px solid var(--line);border-radius:9px;padding:19px 21px;margin-bottom:14px}
.order-card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;font-size:10px;color:#8b929c}
.order-card-head strong{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--ink)}
.timeline{display:grid;margin-top:18px}
.timeline-step{display:grid;grid-template-columns:13px 1fr;gap:13px;padding-bottom:20px;position:relative;font-size:10px;color:#8b929c}
.timeline-step:last-child{padding-bottom:0}
/* the connector is drawn from each step to the next, so the last one has none */
.timeline-step:not(:last-child):before{content:'';position:absolute;left:6px;top:15px;bottom:0;border-left:1px solid var(--line)}
.timeline-step strong{display:block;margin-bottom:3px;font-size:12px;font-weight:600;color:var(--ink)}
/* positioned so the dot sits on the connector rather than under it */
.timeline-dot{position:relative;z-index:1;width:13px;height:13px;margin-top:2px;border:2px solid #d3d8dd;border-radius:50%;background:#fff}
.timeline-step.done .timeline-dot,.timeline-step[data-state=done] .timeline-dot{background:#8fbb5c;border-color:#8fbb5c}
.timeline-step.current .timeline-dot,.timeline-step[aria-current=step] .timeline-dot{background:var(--navy);border-color:var(--navy);box-shadow:0 0 0 3px #dbe9c6}
.refund-card,.address-card,.rewards-card{border:1px solid var(--line);border-radius:9px;padding:18px 20px}
.refund-card{display:grid;gap:8px;margin-bottom:12px;font-size:11px;color:#85909c}
.refund-card h3{font-size:13px;color:var(--ink)}
.rewards-card{background:var(--navy);border-color:var(--navy);color:#b3bcc9;padding:26px 28px}
.rewards-card strong{display:block;font-size:36px;font-weight:600;letter-spacing:-1.5px;line-height:1;color:var(--lime)}
.rewards-card p{margin-top:12px;font-size:11px;line-height:1.8}
.address-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.address-card{font-size:11px;line-height:1.85;color:#6a737f}
.address-card h3{margin-bottom:6px;font-size:12px;color:var(--ink)}
.address-card .badge-pill{margin-bottom:9px}
.address-card .text-link{margin-top:12px;font-size:10px}
.signed-out-panel{max-width:440px;margin:26px auto;border:1px solid var(--line);border-radius:9px;padding:36px 30px;text-align:center}
.signed-out-panel>svg{width:40px;height:40px;margin:0 auto 16px;color:#819568}
.signed-out-panel h2{font-size:21px;margin-bottom:10px}
.signed-out-panel p{margin-bottom:20px;font-size:12px;line-height:1.8;color:#85909c}

/* -- content: the journal, the help pages, the legal shelf ----------------- */
.article-hero{position:relative;height:330px;margin-bottom:30px;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.article-hero img{display:block;width:100%;height:100%;object-fit:cover}
.article-body{max-width:680px;margin:0 auto}
.article-body p{margin:14px 0;font-size:13px;line-height:1.95;color:#78828f}
.article-body h2{margin:32px 0 10px;font-size:23px;letter-spacing:-.7px}
.article-body h3{margin:26px 0 8px;font-size:16px}
.article-body ul,.article-body ol{margin:14px 0;padding-left:18px}
.article-body li{margin:8px 0;font-size:13px;line-height:1.9;color:#78828f}
.article-body img{max-width:100%;height:auto;margin:20px 0;border-radius:9px}
.article-body blockquote{margin:24px 0;padding-left:20px;border-left:2px solid var(--lime);font-size:15px;line-height:1.75;color:#5c6673}
.article-body a,.prose a{color:#60892d;text-decoration:underline;text-underline-offset:3px}
.journal-list{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}
.faq-list{display:grid;gap:10px;max-width:720px}
.faq-item{border:1px solid var(--line);border-radius:9px}
.faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:15px 18px;font-size:12px;font-weight:550;cursor:pointer;list-style:none}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary:after{content:'+';font-size:16px;color:#8a9099}
.faq-item[open]>summary:after{content:'–'}
.faq-item>div,.faq-item>p{padding:0 18px 17px;font-size:12px;line-height:1.85;color:#78828f}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.contact-card{border:1px solid var(--line);border-radius:9px;padding:20px}
.contact-card>svg{width:22px;height:22px;margin-bottom:13px;color:#7f9a63;stroke-width:1.4}
.contact-card h3{margin-bottom:7px;font-size:13px}
.contact-card p{font-size:11px;line-height:1.8;color:#85909c}
.contact-card a{color:#60892d}
.map-embed{aspect-ratio:16/9;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.map-embed iframe{display:block;width:100%;height:100%;border:0}
.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.store-card{border:1px solid var(--line);border-radius:9px;padding:20px 22px;font-size:11px;line-height:1.85;color:#7d8692}
.store-card h3{margin-bottom:8px;font-size:14px;color:var(--ink)}
.store-card .text-link{margin-top:13px;font-size:10px}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
.brand-card{display:grid;align-content:center;gap:6px;min-height:96px;border:1px solid var(--line);border-radius:9px;padding:18px 16px;text-align:center;transition:transform .2s,border-color .2s}
.brand-card strong{font-size:13px;font-weight:600;letter-spacing:-.2px}
.brand-card span{font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:#9298a1}
.brand-card:hover{border-color:#cfd7c4;transform:translateY(-2px)}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.legal-nav a{border:1px solid var(--line);border-radius:20px;padding:8px 13px;font-size:10px;color:#5f6874}
.legal-nav a:hover{border-color:#cbd3bf;color:#4c6a26}
.legal-nav [aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}

/* -- chrome: what follows a shopper from page to page ---------------------- */
/* Deliberately under the toast's z-index of 20: a confirmation must never end
   up behind the banner that is asking about cookies. */
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:15;max-width:820px;margin:0 auto;display:flex;align-items:center;gap:24px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 50px #0000001f;padding:20px 24px}
.cookie-banner h2{margin-bottom:7px;font-size:15px;letter-spacing:-.4px}
.cookie-banner p{font-size:11px;line-height:1.75;color:#76808d}
.cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex-shrink:0}
.cookie-actions .button{padding:11px 16px;font-size:11px;gap:10px}
.consent-panel{display:grid;gap:13px}
.consent-panel h2{font-size:25px;letter-spacing:-.8px}
.consent-category{border:1px solid var(--line);border-radius:8px;padding:13px 15px}
.consent-category label{display:flex;align-items:center;gap:10px;min-height:26px;font-size:12px;font-weight:550;cursor:pointer}
.consent-category input{accent-color:#7ba548;width:15px;height:15px;margin:0}
.consent-category p{margin-top:7px;padding-left:25px;font-size:10px;line-height:1.7;color:#85909c}
.assistant{position:fixed;right:22px;bottom:22px;z-index:16}
.assistant>button{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:var(--lime);box-shadow:0 10px 30px #0b142338}
.assistant>button:hover{background:#263951;color:var(--lime)}
.assistant-panel{position:fixed;right:22px;bottom:80px;z-index:16;width:335px;max-height:62dvh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 60px #0b142326}
.assistant-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600}
.assistant-panel>div{flex:1;overflow-y:auto;padding:15px 17px}
.assistant-panel form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.assistant-panel .form-input{min-height:40px}
.assistant-message{max-width:88%;margin-bottom:9px;background:var(--surface);border-radius:10px;padding:10px 13px;font-size:12px;line-height:1.7;color:#5f6874}
.assistant-message.mine,.assistant-message[data-from=customer]{margin-left:auto;background:#edf5e5;color:#4f5f3d}
.footer-socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}
.footer-socials a{width:32px;height:32px;display:grid;place-items:center;border:1px solid #ffffff1f;border-radius:50%;color:#97a3b3}
.footer-socials a:hover{color:var(--lime);border-color:#ffffff38}
.footer-socials svg{width:15px;height:15px}
/* The legal shelf is links now rather than buttons; it keeps the buttons' size
   at both of the widths the footer sets one. */
.footer-bottom a{font-size:8px}
.footer-bottom a:hover{color:var(--lime)}
@media(max-width:520px){.footer-bottom a{font-size:7px}}
.drawer-empty{padding:42px 12px;text-align:center;font-size:13px;line-height:1.8;color:#84909d}
.drawer-empty .button{margin-top:18px}
/* The category strip's items are links now. They keep the buttons' look. */
.category-strip a{display:flex;align-items:center;justify-content:center;gap:11px;font-size:12px;transition:transform .2s,color .2s}
.category-strip a:hover{transform:translateY(-2px);color:#60892d}

@media(min-width:1500px){.page-title{font-size:39px}.listing-layout{grid-template-columns:250px 1fr;gap:36px}.product-detail{gap:52px}.cart-page{grid-template-columns:1fr 355px}.checkout-layout{grid-template-columns:1fr 370px}.account-layout{grid-template-columns:230px 1fr}.article-hero{height:370px}}
@media(max-width:1100px){.page-head{padding:26px 0 21px}.page-title{font-size:32px;letter-spacing:-1.3px}.listing-layout{grid-template-columns:195px 1fr;gap:22px}.product-detail{grid-template-columns:1fr 1fr;gap:28px}.product-summary h1{font-size:27px}.product-summary .price{font-size:24px}.gallery-thumb{width:54px;height:54px}.cart-page{grid-template-columns:1fr 290px;gap:22px}.checkout-layout{grid-template-columns:1fr 300px;gap:22px}.checkout-step{padding:19px}.account-layout{grid-template-columns:180px 1fr;gap:22px}.account-panel{padding:21px}.recommend-rail{grid-template-columns:repeat(3,1fr)}.journal-list{gap:16px}.article-hero{height:270px}.stat{padding:15px}.cookie-banner{gap:18px;padding:18px 20px}}
@media(max-width:800px){.page-head{padding:24px 0 20px}.page-title{font-size:29px}.page-lede{font-size:12px}.listing-layout{grid-template-columns:1fr;gap:16px}.filter-rail{position:static;border:1px solid var(--line);border-radius:9px}.filter-rail>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:13px 16px;font-size:12px;font-weight:550;cursor:pointer;list-style:none}.filter-rail>summary::-webkit-details-marker{display:none}.filter-rail>summary:after{content:'+';font-size:16px;color:#8a9099}.filter-rail[open]>summary:after{content:'–'}.filter-rail:not([open])::details-content{content-visibility:hidden}.filter-rail .filter-group{padding:0 16px 15px;margin:0;border-bottom:0}.filter-rail .filter-group+.filter-group{border-top:1px solid var(--line);padding-top:15px}.product-detail{grid-template-columns:1fr;gap:22px;padding-top:16px}.product-gallery{position:static;width:100%;max-width:460px;margin:0 auto}.detail-tabs{margin-top:32px}.trust-row{grid-template-columns:repeat(2,1fr)}.recommend-rail{display:flex;overflow-x:auto;gap:12px;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:thin}.recommend-rail .product-card{flex:0 0 58%;scroll-snap-align:start}.cart-page,.checkout-layout{grid-template-columns:1fr;gap:20px}.cart-aside,.checkout-aside{position:static}.form-grid{grid-template-columns:1fr}.account-layout{grid-template-columns:1fr;gap:16px}.account-nav{position:static;display:flex;overflow-x:auto;gap:6px;padding:8px;scrollbar-width:thin}.account-nav-link{white-space:nowrap}.stat-row{grid-template-columns:repeat(2,1fr)}.journal-list{grid-template-columns:repeat(2,1fr);gap:16px}.article-hero{height:220px}.cookie-banner{flex-direction:column;align-items:flex-start;gap:14px}.category-strip a{font-size:10px;gap:7px}.category-strip a,.footer-socials a{min-height:40px}.footer-socials a{min-width:40px}}

/* Touch targets. The layout breakpoints are the sheet's and stay where they
   are; this is about the finger, so it keys off the pointer as well as the
   width — an 820px tablet reads as desktop by width and is not one by hand. */
@media(max-width:900px),(pointer:coarse){
.account-nav-link,.address-card .text-link,.consent-category label,.cookie-actions .button,.detail-tab,.filter-chip,.filter-list a,.filter-list label:not(.form-label),.legal-nav a,.pagination-link,.pagination-current,.share-row a,.share-row button,.store-card .text-link,.trust-item,.view-toggle button,summary.filter-title{min-height:40px}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:40px}
.filter-chip,.share-row a,.share-row button,.view-toggle button{min-width:40px}
.qty-field button{width:40px}
.not-found-search .button{min-height:40px}
}
@media(max-width:520px){.breadcrumbs{padding-top:14px;font-size:9px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.page-head{padding:20px 0 16px}.page-title{font-size:26px;letter-spacing:-1px}.site-note,.notice{font-size:11px}.category-strip a{flex-direction:column;gap:7px;font-size:8px}.product-summary h1{font-size:24px}.product-summary .price{font-size:22px}.buy-row{gap:10px}.buy-row .button{flex:1 1 100%}.qty-field{width:100%}.qty-field input{flex:1;width:auto}.gallery-main{padding:18px}.gallery-thumb{width:50px;height:50px}.detail-tab{padding:10px 11px;font-size:10px}.detail-panel{padding-top:20px;font-size:12px}.spec-table{font-size:11px}.spec-table th{width:44%;padding-right:12px}.product-art-blank span{font-size:30px}.recommend-rail .product-card{flex:0 0 76%}.checkout-step{padding:16px 17px}.account-panel{padding:18px 16px}.order-summary,.cart-aside,.checkout-aside{padding:17px}.summary-line.cart-total{font-size:17px}.order-line{grid-template-columns:44px 1fr auto;gap:10px;font-size:10px}.stat-row{grid-template-columns:1fr 1fr}.stat strong{font-size:19px}.rewards-card{padding:22px}.rewards-card strong{font-size:30px}.timeline-step{font-size:9px}.address-grid,.contact-grid,.store-grid{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(2,1fr)}.journal-list{grid-template-columns:1fr;gap:24px}.article-hero{height:190px;border-radius:10px}.article-body p,.article-body li{font-size:12px}.article-body h2{font-size:20px}.faq-item>summary{padding:13px 15px;font-size:11px}.cookie-banner{left:10px;right:10px;bottom:10px;padding:16px 17px;border-radius:10px}.cookie-banner h2{font-size:14px}.cookie-actions{width:100%}.cookie-actions .button{flex:1 1 auto;justify-content:center}.assistant{right:14px;bottom:14px}.assistant-panel{left:12px;right:12px;width:auto;bottom:74px;max-height:68dvh}
/* A table narrower than its columns is unreadable, so each row becomes its own
   small card and every cell carries its column name in data-label. */
.data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}.data-table thead{display:none}.data-table tr{border:1px solid var(--line);border-radius:8px;padding:11px 14px;margin-bottom:10px}.data-table td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:6px 0;border:0;text-align:right}.data-table tbody tr:last-child td{border:0}.data-table td:before{content:attr(data-label);flex-shrink:0;font-size:8px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#8a9099;text-align:left}}

/* -- print: an order confirmation and a legal page, on paper -------------- */
/* The reason for the one important declaration below: paper has no navigation,
   no drawers and no dialogs, and the display values being overridden here are
   set inline by app.js when one of them opens — which nothing but an important
   declaration outranks. */
@media print{.announcement,.site-header,.category-strip,footer,.skip-link,.breadcrumbs,.cookie-banner,.assistant,.assistant-panel,.pagination,.filter-rail,.sort-bar,.catalog-tools,.newsletter,.recommend-rail,.share-row,.buy-row,.wish-button,.add-button,.account-nav,#toast,dialog{display:none!important}@page{margin:16mm}body{background:#fff;color:#000;font-size:11pt}.container{max-width:none;padding:0}a{color:#000;text-decoration:none}.account-panel,.checkout-step,.order-card,.order-summary,.cart-aside,.checkout-aside,.refund-card,.address-card,.stat-row,.faq-item{border-color:#bbb;box-shadow:none;position:static;page-break-inside:avoid}.rewards-card{background:none;border-color:#bbb;color:#000}.rewards-card strong{color:#000}.article-body,.prose,.detail-panel{max-width:none;color:#000}.page-title,.prose h2{font-size:20pt}.data-table td,.data-table th,.spec-table td,.spec-table th{border-color:#bbb;color:#000}.status-pill,.order-status,.badge-pill{background:none;border:1px solid #bbb;color:#000}.article-body a:after,.prose a:after{content:' (' attr(href) ')';font-size:9pt;color:#555}}

/* -- corrections found in the browser, after the pages were built ---------- */
/* The share control is one labelled button, not a row of icon-only social
   links, so the 34px square sizing cropped it to an icon with its label
   wrapping underneath. Sized to its content instead, with the 40px touch
   minimum kept for an icon-only child. */
.share-row a,.share-row button{width:auto;min-width:40px;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 13px;border:1px solid var(--line);border-radius:5px;color:#6a727d;font-size:10px;font-weight:550;white-space:nowrap}
/* A square gallery is right for a photographed catalogue and wrong for a shop
   that publishes none: it left a 613px empty tile above the fold. Capped, and
   the stand-in letter scales with the box it is in so the space reads as
   deliberate rather than broken. */
.gallery-main{max-height:min(540px,58vh)}
.gallery-main .product-art-blank span{font-size:clamp(56px,9vw,120px)}
@media(max-width:800px){.gallery-main{max-height:min(420px,52vh)}}

/* -- corrections, second pass: fit to the markup the pages shipped --------- */
/* An interior page composes plain <section> elements and has nothing to space
   them with. Every section the home page lays out carries a class and sets its
   own padding, so keying off the absence of one leaves that page untouched. */
main>section:not([class]){margin-top:46px}
main>section:not([class]):first-child{margin-top:0}
/* The header's search bar, dropped into the middle of a centred 404: it has to
   come off the left edge, and the submit button has to sit inside the field's
   rounded box rather than over its right edge. */
.not-found-search{max-width:520px;margin:22px auto 0;padding-right:6px;height:52px}
.not-found-search .button{flex-shrink:0;align-self:stretch;margin:6px 0 6px auto;padding:0 18px;font-size:11px;gap:10px}
@media(max-width:520px){.not-found-search{height:52px;margin-top:20px}.not-found-search .button{padding:0 15px;font-size:10px}}
/* The checkout aside stacks a summary, a "change your bag" link, a promo field
   and a reassurance note; without spacing between those blocks the link and
   the next label read as one line. */
.checkout-aside .order-summary+*{margin-top:18px}
.checkout-aside .form-field{margin-top:16px}
/* The lock sits beside its sentence rather than in the text flow, where it was
   overlapping the first line. */
.checkout-aside .trust-item,.checkout-aside .form-help svg{flex-shrink:0}
.checkout-aside .trust-item{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font-size:10px;line-height:1.7;color:#7c8590}
.checkout-aside .trust-item svg{width:15px;height:15px;margin-top:2px;color:#8a9683}
/* This list used to carry .benefits, which the home page already owns as a
   four-across grid of icon-beside-label cards — inside a 440px panel that
   turned four sentences into four bulleted columns six lines deep. It has its
   own name and its own shape now: one readable row per line, left aligned
   inside a centred panel because a list of sentences is not a heading. */
.signed-out-benefits{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px;text-align:left}
.signed-out-benefits li{display:flex;align-items:flex-start;gap:11px;font-size:11px;line-height:1.75;color:#6f7885}
.signed-out-benefits svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:#8a9683}
/* An article the shop published with no cover image left a 195px grey void
   where the picture would be. The headline is set into that space instead —
   the card then reads as a designed typographic tile rather than a failed
   image, and it says something about the article, which a placeholder cannot. */
.journal-headline{position:static;display:flex;align-items:flex-end;height:100%;padding:44px 20px 22px;font-size:20px;line-height:1.25;letter-spacing:-.6px;color:#495a68;box-sizing:border-box}
@media(max-width:800px){.journal-headline{font-size:17px;padding:38px 16px 18px}}
/* A shop with no category artwork left these cards two-thirds empty. The count
   of what is in the shelf fills the space the photograph would have had — it is
   decorative, so it is aria-hidden, and it is a fact rather than a placeholder. */
.collection-count{position:absolute;right:16px;bottom:-14px;z-index:1;font-size:104px;font-weight:600;letter-spacing:-5px;line-height:1;color:#0b14230d;pointer-events:none}
@media(max-width:1100px){.collection-count{font-size:86px;right:12px}}
@media(max-width:520px){.collection-count{font-size:74px}}
/* A shop with one or two articles left two-thirds of the row empty. The grid
   follows what is in it rather than always being three across. :has is not
   universal, so the three-column rule stays the default and these narrow it. */
.journal-grid:has(>:only-child){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.journal-grid:has(>:only-child) .journal-image{height:260px}
.journal-grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:800px){.journal-grid:has(>:only-child),.journal-grid:has(>:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}.journal-grid:has(>:only-child) .journal-image{height:200px}}

/* ==========================================================================
   The mobile widgets: the bottom bar, and the stack that floats above it.
   ========================================================================== */

/* -- the bottom bar ------------------------------------------------------- */
/* Hidden above 800px rather than rendered conditionally, so the markup is the
   same document for every visitor and a phone never waits for JavaScript to
   find out it has a navigation bar. */
.mobile-nav{display:none}
@media(max-width:800px){
  .mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:18;display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px #0b14230a;
    /* The home indicator on a modern phone sits over the bottom of the
       viewport. Without this the last few pixels of every label are under it. */
    padding-bottom:env(safe-area-inset-bottom,0)}
  .mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;padding:9px 2px 8px;font-size:9px;letter-spacing:.2px;color:#8b929c;position:relative}
  .mobile-nav-item svg{width:21px;height:21px;stroke-width:1.5}
  .mobile-nav-item.active{color:var(--ink);font-weight:600}
  /* State is not colour alone: the active item also carries a rule above it. */
  .mobile-nav-item.active:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:2px;border-radius:0 0 2px 2px;background:#7cb764}
  .mobile-nav-item:hover{color:var(--ink)}
  .mobile-nav-icon{position:relative;display:block}
  .mobile-nav-badge{position:absolute;top:-5px;right:-9px;width:15px;height:15px;font-size:8px;background:var(--navy);color:#fff}
  /* The bar covers the last 60px of every page. The footer is the thing that
     ends up underneath it, so the document gets that height back. */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}
  /* A dialog is already full height and above the bar; it must not also be
     padded away from the bottom of the screen. */
  body:has(dialog[open]){padding-bottom:0}
}

/* -- the floating stack --------------------------------------------------- */
/* One column, bottom-right, and every floating thing is a child of it. The
   container itself is transparent to the pointer so it never swallows a click
   meant for the page; each child turns that back on for itself. */
.floating-stack{position:fixed;right:18px;bottom:22px;z-index:19;display:flex;flex-direction:column;align-items:flex-end;gap:11px;pointer-events:none}
@media(max-width:800px){
  .floating-stack{right:14px;bottom:calc(70px + env(safe-area-inset-bottom,0))}
  /* Pages with their own sticky action bar at the bottom of a phone — the
     product page's add-to-bag, the checkout's total — need the stack lifted
     again or it sits on top of the one control the page is there for. */
  .floating-stack.has-sticky-bar{bottom:calc(132px + env(safe-area-inset-bottom,0))}
}
.floating-button{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:1px solid #ffffff1f;box-shadow:0 6px 22px #0b142333;transition:transform .2s,background .2s,opacity .2s}
.floating-button svg{width:21px;height:21px}
.floating-button:hover{transform:translateY(-2px);background:#26374e;color:#fff}
.floating-button[hidden]{display:none}
.floating-top svg{transform:rotate(-45deg)}
.floating-whatsapp{background:#25d366;border-color:#1eb85733;color:#0b2a17}
.floating-whatsapp:hover{background:#1eb857;color:#06210f}
.floating-whatsapp.is-hidden{opacity:0;transform:translateY(10px);pointer-events:none}
/* The label is a desktop affordance: on a phone there is no hover, and the
   space it would take is the page. */
.floating-label{display:none}
@media(min-width:801px){
  .floating-button:hover .floating-label{display:block;position:absolute;right:56px;white-space:nowrap;background:var(--navy);color:#fff;font-size:10px;padding:7px 11px;border-radius:6px;box-shadow:0 6px 22px #0b142333}
  .floating-button{position:relative}
}

/* The assistant is a child of the stack now, so it no longer positions itself. */
.assistant{position:static;pointer-events:auto}
.assistant-panel{position:fixed;right:18px;bottom:82px;width:min(360px,calc(100vw - 32px));z-index:19}
@media(max-width:800px){.assistant-panel{right:14px;left:14px;width:auto;bottom:calc(130px + env(safe-area-inset-bottom,0))}}

@media print{.mobile-nav,.floating-stack{display:none!important}body{padding-bottom:0!important}}
/* The bottom bar arrived after the cookie banner and sits on top of it, which
   left the banner's buttons half covered on a phone — the one dialog on the
   site that must be answerable before anything else happens. It clears the bar
   the same way the floating stack does. */
@media(max-width:800px){
  .cookie-banner{bottom:calc(70px + env(safe-area-inset-bottom,0));left:12px;right:12px}
}
/* See app.js consentBanner(): while the banner is up, the floating stack is
   not. It is optional; the banner is not. */
body.has-consent-banner .floating-stack{display:none}
/* An empty state's heading is an <h2> where it sits directly under the page
   <h1> — correct for the outline, and unsized until now, so it fell through to
   the global 30px rule and rendered larger than the h1 it sits beneath on a
   phone. Sized with the h3 that was already here. */
.empty-state h1,.empty-state h2{font-size:21px;font-weight:550;letter-spacing:-.4px}