/* Doktor Ulug'bek -- the shop.
 *
 * Each product has a palette (data-theme on <html>). Colours below are variables, so
 * the home page recolours everything by switching data-theme as its slider moves, and
 * each product page just sets its own theme -- the home page behind a product's slide
 * is exactly that product page's background (--body). Layout is desktop-first with one
 * breakpoint for phones (900px).
 */

:root, [data-theme="spirulina"] {
  --ink: #10261A; --muted: #4A5E4F; --surface: #FFFFFF;
  --tint: #DCEBCD; --line: #CFDDC4; --brand: #2F6B34; --deep: #3E7A3F;
  --hero-bg: #132A18; --hero-floor: #1E361F; --hero-ink: #FFFFFF;
  --hero-muted: rgba(255,255,255,.84); --glass: rgba(255,255,255,.12);
  --glass-line: rgba(255,255,255,.3); --accent: #9BD04A; --on-accent: #10261A;
  --overlay: linear-gradient(90deg, rgba(19,42,24,.85) 0%, rgba(19,42,24,.5) 38%, rgba(19,42,24,0) 58%);
  --body: #EEF4E7;
}
[data-theme="jenshen"] {
  --ink: #1B2616; --muted: #5A5A45; --tint: #EFE3C4; --line: #E2D5B5;
  --brand: #8A6414; --deep: #7A5A1C; --hero-bg: #0C1A10; --hero-floor: #2C3A1D;
  --hero-ink: #F6EBD2; --hero-muted: rgba(246,235,210,.84); --glass: rgba(246,235,210,.1);
  --glass-line: rgba(246,235,210,.32); --accent: #D9A441; --on-accent: #1A1405;
  --overlay: linear-gradient(90deg, rgba(12,26,16,.8) 0%, rgba(12,26,16,.45) 40%, rgba(12,26,16,0) 58%);
  --body: #F7F1E3;
}
[data-theme="ganoderma"] {
  --ink: #1F1714; --muted: #5E4C40; --tint: #F0DDCB; --line: #E3CDB6;
  --brand: #8A3B1E; --deep: #7A3B24; --hero-bg: #1F1714; --hero-floor: #241915;
  --hero-ink: #F3E9DA; --hero-muted: rgba(243,233,218,.8); --glass: rgba(243,233,218,.08);
  --glass-line: rgba(243,233,218,.3); --accent: #D08A34; --on-accent: #1A1210;
  --overlay: linear-gradient(90deg, #1F1714 0%, #1F1714 38%, rgba(31,23,20,0) 56%);
  --body: #F6EEE3;
}
[data-theme="proherb"] {
  --ink: #2A1A05; --muted: #6B5530; --tint: #FBE3A8; --line: #EFD9A6;
  --brand: #7A4A08; --deep: #8A5A12; --hero-bg: #DCA033; --hero-floor: #D8983A;
  --hero-ink: #2A1A05; --hero-muted: #4A3210; --glass: rgba(255,248,230,.55);
  --glass-line: rgba(42,26,5,.22); --accent: #2A1A05; --on-accent: #FFF6E0;
  --overlay: linear-gradient(90deg, rgba(220,160,51,.7) 0%, rgba(220,160,51,.35) 40%, rgba(220,160,51,0) 56%);
  --body: #FFF6E0;
}
[data-theme="bioselensink"] {
  --ink: #0B2A4A; --muted: #3E5A78; --tint: #D4E6FB; --line: #C9DCF2;
  --brand: #1C63C9; --deep: #2B6CC4; --hero-bg: #73BEEC; --hero-floor: #DDE3EE;
  --hero-ink: #0B2A4A; --hero-muted: #173E63; --glass: rgba(255,255,255,.6);
  --glass-line: rgba(11,42,74,.22); --accent: #1C63C9; --on-accent: #FFFFFF;
  --overlay: none; --body: #EEF6FF;
}

:root { --gold: #B8923F; --radius: 22px; --t: 900ms ease; --wrap: 1312px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* only inside the Telegram Mini App (html.in-telegram, set in base.html) */
.tg-only { display: none !important; }
html.in-telegram .tg-only { display: inline-flex !important; }
body {
  margin: 0; color: var(--ink); background-color: var(--body);
  background-image: url("img/islimi-ink.9fede6473ab0.svg"); background-size: 160px;
  font: 13px/1.6 Onest, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  transition: background-color var(--t), color var(--t);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3 { margin: 0; font-family: Unbounded, sans-serif; font-weight: 600; line-height: 1.06; }
p { margin: 0; }
.wrap { width: min(var(--wrap), calc(100% - 37px)); margin: 0 auto; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.light-tile { background-image: url("img/islimi-light.fc719ce8008a.svg"); background-size: 160px; }
.ink-tile { background-image: url("img/islimi-ink.9fede6473ab0.svg"); background-size: 160px; }
.arch { border-radius: 50% 50% 22px 22px / 26% 26% 22px 22px; object-fit: cover; width: 100%; }
.theme-fade { transition: background-color var(--t), color var(--t), border-color var(--t); }

/* ---- small pieces -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px; border-radius: 773px; border: 1px solid transparent;
  font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform .2s;
}
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-deep { background: var(--deep); color: #fff; }
.btn-light { background: #F4F2EB; color: #15251A; }
.btn-ghost { border-color: var(--glass-line); background: var(--glass); color: inherit; }
.btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.icon-btn {
  width: 37px; height: 37px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; text-decoration: none;
}
.kicker {
  display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.section-title { font-size: clamp(23px, 2.63vw, 34px); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; flex-wrap: wrap; }
.divider { color: var(--gold); }
.badge-star { position: relative; width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; }
.badge-star svg.star { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge-star .ico { position: relative; display: flex; color: var(--brand); transition: color var(--t); }
.pill-sale { padding: 4px 8px; border-radius: 773px; background: #B8352A; color: #fff; font-size: 11px; font-weight: 800; }
.stars { display: inline-flex; gap: 2px; color: #E0A100; }

/* ---- header --------------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 19px; height: 75px; color: var(--ink);
}
.site-header.over { position: absolute; left: 0; right: 0; top: 0; padding: 0 43px; color: var(--hero-ink); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand img { width: 37px; height: 37px; border-radius: 50%; background: #fff; padding: 3px; }
.brand span { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.main-nav { display: flex; gap: 25px; font-size: 12px; font-weight: 500; }
.main-nav a { text-decoration: none; }
.main-nav a[aria-current] { font-weight: 800; color: var(--brand); }
.header-tools { display: flex; align-items: center; gap: 11px; }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 773px; border: 1px solid var(--line); }
.over .lang { border-color: var(--glass-line); }
.lang a {
  display: flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 773px;
  font-size: 11px; font-weight: 700; text-decoration: none;
}
.lang a[aria-current] { background: var(--ink); color: var(--surface); }
.over .lang a[aria-current] { background: var(--hero-ink); color: var(--hero-bg); }
.phone { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-decoration: none; }
.over .icon-btn { background: transparent; border-color: var(--glass-line); color: inherit; }
.menu-btn, .lang-btn, .mobile-menu, .menu-scrim { display: none; }

/* ---- hero slider (home) ------------------------------------------------------------ */
.slider {
  position: relative; height: 604px; margin-top: 19px; border-radius: 25px; overflow: hidden;
  background: var(--hero-bg); color: var(--hero-ink); transition: background-color var(--t), color var(--t);
}
.slider-track { position: absolute; inset: 0; display: flex; transition: transform 900ms cubic-bezier(.65,0,.35,1); }
.slider-track.snap { transition: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .shade { position: absolute; inset: 0; background: var(--overlay); }
.slide-copy { position: relative; width: min(464px, 100%); padding: 84px 0 0 50px; display: flex; flex-direction: column; gap: 15px; color: var(--hero-ink); }
.slide-copy h2 { font-size: clamp(34px, 3.87vw, 56px); }
.slide-copy .lead { font-size: 14px; line-height: 1.55; color: var(--hero-muted); }
.chip { align-self: flex-start; padding: 6px 11px; border-radius: 773px; background: var(--glass); border: 1px solid var(--glass-line); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cta-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.price-row .price { font-size: 26px; font-weight: 800; }
.price-row s { font-size: 14px; color: var(--hero-muted); }
.slider-controls { position: absolute; right: 43px; bottom: 31px; z-index: 3; display: flex; align-items: center; gap: 11px; color: var(--hero-ink); }
.slider-controls .counter { font-size: 11px; font-weight: 700; letter-spacing: .08em; min-width: 50px; }
.slider-controls .icon-btn { background: transparent; border-color: var(--glass-line); color: inherit; }
.dots { display: flex; align-items: center; gap: 4px; }
.dots button { height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.dots span { display: block; width: 8px; height: 6px; border-radius: 3px; background: var(--glass-line); transition: width .5s, background-color .5s; }
.dots [aria-current="true"] span { width: 31px; background: currentColor; }

/* where each hero photo keeps its subject in frame */
.focus-spirulina { object-position: 87% 50%; } .focus-jenshen { object-position: 100% 50%; }
.focus-ganoderma { object-position: 100% 50%; } .focus-proherb { object-position: 72% 50%; }
.focus-bioselensink { object-position: 100% 50%; }

/* ---- trust strip ------------------------------------------------------------------ */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 19px; }
.trust > div { display: flex; gap: 11px; align-items: center; padding: 14px 17px; border-radius: 15px; background: var(--surface); }
.trust strong { display: block; font-size: 12px; }
.trust span { font-size: 11px; color: var(--muted); }

/* ---- 3D carousel -------------------------------------------------------------------- */
.carousel { position: relative; height: 495px; overflow: hidden; border-radius: 25px; perspective: 1600px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.carousel.dragging { cursor: grabbing; }
.carousel.dragging .c-card { transition: none; }
.carousel img { -webkit-user-drag: none; pointer-events: none; }
.c-card { position: absolute; left: 50%; top: 23px; perspective: 1200px; width: 340px; height: 449px; margin-left: -170px; transition: transform 850ms cubic-bezier(.22,1,.36,1), opacity 850ms; }
.c-inner { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden; background: var(--hero-floor); box-shadow: 0 15px 31px rgba(20,30,20,.16); transition: transform 250ms ease-out, box-shadow 850ms; }
.c-card.front .c-inner { box-shadow: 0 31px 62px rgba(20,30,20,.35); }
.c-inner > img { position: absolute; left: -31px; top: -23px; width: calc(100% + 62px); height: calc(100% + 47px); max-width: none; object-fit: cover; transition: transform 250ms ease-out; }
.c-inner .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, var(--hero-floor) 86%); }
.c-copy { position: absolute; left: 23px; right: 23px; bottom: 23px; display: flex; flex-direction: column; gap: 8px; color: var(--hero-ink); transition: transform 250ms ease-out; }
.c-copy .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.c-copy h3 { font-size: 25px; }
.c-copy .row { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 4px; }
.c-copy .row strong { font-size: 17px; }
.c-copy .btn { min-height: 37px; padding: 0 17px; background: var(--accent); color: var(--on-accent); }
.c-copy .rating { font-size: 11px; color: var(--hero-muted); }
.c-pick { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.c-card.front .c-pick { display: none; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 6px; }
.carousel-controls .dots span { background: var(--line); }
.carousel-controls .dots [aria-current="true"] span { background: var(--ink); }

/* ---- home: products, ordering, faq --------------------------------------------------- */
.block { margin-top: 75px; }
.steps-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 19px; }
.card { padding: 31px; border-radius: 25px; background: var(--surface); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; margin-top: 22px; }
.steps .n { font-family: Unbounded, sans-serif; font-size: 25px; font-weight: 600; color: var(--brand); transition: color var(--t); }
.steps strong { display: block; margin: 6px 0 4px; font-size: 14px; }
.steps p { font-size: 12px; color: var(--muted); }
.call-card { padding: 31px; border-radius: 25px; background-color: var(--deep); color: #fff; display: flex; flex-direction: column; gap: 13px; transition: background-color var(--t); }
.call-card h3 { font-size: 22px; }
.call-card .num { font-size: 17px; font-weight: 800; color: #fff; text-decoration: none; }
.call-card .btns { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.faq { display: flex; gap: 22px; align-items: stretch; }
.faq-arch { width: 325px; flex-shrink: 0; padding: 116px 31px 31px; border-radius: 163px 163px 25px 25px; background-color: var(--deep); color: #fff; display: flex; flex-direction: column; gap: 14px; transition: background-color var(--t); }
.faq-arch .kicker { color: rgba(255,255,255,.75); }
.faq-arch h2 { font-size: 26px; }
.faq-arch p { color: rgba(255,255,255,.82); }
.faq-arch .btn { margin-top: auto; }
.accordion { flex-grow: 1; align-self: flex-start; border-radius: 22px; background: var(--surface); overflow: hidden; }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 19px 22px; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion .n { width: 26px; flex-shrink: 0; font-family: Unbounded, sans-serif; font-size: 11px; font-weight: 600; color: var(--brand); }
.accordion .q { flex-grow: 1; font-size: 14px; font-weight: 700; }
.accordion .chev { display: flex; color: var(--muted); transition: transform .25s; }
.accordion details[open]:not(.closing) .chev { transform: rotate(180deg); }
.accordion .a { padding: 0 22px 20px 62px; max-width: 697px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ---- footer ------------------------------------------------------------------------ */
.site-footer {
  width: min(var(--wrap), calc(100% - 37px)); margin: 75px auto 19px; padding: 31px 43px; border-radius: 25px; background-color: var(--tint);
  color: var(--muted); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 25px;
  font-size: 11px; transition: background-color var(--t);
}
.site-footer strong { display: block; color: var(--ink); font-size: 12px; margin-bottom: 8px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer .col { display: flex; flex-direction: column; gap: 6px; }
.social { display: flex; gap: 8px; }
.social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); }

/* ---- product page --------------------------------------------------------------------- */
.p-hero { position: relative; height: 604px; margin-top: 19px; border-radius: 25px; overflow: hidden; color: var(--hero-ink); background: var(--hero-floor); }
.p-hero .photo { position: absolute; inset: 0; }
.p-hero .photo img { width: 100%; height: 100%; object-fit: cover; }
.p-hero .photo .shade { position: absolute; inset: 0; background: var(--overlay); }
.p-copy { position: relative; z-index: 1; width: 464px; margin: 62px 0 0 50px; display: flex; flex-direction: column; gap: 17px; }
.p-copy .crumbs { font-size: 11px; color: var(--hero-muted); }
.p-copy .crumbs a { color: var(--hero-muted); }
.p-copy h1 { font-size: clamp(37px, 4.34vw, 62px); }
.p-copy .lead { font-size: 14px; line-height: 1.55; color: var(--hero-muted); max-width: 418px; }
.buy { width: 434px; max-width: 100%; margin-top: 8px; padding: 15px 17px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(11px); display: flex; flex-direction: column; gap: 13px; }
.buy .row { display: flex; gap: 9px; align-items: center; }
.qty { display: flex; align-items: center; height: 40px; border-radius: 20px; border: 1px solid var(--glass-line); }
.qty button { width: 37px; height: 39px; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.qty input { width: 26px; border: 0; background: none; text-align: center; font: inherit; font-size: 14px; font-weight: 700; color: inherit; }
.qty input { padding: 0; }
.qty button { border-radius: 50%; }
.qty button:focus { outline: none; }
.qty button:hover { background: rgba(127,127,127,.14); }
.qty button:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }   /* keyboard only */
.qty input:focus { outline: none; }   /* the caret shows where you type */
.buy .btn { flex-grow: 1; }
.buy-rating { font-size: 12px; color: var(--hero-muted); text-decoration: none; }
.buy-rating strong { color: var(--hero-ink); }
.buy-rating:hover { text-decoration: underline; }
.facts { position: relative; z-index: 1; margin: 19px auto 0; display: flex; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.facts > div { flex: 1 1 0; padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts b { font-family: Unbounded, sans-serif; font-size: 30px; font-weight: 600; line-height: 1; }
.facts span { font-size: 12px; color: var(--muted); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.panel { padding: 23px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; }
.panel h3 { font-family: Onest, sans-serif; font-size: 15px; font-weight: 700; }
.rows > div { display: flex; justify-content: space-between; gap: 13px; padding: 9px 0; font-size: 13px; }
.rows > div + div { border-top: 1px solid var(--line); }
.rows.stacked > div { flex-direction: column; gap: 3px; }
.rows.stacked span { font-size: 11px; color: var(--muted); }
.warn { margin-top: auto; display: flex; gap: 9px; padding: 13px; border-radius: 13px; background: #FFF6E3; border: 1px solid #EFD9A6; color: #4A3B12; font-size: 11px; line-height: 1.5; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.review { margin: 0; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; flex-grow: 1; font-size: 13px; line-height: 1.65; }
.review figcaption { display: flex; align-items: center; gap: 9px; }
.review .avatar { width: 31px; height: 31px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-weight: 800; }
.rating-sum { display: flex; align-items: center; gap: 14px; }
.rating-sum b { font-family: Unbounded, sans-serif; font-size: 34px; font-weight: 600; line-height: 1; }
.trust-band { margin-top: 43px; padding: 26px 31px; border-radius: 22px; background-color: var(--tint); display: flex; gap: 31px; }
.trust-band > div { flex: 1 1 0; display: flex; gap: 13px; align-items: center; }
.trust-band strong { display: block; font-size: 14px; }
.trust-band span { font-size: 11px; color: var(--muted); }

/* product signature sections */
.sig { display: flex; gap: 37px; align-items: stretch; }
.sig .photo-col { width: 340px; flex-shrink: 0; }
.sig .copy { flex-grow: 1; display: flex; flex-direction: column; gap: 19px; }
.dose-card { padding: 19px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.dot-grid { display: grid; grid-template-columns: repeat(10, 17px); gap: 6px; }
.dot-grid i { width: 17px; height: 17px; border-radius: 50%; background: #E4ECDD; }
.dot-grid i.on { background: var(--brand); }
.dot-grid i.up { border: 2px solid var(--brand); background: var(--tint); }
.big-range { font-family: Unbounded, sans-serif; font-size: 23px; font-weight: 600; }
.band { padding: 43px; border-radius: 28px; background-color: var(--tint); display: flex; gap: 43px; }
.band .photo-col { width: 325px; flex-shrink: 0; }
.band-copy { flex-grow: 1; display: flex; flex-direction: column; gap: 17px; }
.day-bar { display: flex; height: 50px; border-radius: 14px; overflow: hidden; }
.day-bar .yes { flex: 2; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; padding: 0 17px; font-weight: 800; }
.day-bar .no { flex: 3; background: repeating-linear-gradient(135deg, #F4DCD6 0 9px, #ECCDC6 9px 19px); color: #7A2A22; display: flex; align-items: center; padding: 0 17px; font-weight: 700; }
.ticks { display: flex; font-size: 11px; color: var(--muted); }
.ticks span { flex: 1; }
.weeks { display: flex; gap: 4px; }
.weeks span { flex: 1; height: 34px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.weeks .rest { flex: 3; background: none; border: 1px dashed var(--muted); color: var(--muted); }
.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chips span { padding: 9px 14px; border-radius: 773px; background: var(--surface); font-size: 12px; }
.step-list { display: flex; flex-direction: column; gap: 11px; }
.step-list > div { display: flex; gap: 17px; padding: 20px; border-radius: 19px; background: var(--surface); border: 1px solid var(--line); }
.step-list b { font-family: Unbounded, sans-serif; font-size: 28px; font-weight: 600; line-height: 1; color: var(--accent); }
.duo { position: relative; padding: 43px; border-radius: 28px; background-color: var(--tint); overflow: hidden; }
.duo-row { display: flex; gap: 19px; align-items: stretch; }
.duo-row .ing { flex: 1 1 0; padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.duo-row .ing b { font-family: Unbounded, sans-serif; font-size: 40px; font-weight: 600; line-height: 1; color: #B8641A; }
.duo-row .img { width: 279px; flex-shrink: 0; }
.elements { position: relative; display: flex; gap: 14px; }
.elements::before { content: ""; position: absolute; left: 54px; right: 54px; top: 54px; height: 3px; background: linear-gradient(90deg, #3FA34D, #A9B4C2, #F28C28); }
.elements > div { position: relative; flex: 1 1 0; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sphere { width: 65px; height: 65px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 9px 19px rgba(11,42,74,.18); }
.elements b { font-family: Unbounded, sans-serif; font-size: 25px; font-weight: 600; }
.once { display: flex; gap: 15px; align-items: center; padding: 17px 20px; border-radius: 17px; background: var(--accent); color: #fff; }
.once b { font-family: Unbounded, sans-serif; font-size: 34px; font-weight: 600; }

/* dark page: Ganoderma below its hero stays light like the rest (the hero carries the mood) */

/* ---- about ------------------------------------------------------------------------------- */
.about-hero { margin-top: 0; padding: 50px 43px; border-radius: 28px; background-color: var(--deep); color: #fff; display: flex; gap: 43px; align-items: center; }
.about-hero h1 { font-size: clamp(26px, 2.94vw, 40px); }
.about-hero .lead { font-size: 14px; line-height: 1.6; color: #F1F5EE; max-width: 480px; }
.about-hero .arches { width: 434px; flex-shrink: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: end; }
.details-table { flex-grow: 1; padding: 9px 25px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.details-table > div { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 19px; padding: 14px 0; }
.details-table > div + div { border-top: 1px solid var(--line); }
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.doc { padding: 25px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.doc .num { font-family: Unbounded, sans-serif; font-size: 26px; font-weight: 600; }
.status { padding: 4px 9px; border-radius: 773px; font-size: 11px; font-weight: 800; }
.status.valid { background: #E3F1DD; color: #1F5A25; }
.status.renewing { background: #FFF1D6; color: #7A4A08; }
.status.expired { background: #F6DAD6; color: #7A2A22; }
.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.cta-band { padding: 43px; border-radius: 28px; background-color: var(--deep); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 31px; }

/* ---- order ---------------------------------------------------------------------------------- */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 25px; align-items: start; margin-top: 25px; }
.form-card { padding: 25px; border-radius: 22px; background: var(--surface); display: flex; flex-direction: column; gap: 15px; }
.form-card + .form-card { margin-top: 15px; }
.step-head { display: flex; align-items: center; gap: 11px; }
.step-head .num { width: 25px; height: 25px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.step-head h2 { font-family: Onest, sans-serif; font-size: 17px; font-weight: 800; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 40px; padding: 0 13px; border-radius: 11px; border: 1px solid #C9D0C3; background: #fff; font: inherit; font-size: 13px; color: var(--ink); }
.field textarea { padding: 11px 13px; line-height: 1.5; resize: vertical; }
.field .error { color: #A1291F; font-size: 11px; }
.hint { font-size: 11px; color: var(--muted); }
.choices { display: flex; gap: 11px; margin: 0; padding: 0; border: 0; }
.choice { flex: 1 1 0; display: flex; gap: 11px; align-items: flex-start; padding: 14px 15px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--brand); background: #F3F8EE; }
.choice input { margin-top: 3px; width: 14px; height: 14px; accent-color: var(--brand); }
.choice > span { display: flex; flex-direction: column; gap: 3px; color: var(--ink); font-size: 13px; }
.choice strong { display: block; font-size: 13px; }
.choice > span > span { font-size: 11px; line-height: 1.45; color: var(--muted); }
.note-box { padding: 11px 13px; border-radius: 11px; background: #EEF3E9; font-size: 11px; color: #2F4A33; }
.cart-rows > div { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.cart-rows > div + div { border-top: 1px solid var(--line); }
.cart-rows .thumb { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.cart-rows .thumb img { width: 43px; height: 43px; object-fit: contain; }
.cart-rows .name { flex-grow: 1; }
.cart-rows .qty { height: 34px; border-color: var(--line); }
.cart-rows .qty button { width: 30px; height: 32px; }
.totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.totals .discount { color: #2F6B34; font-weight: 700; }
.totals .grand { font-size: 14px; font-weight: 800; }
.totals .grand b { font-size: 22px; }
.form-errors { padding: 11px 13px; border-radius: 11px; background: #FBE6E3; color: #7A2A22; }


/* ---- basket: badge, the panel under it, the flying product ------------------------------- */
.basket { position: relative; }
.basket-btn { position: relative; }
.basket-count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; }
.basket-panel { position: absolute; right: -6px; top: calc(100% + 11px); z-index: 30; width: 270px; padding: 13px; border-radius: 16px; background: #fff; color: #15251A; box-shadow: 0 20px 49px rgba(15,30,20,.28); display: flex; flex-direction: column; gap: 9px; transform-origin: top right; animation: basket-pop 320ms cubic-bezier(.2,.9,.3,1.25) both; }
.basket-panel::before { content: ""; position: absolute; right: 18px; top: -5px; width: 11px; height: 11px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
@keyframes basket-pop { from { opacity: 0; transform: translateY(-9px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes basket-check { from { opacity: 0; transform: scale(.5) rotate(-20deg); } to { opacity: 1; transform: none; } }
.bp-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.bp-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #2F6B34; }
.bp-check { width: 19px; height: 19px; border-radius: 50%; background: #2F6B34; color: #fff; display: grid; place-items: center; animation: basket-check 380ms 120ms cubic-bezier(.2,.9,.3,1.3) both; }
.bp-close { width: 27px; height: 27px; border: 0; border-radius: 50%; background: #F2F4EF; color: #4A5E4F; display: grid; place-items: center; cursor: pointer; }
.bp-items { display: flex; flex-direction: column; gap: 7px; max-height: 207px; overflow-y: auto; }
.bp-item { display: flex; align-items: center; gap: 9px; border-radius: 13px; }
.bp-item.just-added { animation: basket-check 300ms ease both; }
.bp-item .thumb { width: 41px; height: 41px; flex-shrink: 0; border-radius: 11px; background: var(--tint); display: grid; place-items: center; }
.bp-item .thumb img { width: 36px; height: 36px; object-fit: contain; }
.bp-item strong { display: block; font-size: 12px; }
.bp-item span.line { font-size: 11px; color: #5A6B5E; }
.bp-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid #E6EBE1; font-size: 11px; color: #4A5E4F; }
.bp-total strong { font-size: 14px; color: #15251A; }
.bp-hint { padding: 6px 8px; border-radius: 8px; background: #F3F8EE; font-size: 11px; line-height: 1.4; color: #2F4A33; }
.basket-panel .btn { min-height: 37px; width: 100%; }
.bp-continue { height: 30px; border: 0; background: none; color: #4A5E4F; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.add-btn { position: relative; }
.add-btn .add-idle { display: inline-flex; align-items: center; gap: 8px; }
.add-btn .add-done { display: none; }
.add-btn.added .add-idle { display: none; }
.add-btn.added .add-done { display: inline-flex; align-items: center; gap: 7px; }
.add-btn.added .add-done svg { animation: basket-check 320ms cubic-bezier(.2,.9,.3,1.3) both; }
.fly { position: fixed; z-index: 60; pointer-events: none; }
.fly > span { width: 47px; height: 47px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 9px 23px rgba(0,0,0,.28); display: grid; place-items: center; }
.fly img { width: 37px; height: 37px; object-fit: contain; }
.slider { touch-action: pan-y; }
.slider.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.slider img { -webkit-user-drag: none; }

/* ---- phones ------------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .wrap { width: calc(100% - 21px); }
  .main-nav, .phone, .lang { display: none; }
  .site-header { height: 56px; }
  .site-header.over { padding: 0 17px; }
  .brand span { font-size: 13px; white-space: nowrap; }
  .brand img { width: 35px; height: 35px; }
  .header-tools { gap: 7px; }
  .icon-btn { width: 38px; height: 38px; }
  .chip { font-size: 11px; }
  .menu-btn, .lang-btn { display: inline-flex; }
  .lang-btn { position: relative; }
  .lang-code { position: absolute; right: -5px; bottom: -3px; padding: 0 4px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 9px; font-weight: 800; line-height: 14px; letter-spacing: .02em; }
  .lang-menu { position: absolute; right: 101px; top: 58px; width: 175px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 16px 35px rgba(20,30,20,.18); display: flex; flex-direction: column; color: var(--ink); }
  .lang-menu[hidden] { display: none; }
  .lang-menu a { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; }
  .lang-menu a[aria-current] { background: var(--tint); }
  .mobile-menu nav a { display: flex; justify-content: space-between; align-items: center; height: 49px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; text-decoration: none; }
  .slider { height: 577px; margin-top: 10px; border-radius: 25px; }
  .slide > img { height: 314px; object-position: 82% 60%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .slide .shade { display: none; }
  .slide-copy { padding: 262px 19px 0; gap: 10px; }
  .slide-copy h2 { font-size: 35px; }
  .slide-copy .lead { font-size: 13px; }
  .slide-copy .price-row .price { font-size: 23px; }
  .slide-copy .ghost-cta { display: none; }
  .slider-controls { left: 19px; right: 19px; top: 16px; bottom: auto; justify-content: space-between; }
  .slider-controls .icon-btn { display: none; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .trust > div { flex-direction: column; align-items: flex-start; padding: 14px; }
  .block { margin-top: 49px; }
  .carousel { height: 367px; border-radius: 21px; margin: 0 -10px; }
  .c-card { top: 17px; width: 227px; height: 323px; margin-left: -114px; }
  .c-copy { left: 17px; right: 17px; bottom: 17px; }
  .c-copy h3 { font-size: 19px; }
  .c-copy .row strong { font-size: 15px; white-space: nowrap; }
  .c-copy .btn { padding: 0 14px; min-height: 37px; }
  .c-copy .eyebrow, .c-copy .rating { display: none; }
  .carousel-controls .icon-btn { display: none; }
  .steps-grid, .faq, .sig, .band, .duo-row, .about-hero, .order-grid { flex-direction: column; display: flex; }
  .steps { grid-template-columns: 1fr; }
  .card, .call-card { padding: 21px 17px; border-radius: 21px; }
  .faq-arch { width: 100%; padding: 96px 21px 25px; border-radius: 140px 140px 21px 21px; }
  .accordion .a { padding: 0 17px 19px 17px; }
  .accordion summary { padding: 17px; }
  .site-footer { width: calc(100% - 21px); margin: 49px auto 10px; padding: 25px 19px; grid-template-columns: 1fr; border-radius: 21px; }
  .p-hero { height: auto; padding-bottom: 24px; margin-top: 10px; background: var(--hero-bg); }
  .p-hero .photo { position: relative; height: 314px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .p-hero .photo .shade { display: none; }
  .rating-sum { flex-wrap: wrap; }
  .mobile-menu .btn-light { background: #FFFFFF; border-color: var(--line); }
  .p-copy { width: auto; margin: -35px 14px 0; }
  .buy { width: 100%; }
  .buy .row { flex-wrap: wrap; }
  .buy .btn { flex: 1 1 148px; }
  .day-bar { height: auto; min-height: 49px; font-size: 11px; }
  .day-bar .yes, .day-bar .no { padding: 7px 10px; }
  .day-bar svg { display: none; }
  .weeks { gap: 3px; }
  .weeks span { height: 31px; font-size: 11px; }
  .weeks .rest { flex: 2.5; }
  .facts { margin-top: 14px; flex-wrap: wrap; }
  .facts > div { flex: 1 1 45%; padding: 16px; }
  .facts > div + div { border-left: 0; }
  .facts b { font-size: 25px; }
  .cols-3, .reviews-grid, .docs, .cards-4 { grid-template-columns: 1fr; }
  .cols-3 > * { grid-column: auto !important; }
  .sig .photo-col, .band .photo-col, .duo-row .img, .about-hero .arches { width: 100%; }
  .band, .duo, .about-hero, .cta-band { padding: 25px 17px; border-radius: 25px; }
  .sig .arch, .band .arch, .duo .arch { min-height: 0 !important; height: 332px !important; }
  .dot-grid { grid-template-columns: repeat(10, 16px); gap: 6px; }
  .dot-grid i { width: 16px; height: 16px; }
  .elements { flex-direction: column; }
  .elements::before { display: none; }
  .trust-band { flex-direction: column; gap: 16px; padding: 21px 17px; }
  .details-table > div { grid-template-columns: 1fr; gap: 4px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .fields { grid-template-columns: 1fr; }
  .choices { flex-direction: column; }
  .order-grid aside { order: -1; position: static !important; }
  .basket-panel { position: fixed; left: 11px; right: 11px; top: 65px; width: auto; }
  .basket-panel::before { display: none; }
  .icon-btn { width: 44px; height: 44px; }   /* comfortable to tap, whatever the scale */
  .btn { min-height: 44px; }
  /* iOS zooms into a field with text under 16px */
  .field input, .field select, .field textarea, .qty input { font-size: 16px; }
}

/* ---- phone menu: a shade that slides down and pushes the page with it ------------------
   Only transform and opacity move (the GPU does them, so they stay smooth), on one curve
   that starts quickly and settles softly. site.js sets --menu-h to the menu's height. */
@media (max-width: 900px) {
  .mobile-menu {
    display: flex; flex-direction: column; gap: 12px;
    position: fixed; left: 0; right: 0; top: 0; z-index: 50; max-height: 100dvh; overflow-y: auto;
    padding: 12px 20px 22px; border-radius: 0 0 26px 26px;
    background-color: #F4F2EB; color: #15251A; box-shadow: 0 18px 40px rgba(20, 30, 20, .14);
    transform: translateY(-100%); visibility: hidden;
    transition: transform var(--menu-t) var(--menu-ease), visibility 0s linear var(--menu-t);
    will-change: transform;
  }
  .mobile-menu .site-header { height: 56px; }
  .mobile-menu nav a { display: flex; justify-content: space-between; align-items: center; height: 52px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; text-decoration: none; }
  .mobile-menu .btn { width: 100%; }
  .mobile-menu .btn-light { background: #FFFFFF; border-color: var(--line); }
  /* the rows follow the shade a beat later, so it reads as one soft motion */
  .mobile-menu nav a, .mobile-menu > .btn { opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .35s var(--menu-ease); }
  .page { transition: transform var(--menu-t) var(--menu-ease); }
  .menu-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(16, 24, 18, .28); opacity: 0; visibility: hidden; transition: opacity var(--menu-t) ease, visibility 0s linear var(--menu-t); }

  html.menu-open .mobile-menu { transform: none; visibility: visible; transition: transform var(--menu-t) var(--menu-ease), visibility 0s; }
  html.menu-open .page { transform: translateY(var(--menu-h, 70vh)); }
  html.menu-open .menu-scrim { opacity: 1; visibility: visible; transition: opacity var(--menu-t) ease, visibility 0s; }
  html.menu-open .mobile-menu nav a, html.menu-open .mobile-menu > .btn { opacity: 1; transform: none; }
  html.menu-open .mobile-menu nav a:nth-child(1) { transition-delay: .08s; }
  html.menu-open .mobile-menu nav a:nth-child(2) { transition-delay: .11s; }
  html.menu-open .mobile-menu nav a:nth-child(3) { transition-delay: .14s; }
  html.menu-open .mobile-menu nav a:nth-child(4) { transition-delay: .17s; }
  html.menu-open .mobile-menu > .btn { transition-delay: .2s; }
}
:root { --menu-t: 460ms; --menu-ease: cubic-bezier(.22, 1, .36, 1); }

/* small phones (360px): the name shrinks a little so it clears the three buttons;
   on the smallest (320px) only the round logo is left */
@media (max-width: 380px) {
  .brand { gap: 6px; }
  .brand span { font-size: 11.5px; letter-spacing: 0; }
  .header-tools { gap: 6px; }
}
@media (max-width: 340px) {
  .brand span { display: none; }
}

/* ---- page entrance: the content rises a little and settles with a slight bounce ----
   Only the top blocks, one after another; further down they are simply there. The
   header does not move. transform/opacity only, and nothing moves under reduced motion. */
@keyframes page-rise {
  0%   { opacity: 0; transform: translateY(24px); }
  62%  { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
main > .wrap > * { animation: page-rise .68s cubic-bezier(.22, .8, .3, 1) both; }
main > .wrap > :nth-child(2) { animation-delay: .06s; }
main > .wrap > :nth-child(3) { animation-delay: .12s; }
main > .wrap > :nth-child(4) { animation-delay: .18s; }
main > .wrap > :nth-child(n+5) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.trust-band .badge-star rect, .call-card .badge-star rect, .panel .badge-star rect { fill: var(--surface); }
.panel .badge-star rect { fill: var(--tint); }