/* Shared tokens: product illustration colors are intentionally independent of UI accents. */
:root {
  --paper: #F8F7F3;
  --surface: #FFFFFF;
  --ink: #101828;
  --muted: #667085;
  --blue: #4F7CFF;
  --link: #345CCC;
  --mint: #7FE0C3;
  --coral: #FF8066;
  --line: #EAECF0;
  --orange: var(--link);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: 'Manrope', system-ui, sans-serif; }
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.1; letter-spacing: -.055em; font-weight: 800; }
h2 { font-size: clamp(25px, 3vw, 34px); line-height: 1.2; letter-spacing: -.045em; font-weight: 700; }
h3 { font-size: 17px; line-height: 1.5; letter-spacing: -.025em; }
p { color: var(--muted); font-size: 15px; line-height: 1.75; }
:where(a, button, input, select):focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
::selection { background: #ccefe3; }
[hidden] { display: none !important; }
.container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; transform: translateY(-200%); z-index: 100; background: var(--ink); color: white; padding: 12px; }
.skip-link:focus { transform: none; }
#main:focus { outline: none; }
.header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.logo { display: inline-flex; align-items: baseline; font: 800 35px/1 'Manrope', sans-serif; letter-spacing: -.035em; }
.desktop-nav { display: flex; gap: 32px; font-size: 13px; font-weight: 500; }
.desktop-nav a { padding-block: 16px; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--link); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.search-link { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; }
.search-link svg, .header-saved svg { width: 20px; height: 20px; }
kbd { font-size: 11px; border: 1px solid #d6d8dd; border-radius: 4px; padding: 2px 6px; color: var(--muted); margin-left: 12px; }
.header-saved { border-left: 1px solid #dcdfe3; padding-left: 23px; color: var(--muted); }
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; }
.menu-toggle span { display: block; height: 2px; width: 22px; background: var(--ink); margin: 6px; }
#mobile-nav { padding: 8px 24px 18px; border-top: 1px solid var(--line); }
#mobile-nav a { display: block; padding: 14px; font-size: 15px; }
.discovery-hero { padding-block: 66px 48px; text-align: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .035em; }
.status-dot { width: 7px; height: 7px; background: var(--mint); border: 1px solid #4e9d86; border-radius: 50%; }
.discovery-hero h1 { margin-top: 21px; font-size: clamp(40px, 4.6vw, 66px); }
.discovery-hero h1 span { color: var(--blue); }
.discovery-hero > p { margin-top: 21px; font-size: 16px; }
.hero-search { margin: 31px auto 0; display: flex; align-items: center; gap: 15px; width: min(660px, 100%); padding: 8px 8px 8px 21px; border: 1px solid #dfe2e7; background: var(--surface); border-radius: 13px; box-shadow: 0 5px 15px #10182804; }
.hero-search:focus-within { border-color: var(--blue); }
.hero-search > svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--muted); }
.hero-search input { min-width: 0; flex: 1; width: 100%; border: 0; background: none; height: 42px; font-size: 13px; }
.hero-search input::placeholder { color: var(--muted); opacity: 1; }
.hero-search button { background: var(--blue); color: #101828; font-size: 13px; font-weight: 600; border: 0; border-radius: 8px; padding: 15px 21px; display: flex; gap: 20px; min-height: 46px; }
.hero-search button:hover { background: #7699ff; }
.quick-pills { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.quick-pills > span { font-size: 10px; color: var(--muted); margin-right: 3px; }
.quick-pills a { border: 1px solid #e0e1e3; border-radius: 25px; background: #ffffff80; padding: 10px 15px; font-size: 11px; min-height: 36px; }
.quick-pills a:hover { background: white; border-color: #9aaee0; }
.hero-footnote { margin-top: 28px; font-size: 10px; color: var(--muted); }
.hero-footnote > span { color: #45876e; margin-right: 5px; }
.discovery-categories { border-top: 1px solid var(--line); padding-top: 25px; }
.category-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 17px; }
.category-heading h2 { font-size: 14px; letter-spacing: -.02em; }
.category-heading .text-link { font-size: 11px; }
.category-track { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px; }
.category-card { position: relative; min-width: 0; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 16px; transition: border-color .2s, transform .2s; }
.category-card:hover { border-color: #c2cee9; transform: translateY(-2px); }
.category-symbol { position: absolute; top: 12px; left: 13px; color: #788290; font-size: 14px; }
.category-card img { width: 100%; height: 90px; object-fit: contain; margin-bottom: 10px; }
.category-card strong { display: block; font-size: 12px; font-weight: 600; }
.category-card > span:last-child { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.section { padding-block: 52px; }
.eyebrow { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1.6px; line-height: 1.7; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.section-heading .eyebrow { color: var(--muted); margin-bottom: 8px; }
.section-heading p { font-size: 12px; margin-top: 9px; }
.text-link { display: inline-flex; gap: 18px; align-items: center; font-size: 12px; font-weight: 600; min-height: 44px; }
.text-link > span { font-size: 18px; }
.text-link:hover { color: var(--link); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.product-card { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; transition: transform .2s, border-color .2s; }
.product-visual { position: relative; aspect-ratio: 1.19; background: #f0f0ed; margin: 7px 7px 0; border-radius: 8px; overflow: hidden; }
.product-visual > a { display: block; height: 100%; }
.product-visual img { width: 100%; height: 100%; object-fit: contain; padding: 17px; transition: transform .25s; }
.product-card:nth-child(4n + 2) .product-visual { background: #edf0eb; }
.product-card:nth-child(4n + 3) .product-visual { background: #f0edf1; }
.product-card:nth-child(4n + 4) .product-visual { background: #f1eee7; }
@media (hover: hover) {
  .product-card:hover { transform: translateY(-3px); border-color: #cbd0d9; }
  .product-card:hover img { transform: scale(1.02); }
}
.badge { display: inline-block; background: #ffffffed; border-radius: 5px; font-size: 9px; line-height: 1.5; padding: 5px 8px; font-weight: 600; }
.product-visual .badge, .main-image .badge { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 48px); z-index: 1; }
.badge-hot { color: #943b2a; background: #fff0e9; }
.badge-smart { background: #d9f6e9; color: #205b47; }
.save-icon { position: absolute; right: 10px; top: 10px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #ffffffdd; color: var(--muted); }
.save-icon svg { width: 14px; height: 14px; }
.card-content { padding: 15px 15px 0; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; margin-bottom: 8px; }
.rating { white-space: nowrap; color: #5d5b53; }
.rating small { color: var(--muted); font-size: 8px; }
.product-card h3 { font-size: 14px; font-weight: 700; line-height: 1.5; }
.product-card h3 a:hover { color: var(--link); }
.card-content > p { font-size: 11px; line-height: 1.65; margin-top: 6px; min-height: 37px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 15px 0; }
.card-bottom strong { font-size: 17px; font-weight: 600; }
.card-bottom del { font-size: 11px; margin-left: 7px; color: var(--muted); }
.card-bottom > span:last-child { font-size: 10px; color: var(--muted); }
.card-action { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); gap: 6px; }
.card-action > span { font-size: 8px; color: var(--muted); }
.card-action > a { display: flex; align-items: center; gap: 10px; min-height: 45px; color: var(--link); font-size: 10px; font-weight: 600; white-space: nowrap; }
.sample-note { margin-top: 17px; font-size: 10px; line-height: 1.7; color: var(--muted); }
.smart-section { background: #edf4ef; border-block: 1px solid #e1eae3; }
.smart-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-bottom: 25px; background: #fcfdfa; border: 1px solid #e0e9e1; border-radius: 14px; overflow: hidden; }
.smart-copy { padding: 35px 42px; }
.smart-copy h3 { font-size: 32px; line-height: 1.2; letter-spacing: -.04em; margin: 17px 0 13px; }
.smart-copy > p { max-width: 355px; font-size: 12px; }
.why-picked { border-left: 2px solid var(--mint); padding-left: 13px; margin-block: 20px; max-width: 360px; }
.why-picked > span { font-size: 8px; letter-spacing: 1.2px; font-weight: 600; }
.why-picked p { font-size: 11px; margin-top: 4px; }
.discovery-score { display: flex; gap: 12px; align-items: center; max-width: 275px; padding: 11px 13px; background: #edf7f0; border: 1px solid #d7eadf; border-radius: 8px; margin-block: 18px; }
.discovery-score > strong { font: 800 29px 'Manrope', sans-serif; color: #27624d; }
.discovery-score > span { font-size: 11px; font-weight: 600; }
.discovery-score small { display: block; font-size: 9px; font-weight: 400; color: #566c60; margin-top: 5px; }
.discovery-score .score-mark { color: #397b62; margin-left: auto; font-size: 24px; }
.smart-image { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; background: #e3eae1; padding: 25px; }
.smart-image img { width: 100%; max-width: 420px; aspect-ratio: 1.1; object-fit: contain; }
.smart-image > span { font-size: 11px; color: #536452; margin-top: 5px; }
.deals-section { padding-top: 12px; }
.deals-section .eyebrow { color: #a14835; }
.weird-section { padding: 34px; background: #edece7; border-radius: 16px; margin-block: 18px; }
.weird-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 27px; }
.weird-intro h2 { margin-block: 9px; }
.weird-intro h2 > span { margin-left: 15px; font-weight: 400; color: #847963; }
.weird-intro p { font-size: 12px; }
.comparison-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; padding-block: 72px; }
.comparison-intro h2 { font-size: 38px; margin-block: 18px; }
.comparison-intro > p:not(.sample-note) { max-width: 360px; font-size: 13px; }
.comparison-intro .text-link { margin-top: 18px; }
.comparison-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.comparison-product { display: flex; align-items: center; gap: 17px; padding-bottom: 18px; }
.comparison-product img { width: 105px; height: 95px; object-fit: contain; background: #f0edf1; border-radius: 8px; }
.comparison-product h3 { font-size: 15px; margin-block: 5px; }
.comparison-product p { font-size: 10px; }
.comparison-product .eyebrow { font-size: 8px; }
.stores-section { border-top: 1px solid var(--line); text-align: center; padding-block: 48px 65px; }
.stores-section h2 { margin: 14px 0 10px; }
.stores-section p { font-size: 13px; }
.store-pills { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 20px; }
.store-pills a { border: 1px solid #dfe1e4; background: white; padding: 16px 27px; border-radius: 9px; display: flex; gap: 36px; font-weight: 600; font-size: 17px; }
.store-pills a:hover { border-color: #a8b9e8; }
.store-pills span { color: var(--muted); font-size: 13px; }
.stores-section small { color: var(--muted); font-size: 10px; }
.button { min-height: 46px; padding: 13px 20px; border: 1px solid transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; font-size: 12px; font-weight: 600; }
.primary { background: var(--blue); color: var(--ink); }
.dark { background: var(--ink); color: white; }
.button:hover { filter: brightness(.95); }
.peach, .sand, .pink { background: #eeeae1; }
.green { background: #e6ece3; }
.lavender { background: #eeebf0; }
.blue { background: #e8edf0; }
.closing { text-align: center; padding-block: 45px 65px; }
.closing h2 { margin-bottom: 20px; }
footer { border-top: 1px solid var(--line); background: white; padding-top: 45px; }
.footer-top { display: grid; grid-template-columns: 1.2fr .6fr .6fr 1fr; gap: 35px; padding-bottom: 40px; }
.footer-top p { font-size: 12px; margin-top: 16px; }
.footer-top nav { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.footer-top nav strong { font-size: 11px; margin-bottom: 7px; }
.footer-top nav a { display: inline-flex; align-items: center; min-height: 34px; }
.footer-top a:hover { color: var(--link); }
.footer-note .eyebrow { font-size: 9px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 24px; font-size: 10px; color: var(--muted); }
.footer-bottom > div { display: flex; gap: 25px; flex-wrap: wrap; }
.disclosure { font-size: 10px; padding-bottom: 25px; }
.browse-title{max-width:800px;margin-bottom:35px}.browse-title .eyebrow{margin-bottom:15px}.browse-title h1{font-size:52px;letter-spacing:-2.5px}.browse-title p{margin-top:18px}.filter-panel{background:#f0f0e9;border:1px solid var(--line);padding:22px;border-radius:12px}.browse-search{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--paper);border:1px solid #d5d8cb;border-radius:7px}.browse-search input{width:100%;background:none;border:0;font-size:14px;min-width:0;height:25px;outline-offset:6px}.filter-row{display:flex;align-items:flex-end;gap:15px;flex-wrap:wrap;margin-top:20px}.filter-row label{flex:1;min-width:115px;display:flex;flex-direction:column;gap:8px;font-size:10px;font-weight:550}.filter-row select{max-width:100%;width:100%;border:1px solid #d5d8cb;background:var(--paper);padding:10px 25px 10px 10px;border-radius:5px;font-size:11px;min-height:42px}.reset-filter{border:0;background:none;text-decoration:underline;font-size:12px;min-height:42px;padding:10px}.results-summary{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin:27px 0 23px;scroll-margin-top:20px}.results-summary span{color:var(--muted);font-size:11px}.pagination{display:flex;gap:10px;justify-content:center;margin-top:40px}.pagination button{background:transparent;border:1px solid var(--line);width:44px;height:44px;border-radius:6px}.pagination [aria-current]{background:var(--ink);color:white}.empty-state{text-align:center;padding:60px 20px}.empty-state>span{font-size:60px}.empty-state p{margin:15px 0 25px}.breadcrumbs{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:28px 0}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:65px;margin-top:12px;margin-bottom:60px}.main-image{position:relative;border-radius:16px}.main-image>img{width:100%;height:auto;padding:25px}.main-image .badge{top:24px;left:24px}.gallery-thumbs{display:flex;align-items:center;gap:18px;margin-top:15px}.gallery-thumbs button{border:1px solid var(--ink);border-radius:7px;width:65px;padding:4px}.gallery-thumbs>span{font-size:10px;color:var(--muted)}.product-info{padding-top:18px}.product-info h1{font-size:43px;letter-spacing:-2px;margin:15px 0}.product-lead{font-size:17px}.detail-price{font-size:14px;margin:20px 0}.detail-price strong{font-size:28px;font-weight:550;margin-left:5px}.detail-price>span{font-size:10px;background:#eeeee7;border-radius:5px;padding:6px;margin-left:12px}.product-info>p:not(.product-lead){font-size:12px}.product-info>.button{margin-top:23px}.picked{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}.picked h2{font-size:20px;letter-spacing:-.7px}.picked ul{list-style:none;margin:15px 0 0;padding:0}.picked li{font-size:12px;margin:11px 0;display:flex;gap:10px;line-height:1.6}.picked li span{color:#627549}.offers-section{border-top:1px solid var(--line);padding:45px 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;scroll-margin-top:25px}.offers-section h2{margin:12px 0}.offers-section .eyebrow{font-size:9px}.offers-section p{font-size:13px}.offers-section .demo-note{font-size:11px;line-height:1.7;margin-top:20px;max-width:340px}.retailer-offer{display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:17px 0}.retailer-monogram{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;font-size:17px;font-weight:600}.retailer-offer h3{font-size:14px}.retailer-offer p{font-size:10px}.retailer-offer>strong{font-size:15px}.retailer-button{grid-column:2 / 4;border:1px solid #cdd3c1;justify-self:stretch;background:#e8ecdf;font-size:11px;min-height:39px;padding:9px 14px}.unavailable{grid-column:2 / 4;font-size:11px;color:var(--muted)}.features-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;display:grid;grid-template-columns:1fr 1fr;gap:65px}.features-section h2{font-size:25px}.features-section h3{font-size:12px;margin-top:18px}.features-section li,.features-section p{font-size:13px;line-height:1.8;color:var(--muted)}.features-section p{margin-top:18px}.collection-intro{padding-block:45px}.collection-intro>.container{display:grid;grid-template-columns:1.3fr 1fr;gap:35px;align-items:center}.back-link{display:block;font-size:11px;margin-bottom:30px}.collection-intro h1{font-size:59px;letter-spacing:-2.5px;margin:17px 0}.collection-intro h2{font-size:19px;letter-spacing:-.5px;margin-bottom:14px}.collection-intro p{max-width:530px;font-size:13px}.collection-intro img{width:100%;max-height:350px}.editorial-note{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:35px}.editorial-note>span{font-size:10px;letter-spacing:1.2px}.editorial-note p{font-size:12px}.collection-index{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:35px}.collection-tile{padding:30px;border-radius:14px}.collection-tile img{height:245px;width:100%;object-fit:contain;transition:transform .3s}.collection-tile:hover img{transform:rotate(-5deg)}.collection-tile h2{font-size:28px}.collection-tile p{font-size:12px;margin-top:12px}.page-intro{margin-top:20px}.category-index{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}.category-index>a{border:1px solid var(--line);border-radius:12px;padding:30px;background:#efefe7}.category-index>a>span{font-size:35px;color:#65754e;display:block;margin-bottom:25px}.category-index h2{font-size:24px;display:flex;justify-content:space-between}.category-index p{font-size:11px;margin-top:8px}.info-page{padding-block:85px 110px;max-width:800px;min-height:60vh}.info-page h1{margin:20px 0 28px}.info-page p{margin:15px 0}.info-page>.button{margin-top:30px;display:flex;width:max-content}.info-page>.text-link{margin-top:12px}#main:focus{outline:none}
/* Existing routes share the new foundation; preserve their working layout and controls. */
.filter-panel, .category-index > a { background: white; }
.filter-row select, .browse-search { background: var(--paper); border-color: #d8dde5; }
.filter-row label { font-size: 12px; }
.filter-row select { font-size: 12px; min-height: 44px; }
.retailer-offer { min-width: 0; }
.retailer-offer { padding: 13px 10px; border-radius: 7px; }
.retailer-offer.best-offer { background: #edf7f0; }
.retailer-offer.best-offer p { color: #32654d; }
.retailer-offer .retailer-button { background: white; border-color: var(--line); min-height: 44px; }
.comparison-offers .retailer-offer { grid-template-columns: 32px 1fr auto auto; gap: 10px; }
.comparison-offers .retailer-monogram { width: 30px; height: 30px; font-size: 12px; }
.comparison-offers .retailer-button { grid-column: auto; font-size: 10px; padding: 8px 10px; gap: 8px; }
.comparison-offers .retailer-offer h3 { font-size: 12px; }
.comparison-offers .retailer-offer p { font-size: 9px; }
.comparison-offers .retailer-offer > strong { font-size: 13px; }
.comparison-offers .unavailable { grid-column: 4; font-size: 9px; }
#where-to-buy, .results-summary { scroll-margin-top: 100px; }
.product-info > p:not(.product-lead), .picked li { font-size: 14px; }
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .desktop-nav { gap: 22px; }
  .header-actions { gap: 15px; }
  .category-track { gap: 9px; }
  .category-card { padding: 11px; }
  .category-card > span:last-child { font-size: 9px; }
  .product-grid { gap: 16px; }
  .card-content { padding: 13px 12px 0; }
  .card-action > span { display: none; }
  .card-action { justify-content: flex-end; }
  .comparison-section { gap: 40px; }
  .smart-copy { padding: 28px; }
  .product-detail, .offers-section { gap: 35px; }
}
@media (max-width: 900px) {
  .container { width: calc(100% - 48px); }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
  .product-visual { aspect-ratio: 1.3; }
  .card-content { padding: 16px 17px 0; }
  .product-card h3 { font-size: 16px; }
  .card-content > p { font-size: 12px; min-height: 22px; }
  .card-action > span { display: block; font-size: 9px; }
  .card-action { justify-content: space-between; }
  .card-action a { font-size: 11px; }
  .category-track { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 3px 3px 12px; gap: 12px; }
  .category-card { flex: 0 0 142px; scroll-snap-align: start; }
  .category-card > span:last-child { font-size: 10px; }
  .category-card strong { font-size: 13px; }
  .header-inner { height: 74px; gap: 20px; }
  .desktop-nav { gap: 19px; font-size: 12px; }
  .search-link span, .search-link kbd { display: none; }
  .smart-copy h3 { font-size: 29px; }
  .comparison-section { grid-template-columns: 1fr; gap: 30px; }
  .comparison-intro h2 br { display: none; }
  .comparison-intro > p:not(.sample-note) { max-width: 540px; }
  .comparison-product img { width: 120px; height: 110px; }
  .comparison-product h3 { font-size: 18px; }
  .footer-top { grid-template-columns: 1.3fr .7fr .7fr; }
  .footer-note { grid-column: 1 / -1; }
  .store-pills a { padding: 15px 23px; gap: 20px; }
  .product-info h1 { font-size: 34px; }
  .collection-intro h1 { font-size: 43px; }
}
@media (max-width: 650px) {
  .container { width: calc(100% - 36px); }
  .header-inner { height: 68px; }
  .logo { font-size: 31px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .header-actions { gap: 12px; }
  .header-saved { border: 0; padding: 0; }
  .search-link { justify-content: center; width: 44px; }
  .discovery-hero { padding-block: 43px 33px; }
  .hero-eyebrow { font-size: 10px; }
  .discovery-hero h1 { max-width: 430px; margin: 20px auto 0; font-size: clamp(38px, 10.5vw, 58px); line-height: 1.12; }
  .discovery-hero h1 span { display: block; }
  .discovery-hero > p { font-size: 14px; max-width: 300px; margin: 18px auto 0; }
  .hero-search { gap: 9px; padding-left: 12px; margin-top: 25px; }
  .hero-search input { font-size: 16px; }
  .hero-search button { width: 44px; padding: 12px; justify-content: center; font-size: 0; gap: 0; }
  .hero-search button span { font-size: 20px; }
  .quick-pills { gap: 6px; margin-top: 12px; }
  .quick-pills > span { display: none; }
  .quick-pills a { font-size: 10px; padding: 12px 11px; min-height: 44px; }
  .hero-footnote { font-size: 9px; margin-top: 22px; }
  .discovery-categories { padding-top: 18px; }
  .category-heading { margin-bottom: 10px; gap: 10px; }
  .category-heading h2 { font-size: 13px; }
  .category-heading .text-link { font-size: 10px; gap: 8px; }
  .category-track { gap: 10px; }
  .category-card { flex-basis: 134px; padding: 13px; }
  .category-card img { height: 88px; }
  .section { padding-block: 35px; }
  .section-heading { margin-bottom: 21px; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .section-heading h2 { font-size: 27px; }
  .section-heading .eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .section-heading p { font-size: 12px; }
  .section-heading .text-link { font-size: 11px; gap: 9px; }
  .product-grid { gap: 16px; }
  .product-card h3 { font-size: 14px; }
  .card-content { padding: 13px 13px 0; }
  .card-content > p { font-size: 12px; min-height: 40px; }
  .card-meta { font-size: 10px; }
  .card-action > span { display: none; }
  .card-action { justify-content: flex-end; }
  .card-bottom { flex-wrap: wrap; }
  .card-bottom > span:last-child { font-size: 11px; }
  .badge { font-size: 9px; }
  .smart-feature { grid-template-columns: 1fr; }
  .smart-copy { padding: 25px; }
  .smart-copy h3 { font-size: 32px; }
  .smart-copy > p, .why-picked p { font-size: 13px; }
  .smart-image { padding: 15px 20px 24px; }
  .smart-image img { max-width: 290px; height: 235px; }
  .smart-section .section-heading h2 { font-size: 30px; }
  .sample-note { font-size: 11px; }
  .deals-section { padding-top: 10px; }
  .weird-section { padding: 23px 17px; margin-block: 12px; }
  .weird-intro { flex-wrap: wrap; gap: 8px; }
  .weird-intro h2 { font-size: 30px; }
  .comparison-section { padding-block: 40px; }
  .comparison-intro h2 { font-size: 32px; }
  .comparison-card { padding: 14px; }
  .comparison-product { gap: 12px; }
  .comparison-product img { width: 82px; height: 82px; }
  .comparison-product h3 { font-size: 14px; }
  .comparison-product .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .comparison-offers .retailer-offer { grid-template-columns: 28px 1fr auto; }
  .comparison-offers .retailer-button { grid-column: 2 / 4; font-size: 12px; }
  .comparison-offers .unavailable { grid-column: 2 / 4; }
  .stores-section { padding-block: 34px 45px; }
  .stores-section .eyebrow { font-size: 8px; }
  .store-pills { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .store-pills a { padding: 15px; justify-content: space-between; font-size: 16px; }
  footer { padding-top: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 27px; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .footer-top nav a { min-height: 44px; }
  .footer-bottom { flex-direction: column; gap: 20px; line-height: 1.7; }
  .footer-bottom > div { gap: 20px; }
  .footer-bottom a { min-height: 30px; }
  .disclosure { font-size: 11px; }
  .browse-title h1 { font-size: 36px; letter-spacing: -.04em; }
  .browse-title p { font-size: 14px; }
  .filter-panel { padding: 13px; }
  .browse-search { padding: 10px; }
  .browse-search input { font-size: 16px; }
  .filter-row { gap: 12px; }
  .filter-row label { min-width: calc(50% - 12px); max-width: calc(50% - 6px); }
  .filter-row select { font-size: 12px; }
  .results-summary > span { display: none; }
  .breadcrumbs { font-size: 11px; gap: 8px; padding-block: 20px; }
  .product-detail, .offers-section, .features-section { grid-template-columns: 1fr; gap: 25px; }
  .product-detail { margin-bottom: 35px; }
  .main-image > img { max-height: 380px; object-fit: contain; }
  .product-info h1 { font-size: 38px; }
  .gallery-thumbs > span { font-size: 11px; }
  .offers-section h2 { font-size: 29px; }
  .offers-section .demo-note { max-width: none; font-size: 12px; }
  .retailer-button { font-size: 12px; }
  .collection-intro > .container { grid-template-columns: 1fr; gap: 20px; }
  .collection-intro h1 { font-size: 40px; }
  .collection-intro img { height: 230px; }
  .editorial-note { flex-direction: column; align-items: flex-start; gap: 15px; }
  .collection-index { grid-template-columns: 1fr; }
  .category-index { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .category-index > a { padding: 18px; }
  .category-index h2 { font-size: 18px; }
  .info-page { padding-block: 45px 65px; }
  .info-page h1 { font-size: 40px; }
}
/* Full-width cards keep product imagery and editorial text comfortable on phones. */
@media (max-width: 480px) {
  .product-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .product-visual { aspect-ratio: 1.35; }
  .product-visual img { padding: 13px; }
  .card-content { padding: 16px 18px 0; }
  .product-card h3 { font-size: 17px; }
  .card-content > p { min-height: 0; font-size: 13px; }
  .card-action { justify-content: space-between; }
  .card-action > span { display: block; font-size: 10px; }
  .card-action > a { font-size: 12px; min-height: 48px; }
  .card-bottom strong { font-size: 20px; }
  .card-meta { font-size: 11px; }
  .badge { font-size: 10px; }
  .save-icon { width: 29px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .product-card:hover, .category-card:hover, .product-card:hover img { transform: none; }
}

/* Ambient background — ivory remains the foundation; gradients need no blur filter. */
#main { position: relative; isolation: isolate; }
.ambient-background { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ambient-background i { position: absolute; width: min(850px, 100%); height: 700px; border-radius: 50%; background: radial-gradient(ellipse, #4f7cff16, transparent 68%); animation: atmosphere-drift 35s ease-in-out infinite alternate; }
.ambient-background i:nth-child(1) { left: -15%; top: -180px; }
.ambient-background i:nth-child(2) { right: -18%; top: 650px; background: radial-gradient(ellipse, #7fe0c31f, transparent 68%); animation-duration: 45s; animation-delay: -17s; }
.ambient-background i:nth-child(3) { left: -12%; top: 52%; background: radial-gradient(ellipse, #ff806617, transparent 70%); animation-duration: 39s; animation-delay: -23s; }
@keyframes atmosphere-drift { from { transform: translate(-12px, -10px) scale(.96); } to { transform: translate(20px, 16px) scale(1.04); } }
.trending-section { background-image: radial-gradient(ellipse at 10% 10%, #4f7cff09, transparent 65%); }
.smart-section { background-image: radial-gradient(ellipse at 90% 30%, #7fe0c314, transparent 65%); }
.deals-section { background-image: radial-gradient(ellipse at 85% 40%, #ff80660d, transparent 65%); }
.weird-section { background-image: radial-gradient(ellipse at 10% 20%, #4f7cff09, transparent 60%), radial-gradient(ellipse at 90% 80%, #7fe0c313, transparent 60%); }

/* Hero atmosphere — contained in the existing hero, beneath all functional content. */
.discovery-hero { position: relative; isolation: isolate; }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.discovery-field { position: absolute; inset: 0; background: radial-gradient(circle, #4f7cff20 .8px, transparent 1px) 0 0 / 30px 30px; mask-image: radial-gradient(ellipse, #0009, transparent 70%); }
.hero-orbit { position: absolute; width: 85%; height: 320px; left: 7.5%; top: 42px; border: 1px solid #4f7cff0c; border-radius: 50%; transform: rotate(-12deg); }
.hero-pointer-glow { position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), #7fe0c31a, transparent 75%); opacity: 0; transition: opacity 600ms; }
.pointer-active .hero-pointer-glow { opacity: 1; }

/* Floating discovery tiles — four quiet objects in the wide-screen side gutters. */
.discovery-float { position: absolute; width: 104px; transform: translate(var(--depth-x, 0px), var(--depth-y, 0px)); transition: transform 450ms ease-out; }
.discovery-tile { padding: 9px; border-radius: 12px; border: 1px solid #ffffffd9; background: #ffffffa8; box-shadow: 0 8px 24px #10182806; animation: discovery-float 25s ease-in-out infinite alternate; }
.discovery-tile img { width: 64px; height: 54px; object-fit: contain; margin: 0 auto 5px; }
.discovery-tile > span { display: block; font-size: 10px; color: #667085; }
.discovery-tile small { display: inline-block; margin-top: 5px; padding: 3px 6px; border-radius: 5px; font-size: 8px; color: #667085; background: #7fe0c318; }
.float-1 { left: 17px; top: 29px; }
.float-2 { right: 19px; top: 39px; }
.float-3 { left: 48px; bottom: 24px; }
.float-4 { right: 43px; bottom: 18px; }
.float-2 .discovery-tile { animation-duration: 31s; animation-delay: -13s; }
.float-3 .discovery-tile { animation-duration: 35s; animation-delay: -21s; }
.float-4 .discovery-tile { animation-duration: 28s; animation-delay: -9s; }
.float-3, .float-4 { transform: translate(calc(var(--depth-x, 0px) * -.65), calc(var(--depth-y, 0px) * -.65)); }
@keyframes discovery-float { from { transform: translate(0, 0) rotate(-1deg); } to { transform: translate(3px, -8px) rotate(1deg); } }
@media (max-width: 1199px) { .discovery-float { display: none; } }
@media (max-width: 650px) {
  .ambient-background i { height: 450px; animation: none; }
  .ambient-background i:nth-child(2) { top: 900px; }
  .hero-orbit { display: none; }
  .discovery-field { opacity: .55; background-size: 32px 32px; }
}

/* Interaction states — preserve dimensions, focus outlines and existing image scale. */
.product-card, .category-card { transition: transform 280ms, border-color 280ms, box-shadow 280ms, background-color 280ms; }
.category-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 85% 15%, #7fe0c32b, transparent 70%); opacity: 0; transition: opacity 280ms; }
.category-symbol, .card-action a > span, .category-index h2 > span { display: inline-block; transition: transform 280ms; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { box-shadow: 0 10px 24px #10182809; border-color: #4f7cff30; }
  .category-card:hover { background-color: #fcfdfc; box-shadow: 0 6px 18px #10182807; }
  .category-card:hover::before { opacity: 1; }
  .category-card:hover .category-symbol, .card-action a:hover > span, .category-index > a:hover h2 > span { transform: translateX(3px); }
}
@media (hover: none), (pointer: coarse) { .category-card:hover, .product-card:hover, .product-card:hover img { transform: none; } }

/* Reveal animations — editorial groups only; no grid stagger or hidden waiting state. */
.ambient-reveal { animation: editorial-arrive 600ms ease-out both; }
.ambient-reveal:focus-within { animation: none; }
@keyframes editorial-arrive { from { opacity: .01; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Reduced motion — static atmosphere, no pointer light, parallax or reveal offsets. */
@media (prefers-reduced-motion: reduce) {
  .hero-pointer-glow { display: none; }
  .discovery-float, .discovery-tile, .ambient-reveal, .category-symbol, .card-action a > span, .category-index h2 > span { transform: none !important; }
  .ambient-reveal { opacity: 1; }
}