/* Vietnam Peptides Vendor, v2 (the approved round 2 mockup, built by work/build.py). Layout after a "Shop All"
   catalog page: the catalog is the home page. Off-white page, black text, forest green buttons, kraft accents.
   Montserrat headings, Inter body. No uppercase transforms, no left-border callouts. */
:root{
  --paper:#F5EFE3;
  --paper-2:#ECE4D4;
  --card:#FFFDF8;
  --ink:#111111;
  --muted:#5A5145;
  --line:#DDD3C1;
  --green:#1F6F4A;
  --green-2:#185A3C;
  --kraft:#C8A27A;
  --display:"Montserrat",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1320px;
  --gut:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;text-wrap:balance}
p{margin:0}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--kraft);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ka743a8{white-space:nowrap}
.k207a91{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ke3e99a{position:absolute;left:-999px;top:8px;z-index:60;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:4px}
.ke3e99a:focus{left:8px}
.k56928b{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.k1588b9{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kfba5fa{width:16px;height:16px}
.k766c5b{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--ink)}
.k766c5b:hover{background:var(--paper-2)}

/* announcement bar */
.k94a1e7{background:var(--ink);color:var(--paper);border-top:3px solid var(--kraft);text-align:center;font-size:13px;font-weight:500;line-height:1.4;padding:9px 16px}
.k94a1e7 a{color:inherit}
.k94a1e7 a:hover{color:var(--kraft)}

/* header: nav left, logo centred, search and cart right */
.kb00e01{background:var(--paper);border-bottom:1px solid var(--line)}
.kd9f716{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;min-height:96px}
.k623425{display:none}
.k173321{display:flex;gap:32px;font-size:15px;font-weight:500}
.k173321 a{text-decoration:none;padding:6px 0}
.k173321 a:hover{text-decoration:underline}
.ke8f717{position:relative;display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);line-height:1;padding:2px 0}
.k07a7f3{position:absolute;left:50%;top:-18px;height:calc(100% + 36px);width:auto;transform:translateX(-50%);opacity:.22;pointer-events:none}
.ke1f08c{position:relative;font:900 21px/1 var(--display);letter-spacing:-.5px;white-space:nowrap}
.k4dd634{position:relative;margin-top:6px;background:var(--ink);color:var(--kraft);font:900 15px/1 var(--display);letter-spacing:5px;padding:4px 5px 4px 10px;border-radius:3px}
.k1a779d{justify-self:end;display:flex;align-items:center;gap:18px}
.kfd2ab9{display:flex;align-items:center;width:260px;height:42px;background:var(--paper-2);border-radius:6px;padding:0 4px 0 14px}
.kfd2ab9:focus-within{outline:2px solid var(--green);outline-offset:1px}
.kfd2ab9 input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:14px;outline:none}
.kfd2ab9 input::placeholder{color:var(--muted);opacity:1}
.kfd2ab9 input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.kfd2ab9 button{display:grid;place-items:center;width:36px;height:36px;border:0;background:none;cursor:pointer;border-radius:4px}
.kfd2ab9{position:relative}
.k249e62{position:absolute;top:calc(100% + 6px);right:0;z-index:45;width:min(360px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px rgba(17,17,17,.12);padding:8px}
.k249e62[hidden]{display:none}
.ka79699{margin:2px 8px 6px;font-size:13px;color:var(--muted)}
.k21fb6c{list-style:none;margin:0;padding:0}
.k708c74{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 8px;border-radius:6px;text-decoration:none;font-size:14px;color:var(--ink)}
.k708c74:hover,.k708c74:focus{background:var(--paper-2)}
.k1962c1{flex:none;font-size:12px;font-weight:600;color:var(--green)}
.k4f57d3{display:inline-flex;align-items:center;gap:8px;border:0;background:none;font-size:15px;font-weight:500;cursor:pointer;padding:8px 4px;border-radius:6px}
.k4f57d3:hover .k61e377{text-decoration:underline;text-underline-offset:3px}
.k947ef9{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}

/* page title band */
.k55af82{padding-top:28px}
.ka383a0{padding-top:20px}
.k6ad2da{font-size:13px;color:var(--muted)}
.k6ad2da a{color:var(--ink);text-decoration:none}
.k6ad2da a:hover{text-decoration:underline}
.ka383a0 h1{margin-top:0;font-size:40px;line-height:1.12;font-weight:700;letter-spacing:-.015em}
.k912540{margin-top:12px;max-width:68ch;font-size:17px;color:var(--muted)}
.k03c6e1{display:flex;align-items:center;gap:16px;margin-top:56px;padding-bottom:20px}
.ka34002{margin-top:56px;font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.ka34002 + .k03c6e1{margin-top:14px}
.k7206ad{display:grid;gap:2px}
.ke6680c{font-size:14px;color:var(--muted)}
.k28a8d0{font-size:13px;color:var(--muted)}
.k537d40{border:0;background:none;padding:0;margin-left:10px;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.k537d40[hidden]{display:none}
.ka2b6f7{display:none}
.kd0cc6d{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px}
.kd0cc6d label{font-weight:600}
.kd0cc6d select{-webkit-appearance:none;appearance:none;font-size:14px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center/12px 12px;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:6px 24px 6px 2px;cursor:pointer}

/* catalogue: filter checklist left, 3 column grid right */
.kb8f317{display:grid;grid-template-columns:272px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:104px}
.k93301d{font-size:15px}
.kaccf8f{padding-bottom:22px}
.kaccf8f + .kaccf8f{border-top:1px solid var(--line);padding-top:20px}
.k0f8492{font:600 15px/1.3 var(--display);margin-bottom:10px}
.k7804a9{font-size:13px;color:var(--muted);margin:-4px 0 8px}
.k5a15ac{display:flex;align-items:center;gap:10px;padding:5px 0;line-height:1.35;cursor:pointer}
.k5a15ac input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--ink);border-radius:3px;background:var(--card);cursor:pointer}
.k5a15ac input:checked{border-color:var(--green);background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.k5a15ac:hover span:first-of-type{text-decoration:underline;text-underline-offset:3px}
.k5a15ac .keba65a{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* the filter panel's search box (Ken 2026-10-12), and the panel sticky on desktop with its own scroll */
.k7bb48c input{width:100%;height:40px;padding:0 12px;border:1.5px solid var(--line);border-radius:6px;background:var(--card);font-size:15px}
.k7bb48c input:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:1px}
.k7bb48c input::placeholder{color:var(--muted);opacity:1}
@media (max-width:900px){.k7bb48c{display:none}}   /* phones and tablets keep their panel as it was; the header search stays */
@media (min-width:901px){
  .k93301d{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
}
.k40f369{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.kae4447{display:flex;flex-direction:column;background:var(--card);border-radius:10px;overflow:hidden}
.kae4447[hidden]{display:none}
.k0af932{display:block;color:inherit;text-decoration:none}
.kcc3b10{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 58%;background:var(--paper-2)}
.k4c5989{margin:16px 18px 0;font-size:17px;line-height:1.3;font-weight:600}
.k4c5989 .k0eb841{margin-left:3px;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted)}
.k0af932:hover .k4c5989{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.k505eae{margin-top:auto;padding:10px 18px 18px}
.k4d56ed,.kcb0a1d{white-space:nowrap;font-variant-numeric:tabular-nums}
.kcb0a1d{font-size:.78em;font-weight:500;color:var(--muted)}
.kb2445a{font-size:17px;font-weight:600;line-height:1.35}
.k761d28{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.kcc6002{font-size:13px;color:var(--muted)}
.kac38cb{padding:48px 0;color:var(--muted)}

/* buttons: one accent colour */
.kd85f15{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:6px;padding:12px 20px;font:600 14px/1.1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.kc87a30{background:var(--green);color:#fff}
.kc87a30:hover{background:var(--green-2)}
.k430f70{background:transparent;color:var(--ink);border-color:var(--ink)}
.k430f70:hover{background:var(--ink);color:var(--paper)}
.k84e96b{padding:10px 18px}
.k84e96b[data-added]{background:var(--ink)}

/* about and questions: heading left, text right */
.k360a6f{border-top:1px solid var(--line);padding:80px 0}
.k0c17a9{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.k0c17a9 > h2{font-size:28px;line-height:1.2;font-weight:700}
.k0b235e{max-width:68ch}
.k0b235e p + p{margin-top:14px}
.k0b235e h3{margin:36px 0 10px;font-size:18px;line-height:1.3;font-weight:600;scroll-margin-top:24px}
.k0b235e .k56d7f2{font-size:18px;line-height:1.55}
.k0b235e strong{font-weight:600}
.k280e85{margin-top:22px !important;font-size:13px;line-height:1.55;font-style:italic;color:var(--muted)}
.k280e85 a{color:var(--muted)}
.kf34338{max-width:68ch}
.kf34338 .k56d7f2{font-size:18px;line-height:1.55}
.kf34338 .k56d7f2 + .k56d7f2{margin-top:12px;font-size:16px;line-height:1.6;color:var(--muted)}
.kda9d5e{list-style:none;margin:32px 0 0;padding:0;border-bottom:1px solid var(--line)}
.kf813eb{border-top:1px solid var(--line)}
.kf813eb > summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 0;list-style:none;cursor:pointer}
.kf813eb .kc4fcff{display:block;margin:0;font:600 17px/1.35 var(--display);color:var(--ink);text-wrap:balance}
.kf813eb > summary:hover .kc4fcff{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.kf813eb .ke612aa{width:20px;height:20px;margin-top:1px;transition:transform .2s ease}
.kf813eb[open] .ke612aa{transform:rotate(45deg)}
.kf813eb .kacf2cb{padding:0 40px 22px 0}
@media (prefers-reduced-motion:reduce){.kf813eb .ke612aa{transition:none}}

/* footer */
.kdd2509{background:var(--ink);color:#E8E1D3;padding:56px 0 36px;font-size:14px}
.kdd2509 a{color:inherit;text-decoration:none}
.kdd2509 a:hover{text-decoration:underline}
.kfd1e0c{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}
.k2bec81{font:700 18px/1.3 var(--display);color:var(--paper)}
.k2e7c95{margin-top:8px;max-width:46ch}
.k8af00a{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.k68eca1{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:44px;padding-top:20px;border-top:1px solid #3A352E;font-size:13px;color:#C9C0AF}

/* cart drawer */
.ke32506{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background:rgba(17,17,17,.45)}
.ke32506[hidden]{display:none}
.k691c83{display:flex;flex-direction:column;width:min(420px,calc(100% - 40px));height:100%;background:var(--paper);box-shadow:-8px 0 24px rgba(17,17,17,.14)}
.k32129c{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 18px 24px;border-bottom:1px solid var(--line)}
.k32129c h2{font-size:20px;font-weight:700}
.k13084c{flex:1;overflow:auto;padding:4px 24px}
.k8d88da{padding:20px 24px 24px;border-top:1px solid var(--line)}
.k8d88da:empty{display:none}
.k0f0421{padding:28px 0;color:var(--muted)}
.k0f0421 a{display:inline-block;margin-top:12px;color:var(--ink)}
.ke985c9{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ke985c9 img{width:64px;height:64px;object-fit:cover;object-position:50% 58%;border-radius:6px}
.k75369b{font:600 15px/1.3 var(--display)}
.kb74db1{font-size:13px;color:var(--muted)}
.k3368ed{font-weight:600;text-align:right;line-height:1.35}
.k3368ed .kcb0a1d{display:block}
.kd7712a{display:flex;align-items:center;gap:12px;margin-top:8px}
.k7bd3f6{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.k7bd3f6 button{display:grid;place-items:center;width:32px;height:32px;border:0;background:none;cursor:pointer}
.k7bd3f6 span{min-width:24px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.kfe1431{border:0;background:none;padding:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ke81cdd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;font-size:17px;font-weight:600}
.kea5740{text-align:right}
.k355c61{width:100%;padding:15px 20px;font-size:15px}
.kab2386{margin-top:12px;font-size:13px;color:var(--muted)}

/* product page */
.ke1ebbf{padding-top:20px;padding-bottom:88px}
.k471712{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:96px;align-items:start}
.k71e32d{border-radius:12px;overflow:hidden;background:var(--paper-2)}
.k71e32d img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 56%}
.k381377 h1{font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.kcee3b0{margin-top:8px;color:var(--muted)}
.k7d87e1{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:500}
.k7d87e1::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.kcf109f{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:14px;font-size:28px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums}
.kcf109f .kcb0a1d{font-size:16px}
.kcf109f small{font-size:15px;font-weight:500;color:var(--muted)}
.k381377 .k28a8d0{margin-top:4px}
.kd9fd25{margin:16px 0 0;padding:0;border:0;min-width:0}
.kd9fd25 legend{margin-bottom:8px;padding:0;font-size:14px;font-weight:600}
.kbd6c17{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border:1.5px solid var(--line);border-radius:8px;cursor:pointer}
.kbd6c17 + .kbd6c17{margin-top:8px}
.kbd6c17:hover{border-color:var(--muted)}
.kbd6c17:has(input:checked){border-color:var(--ink)}
.kbd6c17 input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--ink);border-radius:50%;background:var(--card);cursor:pointer}
.kbd6c17 input:checked{border:5.5px solid var(--green)}
.k410fb1{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.k30426c{font-weight:600;white-space:nowrap}
.k87f26c{font-size:13px;font-weight:600;color:var(--green);white-space:nowrap}
.k3f8833{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;column-gap:6px;font-weight:600;text-align:right}
.k3f8833 .kcb0a1d{font-size:13px}
.kb1831a{display:flex;gap:12px;margin-top:16px}
.k910056{display:inline-flex;align-items:center;height:52px;border:1.5px solid var(--ink);border-radius:6px}
.k910056 button{display:grid;place-items:center;width:44px;height:100%;border:0;background:none;cursor:pointer}
.k910056 output{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.kfd3a15{flex:1;height:52px;font-size:15px}
.k6c373c{width:100%;height:52px;margin-top:12px;font-size:15px}
.k90f466{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:15px}
.k90f466 li{display:flex;align-items:flex-start;gap:10px}
.k90f466 .k1588b9{margin-top:4px;color:var(--green)}
.k9d159d{display:none}

/* tablet */
@media (max-width:1100px){
  :root{--gut:28px}
  .k40f369{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kfd2ab9{width:180px}
  .k173321{gap:24px}
  .k471712{grid-template-columns:minmax(0,1fr) 380px;gap:48px}
}

/* small tablet and phone: two row header, filters behind a button, single column text sections */
@media (max-width:900px){
  .kd9f716{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"stog logo cart" "nav nav nav" "search search search";gap:0;min-height:0;padding-top:14px;padding-bottom:6px}
  .k623425{display:inline-grid;grid-area:stog;justify-self:start}
  .ke8f717{grid-area:logo;justify-self:center}
  .k07a7f3{top:-10px;height:calc(100% + 20px)}
  .k1a779d{display:contents}
  .k4f57d3{grid-area:cart;justify-self:end;gap:4px;padding:8px 0}
  .k61e377{display:none}
  .k173321{grid-area:nav;justify-content:center;gap:28px;margin-top:12px;font-size:14px}
  .kfd2ab9{grid-area:search;display:none;width:100%;margin:8px 0 6px}
  .kb00e01[data-search-open] .kfd2ab9{display:flex}
  .k249e62{left:0;right:0;width:auto}
  .k03c6e1{flex-wrap:wrap;gap:10px;margin-top:32px;padding-bottom:14px}
  .ka34002{margin-top:32px;font-size:24px}
  .ka34002 + .k03c6e1{margin-top:10px}
  .k7206ad{order:3;flex-basis:100%}
  .ke6680c{font-size:13px}
  .ka2b6f7{order:1;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1.5px solid var(--ink);border-radius:6px;background:transparent;font-size:13px;font-weight:600;cursor:pointer}
  .ka2b6f7:hover{background:var(--paper-2)}
  .k9ff2a7{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--green);color:#fff;font-size:11px}
  .k9ff2a7[hidden]{display:none}
  .kd0cc6d{order:2}
  .kb8f317{grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:72px}
  .k93301d{display:none;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:8px}
  .k93301d[data-open]{display:block}
  .k40f369{gap:24px 16px}
  .k0c17a9{grid-template-columns:minmax(0,1fr);gap:20px}
  .k360a6f{padding:64px 0}
  .k471712{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
}

/* phone */
@media (max-width:760px){
  :root{--gut:16px}
  .k94a1e7{font-size:12.5px;padding:8px 12px}
  .kd9f716{padding-top:12px}
  .ke1f08c{font-size:18px}
  .k4dd634{font-size:13px;letter-spacing:4.5px;padding:3px 4px 3px 9px;margin-top:5px}
  .k07a7f3{top:-9px;height:calc(100% + 18px)}
  .k173321{margin-top:10px}
  .k55af82{padding-top:18px}
  .ka383a0{padding-top:12px}
  .ka383a0 h1{font-size:27px;line-height:1.18}
  .k912540{font-size:15px}
  .k03c6e1{margin-top:24px;padding-bottom:12px}
  .kd0cc6d{gap:8px;font-size:13px}
  .kd0cc6d select{font-size:13px}
  .kb8f317{padding-bottom:64px}
  .k40f369{gap:16px 12px}
  .k4c5989{margin:12px 12px 0;font-size:15px}
  .k4c5989 .k0eb841{font-size:13px}
  .k505eae{padding:8px 12px 12px}
  .k761d28{flex-direction:column;align-items:stretch;gap:10px;margin-top:2px}
  .kb2445a{font-size:15px}
  .kcc6002{font-size:12px}
  .k84e96b{width:100%;padding:10px 12px}
  .k360a6f{padding:56px 0}
  .k0c17a9 > h2{font-size:24px}
  .k0b235e .k56d7f2{font-size:17px}
  .ke1ebbf{padding-top:14px;padding-bottom:56px}
  .k471712{grid-template-columns:minmax(0,1fr);gap:24px}
  .k381377 h1{font-size:28px}
  .kcf109f{font-size:24px}
  .kfd1e0c{grid-template-columns:minmax(0,1fr);gap:28px}
  .k68eca1{flex-direction:column}
  .k9d159d{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(17,17,17,.06)}
  .k9d159d[hidden]{display:none}
  .k42b692{display:flex;flex-direction:column;min-width:0;font-weight:600;font-size:16px;line-height:1.25}
  .k37a143{display:flex;flex-wrap:wrap;column-gap:6px;align-items:baseline}
  .k42b692 small{font-size:12px;font-weight:500;color:var(--muted)}
  .k9d159d .kd85f15{padding:14px 22px;font-size:15px}
  .k3d959f .kdd2509{padding-bottom:110px}
}


/* ---------- v2 build additions (real pages beyond the two mockup pages) ---------- */
/* no JavaScript: cart, filters, sort and quantity need it, prices and WhatsApp links do not */
html:not([data-js]) .kc53d63{display:none !important}
html[data-js] .kc12394{display:none !important}
html:not([data-js]) .kb8f317{grid-template-columns:minmax(0,1fr)}
.k6ad2da ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px}
.k6ad2da li + li::before{content:"/";margin-right:6px;color:var(--muted)}
.k6ad2da [aria-current]{color:var(--muted)}

/* grid card: stock line on the cards that are not in stock */
.k1eee76{min-height:20px;margin-top:2px;font-size:13px;line-height:20px;color:var(--muted)}
.k1eee76:empty::before{display:none}
.k4f57d3{text-decoration:none;color:var(--ink)}
.k1eee76::before{content:"";display:inline-block;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;background:var(--kraft)}

/* product page */
.kcee3b0{font-size:16px;line-height:1.55}
.k7d87e1.is-pre::before{background:var(--kraft)}
.k7d87e1.is-ask::before{background:var(--muted)}
.ked97a4{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.k1e1b3d{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:22px 0 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
.k1e1b3d dt{font-weight:600}
.k1e1b3d dd{margin:0}
.k65136f{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.k65136f li{padding-top:14px;border-top:1px solid var(--line)}
.kca808e{display:block;margin-bottom:4px;font:600 13px/1.3 var(--display);color:var(--green)}
.k65136f b{font-weight:600}
/* copy fixes 2026-10-12: one short line per study field; the opening's second paragraph; the lede's rest */
.k65136f .k3c7e29{display:block}
.k65136f .k3c7e29 + .k3c7e29{margin-top:2px}
.k70c17c{margin-top:8px}
.k55dca5{margin-top:8px}
.k53ba0b{font-size:14px;color:var(--muted)}
.k1bb0ba{margin-top:22px !important}
.k3f11f3{font-size:14px}
.kbe15ca{color:var(--muted)}
.k8f33fd{margin-top:16px !important;font-size:14px;color:var(--muted)}
.k8f33fd a{color:var(--ink)}

/* text pages: the mockup's type and spacing with a plain readable body */
.k740f12 .ka383a0{padding-bottom:36px}
.k740f12 .ka383a0 h1{font-size:38px}
.k0b235e ul,.k0b235e ol{margin:14px 0 0;padding-left:22px}
.k0b235e li + li{margin-top:8px}
.k0b235e h3:first-child{margin-top:0}
.k0b235e a{color:var(--ink)}
.k0b235e .k912540{margin-top:0}
.k883f6b{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.k883f6b table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.k883f6b caption{caption-side:top;text-align:left;padding-bottom:8px;font-size:13px;color:var(--muted)}
.k883f6b th,.k883f6b td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.k883f6b thead th{font-weight:600;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.k883f6b tbody th{font-weight:600}
.k883f6b .k5b0d09{text-align:right;white-space:nowrap}
.kd1b947{margin:18px 0 0;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:8px;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.k52a0a7{counter-reset:step;list-style:none;padding-left:0 !important}
.k52a0a7 li{counter-increment:step;position:relative;padding-left:36px}
.k52a0a7 li::before{content:counter(step);position:absolute;left:0;top:1px;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font:600 13px/1 var(--sans)}
.kd596d6{margin-top:20px}
/* photo slots: a labelled placeholder until the photo exists, then the photo itself */
.kf86ea0{margin:28px 0 0;display:grid;place-items:center;aspect-ratio:3/2;background:var(--paper-2);border:1px dashed var(--kraft);border-radius:10px;padding:16px;scroll-margin-top:24px}
.kf86ea0 figcaption{display:grid;justify-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--muted);text-align:center;max-width:36ch}
.kf86ea0 .k533f1e,.kb77e2c .k533f1e{background:var(--kraft);color:var(--ink);font:700 15px/1.2 var(--display);padding:6px 12px;border-radius:999px}
.kf86ea0 .k90e258{color:var(--ink);font-size:15px}
.kf86ea0 .k560667{font-size:13px}
.kf55c2c{margin:28px 0 0;max-width:560px;scroll-margin-top:24px}
.kf55c2c img{width:100%;height:auto;border-radius:10px;background:var(--paper-2)}
.kf55c2c figcaption{margin-top:6px;font-size:12px;line-height:1.4;color:var(--muted)}
/* the small "Image source" links that replaced the photo captions (Ken 2026-10-12) */
.k5e5179 a{color:inherit;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:4px 0}
.k152a91.img-src a{padding:4px 3px}
/* home hero band (slot VPV-0): one pre-blended image of four Vietnam photos with the flag; the H1 and the intro sit
   over a dark bottom gradient that starts 120 px above the H1 (200 px on a phone), so the text keeps its contrast */
.kbfdef4{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;margin-top:14px;background:var(--ink);color:#fff;overflow:hidden}
.kabfdcd{position:absolute;inset:0}
.kabfdcd img{width:100%;height:100%;object-fit:cover;object-position:25% 40%}
.k452b6e{position:relative;padding-top:120px;background:linear-gradient(0deg,rgba(17,17,17,.88) 0%,rgba(17,17,17,.62) calc(100% - 120px),rgba(17,17,17,0) 100%)}
.kbfdef4 h1{margin:0;color:#fff;font-size:40px;line-height:1.12;font-weight:700;letter-spacing:-.015em}
.kbfdef4 .k912540{margin-top:10px;max-width:760px;color:#F5EFE3}
.k152a91{margin-top:14px;padding-bottom:10px;text-align:right;font-size:12px;line-height:1.4;color:#F5EFE3}
.kb77e2c{position:absolute;top:16px;left:16px;right:16px;color:#F5EFE3;font-size:14px}
/* the home answer block under the hero (BRIEF-VENDOR-CITE-2026-10-12): the two exact questions, side by side */
.k75d2e4{padding:48px 0 0}
.kade52b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.k75d2e4 h2{font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.k75d2e4 p{margin-top:10px}
.kb7ec23{margin:12px 0 0;padding-left:20px}
.kb7ec23 li + li{margin-top:8px}
@media (max-width:760px){.k75d2e4{padding-top:32px}.kade52b{grid-template-columns:minmax(0,1fr);gap:28px}.k75d2e4 h2{font-size:21px}}
@media (max-width:760px){
  .kbfdef4{min-height:0;margin-top:12px}
  .kabfdcd img{object-position:50% 0}
  .k452b6e{padding-top:300px;background:linear-gradient(0deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,.58) calc(100% - 300px),rgba(17,17,17,0) calc(100% - 100px))}
  .kbfdef4 h1{font-size:27px;line-height:1.18}
  .kbfdef4 .k912540{font-size:15px}
  .k152a91{text-align:left;font-size:12px}
}
.kae184c{margin-top:18px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.kae184c p + p{margin-top:6px}
.kdf745d .ka383a0{padding-bottom:96px}
@media (max-width:760px){
  .k740f12 .ka383a0 h1{font-size:27px}
  .k740f12 .ka383a0{padding-bottom:20px}
  .k883f6b table{font-size:14px}
  .k1e1b3d{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .k1e1b3d dd + dt{margin-top:8px}
}
.kf34338 .k7ff02d{margin:36px 0 10px;font-size:18px;line-height:1.3;font-weight:600}
.kf34338 .k7ff02d + p{margin-top:0}
.kf34338 p + p{margin-top:12px}
.kf34338 .k7ff02d ~ .kda9d5e{margin-top:14px}
.kf34338 .ke94ead{margin-top:24px;font-size:14px;color:var(--muted)}
.kf34338 .ke94ead a{color:var(--ink)}
.k72f205{padding-top:14px}
.kfd1e0c{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.kfd1e0c{grid-template-columns:minmax(0,1fr)}}
.k65dfe1{margin:12px 0 0;padding-left:20px}
.k65dfe1 li + li{margin-top:6px}
.k65dfe1 a{color:var(--ink)}
.k0b235e ul + p,.k0b235e ol + p,.k0b235e .k883f6b + p,.k0b235e pre + p,.k0b235e dl + p,.k0b235e figure + p,.k0b235e .k65136f + p{margin-top:16px}
.k0b235e p + div,.k0b235e p + .k883f6b,.k0b235e p + ul,.k0b235e p + ol,.k0b235e p + pre{margin-top:16px}
.k0b235e div > p + p{margin-top:14px}
.k31b951{white-space:nowrap}
.kf86ea0{max-width:560px}
.k75369b{display:inline-block;text-decoration:none;color:var(--ink)}
.k75369b:hover{text-decoration:underline}
.k3accbd{margin:3px 18px 0;font-size:13px;line-height:1.35;color:var(--muted)}
@media (max-width:760px){.k3accbd{margin:3px 12px 0;font-size:12px;min-height:2.7em}}
.kd327dd{margin-top:14px !important}
.k384ff5{margin-top:22px}
.k384ff5 caption{font-weight:600;color:var(--ink);font-size:14px}
.k384ff5 th{width:38%;font-weight:600}
.k0b235e .k65136f{padding-left:0}

/* ---------- audit 2026-10-11 (GPT 6 Astra r2 HIGH): on a phone the pack choice and the buy controls sit in the first
   screen. The vial photo is shown whole at a fixed height, and the buy box shows name, price, packs and buttons before
   the description. Visual order only: the HTML order (H1, then the answer-first lines) is unchanged, and the
   focusable controls keep their own order. ---------- */
@media (max-width:760px){
  .k471712{gap:16px}
  .k71e32d img{aspect-ratio:auto;height:220px;object-fit:contain;object-position:50% 50%}
  .k381377{display:flex;flex-direction:column}
  .k381377 > h1{order:1}
  .k381377 > .k7d87e1{order:2}
  .k381377 > .kcf109f{order:3;margin-top:10px}
  .k381377 > .k28a8d0{order:4}
  .k381377 > .kd9fd25{order:5;margin-top:12px}
  .k381377 > .kb1831a{order:6}
  .k381377 > .k6c373c{order:7}
  .k381377 > .kcee3b0{order:8;margin-top:16px}
  .k381377 > .k90f466{order:9}
}