/* Peptides Ho Chi Minh (Saigon), v2 theme (2026-10-11): the approved v2 mockup's styles.css, verbatim, followed by
   the additions the real pages need (utility pages, product page sections, tables, photo slots, the 404, and the
   no-JavaScript fallbacks). Navy page, white text, coral buttons, concrete lines; Anton for headings, Schibsted
   Grotesk for body. Static page: only plain hover states. No tinted callout with a thick left border anywhere. */

:root {
  --navy: #10182B;
  --navy-deep: #0B1120;
  --white: #FFFFFF;
  --text: #F1EFEA;
  --muted: #AEB4C0;
  --coral: #FF5A3C;
  --coral-hover: #FF7458;
  --concrete: #D9D6CF;
  --line: rgba(217, 214, 207, .24);
  --hover: rgba(255, 255, 255, .08);
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pad: 40px;
  --tb-h: 40px;
  --space: 128px;
}
@media (max-width: 1099px) { :root { --pad: 28px; --space: 100px; } }
@media (max-width: 759px) { :root { --pad: 16px; --space: 76px; --tb-h: 36px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.locked { overflow: hidden; }
body { margin: 0; background: var(--navy); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
.k45ea93 { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--pad); }
.k0443d6 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.k41f601 { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 6px; background: var(--white); color: var(--navy); font-weight: 600; text-decoration: none; }
.k41f601:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* 1. Top bar: one line of true facts. One copy in the HTML, after <main> (copy fixes 2026-10-12); placed at the top
   of the page here, over the room the body keeps free for it. */
body { padding-top: var(--tb-h); }
.k39707c { position: absolute; top: 0; left: 0; right: 0; height: var(--tb-h); overflow: hidden; background: var(--navy-deep);
  color: var(--concrete); font-size: 13.5px; line-height: 1.3; }
.k4b59c2 { display: flex; align-items: center; justify-content: center; height: var(--tb-h); white-space: nowrap; }
.k589ea4 + .k589ea4::before { content: "\00B7"; margin-inline: 16px; color: var(--muted); }

/* 2. Header: menu left, logo centred, cart right */
.ke6d6ed { border-bottom: 1px solid var(--line); }
.k548c1f { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 88px; }
.k548c1f > :first-child { justify-self: start; }
.k548c1f > :last-child { justify-self: end; }
.kc043f8 { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; margin-inline: -11px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--white); cursor: pointer; }
.kc043f8:hover { background: var(--hover); }
.kc043f8 svg { width: 26px; height: 26px; }
.ke00980 { position: absolute; top: 3px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--white); color: var(--navy); font-size: 11.5px; font-weight: 700; line-height: 19px; text-align: center; }
.kbb9b77 { position: relative; isolation: isolate; display: inline-flex; flex-direction: column; align-items: center; padding: 4px 10px; line-height: 1; text-decoration: none; }
.k85c4a3 { position: absolute; left: 50%; top: 50%; z-index: -1; width: auto; height: 68px; transform: translate(-50%, -54%); }
.k156794 { font-family: var(--display); font-size: 12px; letter-spacing: .42em; padding-left: .42em; color: var(--coral); }
.k27efad { margin-top: 4px; font-family: var(--display); font-size: 28px; letter-spacing: .01em; color: var(--white); }

/* Buttons: coral is the one accent */
.kb8ad29 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--coral); color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.kb8ad29:hover { background: var(--coral-hover); }
.kb4f92b { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px var(--concrete); }
.kb4f92b:hover { background: var(--hover); }
.kbf85be { width: 100%; }
.k65c287 { align-self: flex-start; min-width: 96px; min-height: 42px; padding: 0 22px; font-size: 15px; }
.kb8ad29.is-disabled { background: rgba(217, 214, 207, .16); color: var(--muted); cursor: not-allowed; }

/* 3. Hero: text only */
.kcd77c9 { padding-block: 112px 92px; }
.k32812d { display: flex; align-items: center; justify-content: space-between; gap: 56px; }
.kf9c99a { max-width: 1000px; }
.kcd77c9 h1 { font-family: var(--display); font-size: clamp(42px, 5vw, 72px); line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; color: var(--white); }
.kdaf312 { max-width: 600px; margin-top: 22px; font-size: 19px; line-height: 1.55; }
.kdd08bf { flex: none; min-width: 170px; }
/* HCM-0 home hero photo (hero brief 2026-10-11, mockups-v3/hcm option a): the photo fills the hero behind the text,
   under the mockup's navy scrim (left to right, plus a fade into the page navy at the bottom); caption bottom right. */
