/* Buy Peptides Da Nang, V2 theme (approved mockup mockups-v2/buypeptidesdanang, Allbirds layout).
   Inset photo hero with a floating header, a row of colour-block tiles, then plain grids. White and sand page,
   deep sea text and buttons, sky accents. Poppins for headings, Inter for body. No animation beyond hover states
   and the FAQ plus sign turning. Notes are small muted text: never a tinted box with a thick left border. */
:root {
  --sea: #0B3954;
  --sea-dark: #072A3F;
  --sea-mid: #2C6E91;
  --sky: #7FB7E6;
  --sky-tint: #EAF3FB;
  --sand: #EFE4CF;
  --sand-line: #DFD0B2;
  --white: #FFFFFF;
  --muted: #4A6274;
  --line: #DCE3E9;
  --r-lg: 20px;
  --r: 14px;
  --edge: 20px;
  --wrap: 1320px;
  --display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--sea); font-family: var(--body); font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
/* source order puts the page content first and the announcement bar after it; the flex column shows the bar on top */
body { display: flex; flex-direction: column; }
body > * { flex: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; color: var(--sea); }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sea-mid); outline-offset: 2px; }
.k473254 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k49d41b { position: absolute; left: -9999px; top: 0; }
.k49d41b:focus { left: 16px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.k7ccb60 { max-width: var(--wrap); margin: 0 auto; }
.k8f5384 { white-space: nowrap; }

/* 1. Announcement bar */
.k524d5f { order: -1; background: var(--sea); color: #fff; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.4; padding: 9px 16px; }

/* 2. Header: a white rounded bar, floating over the photo on the home page */
.kb7c491 { position: relative; }
.kac4d0d { background: #fff; border-radius: var(--r); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 10px 10px 10px 12px; }
.k310c91 { position: absolute; z-index: 3; top: calc(var(--edge) + 16px); left: calc(var(--edge) + 16px); right: calc(var(--edge) + 16px); }
.k249cec { margin: 12px var(--edge) 0; border: 1px solid var(--line); }
.k571dc1 { justify-self: start; display: inline-flex; flex-direction: column; align-items: center; background: var(--sky); border-radius: 10px; padding: 8px 13px 7px; text-decoration: none; line-height: 1; }
/* Approved logo (store-logos-2026-10-10, tile version) set live at 26/136 of its source size */
.k6f14a5 { font-family: var(--display); font-weight: 800; color: var(--sea); font-size: 7.65px; letter-spacing: 3.25px; margin-right: -3.25px; }
.kaf9d85 { font-family: var(--display); font-weight: 800; color: #fff; font-size: 26px; margin-top: 1.5px; }
.k06ca36 { display: flex; gap: 40px; }
.k06ca36 a { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; padding: 8px 0; }
.k06ca36 a:hover, .k06ca36 a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.kf43008 { justify-self: end; display: flex; align-items: center; gap: 2px; }
.kafec3a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--sea); cursor: pointer; text-decoration: none; }
.kafec3a:hover { background: var(--sand); }
.kafec3a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kf65047 { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sea); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
/* the cart count is drawn from data-n, so the header holds no text before the page's H1 (copy fix 1) */
.kf65047::after { content: attr(data-n); }

/* 3. Full-bleed photo hero. Slot DN-1: the real photo of the Dragon Bridge fills it (object-fit cover); without the
   photo the sky gradient shows and the PHOTO NEEDED label sits under the header. */
.k117f8f { padding: var(--edge) var(--edge) 0; }
.k70b6b5 { position: relative; height: 640px; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, #A3CCEE 0%, #6FA3CE 42%, #2C6E91 72%, #0B3954 100%); }
.k70b6b5 .k3ee64d { position: absolute; inset: 0; z-index: 0; margin: 0; border-radius: 0; background: none; }
.k70b6b5 .k3ee64d .k463fd3 { position: absolute; inset: 0; aspect-ratio: auto; background: none; }
/* desktop: the photo box starts 80 px above the hero (clipped by its rounded box), which puts the bridge deck about
   205 to 215 px down at every width from 900 to 1440, clear of the header above and the centred heading below */
.k70b6b5 .k3ee64d img { position: absolute; inset: -80px 0 0 0; width: 100%; height: calc(100% + 80px); aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
.k70b6b5 .k3ee64d .kf616e8 { position: absolute; z-index: 2; left: 28px; bottom: 20px; max-width: calc(50% - 200px); padding: 0; color: rgba(255, 255, 255, .9); font-size: 12px; line-height: 1.4; text-shadow: 0 1px 2px rgba(11, 57, 84, .8); }
.k70b6b5 .k3ee64d .k11d1c3 { position: absolute; left: 50%; top: 136px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); padding: 10px 18px; border: 1px dashed rgba(255, 255, 255, .8); border-radius: 12px; color: #fff; font-size: 13px; line-height: 1.45; text-align: center; }
.k70b6b5::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, rgba(11, 57, 84, 0), rgba(11, 57, 84, .5)); pointer-events: none; }
/* With the real photo: a deeper sea scrim behind the centred copy (from just under the bridge down), so white text
   keeps its contrast over the bright river; measured, see work/WORK-LOG.md */
/* the figure stops being its own stacking layer, so the credit (z 2) sits above the scrim while the photo stays below it */
.k503f70 .k3ee64d { z-index: auto; }
.k503f70::after { height: 100%; background: linear-gradient(180deg, rgba(11, 57, 84, 0) 32%, rgba(11, 57, 84, .62) 50%, rgba(11, 57, 84, .84) 100%); }
/* Ken 2026-10-11 "center that": the copy block sits centred in the lower part of the hero, under the bridge */
.k0a9dab { position: absolute; z-index: 2; left: 56px; right: 56px; bottom: 52px; max-width: 760px; margin: 0 auto; color: #fff; text-align: center; }
.k70b6b5 h1 { color: #fff; }
.k2a860f { display: block; font-weight: 700; font-size: 56px; line-height: 1.04; letter-spacing: -.015em; }
.k5fcc7c { display: block; font-family: var(--body); font-weight: 400; font-size: 20px; line-height: 1.4; margin-top: 12px; }
.k255b60 { margin: 14px auto 0; max-width: 33em; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.k255b60.hero-lede-2 { margin-top: 8px; }
.kc4f751 { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.k03b6dd { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--sea); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.k03b6dd:hover { background: var(--sand); }

/* 4. Colour-block tiles, one per group of compounds */
.k0ea82e { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 16px var(--edge) 0; }
.k6cb001 { display: flex; flex-direction: column; justify-content: space-between; height: 220px; padding: 22px 22px 20px; border-radius: var(--r-lg); text-decoration: none; }
.keceaaf { background: var(--sky); color: var(--sea); }
.k4e228b { background: var(--sea); color: #fff; }
.k500bb0 { background: var(--sand); color: var(--sea); }
.k5d0610 { background: var(--sea-mid); color: #fff; }
.k703190 { background: #DCEBF8; color: var(--sea); }
.k29718b { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.k043a30 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.k5451b3 { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.18; }
.k906dee { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid currentColor; }
.k906dee svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k6cb001:hover .k5451b3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Sections */
.ke913ea { margin: 96px var(--edge) 0; padding: 72px 40px; background: var(--sand); border-radius: var(--r-lg); }
.kbe499f { padding: 96px calc(var(--edge) + 40px) 0; }
.kfde1d8 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.kfde1d8 h2 { font-size: 34px; letter-spacing: -.01em; }
.k9550ab { margin-top: 8px; color: var(--muted); font-size: 15px; }
.k97697a { margin-top: 2px; font-size: 13.5px; }
.kbd5b84 { flex: none; display: flex; align-items: center; gap: 8px; width: 300px; height: 46px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.kbd5b84:focus-within { border-color: var(--sea); }
.kbd5b84 svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--sea); stroke-width: 1.8; stroke-linecap: round; }
.kbd5b84 input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.kbd5b84 input::placeholder { color: var(--muted); }
.kb25ee5 { margin: -12px 0 24px; font-size: 15px; }
.kc8bb62 { border: 0; background: none; padding: 0; color: var(--sea); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.k2d37c7 { padding: 24px 0; color: var(--muted); }

/* Product grid and the one card used everywhere */
.k5b6efc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 20px; list-style: none; margin: 0; padding: 0; }
.k37c4a9 { flex-direction: column; min-width: 0; }
.k37c4a9:not([hidden]) { display: flex; }
.k7521c1 { display: block; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: #E6DAC2; }
.k7521c1 img { width: 100%; height: 100%; object-fit: cover; }
.kd9a1f4 { font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 14px; }
.kd9a1f4 a { text-decoration: none; }
.kd9a1f4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.k2144b1 { margin-top: 2px; font-size: 13px; color: var(--muted); }
.kf49fd4 { margin-top: auto; padding-top: 6px; }
.k186f45 { font-size: 15px; font-weight: 600; }
.kc15ee2 { font-family: var(--body); font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.kdab858 { font-size: 13px; color: var(--muted); margin-top: 1px; }
.k5943a5 { width: 100%; height: 40px; margin-top: 12px; border: 1.5px solid var(--sea); border-radius: 999px; background: transparent; color: var(--sea); font-size: 14px; font-weight: 600; cursor: pointer; }
.k5943a5:hover { background: var(--sea); color: #fff; }

/* 7. About this store and the foldable questions */
.k48d59d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
.k48d59d h2 { font-size: 34px; letter-spacing: -.01em; }
.k898f27 p { margin-top: 16px; font-size: 16px; line-height: 1.7; }
.k0ad4b8 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--sand-line); }
.k898f27 .k93fa49 { margin-top: 32px; font-size: 22px; letter-spacing: 0; }
.k48d59d .k90fae3 h2 { margin: 6px 0 20px; font-size: 28px; }
.k898f27 a { font-weight: 600; text-underline-offset: 3px; }
.k898f27 .k72f95c { margin-top: 24px; }
.k898f27 .k71722c { margin-top: 28px; }
.k72f95c { max-width: 720px; border-top: 1px solid var(--sand-line); }
.k72f95c details { border-bottom: 1px solid var(--sand-line); }
.k72f95c summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.35; }
.k72f95c summary::-webkit-details-marker { display: none; }
.k72f95c details summary .k9712be { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.k72f95c summary:hover .k9712be { text-decoration: underline; text-underline-offset: 4px; }
.k66a03e { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid var(--sea); border-radius: 999px; transition: transform .2s ease; }
.k66a03e svg { width: 15px; height: 15px; fill: none; stroke: var(--sea); stroke-width: 2; stroke-linecap: round; }
.k72f95c details[open] .k66a03e { transform: rotate(45deg); }
.k5eb715 { padding: 0 52px 22px 0; font-size: 16px; line-height: 1.7; }
.k5eb715 p + p { margin-top: 10px; }
.k5eb715 a { font-weight: 600; text-underline-offset: 3px; }
.k5eb715 .kc15ee2 { font-size: 13.5px; }

/* Footer */
.k5490ae { margin-top: 96px; padding: 56px var(--edge) 40px; background: var(--sea); color: #fff; }
.k5490ae .k571dc1 { color: var(--sea); }
.k269da2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.k2a51ba { max-width: 420px; margin-top: 16px; color: rgba(255, 255, 255, .86); font-size: 15px; }
.keaf9c5 { display: flex; flex-wrap: wrap; gap: 12px 32px; list-style: none; margin: 0; padding: 6px 0 0; }
.keaf9c5 a { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.keaf9c5 a:hover, .k8e3639 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.k8e3639 { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 32px 0 0; padding: 0; }
.k8e3639 a { font-size: 14px; color: rgba(255, 255, 255, .9); text-decoration: none; }
.k93aad2 { display: grid; gap: 6px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8); font-size: 13.5px; }
/* ENTITY playbook 4a item 5 (audit 2026-10-11): the one "For AI assistants" link sits on the last line, styled like the copyright line */
.k6e2a7c { font-size: 12px; }
.k6e2a7c a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Buttons */
.kd12adb { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 1.5px solid var(--sea); border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.kd75a07 { background: var(--sea); color: #fff; }
.kd75a07:hover { background: var(--sea-dark); border-color: var(--sea-dark); }
.kee898c { background: #fff; color: var(--sea); }
.kee898c:hover { background: var(--sand); }
.ka2aa34 { display: flex; width: 100%; margin-top: 10px; }
.k9750bb { flex: 1; }
.kd12adb[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Cart drawer: plain, right side, no slide animation */
.kdac3a0 { position: fixed; inset: 0; z-index: 50; background: rgba(11, 57, 84, .45); }
.k810858 { position: fixed; z-index: 51; top: 0; right: 0; bottom: 0; width: min(420px, 100%); flex-direction: column; background: #fff; }
.k810858:not([hidden]) { display: flex; }
.k095461 { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--line); }
.k095461 h2 { font-size: 20px; }
.k6d4217 { flex: 1; overflow: auto; padding: 0 24px; }
.k26f199 { padding: 24px 0; color: var(--muted); }
.kc6f8ae { list-style: none; margin: 0; padding: 0; }
.k74e6a4 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.kfd25ef { min-width: 0; }
.k5f2082 { font-family: var(--display); font-weight: 600; font-size: 15px; }
.k6fc901, .k142f74 { font-size: 13.5px; color: var(--muted); }
.k810306 { font-weight: 600; font-size: 15px; text-align: right; }
.k810306 .kc15ee2 { display: block; }
.kefd48a { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.kfa385d { padding: 18px 24px 22px; border-top: 1px solid var(--line); }
.kfa0553 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 6px; }
.k58f2bd { text-align: right; }
.k58f2bd .kc15ee2 { font-size: 13.5px; }
.kbfd6d6 { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* Quantity stepper (product page and cart lines) */
.k8a7719 { flex: none; display: flex; align-items: center; height: 52px; border: 1.5px solid var(--line); border-radius: 999px; }
.k8a7719 button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 100%; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.k8a7719 button:hover { background: var(--sand); }
.k8a7719 svg { width: 16px; height: 16px; fill: none; stroke: var(--sea); stroke-width: 2; stroke-linecap: round; }
.k8a7719 input, .k8a7719 span { width: 34px; border: 0; background: transparent; text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.k8a7719 input::-webkit-outer-spin-button, .k8a7719 input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.k45b04c { height: 36px; }
.k45b04c button { width: 34px; }
.kedf4f4 { border: 0; background: none; padding: 0; font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Product page: large image left, sticky buy box right */
.k1d54c7 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; max-width: calc(var(--wrap) + 2 * var(--edge)); margin: 28px auto 0; padding: 0 var(--edge); }
.k270f2c { border-radius: var(--r-lg); overflow: hidden; background: #E6DAC2; }
.k270f2c img { width: 100%; }
.kf5d123 { position: sticky; top: 24px; padding-top: 8px; }
.k2f0800 { font-size: 13.5px; color: var(--muted); }
.k2f0800 a { text-decoration: none; }
.k2f0800 a:hover { text-decoration: underline; }
.kf5d123 h1 { font-size: 42px; letter-spacing: -.01em; margin-top: 12px; }
.kf5d123 .kb5e170 { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.kf5d123 .kb5e170 + .kb5e170 { margin-top: 10px; }
.k434160 { margin-top: 20px; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.2; }
.k434160 .kc15ee2 { font-size: 16px; }
.k45a280 { margin-top: 4px; font-size: 13px; color: var(--muted); }
.k6aa50b { color: var(--muted); font-size: 14.5px; }
.kb9b997 { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14.5px; font-weight: 500; }
.k21757a { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.keebba6 { background: var(--sand-line); }
.k854ace { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.kd0a47b { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.kd0a47b legend, .kcf9d50 { padding: 0; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.kcf9d50 { margin: 22px 0 10px; }
.kd4581b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.k1c4e69 { position: relative; display: block; }
.k1c4e69 input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k1c4e69 span { display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14.5px; font-weight: 500; text-align: center; cursor: pointer; }
.k1c4e69 span:hover { border-color: var(--sea); }
.k1c4e69 input:checked + span { border-color: var(--sea); background: var(--sky-tint); font-weight: 600; }
.k1c4e69 input:focus-visible + span { outline: 2px solid var(--sea-mid); outline-offset: 2px; }
.k40cae0 { display: flex; gap: 10px; }
.kab18c3 { margin-top: 10px; font-size: 13px; color: var(--muted); }
.kafe587 { display: grid; gap: 8px; list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.k1fe0a2 { max-width: calc(760px + 2 * var(--edge)); margin: 96px auto 0; padding: 0 var(--edge); }
.kd9ac62 { padding: 44px 0; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.7; }
.kd9ac62 h2 { font-size: 28px; margin-bottom: 14px; }
.kd9ac62 h3 { font-size: 19px; margin: 22px 0 8px; }
.kd9ac62 p + p, .kd9ac62 p + ul, .kd9ac62 ul + p, .kd9ac62 p + ol, .kd9ac62 ol + p { margin-top: 14px; }
.kd9ac62 a { font-weight: 600; text-underline-offset: 3px; }
.kd9ac62 .k8aaac0 { margin-top: 18px; color: var(--muted); font-size: 13px; font-style: italic; line-height: 1.6; }
.kd9ac62 .k8aaac0 a { font-weight: 400; }
.kd9ac62 .kf889d0, .kf889d0 { font-size: 14px; color: var(--muted); }
.kd9ac62 .k72f95c { max-width: none; border-top-color: var(--line); }
.kd9ac62 .k72f95c details { border-bottom-color: var(--line); }
.k805bb5 { display: none; }

/* Plain pages (delivery, about, contact, privacy, research use, AI instructions, 404) */
.kc1006c { max-width: calc(760px + 2 * var(--edge)); margin: 40px auto 0; padding: 0 var(--edge); }
.k63f5c5 { max-width: calc(760px + 2 * var(--edge)); margin: 12px auto 0; padding: 0 var(--edge); }
.k63f5c5 h1 { font-size: 42px; letter-spacing: -.01em; margin-top: 12px; }
.k63f5c5 .kb5e170 { margin: 16px 0 36px; font-size: 18px; line-height: 1.6; }
/* the first sentence is its own paragraph (copy fix 1, 2026-10-12): two ledes sit close together */
.k63f5c5 > .kb5e170:has(+ .kb5e170) { margin-bottom: 0; }
.k63f5c5 > .kb5e170 + .kb5e170 { margin-top: 10px; }
.k63f5c5 .kd9ac62:first-of-type { border-top: 0; padding-top: 8px; }
.k63f5c5 ul, .k63f5c5 ol { margin: 0; padding-left: 22px; }
.k63f5c5 li + li { margin-top: 8px; }
.ked8214 li::marker { font-family: var(--display); font-weight: 600; }
.kbdd33e { list-style: none; padding-left: 0 !important; }
.kbdd33e li { padding-left: 0; }
.k7581d8 { columns: 2; column-gap: 32px; }
.k7581d8 li { break-inside: avoid; }
.k63f5c5 .kd12adb { margin-top: 18px; }
.k75813d { margin-top: 10px; }
.kc5a061 { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 15px; line-height: 1.55; }
.kc5a061 div + div { margin-top: 2px; }
.ke55004 { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.k387965 { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--sea); border-radius: var(--r); }
.k402c02 { list-style: none; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.k402c02 li + li { margin-top: 6px; }
.k402c02 a { font-weight: 600; }
.kd758fe { margin: 26px 0 0; border-radius: var(--r); overflow: hidden; background: var(--sand); }
.kd758fe .k463fd3 { aspect-ratio: 3 / 2; background: linear-gradient(180deg, #CFE3F6 0%, #A3CCEE 45%, #EFE4CF 100%); }
.kd758fe figcaption { padding: 10px 16px 12px; font-size: 13.5px; color: var(--muted); }
/* Placeholder label (temporary): PHOTO NEEDED: <code>, the subject, the size wanted, one per line */
.k11d1c3 span, .k11d1c3 strong { display: block; }
.kc64a2a { font-weight: 700; letter-spacing: .06em; color: var(--sea); }
.k81e72c { margin-top: 2px; }
.kb6afdc { margin-top: 2px; font-size: 12.5px; }
.k70b6b5 .kc64a2a { color: #fff; }
/* Real photo: the slot's own shape, the photo cropped to fill it; a small Image source link under it */
.kd758fe img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.k369b5d .kd758fe img { aspect-ratio: 4 / 3; }
.kd758fe .kf616e8 { padding: 8px 16px 10px; font-size: 12px; line-height: 1.4; }
/* the only photo credit: a small "Image source" link (Ken 2026-10-12, no caption text) */
.kf616e8 a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.k369b5d { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.k369b5d .kd758fe .k463fd3 { aspect-ratio: 4 / 3; }

/* Tables: one plain style, rows stack on phones */
.k71722c { margin-top: 18px; }
.k71722c table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.k71722c caption { text-align: left; padding: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 15px; }
.k71722c th, .k71722c td { padding: 10px 12px 10px 0; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.k71722c thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.k71722c tbody th { font-weight: 600; }
.k71722c .k3acff2 { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 12px; }
.k71722c .kc15ee2 { display: block; }

/* 404 */
.k062525 { padding: 48px 0 24px; }
.k062525 p { margin-top: 14px; font-size: 18px; }

/* Mid widths */
@media (max-width: 1179px) {
  .k5b6efc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k0ea82e { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .k6cb001 { grid-column: span 2; }
  .k6cb001:nth-child(n+4) { grid-column: span 3; }
  .k06ca36 { gap: 28px; }
}

/* Tablet and phone */
@media (max-width: 899px) {
  :root { --edge: 12px; }
  .kac4d0d { grid-template-columns: 1fr auto; row-gap: 4px; padding: 8px 6px 4px 10px; }
  .k571dc1 { grid-column: 1; grid-row: 1; }
  .kf43008 { grid-column: 2; grid-row: 1; }
  .k06ca36 { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 24px; padding-top: 2px; border-top: 1px solid var(--line); }
  .k06ca36 a { font-size: 11.5px; padding: 8px 0; }
  .k310c91 { top: calc(var(--edge) + 12px); left: calc(var(--edge) + 12px); right: calc(var(--edge) + 12px); }
  .k70b6b5 { height: 660px; }
  .k70b6b5 .k3ee64d .k11d1c3 { top: 150px; font-size: 12.5px; padding: 9px 14px; }
  /* phones: the photo fills the top 520 px (sky, bridge, river) and fades into the sea colour under the copy */
  .k70b6b5 .k3ee64d img { inset: 0 0 auto 0; height: 520px; object-position: 58% 50%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .k503f70::after { background: linear-gradient(180deg, rgba(11, 57, 84, 0) 30%, rgba(11, 57, 84, .58) 43%, rgba(11, 57, 84, .82) 66%, rgba(11, 57, 84, .9) 100%); }
  .k503f70 .k0a9dab { bottom: 54px; }
  .k70b6b5 .k3ee64d .kf616e8 { left: 20px; right: 20px; bottom: 14px; max-width: none; font-size: 11px; line-height: 1.35; text-align: center; }
  .k0a9dab { left: 20px; right: 20px; bottom: 24px; width: auto; }
  .k2a860f { font-size: 38px; }
  .k5fcc7c { font-size: 17px; margin-top: 10px; }
  .k255b60 { font-size: 15px; margin-top: 10px; }
  .kc4f751 { gap: 10px; margin-top: 18px; }
  .k03b6dd { height: 44px; padding: 0 20px; font-size: 12px; }
  .k0ea82e { gap: 12px; padding-top: 12px; }
  .k6cb001 { height: 156px; padding: 16px 16px 14px; }
  .k29718b { font-size: 11px; }
  .k5451b3 { font-size: 17px; }
  .k906dee { width: 34px; height: 34px; }
  .k906dee svg { width: 17px; height: 17px; }
  .ke913ea { margin-top: 64px; padding: 44px 16px; }
  .kbe499f { padding: 64px calc(var(--edge) + 16px) 0; }
  .kfde1d8 { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 26px; }
  .kfde1d8 h2, .k48d59d h2 { font-size: 27px; }
  .kbd5b84 { width: 100%; }
  .kb25ee5 { margin-top: -8px; }
  .k5b6efc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 12px; }
  .k48d59d { grid-template-columns: 1fr; gap: 36px; }
  .k0ad4b8 { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .k72f95c summary { font-size: 16px; padding: 17px 0; }
  .k5eb715 { padding-right: 0; }
  .k5490ae { margin-top: 64px; padding-top: 44px; }
  /* Compact phone buy box (audit 2026-10-11, Astra r1 HIGH): a short photo band, then name, price and pack choice above
     the sticky add bar; the answer-first intro follows the buy controls on phones (same HTML order for readers). */
  .k1d54c7 { grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
  .k270f2c { display: flex; justify-content: center; }
  .k270f2c img { width: auto; height: 200px; max-width: 100%; object-fit: contain; }
  .kf5d123 { position: static; padding-top: 0; display: flex; flex-direction: column; }
  .kf5d123 > nav { order: 0; }
  .kf5d123 h1 { order: 1; font-size: 26px; margin-top: 6px; }   /* 26 px since the H1 reads "Buy <vial> in Da Nang" (copy fix 4): price and pills stay above the phone bar */
  .kf5d123 .ka33012 { order: 2; }
  .kf5d123 .kb5e170 { order: 3; margin-top: 22px; }
  .kf5d123 .kb5e170 + .kb5e170 { margin-top: 10px; }
  .k434160 { margin-top: 10px; font-size: 26px; }
  .kd0a47b { margin-top: 14px; }
  .k1c4e69 span { height: 46px; }
  /* on phones the "Ask for stock" lines follow the pack choice, so every product's pills sit above the sticky bar */
  .ka33012 { display: flex; flex-direction: column; }
  .ka33012 > * { order: 3; }
  .ka33012 > .k434160, .ka33012 > .k6aa50b, .ka33012 > .k45a280 { order: 0; }
  .ka33012 > .kd0a47b { order: 1; }
  .ka33012 > .kb9b997, .ka33012 > .k854ace { order: 2; }
  .k1fe0a2 { margin-top: 48px; }
  .kd9ac62 { padding: 36px 0; font-size: 16px; }
  .kd9ac62 h2 { font-size: 24px; }
  .kc1006c { margin-top: 24px; }
  .k63f5c5 { margin-top: 8px; }
  .k63f5c5 h1 { font-size: 32px; }
  .k63f5c5 .kb5e170 { font-size: 17px; margin-bottom: 24px; }
  .k805bb5 { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .k805bb5 .kd12adb { height: 48px; padding: 0 24px; flex: none; }
  .kb1ae36 { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.25; }
  .kd05b5d { font-size: 13px; color: var(--muted); }
  body.has-bar { padding-bottom: 72px; }
}
@media (max-width: 599px) {
  .k0ea82e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k6cb001, .k6cb001:nth-child(n+4) { grid-column: auto; }
  .k0ea82e .k6cb001:last-child { grid-column: 1 / -1; height: 112px; }
  .k5b6efc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd9a1f4 { font-size: 14.5px; }
  .k7581d8 { columns: 1; }
  .k369b5d { grid-template-columns: 1fr; }
  .k71722c thead { display: none; }
  .k71722c tr { display: block; border-top: 1px solid var(--line); padding: 10px 0; }
  .k71722c tbody th, .k71722c td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  .k71722c tbody th { text-align: left; }
  .k71722c td::before { content: attr(data-label); color: var(--muted); font-weight: 600; text-align: left; }
  .k71722c .k3acff2 { padding-left: 0; }
  .k71722c .kc15ee2 { display: inline; margin-left: 4px; }
  .ke1f571 td { display: block; text-align: left; }
  .ke1f571 td::before { display: block; font-size: 13px; margin-bottom: 2px; }
}

/* Photo crops: one rule per installed photo slot */
#photo-dn-2 img { object-position: 65% 50%; }
#photo-dn-3 img { object-position: 70% 50%; }
#photo-dn-4 img { object-position: 55% 50%; }
#photo-dn-8 img { object-position: 75% 50%; }