/* TopRatedPick redesign v2 (25 Sep 2026)
   Direction: a shopper's notebook, not a SaaS template.
   Catalog = ruled shortlist rows. Articles = serif reading column with numbered pick blocks. */

:root { --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --paper: #f3efe6; }
html.light { --paper: #ffffff; }

/* ---------- CATALOG: ruled rows instead of card grid ---------- */
body .catalog-content .prd-grid, body .prd-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border-top: 1px solid var(--line2) !important; }
@media (min-width: 960px) { body .catalog-content .prd-grid, body .prd-grid { grid-template-columns: 1fr 1fr !important; column-gap: 3rem !important; } }

body .catalog-content .prd, body .prd, body .catalog-content .prd:hover, body .prd:hover {
  display: grid !important; grid-template-columns: 112px 1fr !important; gap: 0 1.25rem !important; align-items: start !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; overflow: visible !important; padding: 1.25rem 0 !important;
}
body .catalog-content .prd-img-wrap, body .prd-img-wrap { position: static !important; grid-row: span 2 !important; }
body .catalog-content .prd-image-link, body .prd-image-link { background: var(--paper) !important; border-radius: 6px !important; padding: 8px !important; }
body .catalog-content .prd-image, body .prd-image, body .catalog-content .prd:hover .prd-image, body .prd:hover .prd-image { aspect-ratio: 1/1 !important; object-fit: contain !important; transform: none !important; mix-blend-mode: multiply !important; }
html.light .prd-image-link { border: 1px solid var(--line) !important; }

/* badge -> quiet label above the name (generic ones hidden via .is-generic) */
body .catalog-content .prd-badge, body .prd-badge {
  position: static !important; display: block !important; background: none !important; color: var(--gold) !important; padding: 0 !important;
  font-size: .72rem !important; letter-spacing: .06em !important; font-weight: 700 !important; margin: .5rem 0 0 !important;
}
body .catalog-content .prd-badge.is-generic, body .prd-badge.is-generic { display: none !important; }
body .catalog-content .prd-info, body .prd-info { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
body .catalog-content .prd-cat, body .prd-cat { order: -2 !important; font-size: .7rem !important; color: var(--t3) !important; letter-spacing: .08em !important; }
body .catalog-content .prd-name, body .prd-name, body .catalog-content h2.prd-name, body h2.prd-name { font-size: 1.02rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; margin: .15rem 0 .35rem !important; }
body .catalog-content .prd-desc, body .prd-desc { font-size: .86rem !important; color: var(--t2) !important; line-height: 1.5 !important; margin: 0 0 .6rem !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
body .catalog-content .prd-meta-row, body .prd-meta-row { display: flex !important; align-items: center !important; gap: 1rem !important; margin: 0 0 .7rem !important; }
body .catalog-content .prd-stars, body .prd-stars { display: none !important; }
body .catalog-content .prd-val, body .prd-val { font-weight: 700 !important; color: var(--t1) !important; font-variant-numeric: tabular-nums !important; }
body .catalog-content .prd-val::before, body .prd-val::before { content: "\2605\00a0" !important; color: var(--gold) !important; }
body .catalog-content .prd-nb, body .prd-nb { color: var(--t3) !important; font-size: .8rem !important; font-variant-numeric: tabular-nums !important; }
body .catalog-content .prd-pricing, body .prd-pricing { display: none !important; }
body .catalog-content .prd-action, body .prd-action, body .catalog-content .prd-cta, body .prd-cta {
  align-self: flex-start !important; display: inline-flex !important; align-items: center !important; gap: .4rem !important; width: auto !important;
  background: none !important; color: var(--t1) !important; border: 1px solid var(--line2) !important; border-radius: 6px !important;
  padding: .45rem .8rem !important; font-size: .82rem !important; font-weight: 600 !important; min-height: 40px !important;
}
body .catalog-content .prd-action::after, body .prd-action::after, body .catalog-content .prd-cta::after, body .prd-cta::after { content: "\2192" !important; color: var(--gold) !important; }
body .catalog-content .prd-action:hover, body .prd-action:hover, body .catalog-content .prd-cta:hover, body .prd-cta:hover { border-color: var(--gold) !important; background: var(--gold-s) !important; color: var(--t1) !important; }

@media (max-width: 560px) {
  body .catalog-content .prd, body .prd, body .catalog-content .prd:hover, body .prd:hover { grid-template-columns: 84px 1fr !important; gap: 0 .9rem !important; padding: 1rem 0 !important; }
  body .catalog-content .prd-desc, body .prd-desc { -webkit-line-clamp: 3 !important; }
}

/* catalog header: drop the SaaS stat tiles look */
body .catalog-content .cat-btn, body .cat-btn, body .catalog-content .cat-sort, body .cat-sort { border-radius: 6px !important; }
body .catalog-content .cat-btn.active, body .cat-btn.active { background: var(--t1) !important; border-color: var(--t1) !important; color: var(--bg) !important; }
body .catalog-content .cat-btn .cnt, body .cat-btn .cnt { background: none !important; color: inherit !important; opacity: .6 !important; padding: 0 !important; }

/* ---------- ARTICLES: reading column ---------- */
.article-title, .article-wrap h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }
.article-body { font-family: var(--serif); font-size: 1.14rem; line-height: 1.7; color: var(--t1); }
.article-body p { color: color-mix(in srgb, var(--t1) 86%, transparent); }
.article-body h2 { font-family: var(--font); font-size: 1.45rem; border-bottom: 0; padding-bottom: 0; letter-spacing: -.02em; }
.article-body h3 { font-family: var(--font); font-size: 1.12rem; }
.article-body table, .article-body li, .article-body .pick { font-family: var(--font); font-size: .95rem; }
.article-body hr { display: none; }
.article-desc { font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--t2); }

/* numbered pick block (built from h3 + img + text + list + CTA) */
.pick {
  display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; align-items: start;
  border-top: 1px solid var(--line2); padding: 1.75rem 0; margin: 0;
}
.pick-num { font-family: var(--serif); font-size: 3rem; line-height: .8; color: var(--gold); font-weight: 500; display: block; margin-bottom: .75rem; }
.pick-media a[href^="/products/"] { display: block; max-width: none; margin: 0; border: 0; background: var(--paper); border-radius: 6px; padding: 10px; }
.pick-media img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; margin: 0; }
.pick .pick-body h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.pick .pick-body p { font-family: var(--serif); font-size: 1.08rem; margin-bottom: .75rem; }
.pick .pick-body p:has(> strong:only-child) { font-family: var(--font); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); margin: 1rem 0 .4rem; }
.pick .pick-reasons { margin: 0 0 1rem; }
.pick .pick-body a[href*="amazon.com"] { width: auto; max-width: none; min-height: 44px; }
@media (max-width: 640px) {
  .pick { grid-template-columns: 1fr; gap: .75rem; }
  .pick-media { display: grid; grid-template-columns: auto 110px; justify-content: space-between; align-items: end; }
  .pick-num { font-size: 2.4rem; }
}

