/* Polish overrides for tidal-form — owned by one agent per pass; scope every rule. Loaded last. */
/* Every selector starts with [data-theme="tidal-form"] (set on <body> by app.js renderSite), so
   nothing here can reach another concept, the gallery, or the Signature Sky UX lab. */

/* ---------- Tokens ---------- */
/* #6d819a measured 3.8:1 on #f6fafb and 4.0:1 on white. #54687f keeps the cool slate tone:
   5.5:1 page, 5.7:1 white, 4.75:1 on the mint CTA band, 5.0:1 on the shipping card. */
[data-theme="tidal-form"] { --muted: #54687f; --tf-field-line: #8397ab; }

/* ---------- Motion-off / reduced motion: entrance animations must not freeze at frame 0 ----------
   base.css pauses every animation under body.motion-off (set for prefers-reduced-motion and the dock's
   "Motion off"). Entrance keyframes start at opacity 0, so dialogs, the phone menu, FAQ answers, the
   shipping steps and (after a reload with Motion off) the hero copy and vials stayed invisible. */
[data-theme="tidal-form"].motion-off :is(.dialog, .mobile-links, .vt-faq-answer, .vt-steps li, .hero .hero-copy > *, .hero .hero-vial-holder),
[data-theme="tidal-form"].motion-off .vt-quality-proof::before { animation: none !important; }

/* ---------- Announcement bar ---------- */
[data-theme="tidal-form"] .announcement { height: auto; min-height: 34px; padding: 8px 16px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .announcement { min-height: 32px; padding: 7px 12px; gap: 7px; font-size: 12px; letter-spacing: .01em; white-space: nowrap; }
  [data-theme="tidal-form"] .announcement span + span::before { margin-right: 7px; }
}
@media (max-width: 360px) {
  /* 12px still fits at 320 (287px of 304px). */
  [data-theme="tidal-form"] .announcement { gap: 5px; padding-inline: 8px; letter-spacing: 0; }
  [data-theme="tidal-form"] .announcement span + span::before { margin-right: 5px; }
}

/* ---------- Header ---------- */
/* Logo link was 153x30: give it a 44px hit area without moving the official logo. */
[data-theme="tidal-form"] .nav-inner > a:first-child { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
[data-theme="tidal-form"] .desktop-nav { font-size: 13px; }
[data-theme="tidal-form"] .nav-access { font-size: 12px; min-height: 44px; }
/* 9px count badge -> 11px, with a white ring so it no longer touches the circle's border. */
[data-theme="tidal-form"] .cart-count { top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-size: 12px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px #f8fcfd; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .mobile-links .button { min-height: 50px; font-size: 14px; }
}

/* ---------- Page gutters: one left edge per width ----------
   1440: logo 72, hero 75, story sections 60, collection/footer 102 -> everything at 72 (5vw). */
@media (min-width: 1101px) {
  [data-theme="tidal-form"] .wrap { max-width: 1500px; }
  [data-theme="tidal-form"] .hero { --hero-pad: 5vw; }
  [data-theme="tidal-form"] .vt-section { width: min(90%, 1420px); }
  [data-theme="tidal-form"] .vt-shipping-main { width: calc(100% - 112px); max-width: 1420px; }
}
@media (min-width: 1600px) {
  [data-theme="tidal-form"] .hero { --hero-pad: 40px; }
  [data-theme="tidal-form"] .hero .hero-inner { max-width: 1500px; }
}
/* Phones: hero 23px and sections 20px vs wrap 21.45px -> all on --mobile-gutter. */
@media (max-width: 760px) {
  [data-theme="tidal-form"] .hero { --hero-pad: var(--mobile-gutter); }
  [data-theme="tidal-form"] .vt-section { width: calc(100% - 2 * var(--mobile-gutter)); }
}

/* ---------- Hero ---------- */
[data-theme="tidal-form"] .hero .hero-eyebrow { color: #4a6688; font-size: 12px; letter-spacing: .26em; }
@media (max-width: 700px) {
  [data-theme="tidal-form"] .hero .hero-eyebrow { font-size: 12px; letter-spacing: .2em; margin-bottom: 18px; }
  /* Breathing room between the buttons and the first vial cap (was ~13px). */
  [data-theme="tidal-form"] .hero .hero-scene--tidal { margin-top: 20px; }
}
@media (max-width: 380px) {
  /* "High standards." wrapped to "High / standards." at 39px; keep the two-line headline. */
  [data-theme="tidal-form"] .hero .hero-title { font-size: clamp(34px, 11.2vw, 40px); }
  /* Buttons wrapped at 156px and 112px: stack them at one shared width. */
  [data-theme="tidal-form"] .hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  [data-theme="tidal-form"] .hero .hero-button { width: 100%; padding-inline: 20px; font-size: 13px; }
}

/* ---------- Benefit strip ---------- */
[data-theme="tidal-form"] .benefit { font-size: 15px; }
@media (max-width: 760px) {
  /* Top-aligned so a two-line label ("Same-day / shipping") doesn't lift its icon out of the row. */
  [data-theme="tidal-form"] .benefit { justify-content: flex-start; padding: 4px 8px; font-size: 12px; line-height: 1.35; text-wrap: balance; }
}
@media (max-width: 360px) {
  [data-theme="tidal-form"] .benefit { padding-inline: 4px; }
}

/* ---------- Collection & catalog ---------- */
[data-theme="tidal-form"] .eyebrow { font-size: 12px; line-height: 1.6; }
@media (max-width: 760px) { [data-theme="tidal-form"] .eyebrow { letter-spacing: .16em; } }
[data-theme="tidal-form"] .section-heading p { max-width: 400px; font-size: 14px; line-height: 1.75; }
@media (max-width: 760px) { [data-theme="tidal-form"] .section-heading p { font-size: 15px; } }

[data-theme="tidal-form"] .filter-tabs button { min-height: 44px; padding: 10px 18px; font-size: 13px; }
[data-theme="tidal-form"] .search-box input { min-height: 44px; font-size: 13px; border-color: var(--tf-field-line); }
[data-theme="tidal-form"] .search-box .icon { top: 50%; transform: translateY(-50%); }
/* Branded clear button instead of Chromium's blue cross. */
[data-theme="tidal-form"] .search-box input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-right: 2px; cursor: pointer;
  background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102044' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E");
}
@media (max-width: 760px) {
  /* Chips fill the row edge to edge (aligned with the search field); at 320 they wrap into two full rows
     instead of leaving "Copper peptides" orphaned. */
  [data-theme="tidal-form"] .filter-tabs { gap: 8px; }
  [data-theme="tidal-form"] .filter-tabs button { flex: 1 1 auto; padding-inline: 10px; font-size: 12px; }
  [data-theme="tidal-form"] .search-box input { font-size: 16px; }
}

/* Product cards: a reserved top band for the badge, so it never sits on the vial
   (390: 4px clearance; 320 and tablet widths: overlapped the cap). Solid badge backing. */
[data-theme="tidal-form"] .product-art { height: 360px; padding: 58px 0 20px; }
[data-theme="tidal-form"] .product-art img { height: 100%; width: 80%; }
[data-theme="tidal-form"] .product-badge { top: 18px; left: 18px; padding: 6px 12px; background: #fff; border: 1px solid #d7e4ec; font-size: 12px; line-height: 1.4; letter-spacing: .03em; color: #1d3a4a; }
[data-theme="tidal-form"] .product-info .family { font-size: 12px; line-height: 1.6; text-wrap: balance; }
[data-theme="tidal-form"] .product-info h3 a { display: inline-flex; align-items: center; min-height: 44px; }
[data-theme="tidal-form"] .product-info h3 { margin: 0 0 2px; }
[data-theme="tidal-form"] .product-price small { margin-top: 2px; font-size: 12px; line-height: 1.5; }
[data-theme="tidal-form"] .product-actions .button { min-height: 46px; font-size: 13px; }
[data-theme="tidal-form"] .pricing-note { font-size: 12px; line-height: 1.7; }
[data-theme="tidal-form"] .empty-results { padding: 44px 24px; border: 1px dashed #c4d3de; border-radius: 21px; background: var(--surface); font-size: 15px; line-height: 1.7; }
@media (max-width: 1050px) {
  [data-theme="tidal-form"] .product-art { height: 310px; padding-top: 54px; }
}
@media (max-width: 760px) {
  [data-theme="tidal-form"] .product-art { height: 340px; padding: 56px 0 16px; }
  [data-theme="tidal-form"] .product-badge { top: 16px; left: 16px; }
  [data-theme="tidal-form"] .product-actions .button { min-height: 48px; }
}
@media (max-width: 380px) {
  /* Two equal buttons left "View compound" 96px of text room at 320 and it broke onto two lines. */
  [data-theme="tidal-form"] .product-actions .button.primary { flex: 0 0 auto; padding-inline: 18px; }
  [data-theme="tidal-form"] .product-actions .button:not(.primary) { flex: 1 1 auto; padding-inline: 10px; }
}

/* Breadcrumbs: 10-11px links with 19px-tall hit areas -> 13px, 44px tall, readable separators. */
[data-theme="tidal-form"] .breadcrumb { align-items: center; gap: 4px 10px; margin-bottom: 12px; color: var(--ink); font-size: 13px; line-height: 1.5; }
[data-theme="tidal-form"] .breadcrumb span { color: var(--muted); }
[data-theme="tidal-form"] .breadcrumb a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--muted); text-decoration: underline; text-decoration-color: #b6c4cf; text-underline-offset: 4px; }
[data-theme="tidal-form"] .breadcrumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .breadcrumb { margin-bottom: 6px; }
  [data-theme="tidal-form"] .collection-page-intro { padding-top: 16px; }
  [data-theme="tidal-form"] .standalone-product { padding-top: 16px; }
}

/* ---------- Story sections ---------- */
[data-theme="tidal-form"] .vt-eyebrow { font-size: 12px; }
[data-theme="tidal-form"] .vt-chapter { width: 30px; height: 30px; font-size: 11px; }
[data-theme="tidal-form"] .vt-sections[data-section-theme] .vt-quality-stage .vt-art-kicker { font-size: 11px; }
/* 74px headings overflowed their half-width columns at 1440 ("A higher / standard.", "More" alone). */
@media (min-width: 761px) {
  [data-theme="tidal-form"] :is(.vt-quality, .vt-shipping, .vt-value) h2 { font-size: clamp(42px, 4.4vw, 64px); }
}
/* Collection -> first story section was 128px on phones (56 + 72) and 219px at 1440; match the ~72/130 rhythm. */
[data-theme="tidal-form"] .collection + .vt-sections .vt-quality { padding-top: 36px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .vt-eyebrow { font-size: 12px; letter-spacing: .18em; }
  [data-theme="tidal-form"] .vt-chapter { width: 30px; height: 30px; font-size: 12px; }
  [data-theme="tidal-form"] .collection + .vt-sections .vt-quality { padding-top: 16px; }
  [data-theme="tidal-form"] .vt-sections[data-section-theme] .vt-quality-stage .vt-art-kicker { font-size: 12px; }
}
@media (max-width: 360px) {
  /* 38px left orphans at 320: "More / momentum.", "A higher / standard.", CTA "next" alone. */
  [data-theme="tidal-form"] .vt-sections h2 { font-size: 30px; }
  [data-theme="tidal-form"] .vt-sections .vt-cta-band h2 { font-size: 36px; }
}
/* The caption panel (#f8fcff) had no visible edge on the #f6fafb page; one hairline frames image + caption. */
[data-theme="tidal-form"] .vt-sections[data-section-theme] .vt-quality-art { border: 1px solid #d3e3ea; }
[data-theme="tidal-form"] .vt-value-intro h2 > span { color: #6d819a; } /* large text: 3.8:1 passes 3:1, keeps the two-tone */
[data-theme="tidal-form"] .vt-principle-aside { font-size: 13px; }
@media (max-width: 760px) { [data-theme="tidal-form"] .vt-principle-aside { font-size: 14px; } }

/* Shipping card: darker greens on the mint gradient (#527976 / #668d80 were 4.2:1 / 3.2:1). */
[data-theme="tidal-form"] .vt-shipping { --vt-muted: #456a66; }
[data-theme="tidal-form"] .vt-steps p { color: #43675b; font-size: 14px; }
[data-theme="tidal-form"] .vt-step-number { color: #4a6f63; font-size: 12px; }
@media (max-width: 760px) { [data-theme="tidal-form"] .vt-steps p { font-size: 15px; } }
/* The kit photo is a dark studio shot: frame it as a still photograph instead of a tilting black box
   that left mint bands above and below it and peeking orbit rings. */
[data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-shipping-stage { height: auto; aspect-ratio: 3 / 2; border-radius: 22px 8px 22px 8px; background: #0b0f14; box-shadow: 0 18px 40px #0f3a3224; }
[data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-shipping-stage .vt-shipping-kit { inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; animation: none; transform: none; filter: none; }
[data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-ship-orbit { display: none; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-shipping-stage { border-radius: 18px 6px 18px 6px; }
}

/* CTA band (mint gradient): eyebrow 3.1:1, paragraph 3.2:1, fine print 2.7:1 -> all >= 4.6:1. */
[data-theme="tidal-form"] .vt-cta-band > .vt-eyebrow { color: #4d6d79; font-size: 12px; }
[data-theme="tidal-form"] .vt-cta-band > p:not(.vt-eyebrow) { color: #506a7c; }
[data-theme="tidal-form"] .vt-cta-fine { color: #4e6a70; font-size: 12px; letter-spacing: .04em; }

/* ---------- Footer ---------- */
[data-theme="tidal-form"] .footer p { font-size: 13px; line-height: 1.8; }
[data-theme="tidal-form"] .footer h4 { font-size: 13px; }
[data-theme="tidal-form"] .footer ul { font-size: 13px; }
[data-theme="tidal-form"] .footer .button.small { min-height: 44px; font-size: 13px; }
[data-theme="tidal-form"] .footer-bottom { font-size: 12px; line-height: 1.7; }
[data-theme="tidal-form"] .footer-bottom a { min-height: 44px; }

/* ---------- Product detail (full page + quick-view dialog) ---------- */
[data-theme="tidal-form"] .micro,
[data-theme="tidal-form"] .dialog .micro { font-size: 12px !important; line-height: 1.65 !important; }
[data-theme="tidal-form"] .detail-facts { font-size: 13px; }
[data-theme="tidal-form"] .detail-price + .micro { margin-bottom: 14px; }
[data-theme="tidal-form"] .quantity output { font-size: 15px; }
[data-theme="tidal-form"] .text-button { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; color: var(--muted); text-underline-offset: 3px; }
[data-theme="tidal-form"] .detail-copy .text-button + br { display: none; }
[data-theme="tidal-form"] .detail-copy .text-button { margin-right: 18px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .text-button { min-height: 44px; }
  [data-theme="tidal-form"] .detail-facts { font-size: 13px; }
}

/* ---------- Resources ---------- */
[data-theme="tidal-form"] .resource-page > p.micro { max-width: 560px; margin-bottom: 0; font-size: 16px !important; line-height: 1.7 !important; }
[data-theme="tidal-form"] .resource-page h1 { margin-bottom: 18px; }
[data-theme="tidal-form"] .resource-card { display: flex; flex-direction: column; align-items: flex-start; }
[data-theme="tidal-form"] .resource-card > .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: #e3f3fc; color: var(--ink); }
[data-theme="tidal-form"] .resource-card:nth-child(2) > .icon { background: #dffaf0; }
[data-theme="tidal-form"] .resource-card h2 { margin: 24px 0 12px; line-height: 1.25; }
[data-theme="tidal-form"] .resource-card p { margin-bottom: 24px; font-size: 14px; line-height: 1.75; }
[data-theme="tidal-form"] .resource-card .button { margin-top: auto; min-height: 46px; font-size: 13px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .resource-page h1 { margin-bottom: 14px; }
  [data-theme="tidal-form"] .resource-page > p.micro { font-size: 16px !important; }
  [data-theme="tidal-form"] .resource-card h2 { margin-top: 20px; }
  [data-theme="tidal-form"] .resource-card p { font-size: 15px; }
}

/* ---------- Dialogs: basket, request/contact form, quality, usage, success ---------- */
[data-theme="tidal-form"] .dialog p { font-size: 14px; line-height: 1.8; }
[data-theme="tidal-form"] .dialog .eyebrow { font-size: 12px; }
[data-theme="tidal-form"] .cart-name small { font-size: 13px; line-height: 1.5; }
[data-theme="tidal-form"] .cart-empty p { font-size: 15px; }
[data-theme="tidal-form"] .field { gap: 8px; font-size: 13px; }
[data-theme="tidal-form"] .field input,
[data-theme="tidal-form"] .field textarea { border-color: var(--tf-field-line); background: #fbfdfe; font-size: 14px; }
[data-theme="tidal-form"] .field input:focus,
[data-theme="tidal-form"] .field textarea:focus { border-color: #2f8f7a; outline: 3px solid #a4efd666; outline-offset: 1px; }
/* The privacy note sat 4px under the textarea with ~60px empty below it. */
[data-theme="tidal-form"] #contact-form > .micro { margin: 14px 0 0; }
[data-theme="tidal-form"] #contact-form .form-status { min-height: 20px; margin: 8px 0 14px; font-size: 13px; }
/* Success: check mark leads, then the heading. */
[data-theme="tidal-form"] .dialog:has(> .success-mark) { display: flex; flex-direction: column; align-items: flex-start; }
[data-theme="tidal-form"] .dialog:has(> .success-mark) > .success-mark { order: -1; margin: 0 0 22px; }
[data-theme="tidal-form"] .quality-list div { font-size: 13px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .dialog p { font-size: 14px; }
  [data-theme="tidal-form"] .dialog input,
  [data-theme="tidal-form"] .dialog textarea { font-size: 16px; }
  /* One full-width primary action per phone dialog. */
  [data-theme="tidal-form"] .dialog > .button.primary,
  [data-theme="tidal-form"] .dialog .cart-empty .button.primary,
  [data-theme="tidal-form"] #contact-form > .button.primary { width: 100%; }
  [data-theme="tidal-form"] .dialog:has(> .success-mark) > .button.primary { align-self: stretch; }
  /* Basket rows: at 320 the stepper squeezed the price into "$29.00 /" + "concept price".
     Name + Remove share the top line, price under it, stepper below. */
  [data-theme="tidal-form"] .cart-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img price price" "img qty qty"; column-gap: 16px; row-gap: 2px; align-items: center; padding: 18px 0; }
  [data-theme="tidal-form"] .cart-row > img { grid-area: img; align-self: start; width: 56px; height: 80px; }
  [data-theme="tidal-form"] .cart-row .cart-name { display: contents; }
  [data-theme="tidal-form"] .cart-name strong { grid-area: name; font-size: 16px; }
  [data-theme="tidal-form"] .cart-name small { grid-area: price; margin: 0 0 10px; font-size: 13px; }
  [data-theme="tidal-form"] .cart-name .text-button { grid-area: remove; justify-self: end; padding: 0 2px; }
  [data-theme="tidal-form"] .cart-row .quantity { grid-area: qty; justify-self: start; }
}

/* ---------- Researcher gate ---------- */
[data-theme="tidal-form"] .gate-fine { font-size: 12px !important; line-height: 1.7 !important; }
[data-theme="tidal-form"] .gate-check input { width: 22px; height: 22px; margin-top: 1px; }
[data-theme="tidal-form"] .gate-exit { width: fit-content; margin-inline: auto; padding: 10px 14px; font-size: 13px; color: #4d5f6d; text-align: center; }
[data-theme="tidal-form"] .gate-caption { font-size: 12px; color: #55697a; }
/* Top-right vial overlapped the card corner at 1440. */
[data-theme="tidal-form"] .gate-vials img:nth-child(3) { right: 11%; top: -13%; }
@media (max-width: 760px) {
  /* On phones the card fills the screen and the faded vials sat behind the logo, the exit link and the
     caption with no backing; a quiet tide gradient replaces them. */
  [data-theme="tidal-form"] .gate-vials { display: none; }
  [data-theme="tidal-form"] .verification { background: radial-gradient(ellipse at 20% 0%, #ffffff 0, #eef8fd 45%, #dcf0f6 100%); }
  [data-theme="tidal-form"] .gate-exit { display: flex; min-height: 44px; }
}

/* ---------- Review dock (preview control) ---------- */
[data-theme="tidal-form"] .review-dock .dock-toggle { font-size: 12px; }
[data-theme="tidal-form"] .review-dock .dock-label { font-size: 11px; color: #526779; }
[data-theme="tidal-form"] .review-dock .dock-controls a,
[data-theme="tidal-form"] .review-dock .dock-controls button { font-size: 12px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .review-dock .dock-controls a,
  [data-theme="tidal-form"] .review-dock .dock-controls button { min-width: 44px; }
}