.k122d7f { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 620px; }
.k122d7f .k32812d { position: relative; z-index: 1; width: 100%; }
.kf1ed6d { position: absolute; inset: 0; z-index: -1; margin: 0; }
.kf1ed6d img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.kf1ed6d::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16, 24, 43, .94) 0%, rgba(16, 24, 43, .82) 38%, rgba(16, 24, 43, .42) 72%, rgba(16, 24, 43, .06) 100%),
    linear-gradient(0deg, rgba(16, 24, 43, 1) 0%, rgba(16, 24, 43, 0) 30%); }
.kf1ed6d figcaption { position: absolute; right: 24px; bottom: 14px; z-index: 1; margin: 0; font-size: 12px; line-height: 1.4;
  color: var(--concrete); }
@media (max-width: 1279px) {
  /* 760 to 1279 px: the text runs further across the photo, so the scrim stays deeper further right (paragraph kept
     at 4.5:1 or more, measured by work/photo-slots/hero_contrast.py); phones override this below */
  .kf1ed6d::after { background: linear-gradient(90deg, rgba(16, 24, 43, .94) 0%, rgba(16, 24, 43, .88) 45%, rgba(16, 24, 43, .72) 75%, rgba(16, 24, 43, .45) 100%),
      linear-gradient(0deg, rgba(16, 24, 43, 1) 0%, rgba(16, 24, 43, 0) 30%); }
}

/* 4. Category tiles */
.kfa792b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kf2d726 { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--navy-deep); color: var(--white); text-decoration: none; }
.k1b3e89 { display: block; padding: 17px 20px 15px; font-family: var(--display); font-size: 21px; line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; }
.kb6b7d4 { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.kb6b7d4 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.k57d75d { position: absolute; left: 18px; bottom: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--navy); }
.k57d75d svg { width: 20px; height: 20px; }
.kf2d726:hover .k57d75d { background: var(--coral); }
.kfeafa5 { white-space: nowrap; }

/* Sections and headings */
.k6761ec { padding-top: var(--space); }
.k61dc1e { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-bottom: 36px; }
.k31ecc1 { margin-bottom: 18px; }
.k61dc1e h2, .k7e94fe { font-family: var(--display); font-size: clamp(34px, 3.4vw, 50px); line-height: 1.04; letter-spacing: .005em; text-transform: uppercase; color: var(--white); }
.k2c6962 { display: grid; gap: 2px; text-align: right; }
.k4f0335 { font-size: 15px; color: var(--muted); }

/* Prices: VND first, the store's dollar price beside it and smaller */
.k4b1551, .k808965 { white-space: nowrap; }
.k808965 { font-size: .8em; font-weight: 400; color: var(--muted); }

/* 5 and 6. Product grids, uniform cards */
.kb81da1 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 24px; }
.k80d4ff { display: flex; flex-direction: column; min-width: 0; }
.k10272f { display: block; aspect-ratio: 600 / 745; overflow: hidden; border-radius: 10px; background: var(--navy-deep); }
.k10272f img { width: 100%; height: 100%; object-fit: cover; }
.k812303 { margin-top: 14px; font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--white); }
.k812303 a { text-decoration: none; }
.k812303 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.k028f1b { margin-top: 6px; font-size: 15.5px; line-height: 1.4; color: var(--white); }
.k47150c { margin-top: 2px; font-size: 14px; color: var(--muted); }
.ke1eaa2 { margin-top: 2px; font-size: 14px; color: var(--concrete); }
.k80d4ff > p:last-of-type { margin-bottom: 16px; }
.k80d4ff .k65c287 { margin-top: auto; }