/* template-B posts: inline-styled product boxes */
.pick-card { border-top: 1px solid var(--line2); padding: 1.75rem 0; margin: 0; }
.pick-card .pick-label { color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pick-card h2 { font-family: var(--font); }
.pick-card p { font-family: var(--serif); font-size: 1.08rem !important; color: color-mix(in srgb, var(--t1) 86%, transparent) !important; }
.trp-disclosure { border: 0; border-left: 0; background: none; padding: 0; font-size: .85rem; color: var(--t3); font-style: italic; }

/* first row of a category = lead pick, bigger */
@media (min-width: 960px) {
  body .catalog-content .prd-grid > .prd:first-child, body .prd-grid > .prd:first-child {
    grid-column: 1 / -1 !important; grid-template-columns: 220px 1fr !important; padding: 2rem 0 !important;
  }
  body .prd-grid > .prd:first-child .prd-name { font-size: 1.5rem !important; }
  body .prd-grid > .prd:first-child .prd-desc { font-size: 1rem !important; -webkit-line-clamp: 3 !important; max-width: 60ch; }
}
.article-body .pick-body a[href*="amazon.com"] strong { font-weight: 700; }

/* ===== v3 homepage + catalog polish (25 Sep 2026) ===== */
.hp2-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.hp2-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hp2-kicker { font-size: .78rem; letter-spacing: .04em; color: var(--t2); margin-bottom: 1.1rem; }
.hp2-h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.025em; font-weight: 700; margin: 0 0 1.1rem; text-wrap: balance; }
.hp2-h1 em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; color: var(--gold); letter-spacing: -.01em; }
.hp2-sub { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.65; color: var(--t2); max-width: 54ch; margin: 0 0 1.75rem; }
.hp2-sub strong { color: var(--t1); }
.hp2-btns { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.hp2-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.4rem; border-radius: 8px; background: var(--gold); color: var(--on-gold, #111) !important; font-weight: 600; text-decoration: none; }
.hp2-btn:hover { filter: brightness(1.06); }
.hp2-link { color: var(--t1); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line2); min-height: 44px; display: inline-flex; align-items: center; }
.hp2-short { border: 1px solid var(--line2); border-radius: 12px; padding: 1.25rem; background: color-mix(in srgb, var(--bg2, #111) 70%, transparent); }
.hp2-short-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--t2); margin-bottom: .5rem; }
.hp2-short ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.hp2-short li { counter-increment: s; border-bottom: 1px solid var(--line); }
.hp2-short li a { display: grid; grid-template-columns: 1.4rem 64px 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; padding: .85rem 0; text-decoration: none; color: var(--t1); }
.hp2-short li a::before { content: counter(s); grid-row: 1 / 3; font-family: "Newsreader", Georgia, serif; font-size: 1.4rem; color: var(--gold); }
.hp2-short img { grid-row: 1 / 3; width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }
.hp2-short .hs-name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.hp2-short .hs-meta { font-size: .8rem; color: var(--t2); display: flex; align-items: center; gap: .3rem; }
.hp2-short .hs-meta svg { color: var(--gold); }
.hp2-short .hs-meta em { font-style: normal; }
.hp2-short-more { display: inline-flex; min-height: 44px; align-items: center; font-size: .9rem; color: var(--gold); text-decoration: none; }
.hp2-faq-list { max-width: 760px; margin-top: 1.25rem; }
.hp2-faq details { border-bottom: 1px solid var(--line); }
.hp2-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; font-weight: 600; position: relative; min-height: 44px; }
.hp2-faq summary::-webkit-details-marker { display: none; }
.hp2-faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1rem; color: var(--gold); font-size: 1.25rem; }
.hp2-faq details[open] summary::after { content: "\2212"; }
.hp2-faq details p { margin: 0 0 1.1rem; color: var(--t2); line-height: 1.7; max-width: 65ch; }
.hp-card-price { font-size: .8rem; color: var(--t2); font-weight: 400; }
@media (max-width: 860px) {
  .hp2-grid { grid-template-columns: 1fr; }
  .hp2-btn { width: 100%; justify-content: center; }
}

