/* Shared type scale, loaded after the component and mobile styles. */
:root{
  --text-body:16px;
  --text-description:15px;
  --text-control:15px;
  --text-note:13px;
  --text-product:20px;
  --text-secondary:#596653;
}
body{font-size:var(--text-body);line-height:1.7}

/* Make the comparison action and its current selection visible. */
html{scroll-padding-top:120px}
.header{height:auto;min-height:100px}
.header-inner{min-height:100px;padding-block:12px}
.header-compare-group{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.header-action.compare-header-button{justify-content:center;gap:12px;min-height:48px;padding:10px 14px;border:1px solid #b6c5ab;border-radius:6px;background:#edf3e6;color:var(--ink);font-size:15px;font-weight:700;line-height:1.6}
.header-action.compare-header-button:hover{background:#e0ecd5;border-color:#80996b}
.header-action.compare-header-button.has-selection{background:#dce9ce;border-color:#738d60}
.header-action.compare-header-button .action-text{display:inline}
.compare-selection{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;background:#fff;font-size:12px;font-weight:600;line-height:1.7}
.header-action .compare-selection b{display:inline;width:auto;height:auto;border-radius:0;background:none;font-size:inherit}
#compare-help{font-size:12px;line-height:1.7;text-align:center;color:var(--text-secondary)}

/* Start with style selection and categories on the home page. */
.home-heading{padding-top:32px}
.home-heading h1{font-size:30px;line-height:1.5;letter-spacing:.015em;text-wrap:balance;margin:0}
.home-heading h1>span{display:inline-block}
.home-heading h1>span:after{content:none}
.category-browser>.profile{margin-top:22px}
.category-browser>.categories{padding-top:24px}
.makers{padding-top:36px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.maker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.maker-tile{display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px;border:1px solid var(--line);border-radius:7px;background:#fff}
.maker-tile:hover{border-color:#9cab8e;background:#f5f7f0}
.maker-tile h3{font-size:20px;line-height:1.5;overflow-wrap:anywhere}
.maker-tile p,.maker-tile-bottom,.maker-reading{font-size:13px;line-height:1.8;color:var(--text-secondary)}
.maker-tile p{margin-top:5px}
.maker-tile-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.maker-tile-bottom .icon{width:18px;height:18px}
.maker-heading,.category-heading{padding-top:24px}
.maker-heading h1,.category-heading h1{font-size:30px;line-height:1.5;letter-spacing:.015em;margin:0;overflow-wrap:anywhere}
.maker-reading{margin-top:6px}
.product-category-link{font-size:13px;line-height:1.8;color:var(--text-secondary);align-self:flex-start;margin:4px 0 8px;text-decoration:underline;text-underline-offset:3px}

/* Explanations and specifications */
.hero-description,.category-intro,.section-description,.criteria-grid p,
.approach-grid p,.selection-policy p,.selection-policy details,.empty-state p,
.fit-reason,.verified-card .fit-reason,.detail-fit,
.detail-body>p,.guide-links,.guide-list p,.setup-lead,.setup-steps p,
.weight-policy-summary,.weight-policy-note,.weight-rationale,
.weight-policy-page .weight-policy-intro p{
  font-size:var(--text-description);line-height:1.85;
}
.hero-description,.category-intro,.section-description,.criteria-grid p,
.approach-grid p,.selection-policy p,.detail-fit,
.weight-policy-summary,.weight-policy-note,.weight-rationale{color:var(--text-secondary)}
.verified-specs,.detail-body .verified-specs{font-size:var(--text-description);line-height:1.8}
.verified-specs>div{grid-template-columns:100px minmax(0,1fr);gap:14px;padding:12px 0}
.verified-specs dt{font-size:14px;color:var(--text-secondary)}
.verified-specs dd{font-size:var(--text-description)}
.criteria-grid h3,.selection-policy h3,.profile-intro strong{font-size:16px;line-height:1.7}
.selection-policy summary{font-size:15px;line-height:1.8;min-height:44px;padding:6px 0}
.verified-card .product-info{padding:24px}
.product-commerce{padding:0 24px 24px}

/* Names remain easy to scan, including within dialogs. */
.product-title,.verified-card .product-title,.detail-body h2,
.stores-heading h2,.saved-row h3{font-size:var(--text-product);line-height:1.6;overflow-wrap:anywhere}
.product-brand{font-size:12px;letter-spacing:.06em;line-height:1.8;color:var(--text-secondary)}
.card-price-summary strong{font-size:28px}
.card-price-summary{gap:8px;margin-top:18px}
.product-tag,.lightweight-badge{font-size:12px;line-height:1.6;padding:5px 9px}
.favorite-button,.icon-button{min-width:44px;min-height:44px}

/* Filters and inputs */
.profile-intro p{font-size:14px;line-height:1.8;color:var(--text-secondary)}
.profile-options legend,.profile-weight-title{font-size:14px;margin-bottom:10px}
.profile-options legend span{font-size:12px}
.profile-radios label,.lightweight-option{font-size:var(--text-control);min-height:48px;padding:10px 16px}
.profile-radios input,.lightweight-option input,.compare-toggle input{width:18px;height:18px}
.profile-controls{gap:24px}
.filter-bar{gap:20px;padding:16px 20px;flex-wrap:wrap}
.filter-field,.setup-steps label{font-size:var(--text-control);color:var(--text-secondary);gap:12px}
.filter-field select,.setup-steps input{font-size:16px;min-height:48px;padding:10px 30px 10px 12px}
.filter-field select{max-width:260px}
.filter-bar>.text-button,.active-filters button,.compare-toggle{font-size:14px;min-height:44px}
.active-filters button{padding:8px 12px}
.result-meta{font-size:14px;gap:12px;flex-wrap:wrap;align-items:center}
.result-meta strong{font-size:18px}
.result-meta>span{font-size:var(--text-note);text-align:left}

/* Purchase and comparison actions */
.primary,.hero .primary,.purchase-link,.store-purchase-link,
.shopping-actions button,.compare-tray .primary,.tray-actions .primary{
  font-size:16px;font-weight:700;line-height:1.6;min-height:48px;
}
.purchase-link,.store-purchase-link{padding:12px 14px}
.shopping-actions{gap:10px;margin-top:20px}
.shopping-actions button{font-size:15px;min-height:72px;padding:12px 6px}
.stores-button span{font-size:13px;font-weight:500;margin-top:3px}
.detail-button,.offer-retry,.saved-row>button{font-size:15px;font-weight:600;min-height:44px}
.detail-button .icon{width:17px;height:17px}
.verified-card .product-bottom{padding-top:20px}
.compare-tray{gap:20px;padding:16px 20px}
.compare-tray strong{font-size:15px}
.tray-actions>button:first-child{font-size:14px;min-height:44px;padding:8px}
.compare-table td{font-size:15px;line-height:1.85;padding:15px 14px}
.compare-table th{font-size:14px;line-height:1.8;padding:15px 14px}
.compare-table thead th:not(:first-child){font-size:18px;min-width:215px}
.compare-table thead small{font-size:13px}
.compare-table th:first-child{min-width:140px}

/* Supporting information, including store names, shipping and timestamps. */
.verified-card .live-variant,.live-variant,.live-source,.detail-note,.comparison-note,
.modal-subtitle,.price-update-status,.card-price-summary span,.purchase-area p,
.stores-context,.store-markets,.store-main small,.store-buy>small,.stores-note,
.offer-message,.product-image-placeholder,.tray-note,.breadcrumbs,
.footer-inner p,.footer-bottom,.section-side-note{
  font-size:var(--text-note);line-height:1.8;color:var(--text-secondary);
}
.live-source{overflow-wrap:anywhere;margin-top:20px}
#connection-state{font-size:var(--text-note);line-height:1.8;padding:14px 16px}
.setup-note{font-size:var(--text-note)!important}
.purchase-area p{margin-top:10px}
.store-markets span{color:var(--text-secondary)}
.store-main h3{font-size:16px;font-weight:700;line-height:1.7}
.store-main p{font-size:var(--text-description);line-height:1.8;color:var(--text-secondary);margin:8px 0 10px}
.store-row{gap:22px;padding:26px 0;align-items:start}
.store-buy{gap:8px}
.store-buy>strong{font-size:26px}
.store-purchase-link{font-size:15px;min-width:144px}
.stores-context{gap:8px 18px;padding-top:20px}
.store-markets{gap:12px 22px;padding:18px 0}
.store-photo>span{font-size:12px}

/* Related navigation and the criteria reference page */
.main-nav,.header-action,.footer-links a,.related-links a,.category-cta,
.category-hero .hero-link,.criteria .compact a,.weight-section-heading a,
.weight-category-nav a,.weight-page-end,.setup-header>a:last-child{font-size:14px;line-height:1.7}
.category-tile h3{font-size:16px;line-height:1.6}
.category-tile p{font-size:13px;line-height:1.7;color:var(--text-secondary)}
.category-tile{align-items:flex-start}
.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile-other>div{flex-wrap:wrap}
.weight-policy-page .weight-table{font-size:15px;line-height:1.8}
.weight-policy-page .weight-table th,.weight-policy-page .weight-table td{padding:14px 12px}
.weight-evidence summary{font-size:15px;min-height:44px}
.weight-sources{font-size:14px;line-height:1.8}
.weight-sources p{font-size:13px;line-height:1.8;color:var(--text-secondary)}
.weight-page-heading>p:not(.eyebrow){font-size:15px}
.weight-page-heading .weight-checked-at{font-size:13px!important}
.weight-policy-intro h2{font-size:20px}
.toast{font-size:14px;line-height:1.7}

@media(min-width:761px) and (max-width:1100px){
  .main-nav{display:none}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-hero{padding:30px}
  .category-hero-art{width:200px}
  .header-inner{gap:18px}
  .main-nav{gap:18px}
}
@media(max-width:760px){
  html{scroll-padding-top:160px}
  .header{min-height:0}
  .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:0;padding-block:10px;gap:10px}
  .header-actions{display:contents}
  .header #favorites-toggle{grid-column:2;grid-row:1;min-width:44px;min-height:44px;justify-content:center}
  .header-compare-group{grid-column:1/-1}
  .header-action.compare-header-button{gap:12px;font-size:15px}
  .makers{padding-top:28px;padding-bottom:28px}
  .maker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .maker-tile{padding:18px 14px}
  .maker-tile h3{font-size:18px}
  .maker-heading h1,.category-heading h1{font-size:24px}
  .home-heading{padding-top:24px}
  .home-heading h1{font-size:24px;letter-spacing:0}
  .category-browser>.profile{margin-top:18px}
  .category-browser>.categories{padding-top:18px}
  .profile{padding:20px 16px;gap:20px}
  .profile-radios{gap:7px}
  .profile-radios label{font-size:14px;min-height:48px;padding:10px 8px;gap:6px}
  .profile-controls{gap:18px;width:100%}
  .profile-intro p{font-size:14px}
  .profile-weight-title{margin-bottom:0}
  .filter-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:18px}
  .filter-field{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .filter-field select{width:100%;max-width:100%;min-width:0}
  .filter-bar>.text-button{margin-left:0;justify-self:start}
  .product-grid{grid-template-columns:minmax(0,1fr)}
  .verified-card .product-info{padding:20px}
  .product-commerce{padding:0 20px 22px}
  .verified-specs>div{grid-template-columns:94px minmax(0,1fr);gap:12px}
  .shopping-actions button{font-size:15px}
  .store-row{grid-template-columns:60px minmax(0,1fr);gap:14px}
  .store-buy{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .store-purchase-link{width:100%;margin-top:6px}
  .stores-heading h2{font-size:20px}
  .stores-heading{padding:20px 18px;gap:12px}
  .stores-context{display:grid;gap:6px}
  .store-markets{gap:10px 16px}
  .compare-tray{padding:12px;gap:10px;flex-wrap:wrap}
  .compare-tray .primary{font-size:15px;padding:10px 12px}
  .tray-actions{gap:8px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-tile{align-items:center;padding:18px 12px}
  .category-tile h3{font-size:16px}
  .category-tile p{font-size:13px}
  .category-cta{font-size:14px;gap:6px}
  .tile-other{grid-column:1/-1}
  .tile-other>div{display:block}
  .hero{height:auto;min-height:410px}
  .hero-copy{padding:32px 24px}
  .hero-description{font-size:15px;margin:18px 0 24px}
  .hero .primary{font-size:16px}
  .section-heading,.weight-section-heading{gap:16px}
  .section-description,.criteria-grid p,.approach-grid p,.selection-policy p{font-size:15px}
  .category-intro{font-size:15px}
  .footer-bottom{gap:14px}
  .weight-policy-page .weight-policy-intro p{font-size:15px}
  .weight-policy-page .weight-table{font-size:15px}
  .weight-policy-page .weight-table td:before{font-size:13px;flex-basis:80px}
}
@media(max-width:380px){
  .maker-grid{grid-template-columns:minmax(0,1fr)}
  .shopping-actions{grid-template-columns:minmax(0,1fr)}
  .shopping-actions button{min-height:48px}
  .stores-button span{display:inline;margin-left:6px}
  .profile-radios{grid-template-columns:minmax(0,1fr)}
  .profile-radios label{justify-content:flex-start;padding:10px 14px}
  .verified-specs>div{grid-template-columns:84px minmax(0,1fr);gap:10px}
  .store-row{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .store-photo{width:48px;height:48px}
  .category-grid{grid-template-columns:minmax(0,1fr)}
  .category-tile{flex-direction:row;text-align:left;gap:16px}
  .category-cta{justify-content:flex-start}
}

/* Keep mobile comparison labels narrow so product values stay side by side. */
.comparison-footer{display:flex;justify-content:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.comparison-footer button{justify-content:center;width:220px;min-height:48px;font-size:16px;font-weight:700}
@media(max-width:760px){
  .comparison-footer button{width:100%}
  .compare-table{table-layout:fixed;min-width:calc(56px + var(--compare-products,2) * 132px)}
  .compare-table .compare-label-column{width:56px}
  .compare-table td,.compare-table th{min-width:0;padding:13px 8px;overflow-wrap:anywhere}
  .compare-table th:first-child{width:56px;min-width:0;padding:13px 6px;font-size:13px;line-height:1.6}
  .compare-table thead th:not(:first-child){min-width:0;font-size:16px;line-height:1.7}
  .compare-label-part{display:block}
}

/* Marketplace prices and store filters. */
.market-purchase+.market-purchase{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.market-price{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;margin-bottom:10px}
.market-price strong:last-child{font-size:18px}
.market-rakuten{background:#a32727;color:white}
.market-rakuten:hover{background:#872020}
.market-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:5px}
.store-markets button{padding:9px 12px;min-height:44px;font-size:14px;border:1px solid var(--line);border-radius:5px}
.store-markets button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}
.purchase-area a:not(.purchase-link),.stores-note a{text-decoration:underline;text-underline-offset:3px}