.ke4ea39 { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--line); }
.keab9ea { position: relative; padding: 14px 0 15px; border: 0; background: none; color: var(--muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.keab9ea:hover, .keab9ea[aria-pressed="true"] { color: var(--white); }
.keab9ea[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--white); }
.kf47dee { display: none; }
.kf47dee select { width: 100%; height: 52px; padding: 0 46px 0 16px; border: 1px solid var(--concrete); border-radius: 12px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; color: var(--white); font-size: 16px; -webkit-appearance: none; appearance: none; }
.kbe8826 { margin: 18px 0 34px; font-size: 15px; color: var(--muted); }

/* 7. About this store, questions */
.k26d2a2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding-top: 56px; border-top: 1px solid var(--line); }
.k7e94fe { font-size: clamp(30px, 2.8vw, 42px); }
.k25dbfb { max-width: 70ch; }
.k25dbfb p + p { margin-top: 16px; }
.k25dbfb h3 { margin: 34px 0 8px; font-family: var(--body); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--white); }
.k25dbfb b { color: var(--white); }
.k315db6 { max-width: 760px; }
.k35751c { font-size: 18px; line-height: 1.65; }
.k8d9c14 { margin: 48px 0 6px; font-family: var(--body); font-size: 18px; font-weight: 700; color: var(--white); }
.k093c64 { border-top: 1px solid var(--line); }
.k6cdafc { border-bottom: 1px solid var(--line); }
.k6cdafc summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 17.5px; font-weight: 600; line-height: 1.4; color: var(--white); }
.k6cdafc summary::-webkit-details-marker { display: none; }
.k6cdafc summary:hover .kce0624 { text-decoration: underline; text-underline-offset: 3px; }
.k502d27 { position: relative; flex: none; width: 18px; height: 18px; }
.k502d27::before, .k502d27::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.k502d27::after { transform: rotate(90deg); }
.k6cdafc[open] .k502d27 { transform: rotate(45deg); }
.k36f673 { max-width: 68ch; padding: 0 42px 24px 0; }
.k36f673 a { color: var(--white); text-underline-offset: 3px; }