/* catalog */
.catalog-hero-grid { display: block !important; }
.catalog-filter-row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: .25rem; }
.catalog-filter-row::-webkit-scrollbar { display: none; }
.catalog-filter-row .cat-btn { flex: 0 0 auto !important; scroll-snap-align: start; }
@media (min-width: 900px) { .catalog-filter-row { flex-wrap: wrap !important; overflow: visible !important; } }
.catalog-more-wrap { text-align: center; padding: 2rem 0 1rem; }
.catalog-more { min-height: 48px; padding: 0 1.6rem; border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--t1); font: inherit; font-weight: 600; cursor: pointer; }
.catalog-more:hover { border-color: var(--gold); color: var(--gold); }
.catalog-more[hidden] { display: none; }
@media (max-width: 640px) {
  .catalog-toolbar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .6rem !important; }
  .catalog-toolbar .catalog-search-wrap { grid-column: 1 / -1; }
  .catalog-toolbar select { min-width: 0 !important; width: 100% !important; min-height: 44px; }
  body .catalog-content .prd-desc { -webkit-line-clamp: 2 !important; }
}
.cat-page-hero .cat-intro { max-width: 68ch; line-height: 1.7; color: var(--t2); font-size: 1.02rem; }
.cat-guides { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; font-size: .9rem; }
.cat-guides span { color: var(--t2); }
.cat-guides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.cat-guides a { color: var(--gold); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.cat-guides a:hover { text-decoration: underline; }

/* ===== v4 identity: warm paper, ink, one brick accent (27 Sep 2026) ===== */
html.light {
  --bg:#f4f1ea; --bg1:#fbf9f4; --bg2:#ebe6db; --bg3:#e0d9cb;
  --line:#ddd5c5; --line2:#c9bfab;
  --t1:#1c1a17; --t2:#4a453d; --t3:#6f685c;
  --gold:#a8401f; --gold2:#8a3318; --gold-h:#8a3318;
  --gold-s:rgba(168,64,31,.07); --gold-b:rgba(168,64,31,.35);
  --on-gold:#fbf9f4;
  --sh1:none; --sh2:none; --sh3:0 1px 0 #ddd5c5;
  --r1:2px; --r2:3px; --r3:4px; --r4:6px;
}
html.dark {
  --bg:#171512; --bg1:#1e1b17; --bg2:#26221d; --bg3:#302b25;
  --line:#35302a; --line2:#4a4339;
  --t1:#eee8dc; --t2:#c4bcad; --t3:#978e7e;
  --gold:#e0764f; --gold2:#c9623d; --gold-h:#ec8a64;
  --gold-s:rgba(224,118,79,.08); --gold-b:rgba(224,118,79,.35); --on-gold:#171512;
  --sh1:none; --sh2:none; --r1:2px; --r2:3px; --r3:4px; --r4:6px;
}
:root { --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; }
body { font-family: var(--font); font-feature-settings: "ss01", "tnum" 0; -webkit-font-smoothing: antialiased; }
h1, h2, .hp-sec-title, .cat-title, .cat-page-title, .hp2-h1, .pd-title, .post-title, .article-title {
  font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: -.015em !important; text-wrap: balance;
}
.hp2-h1 { font-size: clamp(2.3rem, 5.2vw, 4rem) !important; line-height: 1.02 !important; }
.hp2-h1 em { color: var(--gold) !important; }
.rating, .hs-meta, .prd-rating, .hp-card-meta, .pd-rating-num { font-variant-numeric: tabular-nums; }

/* header: newspaper masthead */
.site-header { background: var(--bg) !important; border-bottom: 1px solid var(--t1) !important; box-shadow: none !important; backdrop-filter: none !important; }
.logo-mark { background: none !important; color: var(--gold) !important; box-shadow: none !important; }
.logo-text { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; }
.nav-cta { background: transparent !important; color: var(--t1) !important; border: 1px solid var(--t1) !important; border-radius: 2px !important; box-shadow: none !important; }
.nav-cta:hover { background: var(--t1) !important; color: var(--bg) !important; }

/* kill glossy card chrome everywhere */
.hp-card, .prd, .hp2-short, .pd-card, .pd-box, .post-card, .related-card, .toc, .verdict, .pick-block {
  box-shadow: none !important;
}
.hp-card:hover, .prd:hover, .post-card:hover, .related-card:hover { transform: none !important; }
.badge, .prd-badge, .hp-card-flag, .hp-art-tag, .catalog-kicker, .hp2-kicker, .cat-btn { border-radius: 2px !important; }
.hp-card-flag, .prd-badge { background: transparent !important; color: var(--gold) !important; border: 0 !important; padding: 0 !important; font-size: .72rem !important; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* buttons: ink, not gold glow */
.hp2-btn, .btn-amazon, .prd-cta, .pd-cta, .btn-primary, .amz-btn {
  background: var(--t1) !important; color: var(--bg) !important; border-radius: 2px !important; box-shadow: none !important; border: 0 !important;
  transition: background .15s ease, transform .1s ease;
}
.hp2-btn:hover, .btn-amazon:hover, .prd-cta:hover, .pd-cta:hover, .btn-primary:hover, .amz-btn:hover { background: var(--gold) !important; color: var(--on-gold) !important; filter: none !important; }
.hp2-btn:active, .btn-amazon:active, .prd-cta:active { transform: translateY(1px); }

/* homepage hero: editorial */
.hp2-hero { border-bottom: 1px solid var(--line2); }
.hp2-kicker { font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--t3); border-top: 2px solid var(--t1); padding-top: .6rem; display: inline-block; }
.hp2-short { background: transparent !important; border: 0 !important; border-left: 1px solid var(--line2) !important; border-radius: 0 !important; padding: 0 0 0 2rem !important; }
.hp2-short-head { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--t1); }
.hp2-short img { background: #fff; border: 1px solid var(--line); border-radius: 2px; }
@media (max-width: 860px) { .hp2-short { border-left: 0 !important; border-top: 1px solid var(--line2) !important; padding: 1.5rem 0 0 !important; } }

/* featured: lead + ruled list instead of card grid */
.hp-grid { display: grid !important; grid-template-columns: 1.3fr 1fr !important; gap: 0 3rem !important; }
.hp-grid .hp-card { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line2) !important; border-radius: 0 !important; display: grid !important; grid-template-columns: 76px 1fr; gap: 1rem; padding: 1rem 0 !important; align-items: center; grid-column: 2; }
.hp-grid .hp-card .hp-card-img { background: #fff !important; border: 1px solid var(--line); border-radius: 2px; aspect-ratio: 1; padding: 6px; height: auto !important; }
.hp-grid .hp-card .hp-card-img img { width: 100%; height: 100%; object-fit: contain; }
.hp-grid .hp-card .hp-card-body { padding: 0 !important; }
.hp-grid .hp-card .hp-card-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; line-height: 1.25; margin: .15rem 0 .3rem; }
.hp-grid .hp-card--lead { grid-column: 1 !important; grid-row: 1 / span 6 !important; grid-template-columns: 1fr !important; border-top: 2px solid var(--t1) !important; align-content: start; padding-top: 1.25rem !important; }
.hp-grid .hp-card--lead .hp-card-img { aspect-ratio: 4/3; padding: 1.5rem; }
.hp-grid .hp-card--lead .hp-card-name { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.hp-grid .hp-card--lead .hp-card-why { font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; color: var(--t2); }
.hp-card-cat { font-size: .72rem !important; letter-spacing: .06em; color: var(--t3) !important; }
@media (max-width: 860px) {
  .hp-grid { grid-template-columns: 1fr !important; }
  .hp-grid .hp-card, .hp-grid .hp-card--lead { grid-column: 1 !important; grid-row: auto !important; }
}

/* category index: table of contents */
.v4-index { list-style: none; margin: 1rem 0 0; padding: 0; columns: 3 16rem; column-gap: 3rem; }
.v4-index li { break-inside: avoid; }
.v4-index a { display: flex; align-items: baseline; gap: .5rem; padding: .7rem 0; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--t1); text-decoration: none; }
.v4-i-n { font-family: var(--serif); font-size: 1.15rem; }
.v4-i-dots { flex: 1; border-bottom: 1px dotted var(--line2); transform: translateY(-.3rem); }
.v4-i-c { font-size: .85rem; color: var(--t3); font-variant-numeric: tabular-nums; }
.v4-index a:hover .v4-i-n { color: var(--gold); }
.hp-cats-wrap { background: transparent !important; border: 0 !important; }

/* reads: ruled list */
.v4-reads { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 2px solid var(--t1); }
.v4-reads a { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--line); color: var(--t1); text-decoration: none; }
.v4-r-tag { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.v4-r-title { font-family: var(--serif); font-size: 1.22rem; line-height: 1.3; }
.v4-r-go { color: var(--t3); }
.v4-reads a:hover .v4-r-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 640px) { .v4-reads a { grid-template-columns: 1fr auto; } .v4-r-tag { grid-column: 1 / -1; } }

/* how section: prose, drop cap */
.hp-trust-wrap { background: var(--bg2) !important; border: 0 !important; }
.v4-how { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.v4-how-body p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.7; color: var(--t2); max-width: 62ch; margin: 0 0 1rem; }
.v4-how-body a { color: var(--gold); font-family: var(--font); font-size: .95rem; }
.v4-dc { float: left; font-size: 3.6rem; line-height: .85; padding: .3rem .5rem 0 0; color: var(--gold); font-weight: 600; }
@media (max-width: 760px) { .v4-how { grid-template-columns: 1fr; gap: 1rem; } }

/* faq: two-column Q/A rules, no accordion chrome */
.hp2-faq summary { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; }

/* section heads */
.hp-sec-title { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
.hp-sec-sub { font-family: var(--serif); font-style: italic; color: var(--t3) !important; }
.hp-sec-link { color: var(--t1) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line2); }

