/* ========================================================================== PharmEasy — Medicines by Class · stylesheet Generated: v2's tokens.css + base.css + blocks.css + directory.css + class.css, concatenated in that order. Every class name is v2's, unchanged. v1's own stylesheet is gone — it was the old design and fought this one. Do not hand-edit the four verbatim blocks; re-run the merge instead. The deliberate deviations from v2 are marked `CHANGE ` inline and collected in section 6 at the foot of the file. 1. tokens.css design tokens (verbatim) 2. base.css reset, type, header, footer (verbatim + CHANGE 6) 3. blocks.css shared launch blocks (verbatim) 4. directory.css directory page (scoped to the directory page) 5. class.css individual class page (scoped to .cls-body) 6. change list CHANGE 3 and CHANGE 9 PAGE SCOPING Sections 4 and 5 collide on 29 selectors (.sec, .sec--faq, .sec--safety, .author*, .rail-card*, .trustm* ...), and class.css also overrides base.css's .pe-header / .pe-footer / .pe-breadcrumb / .pe-search. In v2 that cost nothing: index.html linked directory.css, class.html linked class.css, and the two sheets never met. Here they share one file and every page loads all of it, so each block is scoped to the page it was written for — using the body hook v2's own markup already carries: directory page -> :where(body:not(.cls-body)) class page -> :where(body.cls-body) The prefix sits inside `:where()`, which contributes NO specificity, so every selector keeps exactly the weight v2 gave it and the only thing the prefix changes is which page the block matches. That matters: base.css section 4B lifts the site header over directory.css's bare `.hdr` rule with one extra class, and a plain `body:not(.cls-body) ` prefix would have handed that fight straight back to directory.css. `:root` blocks stay unscoped — they are tokens, not page styling. !! The class page's MUST carry class="cls-body" (v2's class.html does). app.js re-stamps it defensively if a build ever drops it, but the markup is where it belongs. ========================================================================== */ /* ========================================================================== 1. TOKENS — v2 assets/tokens.css (verbatim) ========================================================================== */ /* ========================================================================== PharmEasy — Design tokens Medicines by Class v2 Single source of truth for colour, type, spacing, radii, shadows, layout. Every other stylesheet must consume these variables, never raw values. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND --------------------------------------------------------------------- */ --pe-teal: #10847E; /* primary brand / CTA fill / active nav */ --pe-teal-dark: #0E746E; /* hover + pressed on teal fills */ --pe-teal-muted: #83C9C6; /* disabled teal, thin rules */ --pe-teal-100: #DEF7F8; /* tinted surface (info strips) */ --pe-teal-050: #DBFFF5; /* lightest teal wash */ /* --------------------------------------------------------------------- 2. TEXT --------------------------------------------------------------------- */ --pe-text: #30363C; /* headings + primary body */ --pe-text-secondary: #4F585E; /* body copy, footer links */ --pe-text-tertiary: #6E787E; /* meta, captions, breadcrumb trail */ --pe-text-muted: #8897A2; /* placeholder, disabled, current crumb */ --pe-text-inverse: #FFFFFF; /* --------------------------------------------------------------------- 3. LINES + SURFACES --------------------------------------------------------------------- */ --pe-border: #D7DFE5; /* default 1px control border */ --pe-border-light: #E6EBF4; /* dividers, card hairlines */ --pe-border-faint: #F1F1F2; /* lightest separator */ --pe-white: #FFFFFF; --pe-surface: #F5F8FC; /* page background */ --pe-surface-alt: #F4F7FB; /* alternating band */ --pe-surface-sunken: #EDF2F9; /* search input well, chips */ /* --------------------------------------------------------------------- 4. ACCENTS --------------------------------------------------------------------- */ /* PLUS / membership — purple */ --pe-purple: #8678DE; --pe-purple-dark: #6E53BA; --pe-purple-light: #CFC9F2; --pe-purple-bg: #F1EEFF; /* Lab Tests / links — blue */ --pe-blue: #3B7AEF; --pe-blue-dark: #3661B0; --pe-blue-light: #B5CDF7; --pe-blue-bg: #EBF2FF; /* Savings / in-stock — green */ --pe-green: #62BF9F; --pe-green-dark: #45A081; --pe-green-light: #BFEDDD; --pe-green-bg: #F2FFF8; /* Discount / error — red */ --pe-red: #F47779; --pe-red-dark: #CC4C4E; --pe-red-bg: #FFF5F5; /* Ratings / offers — amber */ --pe-amber: #F5B326; --pe-amber-bg: #FFF8E3; --pe-orange: #FF9341; --pe-orange-dark: #CF7530; /* --------------------------------------------------------------------- 5. TYPOGRAPHY --------------------------------------------------------------------- */ --pe-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* size scale */ --pe-fs-8: 8px; --pe-fs-10: 10px; --pe-fs-11: 11px; --pe-fs-12: 12px; --pe-fs-13: 13px; --pe-fs-14: 14px; /* base body */ --pe-fs-15: 15px; --pe-fs-16: 16px; --pe-fs-18: 18px; --pe-fs-20: 20px; --pe-fs-22: 22px; --pe-fs-24: 24px; --pe-fs-26: 26px; --pe-fs-30: 30px; --pe-fs-36: 36px; --pe-fs-40: 40px; --pe-fs-42: 42px; /* line-height scale (always px — the design uses fixed leading) */ --pe-lh-16: 16px; --pe-lh-18: 18px; --pe-lh-20: 20px; --pe-lh-22: 22px; --pe-lh-24: 24px; /* base body leading */ --pe-lh-28: 28px; --pe-lh-32: 32px; --pe-lh-40: 40px; /* weights */ --pe-fw-regular: 400; --pe-fw-medium: 500; --pe-fw-semibold: 600; --pe-fw-bold: 700; /* --------------------------------------------------------------------- 6. SPACING (4px base grid) --------------------------------------------------------------------- */ --pe-sp-2: 2px; --pe-sp-4: 4px; --pe-sp-6: 6px; --pe-sp-8: 8px; --pe-sp-10: 10px; --pe-sp-12: 12px; --pe-sp-16: 16px; --pe-sp-20: 20px; --pe-sp-24: 24px; --pe-sp-32: 32px; --pe-sp-40: 40px; --pe-sp-48: 48px; --pe-sp-56: 56px; --pe-sp-64: 64px; /* --------------------------------------------------------------------- 7. RADII --------------------------------------------------------------------- */ --pe-r-2: 2px; --pe-r-4: 4px; --pe-r-6: 6px; --pe-r-8: 8px; /* cards, inputs, buttons */ --pe-r-12: 12px; --pe-r-16: 16px; --pe-r-36: 36px; --pe-r-pill: 100px; /* --------------------------------------------------------------------- 8. ELEVATION --------------------------------------------------------------------- */ --pe-shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 2px 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,.08); --pe-shadow-md: 0 3px 4px rgba(33,33,33,.06), 0 3px 3px rgba(33,33,33,.04), 0 1px 8px rgba(33,33,33,.08); --pe-shadow-lg: 0 6px 10px rgba(33,33,33,.06), 0 1px 18px rgba(33,33,33,.04), 0 3px 5px rgba(33,33,33,.08); --pe-shadow-xl: 0 8px 10px rgba(0,0,0,.06), 0 3px 14px rgba(0,0,0,.04), 0 5px 5px rgba(0,0,0,.08); --pe-shadow-card: 0 4px 8px rgba(0,0,0,.06); --pe-shadow-hairline: inset 0 -1px 0 rgba(0,0,0,.12); /* --------------------------------------------------------------------- 9. LAYOUT --------------------------------------------------------------------- */ --pe-container: 1280px; /* content column inside the 1440 artboard */ --pe-gutter: 80px; /* (1440 - 1280) / 2 */ --pe-gutter-mobile: 16px; --pe-header-top-h: 80px; /* utility row */ --pe-nav-h: 48px; /* category nav row */ --pe-control-h: 48px; /* search field + Search button */ --pe-breadcrumb-h: 40px; /* --------------------------------------------------------------------- 10. MOTION --------------------------------------------------------------------- */ --pe-ease: cubic-bezier(.4, 0, .2, 1); --pe-dur: 160ms; } /* ========================================================================== 2. BASE — v2 assets/base.css (verbatim, plus CHANGE 6) ========================================================================== */ /* ========================================================================== PharmEasy — base stylesheet Reset · typography · layout container · header · breadcrumb · footer Depends on assets/tokens.css (must be linked FIRST). Breakpoints desktop >= 1024px (1440 artboard, 1280 container, 80px gutters) tablet 768–1023px mobile < 768px (360–430 frames, 16px gutters) ========================================================================== */ /* ========================================================================== 1. RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--pe-font); font-size: var(--pe-fs-14); line-height: var(--pe-lh-24); font-weight: var(--pe-fw-regular); color: var(--pe-text); background: var(--pe-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } img { height: auto; border: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } table { border-collapse: collapse; border-spacing: 0; } :focus-visible { outline: 2px solid var(--pe-teal); outline-offset: 2px; border-radius: var(--pe-r-4); } /* ========================================================================== 2. TYPOGRAPHY SCALE (utility classes shared by all pages) ========================================================================== */ .pe-h1 { font-size: var(--pe-fs-26); line-height: var(--pe-lh-32); font-weight: var(--pe-fw-bold); color: var(--pe-text); } .pe-h2 { font-size: var(--pe-fs-22); line-height: var(--pe-lh-28); font-weight: var(--pe-fw-bold); color: var(--pe-text); } .pe-h3 { font-size: var(--pe-fs-18); line-height: var(--pe-lh-24); font-weight: var(--pe-fw-semibold); color: var(--pe-text); } .pe-h4 { font-size: var(--pe-fs-16); line-height: var(--pe-lh-24); font-weight: var(--pe-fw-semibold); color: var(--pe-text); } .pe-body { font-size: var(--pe-fs-14); line-height: var(--pe-lh-24); color: var(--pe-text-secondary); } .pe-body-sm { font-size: var(--pe-fs-13); line-height: var(--pe-lh-20); color: var(--pe-text-secondary); } .pe-caption { font-size: var(--pe-fs-12); line-height: var(--pe-lh-16); color: var(--pe-text-tertiary); } .pe-overline { font-size: var(--pe-fs-11); line-height: var(--pe-lh-16); color: var(--pe-text-muted); } /* ========================================================================== 3. LAYOUT CONTAINER ========================================================================== */ /* Content column is exactly --pe-container (1280px) wide; --pe-gutter (80px) of breathing room sits outside it, so on the 1440 artboard the container box spans the full viewport and the content spans 80 → 1360. */ .pe-container { width: 100%; max-width: calc(var(--pe-container) + var(--pe-gutter) * 2); margin-inline: auto; padding-inline: var(--pe-gutter); } @media (max-width: 1439px) { .pe-container { padding-inline: var(--pe-sp-40); } } @media (max-width: 1023px) { .pe-container { padding-inline: var(--pe-sp-24); } } @media (max-width: 767px) { .pe-container { padding-inline: var(--pe-gutter-mobile); } } /* Shared chevron glyph (header nav, location, footer accordions) */ .pe-chevron { flex: none; transition: transform var(--pe-dur) var(--pe-ease); } /* ========================================================================== 4. HEADER ========================================================================== */ .pe-header { background: var(--pe-white); position: sticky; top: 0; z-index: 100; } /* ── 4.1 utility row ───────────────────────────────────────────────────── */ .pe-header__top { background: var(--pe-white); } .pe-header__top-inner { height: var(--pe-header-top-h); /* 80px */ display: flex; align-items: center; gap: var(--pe-sp-24); } /* hamburger — mobile only */ .pe-hamburger { display: none; width: 40px; height: 40px; margin-left: -8px; align-items: center; justify-content: center; color: var(--pe-text); border-radius: var(--pe-r-8); } /* ── logo lockup ───────────────────────────────────────────────────────── */ .pe-logo { flex: none; display: flex; flex-direction: column; gap: var(--pe-sp-2); } .pe-logo__mark { width: 148px; height: 41px; } .pe-logo__tagline { font-size: var(--pe-fs-10); line-height: var(--pe-lh-16); font-weight: var(--pe-fw-medium); color: var(--pe-text-muted); letter-spacing: .01em; white-space: nowrap; } /* ── location / sample collection ──────────────────────────────────────── */ .pe-location { flex: none; display: flex; align-items: center; gap: var(--pe-sp-8); height: var(--pe-control-h); /* 48px */ padding: 0 var(--pe-sp-12); border-radius: var(--pe-r-8); color: var(--pe-text); transition: background var(--pe-dur) var(--pe-ease); } .pe-location:hover { background: var(--pe-surface-sunken); } .pe-location__pin { color: var(--pe-teal); flex: none; } .pe-location__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .pe-location__label { font-size: var(--pe-fs-11); line-height: var(--pe-lh-16); font-weight: var(--pe-fw-regular); color: var(--pe-text-muted); white-space: nowrap; } .pe-location__value { font-size: var(--pe-fs-14); line-height: var(--pe-lh-20); font-weight: var(--pe-fw-semibold); color: var(--pe-text); white-space: nowrap; } .pe-location .pe-chevron { color: var(--pe-text-secondary); } .pe-location:hover .pe-chevron { transform: translateY(1px); } /* ── search ────────────────────────────────────────────────────────────── */ .pe-search { flex: 1 1 auto; min-width: 360px; display: flex; align-items: stretch; height: var(--pe-control-h); /* 48px */ gap: var(--pe-sp-8); } .pe-search__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--pe-sp-8); padding: 0 var(--pe-sp-16); background: var(--pe-surface-sunken); border: 1px solid var(--pe-border-light); border-radius: var(--pe-r-8); transition: border-color var(--pe-dur) var(--pe-ease), background var(--pe-dur) var(--pe-ease); } .pe-search__field:focus-within { background: var(--pe-white); border-color: var(--pe-teal); } .pe-search__icon { color: var(--pe-text-muted); flex: none; } .pe-search__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; font-size: var(--pe-fs-14); line-height: var(--pe-lh-20); color: var(--pe-text); outline: none; } .pe-search__input::placeholder { color: var(--pe-text-muted); font-weight: var(--pe-fw-regular); } .pe-search__btn { flex: none; height: 100%; padding: 0 var(--pe-sp-32); background: var(--pe-teal); color: var(--pe-text-inverse); font-size: var(--pe-fs-14); line-height: var(--pe-lh-20); font-weight: var(--pe-fw-semibold); border-radius: var(--pe-r-8); transition: background var(--pe-dur) var(--pe-ease); } .pe-search__btn:hover { background: var(--pe-teal-dark); } .pe-search__btn:active { background: var(--pe-teal-dark); transform: translateY(1px); } /* ── utility actions ───────────────────────────────────────────────────── */ .pe-actions { flex: none; display: flex; align-items: center; gap: var(--pe-sp-24); } .pe-action { display: flex; align-items: center; gap: var(--pe-sp-8); height: 40px; padding: 0 var(--pe-sp-4); font-size: var(--pe-fs-14); line-height: var(--pe-lh-20); font-weight: var(--pe-fw-medium); color: var(--pe-text); white-space: nowrap; transition: color var(--pe-dur) var(--pe-ease); } .pe-action svg { color: var(--pe-text-secondary); flex: none; } .pe-action:hover, .pe-action:hover svg { color: var(--pe-teal); } /* cart badge */ .pe-action__badge-wrap { position: relative; display: block; } .pe-action__badge { position: absolute; top: -6px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--pe-teal); color: var(--pe-text-inverse); font-size: var(--pe-fs-10); line-height: 1; font-weight: var(--pe-fw-bold); border-radius: var(--pe-r-pill); } /* ── 4.2 category nav row ──────────────────────────────────────────────── */ .pe-nav { background: var(--pe-white); border-top: 1px solid var(--pe-border-light); box-shadow: var(--pe-shadow-hairline); } .pe-nav__inner { height: var(--pe-nav-h); /* 48px */ display: flex; align-items: stretch; gap: var(--pe-sp-32); } .pe-nav__item { position: relative; display: flex; align-items: center; gap: var(--pe-sp-4); font-size: var(--pe-fs-14); line-height: var(--pe-lh-20); font-weight: var(--pe-fw-medium); color: var(--pe-text-secondary); white-space: nowrap; transition: color var(--pe-dur) var(--pe-ease); } .pe-nav__item:hover { color: var(--pe-teal); } /* active underline — 2px teal, flush with the row's bottom edge */ .pe-nav__item.is-active { color: var(--pe-teal); font-weight: var(--pe-fw-semibold); } .pe-nav__item.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pe-teal); border-radius: var(--pe-r-2) var(--pe-r-2) 0 0; } .pe-nav__item:hover .pe-chevron { transform: translateY(1px); } /* PLUS is a purple membership badge, not a plain link */ .pe-nav__item--plus { align-self: center; height: 24px; padding: 0 var(--pe-sp-10); background: var(--pe-purple-bg); color: var(--pe-purple-dark); font-size: var(--pe-fs-12); line-height: var(--pe-lh-16); font-weight: var(--pe-fw-bold); letter-spacing: .04em; border-radius: var(--pe-r-4); } .pe-nav__item--plus:hover { background: var(--pe-purple-light); color: var(--pe-purple-dark); } /* -------------------------------------------------------------------------- NOTE — section 4 above (.pe-header / .pe-logo / .pe-location / .pe-search / .pe-actions / .pe-nav) is the header that class.html used before the v1 header was ported in. No page renders that markup any more, so these rules match nothing; they are LEFT IN PLACE, not deleted, so the old header can be restored from _backup-full-design-20260819/ without also restoring CSS. The live header is section 4B, immediately below. -------------------------------------------------------------------------- */ /* ========================================================================== 4B. SITE HEADER — V1 PORT (supersedes section 4 above) -------------------------------------------------------------------------- Both index.html and class.html now render partials/header.html, which is the v1 header (medicines-by-class/src/build.mjs `const header`) copied verbatim. The rules below are v1's own header rules from that project's assets/styles.css, kept in their original source order so the cascade — which in v1 is several successive override passes — resolves identically. Every selector is prefixed with `.pe-site-header`, the wrapper on the partial's root
. That is not decoration: directory.css already owns a bare `.hdr` rule and class.css a bare `.m-tile` rule, and both stylesheets load after this one. The uniform +1 class on every selector lifts the whole block above them without disturbing the internal specificity order. v1's colour/size tokens are re-declared on the wrapper (mapped onto the v2 tokens, or kept as v1 literals where v2 has no equivalent) so nothing in this block depends on names tokens.css does not define. ========================================================================== */ .pe-site-header { /* v1 token names -> v2 tokens */ --surface: var(--pe-white); --bg: var(--pe-surface-alt); --line: var(--pe-border); --line-2: var(--pe-border-light); --fg-1: var(--pe-text); --fg-2: var(--pe-text-secondary); --fg-3: var(--pe-text-muted); --teal-50: var(--pe-green-bg); /* #F2FFF8 */ --teal-600: var(--pe-teal); --teal-700: var(--pe-teal-dark); --coral-600: var(--pe-red); --coral-700: var(--pe-red-dark); --r-sm: var(--pe-r-4); --r-pill: var(--pe-r-pill); --fs-micro: var(--pe-fs-11); --fs-sm: var(--pe-fs-13); --fs-body-lg: var(--pe-fs-16); --fw-semi: var(--pe-fw-semibold); --fw-bold: var(--pe-fw-bold); /* v1 literals — v2's shadow scale is a different ramp */ --sh-sm: 0 2px 8px rgba(48,54,60,0.06); --sh-md: 0 4px 16px rgba(48,54,60,0.08); } /* v1 carries `[hidden] { display: none !important }` in its reset, and the header depends on it: #m-menu and #m-search are toggled through the `hidden` attribute, while .mhdr-menu / .msearch set `display:flex`, which would otherwise out-specify the UA sheet and leave both panels open. Scoped to the header so it cannot change anything else on the page. */ .pe-site-header [hidden] { display: none !important; } .pe-site-header .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pe-site-header .hdr { background: var(--surface); border-bottom: 1px solid var(--line); } .pe-site-header .hdr-top { height: 76px; padding: 0 40px; display: flex; align-items: center; gap: 28px; } .pe-site-header .hdr-logo { display: flex; align-items: center; flex: none; } .pe-site-header .hdr-logo:hover { text-decoration: none; } .pe-site-header .hdr-logo img { display: block; height: 30px; width: auto; } .pe-site-header .hdr-div { width: 1px; height: 40px; background: var(--line); } .pe-site-header .hdr-loc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; } .pe-site-header .hdr-loc:hover { background: var(--teal-50); } .pe-site-header .hdr-loc-lbl { font-size: var(--fs-sm); color: var(--fg-2); } .pe-site-header .hdr-loc-val { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: var(--fw-bold); color: var(--fg-1); } .pe-site-header .hdr-spacer { flex: 1; } .pe-site-header .hdr-act { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-body-lg); color: var(--fg-1); } .pe-site-header .hdr-act:hover { background: var(--teal-50); color: var(--teal-700); text-decoration: none; } .pe-site-header .hdr-dot { position: relative; } .pe-site-header .hdr-dot::after { content: ""; position: absolute; top: -3px; right: -8px; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--coral-600); } .pe-site-header .hdr-nav { border-top: 1px solid var(--line-2); height: 54px; display: flex; align-items: center; justify-content: center; gap: 36px; } .pe-site-header .hdr-nav a { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--fg-1); padding: 6px 2px; } .pe-site-header .hdr-nav a:hover { color: var(--teal-700); text-decoration: none; } .pe-site-header .hdr-nav a[aria-current] { border-bottom: 2px solid var(--teal-600); } .pe-site-header .cart-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--teal-600); color: #fff; font-size: var(--fs-micro); font-weight: var(--fw-bold); display: none; align-items: center; justify-content: center; } .pe-site-header .cart-count.on { display: inline-flex; } .pe-site-header .mhdr { display: none; background: var(--surface); } .pe-site-header .mhdr-row { height: 56px; padding: 0 14px; display: flex; align-items: center; gap: 12px; } .pe-site-header .mhdr-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--fg-1); flex: none; } .pe-site-header .mhdr-logo img { display: block; height: 22px; width: auto; } .pe-site-header .mhdr-loc { width: 100%; height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 6px; background: var(--bg); border: 0; border-top: 1px solid var(--line-2); cursor: pointer; } .pe-site-header .mhdr-loc span:first-child { font-size: var(--fs-sm); color: var(--fg-2); } .pe-site-header .mhdr-loc span:nth-child(2) { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-1); } .pe-site-header .mhdr-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 10px; } .pe-site-header .mhdr-chips span { flex: none; display: flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-1); background: var(--surface); } @media (max-width: 1279px) { .pe-site-header .hdr-top { padding: 0 24px; } .pe-site-header .hdr-nav { gap: 24px; } } @media (max-width: 767px) { .pe-site-header .hdr { display: none; } .pe-site-header .mhdr { display: block; } } .pe-site-header .sync-note { display: block; position: absolute; top: 100%; right: 0; margin-top: 2px; white-space: nowrap; font-size: var(--fs-micro); font-weight: var(--fw-semi); color: var(--coral-700); } .pe-site-header .hdr-act[data-cart-link] { position: relative; } .pe-site-header .hdr-act[aria-busy="true"] { opacity: .6; pointer-events: none; } .pe-site-header .hdr { background: var(--surface); border-bottom: 1px solid var(--line); } .pe-site-header .hdr-top { height: 76px; padding: 0 40px; display: flex; align-items: center; gap: 28px; max-width: 1440px; margin: 0 auto; } .pe-site-header .hdr-logo { display: flex; flex-direction: column; gap: 1px; flex: none; } .pe-site-header .hdr-tag { font-size: 13px; font-style: italic; font-weight: 600; color: var(--teal-600); letter-spacing: -0.01em; padding-left: 34px; } .pe-site-header .hdr-logo img { display: block; height: 30px; width: auto; } .pe-site-header .hdr-nav { display: flex; align-items: center; gap: 22px; margin-left: 4px; } .pe-site-header .hdr-nav a { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--fg-1); padding: 6px 2px; border-bottom: 0; white-space: nowrap; } .pe-site-header .hdr-nav a:hover { color: var(--teal-700); text-decoration: none; } .pe-site-header .hdr-nav a[aria-current] { color: var(--teal-700); border-bottom: 2px solid var(--teal-600); } .pe-site-header .hdr-cart { display: flex; align-items: center; gap: 8px; flex: none; position: relative; padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; color: var(--fg-1); } .pe-site-header .hdr-cart:hover { background: var(--teal-50); color: var(--teal-700); text-decoration: none; } @media (max-width: 1023px) { .pe-site-header .hdr-nav { gap: 14px; overflow-x: auto; } } @media (max-width: 767px) { .pe-site-header .mhdr { display: block; background: var(--surface); box-shadow: var(--sh-sm); } .pe-site-header .mhdr-row { height: 56px; padding: 0 14px; gap: 12px; } .pe-site-header .mhdr-btn { width: 44px; height: 44px; color: var(--fg-1); } .pe-site-header .mhdr-logo img { height: 22px; } .pe-site-header .mhdr-loc { width: 100%; height: 40px; padding: 0 16px; gap: 6px; background: var(--bg); border: 0; border-top: 1px solid var(--line-2); } .pe-site-header .mhdr-loc span:first-child { font-size: 13px; font-weight: 400; color: var(--fg-2); } .pe-site-header .mhdr-loc span:nth-child(2) { font-size: 13px; font-weight: 700; color: var(--fg-1); } .pe-site-header .mhdr-chips { display: none; } } .pe-site-header .hdr-top { max-width: 1200px; margin: 0 auto; padding: 0 24px; gap: 24px; } .pe-site-header .hdr-tag { display: none; } .pe-site-header .hdr-logo { align-self: center; } .pe-site-header .mhdr-menu { display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--line-2); } .pe-site-header .mhdr-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--fg-1); border-bottom: 1px solid var(--line-2); } .pe-site-header .mhdr-menu a:hover { background: var(--teal-50); color: var(--teal-700); text-decoration: none; } .pe-site-header .mhdr-menu a svg { color: var(--fg-3); } .pe-site-header .hdr { position: sticky; top: 0; z-index: 80; background: var(--surface); } .pe-site-header .mhdr { position: sticky; top: 0; z-index: 80; } .pe-site-header .hdr, .pe-site-header .mhdr { position: sticky; top: 0; z-index: 90; box-shadow: var(--sh-sm); border-bottom: 0; } .pe-site-header .hdr { backdrop-filter: saturate(1.05); } .pe-site-header .hdr.is-float, .pe-site-header .mhdr.is-float { box-shadow: var(--sh-md); } .pe-site-header .hdr, .pe-site-header .mhdr { position: static; box-shadow: none; } .pe-site-header .hdr { border-bottom: 0; } @media (max-width: 767px) { .pe-site-header .mhdr-logo { flex: 1; display: flex; align-items: center; justify-content: center; } .pe-site-header .mhdr-logo img { height: 40px; width: auto; } .pe-site-header .mhdr-row { height: 64px; } } .pe-site-header .hdr-nav a { font-size: 14px; line-height: 24px; font-weight: var(--fw-semi); } .pe-site-header .mhdr-menu a { font-size: 14px; line-height: 24px; font-weight: var(--fw-semi); } @media (max-width: 767px) { .pe-site-header .mhdr-logo { flex: 0 0 auto; justify-content: flex-start; } .pe-site-header .mhdr-logo img { height: 30px; } .pe-site-header .mhdr-row { height: 56px; gap: 6px; } .pe-site-header .mhdr-row .hdr-spacer { flex: 1; } } @media (max-width: 767px) { .pe-site-header .mhdr-row { height: 56px; padding: 0 12px 0 14px; gap: 8px; align-items: center; } .pe-site-header .mhdr-burger { width: 30px; height: 44px; justify-content: flex-start; padding: 0; } .pe-site-header .mhdr-burger svg { display: block; } .pe-site-header .mhdr-logo { flex: 0 0 auto; margin-left: 4px; } .pe-site-header .mhdr-logo img { height: 30px; } .pe-site-header .mhdr-row .hdr-spacer { flex: 1 1 auto; } .pe-site-header .mhdr-cart { position: relative; width: 40px; height: 44px; margin-left: auto; margin-right: 0; justify-content: flex-end; color: var(--fg-1); } .pe-site-header .mhdr-cart .cart-count { position: absolute; top: 4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--teal-600); color: #fff; font-size: 11px; font-weight: var(--fw-bold); border-radius: var(--r-pill); border: 2px solid #fff; align-items: center; justify-content: center; } } .pe-site-header .mhdr-logo svg { display: block; height: 29px; width: auto; } @media (max-width: 767px) { .pe-site-header .mhdr-logo svg { height: 26px; } } .pe-site-header .hdr-cart .cart-ico { position: relative; display: inline-flex; } .pe-site-header .hdr-cart svg { display: block; } .pe-site-header .cart-count { background: var(--coral-600); color: #fff; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: var(--fw-bold); border-radius: var(--r-pill); border: 0; align-items: center; justify-content: center; } .pe-site-header .hdr-cart .cart-count { position: absolute; top: -7px; left: 9px; } .pe-site-header .mhdr-cart .cart-count { background: var(--coral-600); border: 2px solid #fff; } .pe-site-header .hdr, .pe-site-header .hdr-nav { border-top: 0; } .pe-site-header .hdr-nav { border-top: 0 !important; } .pe-site-header .hdr-nav a[aria-current] { border-bottom: 0; } .pe-site-header .hdr-nav { display: flex; align-items: center; } .pe-site-header .nav-item { position: relative; display: flex; align-items: center; } .pe-site-header .nav-item > a, .pe-site-header .nav-top { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--fg-1); padding: 6px 2px; cursor: pointer; white-space: nowrap; } .pe-site-header .nav-item > a:hover, .pe-site-header .nav-top:hover { color: var(--teal-700); text-decoration: none; } .pe-site-header .nav-drop { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 196px; padding: 6px 0; margin-top: 6px; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(16,24,32,.16), 0 0 0 1px rgba(16,24,32,.06); opacity: 0; visibility: hidden; transform: translateY(-4px); /* visibility flips instantly on open and only lags on close, so the panel is clickable the moment it appears rather than 140ms later */ transition: opacity .14s, transform .14s, visibility 0s linear .14s; } .pe-site-header .nav-item.has-kids:hover .nav-drop, .pe-site-header .nav-item.has-kids:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .14s, transform .14s, visibility 0s; } .pe-site-header .nav-drop ul { list-style: none; margin: 0; padding: 0; } .pe-site-header .nav-drop a { display: block; padding: 9px 16px; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--fg-1); } .pe-site-header .nav-drop a:hover { background: #f5f7f8; color: var(--teal-700); text-decoration: none; } .pe-site-header .nav-item.has-kids > a svg, .pe-site-header .nav-top svg { transition: transform .14s; } .pe-site-header .nav-item.has-kids:hover > a svg, .pe-site-header .nav-item.has-kids:hover .nav-top svg { transform: rotate(180deg); } .pe-site-header .mhdr-menu .m-head { display: block; padding: 13px 16px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); } .pe-site-header .mhdr-menu .m-sub { padding-left: 28px; font-weight: 400; } .pe-site-header .hdr-top { height: 76px; padding: 0 40px; display: flex; align-items: center; gap: 20px; } .pe-site-header .hdr-div { width: 1px; height: 38px; background: var(--line); flex: none; } .pe-site-header .hdr-search { flex: 1 1 auto; max-width: 720px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 18px; background: #fff; border: 1px solid var(--line); border-radius: 999px; transition: border-color .14s, box-shadow .14s; } .pe-site-header .hdr-search:focus-within { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(16,132,126,.12); } .pe-site-header .hs-ico { display: flex; color: var(--fg-3); flex: none; } .pe-site-header .hdr-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; /* v1 wrote `font: 400 15px/24px var(--font)` here, but --font is not a token in either project, so that shorthand was invalid and every longhand fell back. These are the values v1 actually renders. */ font-family: inherit; font-size: 14px; line-height: 24px; font-weight: 400; color: var(--fg-1); } .pe-site-header .hdr-search input::placeholder { color: var(--fg-3); } .pe-site-header .hdr-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .pe-site-header .hs-btn { flex: none; border: 0; cursor: pointer; height: 38px; padding: 0 26px; border-radius: 999px; background: var(--teal-600); color: #fff; /* see the note on .hdr-search input — v1's `font: 600 15px/38px var(--font)` never applied, so the Search label renders at the inherited 400 weight. */ font-family: inherit; font-weight: 400; } .pe-site-header .hs-btn:hover { background: var(--teal-700); } .pe-site-header .hdr-offers { display: flex; align-items: center; gap: 7px; flex: none; font-size: 15px; font-weight: 400; color: var(--fg-1); } .pe-site-header .hdr-offers:hover { color: var(--teal-700); text-decoration: none; } .pe-site-header .hdr-bar { border-top: 1px solid var(--line); } .pe-site-header .hdr-nav { height: 54px; display: flex; align-items: center; justify-content: center; gap: 34px; margin: 0; overflow: visible; } .pe-site-header .hdr-nav .nav-item > a, .pe-site-header .hdr-nav .nav-top { font-size: 15px; } @media (max-width: 1180px) { .pe-site-header .hdr-top { padding: 0 24px; gap: 14px; } .pe-site-header .hdr-search { max-width: none; } .pe-site-header .hdr-nav { gap: 22px; } .pe-site-header .hdr-nav .nav-item > a, .pe-site-header .hdr-nav .nav-top { font-size: 14px; } } .pe-site-header .hdr-search input::placeholder, .pe-site-header .msearch input::placeholder { transition: opacity .18s; opacity: 1; } .pe-site-header .hdr-search input.hint-out::placeholder, .pe-site-header .msearch input.hint-out::placeholder { opacity: 0; } @media (prefers-reduced-motion: reduce) { .pe-site-header .hdr-search input::placeholder, .pe-site-header .msearch input::placeholder { transition: none; } } .pe-site-header .msearch { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 0 5px 0 14px; height: 42px; background: #fff; border: 1px solid var(--line); border-radius: 999px; } .pe-site-header .msearch[hidden] { display: none; } .pe-site-header .msearch:focus-within { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(16,132,126,.12); } .pe-site-header .msearch input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; /* same undefined-token shorthand as .hdr-search input */ font-family: inherit; line-height: 24px; font-weight: 400; color: var(--fg-1); } .pe-site-header .msearch input::placeholder { color: var(--fg-3); } .pe-site-header .msearch input::-webkit-search-cancel-button { -webkit-appearance: none; } .pe-site-header .msearch .hs-btn { height: 32px; padding: 0 16px; font-size: 14px; line-height: 32px; } .pe-site-header .msearch .hs-ico { color: var(--fg-3); } .pe-site-header .msearch .hs-ico svg { width: 18px; height: 18px; } .pe-site-header .mhdr-search-btn { color: var(--fg-1); } .pe-site-header .mhdr-search-btn svg { width: 22px; height: 22px; } .pe-site-header .hdr-top { height: 64px; max-width: none; margin: 0; padding: 0 40px; gap: 16px; } .pe-site-header .hdr-bar > .hdr-nav { padding: 0 40px; } .pe-site-header .hdr-div { height: 32px; } .pe-site-header .hdr-centre { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; } .pe-site-header .hdr-search { flex: 0 1 531px; width: 531px; max-width: 100%; height: 48px; padding: 0 4px 0 24px; gap: 10px; border: 1px solid rgb(215,223,229); border-radius: 100px; } .pe-site-header .hs-btn { height: 38px; line-height: 38px; padding: 0 24px; font-size: 14px; } .pe-site-header .hdr-search input { font-size: 14px; } .pe-site-header .hdr-nav { height: 44px; gap: 30px; } .pe-site-header .hdr-nav .nav-item > a, .pe-site-header .hdr-nav .nav-top { font-size: 14px; padding: 4px 2px; } @media (max-width: 1180px) { .pe-site-header .hdr-top { padding: 0 24px; gap: 12px; } .pe-site-header .hdr-search { flex: 1 1 auto; width: auto; } } .pe-site-header .mhdr-search-btn { margin-left: auto; } .pe-site-header .mhdr-cart { margin-left: 0; } .pe-site-header .hdr-nav { height: 40px; } @media (max-width: 767px) { .pe-site-header .msearch input, .pe-site-header .hdr-search input, .pe-site-header input[type="search"], .pe-site-header input[type="text"], .pe-site-header select, .pe-site-header textarea { font-size: 16px; } } .pe-site-header .mhdr-menu { padding: 0; background: #fff; } .pe-site-header .m-tile { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; width: 100%; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--fg-1); background: #fff; text-align: left; } .pe-site-header .m-tile:hover { text-decoration: none; background: #f5f7f8; } .pe-site-header .m-tile svg { flex: none; width: 24px; height: 24px; color: var(--fg-1); } .pe-site-header .mt-tx { flex: 1; min-width: 0; } .pe-site-header .m-badge { flex: none; padding: 2px 7px; border-radius: 4px; background: #ffd400; color: var(--fg-1); font-size: 10px; font-weight: 700; letter-spacing: .04em; } .pe-site-header .m-shadow { box-shadow: inset 0 -1px 0 var(--line-2), inset 0 1px 0 var(--line-2); } .pe-site-header .m-acc { display: block; padding: 0; } .pe-site-header .m-acc > summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; } .pe-site-header .m-acc > summary::-webkit-details-marker { display: none; } .pe-site-header .m-acc > summary:hover { background: #f5f7f8; } .pe-site-header .m-acc > summary > svg:last-child { transition: transform .16s; } .pe-site-header .m-acc[open] > summary > svg:last-child { transform: rotate(180deg); } .pe-site-header .mhdr-menu a.m-tile { justify-content: flex-start; padding: 14px 18px; font-weight: 400; } .pe-site-header .mhdr-menu a.m-kid { display: block; padding: 11px 18px 11px 56px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--fg-2); background: #fbfcfd; } .pe-site-header .mhdr-menu a.m-kid:hover { text-decoration: none; color: var(--teal-700); background: #f2f5f7; } /* CHANGE 6 — the desktop header rows line up with the body content column. v2 shipped these two rows as a 1200px box with 24px padding, so on a 1600 viewport the logo started at x=224 while the breadcrumb, hero and grid all started at x=120. Both pages inset their content by the same expression — the directory through `.page`, the class page through `.cls-crumb` and `.cls-grid` — so the header now uses that expression too, and the logo's left edge and the cart's right edge sit on the content edge at every desktop width. The `@media (max-width: 1180px)` rule immediately below still narrows both rows for tablets, exactly as before. */ .pe-site-header .hdr-top, .pe-site-header .hdr-bar > .hdr-nav { max-width: none; margin: 0 auto; padding-left: max(40px, calc((100% - 1440px) / 2 + 40px)); padding-right: max(40px, calc((100% - 1440px) / 2 + 40px)); } @media (max-width: 1180px) { .pe-site-header .hdr-top, .pe-site-header .hdr-bar > .hdr-nav { padding-left: 24px; padding-right: 24px; } } /* --- one addition on top of the v1 rules --------------------------------- v1 opens the dropdowns on :hover and :focus-within only. header.js adds Enter / Space / ArrowDown on the two parents and Escape to dismiss, and flags the open item with .is-open; this mirrors the :focus-within rule so that state is visible. Nothing else changes. */ .pe-site-header .nav-item.has-kids.is-open .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .14s, transform .14s, visibility 0s; } .pe-site-header .nav-item.has-kids.is-open > a svg, .pe-site-header .nav-item.has-kids.is-open .nav-top svg { transform: rotate(180deg); } /* --- isolation from class.css -------------------------------------------- `.m-tile` and `.m-badge` are also class.css's names for the mobile footer's 96x96 shortcut tiles and its award badge, and class.css loads after this file. The wrapper alone is not enough: a rule only wins the properties it declares, so class.css's height / flex-direction / border-radius and its `.m-tile span { font: 600 10px/14px }` still reached the menu, stretching every row to 96px and shrinking every label to 10px. These rules pin the leaking properties back to the values v1 computes. They are keyed on #m-menu — every one of these elements lives inside the mobile menu panel — so the extra id crushes anything a page stylesheet declares on the bare class name, now or later. */ .pe-site-header #m-menu .m-tile { width: 100%; height: auto; min-height: 0; flex-direction: row; align-items: center; border: 0; border-radius: 0; text-align: left; } /* ...but the anchors keep the hairline `.mhdr-menu a` gives them; only the
accordions are borderless, which is what v1 renders. */ .pe-site-header #m-menu a.m-tile { border-bottom: 1px solid var(--line-2); } .pe-site-header #m-menu .m-tile > span:not(.m-badge) { display: block; flex-direction: row; align-items: baseline; padding: 0; text-align: left; font: inherit; color: inherit; } .pe-site-header #m-menu .mt-tx { flex: 1; min-width: 0; } .pe-site-header #m-menu .m-badge { display: block; flex: none; padding: 2px 7px; border-radius: 4px; background: #ffd400; color: var(--fg-1); font-size: 10px; line-height: 24px; font-weight: 700; letter-spacing: .04em; } /* ── end 4B ─────────────────────────────────────────────────────────────── */ /* ========================================================================== 5. BREADCRUMB ========================================================================== */ .pe-breadcrumb { background: var(--pe-surface); padding-block: var(--pe-sp-12); } .pe-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-sp-8); min-height: 20px; font-size: var(--pe-fs-12); line-height: var(--pe-lh-16); } .pe-breadcrumb__list a { color: var(--pe-text-tertiary); transition: color var(--pe-dur) var(--pe-ease); } .pe-breadcrumb__list a:hover { color: var(--pe-teal); text-decoration: underline; } .pe-breadcrumb__sep { color: var(--pe-border); user-select: none; } .pe-breadcrumb__list [aria-current="page"] { color: var(--pe-text-muted); font-weight: var(--pe-fw-medium); } /* ========================================================================== 6. FOOTER ========================================================================== */ .pe-footer { background: var(--pe-white); border-top: 1px solid var(--pe-border-light); margin-top: var(--pe-sp-48); } /* ── 6.1 link columns ──────────────────────────────────────────────────── */ .pe-footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--pe-sp-32); padding-block: var(--pe-sp-40); } .pe-footer__col { min-width: 0; } .pe-footer__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--pe-sp-8); margin-bottom: var(--pe-sp-16); font-size: var(--pe-fs-14); line-height: var(--pe-lh-20); font-weight: var(--pe-fw-semibold); color: var(--pe-text); list-style: none; cursor: default; } .pe-footer__heading::-webkit-details-marker { display: none; } /* the chevron only exists for the mobile accordion */ .pe-footer__heading .pe-chevron { display: none; } .pe-footer__list { display: flex; flex-direction: column; gap: var(--pe-sp-12); } .pe-footer__list a { font-size: var(--pe-fs-13); line-height: var(--pe-lh-20); font-weight: var(--pe-fw-regular); color: var(--pe-text-tertiary); transition: color var(--pe-dur) var(--pe-ease); } .pe-footer__list a:hover { color: var(--pe-teal); } /* ── 6.2 app + social band ─────────────────────────────────────────────── */ .pe-footer__band { border-top: 1px solid var(--pe-border-light); background: var(--pe-white); } .pe-footer__band-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pe-sp-40); padding-block: var(--pe-sp-32); } .pe-footer__heading--static { cursor: default; justify-content: flex-start; } .pe-footer__stores { display: flex; gap: var(--pe-sp-12); } .pe-store { display: flex; align-items: center; gap: var(--pe-sp-10); height: 48px; padding: 0 var(--pe-sp-16); border: 1px solid var(--pe-border); border-radius: var(--pe-r-8); color: var(--pe-text); transition: border-color var(--pe-dur) var(--pe-ease), box-shadow var(--pe-dur) var(--pe-ease); } .pe-store:hover { border-color: var(--pe-teal); box-shadow: var(--pe-shadow-sm); } .pe-store__text { display: flex; flex-direction: column; } .pe-store__text small { font-size: var(--pe-fs-8); line-height: var(--pe-lh-16); font-weight: var(--pe-fw-medium); color: var(--pe-text-tertiary); text-transform: uppercase; letter-spacing: .06em; } .pe-store__text strong { font-size: var(--pe-fs-14); line-height: var(--pe-lh-18); font-weight: var(--pe-fw-semibold); } .pe-social { display: flex; gap: var(--pe-sp-12); } .pe-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--pe-border); border-radius: var(--pe-r-pill); color: var(--pe-text-secondary); transition: color var(--pe-dur) var(--pe-ease), border-color var(--pe-dur) var(--pe-ease); } .pe-social a:hover { color: var(--pe-teal); border-color: var(--pe-teal); } /* ── 6.3 legal bar ─────────────────────────────────────────────────────── */ .pe-footer__legal { border-top: 1px solid var(--pe-border-light); background: var(--pe-surface-alt); padding-block: var(--pe-sp-20); } .pe-footer__address { font-size: var(--pe-fs-11); line-height: var(--pe-lh-18); color: var(--pe-text-muted); max-width: 860px; } .pe-footer__copy { margin-top: var(--pe-sp-8); font-size: var(--pe-fs-12); line-height: var(--pe-lh-18); font-weight: var(--pe-fw-medium); color: var(--pe-text-tertiary); } /* ========================================================================== 7. RESPONSIVE ========================================================================== */ /* ── tablet: drop the tagline + Download App label, tighten gaps ───────── */ @media (max-width: 1279px) { .pe-header__top-inner { gap: var(--pe-sp-16); } .pe-actions { gap: var(--pe-sp-16); } .pe-action--app span { display: none; } .pe-logo__tagline { display: none; } .pe-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pe-sp-32) var(--pe-sp-24); } } @media (max-width: 1023px) { .pe-location__label, .pe-location__value { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .pe-search__btn { padding: 0 var(--pe-sp-20); } /* icon-only actions — must not hit the cart's badge wrapper, which contains the cart icon itself */ .pe-action > span:not(.pe-action__badge-wrap) { display: none; } .pe-nav__inner { gap: var(--pe-sp-24); overflow-x: auto; } .pe-footer__band-inner{ flex-direction: column; gap: var(--pe-sp-24); } } /* ── mobile: 360–430 frames ────────────────────────────────────────────── */ @media (max-width: 767px) { /* Utility row becomes two stacked rows: [☰] [logo] ......................... [login] [cart] [ 📍 Sample Collection from · Mumbai, 400001 ⌄ ] then a full-width search bar. */ .pe-header__top-inner { height: auto; flex-wrap: wrap; row-gap: var(--pe-sp-12); padding-block: var(--pe-sp-12); } .pe-hamburger { display: flex; order: 1; } .pe-logo { order: 2; margin-right: auto; } .pe-logo__mark{ width: 112px; height: 31px; } .pe-actions { order: 3; gap: var(--pe-sp-16); } .pe-action--app { display: none; } .pe-action:nth-child(2) { display: none; } /* hide Offers on mobile */ /* location becomes a full-width strip below the logo row */ .pe-location { order: 4; flex: 1 0 100%; height: 36px; padding: 0; justify-content: flex-start; } .pe-location:hover { background: transparent; } .pe-location__text { flex-direction: row; align-items: baseline; gap: var(--pe-sp-4); } .pe-location__label, .pe-location__value { max-width: none; font-size: var(--pe-fs-12); line-height: var(--pe-lh-16); } .pe-location__value { font-weight: var(--pe-fw-semibold); } /* search: field on its own row, teal icon-button instead of a word */ .pe-search { order: 5; flex: 1 0 100%; min-width: 0; height: 44px; } .pe-search__input { font-size: var(--pe-fs-13); } .pe-search__input::placeholder { font-size: var(--pe-fs-13); } .pe-search__btn { width: 44px; padding: 0; font-size: 0; /* label hidden */ } .pe-search__btn::after { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.5' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='m12.25 12.25 3.25 3.25' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.5' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='m12.25 12.25 3.25 3.25' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* nav scrolls horizontally, no scrollbar */ .pe-nav__inner { height: 44px; gap: var(--pe-sp-20); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .pe-nav__inner::-webkit-scrollbar { display: none; } .pe-nav__item { font-size: var(--pe-fs-13); } /* breadcrumb scrolls rather than wraps */ .pe-breadcrumb__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .pe-breadcrumb__list::-webkit-scrollbar { display: none; } .pe-breadcrumb__list li { white-space: nowrap; } /* ── footer becomes an accordion ─────────────────────────────────── */ .pe-footer__cols { grid-template-columns: 1fr; gap: 0; padding-block: var(--pe-sp-8); } .pe-footer__col { border-bottom: 1px solid var(--pe-border-light); } .pe-footer__heading { margin-bottom: 0; padding-block: var(--pe-sp-16); cursor: pointer; } .pe-footer__heading .pe-chevron { display: block; color: var(--pe-text-tertiary); } .pe-footer__col[open] .pe-footer__heading .pe-chevron { transform: rotate(180deg); } .pe-footer__list { padding-bottom: var(--pe-sp-16); gap: var(--pe-sp-16); } .pe-footer__band-inner { padding-block: var(--pe-sp-24); } .pe-footer__stores { flex-wrap: wrap; } .pe-store { flex: 1 1 auto; } .pe-footer__legal { padding-block: var(--pe-sp-16); } } /* ========================================================================== 8. PREFERS-REDUCED-MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 3. BLOCKS — v2 assets/blocks.css (verbatim) ========================================================================== */ /* ========================================================================== blocks.css — shared launch content blocks PharmEasy · Medicines by Class v2 Styling for the seven blocks in partials/blocks.html. Everything is namespaced `peb-*` so a block can be pasted into index.html or class.html without touching either page's own cascade. Load AFTER the page stylesheet: (or class.css) Values come from the Figma exports in design/ (tools/spec.py), so the blocks read as the same components the frames already draw: · link accordion rows — class-desktop y7197-7830, class-mobile y7904-8600 · recommendation rows — class-desktop y337-781 (386.2 rail card) · consult card — class-desktop y195-313 (386.2 × 118) · helpful control — class-desktop y6743 · service tiles — class-mobile y9297-9435 (96 × 96, 16 gap) · why-trust band — specs/pdf-dir-lower.md §12 (desktop y8981-9616) specs/pdf-mobile-dir.md §15 + §21.1 (360 frame) BREAKPOINT Desktop / mobile differences are expressed as custom properties on the block root, not as duplicated rules. The mobile set is declared twice: once at 767px (class.css's mobile switch, and the real 360 frame) and once at 1023px for roots that also carry `peb--m` — index.html renders its mobile frame from 1023px down, so its blocks opt in with `
`. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Block tokens — desktop defaults -------------------------------------------------------------------------- */ .peb { /* section heading. 20/28 is the class-page sec-h2; the directory page draws 20/24 — set --peb-h2-lh:24px on the root there if you want it exact. */ --peb-h2-font: 700 20px/28px var(--pe-font); --peb-h2-lh: 28px; --peb-h2-gap: 14px; /* accordion row */ --peb-row-gap: 16px; --peb-row-bg: var(--pe-white); --peb-row-border: 1px solid var(--pe-border-light); --peb-row-border-top: 0 solid transparent; --peb-row-radius: var(--pe-r-12); --peb-row-minh: 50px; --peb-row-pad: 0 16.9px 0 12px; --peb-row-font: 500 18px/24px var(--pe-font); --peb-toggle-size: 24px; --peb-toggle-bg: transparent; --peb-chev-w: 24px; --peb-chev-h: 24px; /* link list */ --peb-list-pad: 12px 0 4px 12px; --peb-link-font: 400 14px/26px var(--pe-font); --peb-link-pad: 16px; --peb-link-minh: 0px; --peb-bullet-left: 2px; --peb-bullet-top: 11px; --peb-bullet-color: var(--pe-text-tertiary); --peb-grid-min: 230px; --peb-grid-colgap: 24px; /* helpful */ --peb-help-h-font: 700 20px/28px var(--pe-font); --peb-help-h-gap: 14px; --peb-help-sub: none; --peb-help-gap: 64px; --peb-help-radius: var(--pe-r-12); --peb-help-font: 500 18px/1 var(--pe-font); --peb-help-icgap: 16px; --peb-help-ic-w: 20.1px; --peb-help-ic-h: 26.7px; /* consult card — right pad clears the 74px portrait at right:24px */ --peb-consult-padr: 110px; /* mobile-only block */ --peb-svc-display: none; box-sizing: border-box; } .peb *, .peb *::before, .peb *::after { box-sizing: border-box; } .peb-h2 { margin: 0 0 var(--peb-h2-gap); font: var(--peb-h2-font); line-height: var(--peb-h2-lh); color: var(--pe-text); } /* -------------------------------------------------------------------------- 1. Link list — shared by "Top healthcare products" and the lab-test groups Bulleted, underlined, 14/26 #4F585E, teal on hover: the same treatment .row__list a / .acc-body a already carry. -------------------------------------------------------------------------- */ .peb-links { list-style: none; margin: 0; padding: var(--peb-list-pad); } .peb-links li { position: relative; min-height: var(--peb-link-minh); padding-left: var(--peb-link-pad); } .peb-links li::before { content: ""; position: absolute; left: var(--peb-bullet-left); top: var(--peb-bullet-top); width: 4.4px; height: 4.4px; border-radius: 50%; background: var(--peb-bullet-color); } .peb-links a { font: var(--peb-link-font); color: var(--pe-text-secondary); text-decoration: underline; text-underline-offset: 2px; } .peb-links a:hover { color: var(--pe-teal); } .peb-links a:focus-visible { outline: 2px solid var(--pe-teal); outline-offset: 2px; border-radius: var(--pe-r-2); } /* 20 anchors under one heading would be a 20-row column on a 1032px band, so a flat list flows into as many equal columns as the host column affords, in reading order (left to right, then down). One column on mobile. */ .peb-links--grid, .peb-row.is-open .peb-row__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--peb-grid-min), 100%), 1fr)); column-gap: var(--peb-grid-colgap); row-gap: 0; } /* -------------------------------------------------------------------------- 2. Accordion rows — "Lab tests at PharmEasy" -------------------------------------------------------------------------- */ .peb-rows { display: flex; flex-direction: column; gap: var(--peb-row-gap); } .peb-row { background: var(--peb-row-bg); border: var(--peb-row-border); border-radius: var(--peb-row-radius); overflow: hidden; } .peb-row__h { margin: 0; font: inherit; } .peb-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: var(--peb-row-minh); padding: var(--peb-row-pad); margin: 0; background: none; border: 0; cursor: pointer; text-align: left; font: var(--peb-row-font); color: var(--pe-text); } .peb-row__head:focus-visible { outline: 2px solid var(--pe-teal); outline-offset: -2px; } .peb-row__label { flex: 1 1 auto; } .peb-row__toggle { flex: none; display: grid; place-items: center; width: var(--peb-toggle-size); height: var(--peb-toggle-size); border-radius: 50%; background: var(--peb-toggle-bg); color: var(--pe-text); } .peb-chev { width: var(--peb-chev-w); height: var(--peb-chev-h); transition: transform var(--pe-dur) var(--pe-ease); } .peb-row.is-open .peb-chev { transform: scaleY(-1); } .peb-row__list { display: none; } /* opened by .is-open, see §1 grid rule */ /* -------------------------------------------------------------------------- 3. Recommended For You — the rail's rec-card, made fluid Card 386.2 wide in the frame; row 318 = card − 24 pad − 20 indent − 24 pad. -------------------------------------------------------------------------- */ .peb-reco { background: var(--pe-white); box-shadow: 0 0 0 1px var(--pe-border-light); border-radius: var(--pe-r-16); padding: 24px 24px 33px; } .peb-reco__h { margin: 0; font: 700 20px/28px var(--pe-font); color: var(--pe-text); } .peb-reco__list { list-style: none; margin: 16px 0 0; padding: 0; } .peb-reco__list li + li { margin-top: 21px; } .peb-reco__row { position: relative; display: flex; flex-direction: column; justify-content: center; height: 70px; margin-left: 20px; padding: 0 34px 0 70px; background: #F1FBFD; /* --pe-teal-025 on the class page */ border-radius: var(--pe-r-12); text-decoration: none; transition: box-shadow var(--pe-dur) var(--pe-ease); } .peb-reco__row:hover { box-shadow: 0 0 0 1px var(--pe-teal-muted); } .peb-reco__row:focus-visible { outline: 2px solid var(--pe-teal); outline-offset: 2px; } .peb-reco__thumb { position: absolute; left: -13px; top: 0; width: 69px; height: 69px; border-radius: 50%; background: var(--pe-white); box-shadow: 0 2px 10px rgba(30, 36, 60, .10); overflow: hidden; display: grid; place-items: center; } .peb-reco__thumb img { width: 52px; height: 52px; object-fit: contain; } .peb-reco__title { display: block; font: 600 12px/18px var(--pe-font); color: var(--pe-text); } .peb-reco__sub { display: block; font: 500 10px/18px var(--pe-font); color: var(--pe-text-secondary); } .peb-reco__chev { position: absolute; right: 14.4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--pe-teal); } /* -------------------------------------------------------------------------- 4. PharmEasy other services — mobile tiles (96 × 96, 16 gap, image 72 × 64) -------------------------------------------------------------------------- */ .peb-svc { display: var(--peb-svc-display); } .peb-svc__head { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font: 600 12px/16px var(--pe-font); color: var(--pe-text); } .peb-svc__head i { flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(212, 219, 230, 0), #D4DBE6); } .peb-svc__head i:last-child { background: linear-gradient(90deg, #D4DBE6, rgba(212, 219, 230, 0)); } .peb-svc__logo { width: 81px; height: auto; flex: none; } .peb-svc__tiles { display: flex; gap: 16px; margin-top: 28px; } .peb-svc__tile { position: relative; flex: 1 1 0; max-width: 112px; height: 96px; overflow: hidden; background: var(--pe-white); border: 1px solid #DCE4F1; border-radius: var(--pe-r-12); text-decoration: none; } .peb-svc__tile:focus-visible { outline: 2px solid var(--pe-teal); outline-offset: 2px; } .peb-svc__label { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 600 10px/14px var(--pe-font); color: var(--pe-text); } .peb-svc__img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 72px; height: 64px; object-fit: contain; object-position: bottom center; } /* -------------------------------------------------------------------------- 5. Consult card — 386.2 × 118 in the frame, fluid here -------------------------------------------------------------------------- */ .peb-consult { position: relative; min-height: 118px; /* frame height; grows for longer copy */ padding: 22px var(--peb-consult-padr) 8px 24px; /* right pad clears the portrait */ border-radius: var(--pe-r-12); background: linear-gradient(113deg, #CEEAE8 0%, #F6FBFA 100%); overflow: hidden; } .peb-consult__h { margin: 0; max-width: 224px; font: 600 16px/24px var(--pe-font); color: var(--pe-text); } .peb-consult__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; white-space: nowrap; font: 500 14px/24px var(--pe-font); color: var(--pe-teal); text-decoration: none; } .peb-consult__cta:hover { text-decoration: underline; } .peb-consult__cta:focus-visible { outline: 2px solid var(--pe-teal); outline-offset: 2px; } .peb-consult__chev { display: grid; place-items: center; color: var(--pe-teal-dark); } .peb-consult__doc { position: absolute; top: 22px; right: 24px; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; background: var(--pe-white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); } /* -------------------------------------------------------------------------- 6. Did you find this helpful? -------------------------------------------------------------------------- */ .peb-helpful__h { font: var(--peb-help-h-font); margin-bottom: var(--peb-help-h-gap); } .peb-helpful__sub { display: var(--peb-help-sub); margin: 0 0 19px; font: 400 12px/16px var(--pe-font); color: var(--pe-text-tertiary); } .peb-helpful__row { display: flex; gap: var(--peb-help-gap); } .peb-helpful__btn { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--peb-help-icgap); background: var(--pe-white); border: 1px solid var(--pe-border-light); border-radius: var(--peb-help-radius); cursor: pointer; font: var(--peb-help-font); color: var(--pe-text-secondary); transition: border-color var(--pe-dur) var(--pe-ease), box-shadow var(--pe-dur) var(--pe-ease); } .peb-helpful__btn:hover { border-color: var(--pe-teal); } .peb-helpful__btn:focus-visible { outline: 2px solid var(--pe-teal); outline-offset: 2px; } .peb-helpful__btn[aria-pressed="true"] { border-color: var(--pe-teal); box-shadow: inset 0 0 0 1px var(--pe-teal); color: var(--pe-teal); } .peb-helpful__ic { display: grid; place-items: center; } .peb-helpful__ic svg { width: var(--peb-help-ic-w); height: var(--peb-help-ic-h); } .peb-helpful__ic--up { color: var(--pe-green); } .peb-helpful__ic--down { color: #FE9395; } /* --pe-red-light2 on class.css */ .peb-helpful__ack { margin: 12px 0 0; font: 500 13px/20px var(--pe-font); color: var(--pe-teal); } .peb-helpful__ack[hidden] { display: none; } /* -------------------------------------------------------------------------- 7. Why trust PharmEasy? — the band both pages share Copy: content/why-trust.json (published company figures, verbatim). Geometry: specs/pdf-dir-lower.md §12 (desktop 1440 frame) and specs/pdf-mobile-dir.md §15 + §21.1 (360 frame — stat cards and the laurel badges). One element serves both breakpoints, so the desktop band and the mobile slider can never say different things. Desktop = badges on white, five 200x220 stat cards centred on the mint panel, footnote under them. Mobile = the same five cards as a horizontal scroll slider that bleeds past the panel's right edge, exactly as the directory frame draws it. The band also carries its own mobile chrome (white, 24px inset, the 8px #E6EBF4 separator) so it can stand alone in class.html's mobile flow. On index.html the host
already supplies that chrome, so the `peb--m` token set switches it back off. -------------------------------------------------------------------------- */ .peb-trust { /* band chrome */ --peb-tr-mt: 37px; --peb-tr-pad: 47.5px 0 38px; --peb-tr-rule-t: 2px solid var(--pe-surface-sunken); --peb-tr-rule-b: 2px solid var(--pe-surface-sunken); --peb-tr-inner-max: 1440px; --peb-tr-inner-pad: 40px; --peb-tr-align: center; --peb-tr-order: 0; /* heading + sub-headline */ --peb-tr-h-font: 600 40px/48px var(--pe-font); --peb-tr-sub-font: 700 24px/32px var(--pe-font); --peb-tr-sub-mt: 24px; /* laurel badges */ --peb-tr-badges-mt: 15px; --peb-tr-badges-gap: 16px 60px; --peb-tr-badge-gap: 8px; --peb-tr-laurel-w: 31.5px; --peb-tr-laurel-h: 62.5px; --peb-tr-badge-v: 700 20px/25.7px var(--pe-font); --peb-tr-badge-l: 500 20px/25.7px var(--pe-font); --peb-tr-badge-l-col: var(--pe-text); /* mint panel */ --peb-tr-panel-mt: 39.2px; --peb-tr-panel-max: 1200px; --peb-tr-panel-pad: 24px 66.5px 26px; --peb-tr-panel-r: var(--pe-r-12); --peb-tr-cards-just: safe center; --peb-tr-cards-bleed: 0px; /* stat card */ --peb-tr-card-w: 200px; --peb-tr-card-minh: 220px; --peb-tr-card-pad: 24px 16px 22px; --peb-tr-ic-w: 64px; --peb-tr-ic-h: 64px; --peb-tr-ic-svg: 64px; --peb-tr-rule-h: 2px; --peb-tr-rule-mt: 21px; --peb-tr-rule-bg: #DBE4F0; --peb-tr-v-font: 700 20px/24px var(--pe-font); --peb-tr-v-mt: 10px; --peb-tr-l-font: 500 16px/24px var(--pe-font); --peb-tr-l-mt: 7px; /* footnote */ --peb-tr-note-mt: 22px; --peb-tr-note-font: 600 18px/24px var(--pe-font); --peb-tr-note-gap: 13.2px; --peb-tr-note-ic-w: 37.9px; --peb-tr-note-ic-h: 32.1px; order: var(--peb-tr-order); margin-top: var(--peb-tr-mt); padding: var(--peb-tr-pad); background: var(--pe-white); border-top: var(--peb-tr-rule-t); border-bottom: var(--peb-tr-rule-b); text-align: var(--peb-tr-align); } .peb-trust__inner { max-width: var(--peb-tr-inner-max); margin-inline: auto; padding-inline: var(--peb-tr-inner-pad); } .peb-trust__h { margin: 0; font: var(--peb-tr-h-font); color: var(--pe-text); } .peb-trust__sub { margin: var(--peb-tr-sub-mt) 0 0; font: var(--peb-tr-sub-font); color: var(--pe-teal); } /* ── the three laurel-wreath badges ───────────────────────────────────── */ .peb-trust__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--peb-tr-badges-gap); margin: var(--peb-tr-badges-mt) 0 0; padding: 0; list-style: none; } .peb-badge { display: flex; align-items: center; gap: var(--peb-tr-badge-gap); } .peb-badge__laurel { flex: none; width: var(--peb-tr-laurel-w); height: var(--peb-tr-laurel-h); } .peb-badge__laurel--r { transform: scaleX(-1); } .peb-badge__txt { display: flex; flex-direction: column; align-items: center; } .peb-badge__v { font: var(--peb-tr-badge-v); color: var(--pe-text); } .peb-badge__l { font: var(--peb-tr-badge-l); font-style: normal; color: var(--peb-tr-badge-l-col); } /* ── mint panel + the five stat cards ─────────────────────────────────── */ .peb-trust__panel { max-width: var(--peb-tr-panel-max); margin: var(--peb-tr-panel-mt) auto 0; padding: var(--peb-tr-panel-pad); background: var(--pe-green-bg); border-radius: var(--peb-tr-panel-r); } /* the slider. `safe center` keeps the row centred while it fits and falls back to flush-left the moment it overflows, so no card is ever scrolled out of reach — which is what broke the class page's old mobile strip. */ .peb-trust__cards { display: flex; gap: 16px; justify-content: var(--peb-tr-cards-just); margin-inline: var(--peb-tr-cards-bleed); padding-inline: calc(-1 * var(--peb-tr-cards-bleed)); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .peb-trust__cards::-webkit-scrollbar { display: none; } .peb-tcard { flex: none; width: var(--peb-tr-card-w); min-height: var(--peb-tr-card-minh); padding: var(--peb-tr-card-pad); display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: var(--pe-white); border: 1px solid var(--pe-surface-sunken); border-radius: var(--pe-r-12); } .peb-tcard__ic { align-self: center; display: grid; place-items: center; width: var(--peb-tr-ic-w); height: var(--peb-tr-ic-h); } .peb-tcard__ic svg { width: var(--peb-tr-ic-svg); height: var(--peb-tr-ic-svg); } .peb-tcard__rule { display: block; width: 100%; /* 168 desktop / 104 mobile — the card's content box */ height: var(--peb-tr-rule-h); margin-top: var(--peb-tr-rule-mt); background: var(--peb-tr-rule-bg); } .peb-tcard__v { margin-top: var(--peb-tr-v-mt); font: var(--peb-tr-v-font); color: var(--pe-teal); } .peb-tcard__l { margin-top: var(--peb-tr-l-mt); font: var(--peb-tr-l-font); color: var(--pe-text); } /* ── footnote, centred under the cards inside the mint panel ──────────── */ .peb-trust__note { display: flex; align-items: center; justify-content: center; gap: var(--peb-tr-note-gap); margin: var(--peb-tr-note-mt) 0 0; text-align: left; font: var(--peb-tr-note-font); color: var(--pe-teal-bright, #15ACA5); } .peb-trust__hand { flex: none; width: var(--peb-tr-note-ic-w); height: var(--peb-tr-note-ic-h); } /* -------------------------------------------------------------------------- 8. Placeholder art for images the CDN cannot serve (dev, blocked network). Same contract the pages already use: onerror drops src and stamps the attribute, so no broken-image glyph is ever painted. -------------------------------------------------------------------------- */ .peb img[data-peb-ph] { color: transparent; } .peb-reco__thumb img[data-peb-ph], .peb-svc__img[data-peb-ph] { background: var(--pe-surface-sunken) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Crect x='16' y='10' width='20' height='32' rx='4' fill='%23DCEAF0'/%3E%3Crect x='16' y='10' width='20' height='11' rx='4' fill='%23BCD9E4'/%3E%3C/svg%3E") center / 60% no-repeat; border-radius: var(--pe-r-8); } .peb-consult__doc[data-peb-ph] { background: var(--pe-surface-sunken) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='19' r='8' fill='%23C9D7ED'/%3E%3Cpath d='M8 44c0-9 7-14 16-14s16 5 16 14z' fill='%23C9D7ED'/%3E%3C/svg%3E") center / 70% no-repeat; } .peb-svc__logo[data-peb-ph] { display: none; } /* -------------------------------------------------------------------------- 9. MOBILE — the 360 frame. Only the token block changes; every rule above is reused. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .peb { --peb-h2-font: 600 18px/24px var(--pe-font); --peb-h2-lh: 24px; --peb-h2-gap: 12px; --peb-row-gap: 0px; --peb-row-bg: transparent; --peb-row-border: 0 solid transparent; --peb-row-border-top: 1px solid var(--pe-border-light); --peb-row-radius: 0; --peb-row-minh: 64px; --peb-row-pad: 20px 0; --peb-row-font: 400 14px/24px var(--pe-font); --peb-toggle-bg: var(--pe-surface-sunken); --peb-chev-w: 9.76px; --peb-chev-h: 5.76px; --peb-list-pad: 0 0 16px; --peb-link-font: 400 14px/36px var(--pe-font); --peb-link-pad: 21px; --peb-link-minh: 36px; --peb-bullet-left: 6.5px; --peb-bullet-top: 15.8px; --peb-bullet-color: var(--pe-text-secondary); --peb-grid-min: 100%; --peb-grid-colgap: 0px; --peb-help-h-font: 600 20px/26px var(--pe-font); --peb-help-h-gap: 4px; --peb-help-sub: block; --peb-help-gap: 24px; --peb-help-radius: var(--pe-r-8); --peb-help-font: 400 14px/1 var(--pe-font); --peb-help-icgap: 12px; --peb-help-ic-w: 25px; --peb-help-ic-h: 28px; --peb-svc-display: block; --peb-consult-padr: 104px; } /* the hairline lives on the row, not around the box */ .peb-row { border-top: var(--peb-row-border-top); } .peb-row:first-child { border-top: 0; } .peb-reco { border-radius: 0; box-shadow: none; padding: 22px 16px 24px; } .peb-reco__h { font: 600 18px/24px var(--pe-font); } .peb-consult { min-height: 0; } /* Why trust — the band becomes a standalone mobile section and the five stat cards become the horizontal slider. order:24 is the slot the class page's mobile frame gives it (class.css §20, directly above PharmEasy other services); it is inert wherever the band is not a flex item. */ .peb-trust { --peb-tr-mt: 0px; --peb-tr-pad: 32px 24px 34px; --peb-tr-rule-t: 0 solid transparent; --peb-tr-rule-b: 8px solid var(--pe-border-light); --peb-tr-inner-max: none; --peb-tr-inner-pad: 0px; --peb-tr-align: left; --peb-tr-order: 24; --peb-tr-h-font: 600 18px/24px var(--pe-font); --peb-tr-sub-font: 700 12px/16px var(--pe-font); --peb-tr-sub-mt: 6px; --peb-tr-badges-mt: 16px; --peb-tr-badges-gap: 12px 14px; --peb-tr-badge-gap: 4px; --peb-tr-laurel-w: 13.77px; --peb-tr-laurel-h: 27.36px; --peb-tr-badge-v: 700 10px/16px var(--pe-font); --peb-tr-badge-l: 400 10px/16px var(--pe-font); --peb-tr-badge-l-col: var(--pe-text-tertiary); --peb-tr-panel-mt: 20px; --peb-tr-panel-max: none; --peb-tr-panel-pad: 16px; --peb-tr-panel-r: var(--pe-r-16); --peb-tr-cards-just: flex-start; --peb-tr-cards-bleed: -16px; --peb-tr-card-w: 136px; --peb-tr-card-minh: 176px; --peb-tr-card-pad: 16px; --peb-tr-ic-w: 104px; --peb-tr-ic-h: 80px; --peb-tr-ic-svg: 72px; --peb-tr-rule-h: 1px; --peb-tr-rule-mt: 11px; --peb-tr-rule-bg: #DCE4F1; --peb-tr-v-font: 700 12px/16px var(--pe-font); --peb-tr-v-mt: 9px; --peb-tr-l-font: 400 12px/16px var(--pe-font); --peb-tr-l-mt: 8px; --peb-tr-note-mt: 16px; --peb-tr-note-font: 600 12px/19px var(--pe-font); --peb-tr-note-gap: 8px; --peb-tr-note-ic-w: 30px; --peb-tr-note-ic-h: 26px; } } /* index.html renders its mobile frame from 1023px down — its blocks carry `peb--m` so the same tokens land there four breakpoints earlier. */ @media (max-width: 1023px) { .peb--m { --peb-h2-font: 600 18px/24px var(--pe-font); --peb-h2-lh: 24px; --peb-h2-gap: 12px; --peb-row-gap: 0px; --peb-row-bg: transparent; --peb-row-border: 0 solid transparent; --peb-row-border-top: 1px solid var(--pe-border-light); --peb-row-radius: 0; --peb-row-minh: 64px; --peb-row-pad: 20px 0; --peb-row-font: 400 14px/24px var(--pe-font); --peb-toggle-bg: var(--pe-surface-sunken); --peb-chev-w: 9.76px; --peb-chev-h: 5.76px; --peb-list-pad: 0 0 16px; --peb-link-font: 400 14px/36px var(--pe-font); --peb-link-pad: 21px; --peb-link-minh: 36px; --peb-bullet-left: 6.5px; --peb-bullet-top: 15.8px; --peb-bullet-color: var(--pe-text-secondary); --peb-grid-min: 100%; --peb-grid-colgap: 0px; --peb-help-h-font: 600 20px/28px var(--pe-font); --peb-help-h-gap: 4px; --peb-help-sub: block; --peb-help-gap: 24px; --peb-help-radius: var(--pe-r-8); --peb-help-font: 400 14px/1 var(--pe-font); --peb-help-icgap: 12px; --peb-help-ic-w: 25px; --peb-help-ic-h: 28px; --peb-svc-display: block; --peb-consult-padr: 104px; } .peb--m .peb-row { border-top: var(--peb-row-border-top); } .peb--m .peb-row:first-child { border-top: 0; } .peb--m.peb-reco { border-radius: 0; box-shadow: none; padding: 22px 16px 24px; } .peb--m.peb-reco .peb-reco__h { font: 600 18px/24px var(--pe-font); } .peb--m.peb-consult { min-height: 0; } /* Why trust — same mobile set. The two chrome tokens differ: on index.html the band sits inside
, which already draws the inset and the 8px separator, so the block draws neither. Being the more specific selector this also wins below 767px. */ .peb--m.peb-trust { --peb-tr-mt: 0px; --peb-tr-pad: 0px; --peb-tr-rule-t: 0 solid transparent; --peb-tr-rule-b: 0 solid transparent; --peb-tr-inner-max: none; --peb-tr-inner-pad: 0px; --peb-tr-align: left; --peb-tr-h-font: 600 18px/24px var(--pe-font); --peb-tr-sub-font: 700 12px/16px var(--pe-font); --peb-tr-sub-mt: 6px; --peb-tr-badges-mt: 16px; --peb-tr-badges-gap: 12px 14px; --peb-tr-badge-gap: 4px; --peb-tr-laurel-w: 13.77px; --peb-tr-laurel-h: 27.36px; --peb-tr-badge-v: 700 10px/16px var(--pe-font); --peb-tr-badge-l: 400 10px/16px var(--pe-font); --peb-tr-badge-l-col: var(--pe-text-tertiary); --peb-tr-panel-mt: 20px; --peb-tr-panel-max: none; --peb-tr-panel-pad: 16px; --peb-tr-panel-r: var(--pe-r-16); --peb-tr-cards-just: flex-start; --peb-tr-cards-bleed: -16px; --peb-tr-card-w: 136px; --peb-tr-card-minh: 176px; --peb-tr-card-pad: 16px; --peb-tr-ic-w: 104px; --peb-tr-ic-h: 80px; --peb-tr-ic-svg: 72px; --peb-tr-rule-h: 1px; --peb-tr-rule-mt: 11px; --peb-tr-rule-bg: #DCE4F1; --peb-tr-v-font: 700 12px/16px var(--pe-font); --peb-tr-v-mt: 9px; --peb-tr-l-font: 400 12px/16px var(--pe-font); --peb-tr-l-mt: 8px; --peb-tr-note-mt: 16px; --peb-tr-note-font: 600 12px/19px var(--pe-font); --peb-tr-note-gap: 8px; --peb-tr-note-ic-w: 30px; --peb-tr-note-ic-h: 26px; } } @media (prefers-reduced-motion: reduce) { .peb-chev, .peb-reco__row, .peb-helpful__btn { transition: none; } } /* ========================================================================== 4. DIRECTORY PAGE — v2 assets/directory.css Every selector prefixed `:where(body:not(.cls-body))`; nothing else changed. ========================================================================== */ /* ========================================================================== PharmEasy — Medicines by Class · DIRECTORY page Every number here was read from design/directory-desktop.pdf (1440 × 10322) and design/directory-mobile.pdf (360 × 10162) via tools/spec.py, or from the specs in specs/pdf-dir-*.md / specs/pdf-mobile-dir.md that measured them. Written desktop-first against the 1440 artboard; the mobile frame is reproduced in the single @media (max-width:1023px) block at the end. NOTE — this page does NOT use the .pe-header / .pe-breadcrumb / .pe-footer rules in base.css. Those were authored from production CSS while Figma was unreachable and contradict this frame in ~10 places (see specs/pdf-dir-top.md §0). base.css is still linked for its reset, type utilities and reduced-motion rule. Chrome is rebuilt below from the PDF. ========================================================================== */ /* ── 0. Primitives ──────────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } :where(body:not(.cls-body)) .ic { display: block; flex: none; } :where(body:not(.cls-body)) .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--pe-teal); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font: 600 14px/20px var(--pe-font); } :where(body:not(.cls-body)) .skip:focus { left: 0; } body:where(:not(.cls-body)) { background: var(--pe-surface); font-family: var(--pe-font); } :where(body:not(.cls-body)) .d-only { display: block; } :where(body:not(.cls-body)) .m-only, :where(body:not(.cls-body)) .m-only-inline { display: none; } /* ========================================================================== 1. HEADER — 112px total: 64px utility row + 48px nav row Frame: white full-bleed; inner container 1200px (x 120 → 1320) ========================================================================== */ :where(body:not(.cls-body)) .hdr { background: #fff; position: relative; z-index: 20; } :where(body:not(.cls-body)) .hdr__inner { max-width: 1200px; margin-inline: auto; height: 64px; display: flex; align-items: center; } :where(body:not(.cls-body)) .hdr__burger, :where(body:not(.cls-body)) .hdr__pill, :where(body:not(.cls-body)) .hdr__ico, :where(body:not(.cls-body)) .hdr__logo-sm { display: none; } /* logo — 148 × 41, SVG carries its own "Take it easy" script line */ :where(body:not(.cls-body)) .hdr__logo { flex: none; margin-right: 23px; display: block; } :where(body:not(.cls-body)) .hdr__logo-lg { width: 148px; height: 41px; } /* 1 × 32 rule, #8897A2 */ :where(body:not(.cls-body)) .hdr__rule { flex: none; width: 1px; height: 32px; background: #8897A2; margin-right: 24px; } /* location block — 2 lines, 40px tall, gap 4 */ :where(body:not(.cls-body)) .hdr__loc { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 40px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } :where(body:not(.cls-body)) .hdr__loc-label { display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--pe-font); color: #4F585E; white-space: nowrap; } :where(body:not(.cls-body)) .hdr__bolt { width: 16px; height: 16px; } :where(body:not(.cls-body)) .hdr__loc-value { display: flex; align-items: center; gap: 5px; font: 700 14px/20px var(--pe-font); color: #30363C; white-space: nowrap; } :where(body:not(.cls-body)) .hdr__loc-value .ic { color: #30363C; } /* search — 500 × 48, pill r24, 1px #15ACA5, white */ :where(body:not(.cls-body)) .hdr__search { flex: 0 1 500px; margin-left: auto; position: relative; display: flex; align-items: center; width: 500px; min-width: 240px; height: 48px; padding-left: 19px; gap: 12px; background: #fff; border: 1px solid #15ACA5; border-radius: 24px; box-shadow: 0 1px 16px rgba(0,0,0,.12); } :where(body:not(.cls-body)) .hdr__search-ic { color: #8897A2; } :where(body:not(.cls-body)) .hdr__search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; outline: none; appearance: none; font: 400 14px/20px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .hdr__search input::placeholder { color: #8897A2; font-weight: 400; } :where(body:not(.cls-body)) .hdr__search-btn { position: absolute; top: 3px; right: 3px; /* 4px from the border box */ width: 116px; height: 40px; background: var(--pe-teal); color: #fff; border: 0; border-radius: 20px; cursor: pointer; font: 700 14px/1 var(--pe-font); transition: background var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .hdr__search-btn:hover { background: var(--pe-teal-dark); } /* actions — icons 20, icon→label gap 10, item gap 34, group flush to x 1320 */ :where(body:not(.cls-body)) .hdr__actions { flex: none; display: flex; align-items: center; gap: 34px; margin-left: 24px; } :where(body:not(.cls-body)) .hdr__action { display: flex; align-items: center; gap: 10px; font: 600 14px/20px var(--pe-font); color: #30363C; white-space: nowrap; transition: color var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .hdr__action .ic { color: #30363C; transition: color var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .hdr__action:hover, :where(body:not(.cls-body)) .hdr__action:hover .ic { color: var(--pe-teal); } /* nav row — 48px, 1px #D4DBE7 top and bottom, five plain 12px labels, centred */ :where(body:not(.cls-body)) .hdr__nav { height: 48px; background: #fff; border-top: 1px solid #D4DBE7; border-bottom: 1px solid #D4DBE7; box-sizing: border-box; } :where(body:not(.cls-body)) .hdr__nav-list { height: 100%; margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center; gap: 40.5px; } /* the Healthcare → Lab tests gap is 8.75px wider in the source (verified at 6×) */ :where(body:not(.cls-body)) .hdr__nav-list li:nth-child(3) { margin-left: 8.75px; } :where(body:not(.cls-body)) .hdr__nav-list a { font: 400 12px/20px var(--pe-font); color: #30363C; white-space: nowrap; transition: color var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .hdr__nav-list a:hover { color: var(--pe-teal); } /* ========================================================================== 2. PAGE SHELL — #F5F8FC + the 195px teal wash starting at y 112 Page container 1360 wide (40px gutters on the 1440 artboard) ========================================================================== */ :where(body:not(.cls-body)) .page { background: linear-gradient(180deg, #EDFFFF 0%, #F5F8FC 100%) top left / 100% 195px no-repeat, var(--pe-surface); padding-inline: max(40px, calc((100% - 1440px) / 2 + 40px)); } :where(body:not(.cls-body)) .grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 40px; align-items: start; } :where(body:not(.cls-body)) .col-main { min-width: 0; } /* ── 3. Breadcrumb — on the wash, 18px / 800, current crumb is teal ─────── */ :where(body:not(.cls-body)) .crumbs { padding-top: 33.4px; padding-bottom: 40.6px; } :where(body:not(.cls-body)) .crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; font: 800 18px/24px var(--pe-font); } :where(body:not(.cls-body)) .crumbs a { color: #30363C; } :where(body:not(.cls-body)) .crumbs a:hover { color: var(--pe-teal); } :where(body:not(.cls-body)) .crumbs [aria-current] { color: var(--pe-teal); } :where(body:not(.cls-body)) .crumbs__sep { color: #30363C; margin: 0 12px 0 4px; } /* ========================================================================== 4. HERO CARD — 1080 × 232 at y 210, 2px #EDF2F9, r16, no shadow ========================================================================== */ :where(body:not(.cls-body)) .hero { background: #fff; border: 2px solid #EDF2F9; border-radius: 16px; padding: 28.64px 22px 30px; } :where(body:not(.cls-body)) .hero__h1 { margin: 0; font: 700 26px/32px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .hero__p { margin: 13.4px 0 0; font: 400 18px/24px var(--pe-font); color: #4F585E; } /* the frame breaks line 1 after "…their uses and"; at 1032px that decision sits within 0.05px of the wrap point, so the break is made explicit */ :where(body:not(.cls-body)) .brk-d { display: inline; } :where(body:not(.cls-body)) .hero__search { position: relative; margin-top: 19.96px; display: flex; align-items: center; width: 100%; max-width: 806px; height: 56px; padding-left: 24.3px; gap: 5.9px; background: #fff; border: 1px solid #D4DBE7; border-radius: 12px; box-shadow: 0 1px 16px rgba(0,0,0,.12); } :where(body:not(.cls-body)) .hero__search-ic { color: #8897A2; } :where(body:not(.cls-body)) .hero__search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; outline: none; appearance: none; font: 400 14px/20px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .hero__search input::placeholder { color: #8897A2; } :where(body:not(.cls-body)) .hero__search input::-webkit-search-cancel-button { appearance: none; } :where(body:not(.cls-body)) .hero__search-btn { position: absolute; top: 7px; right: 7px; /* 8px from the border box */ width: 120px; height: 40px; background: var(--pe-teal); color: #fff; border: 0; border-radius: 8px; cursor: pointer; font: 700 14px/1 var(--pe-font); transition: background var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .hero__search-btn:hover { background: var(--pe-teal-dark); } /* ========================================================================== 5. MAIN PANEL + SECTION RHYTHM Panel border-box x 40 → 1120 (1080 wide), 2px #EDF2F9, r16. Content column 1032 wide => padding-inline 22 inside the 2px border. Sections carry their own 8px #EDF2F9 separator as ::before, so the section box top == the separator top and one `order` value moves the whole block. ========================================================================== */ :where(body:not(.cls-body)) .panel { margin-top: 40px; background: #fff; border: 2px solid #EDF2F9; border-radius: 16px; padding: 22px 22px 0; } :where(body:not(.cls-body)) .sec { position: relative; padding: 52px 0 40px; } :where(body:not(.cls-body)) .sec::before { content: ""; position: absolute; top: 0; left: -24px; right: -24px; height: 8px; background: #EDF2F9; } :where(body:not(.cls-body)) .sec--pop { padding-top: 0; } :where(body:not(.cls-body)) .sec--pop::before, :where(body:not(.cls-body)) .sec--authored::before { content: none; } :where(body:not(.cls-body)) .sec--az { padding-top: 48px; } :where(body:not(.cls-body)) .sec--ask { padding-top: 31.1px; padding-bottom: 1px; } :where(body:not(.cls-body)) .sec--safety { padding-bottom: 43.3px; } :where(body:not(.cls-body)) .sec--contact { padding-bottom: 55.8px; } /* section heading — 20 / 24 / 700, ink top = section top + 48.6 */ :where(body:not(.cls-body)) .sec__h { margin: 0; font: 700 20px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .sec__h--m, :where(body:not(.cls-body)) .sec__h--safety-m, :where(body:not(.cls-body)) .sec__h--18 { display: none; } /* the two 20/32 headings (Popular, Browse all) */ :where(body:not(.cls-body)) .sec--pop .sec__h { line-height: 32px; margin: .73px 0 24.27px; } :where(body:not(.cls-body)) .sec--az .sec__h { line-height: 32px; } /* ========================================================================== 6. CLASS CARD — 330.667 × 146 · the page's most repeated component ========================================================================== */ :where(body:not(.cls-body)) .cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 24px; } :where(body:not(.cls-body)) .cc { box-sizing: border-box; height: 146px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; background: var(--pe-surface); border: 1px solid var(--pe-border-light); border-radius: 8px; text-decoration: none; transition: border-color var(--pe-dur) var(--pe-ease), box-shadow var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .cc:hover { border-color: #D4DBE7; box-shadow: 0 2px 10px rgba(48,54,60,.06); } :where(body:not(.cls-body)) .cc__chip { box-sizing: border-box; display: inline-flex; align-items: center; height: 32px; padding: 0 11px; /* +1px border = the design's 12px inset */ border: 1px solid; border-radius: 16px; font: 600 14px/1 var(--pe-font); white-space: nowrap; } :where(body:not(.cls-body)) .cc__t { margin-top: 10px; font: 600 16px/20px var(--pe-font); color: #000; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(body:not(.cls-body)) .cc__rule { margin-top: 13px; width: 100%; height: 1px; display: block; background: linear-gradient(90deg, #D4DBE6 0%, #D4DBE6 66.6%, rgba(212,219,230,.875) 68.1%, rgba(212,219,230,.75) 70.2%, rgba(212,219,230,.5) 74.9%, rgba(212,219,230,.25) 81%, rgba(212,219,230,.125) 85.1%, rgba(212,219,230,0) 91.5%); } :where(body:not(.cls-body)) .cc__n { margin-top: 12px; display: flex; align-items: center; gap: 8px; font: 700 14px/24px var(--pe-font); color: var(--pe-teal); } :where(body:not(.cls-body)) .cc__chev { position: relative; top: .6px; stroke-width: 1.648; } /* matched-substring highlight while searching (mobile dims the remainder) */ :where(body:not(.cls-body)) .cc__t mark { background: none; color: inherit; font-weight: inherit; } /* — category accent map: 19 triples, read from the PDF fills — */ :where(body:not(.cls-body)) .cc--allergy .cc__chip { border-color:#FFC9A0; background:#FFF2E8; color:#CF7530; } :where(body:not(.cls-body)) .cc--blood .cc__chip { border-color:#FE9395; background:#FFF5F5; color:#CC4C4E; } :where(body:not(.cls-body)) .cc--bone .cc__chip { border-color:#AACFE3; background:#F1FAFE; color:#608FA8; } :where(body:not(.cls-body)) .cc--cancer .cc__chip { border-color:#AAA1E8; background:#F1EEFF; color:#6E53BA; } :where(body:not(.cls-body)) .cc--diabetes .cc__chip { border-color:#7EA7F2; background:#EBF2FF; color:#3661B0; } :where(body:not(.cls-body)) .cc--digestive .cc__chip { border-color:#81DCBA; background:#F2FFF8; color:#45A081; } :where(body:not(.cls-body)) .cc--heart .cc__chip { border-color:#F1809B; background:#FFEFF3; color:#E15F7F; } :where(body:not(.cls-body)) .cc--hormone .cc__chip { border-color:#F5B326; background:#FFF8E3; color:#C88801; } :where(body:not(.cls-body)) .cc--immunity .cc__chip { border-color:#FFC9A0; background:#FFF2E8; color:#CF7530; } :where(body:not(.cls-body)) .cc--infection .cc__chip { border-color:#81DCBA; background:#F2FFF8; color:#45A081; } :where(body:not(.cls-body)) .cc--kidney .cc__chip { border-color:#15ACA5; background:#CEEAE8; color:#0E746E; } :where(body:not(.cls-body)) .cc--liver .cc__chip { border-color:#F5B326; background:#FFF8E3; color:#C88801; } :where(body:not(.cls-body)) .cc--mens .cc__chip { border-color:#7EA7F2; background:#EBF2FF; color:#3661B0; } :where(body:not(.cls-body)) .cc--neuro .cc__chip { border-color:#AAA1E8; background:#F1EEFF; color:#6E53BA; } :where(body:not(.cls-body)) .cc--nutrition .cc__chip { border-color:#15ACA5; background:#CEEAE8; color:#0E746E; } :where(body:not(.cls-body)) .cc--pain .cc__chip { border-color:#FF9341; background:#FFF2E8; color:#F58128; } :where(body:not(.cls-body)) .cc--respiratory .cc__chip { border-color:#3DCDE6; background:#CEF8FF; color:#187484; } :where(body:not(.cls-body)) .cc--skin .cc__chip { border-color:#E5AA7A; background:#FFF2E8; color:#C4865C; } :where(body:not(.cls-body)) .cc--womens .cc__chip { border-color:#F1809B; background:#FFEFF3; color:#E15F7F; } /* ── 6.1 Search empty state ───────────────────────────────────────────── Not drawn in directory-search-desktop / -mobile (both frames show 5 hits), so this is built from the page's own primitives and flagged as invented. */ :where(body:not(.cls-body)) .empty { padding: 44px 0 12px; text-align: center; } :where(body:not(.cls-body)) .empty__ic { color: #C3CEDC; margin: 0 auto 16px; } :where(body:not(.cls-body)) .empty__t { margin: 0; font: 600 16px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .empty__s { margin: 6px 0 0; font: 400 14px/20px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .empty__btn { margin-top: 18px; background: none; border: 0; cursor: pointer; font: 700 14px/24px var(--pe-font); color: var(--pe-teal); text-decoration: underline; } /* ========================================================================== 7. A–Z BROWSE ========================================================================== */ :where(body:not(.cls-body)) .az__sub { margin: 5px 0 0; font: 400 14px/20px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .az-chips { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; } :where(body:not(.cls-body)) .az-chip { box-sizing: border-box; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--pe-surface-sunken); border: 1px solid var(--pe-teal); border-radius: 4px; color: var(--pe-teal); font: 600 16px/1 var(--pe-font); cursor: pointer; transition: background var(--pe-dur) var(--pe-ease), color var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .az-chip:hover { background: #DFE9F6; } :where(body:not(.cls-body)) .az-chip--all { width: auto; padding: 0 10px; } :where(body:not(.cls-body)) .az-chip.is-on { background: var(--pe-teal); border-color: var(--pe-teal); color: #fff; } :where(body:not(.cls-body)) .az-chip--off { width: auto; min-width: 30px; padding: 0 9px; border-radius: 8px; border-color: var(--pe-border-light); background: var(--pe-border-light); color: var(--pe-text-muted); cursor: default; } :where(body:not(.cls-body)) .az-chip--off:hover { background: var(--pe-border-light); } :where(body:not(.cls-body)) .az-groups { margin-top: 32px; } :where(body:not(.cls-body)) .az-grp + .az-grp { margin-top: 40px; } :where(body:not(.cls-body)) .az-grp[hidden] { display: none; } :where(body:not(.cls-body)) .az-grp__head { width: 100%; height: 24px; padding: 0; background: none; border: 0; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: default; text-align: left; } :where(body:not(.cls-body)) .az-grp__ltr { font: 700 18px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .az-grp__rule { flex: 1 1 auto; align-self: flex-start; margin-top: 10px; height: 2px; background: repeating-linear-gradient(90deg, #D4DBE6 0 4px, transparent 4px 8px); } :where(body:not(.cls-body)) .az-grp__count, :where(body:not(.cls-body)) .az-grp__chev { display: none; } /* ========================================================================== 8. EDITORIAL SECTIONS ========================================================================== */ :where(body:not(.cls-body)) .prose { margin: 0 0 20px; font: 400 14px/20px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .prose:last-child { margin-bottom: 0; } :where(body:not(.cls-body)) .sec__h + .prose { margin-top: 20.4px; } /* — safety list: 4.4px disc, text x 77.1, 30px row pitch — */ :where(body:not(.cls-body)) .safety { margin: 19.4px 0 0; padding: 0; list-style: none; } :where(body:not(.cls-body)) .safety li { position: relative; padding-left: 13.1px; margin-bottom: 10px; font: 400 14px/20px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .safety li:last-child { margin-bottom: 0; } :where(body:not(.cls-body)) .safety li::before { content: ""; position: absolute; left: 8.3px; top: 8.8px; /* disc 72.3 → 76.7 */ width: 4.4px; height: 4.4px; border-radius: 50%; background: #4F585E; } /* — how-to steps: 56px badge straddling a 288 × 124 gradient card — */ :where(body:not(.cls-body)) .steps { position: relative; margin: 30px 0 0; padding: 0; list-style: none; display: flex; gap: 39.9px; } :where(body:not(.cls-body)) .steps::after { /* dotted connector, behind the cards */ content: ""; position: absolute; left: 11.53%; right: 16.57%; top: 89px; height: 4px; z-index: 0; /* x 183 → 925 on the 1032 column */ background-image: radial-gradient(circle, #B2CAF6 2px, transparent 2px); background-size: 9px 4px; } /* cards are 288 wide at x 64 / 391.9 / 719.8 — they do NOT fill the column */ :where(body:not(.cls-body)) .step { position: relative; flex: 0 1 288px; min-width: 0; padding-top: 28px; z-index: 1; } :where(body:not(.cls-body)) .step__num { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--pe-border-light); font: 700 28px/56px var(--pe-font); color: #30363C; text-align: center; z-index: 2; } :where(body:not(.cls-body)) .step__body { box-sizing: border-box; height: 124px; padding: 38.62px 16px 0; border: 1px solid transparent; border-radius: 16px; background-origin: border-box; background-image: linear-gradient(180deg, #FEFEFE 0%, #F4F8FB 100%), linear-gradient(180deg, #F3F3F4 0%, #E2EAF4 22%, #CEE0F4 45%, #BAD5F4 70%, #AFCFF4 100%); background-clip: padding-box, border-box; } :where(body:not(.cls-body)) .step__t { margin: 0; font: 600 16px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .step__p { margin: 0; font: 400 14px/22px var(--pe-font); color: #30363C; } /* — difference table: 1032 × 258, r12, 1px #DCE4F1, 48px rows — */ :where(body:not(.cls-body)) .why__intro { margin: 8.4px 0 0; font: 400 14px/20px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .difftable { box-sizing: border-box; margin: 24.6px 0 0; padding: 7px 0 9px; background: #fff; border: 1px solid #DCE4F1; border-radius: 12px; } /* the 1px separators are inset 25px from each card edge: x 89 → 1071 */ :where(body:not(.cls-body)) .difftable__row { height: 48px; display: flex; align-items: center; margin: 0 24px; border-bottom: 1px solid #DCE4F1; } :where(body:not(.cls-body)) .difftable__row:last-child { border-bottom: 0; } :where(body:not(.cls-body)) .difftable dt { flex: none; width: 254px; font: 500 16px/24px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .difftable dd { margin: 0; font: 600 16px/24px var(--pe-font); color: #30363C; } /* ========================================================================== 9. FAQ ACCORDION ========================================================================== */ :where(body:not(.cls-body)) .faq { margin-top: 37px; display: flex; flex-direction: column; gap: 20px; } :where(body:not(.cls-body)) .faq__item { position: relative; border-radius: 8px; background: var(--pe-surface); overflow: hidden; } :where(body:not(.cls-body)) .faq__q { position: relative; width: 100%; min-height: 50px; padding: 0 46px 0 16px; display: flex; align-items: center; background: none; border: 0; cursor: pointer; text-align: left; font: 700 18px/24px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .faq__chev { position: absolute; right: 20.9px; top: 50%; margin-top: -4.1px; color: #909090; transition: transform var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .faq__a { display: none; padding: 7.39px 16px 12.6px; } :where(body:not(.cls-body)) .faq__a p { margin: 0; max-width: 995px; font: 400 14px/26px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .faq__item.is-open { background: #EBF6F5; box-shadow: 0 -1px 0 var(--pe-teal); /* 1px teal rule drawn OUTSIDE the top */ overflow: visible; } :where(body:not(.cls-body)) .faq__item.is-open .faq__q { color: #30363C; } :where(body:not(.cls-body)) .faq__item.is-open .faq__chev { transform: scaleY(-1); } :where(body:not(.cls-body)) .faq__item.is-open .faq__a { display: block; } /* wide outline button — "View all questions" 1032 × 48 */ :where(body:not(.cls-body)) .widebtn { box-sizing: border-box; margin-top: 32px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 1px solid #D4DBE7; border-radius: 8px; font: 600 16px/24px var(--pe-font); color: #4F585E; transition: border-color var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .widebtn:hover { border-color: var(--pe-teal); color: var(--pe-teal); } :where(body:not(.cls-body)) .widebtn__chev { width: 20px; height: 20px; color: currentColor; } /* ========================================================================== 10. HAVE QUESTION? ASK US! + the wavy gradient band ========================================================================== */ :where(body:not(.cls-body)) .ask__h { margin: 0; font: 600 22px/28px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .ask__sub { margin: 5.5px 0 0; font: 400 14px/20px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .ask__box { position: relative; margin-top: 23.4px; height: 50px; display: flex; align-items: center; background: #fff; border: 1px solid var(--pe-border-light); border-radius: 8px; box-shadow: 0 2px 8px rgba(48,54,60,.04); } :where(body:not(.cls-body)) .ask__box input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 60px 0 18px; border: 0; background: none; outline: none; font: 400 16px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .ask__box input::placeholder { color: #8897A2; } :where(body:not(.cls-body)) .ask__send { position: absolute; right: 17px; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--pe-teal-dark); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } :where(body:not(.cls-body)) .ask__send .ic { width: 16px; height: 13px; } :where(body:not(.cls-body)) .askband { position: relative; margin: 23px -23px 0; /* x 41 → 1119 */ padding: 15.85px 45px 16px 48px; /* content x 89 → 1074 */ background: linear-gradient(105deg, #F0F9FF 0%, #F3F4FF 42%, #F7EAFF 100%); } :where(body:not(.cls-body)) .askband::before { /* white sine wave on the band's top edge */ content: ""; position: absolute; left: 0; right: 0; top: -.2px; height: 5.4px; background-repeat: repeat-x; background-size: 38.75px 5.2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.75' height='5.2' viewBox='0 0 38.75 5.2' preserveAspectRatio='none'%3E%3Cpath d='M0 5.2C9.7 5.2 9.7 0 19.4 0s9.7 5.2 19.35 5.2z' fill='%23fff'/%3E%3C/svg%3E"); } :where(body:not(.cls-body)) .askband__h { margin: 0; font: 700 18px/24px var(--pe-font); color: #30363C; } /* the 12px run shares the 18px heading's baseline; a shorter line-height keeps its descent inside the strut so the line box stays exactly 24px */ :where(body:not(.cls-body)) .askband__h span { font: 400 12px/18px var(--pe-font); } :where(body:not(.cls-body)) .askband__ai { display: none; } :where(body:not(.cls-body)) .qrail { position: relative; margin-top: 24.15px; } :where(body:not(.cls-body)) .qrail__track { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } :where(body:not(.cls-body)) .qrail__track::-webkit-scrollbar { display: none; } :where(body:not(.cls-body)) .qrail__track > :nth-child(2) { margin-left: 8px; } /* the source's 24px first gap */ :where(body:not(.cls-body)) .qcard { box-sizing: border-box; flex: none; width: 280px; height: 330px; padding: 16px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pe-border-light); border-radius: 12px; box-shadow: 0 4px 14px rgba(48,54,60,.08); } :where(body:not(.cls-body)) .qcard__q { margin: 0; font: 600 16px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .qcard__a { margin: 14px 0 0; font: 400 14px/21px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .qcard__a a { font-weight: 700; text-decoration: underline; color: #4F585E; } :where(body:not(.cls-body)) .qcard__rev { margin: 12px 0 0; font: 400 12px/16px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .qcard__rev span { color: #45A081; font-weight: 500; } :where(body:not(.cls-body)) .qcard__rev a { color: #4F585E; text-decoration: underline; } :where(body:not(.cls-body)) .qcard__rule { margin-top: 14px; height: 1px; display: block; background: linear-gradient(90deg, #DCE4F1 0%, #DCE4F1 66.6%, rgba(220,228,241,.5) 74.9%, rgba(220,228,241,0) 91.5%); } :where(body:not(.cls-body)) .qcard__by { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font: 400 14px/20px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .qcard__by .ic { color: #30363C; } :where(body:not(.cls-body)) .qcard__by strong { font-weight: 600; } :where(body:not(.cls-body)) .qcard__foot { margin: auto -16px -16px; padding: 8px 16px; height: 40px; box-sizing: border-box; background: var(--pe-surface); border-radius: 0 0 11px 11px; display: flex; align-items: center; gap: 8px; } :where(body:not(.cls-body)) .pill { box-sizing: border-box; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--pe-border); border-radius: 12px; font: 500 10px/1 var(--pe-font); color: #6E787E; cursor: pointer; } :where(body:not(.cls-body)) .pill--sm { width: 32px; padding: 0; justify-content: center; } :where(body:not(.cls-body)) .pill__ic { width: 13px; height: 14px; } :where(body:not(.cls-body)) .railnext { position: absolute; right: 8px; top: 145px; width: 40px; height: 40px; border-radius: 50%; background: #4F585E; border: 1px solid #30363C; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: background var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .railnext:hover { background: #30363C; } :where(body:not(.cls-body)) .widebtn--band { width: 100%; max-width: 985px; margin-top: 24px; font: 600 14px/20px var(--pe-font); } /* ========================================================================== 11. ARTICLES ========================================================================== */ :where(body:not(.cls-body)) .arts__head { display: flex; align-items: baseline; justify-content: space-between; } :where(body:not(.cls-body)) .arts__all { display: inline-flex; align-items: center; gap: 4px; font: 700 14px/20px var(--pe-font); color: var(--pe-teal-dark); text-transform: uppercase; } :where(body:not(.cls-body)) .arts__all-chev { width: 12px; height: 12px; } :where(body:not(.cls-body)) .arts { position: relative; margin-top: 17px; } :where(body:not(.cls-body)) .arts__track { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } :where(body:not(.cls-body)) .arts__track::-webkit-scrollbar { display: none; } :where(body:not(.cls-body)) .art { box-sizing: border-box; flex: none; width: 213.12px; height: 214px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pe-border-light); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(48,54,60,.05); } :where(body:not(.cls-body)) .art__ph { position: relative; display: block; height: 144px; flex: none; background: linear-gradient(135deg, #DDE7F5 0%, #C9D8EE 100%); } :where(body:not(.cls-body)) .art__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } :where(body:not(.cls-body)) .art__ph img.is-missing { display: none; } :where(body:not(.cls-body)) .art__wm { position: absolute; left: 8px; top: 8px; font: 600 11px/1 var(--pe-font); color: #fff; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.35); } :where(body:not(.cls-body)) .art__t { padding: 17.4px 16px 0; font: 500 14px/21px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .arts .railnext { top: 87px; right: 5px; } /* ========================================================================== 12. DID YOU FIND THIS HELPFUL? ========================================================================== */ :where(body:not(.cls-body)) .helpful { margin-top: 17px; display: flex; gap: 64px; } :where(body:not(.cls-body)) .helpful__btn { box-sizing: border-box; flex: 1 1 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 16px; background: #fff; border: 1px solid var(--pe-border-light); border-radius: 12px; box-shadow: 0 0 8px rgba(48,54,60,.04); cursor: pointer; font: 400 18px/24px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .helpful__btn:hover { border-color: #D4DBE7; } :where(body:not(.cls-body)) .helpful__ic { width: 25px; height: 27.8px; } /* ========================================================================== 13. OTHER TESTS / OTHER PRODUCTS — 1032 × 50 rows, 16px apart ========================================================================== */ :where(body:not(.cls-body)) .rows { margin-top: 17px; display: flex; flex-direction: column; gap: 16px; } :where(body:not(.cls-body)) .row__head { box-sizing: border-box; width: 100%; height: 50px; padding: 0 16.9px 0 12px; display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--pe-border-light); border-radius: 12px; cursor: pointer; text-align: left; font: 500 18px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .row:first-child .row__head { color: #4F585E; } /* row 1 really is lighter */ :where(body:not(.cls-body)) .row__toggle { display: flex; align-items: center; } :where(body:not(.cls-body)) .row__chev { color: #30363C; transition: transform var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .row.is-open .row__chev { transform: scaleY(-1); } /* the frame draws every desktop row collapsed; expansion is the interaction */ :where(body:not(.cls-body)) .row__list { margin: 12px 0 4px; padding: 0 0 0 12px; list-style: none; } :where(body:not(.cls-body)) .row:not(.is-open) .row__list { display: none; } :where(body:not(.cls-body)) .row__list li { position: relative; padding-left: 16px; } :where(body:not(.cls-body)) .row__list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 4.4px; height: 4.4px; border-radius: 50%; background: #6E787E; } :where(body:not(.cls-body)) .row__list a { font: 400 14px/26px var(--pe-font); color: #4F585E; text-decoration: underline; } :where(body:not(.cls-body)) .row__list a:hover { color: var(--pe-teal); } /* ========================================================================== 14. CONTACT ========================================================================== */ :where(body:not(.cls-body)) .contact__l { margin: 0 0 4.2px; font: 400 14px/26px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .contact__l:last-child { margin-bottom: 0; } :where(body:not(.cls-body)) .contact__l b { font-weight: 700; } :where(body:not(.cls-body)) .sec--contact .sec__h + .contact__l { margin-top: 16.2px; } /* ========================================================================== 15. RIGHT RAIL — six 240px cards, 24px apart, r16 ========================================================================== */ /* The rail follows the page down. .grid already sets `align-items:start`, so the aside is its own height and sticky has room to travel; 24px clears the top of the viewport. The header is not sticky, so nothing sits above it. max-height + overflow keep a rail taller than the viewport reachable. */ :where(body:not(.cls-body)) .rail { width: 240px; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Figma's inside stroke does not eat padding: the measured 16px inset is from the box edge, so in CSS border-box terms that is 1px border + 15px padding. */ :where(body:not(.cls-body)) .rail-card { box-sizing: border-box; width: 240px; padding: 15px; background: #fff; border: 1px solid var(--pe-border-light); border-radius: 16px; } :where(body:not(.cls-body)) .rail-card + .rail-card { margin-top: 24px; } :where(body:not(.cls-body)) .rail-card--links { border-color: #EDF2F9; } :where(body:not(.cls-body)) .rail-card__title { margin: 0; font: 700 20px/26px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .quick-links { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } :where(body:not(.cls-body)) .quick-links a { display: block; font: 400 14px/26px var(--pe-font); color: #4F585E; transition: color var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .quick-links a:hover { color: var(--pe-teal); } :where(body:not(.cls-body)) .quick-links a[aria-current] { color: var(--pe-teal); font-weight: 600; } :where(body:not(.cls-body)) .author { display: flex; align-items: center; gap: 16px; margin-top: 15px; width: 198px; } :where(body:not(.cls-body)) .author + .author { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--pe-border-light); } :where(body:not(.cls-body)) .author__avatar { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #CFE3E2, #A9CFCC); } :where(body:not(.cls-body)) .author__text { width: 132px; } :where(body:not(.cls-body)) .author__role { margin: 0; font: 400 12px/16px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .author__name { margin: 4px 0 0; font: 600 14px/20px var(--pe-font); color: var(--pe-teal); } :where(body:not(.cls-body)) .author__qual { margin: 2px 0 0; font: 400 12px/16px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .author__stamp { margin: 15px 0 0; font: 400 12px/16px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .author__stamp--date { margin-top: 3px; } :where(body:not(.cls-body)) .rail-card__shield { width: 50px; height: 59px; margin-bottom: 12px; } :where(body:not(.cls-body)) .rail-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 400 14px/24px var(--pe-font); } :where(body:not(.cls-body)) .rail-card__cta:hover { text-decoration: underline; } :where(body:not(.cls-body)) .rail-card__cta--teal { color: var(--pe-teal); } :where(body:not(.cls-body)) .rail-card__cta--blue { color: var(--pe-blue); } :where(body:not(.cls-body)) .rail-card__cta--red { color: var(--pe-red-dark); } :where(body:not(.cls-body)) .rail-card__cta-chev { width: 10px; height: 6px; } /* ── 15b. Recommended For You inside the 240px rail ─────────────────────── partials/blocks.html BLOCK: recommended-for-you is drawn for the class page's 386px rail. This rail is 240px, so .rail-card supplies the card chrome (border, r16, 15px inset) and the block drops its own, and the row is re-proportioned: content box is 208px, so a 56px thumb and a 26px chevron gutter leave ~115px for the two text lines. The mobile copy of the block lives in .col-main and is left untouched. */ :where(body:not(.cls-body)) .rail-card--reco .peb-reco { background: none; box-shadow: none; border-radius: 0; padding: 0; } :where(body:not(.cls-body)) .rail-card--reco .peb-reco__h { font: 700 20px/26px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .rail-card--reco .peb-reco__list { margin-top: 14px; } :where(body:not(.cls-body)) .rail-card--reco .peb-reco__list li + li { margin-top: 16px; } :where(body:not(.cls-body)) .rail-card--reco .peb-reco__row { height: 64px; margin-left: 11px; padding: 0 26px 0 56px; } :where(body:not(.cls-body)) .rail-card--reco .peb-reco__thumb { left: -11px; top: 4px; width: 56px; height: 56px; } :where(body:not(.cls-body)) .rail-card--reco .peb-reco__thumb img { width: 42px; height: 42px; } :where(body:not(.cls-body)) .rail-card--reco .peb-reco__chev { right: 10px; } /* ========================================================================== 16. WHY TRUST PHARMEASY — full-bleed band, 2px #EDF2F9 top and bottom ========================================================================== */ :where(body:not(.cls-body)) .trust { margin-top: 37px; background: #fff; border-top: 2px solid #EDF2F9; border-bottom: 2px solid #EDF2F9; padding: 47.5px 0 38px; } :where(body:not(.cls-body)) .trust__inner { max-width: 1440px; margin-inline: auto; padding-inline: 40px; } :where(body:not(.cls-body)) .trust__h { margin: 0; text-align: center; font: 600 40px/48px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .trust__sub { margin: 24px 0 0; text-align: center; font: 700 24px/32px var(--pe-font); color: var(--pe-teal); } :where(body:not(.cls-body)) .trust__triple { margin: 15px 0 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 60px; } :where(body:not(.cls-body)) .trust__triple li { display: flex; align-items: center; gap: 8px; } :where(body:not(.cls-body)) .trust__triple span { display: flex; flex-direction: column; align-items: center; } :where(body:not(.cls-body)) .trust__triple b { font: 700 20px/25.7px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .trust__triple em { font: 500 20px/25.7px var(--pe-font); color: #30363C; font-style: normal; } :where(body:not(.cls-body)) .trust__laurel { width: 31.5px; height: 62.5px; } :where(body:not(.cls-body)) .trust__laurel--r { transform: scaleX(-1); } :where(body:not(.cls-body)) .trust__panel { box-sizing: border-box; max-width: 1200px; margin: 39.2px auto 0; padding: 24px 66.5px 26px; background: var(--pe-green-bg); border-radius: 12px; } :where(body:not(.cls-body)) .trust__stats { display: flex; gap: 16px; justify-content: center; overflow-x: auto; scrollbar-width: none; } :where(body:not(.cls-body)) .trust__stats::-webkit-scrollbar { display: none; } :where(body:not(.cls-body)) .tstat { box-sizing: border-box; flex: none; width: 200px; height: 220px; padding: 24px 16px 0; display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid #EDF2F9; border-radius: 12px; } :where(body:not(.cls-body)) .tstat__ic { align-self: center; width: 64px; height: 64px; } :where(body:not(.cls-body)) .tstat__rule { display: block; width: 168px; height: 2px; margin-top: 21px; background: #DBE4F0; } :where(body:not(.cls-body)) .tstat__v { margin-top: 10px; font: 700 20px/24px var(--pe-font); color: var(--pe-teal); } :where(body:not(.cls-body)) .tstat__l { margin-top: 7px; font: 500 16px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .trust__tag { margin: 22px 0 0; display: flex; align-items: center; justify-content: center; gap: 13.2px; font: 600 18px/24px var(--pe-font); color: #15ACA5; } :where(body:not(.cls-body)) .trust__tag svg { flex: none; } /* ========================================================================== 17. FOOTER — #F6F7FB, 1270px column grid (85px gutters on 1440) ========================================================================== */ :where(body:not(.cls-body)) .ftr { background: #F6F7FB; } :where(body:not(.cls-body)) .ftr__inner { max-width: 1440px; margin-inline: auto; padding: 39.8px 85px 0; } /* columns at x 85 / 432 / 779 / 1129 → pitch 347 inside the 1270 container */ :where(body:not(.cls-body)) .ftr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 118px; } :where(body:not(.cls-body)) .ftr__h { margin: 0 0 17.3px; font: 600 16px/20px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .ftr__h--2 { margin-top: 25.7px; } :where(body:not(.cls-body)) .ftr__list { margin: 0; padding: 0; list-style: none; } :where(body:not(.cls-body)) .ftr__list li { line-height: 20px; } /* link row pitch 30 = 20 + 10 */ :where(body:not(.cls-body)) .ftr__list li + li { margin-top: 10px; } :where(body:not(.cls-body)) .ftr__list a { font: 400 14px/20px var(--pe-font); color: #4F585E; transition: color var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .ftr__list a:hover { color: var(--pe-teal); } :where(body:not(.cls-body)) .ftr__social { margin: 0; padding: 0; list-style: none; display: flex; gap: 33.5px; } :where(body:not(.cls-body)) .ftr__social a { display: block; color: #30363C; } :where(body:not(.cls-body)) .ftr__social a:hover { color: var(--pe-teal); } :where(body:not(.cls-body)) .ftr__pay { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 43.5px 0 47px; } :where(body:not(.cls-body)) .ftr__pay-h { margin: 0 0 21px; font: 700 14px/20px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .ftr__pay-list { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } :where(body:not(.cls-body)) .ftr__pay-list svg { display: block; } :where(body:not(.cls-body)) .ftr__pay-list text { font-family: var(--pe-font); } :where(body:not(.cls-body)) .ftr__copy { margin: 0; font: 400 14px/20px var(--pe-font); color: #30363C; white-space: nowrap; } /* ========================================================================== 17b. BETWEEN THE TWO DESIGNED WIDTHS (1024 – 1439) The frames define 1440 and 360 only. Everything below keeps the desktop composition intact while the columns shrink; nothing here changes the 1440 rendering. ========================================================================== */ @media (max-width: 1439px) { :where(body:not(.cls-body)) .hdr__inner { padding-inline: 24px; } :where(body:not(.cls-body)) .trust__inner { padding-inline: 24px; } :where(body:not(.cls-body)) .ftr__inner { padding-inline: 40px; } :where(body:not(.cls-body)) .ftr__cols { column-gap: 40px; } :where(body:not(.cls-body)) .ftr__pay { padding-top: 56px; } } @media (max-width: 1279px) { :where(body:not(.cls-body)) .hdr__rule, :where(body:not(.cls-body)) .hdr__loc { display: none; } :where(body:not(.cls-body)) .hdr__actions { gap: 20px; margin-left: 20px; } :where(body:not(.cls-body)) .helpful { gap: 32px; } } @media (max-width: 1120px) { :where(body:not(.cls-body)) .hdr__logo { margin-right: 0; } :where(body:not(.cls-body)) .hdr__action > span, :where(body:not(.cls-body)) .hdr__action { font-size: 0; gap: 0; } :where(body:not(.cls-body)) .hdr__action .ic { width: 22px; height: 22px; } :where(body:not(.cls-body)) .difftable dt { width: 200px; } } /* ========================================================================== ========================================================================== 18. MOBILE — design/directory-mobile.pdf (360 wide, 16px gutters) No page surface, no panel, no rail. Full-bleed white with 8px #E6EBF4 separator bands. Headings drop from Bold 700 to SemiBold 600. ========================================================================== ========================================================================== */ @media (max-width: 1023px) { body:where(:not(.cls-body)) { background: #fff; } :where(body:not(.cls-body)) .d-only { display: none !important; } :where(body:not(.cls-body)) .m-only { display: block; } :where(body:not(.cls-body)) .m-only-inline { display: block; } /* ── header: one 60px row ─────────────────────────────────────────── */ :where(body:not(.cls-body)) .hdr { box-shadow: 0 2px 8px rgba(0,0,0,.08); } :where(body:not(.cls-body)) .hdr__inner { height: 60px; padding-inline: 16px; max-width: none; box-sizing: border-box; } :where(body:not(.cls-body)) .hdr__rule, :where(body:not(.cls-body)) .hdr__loc, :where(body:not(.cls-body)) .hdr__search, :where(body:not(.cls-body)) .hdr__actions, :where(body:not(.cls-body)) .hdr__logo-lg, :where(body:not(.cls-body)) .hdr__nav { display: none; } :where(body:not(.cls-body)) .hdr__burger { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin: 0; padding: 0; background: none; border: 0; color: #292D32; cursor: pointer; } :where(body:not(.cls-body)) .hdr__logo { margin: 0 0 0 4px; } :where(body:not(.cls-body)) .hdr__logo-sm { display: block; width: 124px; height: 24px; } :where(body:not(.cls-body)) .hdr__pill { display: flex; align-items: center; gap: 5px; margin-left: 24px; /* logo ends 168 → pill 192 */ box-sizing: border-box; width: 88px; height: 28px; padding: 0 6px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(69,160,129,.35), 0 0 8px rgba(69,160,129,.28); } :where(body:not(.cls-body)) .hdr__pill span { display: flex; flex-direction: column; } :where(body:not(.cls-body)) .hdr__pill em { font: 400 8px/10px var(--pe-font); color: #30363C; font-style: normal; } :where(body:not(.cls-body)) .hdr__pill strong { font: 700 8px/10px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .hdr__ico { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-left: auto; padding: 0; background: none; border: 0; color: #30363C; cursor: pointer; } /* the cart survives as an icon-only action, flush to the 16px gutter */ :where(body:not(.cls-body)) .hdr__actions { display: flex; gap: 0; margin: 0 0 0 8px; } :where(body:not(.cls-body)) .hdr__actions .hdr__action:nth-child(1), :where(body:not(.cls-body)) .hdr__actions .hdr__action:nth-child(2) { display: none; } :where(body:not(.cls-body)) .hdr__actions .hdr__action:nth-child(3) { width: 24px; height: 24px; justify-content: center; font-size: 0; gap: 0; } :where(body:not(.cls-body)) .hdr__actions .hdr__action .ic { width: 24px; height: 24px; } /* ── page shell ───────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .page { padding-inline: 0; background: #fff; } :where(body:not(.cls-body)) .grid { display: block; } :where(body:not(.cls-body)) .col-main { display: flex; flex-direction: column; } :where(body:not(.cls-body)) .panel { display: contents; } :where(body:not(.cls-body)) .rail { display: none; } :where(body:not(.cls-body)) .crumbs--top { display: none; } /* ── hero (no card, no border, no Search button) ──────────────────── */ :where(body:not(.cls-body)) .hero { order: 1; background: linear-gradient(180deg, #EDFEFE 0%, #FFFFFF 100%) top / 100% 221px no-repeat; border: 0; border-radius: 0; padding: 32px 16px 0; } :where(body:not(.cls-body)) .hero__h1 { font: 600 22px/28px var(--pe-font); } :where(body:not(.cls-body)) .hero__p { margin-top: 6.9px; font: 400 14px/20px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .brk-d { display: none; } :where(body:not(.cls-body)) .hero__search { width: auto; height: 48px; margin: 19.6px -.5px 0; padding-left: 16px; gap: 10.8px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04); } :where(body:not(.cls-body)) .hero__search-ic { width: 21px; height: 21px; color: #6E787E; } :where(body:not(.cls-body)) .hero__search input { font-size: 12px; } :where(body:not(.cls-body)) .hero__search input::placeholder { font-size: 12px; } :where(body:not(.cls-body)) .hero__search-btn { display: none; } :where(body:not(.cls-body)) .hero__search:focus-within { border-color: #15ACA5; } /* ── section rhythm ───────────────────────────────────────────────── */ :where(body:not(.cls-body)) .sec { padding: 40.2px 16px 32px; } :where(body:not(.cls-body)) .sec::before { left: 0; right: 0; background: var(--pe-border-light); } :where(body:not(.cls-body)) .sec__h { font: 600 16px/24px var(--pe-font); } :where(body:not(.cls-body)) .sec__h--18 { display: block; font: 600 18px/24px var(--pe-font); color: #30363C; margin: 0; } :where(body:not(.cls-body)) .sec--pop .sec__h, :where(body:not(.cls-body)) .sec--az .sec__h { font: 600 16px/24px var(--pe-font); margin: 0; } :where(body:not(.cls-body)) .sec--authored { order: 2; padding: 23.7px 16px 0; } :where(body:not(.cls-body)) .sec--pop { order: 3; padding: 31.5px 16px 0; } :where(body:not(.cls-body)) .sec--az { order: 4; padding: 32.2px 16px 0; } :where(body:not(.cls-body)) .sec--az::before { content: none; } :where(body:not(.cls-body)) .sec--prose { order: 5; padding-bottom: 33.1px; } :where(body:not(.cls-body)) .sec--safety { order: 6; padding-bottom: 33.1px; } :where(body:not(.cls-body)) .sec--how { order: 7; } :where(body:not(.cls-body)) .sec--why { order: 8; } :where(body:not(.cls-body)) .sec--faq { order: 9; } :where(body:not(.cls-body)) .sec--ask { order: 10; padding: 32.5px 0 0; } :where(body:not(.cls-body)) .sec--articles { order: 11; padding: 44.2px 0 26px; } :where(body:not(.cls-body)) .sec--articles::before { height: 12px; } :where(body:not(.cls-body)) .sec--help { order: 13; padding-top: 39.9px; } :where(body:not(.cls-body)) .crumbs--bottom{ order: 14; } :where(body:not(.cls-body)) .sec--helpful { order: 15; padding-top: 39.7px; padding-bottom: 28px; } :where(body:not(.cls-body)) .sec--know { order: 16; padding: 28.2px 16px 24px; } :where(body:not(.cls-body)) .sec--issues { order: 17; padding: 28.2px 16px 24px; } :where(body:not(.cls-body)) .sec--legit { order: 18; padding: 22px 16px 20px; } :where(body:not(.cls-body)) .sec--contact { order: 19; padding: 28.2px 16px 24px; } :where(body:not(.cls-body)) .sec--products { order: 20; padding: 28.5px 16px 0; } :where(body:not(.cls-body)) .sec--tests { order: 21; padding: 28.5px 16px 0; } /* Bands added for launch. Every child of .col-main is a flex item here, so an unordered section would sort to 0 and land above the hero — each new band must claim a slot. 9 is the slot the hidden FAQ band left free. */ :where(body:not(.cls-body)) .sec--reco { order: 9; padding: 8px 0 0; } /* the block owns its 16px inset */ /* "Why trust PharmEasy" is the lead-in to "PharmEasy other services", so it claims the slot immediately above it rather than its old 12 (which put it up beside Need Help?, seven bands early). Nothing else holds 22 or 23. */ :where(body:not(.cls-body)) .sec--trustm { order: 22; padding-bottom: 24px; } :where(body:not(.cls-body)) .sec--svc { order: 23; padding: 28.5px 16px 32px; } /* section headings that differ in wording between the two frames */ :where(body:not(.cls-body)) .sec__h--m, :where(body:not(.cls-body)) .sec__h--safety-m { display: block; } :where(body:not(.cls-body)) .sec--rows .sec__h, :where(body:not(.cls-body)) .sec--contact .sec__h, :where(body:not(.cls-body)) .sec--safety .sec__h--safety-d { display: none; } :where(body:not(.cls-body)) .sec--rows .sec__h--m { display: block; font: 600 18px/24px var(--pe-font); } :where(body:not(.cls-body)) .sec--contact .sec__h--m { display: block; } /* ── Authored By, inline on white ─────────────────────────────────── */ :where(body:not(.cls-body)) .m-authored__h { margin: 0; font: 600 16px/24px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .m-authored__row { display: flex; align-items: center; gap: 16px; height: 48px; /* avatar pitch 48, centred */ } :where(body:not(.cls-body)) .m-authored__h + .m-authored__row { margin-top: 3.8px; } :where(body:not(.cls-body)) .m-authored__av { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #CFE3E2, #A9CFCC); } :where(body:not(.cls-body)) .m-authored__role, :where(body:not(.cls-body)) .m-authored__name, :where(body:not(.cls-body)) .m-authored__qual { white-space: nowrap; } :where(body:not(.cls-body)) .m-authored__role { font: 400 12px/16px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .m-authored__name { font: 600 14px/20px var(--pe-font); color: var(--pe-teal); margin-left: 8.6px; } :where(body:not(.cls-body)) .m-authored__qual { font: 400 12px/16px var(--pe-font); color: #4F585E; margin-left: 5.3px; } :where(body:not(.cls-body)) .m-authored__rule { height: 1px; margin: 0; border: 0; background: var(--pe-border-light); } :where(body:not(.cls-body)) .m-authored__stamp { margin: 3.6px 0 0; font: 400 12px/16px var(--pe-font); color: #6E787E; } /* ── class cards stack one per row, 328 × 115 ─────────────────────── */ :where(body:not(.cls-body)) .cc-grid { grid-template-columns: 1fr; row-gap: 16px; column-gap: 0; } :where(body:not(.cls-body)) .cc { height: 115px; padding: 12px 16px; border-color: #DCE4F1; border-radius: 8px; } :where(body:not(.cls-body)) .cc__chip { height: 21px; padding: 0 7px; border-radius: 999px; font: 600 11px/1 var(--pe-font); } :where(body:not(.cls-body)) .cc__t { margin-top: 6px; font: 600 14px/20px var(--pe-font); } :where(body:not(.cls-body)) .cc__rule { margin-top: 9px; } :where(body:not(.cls-body)) .cc__n { margin-top: 8px; gap: 4px; font: 600 12px/24px var(--pe-font); } :where(body:not(.cls-body)) .cc__chev { top: 0; stroke-width: 1.8; } /* search state dims everything but the matched run, and — per directory-search-mobile — drops the A–Z browse section entirely */ :where(body:not(.cls-body)) .is-searching .cc__t { color: #6E787E; } :where(body:not(.cls-body)) .is-searching .cc__t mark { color: #000; } :where(body:not(.cls-body)) .is-searching .sec--az { display: none; } :where(body:not(.cls-body)) .sec--pop .cc-grid { margin-top: 15.8px; } /* card top = heading baseline + 22 */ /* ── A–Z: scrolling chip strip + accordion ────────────────────────── */ :where(body:not(.cls-body)) .az__sub { margin-top: 3.5px; font: 400 12px/18px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .az-chips { margin: 16.4px -16px 0; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } :where(body:not(.cls-body)) .az-chips::-webkit-scrollbar { display: none; } :where(body:not(.cls-body)) .az-chip { flex: none; font-size: 14px; } :where(body:not(.cls-body)) .az-chip--all { padding: 0 12px; } :where(body:not(.cls-body)) .az-groups { margin-top: 12.2px; } :where(body:not(.cls-body)) .az-grp + .az-grp { margin-top: 0; } :where(body:not(.cls-body)) .az-grp[data-open] { padding-bottom: 19.5px; } :where(body:not(.cls-body)) .az-grp__head { height: auto; padding: 20px 0; margin: 0; cursor: pointer; gap: 0; border-top: 1px solid var(--pe-border-light); } :where(body:not(.cls-body)) .az-grp:first-of-type .az-grp__head { border-top: 0; } :where(body:not(.cls-body)) .az-grp[data-open] .az-grp__head { padding-bottom: 16px; } :where(body:not(.cls-body)) .az-grp__ltr { font: 600 16px/24px var(--pe-font); } :where(body:not(.cls-body)) .az-grp__rule { display: none; } :where(body:not(.cls-body)) .az-grp__count { display: inline-flex; align-items: center; margin-left: auto; height: 24px; padding: 0 8px; background: var(--pe-surface); border-radius: 12px; font: 400 12px/1 var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .az-grp__chev { display: block; width: 9.5px; height: 5.5px; margin-left: 7.3px; color: #000; transition: transform var(--pe-dur) var(--pe-ease); } :where(body:not(.cls-body)) .az-grp[data-open] .az-grp__chev { transform: scaleY(-1); } :where(body:not(.cls-body)) .az-grp:not([data-open]) .az-grp__grid { display: none; } /* ── editorial ────────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .sec__h + .prose { margin-top: 17.1px; } :where(body:not(.cls-body)) .safety { margin-top: 13px; } :where(body:not(.cls-body)) .safety li { padding-left: 21px; margin-bottom: 12px; } :where(body:not(.cls-body)) .safety li::before { left: 8.375px; top: 9.5px; width: 4.375px; height: 4.375px; } /* steps become a vertical list with a dotted connector down the gutter */ :where(body:not(.cls-body)) .steps { display: block; margin-top: 22px; } :where(body:not(.cls-body)) .steps::after { content: none; } :where(body:not(.cls-body)) .step { padding: 0 0 0 72px; min-height: 40px; } :where(body:not(.cls-body)) .step + .step { margin-top: 22px; } :where(body:not(.cls-body)) .step__num { left: 0; transform: none; top: 0; width: 40px; height: 40px; background: var(--pe-surface-sunken); font: 700 20px/40px var(--pe-font); } :where(body:not(.cls-body)) .step:not(:last-child)::after { content: ""; position: absolute; left: 18.5px; top: 40px; bottom: -22px; width: 3px; background: repeating-linear-gradient(180deg, #83AAF2 0 3.4px, transparent 3.4px 9px); } :where(body:not(.cls-body)) .step__body { height: auto; padding: 0; border: 0; border-radius: 0; background: none; } :where(body:not(.cls-body)) .step__t { font: 600 16px/24px var(--pe-font); } :where(body:not(.cls-body)) .step__p { margin-top: 0; font: 400 14px/22px var(--pe-font); color: #4F585E; } /* difference card — 328 × 361, 24px padding, 65px row pitch */ :where(body:not(.cls-body)) .sec--why .sec__h { line-height: 24px; } :where(body:not(.cls-body)) .why__intro { margin-top: 5px; } :where(body:not(.cls-body)) .difftable { margin-top: 17px; padding: 24px; border-radius: 12px; } :where(body:not(.cls-body)) .difftable__row { height: auto; display: block; padding: 0 0 18px; margin: 0 0 18px; border-bottom: 0; position: relative; } :where(body:not(.cls-body)) .difftable__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #DCE4F1 0%, #DCE4F1 66.6%, rgba(220,228,241,.5) 74.9%, rgba(220,228,241,0) 91.5%); } :where(body:not(.cls-body)) .difftable__row:last-child { padding-bottom: 0; margin-bottom: 0; } :where(body:not(.cls-body)) .difftable__row:last-child::after { content: none; } :where(body:not(.cls-body)) .difftable dt { width: auto; font: 400 12px/16px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .difftable dd { margin-top: 6px; font: 600 14px/20px var(--pe-font); color: #30363C; } /* ── FAQ ──────────────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .faq { margin-top: 18px; gap: 12px; } :where(body:not(.cls-body)) .faq__q { min-height: 48px; padding: 12px 48px 12px 16px; align-items: flex-start; font: 600 14px/24px var(--pe-font); color: #000; } :where(body:not(.cls-body)) .faq__chev { right: 16px; top: 22px; margin-top: 0; width: 11.83px; height: 6.83px; } :where(body:not(.cls-body)) .faq__a { padding: 11px 16px 12px; } :where(body:not(.cls-body)) .faq__a p { font: 400 14px/21px var(--pe-font); } :where(body:not(.cls-body)) .faq__item.is-open { box-shadow: none; border-top: 2px solid var(--pe-teal); overflow: hidden; } :where(body:not(.cls-body)) .faq__item.is-open .faq__q { color: #000; padding-top: 10px; } :where(body:not(.cls-body)) .widebtn { margin-top: 20px; height: 40px; gap: 4px; background: none; border: 1.5px solid var(--pe-teal); border-radius: 6px; font: 700 12px/16px var(--pe-font); color: var(--pe-teal); } :where(body:not(.cls-body)) .widebtn__chev { display: none; } /* ── Ask us ───────────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .sec--ask > .ask__h, :where(body:not(.cls-body)) .sec--ask > .ask__sub, :where(body:not(.cls-body)) .sec--ask > .ask__box { margin-inline: 16px; } :where(body:not(.cls-body)) .ask__h { font: 600 18px/24px var(--pe-font); } :where(body:not(.cls-body)) .ask__sub { margin-top: 2px; font: 400 12px/18px var(--pe-font); } :where(body:not(.cls-body)) .ask__box { margin-top: 21px; height: 48px; } :where(body:not(.cls-body)) .ask__box input { font-size: 14px; padding: 0 56px 0 18px; } :where(body:not(.cls-body)) .ask__send { right: 16px; } :where(body:not(.cls-body)) .askband { margin: 26px 0 0; padding: 21px 16px 16px 16px; } :where(body:not(.cls-body)) .askband__h { font: 600 16px/24px var(--pe-font); } :where(body:not(.cls-body)) .askband__ai { display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 24px; margin: 4px 0 0; padding: 0 8px; border-radius: 999px; background: linear-gradient(90deg, #E1ECFD 0%, #EEE1FE 100%); font: 600 10.6px/1 var(--pe-font); white-space: nowrap; } :where(body:not(.cls-body)) .askband__ai-t { background: linear-gradient(90deg, #5D8FE4 0%, #9D64F3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } :where(body:not(.cls-body)) .askband__ai-spark { color: #5D8FE4; font-size: 12px; } :where(body:not(.cls-body)) .qrail { margin: 24px -16px 0; } :where(body:not(.cls-body)) .qrail__track { padding: 0 16px 4px; } :where(body:not(.cls-body)) .qrail__track > :nth-child(2) { margin-left: 0; } :where(body:not(.cls-body)) .qcard { width: 280px; height: 244px; border-radius: 16px; } :where(body:not(.cls-body)) .qcard__q { font: 600 14px/20px var(--pe-font); } :where(body:not(.cls-body)) .qcard__a { margin-top: 12px; font: 400 12px/18px var(--pe-font); } :where(body:not(.cls-body)) .qcard__a a { color: #30363C; } :where(body:not(.cls-body)) .qcard__rev { margin-top: 10px; font-size: 10px; line-height: 14px; } :where(body:not(.cls-body)) .qcard__rule { margin-top: 11px; } :where(body:not(.cls-body)) .qcard__by { margin-top: 9px; font: 400 11px/16px var(--pe-font); gap: 8px; } :where(body:not(.cls-body)) .qcard__foot { height: 40px; padding: 8px 16px; border-radius: 0 0 15px 15px; } :where(body:not(.cls-body)) .railnext { display: none; } :where(body:not(.cls-body)) .widebtn--band { width: auto; max-width: none; margin: 20px 16px 0; height: 40px; background: #fff; border: 1px solid #D4DBE7; border-radius: 8px; font: 600 12px/16px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .widebtn--band .widebtn__chev { display: block; width: 20px; height: 20px; } /* ── Articles ─────────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .sec--articles > .arts__head { margin-inline: 16px; } :where(body:not(.cls-body)) .sec--articles .sec__h { color: #000; } :where(body:not(.cls-body)) .arts__all { text-transform: none; font: 600 12px/16px var(--pe-font); color: var(--pe-teal); } :where(body:not(.cls-body)) .arts__all-chev { width: 8px; height: 8px; color: var(--pe-teal-dark); } :where(body:not(.cls-body)) .arts { margin: 18px 0 0; } :where(body:not(.cls-body)) .arts__track { padding: 0 16px 4px; } :where(body:not(.cls-body)) .art { border-radius: 12px; } :where(body:not(.cls-body)) .art__t { padding-top: 14px; font: 400 14px/21px var(--pe-font); } /* ── Why trust PharmEasy (mobile band) ────────────────────────────── */ :where(body:not(.cls-body)) .trustm { display: flex; align-items: flex-start; gap: 10px; margin: 29px -16px 0 0; padding: 15px 0 15px 16px; background: var(--pe-green-bg); border-radius: 16px 0 0 16px; overflow-x: auto; scrollbar-width: none; } :where(body:not(.cls-body)) .trustm::-webkit-scrollbar { display: none; } :where(body:not(.cls-body)) .trustm__copy { flex: none; width: 114px; } :where(body:not(.cls-body)) .trustm__hand { width: 76px; height: 66px; margin-bottom: 8px; } :where(body:not(.cls-body)) .trustm__copy p { margin: 0; font: 400 12px/19px var(--pe-font); color: var(--pe-teal); } :where(body:not(.cls-body)) .trustm__cards { display: flex; gap: 16px; } :where(body:not(.cls-body)) .trustm .tstat { width: 136px; height: 176px; padding: 16px; border-color: var(--pe-border-light); } :where(body:not(.cls-body)) .trustm .tstat__ic { width: 104px; height: 80px; align-self: center; } :where(body:not(.cls-body)) .trustm .tstat__ic svg { width: 72px; height: 72px; margin-inline: auto; } :where(body:not(.cls-body)) .trustm .tstat__rule { width: 104px; height: 1px; margin-top: 11px; background: #DCE4F1; } :where(body:not(.cls-body)) .trustm .tstat__v { margin-top: 9px; font: 700 12px/16px var(--pe-font); } :where(body:not(.cls-body)) .trustm .tstat__l { margin-top: 8px; font: 400 12px/16px var(--pe-font); } /* ── Need Help ────────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .help__sub { margin: 0; font: 400 14px/20px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .sec--help .sec__h { margin-top: 11px; } :where(body:not(.cls-body)) .outbtn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; margin-top: 18px; height: 40px; border: 1.5px solid var(--pe-teal); border-radius: 6px; font: 700 14px/20px var(--pe-font); color: var(--pe-teal); } /* ── bottom breadcrumb band ───────────────────────────────────────── */ :where(body:not(.cls-body)) .crumbs--bottom { position: relative; height: 40px; padding: 0 16px; margin-top: 8px; background: #F8F9FB; display: flex; align-items: center; } :where(body:not(.cls-body)) .crumbs--bottom::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--pe-border-light); } :where(body:not(.cls-body)) .crumbs--bottom ol { font: 600 12px/16px var(--pe-font); } :where(body:not(.cls-body)) .crumbs--bottom a { color: #212121; } :where(body:not(.cls-body)) .crumbs--bottom .crumbs__sep { width: 10px; height: 10px; margin: 0 8px 0 6px; } /* ── Did you find this helpful ────────────────────────────────────── */ :where(body:not(.cls-body)) .sec--helpful .sec__h { font: 600 20px/28px var(--pe-font); } :where(body:not(.cls-body)) .helpful__sub { margin: 2px 0 0; font: 400 12px/16px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .helpful { margin-top: 17px; gap: 16px; } :where(body:not(.cls-body)) .helpful__btn { gap: 12px; font: 400 14px/20px var(--pe-font); } :where(body:not(.cls-body)) .helpful__ic { width: 22px; height: 24.5px; } /* ── Want to know more? / Have issues? / Legitscript ──────────────── */ :where(body:not(.cls-body)) .know__p { margin: 9px 0 0; font: 400 14px/24px var(--pe-font); color: #6E787E; } :where(body:not(.cls-body)) .microlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font: 700 10px/16px var(--pe-font); color: var(--pe-teal-dark); text-transform: uppercase; letter-spacing: .02em; } :where(body:not(.cls-body)) .microlink--red { color: var(--pe-red-dark); margin-top: 6px; } :where(body:not(.cls-body)) .microlink__chev { width: 11.5px; height: 6.5px; color: var(--pe-teal); } :where(body:not(.cls-body)) .legit { display: flex; align-items: flex-start; gap: 28px; } :where(body:not(.cls-body)) .legit__shield { width: 46px; height: 59px; flex: none; } :where(body:not(.cls-body)) .legit__t { margin: 0; font: 400 16px/24px var(--pe-font); color: #30363C; } /* ── contact ──────────────────────────────────────────────────────── */ :where(body:not(.cls-body)) .contact__l { margin: 6px 0 0; font: 400 14px/20px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .contact__l br { display: none; } /* the desktop-only break after "MIDC" */ :where(body:not(.cls-body)) .contact__l b { font-weight: 600; } :where(body:not(.cls-body)) .sec--contact .sec__h + .contact__l { margin-top: 11px; } /* ── link accordions ──────────────────────────────────────────────── */ :where(body:not(.cls-body)) .rows { margin-top: 9px; display: flex; flex-direction: column; gap: 0; } :where(body:not(.cls-body)) .row { order: var(--o, 0); } :where(body:not(.cls-body)) .row__head { height: auto; min-height: 64px; padding: 20px 0; background: none; border: 0; border-radius: 0; border-top: 1px solid var(--pe-border-light); font: 400 14px/24px var(--pe-font); color: #30363C; } /* the visually-first row of each accordion carries no rule above it */ :where(body:not(.cls-body)) .row--first-m .row__head { border-top: 0; } /* the desktop's lighter row-1 label does not apply on mobile */ :where(body:not(.cls-body)) .row:first-child .row__head { color: #30363C; } :where(body:not(.cls-body)) .row__toggle { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pe-surface-sunken); display: flex; align-items: center; justify-content: center; } :where(body:not(.cls-body)) .row__chev { width: 9.76px; height: 5.76px; } :where(body:not(.cls-body)) .row__list { margin: 0 0 16px; padding: 0; } :where(body:not(.cls-body)) .row__list li { position: relative; padding-left: 21px; min-height: 36px; } :where(body:not(.cls-body)) .row__list li::before { content: ""; position: absolute; left: 6.5px; top: 15.8px; width: 4.4px; height: 4.4px; border-radius: 50%; background: #4F585E; } :where(body:not(.cls-body)) .row__list a { font: 400 14px/36px var(--pe-font); } /* ══ mobile footer: white brand band + teal link band ═══════════════ */ :where(body:not(.cls-body)) .ftr { background: #fff; } :where(body:not(.cls-body)) .ftrm { position: relative; } :where(body:not(.cls-body)) .ftrm::before { content: ""; display: block; height: 8px; background: var(--pe-border-light); } :where(body:not(.cls-body)) .ftrm__brand { padding: 24px 16px 0; } :where(body:not(.cls-body)) .ftrm__logo { width: 202px; height: auto; } :where(body:not(.cls-body)) .ftrm__tag { margin: 14px 0 0; font: 700 10px/14px var(--pe-font); color: var(--pe-teal); text-transform: uppercase; letter-spacing: .01em; } :where(body:not(.cls-body)) .ftrm__strap { margin: 12px 0 0; font: 600 20px/26px var(--pe-font); color: #4F585E; } :where(body:not(.cls-body)) .ftrm__badges { margin: 26px 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 4px; } :where(body:not(.cls-body)) .ftrm__badges li { display: flex; align-items: center; gap: 2px; } :where(body:not(.cls-body)) .ftrm__badges svg { flex: none; } :where(body:not(.cls-body)) .ftrm__badges .is-flip { transform: scaleX(-1); } :where(body:not(.cls-body)) .ftrm__badges span { display: flex; flex-direction: column; align-items: center; } :where(body:not(.cls-body)) .ftrm__badges b { font: 700 10px/14px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .ftrm__badges em { font: 400 10px/14px var(--pe-font); color: #6E787E; font-style: normal; } :where(body:not(.cls-body)) .ftrm__services { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 34px 0 0; } :where(body:not(.cls-body)) .ftrm__services i { flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(212,219,230,0), #D4DBE6); } :where(body:not(.cls-body)) .ftrm__services i:last-child { background: linear-gradient(90deg, #D4DBE6, rgba(212,219,230,0)); } :where(body:not(.cls-body)) .ftrm__services img { width: 81px; height: auto; } :where(body:not(.cls-body)) .ftrm__services span { font: 600 12px/16px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .ftrm__tiles { margin: 28px 0 0; padding: 0; list-style: none; display: flex; gap: 16px; } :where(body:not(.cls-body)) .ftrm__tiles a { box-sizing: border-box; display: block; position: relative; width: 96px; height: 96px; overflow: hidden; border: 1px solid #DCE4F1; border-radius: 12px; background: #fff; } :where(body:not(.cls-body)) .ftrm__tiles span { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 400 10px/14px var(--pe-font); color: #30363C; } :where(body:not(.cls-body)) .ftrm__tiles svg { position: absolute; bottom: 0; left: 0; width: 96px; height: 60px; } :where(body:not(.cls-body)) .ftrm__links { margin-top: 28px; padding: 24px 16px 40px; background: var(--pe-teal); } :where(body:not(.cls-body)) .ftrm__links ul { margin: 0; padding: 0; list-style: none; } :where(body:not(.cls-body)) .ftrm__links li + li { margin-top: 16px; } :where(body:not(.cls-body)) .ftrm__links li:not(:last-child) { border-bottom: 1px solid rgba(180,192,211,.6); } :where(body:not(.cls-body)) .ftrm__links a { display: flex; align-items: center; height: 40px; font: 400 16px/24px var(--pe-font); color: #fff; } } /* ── very narrow phones: keep the 16px gutter, let content shrink ────── */ @media (max-width: 359px) { :where(body:not(.cls-body)) .hdr__pill { display: none; } } /* ========================================================================== 5. CLASS PAGE — v2 assets/class.css Every selector prefixed `:where(body.cls-body)`; nothing else changed. ========================================================================== */ /* ========================================================================== PharmEasy — Individual class page Every value here was read out of design/class-desktop.pdf, class-mobile.pdf, class-filters-desktop.pdf, class-firstfold-mobile.pdf and class-filtersheet-mobile.pdf via tools/spec.py (see specs/pdf-class-*.md). Loads AFTER tokens.css + base.css. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Tokens this page needs that tokens.css does not carry yet -------------------------------------------------------------------------- */ :root{ --pe-blue-mid: #7EA7F2; /* category-chip border */ --pe-rule-grad: #DBE4F0; /* H1 accent rule / trust-card rule */ --pe-off: #E15F7F; /* "25% OFF" */ --pe-icon-grey: #909090; /* FAQ chevron */ --pe-border-btn: #D4DBE7; /* ghost-button outline */ --pe-border-disabled: #BCBCBC; /* pagination prev */ --pe-red-light2: #FE9395; /* thumbs-down */ --pe-teal-bright: #15ACA5; /* why-trust green strip */ --pe-teal-025: #F1FBFD; /* recommendation pill */ --pe-teal-050b: #EBF6F5; /* FAQ open panel (composited) */ --pe-border-blue: #E2EFF7; /* trust-strip hairline */ --pe-rule-blue: #C9D7ED; /* trust-strip separator mid-stop */ --pe-border-tile: #E0E0E0; /* carousel image tile */ --pe-ink: #212121; /* mobile product title / pagination */ --pe-sheet-ink: #51585E; /* every text run inside the filter sheet */ --pe-cta-shadow: rgba(29,94,90,.24); --pe-rule-mobile: #CAD5E8; /* mobile H1 accent rule */ --pe-hdr-rule: #E1E1E1; --pe-pincode-rule: #D9DDE4; --pe-tile-border: #DCE4F1; } /* -------------------------------------------------------------------------- 1. Page frame -------------------------------------------------------------------------- */ :where(body.cls-body) .cls-body{ background: var(--pe-surface); } :where(body.cls-body) .u-m{ display:none; } /* mobile-only copy fragments */ /* the decorative band the frame paints behind the top of the page: raster 0,103 -> 1440,479; ramps #E3EAF5 -> #F5F8FC and is flat from y=340 */ :where(body.cls-body) .cls-wrap{ background: linear-gradient(180deg,#E3EAF5 0%, var(--pe-surface) 62.5%) no-repeat top center / 100% 371px, var(--pe-surface); } /* ── breadcrumb (18px, x=40, band 108..195) ───────────────────────────── */ :where(body.cls-body) .cls-crumb{ max-width:1440px; margin:0 auto; padding:31px 40px 32px; } :where(body.cls-body) .cls-crumb ol{ display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; } :where(body.cls-body) .cls-crumb li{ display:inline-flex; align-items:center; gap:2px; font:600 18px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .cls-crumb a{ color:var(--pe-text); text-decoration:none; } :where(body.cls-body) .cls-crumb a:hover{ color:var(--pe-teal); } :where(body.cls-body) .cls-crumb svg{ flex:none; color:var(--pe-text); } :where(body.cls-body) .cls-crumb [aria-current="page"]{ color:var(--pe-teal); } /* ── three-column grid: 34 gutter · 230 / 708 / 386 · 24 gaps ─────────── */ :where(body.cls-body) .cls-grid{ max-width:1440px; margin:0 auto; box-sizing:border-box; padding-inline:34px; display:grid; grid-template-columns:230px minmax(0,1fr) 386px; gap:24px; align-items:start; } :where(body.cls-body) .cls-col--left, :where(body.cls-body) .cls-col--right{ display:flex; flex-direction:column; gap:24px; } /* Sticky left rail. The grid is `align-items:start`, so the column box is only as tall as its content and sticky has room to travel. 24px clears the top of the viewport; `max-height`+`overflow` keep a tall filter card usable on short screens instead of stranding its lower half off-screen. The shared header is not sticky, so nothing needs to be subtracted from `top`. */ @media (min-width:768px){ :where(body.cls-body) .cls-col--left{ position:sticky; top:24px; max-height:calc(100vh - 48px); overflow-y:auto; scrollbar-width:thin; } :where(body.cls-body) .cls-col--left::-webkit-scrollbar{ width:6px; } :where(body.cls-body) .cls-col--left::-webkit-scrollbar-thumb{ background:var(--pe-border-light); border-radius:3px; } } /* -------------------------------------------------------------------------- 2. Left rail — Filters card -------------------------------------------------------------------------- */ :where(body.cls-body) .filter-card{ background:var(--pe-white); box-shadow:0 0 0 1px var(--pe-surface-sunken); /* #EDF2F9 hairline, drawn outside */ border-radius:var(--pe-r-16); padding:16px 16px 18px; } :where(body.cls-body) .filter-card__title{ margin:0; font:700 20px/28px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .filter-card__rule{ height:1px; background:var(--pe-border-light); margin:11px 0 14px; } :where(body.cls-body) .filter-group + .filter-group{ margin-top:20px; } :where(body.cls-body) .filter-group__head{ display:flex; align-items:center; justify-content:space-between; width:100%; height:22px; padding:0; margin:0; background:none; border:0; cursor:pointer; text-align:left; font:500 14px/22px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .filter-group.is-open > .filter-group__head{ font-weight:600; color:var(--pe-text); } :where(body.cls-body) .filter-group__head .f-chev{ color:var(--pe-text); flex:none; margin-right:-1px; transform:rotate(180deg); /* collapsed = ▼ */ transition:transform var(--pe-dur) var(--pe-ease); } :where(body.cls-body) .filter-group.is-open .f-chev{ transform:none; } /* expanded = ▲ */ :where(body.cls-body) .filter-group__body{ list-style:none; margin:8px 0 0; padding:0; } :where(body.cls-body) .filter-group:not(.is-open) > .filter-group__body{ display:none; } :where(body.cls-body) .filter-opt{ display:flex; align-items:center; min-height:22px; cursor:pointer; } :where(body.cls-body) .filter-opt + .filter-opt{ margin-top:12px; } :where(body.cls-body) .filter-opt + .filter-opt--wrap, :where(body.cls-body) .filter-opt--wrap + .filter-opt{ margin-top:10px; } :where(body.cls-body) .filter-opt__control{ flex:0 0 24px; display:grid; place-items:center; } :where(body.cls-body) .filter-opt__label{ margin-left:8px; font:500 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .f-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--pe-text-secondary); box-sizing:border-box; display:grid; place-items:center; } :where(body.cls-body) .filter-opt[aria-checked="true"] .f-radio{ border-color:var(--pe-teal); } :where(body.cls-body) .filter-opt[aria-checked="true"] .f-radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--pe-teal); } :where(body.cls-body) .f-check{ width:22px; height:22px; box-sizing:border-box; border:2px solid var(--pe-text-secondary); border-radius:3px; display:grid; place-items:center; color:transparent; } :where(body.cls-body) .f-check svg{ margin:-2px 0 0 -2px; } :where(body.cls-body) .filter-opt[aria-checked="true"] .f-check{ border-color:var(--pe-teal); color:var(--pe-teal); } :where(body.cls-body) .filter-opt:focus-visible{ outline:2px solid var(--pe-teal); outline-offset:2px; border-radius:4px; } /* -------------------------------------------------------------------------- 3. Left rail — the five content cards below the filters -------------------------------------------------------------------------- */ :where(body.cls-body) .rail-card{ background:var(--pe-white); box-shadow:0 0 0 1px var(--pe-border-light); border-radius:var(--pe-r-16); padding:16px; box-sizing:border-box; } :where(body.cls-body) .rail-card__title{ margin:0; font:700 20px/26px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .rail-card__link{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font:400 14px/24px var(--pe-font); text-decoration:none; } :where(body.cls-body) .rail-card__link--teal{ color:var(--pe-teal); } :where(body.cls-body) .rail-card__link--blue{ color:var(--pe-blue); } :where(body.cls-body) .rail-card__link--red { color:var(--pe-red-dark); } :where(body.cls-body) .rail-card__link:hover{ text-decoration:underline; } :where(body.cls-body) .rail-card__body{ margin:0; } /* Authored By */ :where(body.cls-body) .rail-card--author .rail-card__title{ margin-bottom:15px; } :where(body.cls-body) .author{ display:flex; align-items:center; gap:16px; height:58px; } :where(body.cls-body) .author__avatar{ width:50px; height:50px; flex:none; border-radius:50%; object-fit:cover; background:var(--pe-surface-sunken); } :where(body.cls-body) .author__role{ margin:0; font:400 12px/16px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .author__name{ margin:4px 0 0; font:600 14px/20px var(--pe-font); color:var(--pe-teal); } :where(body.cls-body) .author__qual{ margin:2px 0 0; font:400 12px/16px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .author__div{ width:198px; height:1px; background:var(--pe-border-light); margin:15px 0; } :where(body.cls-body) .rail-card--author .author + .author{ margin-top:0; } :where(body.cls-body) .author__stamp{ margin:15px 0 0; font:400 12px/17.5px var(--pe-font); color:var(--pe-text-tertiary); } /* Legitscript */ :where(body.cls-body) .rail-card--legit .legit-ico{ display:block; } :where(body.cls-body) .rail-card--legit .rail-card__title{ margin-top:12px; } /* -------------------------------------------------------------------------- 4. Main column card -------------------------------------------------------------------------- */ :where(body.cls-body) .cls-col--main{ background:var(--pe-white); box-shadow:0 0 0 1px var(--pe-border-light); border-radius:var(--pe-r-16); padding:24px 24px 0; box-sizing:border-box; } :where(body.cls-body) .sec{ padding-block:43px 40px; } :where(body.cls-body) .sec--about{ padding-bottom:39px; } :where(body.cls-body) .sec-rule{ height:8px; background:var(--pe-surface-sunken); margin-inline:-24px; } :where(body.cls-body) .sec-rule--dark{ background:var(--pe-border-light); } :where(body.cls-body) .sec-h2{ margin:0 0 19px; font:700 20px/28px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .sec-h3{ margin:18px 0 10px; font:600 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .sec-body{ margin:0; font:400 14px/20px var(--pe-font); color:var(--pe-text-secondary); } /* ── hero block ───────────────────────────────────────────────────────── */ :where(body.cls-body) .sec--hero{ padding-block:0; } :where(body.cls-body) .class-chip{ display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 12px; border-radius:16px; box-sizing:border-box; background:var(--pe-blue-bg); border:1px solid var(--pe-blue-mid); font:600 14px/1 var(--pe-font); color:var(--pe-blue-dark); } :where(body.cls-body) .class-h1{ margin:11px 0 0; font:600 26px/32px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .class-rule{ width:219px; height:1px; margin:9px 0 8px; background:linear-gradient(90deg,var(--pe-rule-grad) 0%, #FFFFFF 100%); } :where(body.cls-body) .class-desc{ margin:0; font:400 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .results-head{ margin:43px 0 0; font:700 20px/28px var(--pe-font); color:var(--pe-text); } /* -------------------------------------------------------------------------- 5. Product result rows -------------------------------------------------------------------------- */ :where(body.cls-body) .pl-list{ display:flex; flex-direction:column; gap:24px; margin-top:26px; } :where(body.cls-body) .pl-row{ position:relative; box-sizing:border-box; height:179px; padding:24px; background:var(--pe-white); border-radius:var(--pe-r-12); box-shadow:var(--pe-shadow-md); display:flex; gap:24px; } :where(body.cls-body) .pl-shot{ width:60px; height:60px; flex:0 0 60px; } :where(body.cls-body) .pl-shot img{ width:100%; height:100%; object-fit:contain; object-position:center top; background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect x='6' y='16' width='48' height='28' rx='3' fill='%23EDF2F9'/%3E%3Cg fill='%23C9D7ED'%3E%3Ccircle cx='16' cy='24' r='3.6'/%3E%3Ccircle cx='26' cy='24' r='3.6'/%3E%3Ccircle cx='36' cy='24' r='3.6'/%3E%3Ccircle cx='46' cy='24' r='3.6'/%3E%3Ccircle cx='16' cy='36' r='3.6'/%3E%3Ccircle cx='26' cy='36' r='3.6'/%3E%3Ccircle cx='36' cy='36' r='3.6'/%3E%3Ccircle cx='46' cy='36' r='3.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; } :where(body.cls-body) .pl-info{ min-width:0; } :where(body.cls-body) .pl-name{ margin:0; font:600 18px/24px var(--pe-font); color:var(--pe-text-secondary); max-width:425px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :where(body.cls-body) .pl-maker{ margin:2px 0 0; font:400 12px/18px var(--pe-font); color:var(--pe-text-muted); } :where(body.cls-body) .pl-pack { margin:3px 0 0; font:500 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .pl-price{ display:flex; align-items:center; height:24px; margin:14px 0 0; } :where(body.cls-body) .pl-sale { font:600 20px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .pl-mrp { margin-left:8px; font:400 14px/20px var(--pe-font); color:var(--pe-text-tertiary); text-decoration:line-through; text-decoration-thickness:1px; } :where(body.cls-body) .pl-off { margin-left:5px; font:600 16px/20px var(--pe-font); color:var(--pe-off); } :where(body.cls-body) .pl-coupon{ margin:5px 0 0; font:400 14px/20px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .pl-rating{ position:absolute; top:24px; right:24px; display:flex; align-items:center; gap:4px; } :where(body.cls-body) .pl-chip{ display:inline-flex; align-items:center; gap:2px; height:24px; padding:0 8px; box-sizing:border-box; background:var(--pe-surface-sunken); border-radius:12px; font:600 14px/24px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .pl-chip .pl-star{ color:var(--pe-text-tertiary); } :where(body.cls-body) .pl-count{ font:400 12px/1 var(--pe-font); color:var(--pe-text-muted); } :where(body.cls-body) .pl-cta{ position:absolute; right:24px; bottom:24px; width:154px; height:48px; padding:0; border:0; border-radius:var(--pe-r-12); background:var(--pe-teal-dark); color:var(--pe-white); font:700 16px/48px var(--pe-font); box-shadow:0 2px 10px var(--pe-cta-shadow); cursor:pointer; } :where(body.cls-body) .pl-cta:hover{ background:#0C6660; } /* REMOVED: the "Notify me" variant. There is no notify-me feature, so a product that is out of stock (or that the old template would have given a Notify me button) now renders `Out of stock` and nothing else. .pl-cta--notify{ background:var(--pe-white); color:var(--pe-teal); border:1px solid var(--pe-teal-dark); line-height:46px; box-shadow:0 2px 8px rgba(29,94,90,.12); } .pl-cta--notify:hover{ background:#F4FBFA; } */ /* Out of stock — flat, disabled, no affordance to tap. */ :where(body.cls-body) .pl-cta--oos, :where(body.cls-body) .pl-cta[disabled]{ background:var(--pe-surface-sunken); color:var(--pe-text-muted); box-shadow:none; cursor:default; } :where(body.cls-body) .pl-cta--oos:hover, :where(body.cls-body) .pl-cta[disabled]:hover{ background:var(--pe-surface-sunken); } /* In cart — the button becomes the quantity pill that opens the 0-20 picker. */ :where(body.cls-body) .pl-cta--incart{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--pe-white); color:var(--pe-teal-dark); border:1.5px solid var(--pe-teal-dark); box-shadow:0 2px 8px rgba(29,94,90,.12); } :where(body.cls-body) .pl-cta--incart:hover{ background:#F4FBFA; } :where(body.cls-body) .pl-cta--incart svg{ flex:none; } :where(body.cls-body) .pl-row--nocta .pl-cta{ display:none; } /* The filters and Load more both work by hiding rows that are already in the HTML — nothing is ever destroyed, so clearing a filter costs no fetch. */ :where(body.cls-body) .pl-row.is-hidden{ display:none; } /* 5b. Empty result — no frame draws this state, so it is built from the page's own card, type and colours. Same Clear all the mobile sheet offers. */ :where(body.cls-body) .pl-empty{ box-sizing:border-box; margin-top:26px; padding:40px 24px; background:var(--pe-white); border-radius:var(--pe-r-12); box-shadow:var(--pe-shadow-md); text-align:center; } :where(body.cls-body) .pl-empty[hidden]{ display:none; } :where(body.cls-body) .pl-empty__title{ margin:0; font:700 18px/26px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .pl-empty__note{ margin:6px 0 0; font:400 14px/20px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .pl-empty__btn{ margin-top:20px; height:44px; padding:0 28px; box-sizing:border-box; background:var(--pe-white); color:var(--pe-teal-dark); border:1.5px solid var(--pe-teal-dark); border-radius:var(--pe-r-12); font:700 15px/1 var(--pe-font); cursor:pointer; transition:background var(--pe-dur) var(--pe-ease); } :where(body.cls-body) .pl-empty__btn:hover{ background:#F4FBFA; } :where(body.cls-body) .pl-empty__btn:focus-visible{ outline:2px solid var(--pe-teal); outline-offset:2px; } /* -------------------------------------------------------------------------- 6. Load more (replaces the numbered pager — no new URLs) -------------------------------------------------------------------------- */ :where(body.cls-body) .loadmore{ display:flex; flex-direction:column; align-items:center; gap:12px; } /* the flex display above outranks the UA [hidden] rule, so state it here */ :where(body.cls-body) .loadmore[hidden]{ display:none; } :where(body.cls-body) .loadmore__btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 32px; box-sizing:border-box; background:var(--pe-white); color:var(--pe-teal-dark); border:1.5px solid var(--pe-teal-dark); border-radius:var(--pe-r-12); font:700 16px/1 var(--pe-font); cursor:pointer; transition:background var(--pe-dur) var(--pe-ease); } :where(body.cls-body) .loadmore__btn:hover{ background:#F4FBFA; } :where(body.cls-body) .loadmore__btn:focus-visible{ outline:2px solid var(--pe-teal); outline-offset:2px; } :where(body.cls-body) .loadmore__btn[hidden]{ display:none; } :where(body.cls-body) .loadmore__count{ margin:0; font:400 14px/20px var(--pe-font); color:var(--pe-text-tertiary); } /* -------------------------------------------------------------------------- 6b. Pagination — kept for the commented-out pager markup in class.html -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--pager{ padding-block:0; margin-top:30px; } :where(body.cls-body) .sec--pager + .sec-rule{ margin-top:30px; } :where(body.cls-body) .pager{ display:flex; align-items:center; justify-content:center; } :where(body.cls-body) .pager__btn{ width:42px; height:42px; margin:0 1px; padding:0; display:grid; place-items:center; background:transparent; border:1px solid var(--pe-ink); border-radius:8px; color:var(--pe-ink); cursor:pointer; } :where(body.cls-body) .pager__btn--prev{ border-color:var(--pe-border-disabled); color:var(--pe-border-disabled); cursor:default; } :where(body.cls-body) .pager__num{ width:44px; height:42px; display:grid; place-items:center; font:400 14px/1 var(--pe-font); color:var(--pe-text); text-decoration:none; } :where(body.cls-body) .pager__num--cur{ width:40px; height:40px; margin:0 2px; border-radius:8px; background:var(--pe-ink); color:var(--pe-white); } :where(body.cls-body) .pager__num:not(.pager__num--cur):hover{ color:var(--pe-teal); } /* -------------------------------------------------------------------------- 7. Safety list -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--safety{ padding-bottom:36px; } :where(body.cls-body) .sec--safety .sec-h2{ margin-bottom:18px; } :where(body.cls-body) .safety-list{ margin:0; padding:0; list-style:none; } :where(body.cls-body) .safety-list li{ position:relative; padding-left:21px; margin-bottom:4px; font:400 14px/26px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .safety-list li:last-child{ margin-bottom:0; } :where(body.cls-body) .safety-list li::before{ content:""; position:absolute; left:6.9px; top:11.3px; width:3.4px; height:3.4px; border-radius:50%; background:currentColor; } /* -------------------------------------------------------------------------- 8. Product carousels -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--carousel{ padding-block:43px 0; } :where(body.cls-body) .sec--carousel + .sec--carousel, :where(body.cls-body) .sec--carousel + .sec--faq{ padding-top:44px; } :where(body.cls-body) .sec--carousel .sec-h2{ margin-bottom:13px; } :where(body.cls-body) .car-wrap{ position:relative; } :where(body.cls-body) .car-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:7px 0 4px; /* the frame's track is 327.6 tall */ } :where(body.cls-body) .car-card{ display:flex; flex-direction:column; } :where(body.cls-body) .car-tile{ height:147px; border:1px solid var(--pe-border-tile); border-radius:10px; background:var(--pe-white); overflow:hidden; } :where(body.cls-body) .car-tile img{ width:100%; height:100%; object-fit:contain; } :where(body.cls-body) .car-title{ margin:11px 0 0; font:600 14px/22px var(--pe-font); color:var(--pe-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px; } :where(body.cls-body) .car-pack { margin:1px 0 0; font:400 12px/18px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .car-mrp { margin:1px 0 0; font:400 12px/18px var(--pe-font); color:var(--pe-text-muted); } :where(body.cls-body) .car-price{ margin:2px 0 0; font:700 15px/20px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .car-price span{ color:var(--pe-red); } :where(body.cls-body) .car-add{ margin-top:19px; height:36px; width:100%; background:var(--pe-white); border:1px solid var(--pe-teal); border-radius:var(--pe-r-8); color:var(--pe-teal); font:600 14px/1 var(--pe-font); cursor:pointer; } :where(body.cls-body) .car-add:hover{ background:#F1FBFA; } :where(body.cls-body) .car-next, :where(body.cls-body) .art-next, :where(body.cls-body) .qa-next{ position:absolute; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer; } :where(body.cls-body) .car-next{ width:28px; height:28px; right:0; top:118px; background:var(--pe-white); color:var(--pe-text); box-shadow:0 2px 8px rgba(33,33,33,.18); } :where(body.cls-body) .car-next svg{ width:18px; height:18px; } /* -------------------------------------------------------------------------- 9. FAQs -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--faq .sec-h2{ margin-bottom:32px; } :where(body.cls-body) .faq-row{ background:var(--pe-surface); border-radius:var(--pe-r-8); overflow:hidden; } :where(body.cls-body) .faq-row + .faq-row{ margin-top:20px; } :where(body.cls-body) .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; height:50px; padding:0 16px; margin:0; background:none; border:0; cursor:pointer; text-align:left; font:700 18px/1 var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .faq-q .faq-chev{ flex:none; color:var(--pe-icon-grey); transition:transform var(--pe-dur) var(--pe-ease); } :where(body.cls-body) .faq-body{ display:none; padding:0 16px 8px; } :where(body.cls-body) .faq-body p{ margin:12px 0 0; font:400 14px/26px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .faq-row.is-open{ background:var(--pe-teal-050b); border-top:1px solid var(--pe-teal); } :where(body.cls-body) .faq-row.is-open .faq-q{ color:var(--pe-text); height:49px; } :where(body.cls-body) .faq-row.is-open .faq-chev{ transform:rotate(180deg); } :where(body.cls-body) .faq-row.is-open .faq-body{ display:block; } :where(body.cls-body) .ghost-btn{ display:flex; align-items:center; justify-content:center; gap:5px; height:48px; margin-top:32px; box-sizing:border-box; background:var(--pe-white); border:1px solid var(--pe-border-btn); border-radius:var(--pe-r-8); text-decoration:none; font:600 16px/1 var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .ghost-btn:hover{ border-color:var(--pe-teal); color:var(--pe-teal); } :where(body.cls-body) .ghost-btn--sm{ font-size:14px; } /* -------------------------------------------------------------------------- 10. Have question? Ask us! + View top question -------------------------------------------------------------------------- */ :where(body.cls-body) .ask-wrap{ margin-inline:-24px; background:var(--pe-white); box-shadow:0 0 0 2px var(--pe-surface-sunken); } :where(body.cls-body) .sec--ask{ padding:23px 24px 25px; } :where(body.cls-body) .ask-h2 { margin:0; font:600 22px/28px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .ask-sub{ margin:5px 0 0; font:400 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .ask-field{ position:relative; margin-top:24px; height:48px; background:var(--pe-white); border:1px solid var(--pe-border-light); border-radius:var(--pe-r-8); box-shadow:0 4px 14px rgba(30,36,60,.06); display:flex; align-items:center; } :where(body.cls-body) .ask-field input{ flex:1; height:100%; padding:0 60px 0 18px; border:0; outline:0; background:transparent; border-radius:var(--pe-r-8); font:400 16px/1 var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .ask-field input::placeholder{ color:var(--pe-text-muted); } :where(body.cls-body) .ask-send{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:28px; height:28px; padding:0; border:0; border-radius:50%; background:var(--pe-teal-dark); display:grid; place-items:center; cursor:pointer; } :where(body.cls-body) .sec--topq{ position:relative; padding:15px 24px 17px 48px; background:linear-gradient(115deg,#F0F9FF 0%, #F7EAFF 100%); } :where(body.cls-body) .topq-wave{ position:absolute; left:0; right:0; top:-0.4px; height:5.6px; background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='5.6' viewBox='0 0 101 5.6' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0 H101 V5.4 C92 5.4 88 0.2 75.75 0.2 C63.5 0.2 59 5.4 50.5 5.4 C42 5.4 37.5 0.2 25.25 0.2 C13 0.2 9 5.4 0 5.4 Z'/%3E%3C/svg%3E") repeat-x top left; } :where(body.cls-body) .topq-h3{ margin:0; font:600 18px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .topq-h3 span{ font:400 12px/1 var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .qa-wrap{ position:relative; margin-top:24px; margin-right:-24px; } :where(body.cls-body) .qa-track{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } :where(body.cls-body) .qa-track::-webkit-scrollbar{ display:none; } :where(body.cls-body) .qa-card{ flex:0 0 280px; width:280px; height:330px; box-sizing:border-box; background:var(--pe-white); border:1px solid var(--pe-border-light); border-radius:var(--pe-r-8); padding:18px 16px 0; position:relative; overflow:hidden; } :where(body.cls-body) .qa-q{ margin:0; font:600 16px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .qa-a{ margin:13px 0 0; font:400 14px/21px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .qa-a a{ font-weight:600; color:var(--pe-text); text-decoration:underline; } :where(body.cls-body) .qa-rev{ margin:11px 0 0; font:400 12px/16px var(--pe-font); color:var(--pe-green-dark); } :where(body.cls-body) .qa-author{ margin:2px 0 0; font:400 12px/16px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .qa-author a{ color:inherit; text-decoration:underline; } :where(body.cls-body) .qa-div{ width:248px; height:1px; background:var(--pe-border-light); margin:12px 0 0; } :where(body.cls-body) .qa-by{ display:flex; align-items:center; gap:8px; margin:9px 0 0; font:400 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .qa-by svg{ flex:none; border-radius:50%; background:var(--pe-border-light); } :where(body.cls-body) .qa-by b{ font-weight:600; } :where(body.cls-body) .qa-foot{ position:absolute; left:0; right:0; bottom:0; height:40px; background:var(--pe-surface); display:flex; align-items:center; gap:8px; padding:0 16px; } :where(body.cls-body) .qa-pill{ display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; width:144px; height:24px; padding:0 8px; background:var(--pe-white); border:1px solid var(--pe-border); border-radius:12px; font:400 10px/1 var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .qa-pill--no{ width:32px; justify-content:center; padding:0; } :where(body.cls-body) .qa-up { color:var(--pe-green); display:grid; place-items:center; } :where(body.cls-body) .qa-down{ color:var(--pe-red-light2); display:grid; place-items:center; } :where(body.cls-body) .qa-up svg, :where(body.cls-body) .qa-down svg{ width:13px; height:15px; } :where(body.cls-body) .qa-next{ width:42px; height:42px; right:15px; top:50%; transform:translateY(-50%); background:var(--pe-text); color:var(--pe-white); } :where(body.cls-body) .sec--topq .ghost-btn{ margin-top:24px; } /* -------------------------------------------------------------------------- 11. Articles -------------------------------------------------------------------------- */ :where(body.cls-body) .sec-head{ display:flex; align-items:center; justify-content:space-between; } :where(body.cls-body) .sec-head .sec-h2{ margin:0; } :where(body.cls-body) .view-all{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:700 14px/1 var(--pe-font); color:var(--pe-teal-dark); text-transform:uppercase; } :where(body.cls-body) .art-wrap{ position:relative; margin-top:14px; } :where(body.cls-body) .art-track{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } :where(body.cls-body) .art-track::-webkit-scrollbar{ display:none; } :where(body.cls-body) .art-card{ flex:0 0 213.1px; width:213.1px; height:214px; box-sizing:border-box; background:var(--pe-white); border:1px solid var(--pe-border-light); border-radius:10px; overflow:hidden; } :where(body.cls-body) .art-img{ height:144px; background:var(--pe-surface-sunken); } :where(body.cls-body) .art-img img{ width:100%; height:100%; object-fit:cover; } :where(body.cls-body) .art-title{ margin:13px 16px 0; font:600 14px/21px var(--pe-font); color:var(--pe-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } :where(body.cls-body) .art-next{ width:42px; height:42px; right:-13px; top:86px; background:var(--pe-text); color:var(--pe-white); } /* -------------------------------------------------------------------------- 12. Did you find this helpful? -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--helpful{ padding-top:42px; } :where(body.cls-body) .sec--helpful .sec-h2{ margin-bottom:14px; } :where(body.cls-body) .helpful-sub{ display:none; } :where(body.cls-body) .helpful-row{ display:flex; gap:64px; } :where(body.cls-body) .helpful-btn{ flex:1; height:48px; display:flex; align-items:center; justify-content:center; gap:16px; background:var(--pe-white); border:1px solid var(--pe-border-light); border-radius:var(--pe-r-12); cursor:pointer; font:500 18px/1 var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .helpful-btn:hover{ border-color:var(--pe-teal); } :where(body.cls-body) .helpful-up { color:var(--pe-green); display:grid; place-items:center; } :where(body.cls-body) .helpful-down{ color:var(--pe-red-light2); display:grid; place-items:center; } :where(body.cls-body) .helpful-up svg, :where(body.cls-body) .helpful-down svg{ width:20.1px; height:26.7px; } /* -------------------------------------------------------------------------- 13. Related classes -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--related{ padding-bottom:42px; } :where(body.cls-body) .sec--related .sec-h2{ margin-bottom:18px; } :where(body.cls-body) .rel-list{ list-style:none; margin:0; padding:0; } :where(body.cls-body) .rel-list li{ position:relative; padding-left:13px; margin-bottom:18px; font:400 14px/20px var(--pe-font); } :where(body.cls-body) .rel-list li:last-child{ margin-bottom:0; } :where(body.cls-body) .rel-list li::before{ content:""; position:absolute; left:6.5px; top:8.5px; width:3px; height:3px; border-radius:50%; background:var(--pe-teal); } :where(body.cls-body) .rel-list a{ font:400 14px/20px var(--pe-font); color:var(--pe-teal); text-decoration:none; } :where(body.cls-body) .rel-list a:hover{ text-decoration:underline; } /* -------------------------------------------------------------------------- 14. Other Tests / Other Products accordions -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--tests .sec-h2, :where(body.cls-body) .sec--products .sec-h2{ margin-bottom:14px; } :where(body.cls-body) .acc-row{ background:var(--pe-white); border:1px solid var(--pe-border-light); border-radius:var(--pe-r-12); overflow:hidden; } :where(body.cls-body) .acc-row + .acc-row{ margin-top:16px; } :where(body.cls-body) .acc-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; height:48px; padding:0 12px; margin:0; background:none; border:0; cursor:pointer; text-align:left; font:500 18px/1 var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .acc-row:first-child .acc-head{ color:var(--pe-text-secondary); } :where(body.cls-body) .acc-chev{ display:grid; place-items:center; color:var(--pe-text); flex:none; } :where(body.cls-body) .acc-chev .faq-chev{ transition:transform var(--pe-dur) var(--pe-ease); } :where(body.cls-body) .acc-row.is-open .acc-chev .faq-chev{ transform:rotate(180deg); } :where(body.cls-body) .acc-body{ display:none; list-style:none; margin:0; padding:0 12px 12px; } :where(body.cls-body) .acc-row.is-open .acc-body{ display:block; } :where(body.cls-body) .acc-body li{ margin-top:8px; } :where(body.cls-body) .acc-body a{ font:400 14px/20px var(--pe-font); color:var(--pe-text-secondary); text-decoration:underline; } :where(body.cls-body) .acc-body a:hover{ color:var(--pe-teal); } /* -------------------------------------------------------------------------- 15. Contact block -------------------------------------------------------------------------- */ :where(body.cls-body) .sec--contact{ padding-bottom:32px; } :where(body.cls-body) .sec--contact .sec-h2{ margin-bottom:18px; } :where(body.cls-body) .contact-line{ margin:0; font:400 14px/30px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .contact-line b{ font-weight:700; } :where(body.cls-body) .contact-line--addr{ line-height:26px; } /* -------------------------------------------------------------------------- 16. Right rail — consult card -------------------------------------------------------------------------- */ :where(body.cls-body) .consult-card{ position:relative; height:118px; box-sizing:border-box; padding:22px 24px 0; border-radius:var(--pe-r-12); background:linear-gradient(113deg,#CEEAE8 0%, #F6FBFA 100%); overflow:hidden; } :where(body.cls-body) .consult-card__h{ margin:0; max-width:224px; font:600 16px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .consult-card__cta{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; font:500 14px/24px var(--pe-font); color:var(--pe-teal); text-decoration:none; } :where(body.cls-body) .consult-card__chev{ color:var(--pe-teal-dark); display:grid; place-items:center; } :where(body.cls-body) .consult-card__doc{ position:absolute; top:21.5px; right:23.36px; width:75px; height:75px; border-radius:50%; object-fit:cover; background:var(--pe-white); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); } /* ── recommendations ──────────────────────────────────────────────────── */ :where(body.cls-body) .rec-card{ background:var(--pe-white); box-shadow:0 0 0 1px var(--pe-border-light); border-radius:var(--pe-r-16); padding:24px 24px 33px; box-sizing:border-box; } :where(body.cls-body) .rec-card__h{ margin:0; font:700 20px/28px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .rec-list{ list-style:none; margin:16px 0 0; padding:0; } :where(body.cls-body) .rec-row{ position:relative; height:70px; margin-left:20px; width:318px; background:var(--pe-teal-025); border-radius:var(--pe-r-12); display:flex; flex-direction:column; justify-content:center; padding-left:70px; box-sizing:border-box; cursor:pointer; } :where(body.cls-body) .rec-row + .rec-row{ margin-top:21px; } :where(body.cls-body) .rec-row__thumb{ position:absolute; left:-13px; top:0; width:69px; height:69px; border-radius:50%; background:var(--pe-white); overflow:hidden; box-shadow:0 2px 10px rgba(30,36,60,.10); display:grid; place-items:center; } :where(body.cls-body) .rec-row__thumb img{ width:52px; height:52px; object-fit:contain; } :where(body.cls-body) .rec-row__title{ display:block; font:600 12px/18px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .rec-row__sub { display:block; font:500 10px/18px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .rec-row__chev{ position:absolute; right:14.4px; top:50%; transform:translateY(-50%); color:var(--pe-teal); display:grid; place-items:center; } /* ── trust strip ──────────────────────────────────────────────────────── */ :where(body.cls-body) .trust-strip{ display:grid; grid-template-columns:129px 135px 122px; background:var(--pe-blue-bg); box-shadow:0 0 0 1px var(--pe-border-blue); border-radius:var(--pe-r-16); padding:12px 0 15px; box-sizing:border-box; position:relative; } :where(body.cls-body) .trust-strip::before, :where(body.cls-body) .trust-strip::after{ content:""; position:absolute; top:22px; width:2px; height:77px; background:linear-gradient(180deg,rgba(201,215,237,0) 0%,var(--pe-rule-blue) 50%,rgba(201,215,237,0) 100%); } :where(body.cls-body) .trust-strip::before{ left:128px; } :where(body.cls-body) .trust-strip::after { left:263px; } :where(body.cls-body) .trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; } :where(body.cls-body) .trust-item__ico{ width:54px; height:54px; border-radius:50%; background:var(--pe-white); display:grid; place-items:center; margin-bottom:8px; } :where(body.cls-body) .trust-item__label{ font:500 12px/16px var(--pe-font); color:var(--pe-text-secondary); white-space:nowrap; } :where(body.cls-body) .trust-item:nth-child(1) .trust-item__label{ margin-left:1px; } /* -------------------------------------------------------------------------- 17. "Why trust PharmEasy?" full-bleed band -------------------------------------------------------------------------- */ :where(body.cls-body) .tb{ margin-top:34px; background:var(--pe-white); border-top:2px solid var(--pe-surface-sunken); border-bottom:2px solid var(--pe-surface-sunken); padding:40px 0; text-align:center; } :where(body.cls-body) .tb__h{ margin:0; font:600 40px/48px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .tb__sub{ margin:30px 0 0; font:700 24px/28px var(--pe-font); color:var(--pe-teal); } :where(body.cls-body) .tb__stats{ display:flex; justify-content:center; gap:32px; margin-top:23px; } :where(body.cls-body) .tb__stat{ display:flex; align-items:center; gap:0; } :where(body.cls-body) .tb__stat > span{ display:flex; flex-direction:column; padding:0 17px; } :where(body.cls-body) .tb__stat b{ font:700 20px/26px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .tb__stat span span, :where(body.cls-body) .tb__stat > span{ font:700 20px/26px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .tb__stat .laurel:last-child{ transform:scaleX(-1); } :where(body.cls-body) .tb__stats .tb__stat:nth-child(2) b{ text-transform:uppercase; } :where(body.cls-body) .tb__panel{ width:min(1200px, calc(100% - 48px)); margin:39.2px auto 0; padding:24px 0 0; box-sizing:border-box; background:var(--pe-green-bg); border-radius:var(--pe-r-8); } :where(body.cls-body) .tb__cards{ display:flex; justify-content:center; gap:16px; } :where(body.cls-body) .tb-card{ width:200px; height:220px; box-sizing:border-box; text-align:left; background:var(--pe-white); border:1px solid var(--pe-surface-sunken); border-radius:var(--pe-r-12); padding:0 16px 22px; } :where(body.cls-body) .tb-card__ico{ height:110px; position:relative; display:flex; align-items:center; justify-content:center; } :where(body.cls-body) .tb-card__ico::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--pe-rule-grad) 0%,var(--pe-rule-grad) 74%,#F3F6FA 86%,#FFFFFF 100%); } :where(body.cls-body) .tb-card__stat { margin:9px 0 0; font:700 20px/28px var(--pe-font); color:var(--pe-teal); } :where(body.cls-body) .tb-card__label{ margin:3px 0 0; font:500 16px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .tb__strip{ display:flex; align-items:center; justify-content:center; gap:11px; margin:23.6px 0 0; padding-bottom:24px; font:600 18px/24px var(--pe-font); color:var(--pe-teal-bright); } /* ── placeholder art for images the CDN cannot serve in dev ───────────── */ :where(body.cls-body) img[data-placeholder]{ color:transparent; } :where(body.cls-body) .author__avatar[data-placeholder], :where(body.cls-body) .consult-card__doc[data-placeholder]{ background:var(--pe-surface-sunken) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='19' r='8' fill='%23C9D7ED'/%3E%3Cpath d='M8 44c0-9 7-14 16-14s16 5 16 14z' fill='%23C9D7ED'/%3E%3C/svg%3E") center/70% no-repeat; } :where(body.cls-body) .rec-row__thumb img[data-placeholder]{ background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Crect x='16' y='10' width='20' height='32' rx='4' fill='%23DCEAF0'/%3E%3Crect x='16' y='10' width='20' height='11' rx='4' fill='%23BCD9E4'/%3E%3C/svg%3E") center/contain no-repeat; } :where(body.cls-body) .car-tile img[data-placeholder], :where(body.cls-body) .art-img img[data-placeholder]{ background:var(--pe-surface-sunken) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='12' y='16' width='40' height='34' rx='5' fill='none' stroke='%23C9D7ED' stroke-width='3'/%3E%3Ccircle cx='24' cy='28' r='4' fill='%23C9D7ED'/%3E%3Cpath d='M15 46l12-12 8 8 6-6 8 10z' fill='%23C9D7ED'/%3E%3C/svg%3E") center/44px no-repeat; } /* -------------------------------------------------------------------------- 18. Mobile-only blocks — hidden on desktop -------------------------------------------------------------------------- */ :where(body.cls-body) .m-header,:where(body.cls-body) .m-pincode,:where(body.cls-body) .m-trust,:where(body.cls-body) .m-needhelp,:where(body.cls-body) .m-crumb,:where(body.cls-body) .m-footer, :where(body.cls-body) .m-bar,:where(body.cls-body) .m-scrim,:where(body.cls-body) .m-sheet{ display:none; } /* ========================================================================== 19. ≤1279 / ≤1023 — graceful step-down (no frame exists between 1440 and 360) ========================================================================== */ /* base.css puts `min-width:360px` on .pe-search, which overflows the shared header between ~768 and ~1100px. No design frame exists in that band; this keeps the page from scrolling horizontally there. Delete once base.css relaxes that min-width. */ @media (max-width:1100px){ :where(body.cls-body) .pe-search{ min-width:0; } } @media (max-width:1279px){ :where(body.cls-body) .cls-grid{ padding-inline:24px; } } @media (max-width:1023px){ :where(body.cls-body) .cls-grid{ grid-template-columns:230px minmax(0,1fr); } :where(body.cls-body) .cls-col--right{ display:none; } :where(body.cls-body) .tb__cards{ flex-wrap:wrap; } } /* ========================================================================== 20. MOBILE — 360px frame (class-mobile / class-firstfold-mobile / class-filtersheet-mobile). Section map: specs/pdf-mobile-class.md §1 ========================================================================== */ @media (max-width:767px){ :where(body.cls-body) .u-d{ display:none; } :where(body.cls-body) .u-m{ display:inline; } /* the desktop chrome steps aside for the mobile chrome */ :where(body.cls-body) .pe-header,:where(body.cls-body) .pe-breadcrumb,:where(body.cls-body) .pe-footer,:where(body.cls-body) .cls-crumb,:where(body.cls-body) .tb{ display:none; } :where(body.cls-body) .m-header,:where(body.cls-body) .m-pincode,:where(body.cls-body) .m-trust,:where(body.cls-body) .m-needhelp,:where(body.cls-body) .m-crumb,:where(body.cls-body) .m-footer,:where(body.cls-body) .m-bar{ display:flex; } :where(body.cls-body) .cls-body{ background:var(--pe-white); padding-bottom:48px; } :where(body.cls-body) .cls-wrap{ display:flex; flex-direction:column; background:var(--pe-white); } :where(body.cls-body) .cls-grid, :where(body.cls-body) .cls-col{ display:contents; } /* ── section order, straight off the mobile frame ──────────────────── */ :where(body.cls-body) .sec--hero { order:1 } :where(body.cls-body) .pl-list { order:2 } :where(body.cls-body) .sec--pager { order:3 } :where(body.cls-body) .sec--about { order:4 } :where(body.cls-body) .sec--safety { order:5 } :where(body.cls-body) #carousel-1 { order:6 } :where(body.cls-body) #carousel-2 { order:7 } :where(body.cls-body) #carousel-3 { order:8 } :where(body.cls-body) .sec--faq { order:9 } :where(body.cls-body) .ask-wrap { order:10 } :where(body.cls-body) .peb-consult { order:11 } :where(body.cls-body) .peb-reco { order:12 } :where(body.cls-body) .m-needhelp { order:14 } :where(body.cls-body) .m-crumb { order:15 } :where(body.cls-body) .sec--helpful { order:16 } :where(body.cls-body) .rail-card--know{ order:17 } :where(body.cls-body) .rail-card--content{ order:18 } :where(body.cls-body) .rail-card--legit { order:19 } :where(body.cls-body) .sec--contact { order:20 } :where(body.cls-body) .sec--related { order:21 } :where(body.cls-body) .sec--products { order:22 } :where(body.cls-body) .sec--tests { order:23 } /* "Why trust PharmEasy" is the lead-in to "PharmEasy other services", so it takes the slot immediately above it. The band's own class is .peb-trust — .m-trust is the retired hook and is kept only so old markup still sorts here rather than falling to 0 and landing above the hero. This wins over `order: var(--peb-tr-order)` on .peb-trust: same specificity, later. */ :where(body.cls-body) .m-trust, :where(body.cls-body) .peb-trust { order:24 } :where(body.cls-body) .peb-svc { order:25 } :where(body.cls-body) .filter-card,:where(body.cls-body) .rail-card--author,:where(body.cls-body) .rail-card--issue,:where(body.cls-body) .sec-rule{ display:none; } /* The right rail is a column on desktop only. On mobile it dissolves so the two cards it now carries — the consult card and Recommended For You — take their own place in the single mobile flow (orders 11 and 12 above). The trust strip inside it stays out: the .m-trust band already says the same thing. */ :where(body.cls-body) .cls-col--right{ display:contents; } :where(body.cls-body) .trust-strip{ display:none; } :where(body.cls-body) .peb-consult{ margin:16px; border-radius:var(--pe-r-12); border-bottom:0; /* the band separator would double up */ } :where(body.cls-body) .peb-svc{ background:var(--pe-white); padding:28px 16px 32px; border-bottom:8px solid var(--pe-border-light); } /* every mobile section is full-bleed white with an 8px #E6EBF4 separator */ :where(body.cls-body) .cls-col--main{ display:contents; } :where(body.cls-body) .sec,:where(body.cls-body) .rail-card,:where(body.cls-body) .m-trust,:where(body.cls-body) .m-needhelp{ background:var(--pe-white); border:0; border-radius:0; border-bottom:8px solid var(--pe-border-light); padding:32px 24px 34px; margin:0; box-sizing:border-box; } :where(body.cls-body) .m-crumb{ border-bottom:8px solid var(--pe-border-light); } :where(body.cls-body) .sec--tests{ border-bottom:0; } /* ── 3. Header (54px) ───────────────────────────────────────────────── */ :where(body.cls-body) .m-header{ height:54px; align-items:center; gap:0; padding:0 16px; background:var(--pe-white); box-shadow:inset 0 -1px 0 var(--pe-hdr-rule); position:sticky; top:0; z-index:40; } :where(body.cls-body) .m-burger{ display:grid; place-items:center; width:24px; height:24px; margin-left:-1px; padding:0; background:none; border:0; cursor:pointer; } :where(body.cls-body) .m-logo{ display:block; margin-left:15px; width:107px; height:21px; overflow:hidden; } :where(body.cls-body) .m-logo img{ display:block; width:107px; height:29.7px; margin-top:-8.7px; } :where(body.cls-body) .m-head-actions{ margin-left:auto; display:flex; align-items:center; gap:14px; } :where(body.cls-body) .m-ico{ display:grid; place-items:center; width:24px; height:24px; padding:0; background:none; border:0; cursor:pointer; } /* ── 4. Pincode strip (32px) ────────────────────────────────────────── */ :where(body.cls-body) .m-pincode{ height:32px; align-items:center; padding:0 16px; text-decoration:none; background:var(--pe-white); box-shadow:inset 0 -1px 0 var(--pe-pincode-rule); } :where(body.cls-body) .m-pincode__bolt{ width:16px; display:grid; place-items:center; } :where(body.cls-body) .m-pincode__txt{ margin-left:10px; font:400 12px/16px var(--pe-font); color:var(--pe-text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :where(body.cls-body) .m-pincode__txt b{ font-weight:500; color:var(--pe-text); } :where(body.cls-body) .m-pincode__chev{ margin-left:auto; display:grid; place-items:center; width:24px; height:24px; } /* ── 5. Hero ────────────────────────────────────────────────────────── */ :where(body.cls-body) .sec--hero{ background:linear-gradient(180deg,#ECF0F8 0%, #FFFFFF 82%); border-bottom:0; padding:22px 16px 0; } :where(body.cls-body) .class-chip{ height:23px; padding:0 8px; border-radius:11.5px; font-size:11px; } :where(body.cls-body) .class-h1{ margin:7.7px 0 0; font:600 18px/24px var(--pe-font); } :where(body.cls-body) .class-rule{ width:180px; margin:7.3px 0 0; background:linear-gradient(90deg,var(--pe-rule-mobile) 0%, rgba(202,213,232,0) 100%); } :where(body.cls-body) .class-desc{ margin:7.8px 0 0; font:400 12px/16px var(--pe-font); } :where(body.cls-body) .results-head{ margin:29px 0 11px; font:600 14px/20px var(--pe-font); } /* ── 6. Product grid — 2-up, 179x344 tiles on an #EDF2F9 band ───────── */ :where(body.cls-body) .pl-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--pe-surface-sunken); padding:2px 0; margin:0; border-bottom:0; } :where(body.cls-body) .pl-row{ width:auto; height:344px; padding:0 12px 16px; border-radius:0; box-shadow:none; display:block; position:relative; } :where(body.cls-body) .pl-shot{ width:84px; height:84px; margin:43px auto 0; } :where(body.cls-body) .pl-name{ margin:24px 0 0; font:500 12px/20px var(--pe-font); color:var(--pe-ink); max-width:none; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px; } :where(body.cls-body) .pl-maker{ margin:2px 0 0; font:400 10px/16px var(--pe-font); } :where(body.cls-body) .pl-pack { margin:0; font:400 11px/16px var(--pe-font); } :where(body.cls-body) .pl-price{ display:flex; flex-wrap:wrap; align-items:baseline; height:auto; margin:0; } :where(body.cls-body) .pl-mrp { order:-1; flex:0 0 100%; margin:12px 0 0; font:400 11px/16px var(--pe-font); } :where(body.cls-body) .pl-sale { font:600 16px/20px var(--pe-font); } :where(body.cls-body) .pl-off { margin-left:5px; font:600 11px/16px var(--pe-font); } :where(body.cls-body) .pl-coupon{ margin:2px 0 0; font:400 11px/16px var(--pe-font); } :where(body.cls-body) .pl-rating{ top:0; left:0; right:auto; gap:0; } :where(body.cls-body) .pl-chip{ width:47px; height:20px; padding:0 0 0 8px; gap:4px; background:var(--pe-white); border-radius:0 0 4px 0; font:700 10px/20px var(--pe-font); color:var(--pe-text-secondary); flex-direction:row-reverse; justify-content:flex-end; box-shadow:0 3px 3px rgba(0,0,0,.043), 0 5px 5px rgba(0,0,0,.035), 0 24px 24px rgba(0,0,0,.024); } :where(body.cls-body) .pl-chip .pl-star{ width:10px; height:10px; color:var(--pe-amber); } :where(body.cls-body) .pl-count{ display:none; } :where(body.cls-body) .pl-cta{ position:absolute; left:12px; right:12px; bottom:16px; width:auto; height:32px; border-radius:var(--pe-r-8); background:var(--pe-teal); font:600 12px/32px var(--pe-font); box-shadow:0 4px 12px rgba(0,0,0,.12); } /* .pl-cta--notify{ background:var(--pe-white); line-height:30px; } — variant removed */ :where(body.cls-body) .pl-cta--oos, :where(body.cls-body) .pl-cta[disabled]{ background:var(--pe-surface-sunken); box-shadow:none; } :where(body.cls-body) .pl-cta--incart{ background:var(--pe-white); border-width:1.5px; line-height:29px; gap:6px; } :where(body.cls-body) .pl-cta--incart svg{ width:14px; height:14px; } :where(body.cls-body) .pl-row--nocta .pl-cta{ display:block; } /* ── 7. Load more (the band the pager used to occupy) ───────────────── */ :where(body.cls-body) .sec--pager{ margin:0; padding:18px 16px; border-bottom:8px solid var(--pe-border-light); } :where(body.cls-body) .loadmore{ gap:10px; } :where(body.cls-body) .loadmore__btn{ width:100%; height:40px; padding:0; border-width:1.5px; border-radius:var(--pe-r-8); font:700 14px/1 var(--pe-font); } :where(body.cls-body) .loadmore__count{ font:400 12px/16px var(--pe-font); } :where(body.cls-body) .pager__btn{ width:34px; height:34px; margin:0 2px; border-radius:5px; } :where(body.cls-body) .pager__num{ width:34px; height:34px; margin:0 2px; font:500 12px/1 var(--pe-font); color:var(--pe-ink); } :where(body.cls-body) .pager__num--cur{ width:34px; height:34px; border-radius:4px; font-weight:600; color:var(--pe-white); } /* ── 9/10. About + Safety (24px gutter) ─────────────────────────────── */ :where(body.cls-body) .sec--about .sec-h2{ margin-bottom:17px; font:600 16px/22px var(--pe-font); } :where(body.cls-body) .sec-h3{ margin:24px 0 12px; font:600 14px/20px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .sec--safety{ padding-bottom:32px; } :where(body.cls-body) .sec--safety .sec-h2{ margin-bottom:18px; font:700 20px/28px var(--pe-font); } :where(body.cls-body) .safety-list li{ line-height:20px; margin-bottom:4px; } :where(body.cls-body) .safety-list li::before{ top:8.3px; } /* ── 11. Carousels ──────────────────────────────────────────────────── */ :where(body.cls-body) .sec--carousel{ padding:32px 16px 30px; } :where(body.cls-body) .sec--carousel + .sec--carousel, :where(body.cls-body) .sec--carousel + .sec--faq{ padding-top:32px; } :where(body.cls-body) .sec--carousel .sec-h2{ margin-bottom:16px; font:600 16px/22px var(--pe-font); } :where(body.cls-body) .car-wrap{ margin-right:-16px; } :where(body.cls-body) .car-track{ display:flex; gap:20px; padding:0 0 2px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } :where(body.cls-body) .car-track::-webkit-scrollbar{ display:none; } :where(body.cls-body) .car-card{ flex:0 0 99px; width:99px; } :where(body.cls-body) .car-tile{ height:100px; border-radius:var(--pe-r-8); border-color:#E4E4E4; } :where(body.cls-body) .car-title{ margin:8px 0 0; font:600 14px/18px var(--pe-font); min-height:36px; } :where(body.cls-body) .car-pack{ display:none; } :where(body.cls-body) .car-mrp { margin:2px 0 0; font:400 12px/16px var(--pe-font); } :where(body.cls-body) .car-price{ margin:1px 0 0; font:700 14px/18px var(--pe-font); } :where(body.cls-body) .car-price span{ font:600 12px/16px var(--pe-font); color:var(--pe-off); } :where(body.cls-body) .car-add{ margin-top:10px; width:79px; height:32px; font:700 14px/1 var(--pe-font); } :where(body.cls-body) .car-next{ display:none; } /* ── 12. FAQs ───────────────────────────────────────────────────────── */ :where(body.cls-body) .sec--faq{ padding:32px 16px 30px; } :where(body.cls-body) .sec--faq .sec-h2{ margin-bottom:17px; font:600 16px/22px var(--pe-font); } :where(body.cls-body) .faq-row{ background:var(--pe-surface); border-radius:var(--pe-r-8); } :where(body.cls-body) .faq-row + .faq-row{ margin-top:12px; } :where(body.cls-body) .faq-q{ height:auto; min-height:48px; padding:12px 16px; align-items:flex-start; gap:12px; font:500 14px/24px var(--pe-font); color:#000000; } :where(body.cls-body) .faq-q .faq-chev{ width:20px; height:20px; margin-top:2px; } :where(body.cls-body) .faq-row.is-open{ border-top:2px solid var(--pe-teal); } :where(body.cls-body) .faq-row.is-open .faq-q{ height:auto; color:#000000; } :where(body.cls-body) .faq-body{ padding:0 16px 12px; } :where(body.cls-body) .faq-body p{ margin:12px 0 0; font:400 14px/21px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .sec--faq .ghost-btn{ height:40px; margin-top:12px; border:1.5px solid var(--pe-teal); background:transparent; color:var(--pe-teal); font:600 12px/1 var(--pe-font); } :where(body.cls-body) .sec--faq .ghost-btn svg{ display:none; } /* ── 13/14. Ask us + View top question ──────────────────────────────── */ :where(body.cls-body) .ask-wrap{ margin:0; box-shadow:none; background:transparent; } :where(body.cls-body) .sec--ask{ padding:16px 16px 20px; border-bottom:0; background:var(--pe-white); } :where(body.cls-body) .ask-h2{ font:600 18px/24px var(--pe-font); } :where(body.cls-body) .ask-sub{ margin:5px 0 0; font:400 12px/18px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .ask-field{ margin-top:29px; } :where(body.cls-body) .ask-field input{ font-size:14px; padding-right:56px; } :where(body.cls-body) .ask-send{ right:16px; } :where(body.cls-body) .sec--topq{ padding:18px 16px 12px; border-radius:12px 12px 0 0; background:linear-gradient(180deg,#F0F9FF 0%, #EEF4FC 45%, #F2F6FF 100%); border-bottom:12px solid var(--pe-border-light); } :where(body.cls-body) .topq-wave{ display:none; } :where(body.cls-body) .topq-h3{ font:600 16px/22px var(--pe-font); } :where(body.cls-body) .topq-h3 span{ color:var(--pe-text); } :where(body.cls-body) .qa-wrap{ margin:20px -16px 0 0; } :where(body.cls-body) .qa-track{ overflow-x:auto; gap:16px; padding-bottom:2px; scrollbar-width:none; -ms-overflow-style:none; } :where(body.cls-body) .qa-track::-webkit-scrollbar{ display:none; } :where(body.cls-body) .qa-card{ flex:0 0 280px; height:244px; padding:14px 16px 0; } :where(body.cls-body) .qa-q{ font:600 14px/20px var(--pe-font); } :where(body.cls-body) .qa-a{ margin:12px 0 0; font:400 12px/18px var(--pe-font); } :where(body.cls-body) .qa-a a{ font:700 12px/18px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .qa-rev{ margin:9px 0 0; font:500 10px/14px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .qa-author{ display:none; } :where(body.cls-body) .qa-div{ display:none; } :where(body.cls-body) .qa-by{ margin:14px 0 0; font:500 11px/16px var(--pe-font); } :where(body.cls-body) .qa-next{ display:none; } :where(body.cls-body) .sec--topq .ghost-btn{ height:40px; margin-top:24px; font:600 12px/1 var(--pe-font); border-color:var(--pe-border-btn); } /* ── 15. Articles ───────────────────────────────────────────────────── */ :where(body.cls-body) .sec--articles{ order:12; padding:34px 16px 32px; } :where(body.cls-body) .sec-head{ align-items:baseline; } :where(body.cls-body) .sec--articles .sec-h2{ font:600 16px/22px var(--pe-font); color:#000000; } :where(body.cls-body) .view-all{ text-transform:none; font:500 12px/1 var(--pe-font); color:var(--pe-teal); gap:8px; } :where(body.cls-body) .view-all svg{ color:var(--pe-teal-dark); width:10px; height:10px; } :where(body.cls-body) .art-wrap{ margin:16px -16px 0 0; } :where(body.cls-body) .art-track{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; } :where(body.cls-body) .art-track::-webkit-scrollbar{ display:none; } :where(body.cls-body) .art-card{ border-radius:var(--pe-r-12); box-shadow:0 2px 8px rgba(33,33,33,.05); } :where(body.cls-body) .art-title{ margin:14px 16px 0; font:500 14px/21px var(--pe-font); } :where(body.cls-body) .art-next{ display:none; } /* ── 16. Why trust — mobile card ────────────────────────────────────── */ :where(body.cls-body) .m-trust{ flex-direction:column; padding:33px 16px 32px; } :where(body.cls-body) .m-h2{ margin:0; font:600 18px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .m-trust__card{ display:flex; gap:10px; margin:25px -16px 0 0; background:var(--pe-green-bg); border-radius:var(--pe-r-12); padding:16px; overflow:hidden; } :where(body.cls-body) .m-trust__left{ flex:0 0 114px; } :where(body.cls-body) .m-trust__left p{ margin:18px 0 0; font:500 12px/19px var(--pe-font); color:var(--pe-teal-bright); } :where(body.cls-body) .m-trust__cards{ display:flex; gap:16px; } :where(body.cls-body) .m-trust__c{ flex:0 0 136px; width:136px; height:176px; box-sizing:border-box; background:var(--pe-white); border:1px solid var(--pe-border-light); border-radius:var(--pe-r-12); padding:27px 16px 0; } :where(body.cls-body) .m-trust__ico{ display:block; } :where(body.cls-body) .m-trust__stat{ margin:44px 0 0; font:700 12px/16px var(--pe-font); color:var(--pe-teal); } :where(body.cls-body) .m-trust__cap { margin:5px 0 0; font:400 12px/16px var(--pe-font); color:var(--pe-text); } /* The .m-trust__card rules above belong to the broken card that class.html now keeps commented out. What renders is the directory page's working band — .trustm / .tstat, copied from directory.css (§ mobile, "Why trust"). The one thing that was actually broken is fixed here: the strip SCROLLS instead of clipping its overflow, so every stat card is reachable. */ :where(body.cls-body) .trustm{ display:flex; align-items:flex-start; gap:10px; margin:25px -16px 0 0; padding:15px 0 15px 16px; box-sizing:border-box; background:var(--pe-green-bg); border-radius:16px 0 0 16px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; } :where(body.cls-body) .trustm::-webkit-scrollbar{ display:none; } :where(body.cls-body) .trustm__copy{ flex:none; width:114px; } :where(body.cls-body) .trustm__hand{ width:76px; height:66px; margin-bottom:8px; } :where(body.cls-body) .trustm__copy p{ margin:0; font:400 12px/19px var(--pe-font); color:var(--pe-teal); } :where(body.cls-body) .trustm__cards{ display:flex; gap:16px; } :where(body.cls-body) .trustm .tstat{ box-sizing:border-box; flex:none; width:136px; height:176px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; background:var(--pe-white); border:1px solid var(--pe-border-light); border-radius:var(--pe-r-12); } :where(body.cls-body) .trustm .tstat__ic{ align-self:center; width:104px; height:80px; } :where(body.cls-body) .trustm .tstat__ic svg{ display:block; width:72px; height:72px; margin-inline:auto; } :where(body.cls-body) .trustm .tstat__rule{ display:block; width:104px; height:1px; margin-top:11px; background:#DCE4F1; } :where(body.cls-body) .trustm .tstat__v{ margin-top:9px; font:700 12px/16px var(--pe-font); color:var(--pe-teal); } :where(body.cls-body) .trustm .tstat__l{ margin-top:8px; font:400 12px/16px var(--pe-font); color:var(--pe-text); } /* ── 17. Need help ──────────────────────────────────────────────────── */ :where(body.cls-body) .m-needhelp{ flex-direction:column; padding:33px 16px 32px; } :where(body.cls-body) .m-needhelp__tag{ margin:0 0 12px; font:400 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .m-outline-btn{ display:flex; align-items:center; justify-content:center; height:40px; margin-top:15px; border:1.5px solid var(--pe-teal); border-radius:var(--pe-r-8); text-decoration:none; font:700 14px/1 var(--pe-font); color:var(--pe-teal); } /* ── 18. Mobile breadcrumb band ─────────────────────────────────────── */ :where(body.cls-body) .m-crumb{ display:block; background:var(--pe-surface-alt); padding:12px 16px 14px; } :where(body.cls-body) .m-crumb ol{ list-style:none; margin:0; padding:0; } :where(body.cls-body) .m-crumb li{ display:inline-flex; align-items:center; font:500 12px/19px var(--pe-font); color:var(--pe-ink); } :where(body.cls-body) .m-crumb a{ color:inherit; text-decoration:none; } :where(body.cls-body) .m-crumb b{ font-weight:600; } :where(body.cls-body) .m-crumb svg{ width:24px; height:24px; } :where(body.cls-body) .m-crumb__cur{ display:flex; margin-top:12px; } :where(body.cls-body) .m-crumb__cur span{ font-weight:600; color:var(--pe-teal); } /* ── 19. Did you find this helpful? ─────────────────────────────────── */ :where(body.cls-body) .sec--helpful{ padding:33px 16px 28px; } :where(body.cls-body) .sec--helpful .sec-h2{ margin-bottom:4px; font:600 20px/26px var(--pe-font); } :where(body.cls-body) .helpful-sub{ display:block; margin:0 0 19px; font:400 12px/16px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .helpful-row{ gap:24px; } :where(body.cls-body) .helpful-btn{ gap:12px; border-radius:var(--pe-r-8); font:400 14px/1 var(--pe-font); } :where(body.cls-body) .helpful-up svg,:where(body.cls-body) .helpful-down svg{ width:25px; height:28px; } /* ── 20. The small left-rail cards, now full-width sections ─────────── */ :where(body.cls-body) .rail-card{ padding:22px 16px 24px; } :where(body.cls-body) .rail-card__title{ font:600 16px/22px var(--pe-font); } :where(body.cls-body) .rail-card__link{ margin-top:14px; gap:4px; font:700 10px/14px var(--pe-font); text-transform:uppercase; letter-spacing:.01em; } :where(body.cls-body) .rail-card--know .rail-card__body{ margin:13px 0 0; font:500 14px/24px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .rail-card--legit{ display:grid; grid-template-columns:50px 1fr; column-gap:24px; align-items:start; padding:26px 16px 26px; } :where(body.cls-body) .rail-card--legit .legit-ico{ grid-row:1 / span 2; width:50px; height:59px; } :where(body.cls-body) .rail-card--legit .rail-card__title{ margin-top:0; font:600 16px/24px var(--pe-font); } :where(body.cls-body) .rail-card--legit .rail-card__link{ margin-top:16px; } /* ── 21/22. Contact + alternative medicines ─────────────────────────── */ :where(body.cls-body) .sec--contact{ padding:22px 16px 26px; } :where(body.cls-body) .sec--contact .sec-h2{ margin-bottom:13px; font:600 16px/22px var(--pe-font); } :where(body.cls-body) .contact-line{ font:400 14px/26px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .contact-line b{ font-weight:600; } :where(body.cls-body) .contact-line--addr{ line-height:20px; margin-top:6px; } :where(body.cls-body) .sec--related{ padding:22px 16px 24px; } :where(body.cls-body) .sec--related .sec-h2{ margin-bottom:14px; font:600 16px/22px var(--pe-font); } :where(body.cls-body) .rel-list li{ padding-left:11.7px; margin-bottom:12px; } :where(body.cls-body) .rel-list li::before{ left:5.8px; top:7.4px; width:2.6px; height:2.6px; background:var(--pe-teal-dark); } :where(body.cls-body) .rel-list a{ font:500 12px/16px var(--pe-font); color:var(--pe-teal-dark); } /* ── 24/25. Other products / other tests accordions ─────────────────── */ :where(body.cls-body) .sec--tests,:where(body.cls-body) .sec--products{ padding:21px 16px 24px; } :where(body.cls-body) .sec--tests .sec-h2, :where(body.cls-body) .sec--products .sec-h2{ margin-bottom:14px; font:600 18px/24px var(--pe-font); } :where(body.cls-body) .acc-row{ border:0; border-radius:0; } :where(body.cls-body) .acc-row + .acc-row{ margin-top:0; border-top:1px solid var(--pe-border-light); } :where(body.cls-body) .acc-head{ height:52px; padding:0; font:500 14px/20px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .acc-row:first-child .acc-head{ color:var(--pe-text); } :where(body.cls-body) .acc-chev{ width:24px; height:24px; border-radius:50%; background:var(--pe-surface-sunken); } :where(body.cls-body) .acc-chev .faq-chev{ width:16px; height:16px; } :where(body.cls-body) .acc-body{ padding:0 0 12px; } :where(body.cls-body) .acc-body li{ margin-top:16px; padding-left:13px; position:relative; } :where(body.cls-body) .acc-body li::before{ content:""; position:absolute; left:0; top:9px; width:3px; height:3px; border-radius:50%; background:var(--pe-text-secondary); } /* ── 23. Mobile footer ──────────────────────────────────────────────── */ :where(body.cls-body) .m-footer{ display:block; } :where(body.cls-body) .m-footer__white{ background:var(--pe-white); padding:24px 16px 24px; } :where(body.cls-body) .m-footer__logo{ display:block; width:202px; height:40px; object-fit:cover; object-position:0 100%; } :where(body.cls-body) .m-footer__tag{ margin:13px 0 0; font:700 10px/14px var(--pe-font); color:var(--pe-teal); text-transform:uppercase; } :where(body.cls-body) .m-footer__head{ margin:12px 0 0; max-width:270px; font:700 20px/26px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .m-footer__badges{ display:flex; gap:14px; margin-top:26px; } :where(body.cls-body) .m-badge{ display:flex; align-items:center; } :where(body.cls-body) .m-badge .laurel{ width:14px; height:28px; } :where(body.cls-body) .m-badge .laurel:last-child{ transform:scaleX(-1); } :where(body.cls-body) .m-badge > span{ display:flex; flex-direction:column; align-items:center; padding:0 4px; text-align:center; } :where(body.cls-body) .m-badge b{ font:700 10px/14px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .m-badge > span{ font:500 10px/14px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .m-footer__svc{ display:flex; align-items:center; gap:12px; margin:36px 0 0; font:600 12px/16px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .m-footer__svc::before, :where(body.cls-body) .m-footer__svc::after{ content:""; height:1px; flex:1; background:var(--pe-border-light); } :where(body.cls-body) .m-footer__tiles{ display:flex; gap:16px; margin-top:28px; } :where(body.cls-body) .m-tile{ width:96px; height:96px; box-sizing:border-box; background:var(--pe-white); border:1px solid var(--pe-tile-border); border-radius:var(--pe-r-12); text-decoration:none; display:flex; flex-direction:column; align-items:center; padding-top:10px; gap:2px; } :where(body.cls-body) .m-tile span{ font:600 10px/14px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .m-footer__teal{ background:var(--pe-teal); padding:24px 16px 8px; } :where(body.cls-body) .m-footer__teal a{ display:flex; align-items:center; height:40px; margin-bottom:16px; border-bottom:1px solid #71A7B1; padding-bottom:16px; font:700 16px/20px var(--pe-font); color:var(--pe-white); text-decoration:none; } :where(body.cls-body) .m-footer__teal a:last-child{ border-bottom:0; } /* ── 8. Sticky Sort / Filter bar ────────────────────────────────────── */ :where(body.cls-body) .m-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60; height:48px; background:var(--pe-white); box-shadow:0 -2px 8px rgba(0,0,0,.12); display:flex; } :where(body.cls-body) .m-bar__btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:10px; background:none; border:0; cursor:pointer; font:400 12px/1 var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .m-bar__div{ width:1px; height:48px; flex:none; background:linear-gradient(180deg,rgba(199,213,237,0) 0%,#C7D5ED 50%,rgba(199,213,237,0) 100%); } /* ── 24. Filter bottom sheet ────────────────────────────────────────── */ :where(body.cls-body) .m-scrim{ display:block; position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.20); } :where(body.cls-body) .m-sheet{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:71; height:600px; } :where(body.cls-body) .m-scrim[hidden],:where(body.cls-body) .m-sheet[hidden]{ display:none; } :where(body.cls-body) .m-sheet__close{ position:absolute; left:50%; top:-56px; transform:translateX(-50%); width:32px; height:32px; padding:0; border:0; border-radius:50%; background:var(--pe-white); display:grid; place-items:center; cursor:pointer; } :where(body.cls-body) .m-sheet__panel{ height:100%; background:var(--pe-white); border-radius:12px 12px 0 0; display:flex; flex-direction:column; overflow:hidden; } :where(body.cls-body) .m-sheet__head{ height:48px; flex:none; display:flex; align-items:center; gap:9px; padding:0 20px; box-shadow:inset 0 -1.1px 0 #DFE3E6; } :where(body.cls-body) .m-sheet__title{ font:600 14px/1 var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .m-sheet__body{ flex:1; display:flex; min-height:0; } :where(body.cls-body) .sheet-rail{ width:122px; flex:none; list-style:none; margin:0; padding:0; background:var(--pe-surface-sunken); } :where(body.cls-body) .sheet-rail__item{ height:54px; display:flex; align-items:center; padding-left:16px; cursor:pointer; font:400 14px/1 var(--pe-font); color:var(--pe-sheet-ink); } :where(body.cls-body) .sheet-rail__item:focus{ outline:none; } :where(body.cls-body) .sheet-rail__item:focus-visible{ outline:2px solid var(--pe-teal); outline-offset:-2px; } :where(body.cls-body) .m-sheet__panel:focus{ outline:none; } :where(body.cls-body) .sheet-rail__item[aria-selected="true"]{ background:var(--pe-white); font-weight:700; border-radius:0 12px 12px 0; } :where(body.cls-body) .sheet-pane{ flex:1; min-width:0; overflow-y:auto; padding:15px 16px 16px 19px; } :where(body.cls-body) .sheet-search{ display:flex; align-items:center; gap:8px; height:42px; box-sizing:border-box; padding:0 12px; margin-bottom:14px; background:var(--pe-white); border:1px solid var(--pe-text-muted); border-radius:var(--pe-r-8); } :where(body.cls-body) .sheet-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:400 12px/1 var(--pe-font); color:var(--pe-sheet-ink); } :where(body.cls-body) .sheet-search input::placeholder{ color:var(--pe-text-muted); } :where(body.cls-body) .sheet-search svg{ flex:none; } :where(body.cls-body) .sheet-opts{ list-style:none; margin:0; padding:0; } :where(body.cls-body) .sheet-opt{ display:flex; align-items:center; gap:10px; cursor:pointer; } :where(body.cls-body) .sheet-opt + .sheet-opt{ margin-top:18px; } :where(body.cls-body) .sheet-opt__box{ flex:0 0 22px; width:22px; height:22px; box-sizing:border-box; border:2px solid var(--pe-text-muted); border-radius:4px; display:grid; place-items:center; color:transparent; } :where(body.cls-body) .sheet-opt__box svg{ margin:-2px 0 0 -2px; } :where(body.cls-body) .sheet-opt__radio{ flex:0 0 22px; width:22px; height:22px; box-sizing:border-box; border:2px solid var(--pe-text-muted); border-radius:50%; display:grid; place-items:center; } :where(body.cls-body) .sheet-opt[aria-checked="true"] .sheet-opt__box{ border-color:var(--pe-teal); color:var(--pe-teal); } :where(body.cls-body) .sheet-opt[aria-checked="true"] .sheet-opt__radio{ border-color:var(--pe-teal); } :where(body.cls-body) .sheet-opt[aria-checked="true"] .sheet-opt__radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--pe-teal); } :where(body.cls-body) .sheet-opt__label{ flex:1; padding-right:8px; font:400 12px/18px var(--pe-font); color:var(--pe-sheet-ink); } :where(body.cls-body) .sheet-opt__count{ min-width:20px; text-align:right; font:400 12px/18px var(--pe-font); color:var(--pe-text-muted); } :where(body.cls-body) .sheet-opt[aria-checked="true"] .sheet-opt__label{ font-weight:700; } :where(body.cls-body) .sheet-opt[aria-checked="true"] .sheet-opt__count{ color:var(--pe-sheet-ink); } :where(body.cls-body) .sheet-opt:focus-visible{ outline:2px solid var(--pe-teal); outline-offset:2px; } :where(body.cls-body) .m-sheet__foot{ flex:none; height:65px; display:flex; align-items:center; padding:0 16px 0 14px; border-top:1px solid #E0E2E4; } :where(body.cls-body) .m-sheet__clear{ background:none; border:0; padding:0; cursor:pointer; font:700 14px/1 var(--pe-font); color:var(--pe-teal); } :where(body.cls-body) .m-sheet__apply{ margin-left:auto; width:194px; height:45px; border:0; border-radius:var(--pe-r-8); background:var(--pe-teal); font:700 16px/1 var(--pe-font); color:var(--pe-white); cursor:pointer; } } /* ========================================================================== 21. CART CHROME — ported from v1 (medicines-by-class/assets/styles.css, the .cart-banner / .qty-sheet / .cart-drawer families), restyled with v2 tokens so it sits inside this page rather than beside it. Behaviour: assets/class.js §6. ========================================================================== */ :where(body.cls-body) .cart-banner{ position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:120; max-width:calc(100vw - 32px); padding:12px 18px; box-sizing:border-box; background:var(--pe-text); color:var(--pe-white); border-radius:var(--pe-r-8); box-shadow:0 8px 28px rgba(0,0,0,.22); font:500 14px/20px var(--pe-font); } :where(body.cls-body) .cart-banner[hidden]{ display:none; } :where(body.cls-body) .cart-scrim{ position:fixed; inset:0; z-index:100; background:rgba(19,24,28,.44); } :where(body.cls-body) .cart-scrim[hidden]{ display:none; } /* ── quantity picker (0-20), anchored under the button by class.js ────── */ :where(body.cls-body) .qty-sheet{ position:fixed; z-index:130; width:196px; box-sizing:border-box; background:var(--pe-white); border-radius:var(--pe-r-12); box-shadow:0 12px 32px rgba(19,24,28,.18), 0 0 0 1px var(--pe-border-light); overflow:hidden; } :where(body.cls-body) .qty-sheet[hidden]{ display:none; } :where(body.cls-body) .qs-hd{ padding:12px 16px; border-bottom:1px solid var(--pe-border-light); font:600 14px/20px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .qs-list{ max-height:264px; overflow-y:auto; padding:4px 0; } :where(body.cls-body) .qs-opt{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:40px; padding:0 16px; box-sizing:border-box; background:none; border:0; cursor:pointer; text-align:left; font:500 14px/40px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .qs-opt:hover{ background:var(--pe-surface); } :where(body.cls-body) .qs-opt.on{ background:var(--pe-green-bg); color:var(--pe-teal-dark); font-weight:700; } :where(body.cls-body) .qs-rm{ color:var(--pe-red, #D64545); font-weight:600; } :where(body.cls-body) .qs-max{ font:400 11px/1 var(--pe-font); color:var(--pe-text-muted); font-style:normal; } /* ── cart drawer ──────────────────────────────────────────────────────── */ :where(body.cls-body) .cart-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:110; width:min(400px,100vw); box-sizing:border-box; display:flex; flex-direction:column; background:var(--pe-white); box-shadow:-8px 0 32px rgba(19,24,28,.18); } :where(body.cls-body) .cart-drawer[hidden]{ display:none; } :where(body.cls-body) .cd-hd{ flex:none; display:flex; align-items:center; gap:8px; height:64px; padding:0 16px 0 20px; border-bottom:1px solid var(--pe-border-light); font:700 18px/24px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .cd-x{ margin-left:auto; display:grid; place-items:center; width:36px; height:36px; padding:0; background:none; border:0; border-radius:50%; cursor:pointer; color:var(--pe-text-secondary); } :where(body.cls-body) .cd-x:hover{ background:var(--pe-surface); } :where(body.cls-body) .cd-body{ flex:1 1 auto; overflow-y:auto; padding:8px 20px; } :where(body.cls-body) .cd-empty{ margin:32px 0; text-align:center; font:400 14px/20px var(--pe-font); color:var(--pe-text-tertiary); } :where(body.cls-body) .cd-row{ display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--pe-border-light); } :where(body.cls-body) .cd-info{ flex:1 1 auto; min-width:0; } :where(body.cls-body) .cd-info a{ display:block; font:600 14px/20px var(--pe-font); color:var(--pe-text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } :where(body.cls-body) .cd-info a:hover{ color:var(--pe-teal); } :where(body.cls-body) .cd-info span{ display:block; margin-top:2px; font:400 12px/16px var(--pe-font); color:var(--pe-text-muted); } :where(body.cls-body) .cd-info b{ display:block; margin-top:4px; font:600 14px/20px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .cd-qty{ flex:none; display:flex; align-items:center; border:1px solid var(--pe-border-light); border-radius:var(--pe-r-8); } :where(body.cls-body) .cd-qty button{ width:30px; height:30px; padding:0; background:none; border:0; cursor:pointer; font:600 16px/1 var(--pe-font); color:var(--pe-teal-dark); } :where(body.cls-body) .cd-qty button[disabled]{ color:var(--pe-border-disabled); cursor:default; } :where(body.cls-body) .cd-qty span{ min-width:22px; text-align:center; font:600 14px/1 var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .cd-del{ flex:none; display:grid; place-items:center; width:30px; height:30px; padding:0; background:none; border:0; cursor:pointer; color:var(--pe-text-muted); } :where(body.cls-body) .cd-del:hover{ color:#D64545; } :where(body.cls-body) .cd-foot{ flex:none; padding:16px 20px 20px; border-top:1px solid var(--pe-border-light); } :where(body.cls-body) .cd-total{ display:flex; align-items:baseline; justify-content:space-between; font:500 14px/20px var(--pe-font); color:var(--pe-text-secondary); } :where(body.cls-body) .cd-total b{ font:700 20px/28px var(--pe-font); color:var(--pe-text); } :where(body.cls-body) .cd-go{ width:100%; height:48px; margin-top:12px; border:0; border-radius:var(--pe-r-12); background:var(--pe-teal-dark); color:var(--pe-white); font:700 16px/1 var(--pe-font); cursor:pointer; } :where(body.cls-body) .cd-go:hover{ background:#0C6660; } :where(body.cls-body) .cd-go[disabled]{ background:var(--pe-border-disabled); cursor:default; } :where(body.cls-body) .cd-note{ margin:10px 0 0; font:400 12px/16px var(--pe-font); color:var(--pe-text-muted); } @media (max-width:767px){ :where(body.cls-body) .cart-drawer{ width:100vw; } :where(body.cls-body) .qty-sheet{ width:calc(100vw - 32px); max-width:280px; } /* the sticky Sort/Filter bar must not sit over the drawer */ :where(body.cls-body) .cart-drawer, :where(body.cls-body) .cart-scrim, :where(body.cls-body) .qty-sheet, :where(body.cls-body) .cart-banner{ z-index:200; } } /* ========================================================================== 22. Reduced motion / print niceties ========================================================================== */ @media print{ :where(body.cls-body) .m-bar,:where(body.cls-body) .m-sheet,:where(body.cls-body) .m-scrim, :where(body.cls-body) .cart-drawer,:where(body.cls-body) .cart-scrim,:where(body.cls-body) .qty-sheet,:where(body.cls-body) .cart-banner, :where(body.cls-body) .loadmore__btn{ display:none !important; } :where(body.cls-body) .pl-row.is-hidden{ display:flex !important; } /* print the whole list */ } /* ========================================================================== 6. CHANGE LIST -------------------------------------------------------------------------- The only rules in this file that are not v2's. Kept together at the end, after both page blocks, so each one is a plain override rather than an edit buried in a stylesheet that has to stay re-mergeable. Also on the change list but handled in app.js, because they are state rather than style: CHANGE 1 Lab tests at PharmEasy — every accordion closed on load CHANGE 3a class page — every filter accordion open on load CHANGE 7 directory search — v1's related-word matching CHANGE 12 Quick Links — highlight the section in view ========================================================================== */ /* -------------------------------------------------------------------------- CHANGE 3b — the class page's RIGHT rail is sticky too. The left rail already is (see section 5, "Sticky left rail"); this mirrors that rule exactly — same 24px offset, same max-height, same thin scrollbar — so the two columns travel together instead of one pinning and one scrolling away. `.cls-grid` is `align-items:start`, so the column box is only as tall as its content and sticky has somewhere to travel. Below 768px the right column is `display:contents` and must stay in flow. -------------------------------------------------------------------------- */ @media (min-width: 768px) { body.cls-body .cls-col--right { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; } body.cls-body .cls-col--right::-webkit-scrollbar { width: 6px; } body.cls-body .cls-col--right::-webkit-scrollbar-thumb { background: var(--pe-border-light); border-radius: 3px; } } /* -------------------------------------------------------------------------- CHANGE 9 — the Rx glyph that replaces the star rating on a product row. Star ratings are gone (the markup keeps them behind LAUNCH-HIDDEN), and an Rx mark goes in the slot they used to hold: `.pl-rating`, top-right of the row on desktop and the top-left corner ribbon on mobile. Two placements are supported so the glyph lands in the same spot whether the markup keeps the `.pl-rating` wrapper or drops the svg straight onto the row: inside a wrapper the wrapper positions it, bare on the row these rules do, reusing `.pl-rating`'s own coordinates rather than inventing new ones. Teal, because that is the colour v1 gave its ℞ mark (`.badge-rx.is-rx`) and the design has no colour of its own for a glyph it never drew. -------------------------------------------------------------------------- */ body.cls-body .rx-ico { display: block; flex: none; width: 16px; height: 16px; color: var(--pe-teal); } /* bare on the row — stand in for .pl-rating's own box */ body.cls-body .pl-row > .rx-ico { position: absolute; top: 24px; right: 24px; } @media (max-width: 767px) { body.cls-body .pl-row > .rx-ico { top: 8px; left: 8px; right: auto; } } /* V1 tokens the restored footer still references. They lived in V1's tokens.css, which the port replaced with V2's, so every rule using them was resolving to nothing — the footer lost its background. */ :root { --footer-bg: #edf2f9; --footer-line: #e6ebf4; --ink: #30363c; --r-md: 100px; } /* ============================================================ Footer — V1's, restored with its media queries intact. The port sent the footer markup (.ft*) to one agent and the stylesheets to another, so V1's markup shipped with V2's (.ftr*) rules and matched nothing. ============================================================ /* ========================================================================== FOOTER ========================================================================== */ .ft { background: var(--footer-bg); padding: 44px 40px 24px; } .ft-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 1.15fr 0.8fr; gap: 32px; } .ft-group + .ft-group { margin-top: 28px; } .ft-title { display: flex; } .ft-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; padding: 0; font-family: inherit; font-size: 17px; font-weight: 700; color: var(--fg-1); text-align: left; cursor: default; } .ft-chev { display: none; } .ft-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ft-list a { font-size: 14px; color: var(--fg-2); } .ft-list a:hover { color: var(--teal-700); } .ft-social { display: flex; align-items: center; gap: 18px; margin-top: 16px; } .ft-social a { color: var(--ink); display: flex; } .ft-pay { max-width: 1360px; margin: 40px auto 0; } .ft-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; flex-wrap: wrap; } .ft-pay-brands { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .ft-pay-brands span { font-size: 15px; font-weight: 700; } .ft-copy { font-size: 15px; color: var(--fg-2); } /* ========================================================================== BACK TO TOP ========================================================================== */ .totop { position: fixed; right: 16px; bottom: 20px; z-index: 55; height: 44px; padding: 0 18px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--sh-md); font-size: 13px; font-weight: 700; color: var(--fg-1); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 180ms; } .totop.on { opacity: 1; visibility: visible; transform: none; } /* payment partner logos */ .ft-pay-brands { gap: 10px 14px; } .pay-ico { display: inline-flex; align-items: center; justify-content: center; height: 30px; background: #fff; border-radius: 4px; padding: 2px 4px; } .pay-ico img { display: block; height: 30px; width: 50px; object-fit: contain; } /* Back to top: icon only, same corner radius as the cards' buttons */ .totop { gap: 0; padding: 0; width: 44px; height: 44px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .totop svg { margin: 0; display: block; } @media (max-width: 767px) { /* ---- footer becomes an accordion ---- */ .ft { padding: 20px 16px 24px; } .ft-grid { display: block; } .ft-col { display: contents; } .ft-group { border-bottom: 1px solid var(--footer-line); } .ft-group + .ft-group { margin-top: 0; } .ft-toggle { min-height: 48px; font-size: 14px; cursor: pointer; } .ft-chev { display: flex; color: var(--fg-1); transition: transform 180ms ease-out; } .ft-toggle[aria-expanded="true"] .ft-chev { transform: rotate(180deg); } .ft-list { margin: 0; padding: 0 0 14px; } .ft-list a { font-size: 13px; } .ft-social-title { font-size: 14px; margin-top: 20px; } .ft-social { gap: 14px; margin-top: 10px; } /* The icons ship as now, not inline , and carry width/height="26" attributes. A CSS width/height beats the presentational attributes, so both forms are matched here — the svg half keeps working if any icon is ever inlined again. */ .ft-social svg, .ft-social .ft-social-ico { width: 20px; height: 20px; } .ft-pay { margin-top: 20px; } .ft-pay > div:first-child { font-size: 14px; } .ft-pay-row { margin-top: 10px; } .ft-pay-brands { gap: 10px 16px; } .ft-pay-brands span { font-size: 12px; } .ft-copy { font-size: 12px; margin-top: 8px; } /* clear the fixed bar */ .totop { bottom: 66px; } } /* Download App banner (change-list item 13) — present in both header rows but unstyled, so it wrapped on desktop and overflowed the 56px mobile row. */ .dl-app { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 14px; border: 1px solid var(--pe-border, #d7dfe5); border-radius: 8px; background: #fff; color: var(--pe-text, #30363c); text-decoration: none; white-space: nowrap; } .dl-app:hover { border-color: var(--pe-teal, #10847e); text-decoration: none; } .dl-app svg { flex: none; width: 20px; height: 20px; } .dl-app span { display: flex; flex-direction: column; line-height: 1; font-size: 12px; font-weight: 500; } .dl-app span b { font-size: 12px; font-weight: 600; color: var(--pe-teal, #10847e); margin-top: 2px; } @media (max-width: 767px) { .dl-app { height: 34px; padding: 0 8px; gap: 5px; border-radius: 6px; } .dl-app svg { width: 16px; height: 16px; } .dl-app span { font-size: 10px; } .dl-app span b { font-size: 10px; margin-top: 1px; } } /* ========================================================================== ROUND 21 — sticky header · no visible scrollbars · phone header weight · the Rx marks -------------------------------------------------------------------------- Additive, and last in the file on purpose: most of what it supersedes are themselves late overrides (the `position:static` header, the rails' capped overflow), so source order settles them without specificity games. ========================================================================== */ /* -------------------------------------------------------------------------- 21.1 STICKY SITE HEADER — desktop .hdr / .hdr-top / .hdr-bar, phone .mhdr -------------------------------------------------------------------------- The sticking is done by
rather than by .hdr alone, and that is not a shortcut: .hdr and .mhdr are the header's only children and exactly one of them is ever displayed, so the header's content box is precisely as tall as the sticky box inside it — zero travel, and a `position:sticky` .hdr would scroll away like a static one. Sticking the parent, whose own parent is
, gives the travel; .hdr / .mhdr stay sticky at top:0 too so each box is pinned on its own terms as well. -------------------------------------------------------------------------- */ :root { /* measured: .hdr-top 64 + .hdr-bar 41 (nav 40 + its 1px rule) + the 1px the header now draws under itself = 106 */ --hdr-h: 106px; } @media (max-width: 767px) { :root { --hdr-h: 56px; } /* the phone header is one .mhdr-row */ } header.pe-site-header { position: sticky; top: 0; /* Above the page (the highest thing in flow is .m-header's 40, and the directory .hdr's own 20) and below every overlay, so nothing the shopper opens can end up behind it: .m-bar 60 · .m-scrim 70 · .m-sheet 71 · .cart-scrim 100 · .cart-drawer 110 · .cart-banner 120 · .qty-sheet 130 (and 200 for the cart family below 768px). */ z-index: 50; background: var(--surface); } .pe-site-header .hdr, .pe-site-header .mhdr { position: sticky; top: 0; } .pe-site-header .hdr { border-bottom: 1px solid var(--line); box-shadow: none; } .pe-site-header .mhdr { border-bottom: 0; box-shadow: var(--sh-sm); } /* in-page anchors (#filters, #med-list) must not land under the header */ html { scroll-padding-top: calc(var(--hdr-h) + 16px); } /* The sticky rails start below the header instead of behind it. */ body.cls-body .cls-col--left, body.cls-body .cls-col--right, body:not(.cls-body) .rail { top: calc(var(--hdr-h) + 24px); } /* The hamburger panel lives inside the now-pinned .mhdr. On a short phone (or in landscape) it is taller than the viewport, and a pinned header would strand its lower half off-screen with no way to reach it, so the panel itself scrolls. Its bar is hidden by the sweep in 21.2. */ @media (max-width: 767px) { .pe-site-header .mhdr-menu { max-height: calc(100vh - var(--hdr-h)); max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; } } /* -------------------------------------------------------------------------- 21.2 NO VISIBLE SCROLLBAR ANYWHERE BUT THE DOCUMENT -------------------------------------------------------------------------- The rails were capped at `calc(100vh - 48px)` and made `overflow-y:auto` with a thin bar so a rail taller than the viewport stayed reachable. With the header pinned there is no reason to strand them: they now size to their content and ride the page, which is both scrollbar-free and less to explain. Second half of the fix is the sweep — every remaining scroll box on the page keeps scrolling (wheel, trackpad, touch, keys) and loses only its bar. / are deliberately not matched, so the one scrollbar the page does show is the document's own. -------------------------------------------------------------------------- */ body.cls-body .cls-col--left, body.cls-body .cls-col--right, body:not(.cls-body) .rail { max-height: none; overflow: visible; overscroll-behavior: auto; scrollbar-width: none; /* the `thin` that came with the cap is now inert, but it should not read as if a bar were still being styled here — and if a later rule ever restores the overflow, it still will not paint one */ } body.cls-body .cls-col--left::-webkit-scrollbar, body.cls-body .cls-col--right::-webkit-scrollbar, body:not(.cls-body) .rail::-webkit-scrollbar { width: 0; height: 0; } body * { scrollbar-width: none; -ms-overflow-style: none; } body *::-webkit-scrollbar { display: none; width: 0; height: 0; } /* -------------------------------------------------------------------------- 21.3 THE PER-ROW Rx GLYPH IS DESKTOP-ONLY -------------------------------------------------------------------------- On a phone the row is already a 3-line block with a corner ribbon fighting the product shot for the same 8px of corner; the prescription flag is carried by the PDP and by the H1 mark instead. Covers both markups — the `.pl-rating` wrapper and the bare svg on the row. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.cls-body .pl-row .pl-rating, body.cls-body .pl-row > .rx-ico { display: none; } } /* -------------------------------------------------------------------------- 21.4 FOOTER ACCORDION STARTS CLOSED ON A PHONE -------------------------------------------------------------------------- Five columns and 36 links is roughly four screenfuls between the last section and the copyright. Below 768px a column's list shows only while its own toggle reads aria-expanded="true" (the build ships "false", so the footer loads collapsed); `[hidden]` is honoured as well, because .ft-list sets `display:flex` and would otherwise out-specify the UA's `[hidden]{display:none}` if a script ever drives the panel that way. Desktop is explicitly unconditional — every list is open, whatever the attributes say. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .ft-group > .ft-list { display: none; } .ft-group > .ft-title:has(.ft-toggle[aria-expanded="true"]) + .ft-list { display: flex; } .ft-list[hidden] { display: none; } } @media (min-width: 768px) { .ft-list, .ft-list[hidden] { display: flex; } } /* -------------------------------------------------------------------------- 21.5 PHONE HEADER — one row of comparable weight -------------------------------------------------------------------------- The logo (26px tall, 95 wide) and the burger (a 24px glyph in a 30px box) read as small print beside the 34px Download App pill — and the five items already overran 360px by ~20px before anything grew. The width had to come from somewhere, so it comes from the chrome, not the type: the row's gaps drop 8 -> 4, its padding 14/12 -> 6/4 (the icon buttons' own 8-10px inner inset keeps the optical gutter), the pill loses 3px of padding a side, and the two right-hand icon buttons settle at a common 40px width. That buys the burger a 40px box around a 27px glyph and the logo a 29px cap height (106 wide) with room to spare at 360. The logo is the one shrinkable item, so phones narrower than 360 give way there instead of overflowing the row. Everything is 44px tall or in a 44px tall box, inside an unchanged 56px row, all vertically centred. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .pe-site-header .mhdr-row { height: 56px; padding: 0 4px 0 6px; gap: 4px; align-items: center; } .pe-site-header .mhdr-btn { flex: none; } .pe-site-header .mhdr-burger { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .pe-site-header .mhdr-burger svg { width: 27px; height: 27px; } .pe-site-header .mhdr-logo { flex: 0 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: flex-start; } .pe-site-header .mhdr-logo svg, .pe-site-header .mhdr-logo img { display: block; height: 29px; width: auto; max-width: 100%; } .pe-site-header .mhdr-search-btn { width: 40px; height: 44px; margin-left: auto; display: flex; align-items: center; justify-content: center; } .pe-site-header .mhdr-search-btn svg { width: 22px; height: 22px; } .pe-site-header .mhdr-cart { width: 40px; height: 44px; margin-left: 0; margin-right: 0; display: flex; align-items: center; justify-content: center; } .pe-site-header .mhdr-cart .cart-count { top: 3px; right: 2px; } .dl-app { height: 34px; padding: 0 5px; gap: 4px; } .dl-app svg { width: 17px; height: 17px; } } /* -------------------------------------------------------------------------- 21.6 THE Rx MARK BESIDE THE H1, AND ITS NOTE -------------------------------------------------------------------------- A teal chip on the class H1 that explains itself on tap rather than spending a whole chip on "Prescription required". The note is `position:fixed`, not absolute. Anchored to the button it ran off whichever screen edge the H1 happened to sit near — the exact bug v1 hit and fixed the same way: fixed, then clamped to the viewport (the script sets left/top from the button's rect; `max-width:calc(100vw - 24px)` is the half of that clamp CSS can do on its own, so the note cannot leave the viewport sideways even if the script never runs). `position:relative` on the chip is safe here — relative does not make a containing block for a fixed child, and no transform / filter / backdrop-filter is set on the chip or on anything between it and , which would. -------------------------------------------------------------------------- */ body.cls-body .h1-rx { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; position: relative; flex: none; width: 30px; height: 30px; margin-left: 10px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: var(--pe-teal); color: var(--pe-white); transition: background var(--pe-dur, .14s) var(--pe-ease, ease); } body.cls-body .h1-rx:hover { background: var(--pe-teal-dark); } body.cls-body .h1-rx:focus-visible { outline: 2px solid var(--pe-teal); outline-offset: 2px; } body.cls-body .h1-rx .rx-ico { width: 20px; height: 20px; color: currentColor; } body.cls-body .rx-note { position: fixed; z-index: 90; /* over the pinned header (50), under the cart layers (100+) */ left: 12px; top: 12px; /* the script overwrites both on open; these only ever show if it does not */ width: 260px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 10px 13px; border-radius: 8px; background: var(--pe-text); color: var(--pe-white); font: 400 13px/18px var(--pe-font); text-align: left; white-space: normal; box-shadow: 0 8px 28px rgba(19,24,28,.22); opacity: 0; visibility: hidden; transform: translateY(-4px); /* visibility flips instantly on open and only lags on close, so the note is measurable and readable the moment it appears */ transition: opacity .14s, transform .14s, visibility 0s linear .14s; } body.cls-body .h1-rx[aria-expanded="true"] .rx-note { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .14s, transform .14s, visibility 0s; } @media (max-width: 767px) { body.cls-body .h1-rx { width: 26px; height: 26px; margin-left: 8px; border-radius: 7px; } body.cls-body .h1-rx .rx-ico { width: 17px; height: 17px; } body.cls-body .rx-note { width: 240px; font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { body.cls-body .h1-rx, body.cls-body .rx-note { transition: none; } } /* ============================================================ Product rows link to their PDP (round 22) The row already carried data-href for the cart payload, but nothing in it was an anchor, so the listings were dead ends. The name is the real link; the pack shot repeats it and is hidden from assistive tech so it is not announced twice. ============================================================ */ :where(body.cls-body) .pl-name a { color: inherit; text-decoration: none; } :where(body.cls-body) .pl-name a:hover, :where(body.cls-body) .pl-name a:focus-visible { color: var(--pe-teal); text-decoration: underline; } :where(body.cls-body) a.pl-shot { display: block; } :where(body.cls-body) a.pl-shot:hover { text-decoration: none; }