/* BSW homepage colour refresh (2026-10-19). Logo palette: navy #0B2E5E to cyan #29B6F6. */

.bswh {
    --bswh-navy: #0B2E5E;
    --bswh-navy-2: #123F7E;
    --bswh-cyan: #29B6F6;
    --bswh-accent: #0E6FC7;
    --bswh-radius: 16px;
    --bswh-shadow: 0 10px 30px rgba(11, 46, 94, .10);
    --bswh-tint: #EEF6FD;
}
.bswh a { text-decoration: none; }
.bswh-section { padding: 3rem 0; }
.bswh-section--tight { padding: 0 0 .5rem; }
.bswh-section--alt { background: var(--color-bg-alt, #F7F5F0); }
.bswh-section--tint { background: linear-gradient(180deg, var(--bswh-tint) 0%, #F8FBFF 100%); }

/* Tone palette shared by tiles, subcategories and guides */
.bswh-tone--blue   { --tone: #0E6FC7; --tone-soft: #E3F0FC; }
.bswh-tone--violet { --tone: #7C3AED; --tone-soft: #EFE7FE; }
.bswh-tone--green  { --tone: #059669; --tone-soft: #DDF5EC; }
.bswh-tone--teal   { --tone: #0891B2; --tone-soft: #DDF3F8; }
.bswh-tone--orange { --tone: #EA580C; --tone-soft: #FDEBDD; }
.bswh-tone--pink   { --tone: #DB2777; --tone-soft: #FBE4EF; }
.bswh-tone--indigo { --tone: #4F46E5; --tone-soft: #E6E5FC; }
.bswh-tone--red    { --tone: #DC2626; --tone-soft: #FCE3E3; }

/* Section header */
.bswh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.bswh-head__title { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }
.bswh-head__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: linear-gradient(135deg, var(--bswh-navy), var(--bswh-cyan)); color: #fff; font-size: 1.1rem; }
.bswh-head__sub { margin: .35rem 0 0; color: var(--color-text-muted); font-size: .97rem; }
.bswh-head__more { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .95rem; border-radius: 999px; background: var(--bswh-tint); font-weight: 700; font-size: .92rem; color: var(--bswh-accent); white-space: nowrap; transition: background .15s, color .15s; }
.bswh-head__more:hover { background: var(--bswh-accent); color: #fff; }

/* 1. Hero */
.bswh-hero { position: relative; overflow: hidden; padding: 3.8rem 0 3.4rem; color: #fff; background: radial-gradient(1200px 500px at 85% -10%, rgba(41, 182, 246, .55), transparent 60%), linear-gradient(120deg, #071F42 0%, var(--bswh-navy) 45%, #0F5BA8 100%); }
.bswh-hero__glow { position: absolute; inset: auto -10% -60% auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(41, 182, 246, .35), transparent 65%); pointer-events: none; }
.bswh-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.bswh-hero__text, .bswh-hero__shots { min-width: 0; }
.bswh-hero__kicker { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .9rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #BDE7FD; }
.bswh-hero__kicker .bi { color: #FCD34D; }
.bswh-hero__title { margin: 0 0 1rem; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.bswh-hero__lead { margin: 0 0 1.6rem; max-width: 560px; font-size: 1.1rem; color: #D6E6F7; }
.bswh-search { display: flex; align-items: center; gap: .5rem; max-width: 540px; margin: 0 0 1.1rem; padding: .35rem .35rem .35rem 1.1rem; background: #fff; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.bswh-search .bi { color: #64748B; }
.bswh-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1rem; color: #0F172A; outline: none; padding: .6rem 0; }
.bswh-search button { border: 0; border-radius: 999px; padding: .7rem 1.4rem; background: linear-gradient(135deg, #0EA5E9, #0E6FC7); color: #fff; font-weight: 800; cursor: pointer; }
.bswh-search button:hover { filter: brightness(1.08); }
.bswh-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bswh-chip { padding: .42rem .95rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: .9rem; font-weight: 600; transition: background .15s, color .15s; }
.bswh-chip:hover { background: #fff; color: var(--bswh-navy); }
.bswh-stats { display: flex; gap: 2rem; margin: 1.8rem 0 0; padding: 1.2rem 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .15); }
.bswh-stats li { display: flex; flex-direction: column; }
.bswh-stats strong { font-size: 1.9rem; line-height: 1; font-weight: 800; background: linear-gradient(90deg, #fff, #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bswh-stats span { margin-top: .3rem; font-size: .85rem; color: #A9C7E8; }

/* Hero product shots: white cards floating on the gradient */
.bswh-hero__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bswh-shot { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); transition: transform .25s; }
.bswh-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; padding: .6rem; background: #fff; transition: transform .3s; }
.bswh-shot__name { padding: .1rem .9rem .8rem; font-size: .85rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bswh-shot--1 { transform: translateY(-14px) rotate(-2deg); }
.bswh-shot--2 { transform: translateY(10px) rotate(2deg); }
.bswh-shot--3 { transform: translateY(-6px) rotate(1.5deg); }
.bswh-shot--4 { transform: translateY(14px) rotate(-1.5deg); }
.bswh-shot:hover { transform: translateY(-4px) rotate(0) scale(1.03); }
.bswh-shot:hover img { transform: scale(1.05); }

/* 2. Category tiles */
.bswh-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.bswh-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E5E2DC); border-top: 4px solid var(--tone); border-radius: var(--bswh-radius); transition: transform .18s, box-shadow .18s; }
.bswh-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--tone) 22%, transparent); }
.bswh-tile__img { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--tone-soft); }
.bswh-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.bswh-tile:hover .bswh-tile__img img { transform: scale(1.07); }
.bswh-tile__body { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: 1.6rem 1.1rem 1.1rem; }
.bswh-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--tone); color: #fff; font-size: 1.25rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--tone) 35%, transparent); }
.bswh-tile__img + .bswh-tile__body .bswh-tile__icon { position: absolute; top: -1.3rem; left: 1.1rem; border: 3px solid var(--color-surface, #fff); width: 2.8rem; height: 2.8rem; }
.bswh-tile__name { font-weight: 800; font-size: 1.05rem; color: var(--color-text); }
.bswh-tile:hover .bswh-tile__name { color: var(--tone); }
.bswh-tile__desc { font-size: .87rem; color: var(--color-text-muted); }

/* Tiles without a photo (calculators): big icon on the tone colour */
.bswh-tile__img--icon { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--tone-soft), color-mix(in srgb, var(--tone) 30%, #fff)); color: var(--tone); font-size: 3.2rem; }
[data-theme="dark"] .bswh-tile__img--icon { background: color-mix(in srgb, var(--tone) 25%, transparent); color: #fff; }

/* 3. Gifts banner: uses the occasion colours from bsw-gifts.php */
.bswh-gift { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.3rem; padding: 1.4rem 1.7rem; border-radius: var(--bswh-radius); color: var(--bsw-text, #fff); background: linear-gradient(110deg, var(--bsw-g1, #7C2D12), var(--bsw-g2, #431407)); box-shadow: var(--bswh-shadow); }
.bswh-gift::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(249, 115, 22, .45), transparent 70%); }
.bswh-gift__icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 2.4rem; line-height: 1; }
.bswh-gift__text { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.bswh-gift__kicker { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FDBA74; }
.bswh-gift__text strong { font-size: 1.35rem; font-weight: 800; }
.bswh-gift__text > span:last-child { font-size: .95rem; opacity: .85; }
.bswh-gift__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.3rem; border-radius: 999px; background: #F97316; color: #fff; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px rgba(249, 115, 22, .4); transition: background .15s, transform .15s; }
.bswh-gift:hover .bswh-gift__btn { background: #EA580C; transform: translateX(3px); }

/* Cards */
.bswh-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E5E2DC); border-radius: var(--bswh-radius); transition: transform .18s, box-shadow .18s, border-color .18s; }
.bswh-card:hover { transform: translateY(-4px); box-shadow: var(--bswh-shadow); border-color: #BFDDF7; }
.bswh-card__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; }
.bswh-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.bswh-card:hover .bswh-card__img img { transform: scale(1.05); }
.bswh-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.bswh-card__cat { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bswh-accent); }
.bswh-card__title { font-weight: 700; line-height: 1.35; color: var(--color-text); }
.bswh-card:hover .bswh-card__title { color: var(--bswh-accent); }
.bswh-card__excerpt { font-size: .93rem; color: var(--color-text-secondary); }
.bswh-card__go { margin-top: auto; padding-top: .3rem; display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 700; color: var(--bswh-accent); }
.bswh-card:hover .bswh-card__go .bi { transform: translateX(3px); }
.bswh-card__go .bi { transition: transform .15s; }

/* Product cards: white product shot blends into a soft stage */
.bswh-card--product .bswh-card__img { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #E6F2FC 75%); }
.bswh-card--product .bswh-card__img img { object-fit: contain; padding: .8rem; mix-blend-mode: multiply; }

/* Badges and brand pills */
.bswh-badges { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .4rem; z-index: 1; }
.bswh-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.bswh-badge--pick { background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #451A03; }
.bswh-badge--new { background: #10B981; color: #fff; }
.bswh-pill { display: inline-block; padding: .2rem .6rem; border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--bswh-accent); }
.bswh-pill--apple   { background: #1D1D1F; }
.bswh-pill--samsung { background: #1428A0; }
.bswh-pill--garmin  { background: #007CC3; }
.bswh-pill--fitbit  { background: #00A0A8; }
.bswh-pill--google  { background: #1A73E8; }
.bswh-pill--amazfit { background: #F26B1D; }

/* 4. Editor's picks */
.bswh-picks { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; }
.bswh-picks__lead .bswh-card { border: 2px solid #FCD34D; }
.bswh-picks__lead .bswh-card__title { font-size: 1.4rem; }
.bswh-picks__side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.2rem; }

/* 5. Grids */
.bswh-grid { display: grid; gap: 1.2rem; }
.bswh-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Lists */
.bswh-list { list-style: none; margin: 0; padding: 0; }
.bswh-list li { padding: .55rem 0; border-top: 1px solid var(--color-border-subtle, #EFECE6); }
.bswh-list li:first-child { border-top: 0; }
.bswh-list a { color: var(--color-text); font-weight: 600; line-height: 1.35; }
.bswh-list a:hover { color: var(--tone, var(--bswh-accent)); }
.bswh-list--small a { font-size: .9rem; font-weight: 500; }

/* 6. Brands */
.bswh-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.bswh-brand { --brand: #0E6FC7; overflow: hidden; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E5E2DC); border-radius: var(--bswh-radius); transition: box-shadow .18s, transform .18s; }
.bswh-brand:hover { transform: translateY(-3px); box-shadow: var(--bswh-shadow); }
.bswh-brand--apple   { --brand: #1D1D1F; --brand-2: #4B5563; }
.bswh-brand--samsung { --brand: #1428A0; --brand-2: #3B5BDB; }
.bswh-brand--garmin  { --brand: #00558C; --brand-2: #007CC3; }
.bswh-brand--fitbit  { --brand: #00838A; --brand-2: #00B0B9; }
.bswh-brand--google  { --brand: #1A73E8; --brand-2: #4285F4; }
.bswh-brand--amazfit { --brand: #D9480F; --brand-2: #F76707; }
.bswh-brand__top { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; min-height: 150px; padding: 1.1rem 1.2rem; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2, var(--brand))); }
.bswh-brand__name { font-size: 1.25rem; font-weight: 800; }
.bswh-brand__count { align-self: start; padding: .2rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .75rem; font-weight: 700; }
.bswh-brand__img { grid-column: 1 / -1; justify-self: end; align-self: end; width: 58%; margin: -.4rem -.4rem -.6rem 0; }
.bswh-brand__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; padding: .35rem; background: #fff; border-radius: 12px; box-shadow: 0 10px 22px rgba(0, 0, 0, .25); transition: transform .3s; }
.bswh-brand:hover .bswh-brand__img img { transform: rotate(-3deg) scale(1.04); }
.bswh-brand .bswh-list { padding: .5rem 1.2rem 1rem; }
.bswh-brand .bswh-list a:hover { color: var(--brand-2, var(--brand)); }

/* 7. Wellness subcategories */
.bswh-subcats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.bswh-subcat, .bswh-guide { padding: 1rem; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E5E2DC); border-radius: var(--bswh-radius); border-top: 4px solid var(--tone); }
.bswh-subcat__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--tone-soft); }
.bswh-subcat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.bswh-subcat:hover .bswh-subcat__img img { transform: scale(1.06); }
.bswh-subcat__name { display: inline-flex; align-items: center; gap: .3rem; margin: .75rem 0 .3rem; padding: .25rem .65rem; border-radius: 999px; background: var(--tone-soft); font-weight: 800; font-size: .95rem; color: var(--tone); }

/* 8. Guides */
.bswh-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.bswh-guide { padding: 1.3rem; background: linear-gradient(180deg, var(--tone-soft) 0, var(--color-surface, #fff) 90px); }
.bswh-guide__name { display: flex; align-items: center; gap: .65rem; margin: 0 0 .7rem; font-size: 1.15rem; font-weight: 800; color: var(--color-text); }
.bswh-guide__name .bswh-tile__icon { width: 2.3rem; height: 2.3rem; font-size: 1.05rem; }
.bswh-guide__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; font-weight: 700; color: var(--tone); }

/* 9. Tools: dark band */
.bswh-band { position: relative; overflow: hidden; background: radial-gradient(800px 300px at 10% 0%, rgba(41, 182, 246, .3), transparent 60%), linear-gradient(120deg, #071F42, var(--bswh-navy) 60%, #0F4C8E); }
.bswh-band .bswh-head__title { color: #fff; }
.bswh-band .bswh-head__icon { background: linear-gradient(135deg, #22D3EE, #0EA5E9); }
.bswh-band .bswh-head__sub { color: #A9C7E8; }
.bswh-band .bswh-head__more { background: rgba(255, 255, 255, .12); color: #fff; }
.bswh-band .bswh-head__more:hover { background: #fff; color: var(--bswh-navy); }
.bswh-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; }
.bswh-tool { display: flex; align-items: center; gap: .7rem; padding: .95rem 1rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; color: #fff; font-weight: 700; font-size: .93rem; transition: background .15s, transform .15s, border-color .15s; }
.bswh-tool .bi { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, #22D3EE, #0E6FC7); font-size: 1.05rem; color: #fff; }
.bswh-tool:hover { background: rgba(255, 255, 255, .16); border-color: #7DD3FC; transform: translateY(-2px); color: #fff; }

/* 10. Trust */
.bswh-trust { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.8rem; padding: 2rem; overflow: hidden; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E5E2DC); border-radius: var(--bswh-radius); box-shadow: var(--bswh-shadow); }
.bswh-trust::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--bswh-navy), var(--bswh-cyan)); }
.bswh-trust__author { display: flex; gap: 1.2rem; align-items: flex-start; }
.bswh-trust__author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--bswh-cyan); }
.bswh-trust__kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bswh-accent); }
.bswh-trust__name { margin: .2rem 0 .5rem; font-size: 1.45rem; font-weight: 800; color: var(--color-text); }
.bswh-trust__bio { margin: 0 0 .8rem; color: var(--color-text-secondary); }
.bswh-trust__how h3 { margin: 0 0 .8rem; font-size: 1.15rem; font-weight: 800; color: var(--color-text); }
.bswh-trust__how ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.bswh-trust__how li { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; color: var(--color-text-secondary); }
.bswh-trust__ic { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background: var(--bswh-tint); color: var(--bswh-accent); }
.bswh-trust__note { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--color-bg-alt, #F7F5F0); font-size: .85rem; color: var(--color-text-muted); }

/* Dark mode */
[data-theme="dark"] .bswh { --bswh-accent: #60A5FA; --bswh-tint: rgba(96, 165, 250, .12); }
[data-theme="dark"] .bswh-section--tint { background: linear-gradient(180deg, #0F1B2D 0%, var(--color-bg) 100%); }
[data-theme="dark"] .bswh-tile__img, [data-theme="dark"] .bswh-subcat__img { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .bswh-tile__img + .bswh-tile__body .bswh-tile__icon { border-color: var(--color-surface); }
[data-theme="dark"] .bswh-subcat__name { background: color-mix(in srgb, var(--tone) 22%, transparent); color: #fff; }
[data-theme="dark"] .bswh-guide { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 18%, transparent) 0, var(--color-surface) 90px); }
[data-theme="dark"] .bswh-card--product .bswh-card__img { background: #fff; }
[data-theme="dark"] .bswh-card:hover { border-color: #1E3A5F; }

/* Tablet */
@media (max-width: 1024px) {
    .bswh-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .bswh-hero__shots { grid-template-columns: repeat(4, 1fr); }
    .bswh-shot__name { display: none; }
    .bswh-tiles, .bswh-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .bswh-brands { grid-template-columns: repeat(2, 1fr); }
    .bswh-subcats { grid-template-columns: repeat(3, 1fr); }
    .bswh-tools { grid-template-columns: repeat(3, 1fr); }
    .bswh-trust { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 640px) {
    .bswh-section { padding: 2.2rem 0; }
    .bswh-hero { padding: 2.4rem 0 2.2rem; }
    .bswh-hero__lead { font-size: 1rem; }
    .bswh-hero__shots { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .bswh-hero__shots .bswh-shot--3, .bswh-hero__shots .bswh-shot--4 { display: none; }
    .bswh-shot--1, .bswh-shot--2 { transform: none; }
    .bswh-stats { gap: 1.2rem; }
    .bswh-stats strong { font-size: 1.5rem; }
    .bswh-stats span { font-size: .78rem; }
    .bswh-search button { padding: .65rem 1rem; }
    .bswh-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .bswh-tiles { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .bswh-tile__body { padding: 1.5rem .8rem .9rem; }
    .bswh-tile__desc { display: none; }
    .bswh-tile__name { font-size: .95rem; }
    .bswh-picks { grid-template-columns: 1fr; }
    .bswh-picks__side { grid-template-rows: none; }
    .bswh-brands, .bswh-subcats, .bswh-guides { grid-template-columns: 1fr; }
    .bswh-grid--4 { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .bswh-card--product .bswh-card__body { padding: .7rem .75rem .85rem; }
    .bswh-card--product .bswh-card__title { font-size: .9rem; }
    .bswh-card--product .bswh-card__go { display: none; }
    .bswh-tools { grid-template-columns: repeat(2, 1fr); }
    .bswh-tool { font-size: .85rem; padding: .75rem; }
    .bswh-gift { flex-wrap: wrap; padding: 1.2rem; }
    .bswh-gift__btn { width: 100%; justify-content: center; }
    .bswh-trust { padding: 1.4rem 1.2rem 1.4rem 1.5rem; }
    .bswh-trust__author { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .bswh *, .bswh *::before, .bswh *::after { transition: none !important; }
    .bswh-shot { transform: none !important; }
}

/* ---- More colour (owner 2026-10-19: "thêm màu, vẫn nhợt nhạt") ---- */

/* Coloured section backgrounds */
.bswh-bg--cats     { background: linear-gradient(135deg, #DCEBFF 0%, #EADCFF 50%, #FFE3D1 100%); }
.bswh-bg--picks    { background: linear-gradient(135deg, #FFF3C4 0%, #FFE1CC 100%); }
.bswh-section--tint { background: linear-gradient(135deg, #CDEBFF 0%, #D9E4FF 100%); }
.bswh-bg--brands   { background: linear-gradient(135deg, #E3E8FF 0%, #D6F3F7 100%); }
.bswh-bg--wellness { background: linear-gradient(135deg, #EEDCFF 0%, #FFDDEB 100%); }
.bswh-bg--guides   { background: linear-gradient(135deg, #D5F5E6 0%, #DCEBFF 100%); }

/* Header: colour bar under every section title */
.bswh-head__title { position: relative; padding-bottom: .45rem; }
.bswh-head__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #0E6FC7, #29B6F6, #A855F7); }
.bswh-bg--picks .bswh-head__icon { background: linear-gradient(135deg, #F59E0B, #EA580C); }
.bswh-bg--picks .bswh-head__title::after { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.bswh-bg--wellness .bswh-head__icon { background: linear-gradient(135deg, #A855F7, #EC4899); }
.bswh-bg--wellness .bswh-head__title::after { background: linear-gradient(90deg, #A855F7, #EC4899); }
.bswh-bg--guides .bswh-head__icon { background: linear-gradient(135deg, #10B981, #0E6FC7); }
.bswh-bg--guides .bswh-head__title::after { background: linear-gradient(90deg, #10B981, #0EA5E9); }
.bswh-bg--cats .bswh-head__more, .bswh-bg--picks .bswh-head__more, .bswh-section--tint .bswh-head__more, .bswh-bg--wellness .bswh-head__more { background: #fff; }

/* Category tiles: whole tile in its colour */
.bswh-tile { border: 0; border-top: 0; background: linear-gradient(180deg, var(--tone-soft) 0%, #fff 100%); box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 14%, transparent); }
.bswh-tile__img { background: color-mix(in srgb, var(--tone) 20%, #fff); }
.bswh-tile__body { background: linear-gradient(135deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 70%, #000) 100%); }
.bswh-tile__name { color: #fff; }
.bswh-tile:hover .bswh-tile__name { color: #fff; }
.bswh-tile__desc { color: rgba(255, 255, 255, .85); }
.bswh-tile__img + .bswh-tile__body .bswh-tile__icon { background: #fff; color: var(--tone); border-color: var(--tone); }

/* Cards: coloured stage per brand, coloured strip on top of the text */
.bswh-card { border: 0; box-shadow: 0 6px 18px rgba(11, 46, 94, .10); }
.bswh-card__body { border-top: 4px solid var(--card-tone, #0E6FC7); }
.bswh-b--apple   { --card-tone: #1D1D1F; --stage: #E4E6EB; }
.bswh-b--samsung { --card-tone: #1428A0; --stage: #D3DBFF; }
.bswh-b--garmin  { --card-tone: #007CC3; --stage: #CDE9FA; }
.bswh-b--fitbit  { --card-tone: #00A0A8; --stage: #C9F1F2; }
.bswh-b--google  { --card-tone: #1A73E8; --stage: #D3E3FD; }
.bswh-b--amazfit { --card-tone: #F26B1D; --stage: #FFDCC6; }
.bswh-card--product .bswh-card__img { background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, var(--stage, #D6EBFC) 78%); }
.bswh-picks .bswh-card__body { border-top-color: #F59E0B; }
.bswh-picks__lead .bswh-card { border: 3px solid #F59E0B; }
.bswh-picks .bswh-card__img { background: linear-gradient(135deg, #FFF7E0, #FFE8D6); }
.bswh-picks .bswh-card__img img { mix-blend-mode: multiply; }

/* Brand cards: stronger colour under the list too */
.bswh-brand { border: 0; box-shadow: 0 8px 22px rgba(11, 46, 94, .12); }
.bswh-brand .bswh-list { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2, var(--brand)) 10%, #fff) 0%, #fff 100%); }

/* Wellness subcats and guides: tinted bodies */
.bswh-subcat { border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 16%, #fff) 0%, #fff 100%); box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 16%, transparent); }
.bswh-subcat__name { background: var(--tone); color: #fff; }
.bswh-guide { border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 22%, #fff) 0%, #fff 140px); box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 16%, transparent); }

/* Trust block: soft brand gradient */
.bswh-trust { border: 0; background: linear-gradient(135deg, #E0F2FE 0%, #EDE9FE 100%); }
.bswh-trust__ic { background: linear-gradient(135deg, #0E6FC7, #29B6F6); color: #fff; }
.bswh-trust__note { background: rgba(255, 255, 255, .7); }

/* Dark mode versions of the new colours */
[data-theme="dark"] .bswh-bg--cats     { background: linear-gradient(135deg, #10203A 0%, #1E1533 50%, #2A1A12 100%); }
[data-theme="dark"] .bswh-bg--picks    { background: linear-gradient(135deg, #2A2210 0%, #2A1810 100%); }
[data-theme="dark"] .bswh-section--tint { background: linear-gradient(135deg, #0C2238 0%, #121D3A 100%); }
[data-theme="dark"] .bswh-bg--brands   { background: linear-gradient(135deg, #141A33 0%, #0E2A2E 100%); }
[data-theme="dark"] .bswh-bg--wellness { background: linear-gradient(135deg, #1E1433 0%, #2A1220 100%); }
[data-theme="dark"] .bswh-bg--guides   { background: linear-gradient(135deg, #0E2A20 0%, #10203A 100%); }
[data-theme="dark"] .bswh-tile { background: var(--color-surface); }
[data-theme="dark"] .bswh-subcat, [data-theme="dark"] .bswh-guide, [data-theme="dark"] .bswh-brand .bswh-list { background: var(--color-surface); }
[data-theme="dark"] .bswh-trust { background: linear-gradient(135deg, #0C2238 0%, #1E1533 100%); }
[data-theme="dark"] .bswh-trust__note { background: rgba(0, 0, 0, .25); }
[data-theme="dark"] .bswh-bg--cats .bswh-head__more, [data-theme="dark"] .bswh-bg--picks .bswh-head__more, [data-theme="dark"] .bswh-section--tint .bswh-head__more, [data-theme="dark"] .bswh-bg--wellness .bswh-head__more { background: rgba(255, 255, 255, .1); }
[data-theme="dark"] .bswh-picks .bswh-card__img { background: #fff; }

/* ---- Step 3: deeper colours (owner 2026-10-19: "đậm màu hơn") ---- */
.bswh-bg--cats     { background: linear-gradient(135deg, #A9CCFF 0%, #CBA8FF 50%, #FFB98F 100%); }
.bswh-bg--picks    { background: linear-gradient(135deg, #FFD95C 0%, #FFB07A 100%); }
.bswh-bg--brands   { background: linear-gradient(135deg, #B8C3FF 0%, #9EE0EA 100%); }
.bswh-bg--wellness { background: linear-gradient(135deg, #CFA3FF 0%, #FFA3C8 100%); }
.bswh-bg--guides   { background: linear-gradient(135deg, #8FE3BD 0%, #A6C9FF 100%); }

/* Reviews: deep blue showroom */
.bswh-section--tint { background: radial-gradient(900px 360px at 85% 0%, rgba(41, 182, 246, .45), transparent 60%), linear-gradient(120deg, #0A2A5A 0%, #123F7E 55%, #1565C0 100%); }
.bswh-section--tint .bswh-head__title { color: #fff; }
.bswh-section--tint .bswh-head__sub { color: #BFDBFE; }
.bswh-section--tint .bswh-head__icon { background: linear-gradient(135deg, #22D3EE, #0EA5E9); }
.bswh-section--tint .bswh-head__title::after { background: linear-gradient(90deg, #22D3EE, #FCD34D); }
.bswh-section--tint .bswh-card { box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }

/* Stronger product stages and brand strips */
.bswh-b--apple   { --stage: #CDD1D9; }
.bswh-b--samsung { --stage: #B3C1FF; }
.bswh-b--garmin  { --stage: #A9D8F5; }
.bswh-b--fitbit  { --stage: #A3E7EA; }
.bswh-b--google  { --stage: #B3CEFB; }
.bswh-b--amazfit { --stage: #FFC09A; }
.bswh-card__body { border-top-width: 5px; }

/* Section headers on coloured backgrounds: darker text for contrast */
.bswh-bg--cats .bswh-head__sub, .bswh-bg--picks .bswh-head__sub, .bswh-bg--brands .bswh-head__sub, .bswh-bg--wellness .bswh-head__sub, .bswh-bg--guides .bswh-head__sub { color: #1F2937; }
.bswh-bg--cats .bswh-head__title, .bswh-bg--picks .bswh-head__title, .bswh-bg--brands .bswh-head__title, .bswh-bg--wellness .bswh-head__title, .bswh-bg--guides .bswh-head__title { color: #0B1B33; }
.bswh-head__title::after { width: 80px; height: 5px; }

/* Tiles: deeper tone on the image area too */
.bswh-tile__img { background: color-mix(in srgb, var(--tone) 35%, #fff); }
.bswh-subcat { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 30%, #fff) 0%, #fff 100%); }
.bswh-guide { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 35%, #fff) 0%, #fff 150px); }
.bswh-trust { background: linear-gradient(135deg, #BAE6FD 0%, #DDD6FE 100%); }

/* ---- Step 4: interactive features (owner 2026-10-19) ---- */

/* Card wrapper + save (heart) button */
.bswh-cardwrap { position: relative; height: 100%; }
.bswh-cardwrap[hidden] { display: none; }
.bswh-save { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #E11D48; font-size: 1.05rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .15s, background .15s; }
.bswh-save:hover { transform: scale(1.12); }
.bswh-save.is-on { background: #E11D48; color: #fff; }
.bswh-save.pop { animation: bswh-pop .4s ease; }
@keyframes bswh-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* 1b. Trending belt */
.bswh-belt { padding: 1.3rem 0 1.6rem; background: linear-gradient(90deg, #071F42, #0B2E5E 50%, #0F4C8E); }
.bswh-belt__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.bswh-belt__label { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: linear-gradient(90deg, #F97316, #EF4444); color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(239, 68, 68, .35); }
.bswh-belt__nav { display: flex; gap: .5rem; }
.bswh-belt__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.bswh-belt__btn:hover { background: #fff; color: #0B2E5E; }
.bswh-belt__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .3rem .1rem .5rem; }
.bswh-belt__track::-webkit-scrollbar { display: none; }
.bswh-belt__item { flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: .45rem; padding: .7rem; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); transition: transform .2s; }
.bswh-belt__item:hover { transform: translateY(-4px); }
.bswh-belt__img { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fff 0%, var(--stage, #D6EBFC) 80%); }
.bswh-belt__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; }
.bswh-belt__item:hover .bswh-belt__img img { transform: scale(1.08); }
.bswh-belt__item .bswh-pill { align-self: flex-start; }
.bswh-belt__name { font-weight: 800; font-size: .92rem; color: #0F172A; line-height: 1.3; }

/* 2b. Watch Finder */
.bswh-finder-wrap { background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 40%, #2563EB 100%); }
.bswh-finder { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; color: #fff; }
.bswh-finder__kicker { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .15); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FDE68A; }
.bswh-finder__title { margin: 0 0 1.2rem; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.15; color: #fff; }
.bswh-finder__step { margin-bottom: 1rem; }
.bswh-finder__label { display: flex; align-items: center; gap: .55rem; margin: 0 0 .55rem; font-weight: 700; color: #EDE9FE; }
.bswh-finder__label span { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #FCD34D; color: #4C1D95; font-size: .85rem; font-weight: 900; }
.bswh-finder__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.bswh-finder__opts button { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border: 2px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.bswh-finder__opts button:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.bswh-finder__opts button.is-on { background: #FCD34D; border-color: #FCD34D; color: #3B0764; box-shadow: 0 6px 16px rgba(252, 211, 77, .4); }
.bswh-finder__out { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem; border-radius: 20px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); }
.bswh-finder__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; flex: 1; min-height: 220px; text-align: center; color: #E9D5FF; }
.bswh-finder__empty .bi { font-size: 3.2rem; color: #FCD34D; animation: bswh-bob 2.4s ease-in-out infinite; }
@keyframes bswh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bswh-finder__results { display: flex; flex-direction: column; gap: .7rem; }
.bswh-finder__results[hidden], .bswh-finder__guide[hidden], .bswh-finder__empty[hidden] { display: none; }
.bswh-match { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: .9rem; align-items: center; padding: .6rem; border-radius: 16px; background: #fff; color: #0F172A; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); animation: bswh-in .35s ease both; transition: transform .15s; }
.bswh-match:nth-child(2) { animation-delay: .06s; }
.bswh-match:nth-child(3) { animation-delay: .12s; }
@keyframes bswh-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bswh-match:hover { transform: translateX(4px); }
.bswh-match__rank { position: absolute; top: -.55rem; left: .7rem; padding: .15rem .55rem; border-radius: 999px; background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #451A03; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.bswh-match__img { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fff 0%, var(--stage, #D6EBFC) 80%); }
.bswh-match__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bswh-match__body { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.bswh-match__name { font-weight: 800; line-height: 1.25; }
.bswh-match__go { font-size: .85rem; font-weight: 700; color: #6D28D9; }
.bswh-finder__none { margin: 0; padding: 1rem; border-radius: 12px; background: rgba(0, 0, 0, .15); color: #F5F3FF; }
.bswh-finder__guide { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; color: #FDE68A; font-weight: 700; }

/* Brand filter chips on the reviews grid */
.bswh-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.4rem 0 1.3rem; }
.bswh-filter button { padding: .5rem 1rem; border: 2px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.bswh-filter button:hover { background: rgba(255, 255, 255, .22); }
.bswh-filter button.is-active { background: #fff; color: #0B2E5E; border-color: #fff; }
.bswh-filter--apple.is-active   { background: #1D1D1F !important; color: #fff !important; border-color: #fff !important; }
.bswh-filter--samsung.is-active { background: #1428A0 !important; color: #fff !important; }
.bswh-filter--garmin.is-active  { background: #007CC3 !important; color: #fff !important; }
.bswh-filter--fitbit.is-active  { background: #00A0A8 !important; color: #fff !important; }
.bswh-filter--google.is-active  { background: #1A73E8 !important; color: #fff !important; }
.bswh-filter--amazfit.is-active { background: #F26B1D !important; color: #fff !important; }
.bswh-more { margin-top: 1.4rem; text-align: center; }
.bswh-more[hidden] { display: none; }
.bswh-more__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #451A03; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(245, 158, 11, .35); }
.bswh-more__btn:hover { filter: brightness(1.05); }

/* Saved articles button and panel */
.bswh-saved-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px; background: #E11D48; color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(225, 29, 72, .4); }
.bswh-saved-fab[hidden], .bswh-saved[hidden] { display: none; }
.bswh-saved-fab__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: 999px; background: #fff; color: #E11D48; font-size: .8rem; }
.bswh-saved { position: fixed; left: 1rem; bottom: 4.4rem; z-index: 91; width: min(360px, calc(100vw - 2rem)); max-height: 60vh; overflow: auto; padding: 1rem; border-radius: 18px; background: var(--color-surface, #fff); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.bswh-saved__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; color: var(--color-text); }
.bswh-saved__head .bi-heart-fill { color: #E11D48; }
.bswh-saved__close { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; }
.bswh-saved__list { list-style: none; margin: 0; padding: 0; }
.bswh-saved__list li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--color-border-subtle, #EFECE6); }
.bswh-saved__list li:first-child { border-top: 0; }
.bswh-saved__list a { display: flex; align-items: center; gap: .6rem; flex: 1; color: var(--color-text); font-weight: 600; font-size: .9rem; line-height: 1.3; }
.bswh-saved__list img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.bswh-saved__list button { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.bswh-saved__list button:hover { color: #E11D48; }
.bswh-saved__note { margin: .6rem 0 0; font-size: .78rem; color: var(--color-text-muted); }

@media (max-width: 1024px) {
    .bswh-finder { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .bswh-belt__item { flex-basis: 170px; }
    .bswh-belt__nav { display: none; }
    .bswh-finder__opts button { font-size: .85rem; padding: .5rem .8rem; }
    .bswh-match { grid-template-columns: 96px 1fr; }
    .bswh-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .bswh-filter button { flex-shrink: 0; }
}

/* ---- Step 5: tone down (owner 2026-10-19: "nhạt bớt màu, đậm quá") ---- */
.bswh-bg--cats     { background: linear-gradient(135deg, #D2E5FF 0%, #E6D6FF 50%, #FFE0CC 100%); }
.bswh-bg--picks    { background: linear-gradient(135deg, #FFF0B8 0%, #FFE0C9 100%); }
.bswh-bg--brands   { background: linear-gradient(135deg, #DDE3FF 0%, #CFF0F4 100%); }
.bswh-bg--wellness { background: linear-gradient(135deg, #E9D7FF 0%, #FFD7E8 100%); }
.bswh-bg--guides   { background: linear-gradient(135deg, #CFF3E2 0%, #D6E7FF 100%); }
.bswh-section--tint { background: radial-gradient(900px 360px at 85% 0%, rgba(125, 211, 252, .35), transparent 60%), linear-gradient(120deg, #1E4E8C 0%, #2B6CB8 55%, #3B8BDB 100%); }
.bswh-finder-wrap { background: linear-gradient(135deg, #6D4AC7 0%, #7C5AE0 45%, #4F7FE8 100%); }
.bswh-belt { background: linear-gradient(90deg, #12366B, #1A4A8A 50%, #2563A8); }
.bswh-band { background: radial-gradient(800px 300px at 10% 0%, rgba(125, 211, 252, .3), transparent 60%), linear-gradient(120deg, #143A70, #1E4E8C 60%, #2B6CB8); }
.bswh-b--apple   { --stage: #E2E4E9; }
.bswh-b--samsung { --stage: #D0D9FF; }
.bswh-b--garmin  { --stage: #CBE6F8; }
.bswh-b--fitbit  { --stage: #C6EFF0; }
.bswh-b--google  { --stage: #D0E1FD; }
.bswh-b--amazfit { --stage: #FFDCC6; }
.bswh-tile__img { background: color-mix(in srgb, var(--tone) 18%, #fff); }
.bswh-tile__body { background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 88%, #fff) 0%, var(--tone) 100%); }
.bswh-subcat { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 18%, #fff) 0%, #fff 100%); }
.bswh-guide { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 20%, #fff) 0%, #fff 150px); }
.bswh-trust { background: linear-gradient(135deg, #DCF0FD 0%, #EAE6FE 100%); }

/* ---- Step 6: lighter boxes (owner 2026-10-19: "màu từng khung nhạt bớt") ---- */
/* Category tiles: soft tint body, coloured text instead of solid fill */
.bswh-tile { background: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--tone) 10%, transparent); }
.bswh-tile__img { background: color-mix(in srgb, var(--tone) 10%, #fff); }
.bswh-tile__body { background: color-mix(in srgb, var(--tone) 12%, #fff); border-top: 3px solid color-mix(in srgb, var(--tone) 55%, #fff); }
.bswh-tile__name, .bswh-tile:hover .bswh-tile__name { color: color-mix(in srgb, var(--tone) 80%, #000); }
.bswh-tile__desc { color: #4B5563; }
.bswh-tile__img + .bswh-tile__body .bswh-tile__icon { background: var(--tone); color: #fff; border-color: #fff; }

/* Brand cards: light brand tint header with coloured name */
.bswh-brand__top { color: var(--brand); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-2, var(--brand)) 14%, #fff), color-mix(in srgb, var(--brand-2, var(--brand)) 26%, #fff)); }
.bswh-brand__count { background: #fff; color: var(--brand); }
.bswh-brand__img img { box-shadow: 0 8px 18px rgba(0, 0, 0, .12); }
.bswh-brand .bswh-list { background: #fff; }

/* Product stages behind the watches: paler */
.bswh-b--apple   { --stage: #EEF0F3; }
.bswh-b--samsung { --stage: #E5EAFF; }
.bswh-b--garmin  { --stage: #E2F1FB; }
.bswh-b--fitbit  { --stage: #DFF6F6; }
.bswh-b--google  { --stage: #E4EEFE; }
.bswh-b--amazfit { --stage: #FFEBDD; }
.bswh-card__body { border-top-width: 3px; }

/* Wellness and guide boxes: barely tinted */
.bswh-subcat { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 9%, #fff) 0%, #fff 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.bswh-subcat__name { background: color-mix(in srgb, var(--tone) 14%, #fff); color: color-mix(in srgb, var(--tone) 85%, #000); }
.bswh-guide { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 10%, #fff) 0%, #fff 140px); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.bswh-picks .bswh-card__img { background: linear-gradient(135deg, #FFFBEF, #FFF3EA); }
.bswh-picks__lead .bswh-card { border-width: 2px; border-color: #FCD34D; }

/* Dark mode keeps surfaces dark */
[data-theme="dark"] .bswh-tile, [data-theme="dark"] .bswh-tile__body { background: var(--color-surface); }
[data-theme="dark"] .bswh-tile__name { color: #fff; }
[data-theme="dark"] .bswh-tile__desc { color: var(--color-text-muted); }
[data-theme="dark"] .bswh-brand__top { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2, var(--brand))); }
[data-theme="dark"] .bswh-subcat__name { color: #fff; background: color-mix(in srgb, var(--tone) 35%, transparent); }

/* ---- Step 7: lighter overall, logo palette leads (owner 2026-10-19: "nhạt thêm, tôn tone màu logo") ----
   Logo: navy #0B2E5E, blue #1565C0, cyan #29B6F6, deep indigo #1E2A78. */
.bswh-tone--blue   { --tone: #1565C0; --tone-soft: #E8F2FC; }
.bswh-tone--violet { --tone: #1E2A78; --tone-soft: #E9EBF7; }
.bswh-tone--green  { --tone: #0284C7; --tone-soft: #E3F3FC; }
.bswh-tone--teal   { --tone: #0891B2; --tone-soft: #E2F5F9; }
.bswh-tone--orange { --tone: #0B2E5E; --tone-soft: #E7ECF3; }
.bswh-tone--pink   { --tone: #0EA5E9; --tone-soft: #E4F5FD; }
.bswh-tone--indigo { --tone: #283593; --tone-soft: #EAECF8; }
.bswh-tone--red    { --tone: #DC2626; --tone-soft: #FDECEC; } /* gifts keep their seasonal red */

/* Section backgrounds: white and the palest logo tints, alternating */
.bswh-bg--cats     { background: linear-gradient(180deg, #F3F9FE 0%, #FFFFFF 100%); }
.bswh-bg--picks    { background: #FFFFFF; }
.bswh-section--tint { background: linear-gradient(180deg, #EAF6FD 0%, #F5FAFF 100%); }
.bswh-bg--brands   { background: #FFFFFF; }
.bswh-bg--wellness { background: linear-gradient(180deg, #EEF5FC 0%, #F8FBFE 100%); }
.bswh-bg--guides   { background: #FFFFFF; }
.bswh-trust { background: linear-gradient(135deg, #EAF6FD 0%, #EEF1FA 100%); }

/* One header style everywhere: navy-to-cyan icon and bar */
.bswh-head__icon,
.bswh-bg--picks .bswh-head__icon, .bswh-bg--wellness .bswh-head__icon, .bswh-bg--guides .bswh-head__icon { background: linear-gradient(135deg, #0B2E5E, #29B6F6); }
.bswh-head__title::after,
.bswh-bg--picks .bswh-head__title::after, .bswh-bg--wellness .bswh-head__title::after, .bswh-bg--guides .bswh-head__title::after { background: linear-gradient(90deg, #0B2E5E, #29B6F6); }
.bswh-head__title { color: #0B2E5E; }
.bswh-head__sub { color: #475569; }
.bswh-head__more { background: #E6F4FD; color: #1565C0; }
.bswh-head__more:hover { background: #1565C0; color: #fff; }

/* Reviews section is light now: dark text, navy filter chips */
.bswh-section--tint .bswh-head__title { color: #0B2E5E; }
.bswh-section--tint .bswh-head__sub { color: #475569; }
.bswh-section--tint .bswh-head__icon { background: linear-gradient(135deg, #0B2E5E, #29B6F6); }
.bswh-section--tint .bswh-head__title::after { background: linear-gradient(90deg, #0B2E5E, #29B6F6); }
.bswh-section--tint .bswh-card { box-shadow: 0 6px 18px rgba(11, 46, 94, .10); }
.bswh-filter button { border: 1.5px solid #BFDDF5; background: #fff; color: #0B2E5E; }
.bswh-filter button:hover { background: #E6F4FD; }
.bswh-filter button.is-active { background: linear-gradient(135deg, #0B2E5E, #1565C0); color: #fff; border-color: transparent; }
.bswh-more__btn { background: linear-gradient(135deg, #0B2E5E, #1E88E5); color: #fff; box-shadow: 0 8px 20px rgba(21, 101, 192, .3); }

/* Product stages: near-white with a cyan hint for every brand */
.bswh-b--apple, .bswh-b--samsung, .bswh-b--garmin, .bswh-b--fitbit, .bswh-b--google, .bswh-b--amazfit { --stage: #EAF5FD; }
.bswh-card__body { border-top: 3px solid #29B6F6; }
.bswh-picks .bswh-card__body { border-top-color: #29B6F6; }
.bswh-picks__lead .bswh-card { border: 2px solid #29B6F6; }
.bswh-picks .bswh-card__img { background: #F5FAFE; }
.bswh-card__cat, .bswh-card__go { color: #1565C0; }

/* Category tiles in logo tones */
.bswh-tile__body { border-top-color: color-mix(in srgb, var(--tone) 45%, #fff); background: color-mix(in srgb, var(--tone) 7%, #fff); }
.bswh-tile__img { background: color-mix(in srgb, var(--tone) 6%, #fff); }

/* Brand cards: light header, brand name stays in its own colour */
.bswh-brand__top { background: linear-gradient(135deg, #F3F9FE, color-mix(in srgb, var(--brand-2, var(--brand)) 10%, #fff)); }

/* Dark bands in logo navy-to-cyan, a little lighter */
.bswh-belt { background: linear-gradient(90deg, #0B2E5E, #1565C0); }
.bswh-belt__label { background: linear-gradient(90deg, #29B6F6, #0EA5E9); box-shadow: 0 6px 16px rgba(41, 182, 246, .35); }
.bswh-finder-wrap { background: linear-gradient(135deg, #0B2E5E 0%, #1565C0 55%, #29B6F6 100%); }
.bswh-finder__kicker { color: #BAE6FD; }
.bswh-finder__label { color: #E0F2FE; }
.bswh-finder__label span { background: #29B6F6; color: #fff; }
.bswh-finder__opts button.is-on { background: #fff; border-color: #fff; color: #0B2E5E; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.bswh-finder__empty { color: #E0F2FE; }
.bswh-finder__empty .bi { color: #7DD3FC; }
.bswh-match__rank { background: linear-gradient(135deg, #29B6F6, #0EA5E9); color: #fff; }
.bswh-match__go { color: #1565C0; }
.bswh-finder__guide { color: #E0F2FE; }
.bswh-band { background: linear-gradient(120deg, #0B2E5E, #1565C0 70%, #1E88E5); }

/* Dark mode: keep surfaces dark */
[data-theme="dark"] .bswh-bg--cats, [data-theme="dark"] .bswh-bg--picks, [data-theme="dark"] .bswh-section--tint, [data-theme="dark"] .bswh-bg--brands, [data-theme="dark"] .bswh-bg--wellness, [data-theme="dark"] .bswh-bg--guides { background: var(--color-bg); }
[data-theme="dark"] .bswh-head__title, [data-theme="dark"] .bswh-section--tint .bswh-head__title { color: var(--color-text); }
[data-theme="dark"] .bswh-head__sub, [data-theme="dark"] .bswh-section--tint .bswh-head__sub { color: var(--color-text-muted); }
[data-theme="dark"] .bswh-filter button { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .bswh-trust { background: var(--color-surface); }

/* Browse-everything close (2026-10-27, owner: always end the homepage with a link to All Posts) */
.bswh-allposts { background: linear-gradient(120deg, var(--bswh-navy) 0%, var(--bswh-navy-2) 60%, #0F5BA8 100%); }
.bswh-allposts__in { text-align: center; padding-block: 44px; }
.bswh-allposts__in h2 { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.bswh-allposts__in p { color: #BDE7FD; margin: 0 0 20px; }
.bswh-allposts__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bswh-cyan); color: #071F42; font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 999px; text-decoration: none; }
.bswh-allposts__btn:hover { filter: brightness(1.08); }