/* catalog + category rows */
body .catalog-content .prd { background: transparent !important; border-radius: 0 !important; }
body .catalog-content .prd .prd-name, body .catalog-content .prd .prd-name a { font-family: var(--serif); font-weight: 500; }
body .catalog-content .prd-img, .prd-img { background: #fff !important; border-radius: 2px !important; }
.cat-btn { background: transparent !important; border: 1px solid var(--line2) !important; color: var(--t2) !important; }
.cat-btn.active, .cat-btn:hover { background: var(--t1) !important; color: var(--bg) !important; border-color: var(--t1) !important; }
.cat-btn.active span, .cat-btn:hover span { color: var(--bg) !important; opacity: .7; }
.catalog-toolbar input, .catalog-toolbar select { background: var(--bg1) !important; border: 1px solid var(--line2) !important; border-radius: 2px !important; }
.catalog-kicker { background: none !important; padding: 0 !important; color: var(--t3) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: .85rem !important; }

/* stars in brick, not yellow */
.rating svg, .prd-rating svg, .hs-meta svg, .icon-fill { color: var(--gold) !important; fill: currentColor; }

/* footer */
.site-footer { background: var(--bg) !important; border-top: 2px solid var(--t1) !important; }
.site-footer a { color: var(--t2) !important; }
html.light { --t3:#625b50; }
.post-tags a, .post-tags span, .tag, .pill, .pd-feature, .pd-features li, .article-tags a { border-radius: 2px !important; background: transparent !important; border: 1px solid var(--line2) !important; color: var(--t2) !important; }
.affiliate-note, .disclosure, .pd-disclosure, .aff-box { background: transparent !important; border: 0 !important; border-left: 2px solid var(--line2) !important; border-radius: 0 !important; color: var(--t2) !important; }
.affiliate-note *, .disclosure *, .pd-disclosure * { color: var(--t2) !important; }
.breadcrumb, .breadcrumb a, .post-meta { color: var(--t3) !important; }

/* ===== v5 STORE look (27 Sep 2026): shop grid, deal banners, coupons ===== */
html.light {
  --bg:#f1f2f4; --bg1:#ffffff; --bg2:#e8eaee; --bg3:#dfe2e7;
  --line:#e3e5e9; --line2:#cfd3da;
  --t1:#0f1111; --t2:#3b4149; --t3:#565c65;
  --gold:#c7112f; --gold2:#a50e27; --gold-h:#a50e27; --gold-s:rgba(199,17,47,.07); --gold-b:rgba(199,17,47,.3); --on-gold:#fff;
  --buy:#ffc629; --buy-h:#f5b400; --ok:#067d62;
  --r1:6px; --r2:8px; --r3:10px; --r4:14px;
}
html.dark { --buy:#ffc629; --buy-h:#f5b400; --ok:#3dd68c; }
h1, h2, .hp-sec-title, .cat-title, .cat-page-title, .pd-title, .post-title { font-family: var(--font) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
body .post-body h2, body .article-body h2 { font-family: var(--serif) !important; }
.site-header { background: #0f1111 !important; border-bottom: 0 !important; }
.site-header a, .site-header .logo-text, .site-header button { color: #fff !important; }
.site-header .logo-mark { color: var(--buy) !important; }
.site-header .nav-cta { border-color: var(--buy) !important; background: var(--buy) !important; color: #0f1111 !important; font-weight: 700; }
.site-header .nav-cta:hover { background: var(--buy-h) !important; }
.logo-text { font-family: var(--font) !important; font-weight: 800 !important; }
.site-footer { background: #0f1111 !important; border-top: 0 !important; color: #c9ccd1; }
.site-footer a { color: #e6e8eb !important; }
.site-footer p, .footer-copy { color: #b8bcc3 !important; }

/* hero banners */
.s5-hero { padding: 1rem 0 .5rem; }
.s5-hero-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; }
.s5-banner { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 14px; text-decoration: none;
  background: #0f1111; color: #fff; position: relative; overflow: hidden; min-height: 260px; }
.s5-banner::after { content: "%"; position: absolute; right: -1.5rem; bottom: -5.5rem; font-size: 22rem; font-weight: 800; line-height: 1; color: var(--buy); opacity: .95; letter-spacing: -.05em; }
.s5-banner > * { position: relative; z-index: 1; max-width: 30rem; }
.s5-banner-tag { align-self: flex-start; background: #c7112f; color: #fff; font-size: .75rem; font-weight: 700; padding: .3rem .6rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; }
.s5-banner strong { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.03em; }
.s5-banner-sub { color: #c9ccd1; max-width: 26rem; line-height: 1.55; }
.s5-banner-btn { align-self: flex-start; margin-top: .5rem; background: var(--buy); color: #0f1111; font-weight: 700; padding: .8rem 1.2rem; border-radius: 8px; min-height: 44px; }
.s5-banner:hover .s5-banner-btn { background: var(--buy-h); }
.s5-promo { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 1rem; align-content: center; padding: 1.1rem 1.25rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--t1); }
.s5-promo img { grid-row: 1 / 4; width: 84px; height: 84px; object-fit: contain; }
.s5-promo-k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #c7112f; }
.s5-promo strong { font-size: 1.05rem; line-height: 1.25; }
.s5-promo span:last-child { font-size: .85rem; color: var(--t3); display: flex; align-items: center; gap: .25rem; }
.s5-promo span:last-child svg { color: #f5a300; }
.s5-promo--coupon { background: #fff4d1; border: 2px dashed #e0a800; grid-template-columns: 1fr; position: relative; }
.s5-promo--coupon strong { font-size: 1.35rem; }
.s5-promo:hover { border-color: var(--t1); }

/* category bubbles */
.s5-cats { padding: 1rem 0 .25rem; }
.s5-cats-in { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .5rem; }
.s5-cats-in::-webkit-scrollbar { display: none; }
.s5-cat { flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; color: var(--t1); font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.2; }
.s5-cat-img { width: 80px; height: 80px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.s5-cat-img img { width: 60px; height: 60px; object-fit: contain; }
.s5-cat:hover .s5-cat-img { border-color: var(--t1); }
@media (min-width: 1000px) { .s5-cats-in { justify-content: space-between; } }

/* product rows */
.s5-row { padding: 1.25rem 0; }
.s5-row-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .75rem; }
.s5-row-head h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important; margin: 0; }
.s5-row-head p { margin: .15rem 0 0; color: var(--t3); font-size: .9rem; }
.s5-row-head > a { color: #0a6ebd; font-weight: 600; font-size: .9rem; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
html.dark .s5-row-head > a { color: #6cb4ee; }
.s5-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * .75rem) / 5); gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: .5rem; }
@media (max-width: 1100px) { .s5-scroll { grid-auto-columns: calc((100% - 3 * .75rem) / 4); } }
@media (max-width: 800px) { .s5-scroll { grid-auto-columns: 44%; } }
.s5-card { scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
html.dark .s5-card, html.dark .s5-promo { background: var(--bg1); }
.s5-img { position: relative; display: block; aspect-ratio: 1; background: #fff; padding: .75rem; }
.s5-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; }
.s5-card:hover .s5-img img { transform: scale(1.04); }
.s5-badge { position: absolute; top: .5rem; left: .5rem; z-index: 1; background: #c7112f; color: #fff; font-size: .68rem; font-weight: 700; padding: .25rem .45rem; border-radius: 4px; max-width: calc(100% - 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s5-body { display: flex; flex-direction: column; gap: .4rem; padding: .75rem; flex: 1; border-top: 1px solid var(--line); }
.s5-name { color: var(--t1); text-decoration: none; font-size: .9rem; line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.s5-name:hover { color: #0a6ebd; }
.s5-rate { display: flex; align-items: center; gap: .25rem; font-size: .82rem; color: var(--t3); font-variant-numeric: tabular-nums; }
.s5-rate svg { color: #f5a300 !important; }
.s5-rate b { color: var(--t1); }
.s5-buy { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; background: var(--buy); color: #0f1111 !important; font-weight: 700; font-size: .85rem; text-decoration: none; }
.s5-buy:hover { background: var(--buy-h); }
.s5-buy:active { transform: translateY(1px); }

/* coupons (guides) */
.s5-coupons { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 900px) { .s5-coupons { grid-template-columns: 1fr; } }
.s5-coupon { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: #fff; border: 2px dashed var(--line2); border-radius: 10px; text-decoration: none; color: var(--t1); }
.s5-coupon::before, .s5-coupon::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg); border: 2px dashed var(--line2); }
.s5-coupon::before { left: -10px; clip-path: inset(0 0 0 50%); }
.s5-coupon::after { right: -10px; clip-path: inset(0 50% 0 0); }
.s5-coupon-k { font-size: .7rem; font-weight: 700; color: #c7112f; text-transform: uppercase; letter-spacing: .06em; }
.s5-coupon strong { grid-column: 1; font-size: .98rem; line-height: 1.3; }
.s5-coupon-go { grid-column: 2; grid-row: 1 / 3; border-left: 2px dashed var(--line2); padding-left: 1rem; font-weight: 700; font-size: .82rem; color: #0a6ebd; white-space: nowrap; }
.s5-coupon:hover { border-color: #e0a800; background: #fffaf0; }
html.dark .s5-coupon { background: var(--bg1); }

/* trust strip */
.s5-trust { padding: 1.5rem 0; }
.s5-trust-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.s5-trust-in > div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.s5-trust-in b { font-size: .95rem; }
.s5-trust-in span { color: var(--t3); font-size: .88rem; }
html.dark .s5-trust-in > div { background: var(--bg1); }
@media (max-width: 760px) { .s5-trust-in { grid-template-columns: 1fr; } }
.hp2-faq summary { font-family: var(--font) !important; font-weight: 600 !important; }

@media (max-width: 760px) {
  .s5-hero-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .s5-banner { grid-row: auto; grid-column: 1 / -1; min-height: 220px; }
  .s5-banner::after { font-size: 14rem; bottom: -3.5rem; right: -1rem; opacity: .9; }
  .s5-promo { grid-template-columns: 1fr; padding: .9rem; }
  .s5-promo img { grid-row: auto; width: 64px; height: 64px; margin-bottom: .4rem; }
  .s5-promo strong { font-size: .92rem; }
  .s5-promo--coupon strong { font-size: 1.05rem; }
}

/* catalog + category pages: product grid like a shop */
body .catalog-content .prd-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: .75rem !important; border: 0 !important; }
body .catalog-content .prd, body .catalog-content .prd:first-child { display: flex !important; flex-direction: column !important; grid-column: auto !important; grid-template-columns: none !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 0 !important; overflow: hidden; min-height: 0 !important; }
html.dark body .catalog-content .prd { background: var(--bg1) !important; }
body .catalog-content .prd .prd-img-wrap { position: relative; width: 100% !important; aspect-ratio: 1; background: #fff; padding: .75rem; margin: 0 !important; height: auto !important; max-width: none !important; }
body .catalog-content .prd .prd-img-wrap img { width: 100% !important; height: 100% !important; object-fit: contain; }
body .catalog-content .prd .prd-badge { position: absolute !important; top: .5rem; left: .5rem; background: #c7112f !important; color: #fff !important; font-size: .68rem !important; padding: .25rem .45rem !important; border-radius: 4px !important; text-transform: none; letter-spacing: 0; }
body .catalog-content .prd .prd-info { display: flex !important; flex-direction: column; gap: .35rem; padding: .75rem !important; flex: 1; border-top: 1px solid var(--line); }
body .catalog-content .prd .prd-name, body .catalog-content .prd .prd-name a { font-family: var(--font) !important; font-size: .92rem !important; font-weight: 500 !important; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--t1); }
body .catalog-content .prd .prd-desc { display: none !important; }
body .catalog-content .prd .prd-cat { font-size: .7rem; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; }
body .catalog-content .prd .prd-meta-row { display: block !important; }
body .catalog-content .prd .prd-pricing { display: none !important; }
body .catalog-content .prd .prd-stars svg { color: #f5a300 !important; }
body .catalog-content .prd .prd-action { margin-top: auto !important; display: flex !important; align-items: center; justify-content: center; min-height: 40px; width: 100%; border-radius: 999px !important; background: var(--buy) !important; color: #0f1111 !important; font-weight: 700; font-size: .85rem; border: 0 !important; }
body .catalog-content .prd .prd-action:hover { background: var(--buy-h) !important; }
@media (max-width: 560px) { body .catalog-content .prd-grid { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; } body .catalog-content .prd .prd-action { font-size: .78rem; } }
.cat-btn { border-radius: 999px !important; background: #fff !important; }
.cat-btn.active, .cat-btn:hover { background: #0f1111 !important; color: #fff !important; }
/* product page buy button */
.btn-amazon, .pd-cta, .amz-btn { background: var(--buy) !important; color: #0f1111 !important; border-radius: 999px !important; font-weight: 700 !important; }
.btn-amazon:hover, .pd-cta:hover, .amz-btn:hover { background: var(--buy-h) !important; color: #0f1111 !important; }

.s5-h1{font-size:clamp(2.2rem,5vw,3.6rem)!important;line-height:1!important;margin:0;color:#fff;letter-spacing:-.03em!important}
.s5-h1 span{display:block;font-size:.38em;font-weight:600;color:var(--buy);letter-spacing:0;margin-top:.5rem}

h1{font-family:var(--font)!important;font-weight:700!important}

body .catalog-content .prd .prd-badge{bottom:auto!important;right:auto!important;height:auto!important;width:auto!important;writing-mode:horizontal-tb!important;transform:none!important;line-height:1.2!important;max-width:calc(100% - 1rem)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-toolbar select{text-overflow:ellipsis}
body .catalog-content .prd .prd-badge{display:inline-block!important;margin:0!important;z-index:3}
body .catalog-content .prd .prd-image-link{border:0!important;display:block;width:100%;height:100%}

/* ===== v5.1 tidy + responsive (27 Sep 2026) ===== */
/* 1. kill old "lead row" rule that made first catalog card full-width */
@media (min-width: 960px) {
  body .catalog-content .prd-grid > .prd:first-child, body .prd-grid > .prd:first-child { grid-column: auto !important; grid-template-columns: none !important; padding: 0 !important; }
  body .prd-grid > .prd:first-child .prd-name { font-size: .92rem !important; }
}
body .catalog-content .prd-img-wrap, body .prd-img-wrap { grid-row: auto !important; }
/* 2. images: fixed square box, never stretch the card */
.s5-img, body .catalog-content .prd .prd-img-wrap { aspect-ratio: 1 / 1 !important; height: auto !important; overflow: hidden; display: grid !important; place-items: center; }
.s5-img img, body .catalog-content .prd .prd-img-wrap img { width: 100% !important; height: 100% !important; max-height: 100%; object-fit: contain !important; }
body .catalog-content .prd .prd-image-link { display: grid !important; place-items: center; width: 100%; height: 100%; min-height: 0; }
/* 3. equal card rhythm */
.s5-scroll { align-items: stretch; }
.s5-name, body .catalog-content .prd .prd-name { min-height: 2.7em; }
body .catalog-content .prd .prd-info { gap: .3rem; }
body .catalog-content .prd .prd-meta-row { margin-top: .1rem; }
/* 4. readable small text (>=12px) */
.s5-badge, body .catalog-content .prd .prd-badge { font-size: .75rem !important; }
.s5-promo-k, .s5-coupon-k, body .catalog-content .prd .prd-cat, .hp-card-cat { font-size: .75rem !important; }
/* 5. tap targets >= 44px */
.cat-btn, .catalog-toolbar select, .catalog-toolbar input, .catalog-more, .s5-buy, body .catalog-content .prd .prd-action { min-height: 44px !important; }
.catalog-reset, .reset-filters, a.reset { min-height: 44px; display: inline-flex; align-items: center; }
/* 6. container + fluid spacing */
.container { width: 100%; max-width: 1320px; padding-inline: clamp(1rem, 3vw, 2rem) !important; margin-inline: auto; }
.s5-row { padding-block: clamp(.75rem, 2vw, 1.5rem); }
/* 7. hero breakpoints */
@media (max-width: 1024px) and (min-width: 761px) {
  .s5-hero-grid { grid-template-columns: 1.4fr 1fr; }
  .s5-banner::after { font-size: 16rem; bottom: -4rem; }
}
@media (max-width: 760px) {
  .s5-banner { padding: 1.5rem 1.25rem; }
  .s5-banner-sub { font-size: .92rem; max-width: 70%; }
  .s5-banner-btn { width: 100%; text-align: center; justify-content: center; display: flex; }
  .s5-banner::after { font-size: 11rem; bottom: -2.5rem; right: -.75rem; opacity: .25; }
  .s5-promo { min-height: 150px; }
  .s5-row-head { align-items: flex-start; }
  .s5-row-head p { font-size: .82rem; }
}
@media (max-width: 400px) {
  .s5-banner-sub { max-width: none; }
  .s5-hero-grid { gap: .5rem; }
}
/* 8. horizontal rows: peek next card, 2.2 on phone, 3.3 tablet */
@media (max-width: 800px) { .s5-scroll { grid-auto-columns: 45%; } }
@media (min-width: 801px) and (max-width: 1100px) { .s5-scroll { grid-auto-columns: calc((100% - 3 * .75rem) / 3.4); } }
@media (min-width: 1101px) { .s5-scroll { grid-auto-columns: calc((100% - 5 * .75rem) / 6); } }
.s5-scroll { scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; }
.s5-scroll::-webkit-scrollbar { height: 6px; } .s5-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px; }
/* 9. catalog grid breakpoints: 2 / 3 / 4 / 5 / 6 */
body .catalog-content .prd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 640px) { body .catalog-content .prd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 900px) { body .catalog-content .prd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { body .catalog-content .prd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (min-width: 1440px) { body .catalog-content .prd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (max-width: 400px) { body .catalog-content .prd .prd-info { padding: .6rem !important; } body .catalog-content .prd .prd-name, body .catalog-content .prd .prd-name a { font-size: .85rem !important; } body .catalog-content .prd .prd-action { font-size: .78rem !important; padding-inline: .25rem !important; } }
/* 10. coupons + trust on tablet */
@media (min-width: 641px) and (max-width: 900px) { .s5-coupons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .s5-coupon { grid-template-columns: 1fr; } .s5-coupon-go { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; margin-top: .35rem; } }
/* 11. focus visible */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #0a6ebd !important; outline-offset: 2px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; padding-block: .3rem; }
.catalog-toolbar button, #resetFilters, .catalog-results button { min-height: 44px !important; padding-inline: .5rem; }
@media (min-width: 601px) and (max-width: 800px) { .s5-scroll { grid-auto-columns: calc((100% - 2 * .75rem) / 3.3); } }
#catalogReset{min-height:44px!important;display:inline-flex;align-items:center}

.s5-cat{width:84px}.s5-cat span:last-child{min-height:2.4em;display:block}
@media(max-width:760px){.s5-cat{width:76px;font-size:.78rem}.s5-cat-img{width:68px;height:68px}.s5-cat-img img{width:50px;height:50px}.s5-hero-grid{align-items:stretch}.s5-promo{height:100%;align-content:start}}
.s5-badge,body .catalog-content .prd .prd-badge{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.2!important;max-width:calc(100% - 1rem)!important}
.catalog-toolbar select{padding-inline:.6rem 1.8rem!important;font-size:.88rem!important}

body:has(.catalog-content) .site-main,body:has(.s5-hero) .site-main{max-width:none!important;padding-inline:0!important}
@media(max-width:640px){.catalog-toolbar{padding:0!important;background:none!important;border:0!important}}
@media(max-width:640px){.site-main{padding-inline:0!important}.site-main>.container,.site-main .container{padding-inline:1rem!important}}
@media(max-width:640px){.site-main>.article-wrap,.site-main>article,.site-main>section:not(.s5-hero):not(.cat-page-hero):not(.s5-row):not(.s5-trust),.site-main>.list-wrap,.site-main>div:not(.container):not([class*="s5"]):not(.hp-sec){padding-inline:1rem!important}}
.site-main>p{max-width:760px;margin-inline:auto!important;width:calc(100% - 2rem)}

/* v5.2 all-device */
@media(max-width:360px){.s5-hero-grid,.s5-promos{grid-template-columns:1fr!important}.s5-promos>*{min-height:0!important}.catalog-toolbar{grid-template-columns:1fr!important}}
@media(max-width:380px){.catalog-toolbar select{font-size:.85rem!important;padding-inline:.5rem 1.6rem!important}}
@media(min-width:1800px){.container,.s5-wrap,.site-header .container,.site-footer .container{max-width:1560px!important}}
@media(orientation:landscape) and (max-height:500px){.site-header{position:static!important}.s5-banner{padding-block:1.25rem!important}}

/* ===== v6 responsive pass (5 Okt 2026) ===== */
/* 1. Baris produk homepage: lebar kartu naik monoton sesuai layar, tidak melompat di tablet */
@media (min-width: 801px) and (max-width: 1100px) { .s5-scroll { grid-auto-columns: calc((100% - 3 * .75rem) / 4.3) !important; } }
@media (min-width: 1101px) { .s5-scroll { grid-auto-columns: calc((100% - 5 * .75rem) / 6) !important; } }
@media (min-width: 1600px) { .s5-scroll { grid-auto-columns: calc((100% - 6 * .75rem) / 7) !important; } }
/* desktop: scrollbar disembunyikan, diganti tombol panah (site.js) */
@media (min-width: 801px) {
  .s5-scroll { scrollbar-width: none; padding-bottom: 0; }
  .s5-scroll::-webkit-scrollbar { display: none; }
}
.s5-rowwrap { position: relative; }
.s5-arrow { position: absolute; top: 38%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: #fff; color: #0f1111; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: 1.25rem; line-height: 1; }
.s5-arrow--prev { left: -14px; } .s5-arrow--next { right: -14px; }
.s5-arrow[hidden] { display: none !important; }
@media (min-width: 801px) { .s5-arrow { display: inline-flex; } }
.s5-arrow:hover { background: var(--buy); border-color: var(--buy); }
.s5-arrow:focus-visible { outline: 2px solid #0a6ebd; outline-offset: 2px; }
html.dark .s5-arrow { background: var(--bg1); color: var(--t1); }

/* 2. Hero HP lebih ringkas supaya produk pertama naik */
@media (max-width: 600px) {
  .s5-hero { padding-top: .75rem; }
  .s5-banner { min-height: 0 !important; padding: 1.1rem 1rem !important; gap: .45rem; }
  .s5-h1 { font-size: 1.85rem !important; }
  .s5-h1 span { margin-top: .3rem; }
  .s5-banner-sub { font-size: .88rem; line-height: 1.45; }
  .s5-banner-btn { margin-top: .25rem; }
  .s5-promo { min-height: 0 !important; padding: .75rem !important; }
  .s5-promo img { width: 52px !important; height: 52px !important; margin-bottom: .25rem; }
  .s5-promo--coupon strong { font-size: 1rem !important; }
}
@media (max-width: 360px) {
  .s5-hero-grid { grid-template-columns: 1fr 1fr !important; }
  .s5-promo strong { font-size: .85rem !important; }
}

/* 3. Katalog HP: celah antar kartu sama dengan homepage (12px), teks aksi terbaca */
@media (max-width: 560px) {
  body .catalog-content .prd-grid { gap: .75rem !important; }
  body .catalog-content .prd .prd-action { font-size: .85rem !important; }
}

/* 4. Halaman produk: tablet 2 kolom (CTA di atas lipatan), gambar HP dibatasi, teks min 14px */
@media (min-width: 600px) and (max-width: 900px) {
  .pd-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; gap: 1.5rem !important; }
}
@media (max-width: 599px) {
  .pd-image { aspect-ratio: auto !important; max-height: 300px; }
  .pd-image img { object-fit: contain !important; max-height: 300px; }
}
.pd-content p { font-size: 1rem; line-height: 1.65; }
.pd-features li { font-size: .875rem !important; }
.pd-rel-name { font-size: .875rem !important; }
.pd-price-note, .pd-assoc-note { font-size: .8125rem !important; line-height: 1.5; }

/* v6.1: tombol tema di HP/tablet menempel ke kanan di samping menu (dulu terdorong ke tengah oleh space-between) */
@media (max-width: 860px) {
  .header-inner .theme-toggle { margin-left: auto !important; }
  .header-inner .nav-toggle { margin-left: .5rem; }
  .header-inner { gap: 0 !important; }
}

/* ===== v7 shell (5 Okt 2026): header 2 baris + search, strip kategori, sidebar artikel, grid panduan, halaman statis ===== */
html { scroll-padding-top: 124px; }
::selection { background: #ffc629; color: #0f1111; }
.v7hdr { position: sticky; top: 0; z-index: 100; background: #0f1111 !important; padding: 0 !important; height: auto !important; }
.v7-top { max-width: 1320px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 1.25rem; padding-inline: clamp(1rem, 3vw, 2rem); }
.v7hdr .site-logo { flex-shrink: 0; }
.v7-search { flex: 1 1 auto; max-width: 620px; position: relative; display: flex; align-items: center; }
.v7-search svg { position: absolute; left: .85rem; width: 18px; height: 18px; color: #565c65; pointer-events: none; }
.v7-search input { width: 100%; height: 42px; border-radius: 8px; border: 2px solid transparent; background: #fff; color: #0f1111; padding: 0 1rem 0 2.6rem; font: 500 .95rem var(--font); outline: none; }
.v7-search input::placeholder { color: #6b7280; }
.v7-search input:focus { border-color: #ffc629; box-shadow: 0 0 0 3px rgba(255,198,41,.25); }
.v7-search-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: #fff !important; margin-left: auto; }
.v7-cta { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; height: 40px; padding: 0 1rem; border-radius: 8px; background: #ffc629; color: #0f1111 !important; font-weight: 700; font-size: .9rem; text-decoration: none; }
.v7-cta:hover { background: #f5b400; }
.v7hdr .theme-toggle { margin-left: 0 !important; border-color: rgba(255,255,255,.25) !important; width: 44px; height: 44px; }
.v7-cats { background: #1d2125; border-top: 1px solid rgba(255,255,255,.06); }
.v7-cats-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: .15rem; padding-inline: clamp(.5rem, 3vw, 2rem); overflow-x: auto; scrollbar-width: none; }
.v7-cats-in::-webkit-scrollbar { display: none; }
.v7-cats a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; color: #e6e8eb !important; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.v7-cats a:hover { color: #fff !important; border-bottom-color: rgba(255,198,41,.6); }
.v7-cats a[aria-current="page"] { color: #fff !important; font-weight: 700; border-bottom-color: #ffc629; }
.v7-cats .v7-deals { color: #ffc629 !important; font-weight: 700; }
.v7-sep { flex-shrink: 0; width: 1px; height: 18px; background: rgba(255,255,255,.18); margin: 0 .4rem; }
.v7-only-m { display: none !important; }
.v7hdr a:focus-visible, .v7hdr button:focus-visible { outline: 2px solid #ffc629; outline-offset: 2px; }
@media (max-width: 860px) {
  .v7-top { gap: .25rem; height: 56px; }
  .v7-search, .v7-cta { display: none; }
  .v7-search-btn { display: inline-flex; }
  .v7-only-m { display: inline-flex !important; }
  .v7-cats a { padding: 0 .7rem; font-size: .85rem; }
  html { scroll-padding-top: 116px; }
}

/* Artikel: kolom baca + sidebar ringkasan (>=1200px) */
.post-aside { display: none; }
@media (min-width: 1200px) {
  .post-layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 3.5rem; justify-content: center; max-width: 1180px; margin: 0 auto; align-items: start; }
  .post-layout > article { max-width: none !important; margin: 0 !important; min-width: 0; }
  .post-aside { display: block; position: sticky; top: 124px; padding-top: 2.5rem; max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: thin; }
}
.pa-box { background: var(--bg1); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.1rem .6rem; margin-bottom: 1rem; }
.pa-h { font: 700 .95rem var(--font) !important; color: var(--t1); margin: 0 0 .75rem !important; }
.pa-picks { list-style: none; margin: 0; padding: 0; counter-reset: pa; }
.pa-picks li { display: grid; grid-template-columns: 56px 1fr; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.pa-picks li:first-child { border-top: 0; padding-top: 0; }
.pa-thumb { width: 56px; height: 56px; border-radius: 8px; background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pa-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pa-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pa-role { font-size: .75rem; font-weight: 700; color: #c7112f; }
html.dark .pa-role { color: #ff8a9b; }
.pa-name { font-size: .875rem; font-weight: 600; color: var(--t1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-buy { align-self: flex-start; margin-top: .3rem; font-size: .8125rem; font-weight: 700; color: #0f1111 !important; background: #ffc629; border-radius: 999px; padding: .3rem .8rem; text-decoration: none; }
.pa-buy:hover { background: #f5b400; }
.pa-toc ul { list-style: none; margin: 0; padding: 0; }
.pa-toc li a { display: block; padding: .4rem 0; font-size: .875rem; color: var(--t2); text-decoration: none; line-height: 1.35; }
.pa-toc li a:hover { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }

/* Halaman /posts/: grid panduan bergambar */
.pg-wrap { max-width: 1320px; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2rem) 3rem; }
.pg-head { max-width: 46rem; margin-bottom: 1.75rem; }
.pg-head h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem) !important; margin: 0 0 .5rem; }
.pg-head p { color: var(--t2); font-size: 1.02rem; margin: 0; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.pg-card { display: flex; flex-direction: column; background: var(--bg1); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--t1); transition: border-color .15s, transform .15s; }
.pg-card:hover { border-color: var(--t1); transform: translateY(-2px); }
.pg-img { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.pg-img img { width: 78%; height: 78%; object-fit: contain; }
.pg-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.pg-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.pg-tags span { font-size: .75rem; font-weight: 700; text-transform: capitalize; color: #c7112f; }
html.dark .pg-tags span { color: #ff8a9b; }
.pg-tags span + span::before { content: "\00B7"; margin-right: .4rem; color: var(--t3); }
.pg-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.pg-desc { color: var(--t2); font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-meta { margin-top: auto; padding-top: .35rem; font-size: .8125rem; color: var(--t3); display: flex; gap: .75rem; }
.pg-n { font-weight: 600; color: var(--t2); }
@media (min-width: 900px) {
  .pg-lead { grid-column: span 2; flex-direction: row; }
  .pg-lead .pg-img { aspect-ratio: auto; width: 46%; border-bottom: 0; border-right: 1px solid var(--line); }
  .pg-lead .pg-body { justify-content: center; padding: 1.75rem; }
  .pg-lead .pg-title { font-size: 1.5rem; }
  .pg-lead .pg-desc { -webkit-line-clamp: 3; font-size: 1rem; }
}

/* Halaman statis (About, How we choose, Disclaimer, Privacy, Contact, hub lama) */
.single-page { max-width: 820px !important; margin: 2.5rem auto 3.5rem !important; background: var(--bg1); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.5rem, 4vw, 3.25rem) !important; }
.single-page h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; line-height: 1.15; margin: 0 0 1.5rem !important; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.single-page h2 { font-size: 1.3rem !important; margin: 2.25rem 0 .75rem !important; }
.single-page p, .single-page li { font-size: 1.0625rem; line-height: 1.7; color: var(--t2); max-width: 68ch; }
.single-page ul { padding-left: 1.25rem; }
.single-page li + li { margin-top: .45rem; }
.single-page li::marker { color: #c7112f; }
.single-page a { color: #0a6ebd; text-underline-offset: 3px; }
html.dark .single-page a { color: #6cb4ee; }
.single-page hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
@media (max-width: 640px) { .single-page { margin: 1rem !important; border-radius: 12px; } }
.s5-arrow svg { width: 20px; height: 20px; }
.s5-arrow--prev svg { transform: rotate(180deg); }

/* v7.1: HP pakai hamburger, bukan strip geser */
.v7-burger { display: none !important; }
@media (max-width: 860px) {
  .v7-burger { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: .25rem; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; background: none !important; border-radius: 8px; }
  .v7hdr .theme-toggle { margin-left: 0 !important; }
  .v7-search-btn { margin-left: auto; }
  .v7-cats { display: none; position: absolute; top: 56px; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 24px rgba(0,0,0,.35); max-height: calc(100vh - 56px); overflow-y: auto; }
  .v7-cats.open { display: block; }
  .v7-cats-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: .5rem 1rem 1rem; overflow: visible; }
  .v7-cats a { min-height: 48px; padding: 0 .25rem; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .v7-cats a[aria-current="page"] { border-bottom-color: rgba(255,255,255,.08); color: #ffc629 !important; }
  .v7-cats .v7-sep { display: none; }
  .v7-only-m { display: inline-flex !important; }
  html { scroll-padding-top: 72px; }
}
.nav-toggle svg, .theme-toggle svg { pointer-events: none; }

/* v7.2: desktop strip kategori tanpa scroll; kategori yang tidak muat masuk "More" */
@media (min-width: 861px) {
  .v7-cats-in { overflow: visible; flex-wrap: nowrap; }
  .v7-cats a { padding: 0 clamp(.5rem, .9vw, .8rem); }
  .v7-more { position: relative; flex-shrink: 0; display: none; }
  .v7-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 clamp(.5rem, .9vw, .8rem); color: #e6e8eb; font-size: .875rem; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
  .v7-more > summary::-webkit-details-marker { display: none; }
  .v7-more > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
  .v7-more[open] > summary::after { transform: translateY(1px) rotate(225deg); }
  .v7-more > summary:hover, .v7-more[open] > summary { color: #fff; border-bottom-color: rgba(255,198,41,.6); }
  .v7-more.v7-more-act > summary { color: #fff; font-weight: 700; border-bottom-color: #ffc629; }
  .v7-more > summary:focus-visible { outline: 2px solid #ffc629; outline-offset: -2px; }
  .v7-more-pop { position: absolute; top: 100%; left: 0; min-width: 200px; background: #1d2125; border: 1px solid rgba(255,255,255,.12); border-radius: 0 0 10px 10px; box-shadow: 0 14px 28px rgba(0,0,0,.4); padding: .35rem; z-index: 120; }
  .v7-more-pop a { display: none; width: 100%; min-height: 44px; padding: 0 .85rem !important; border-bottom: 0 !important; border-radius: 6px; }
  .v7-more-pop a:hover { background: rgba(255,255,255,.07); }
  .v7-more-pop a[aria-current="page"] { color: #ffc629 !important; }
}
/* 861-1060: Lifestyle & Fashion masuk More */
@media (min-width: 861px) and (max-width: 1060px) {
  .v7-more { display: block; }
  .v7-cats-in > .v7-p1 { display: none; }
  .v7-more-pop .v7-mp1 { display: flex; }
}
/* 861-940: Holiday & Gifts juga masuk More */
@media (min-width: 861px) and (max-width: 940px) {
  .v7-cats-in > .v7-p2 { display: none; }
  .v7-more-pop .v7-mp2 { display: flex; }
}
@media (max-width: 860px) { .v7-more { display: none !important; } }

/* v11: ulasan produk panjang */
.rv-body { max-width: 760px; margin-inline: auto; font-size: 1.0625rem; line-height: 1.7; }
.rv-body h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); margin: 2.2rem 0 .8rem; line-height: 1.25; }
.rv-body h3 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; }
.rv-body p, .rv-body li { color: var(--t2, inherit); }
.rv-body ul, .rv-body ol { padding-left: 1.25rem; margin: .5rem 0 1rem; }
.rv-body li { margin: .35rem 0; }
.rv-updated { font-size: .85rem; color: var(--t3) !important; margin-bottom: 1rem; }
.rv-verdict { border-left: 4px solid #ffc629; background: rgba(255,198,41,.08); padding: 1rem 1.15rem; border-radius: 0 10px 10px 0; }
.rv-body table { width: 100%; border-collapse: collapse; margin: .75rem 0 1.25rem; font-size: .95rem; table-layout: fixed; }
.rv-body th, .rv-body td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); vertical-align: top; overflow-wrap: anywhere; }
.rv-body th:first-child, .rv-body td:first-child { width: 38%; font-weight: 600; }
.rv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.6rem 0; padding: 1rem 1.15rem; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 12px; }
.rv-cta .pd-cta { margin: 0; min-height: 48px; }
.rv-cta-sub { font-size: .85rem; color: var(--t3); }
@media (max-width: 540px) { .rv-cta .pd-cta { width: 100%; justify-content: center; } .rv-body { font-size: 1rem; } }

/* v15 carhub */
.carhub{padding:2rem 0 2.5rem;border-top:1px solid var(--line)}
.carhub-h{font-size:1.5rem;margin:0 0 .35rem}
.carhub-p{color:var(--t2);margin:0 0 1.2rem;font-size:.95rem}
.carhub-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.2rem 2rem}
.carhub-col h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);margin:0 0 .4rem}
.carhub-col ul{list-style:none;margin:0;padding:0}
.carhub-col li{border-bottom:1px solid var(--line)}
.carhub-col a{display:flex;align-items:center;min-height:44px;color:var(--t1);text-decoration:none;font-size:.95rem}
.carhub-col a:hover{color:var(--gold);text-decoration:underline}