/* Footer */
.kcc6ce7 { margin-top: var(--space); border-top: 1px solid var(--line); }
.k55168b { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 56px; padding-block: 56px 44px; }
.k4bbc6f img { width: 104px; }
.kc2ecda { max-width: 42ch; padding-top: 6px; }
.k376799 { display: grid; gap: 10px; padding-top: 6px; }
.k376799 a { text-decoration: none; }
.k376799 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kdd8f26 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-block: 22px 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* Drawers: menu from the left, cart from the right. They appear without motion. */
.kf87c7d { position: fixed; inset: 0; z-index: 50; background: rgba(4, 7, 15, .64); }
.k3be3bb { position: fixed; top: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; width: min(440px, calc(100vw - 44px)); background: var(--navy); }
.kbedb15 { right: 0; border-left: 1px solid var(--line); }
.kb85100 { left: 0; border-right: 1px solid var(--line); }
.kf8a0b3 { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.kf8a0b3 .kc043f8 { margin-right: -11px; }
.k3a73f4 { font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--white); }
.k1dfe8d { flex: 1; overflow-y: auto; padding: 4px 24px 16px; }
.kdf7bdb { display: grid; gap: 14px; padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.k1df593 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.kd111c1 { text-align: right; }
.k1df593 strong { font-size: 21px; color: var(--white); white-space: nowrap; }
.k1df593 .k808965 { font-size: 15px; }
.kb17fef { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.k3681bf { padding: 26px 0 6px; }
.k3681bf + a { display: inline-block; margin-top: 8px; color: var(--white); text-underline-offset: 3px; }
.kcdc7b4 { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.kbd282f { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.k50dcb4 { font-weight: 600; color: var(--white); }
.k9d247e { font-size: 14px; color: var(--muted); }
.kf6f149 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.k3ff6a0 { font-weight: 600; color: var(--white); text-align: right; }
.k5d32c6 { padding: 6px 0; border: 0; background: none; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.k5d32c6:hover { color: var(--white); }
.k5ca319 { display: grid; padding: 8px 24px; }
.k5ca319 a { padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 30px; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: var(--white); text-decoration: none; }
.k5ca319 a:hover { color: var(--concrete); }
.k242309 { padding: 24px; }

/* Quantity stepper */
.k70d9e3 { display: inline-flex; align-items: center; height: 54px; border: 1px solid var(--concrete); border-radius: 999px; }
.k70d9e3 button { display: grid; place-items: center; width: 46px; height: 100%; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--white); cursor: pointer; }
.k70d9e3 button:hover { background: var(--hover); }
.k70d9e3 svg { width: 16px; height: 16px; }
.k70d9e3 input { width: 34px; padding: 0; border: 0; background: none; color: var(--white); font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.k70d9e3 input::-webkit-inner-spin-button, .k70d9e3 input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.k30e156 { height: 38px; }
.k30e156 button { width: 36px; }
.k30e156 span { min-width: 26px; font-weight: 600; text-align: center; color: var(--white); }

/* Product page: image left, buy box right */
.kff67a0 { padding-top: 22px; font-size: 14px; color: var(--muted); }
.kff67a0 a { text-decoration: none; }
.kff67a0 a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.k41a53a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 64px; padding-top: 20px; }
.kc393da { overflow: hidden; border-radius: 14px; background: var(--navy-deep); }
.kc393da img { width: 100%; aspect-ratio: 1000 / 1241; object-fit: cover; }
.kb303cd { max-width: 540px; padding-top: 6px; }
.kb303cd h1 { font-family: var(--display); font-size: clamp(46px, 4.8vw, 70px); line-height: 1; letter-spacing: .005em; text-transform: uppercase; color: var(--white); }
.k88b5bd { display: block; margin-top: 10px; font-family: var(--body); font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--concrete); }
.k96861f { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 24px; }
.k96861f strong { font-size: 30px; font-weight: 700; color: var(--white); white-space: nowrap; }
.k96861f .k808965 { font-size: 17px; }
.ke33517 { margin-top: 2px; font-size: 15px; color: var(--muted); }
.k60ef3f { margin-top: 8px; font-size: 15px; }
.k62fbfa { margin: 26px 0 0; padding: 0; border: 0; }
.k62fbfa legend { margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 600; color: var(--white); }
.k65da6b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k46e9c3 { position: relative; display: block; cursor: pointer; }
.k46e9c3 input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kab2f5e { display: grid; gap: 1px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; }
.k46e9c3:hover .kab2f5e { border-color: var(--concrete); }
.k46e9c3 input:checked + .kab2f5e { border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.k46e9c3 input:focus-visible + .kab2f5e { outline: 2px solid var(--white); outline-offset: 3px; }
.kb21edd { font-weight: 700; color: var(--white); }
.k02facf { font-size: 15px; line-height: 1.45; }
.k3bf934 { font-size: 14px; color: var(--muted); }
.k565498 { display: flex; gap: 12px; margin-top: 22px; }
.k789a8c { flex: 1; }
.k7aab7b { margin-top: 12px; }
.kb303cd .kb17fef { margin-top: 16px; }
.k3d52cb { padding-top: var(--space); }
.k3d52cb .k26d2a2 { padding-block: 52px 56px; }
.ka8b3d7 { margin-top: 26px; font-size: 13.5px; font-style: italic; line-height: 1.6; color: var(--muted); }
.k25dbfb p.sources + p, .k25dbfb p + p.sources { margin-top: 26px; }
.ka8b3d7 a { color: var(--muted); text-underline-offset: 2px; }
.ka8b3d7 a:hover { color: var(--white); }
.k51fa61 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--navy-deep); }
.kcd62fd { flex: 1; min-width: 0; }
.k166e7d { font-size: 15px; font-weight: 700; color: var(--white); }
.kfac677 { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.k51fa61 .kb8ad29 { min-height: 48px; padding: 0 22px; }

/* Wide tablet and small laptop */
@media (max-width: 1099px) {
  .kb81da1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ke4ea39 { display: none; }
  .kf47dee { display: block; max-width: 420px; }
  .k1b3e89 { font-size: 18px; }
}
@media (max-width: 899px) {
  .k26d2a2 { grid-template-columns: 1fr; gap: 18px; }
  .k55168b { grid-template-columns: auto minmax(0, 1fr); }
  .k376799 { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .k51fa61 { display: none !important; }
}

/* Phones */
@media (max-width: 759px) {
  body { font-size: 16px; }
  .k39707c { font-size: 11.5px; }
  .k589ea4 + .k589ea4::before { margin-inline: 6px; }
  .kc45be4 { display: none; }
  .k548c1f { min-height: 66px; }
  .k85c4a3 { height: 54px; }
  .k156794 { font-size: 10px; }
  .k27efad { margin-top: 3px; font-size: 22px; }
  .kcd77c9 { padding-block: 52px 44px; }
  .k32812d { flex-direction: column; align-items: stretch; gap: 26px; }
  .kdaf312 { margin-top: 16px; font-size: 17px; }
  /* HCM-0 on phones: the photo sits as a band above the text (screenshots 2026-10-11: behind the full-width text the
     scrim it needed left the skyline unreadable). The figure stays after the text in the HTML; only the order moves. */
  .k122d7f { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 0; }
  .kf1ed6d { position: relative; inset: auto; z-index: 0; order: -1; height: 230px; margin-bottom: 30px; }
  .kf1ed6d img { object-position: 50% 62%; }
  .kf1ed6d::after { background: linear-gradient(0deg, rgba(16, 24, 43, 1) 0%, rgba(16, 24, 43, .55) 22%, rgba(16, 24, 43, 0) 48%); }
  .kf1ed6d figcaption { left: auto; right: 16px; bottom: 6px; text-align: right; font-size: 12px; }
  .kfa792b { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kf2d726 { border-radius: 12px; }
  .k1b3e89 { min-height: 58px; padding: 12px 12px 10px; font-size: 16px; }
  .k57d75d { left: 10px; bottom: 10px; width: 32px; height: 32px; }
  .k57d75d svg { width: 16px; height: 16px; }
  .k61dc1e { margin-bottom: 24px; }
  .kb81da1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .k812303 { font-size: 15px; }
  .k028f1b { font-size: 15px; }
  .k47150c, .ke1eaa2 { font-size: 13px; }
  .k028f1b .k808965 { display: block; }
  .k65c287 { align-self: stretch; }
  .kf47dee { max-width: none; }
  .kbe8826 { margin: 14px 0 26px; font-size: 14px; }
  .k26d2a2 { padding-top: 40px; }
  .k35751c { font-size: 17px; }
  .k8d9c14 { margin-top: 36px; }
  .k6cdafc summary { padding: 18px 0; font-size: 16.5px; }
  .k36f673 { padding-right: 0; }
  .k2c6962 { text-align: left; }
  .k55168b { grid-template-columns: 1fr; gap: 24px; padding-block: 44px 32px; }
  .k4bbc6f img { width: 92px; }
  .kdd8f26 { flex-direction: column; }
  .kf8a0b3, .k1dfe8d, .kdf7bdb { padding-inline: 18px; }
  .k5ca319 { padding-inline: 18px; }
  .k242309 { padding: 20px 18px; }
  .k41a53a { grid-template-columns: 1fr; gap: 26px; padding-top: 14px; }
  .kc393da img { aspect-ratio: 1 / 1; }
  .kb303cd { max-width: none; padding-top: 0; }
  .kb303cd h1 { font-size: 46px; }
  .k96861f strong { font-size: 26px; }
  .kab2f5e { padding: 12px 14px; }
  .k565498 .k70d9e3 { flex: none; }
  .k3d52cb .k26d2a2 { padding-block: 38px 42px; }
  .kb20790 { padding-bottom: 76px; }
}


/* ======================================================================================================
   v2 BUILD ADDITIONS (2026-10-11). Everything above is the approved mockup's CSS, unchanged except one class
   name: .line-top is .kbd282f here, because the store firewall reads cart.js and "top" is a banned word.
   ====================================================================================================== */

/* Header without JavaScript: the menu and cart buttons stay hidden until the script runs, so the logo and the cart
   keep their own grid columns and the logo stays centred. */
.k548c1f .kbb9b77 { grid-column: 2; }
.k548c1f .k5b650b { grid-column: 3; }
.k376799 { grid-template-columns: repeat(2, auto); column-gap: 40px; align-content: start; }
.k62d528 { color: var(--muted); }
.kdd8f26 a { color: var(--muted); text-underline-offset: 3px; }
.kdd8f26 a:hover { color: var(--white); }

/* Breadcrumbs sit between the header and <main> (scanners read <main> as the page) */
.kff67a0 a { color: var(--muted); }
.kff67a0 [aria-current] { color: var(--concrete); }

/* Home: the hero sentence, the about text, notes */
.k315db6 p + p { margin-top: 18px; }
.k4b5d29 { margin: 40px 0 10px; font-family: var(--body); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--white); }
.k315db6 .k992f30 { margin-top: 16px; }
.k315db6 .k992f30 + p { margin-top: 16px; }
.k315db6 .k98f31d + .k4b5d29, .k315db6 .k992f30 + .k4b5d29 { margin-top: 40px; }
.k315db6 p b { color: var(--white); }
.k315db6 a, .kdaf312 a, .k4f0335 a { color: var(--white); text-underline-offset: 3px; }
.k8b9eeb { scroll-margin-top: 24px; }
.k2a4583 { font-size: .88em; color: var(--muted); }

/* Product page. The answer-first sentence sits under the H1, so the buy box is a little tighter than the mockup's
   to keep Add to cart and Ask on WhatsApp above a 900 px desktop fold. */
.k26d2a2 > * { min-width: 0; }
.kff67a0 { padding-top: 14px; }
.k41a53a { padding-top: 10px; }
.kb303cd { max-width: 600px; }
.kb303cd h1 { font-size: clamp(44px, 4vw, 58px); }
.k88b5bd { margin-top: 6px; }
.kb52a59 { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--text); }
.k199ffe { font-size: 14px; line-height: 1.42; }
.kb52a59 + div .k96861f { margin-top: 14px; }
.k60ef3f { margin-top: 6px; }
.k62fbfa { margin-top: 16px; }
.k62fbfa legend { margin-bottom: 8px; }
.k65da6b { gap: 8px; }
.kab2f5e { padding-block: 8px; }
.k565498 { margin-top: 14px; }
.k565498 .k70d9e3, .k565498 .k789a8c, .k7aab7b { min-height: 50px; height: 50px; }
.k7aab7b { margin-top: 8px; }
.kb303cd .kb17fef { margin-top: 12px; }
.k25dbfb .k6cb103 { padding-left: 0; }
.k98f31d { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.k98f31d b { color: var(--white); }
.k3d52cb .k7e94fe { font-size: clamp(26px, 2.3vw, 36px); line-height: 1.08; overflow-wrap: break-word; }
.k7e94fe .k48c57d { display: block; margin-top: 10px; font-family: var(--body); font-size: 15px; letter-spacing: 0;
  text-transform: none; color: var(--muted); }
.k6cb103 { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.k6cb103 strong { color: var(--white); }
.k25dbfb .k093c64 { margin-top: 4px; }
.k25dbfb .kac3d12 { margin-top: 26px; font-size: 14px; color: var(--muted); }
.kbe931e a, .k25dbfb a { color: var(--white); text-underline-offset: 3px; }

/* Utility pages: the mockup's header, footer, type and spacing with a plain readable body */
.k0d2bb1 { padding-top: 56px; }
.k0d2bb1 h1 { max-width: 24ch; font-family: var(--display); font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04;
  letter-spacing: .005em; text-transform: uppercase; color: var(--white); }
.kd27ae4 { max-width: 66ch; margin-top: 22px; font-size: 19px; line-height: 1.6; }
.k0d2bb1 .kac3d12 { margin-top: 12px; font-size: 14px; color: var(--muted); }
.k6bbc5c { padding-top: 40px; }
.k6bbc5c .k25dbfb { max-width: 74ch; }
.k25dbfb h2 { margin: 52px 0 12px; font-family: var(--body); font-size: 23px; font-weight: 700; line-height: 1.3; color: var(--white); }
.k25dbfb > h2:first-child { margin-top: 0; }
.k25dbfb ul, .k25dbfb ol { margin: 14px 0 0; padding-left: 22px; }
.k25dbfb li + li { margin-top: 8px; }
.k25dbfb ul + p, .k25dbfb ol + p, .k25dbfb .k992f30 + p, .k25dbfb pre + p, .k25dbfb .photo-slot + p, .k25dbfb .k093c64 + p { margin-top: 18px; }
.k25dbfb p + ul, .k25dbfb p + ol { margin-top: 12px; }
.kd2e51f { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.k18999d { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.k18999d p { margin: 0; }

/* Tables: plain, with lines in concrete */
.k992f30 { margin: 18px 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.k992f30 table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.k992f30 caption { padding: 14px 16px 8px; caption-side: top; text-align: left; font-size: 14px; color: var(--muted); }
.k992f30 th, .k992f30 td { padding: 11px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.k992f30 thead th { font-size: 14px; font-weight: 600; color: var(--muted); }
.k992f30 tbody th { font-weight: 600; color: var(--white); }
.k992f30 .kbcba23 { text-align: right; white-space: nowrap; }
.k992f30 a { color: var(--white); text-underline-offset: 3px; }
.k4d5e3e table { min-width: 560px; }

/* Numbered steps */
.k3ae111 { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.k3ae111 li { position: relative; margin: 0; padding: 15px 18px 15px 60px; border: 1px solid var(--line); border-radius: 12px;
  counter-increment: s; }
.k3ae111 li::before { content: counter(s); position: absolute; left: 20px; top: 11px; font-family: var(--display);
  font-size: 26px; line-height: 1.2; color: var(--coral); }
.k3ae111 li + li { margin-top: 0; }

/* The WhatsApp message example */
.kd71121 { margin: 16px 0 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px;
  background: var(--navy-deep); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; color: var(--text); }

/* Ken's city photos: marked placeholders at their real size until the photos arrive */
.photo-slot { display: grid; place-items: center; margin: 28px 0 0; padding: 20px; aspect-ratio: 4 / 3;
  border: 1px dashed rgba(217, 214, 207, .4); border-radius: 14px; background: var(--navy-deep); text-align: center; }
.photo-slot figcaption { max-width: 34ch; font-size: 14.5px; color: var(--muted); }
.k25dbfb > .photo-slot { max-width: 420px; }
.k6a9dca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.k6a9dca .photo-slot { margin: 0; }
/* Photo brief 2026-10-11: the placeholder reads as an unmistakable request (code, subject, size); #photo-hcm-N jumps to
   it and the targeted slot gets a thin coral border on all sides. Once the photo file exists the slot is the photo. */
.photo-slot { scroll-margin-top: 24px; }
.photo-slot:target { border: 1px solid var(--coral); }
.k8f41a2 { display: block; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--coral); }
.k7a5ae9 { display: block; margin-top: 10px; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.k5ae787 { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.k148207 { display: block; padding: 0; aspect-ratio: auto; border: 0; background: none; text-align: left; }
.k148207 img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px;
  background: var(--navy-deep); }
.k148207 figcaption { max-width: none; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
/* Source links (Ken 2026-10-12): a small muted "Image source" link where the caption was */
.k14f4cb a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.k14f4cb a:hover { color: var(--white); }
.k148207:target { border: 0; }
/* Install brief 2026-10-11: the 3:2 frame crops HCM-8 from the right, so the Bitexco tower at its left edge stays whole */
#photo-hcm-8 img { object-position: 0% 50%; }
.k148207:target img { outline: 1px solid var(--coral); outline-offset: 3px; }

/* Buttons in running text */
.k5fe6d3 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* 404 */
.k6f5fc2 { padding-block: 72px 24px; }
.k6f5fc2 h1 { font-family: var(--display); font-size: clamp(44px, 5vw, 72px); line-height: 1; text-transform: uppercase; color: var(--white); }
.k6f5fc2 p { max-width: 60ch; margin-top: 18px; }

@media (max-width: 899px) {
  .k376799 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .k0d2bb1 { padding-top: 36px; }
  .kd27ae4 { font-size: 17px; }
  .k25dbfb h2 { margin-top: 40px; font-size: 21px; }
  .k992f30 table { font-size: 13.5px; }
  .k992f30 th, .k992f30 td { padding: 9px 8px; }
  .k992f30 caption { padding: 10px 8px 6px; }
  .k992f30 .k808965 { font-size: .86em; }
  .k6a9dca { grid-template-columns: 1fr; }
  .kb52a59 { font-size: 16px; }
}
/* v2 audit (2026-10-11): folded questions carry a heading inside <summary>; it reads exactly like the plain question */
.k6cdafc summary .kce0624 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
/* v2 audit (2026-10-11, Astra H4): a more compact phone buy box, so the name, the answer-first lines and the price sit
   in the first phone screen above the sticky Add to cart bar (the status sentences stay above the buy controls) */
@media (max-width: 759px) {
  .k41a53a { gap: 14px; }
  .kc393da img { aspect-ratio: 4 / 3; object-position: 50% 52%; }
  .kb303cd h1 { font-size: 38px; }
  .k88b5bd { margin-top: 4px; font-size: 16px; }
  .kb52a59 { margin-top: 10px; font-size: 15px; line-height: 1.45; }
  .k199ffe { font-size: 13.5px; line-height: 1.38; }
}
.k315db6 .k35751c + .k093c64 { margin-top: 18px; }