/*
 * HealthViber shop-first layout (v3 home page brief): header, mega menu, the
 * left shopping menu, product cards and the home page sections.
 *
 * Built on theme.css's tokens and type, so the new header and home page read
 * as the same site as every page around them: the same blue, navy, hairlines,
 * radius and fonts. Only what the new layout needs is added here.
 */

:root { --v3-page:#f4f6f8; --v3-r:14px; --v3-green:#1f7a4d; --v3-red:#c4372a; }

/* ── top strip ─────────────────────────────────────────────────────────── */
.v3top { background:var(--navy-deep); color:#fff; font-size:.88rem }
.v3top__row { display:flex; justify-content:space-between; align-items:center; gap:8px 24px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px }
.v3top__sub { opacity:.85; margin-left:18px; font-weight:400 }
.v3top__r { display:flex; gap:18px; flex-wrap:wrap }
.v3top a { color:#fff }
.v3top a:hover { color:#fff; text-decoration:underline }

/* ── header ────────────────────────────────────────────────────────────── */
.v3hdr { background:#fff; border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:60 }
.v3hdr__row { display:flex; align-items:center; gap:22px; padding-top:14px; padding-bottom:14px }
.v3logo img { display:block; width:190px; height:auto }
.v3burger { display:none; background:none; border:1px solid var(--hair); border-radius:10px; width:44px; height:44px; font-size:1.3rem; color:var(--navy); cursor:pointer }
.v3search { flex:1; display:flex; min-width:0; border:2px solid var(--blue); border-radius:10px; overflow:hidden; background:#fff }
.v3search select { border:0; background:var(--sky); color:var(--navy); font-size:.9rem; padding:0 10px; max-width:160px; border-right:1px solid var(--sky-line) }
.v3search input { flex:1; min-width:0; border:0; padding:11px 14px; font-size:1rem; outline:none }
.v3search button { border:0; background:var(--blue); color:#fff; font-weight:700; padding:0 22px; cursor:pointer }
.v3search button:hover { background:var(--blue-dark) }
.v3acct { display:flex; align-items:center; gap:18px }
.v3acct__i { display:flex; flex-direction:column; line-height:1.15; color:var(--navy) }
.v3acct__i small { font-size:.75rem; color:var(--muted) }
.v3acct__i b { font-size:.95rem }
.v3cart { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair); border-radius:10px; padding:9px 14px; font-weight:700; color:var(--navy) }
.v3cart b { background:var(--coral); color:#fff; border-radius:99px; min-width:22px; height:22px; display:inline-grid; place-items:center; font-size:.78rem; padding:0 6px }

/* ── main menu ─────────────────────────────────────────────────────────── */
.v3nav { border-top:1px solid var(--hair) }
.v3nav__row { display:flex; justify-content:space-between; align-items:center; gap:18px }
.v3nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center }
.v3nav__main { gap:4px }
.v3nav__item { position:relative }
.v3nav__btn, .v3nav__deal { background:none; border:0; padding:13px 12px; font-weight:700; font-size:.95rem; color:var(--navy); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px }
.v3nav__btn::after { content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6 }
.v3nav__btn[aria-expanded="true"] { color:var(--blue) }
.v3nav__deal { color:var(--v3-red) }
.v3nav__svc { gap:18px; font-size:.9rem }
.v3nav__svc a { color:var(--navy); white-space:nowrap }
.v3nav__svc a:hover, .v3drop a:hover { color:var(--blue) }
.v3drop { display:none; position:absolute; left:0; top:100%; min-width:240px; background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); box-shadow:var(--shadow-lift); padding:14px 18px; z-index:70 }
.v3nav__btn[aria-expanded="true"] + .v3drop { display:flex; flex-direction:column; gap:2px }
.v3drop a { color:var(--navy); padding:6px 0; white-space:nowrap }
.v3drop__h { font-weight:700 }
.v3drop__g { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:8px }
.v3drop--wide { min-width:0; width:min(860px, 90vw) }
.v3nav__btn[aria-expanded="true"] + .v3drop--wide { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px 24px }
.v3drop__col { display:flex; flex-direction:column }

/* ── page frame: left menu + main column ───────────────────────────────── */
body:has(.v3shop) { background:var(--v3-page) }
.v3shop { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:24px; padding-top:24px; padding-bottom:48px; align-items:start }
.v3main { display:flex; flex-direction:column; gap:24px; min-width:0 }

.v3side { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); padding:16px; position:sticky; top:150px; max-height:calc(100vh - 170px); overflow:auto; font-size:.92rem }
.v3side__head { display:none }
.v3side__box + .v3side__box { border-top:1px solid var(--hair); margin-top:14px; padding-top:14px }
.v3side__h { font-family:var(--fb); font-size:1rem; font-weight:800; margin:0 0 8px; color:var(--navy) }
.v3side__top, .v3side__sub { display:flex; justify-content:space-between; gap:8px; color:var(--navy); padding:4px 6px; border-radius:6px }
.v3side__top { font-weight:700; margin-top:8px }
.v3side__sub { padding-left:16px }
.v3side__top small, .v3side__sub small, .v3side__chk small { color:var(--muted) }
.v3side__top:hover, .v3side__sub:hover { background:var(--sky) }
.v3side__top.is-on, .v3side__sub.is-on { background:var(--sky); color:var(--blue) }
.v3side__note { font-size:.78rem; color:var(--muted); margin:8px 0 4px }
.v3side__chk { display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer }
.v3side__chk span { flex:1 }
.v3side__chk input { width:18px; height:18px; accent-color:var(--blue) }
.v3side__help { margin-top:14px; background:var(--sky); border-radius:10px; padding:12px; font-size:.88rem }
.v3side__help p { margin:4px 0 6px }
.v3side__help a { font-weight:800 }

/* ── shared section pieces ─────────────────────────────────────────────── */
.v3sec { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); padding:24px }
.v3sec__head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px 24px; flex-wrap:wrap; margin-bottom:18px }
.v3sec__head h2 { font-size:clamp(1.5rem, 2.2vw, 2rem); margin:4px 0 6px }
.v3sec__head p { margin:0; color:var(--muted); max-width:70ch }
.v3sec__tools { display:flex; align-items:center; gap:12px }
.v3eyebrow { display:block; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue) }
.v3eyebrow--light { color:#bfe0ff }
.v3label { display:inline-block; background:var(--blue); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:4px 12px }
.v3btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px }
.v3main .btn { min-height:46px; padding:10px 22px; font-size:.98rem; white-space:nowrap }
.v3main .btn::after { display:none }
.btn--navy { background:var(--navy-deep); color:#fff }
.btn--navy:hover { background:var(--navy); color:#fff }
.btn--light { background:#fff; color:var(--navy-deep) }
.btn--outline-light { background:transparent; color:#fff; border-color:#fff }
.btn--outline-light:hover { background:#fff; color:var(--navy-deep) }
.v3more { font-weight:700; white-space:nowrap }

/* ── opening ───────────────────────────────────────────────────────────── */
.v3open { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:20px }
.v3hero { background:linear-gradient(135deg, var(--sky), #fff); border:1px solid var(--sky-line); border-radius:var(--v3-r); padding:28px; display:flex; gap:20px; align-items:center }
.v3hero__txt { flex:1; min-width:0 }
.v3hero h1 { font-size:clamp(1.9rem, 3.2vw, 2.7rem); line-height:1.12; margin:14px 0 12px }
.v3hero p { color:var(--muted); margin:0 }
.v3pricecard { flex:none; width:190px; background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); padding:14px; text-align:center; color:var(--navy) }
.v3pricecard img { width:120px; height:120px; object-fit:contain; display:block; margin:0 auto 6px }
.v3pricecard__n { display:block; font-family:var(--fd); font-size:1.8rem; font-weight:700; color:var(--blue) }
.v3pricecard__n small { font-size:.85rem; font-family:var(--fb); color:var(--navy) }
.v3pricecard__m { display:block; font-size:.8rem; color:var(--muted) }
.v3open__side { display:flex; flex-direction:column; gap:14px }
.v3offer { flex:1; display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); padding:16px; color:var(--navy) }
.v3offer--plan { background:#fff8e6; border-color:#f2d58f }
.v3offer img { flex:none; width:72px; height:72px; object-fit:contain }
.v3offer b { display:block; font-size:1.02rem; line-height:1.25; margin:2px 0 }
.v3offer small { color:var(--muted); font-size:.85rem }
.v3offer__k { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9a6a00 }
.v3offer__k--green { color:var(--v3-green) }

/* ── category tiles ────────────────────────────────────────────────────── */
.v3tiles { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px }
.v3tile { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); padding:12px; text-align:center; color:var(--navy); display:flex; flex-direction:column; gap:4px }
.v3tile:hover { border-color:var(--blue) }
.v3tile__img { aspect-ratio:4/3; background:var(--sky); border-radius:10px; overflow:hidden; margin-bottom:6px }
.v3tile__img img { width:100%; height:100%; object-fit:cover; display:block }
.v3tile small { color:var(--muted) }

/* ── bundles ───────────────────────────────────────────────────────────── */
.v3bundles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
.v3bundle { position:relative; border:1px solid var(--hair); border-radius:var(--v3-r); padding:16px; display:flex; flex-direction:column; gap:6px }
.v3bundle--top { border:2px solid var(--navy-deep) }
.v3bundle__badge { position:absolute; top:-12px; left:16px; background:var(--navy-deep); color:#fff; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-radius:99px; padding:3px 10px; white-space:nowrap }
.v3bundle__img { aspect-ratio:16/10; background:var(--sky); border-radius:10px; overflow:hidden; margin-bottom:6px }
.v3bundle__img img { width:100%; height:100%; object-fit:cover; display:block }
.v3bundle h3 { font-family:var(--fb); font-size:1.08rem; font-weight:800; margin:0 }
.v3bundle h3 a { color:var(--navy) }
.v3bundle__price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.v3bundle__price b { font-size:1.55rem; color:var(--navy) }
.v3save { background:#e6f4ec; color:var(--v3-green); font-size:.75rem; font-weight:800; border-radius:6px; padding:2px 7px; white-space:nowrap }
.v3bundle__note { font-size:.86rem; color:var(--muted); margin:0 }
.v3bundle__lines { margin:4px 0; padding-left:18px; font-size:.88rem }
.v3bundle__sum { background:var(--mist); border-radius:8px; padding:6px 10px; font-size:.82rem; color:var(--muted); margin:auto 0 8px }

.v3sums { margin-top:22px; border-top:1px solid var(--hair); padding-top:18px }
.v3sums__head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap }
.v3sums__head h3 { font-family:var(--fb); font-size:1.15rem; font-weight:800; margin:4px 0 0 }
.v3sums__btn { border:1px solid var(--hair); background:#fff; border-radius:99px; padding:8px 16px; font-weight:700; color:var(--navy); cursor:pointer; white-space:nowrap }
.v3steps { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; counter-reset:v3s }
.v3steps li { background:var(--mist); border-radius:10px; padding:12px 14px; font-size:.88rem; display:flex; flex-direction:column; gap:4px; counter-increment:v3s }
.v3steps li::before { content:counter(v3s); font-weight:800; color:var(--blue) }
.v3steps span { color:var(--muted) }
.v3sums__more h4 { font-family:var(--fb); font-size:1rem; margin:18px 0 8px }
.v3tablewrap { overflow-x:auto; border:1px solid var(--hair); border-radius:10px }
.v3table { width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px }
.v3table th, .v3table td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--hair); vertical-align:top }
.v3table thead th { background:var(--mist); font-weight:800 }
.v3table tbody tr:last-child > * { border-bottom:0 }
.v3notes { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-top:14px }
.v3notes p { border:1px solid var(--hair); border-radius:10px; padding:12px; margin:0; font-size:.88rem }
.v3band { margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; background:var(--sky); border:1px solid var(--sky-line); border-radius:var(--v3-r); padding:16px 18px }
.v3band p { margin:0; flex:1; min-width:240px }

/* ── product grid and cards ────────────────────────────────────────────── */
.v3grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px }
.v3grid__cell { display:flex; flex-direction:column; min-width:0 }
.v3grid__cell[hidden] { display:none }
.v3card { flex:1; display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:var(--v3-r); overflow:hidden; background:#fff }
.v3card__img { position:relative; aspect-ratio:1; background:var(--mist); display:block }
.v3card__img img { width:100%; height:100%; object-fit:contain; display:block }
.v3badge { position:absolute; top:10px; left:10px; z-index:1; background:var(--navy-deep); color:#fff; font-size:.72rem; font-weight:800; border-radius:99px; padding:3px 10px }
.v3badge--new { background:var(--v3-green) }
.v3card__b { padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1 }
.v3card__k { font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted) }
.v3card__t { font-family:var(--fb); font-size:.98rem; font-weight:800; line-height:1.3; margin:0 }
.v3card__t a { color:var(--navy) }
.v3card__s { font-size:.84rem; color:var(--muted); margin:0 }
.v3card__p { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px }
.v3price { font-size:1.25rem; font-weight:800; color:var(--navy) }
.v3unit { background:var(--sky); color:var(--blue); font-size:.78rem; font-weight:800; border-radius:6px; padding:2px 7px; white-space:nowrap }
.v3card__sum { font-size:.78rem; color:var(--muted); margin:0 }
.v3card__cta { margin-top:auto; padding-top:10px }
.v3strength { font-size:.8rem; color:var(--muted); margin:0 0 6px }
.v3chips { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 14px }
.v3chip { display:inline-flex; align-items:center; gap:6px; background:var(--sky); color:var(--navy); border:1px solid var(--sky-line); border-radius:99px; padding:5px 12px; font-size:.86rem; cursor:pointer }
.v3chip::after { content:'×'; font-weight:800 }
.v3chip--clear { background:#fff; border-color:var(--hair) }
.v3chip--clear::after { content:'' }
.v3count { color:var(--muted); font-size:.88rem; white-space:nowrap }
.v3sort select { border:1px solid var(--hair); border-radius:8px; padding:7px 10px; background:#fff }
.v3filterbtn { display:none; border:1px solid var(--hair); background:#fff; border-radius:8px; padding:8px 14px; font-weight:700; color:var(--navy); cursor:pointer }
.v3empty { grid-column:1 / -1; text-align:center; padding:30px; display:flex; flex-direction:column; align-items:center; gap:12px }
.v3tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px }
.v3tab { border:1px solid var(--hair); background:#fff; border-radius:99px; padding:7px 16px; font-weight:700; color:var(--navy); cursor:pointer; white-space:nowrap }
.v3tab[aria-pressed="true"] { background:var(--navy-deep); border-color:var(--navy-deep); color:#fff }

/* ── bands ─────────────────────────────────────────────────────────────── */
.v3newband { background:var(--navy-deep); color:#fff; border-radius:var(--v3-r); padding:28px 32px; display:flex; gap:24px; align-items:center }
.v3newband__txt { flex:1 }
.v3newband h2 { color:#fff; font-size:clamp(1.5rem, 2.4vw, 2rem); margin:6px 0 10px }
.v3newband p { margin:0; opacity:.92; max-width:56ch }
.v3newband__img { flex:none; width:280px; max-width:40%; border-radius:12px }
.v3how { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px }
.v3how > div { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); padding:18px }
.v3how b { display:block; margin-bottom:6px }
.v3how p { margin:0; color:var(--muted) }
.v3more-band { background:var(--sky); border:1px solid var(--sky-line); border-radius:var(--v3-r); padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap }
.v3more-band__links { display:flex; gap:12px; flex-wrap:wrap }
.v3more-band__links a { background:#fff; border:1px solid var(--sky-line); border-radius:10px; padding:9px 16px; font-weight:700; white-space:nowrap }

/* ── smaller screens ───────────────────────────────────────────────────── */
@media (max-width:1300px) {
  .v3grid { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .v3top__sub { display:none }
}
@media (max-width:1100px) {
  .v3burger { display:inline-grid; place-items:center }
  .v3acct__i { display:none }
  .v3hdr__row { flex-wrap:wrap; gap:12px }
  .v3search { order:3; flex-basis:100% }
  .v3nav { display:none; border-top:1px solid var(--hair) }
  .v3nav.is-open { display:block; max-height:calc(100vh - 140px); overflow:auto }
  .v3nav__row, .v3nav ul { flex-direction:column; align-items:stretch }
  .v3nav__svc { gap:0; border-top:1px solid var(--hair); padding:8px 0 }
  .v3nav__svc a { display:block; padding:10px 12px }
  .v3nav__btn { width:100%; justify-content:space-between; min-height:44px }
  .v3drop, .v3drop--wide { position:static; box-shadow:none; border:0; width:auto; padding:0 12px 10px 24px }
  .v3nav__btn[aria-expanded="true"] + .v3drop--wide { grid-template-columns:1fr 1fr }

  .v3shop { grid-template-columns:minmax(0, 1fr) }
  .v3side { display:none }
  .v3side.is-open { display:block; position:fixed; inset:0; z-index:90; max-height:none; border-radius:0; top:0 }
  .v3side__head { display:flex; justify-content:space-between; align-items:center; position:sticky; top:-16px; background:#fff; padding:6px 0 10px; margin-bottom:6px; border-bottom:1px solid var(--hair) }
  .v3side__close { border:0; background:var(--blue); color:#fff; font-weight:700; border-radius:8px; padding:10px 16px; min-height:44px }
  .v3filterbtn { display:inline-block; min-height:44px }

  .v3open { grid-template-columns:minmax(0, 1fr) }
  .v3tiles { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .v3bundles { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:700px) {
  .v3top__row { justify-content:center; font-size:.8rem }
  .v3top__r { gap:12px }
  .v3logo img { width:150px }
  .v3search select { display:none }
  .v3hero { flex-direction:column; align-items:stretch; padding:20px }
  .v3pricecard { width:auto; display:flex; align-items:center; gap:12px; text-align:left }
  .v3pricecard img { width:64px; height:64px; margin:0 }
  .v3btns .btn { flex:1 1 100% }
  .v3tiles { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px }
  .v3tile { flex:0 0 42%; scroll-snap-align:start }
  .v3bundles { grid-template-columns:minmax(0, 1fr) }
  .v3bundle--plan-first { order:-1 }
  .v3steps { grid-template-columns:minmax(0, 1fr) }
  .v3grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
  .v3card__b { padding:10px }
  .v3main .v3card .btn { padding:8px 10px; font-size:.88rem; white-space:normal }
  .v3sec { padding:16px }
  .v3newband { flex-direction:column; padding:22px }
  .v3newband__img { max-width:100%; width:100% }
  .v3how { grid-template-columns:minmax(0, 1fr) }
  .v3sec__tools { width:100%; justify-content:space-between }
}

/* The menu icon is drawn, not a glyph: the site's fonts carry no ☰. */
.v3burger__bars, .v3burger__bars::before, .v3burger__bars::after { display:block; width:20px; height:2px; background:currentColor; border-radius:2px; position:relative }
.v3burger__bars::before, .v3burger__bars::after { content:''; position:absolute; left:0 }
.v3burger__bars::before { top:-6px }
.v3burger__bars::after { top:6px }
.v3pricecard__n { white-space:nowrap }
@media (max-width:700px) {
  .v3pricecard__n { font-size:1.5rem }
  .v3pricecard__m { margin-left:auto }
}
.v3firm { background:#fff8e6; border:1px solid #f2d58f; border-radius:10px; padding:10px 14px; font-size:.9rem; margin:16px 0 }

/* Without JavaScript, a pointer or the keyboard still opens a menu on a wide screen. */
@media (hover:hover) and (min-width:1101px) {
  .v3nav__item:hover > .v3drop, .v3nav__item:focus-within > .v3drop { display:flex; flex-direction:column; gap:2px }
  .v3nav__item:hover > .v3drop--wide, .v3nav__item:focus-within > .v3drop--wide { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px 24px }
}