/*
* PrimeCheck storefront skin.
*
* Ported once from the approved homepage mockup
* (docs/superpowers/specs/assets/primecheck/homepage-mockup.html) so every page and component only
* consumes classes from here. The colour tokens (--pc-*) come from theme.ts.
*
* Loading: this file is the source of truth and is served as-is from public/ (it is NOT bundled).
* components/shell.tsx, which only renders on PrimeCheck storefronts, adds
* ``;
* React 19 hoists it into , dedupes it and holds the page's paint until it has loaded, so other
* storefronts never download it. The href is content-versioned (`?v=` = first 10 hex of its sha256,
* PRIMECHECK_CSS_VERSION from next.config.ts) because public/sw.js serves styles cache-first and never
* revalidates: every edit here gets a new URL after the next build. Because it skips PostCSS, write any vendor prefixes by hand
* (e.g. -webkit-user-select, -webkit-backdrop-filter, -webkit-mask-*) and keep it free of @import
* and relative url()s (inline SVG data: URIs are fine).
*
* Naming (mechanical, so mockup markup ports 1:1):
* - Every mockup class `x` is `pc-x` here: `.btn.red` → `.pc-btn.pc-red`, `.pcard .ph img` →
* `.pc-pcard .pc-ph img`, `.svc-ctrl .thumb` → `.pc-svc-ctrl .pc-thumb`. Variants are prefixed
* too (`pc-red`, `pc-white`, `pc-team`, `pc-low`, `pc-out`, `pc-g1`…).
* - Only JS-toggled state classes stay bare, and only compounded with a pc- class:
* on, in, live, show, is-active, flip, hide, enter, scrolled, sweep, run, paused, saved.
* - Mockup element selectors became classes: `header` → `.pc-header`, `footer` → `.pc-footer`,
* `section` → `.pc-section` (the hero is `.pc-section.pc-hero` with margin-top 0), `h1` → `.pc-h1`,
* `h2` → `.pc-h2`. Element selectors only appear scoped under a pc- class.
* - Local custom properties are prefixed too: `--c` → `--pc-c` (per-service accent, set inline),
* `--gap`/`--per` → `--pc-gap`/`--pc-per`, `--jp` → `--pc-jp`, `--bleed` → `--pc-bleed`.
* - Keyframes are prefixed `pc-`.
* - The mockup page has `line-height: normal` (no Tailwind preflight). `.pc-skin` restores that for a
* ported page root; `.pc-section`, `.pc-pcard` and the chrome set it themselves.
* - `.pc-reveal` is hidden only while `[data-reveal="hidden"]` (set by components/reveal.tsx after
* mount for off-screen content), so nothing is hidden without JS. `.pc-clip` keeps the mockup's
* inset until `.in` is added.
*
* Depth: no drop shadows. box-shadow is only used for inset hairlines, zero-blur separator rings and
* focus rings (the mockup's two blurred shadows on the trust bar and map card became hairlines).
*/
/* ───── Base ───── */
.pc-root { font-family: var(--pc-font); background: var(--pc-bg); color: var(--pc-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; }
.pc-root ::selection { background: var(--pc-tint-2); color: var(--pc-ink); }
.pc-main { flex: 1; min-width: 0; }
.pc-main:focus { outline: none; }
.pc-skin { line-height: normal; }
.pc-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.pc-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pc-noscroll { scrollbar-width: none; } .pc-noscroll::-webkit-scrollbar { display: none; }
.pc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pc-skip { position: absolute; left: -9999px; top: 12px; z-index: 60; height: 44px; padding: 0 20px; border-radius: 99px; display: inline-flex; align-items: center; background: var(--pc-primary); color: #fff; font-weight: 700; font-size: 14px; }
.pc-skip:focus { left: 16px; position: fixed; }
/* Focus rings for the skin's own markup (default storefront pages inside the shell keep theirs). */
:where(.pc-strip, .pc-header, .pc-footer, .pc-skin, .pc-section, .pc-pcard, .pc-menu, .pc-pop, .pc-dd, .pc-favs) :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; }
/* ───── Announcement strip ───── */
.pc-strip { background: var(--pc-deep); color: var(--pc-on-deep); font-size: 12.5px; line-height: normal; }
.pc-strip .pc-wrap { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pc-strip p { display: flex; gap: 8px; align-items: center; opacity: .85; min-width: 0; }
.pc-strip p span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pc-strip nav { display: flex; gap: 20px; opacity: .78; flex: none; white-space: nowrap; }
.pc-strip nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
/* ───── Header ───── */
.pc-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--pc-line); line-height: normal; color: var(--pc-ink); }
.pc-hdr-fallback { height: 170px; background: #fff; border-bottom: 1px solid var(--pc-line); }
.pc-row1 { height: 76px; display: flex; align-items: center; gap: 16px; }
.pc-logo { flex: none; display: flex; align-items: center; min-width: 0; border-radius: 12px; }
.pc-logo img { height: 44px; width: auto; max-width: 200px; object-fit: contain; }
.pc-wordmark { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.pc-menu-btn { display: none; width: 40px; height: 40px; border-radius: 50%; place-items: center; flex: none; margin-left: -8px; cursor: pointer; color: var(--pc-ink); }
.pc-menu-btn:hover { background: var(--pc-surface-2); }
.pc-visit { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 99px; flex: none; cursor: pointer; text-align: left; color: var(--pc-ink); }
.pc-visit:hover, .pc-visit[data-state="open"] { background: var(--pc-surface-2); }
.pc-visit .pc-pin { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); box-shadow: inset 0 0 0 1px var(--pc-tint-line); flex: none; }
.pc-visit small { display: block; font-size: 11px; color: var(--pc-ink-3); }
.pc-visit b { font-size: 13.5px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pc-visit b svg { color: var(--pc-ink-3); transition: transform .3s var(--pc-ease); }
.pc-visit[data-state="open"] b svg { transform: rotate(180deg); }
.pc-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; border-radius: 99px; background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-field-line); padding: 0 5px 0 16px; margin: 0 12px; color: var(--pc-ink-3); font-size: 14px; transition: box-shadow .25s var(--pc-ease); }
.pc-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--pc-primary), 0 0 0 3px var(--pc-tint-2); }
.pc-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--pc-ink); font: inherit; outline: none; -webkit-appearance: none; appearance: none; }
.pc-search input::placeholder { color: var(--pc-ink-3); opacity: 1; }
.pc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pc-search input:focus-visible { outline: none; }
.pc-search .pc-go { background: var(--pc-primary); color: #fff; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 99px; cursor: pointer; flex: none; transition: background .3s; }
.pc-search .pc-go:hover { background: var(--pc-primary-hover); }
.pc-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.pc-ibtn { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; padding-right: 10px; border-radius: 99px; position: relative; cursor: pointer; color: var(--pc-ink); }
.pc-ibtn i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background .25s; }
.pc-ibtn:hover i, .pc-ibtn[data-state="open"] i { background: var(--pc-surface-2); }
.pc-ibtn .pc-acct-lbl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pc-ibtn .pc-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-primary); color: #fff; font-size: 13px; font-weight: 800; font-style: normal; }
.pc-badge { position: absolute; left: 24px; top: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--pc-primary); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.pc-book { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 99px; background: var(--pc-cta); color: #fff; font-weight: 700; font-size: 13.5px; margin-left: 6px; white-space: nowrap; flex: none; transition: background .3s; }
.pc-book:hover { background: var(--pc-cta-hover); }
.pc-book .pc-book-short { display: none; }
.pc-row2 { border-top: 1px solid var(--pc-line); }
.pc-row2 .pc-wrap { height: 56px; display: flex; align-items: center; gap: 12px; }
.pc-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: none; }
.pc-pill.pc-primary { background: var(--pc-primary); color: #fff; }
.pc-pill.pc-tint { background: var(--pc-tint); color: var(--pc-primary); box-shadow: inset 0 0 0 1px var(--pc-tint-line); }
.pc-pill.pc-team { height: 42px; padding: 0 16px 0 5px; gap: 10px; background: #fff; color: var(--pc-ink); font-weight: 800; font-size: 14px; letter-spacing: -.01em; box-shadow: inset 0 0 0 1.5px var(--pc-ink); transition: background .35s var(--pc-ease), color .35s var(--pc-ease); }
.pc-pill.pc-team:hover { background: var(--pc-ink); color: #fff; }
.pc-pill.pc-team .pc-faces { display: flex; }
.pc-pill.pc-team .pc-faces img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; background: var(--pc-surface-3); }
.pc-pill.pc-team .pc-faces img + img { margin-left: -9px; }
.pc-pill.pc-shop { height: 42px; padding: 0 20px 0 16px; font-weight: 700; font-size: 14px; transition: background .3s var(--pc-ease); }
.pc-pill.pc-shop:hover { background: var(--pc-primary-hover); }
.pc-chips { position: relative; display: flex; gap: 2px; overflow-x: auto; flex: 1; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.pc-chips.scrolled { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent); }
.pc-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 99px; font-size: 13.5px; font-weight: 500; color: var(--pc-ink-2); white-space: nowrap; transition: .3s var(--pc-ease); }
.pc-chip:hover { background: var(--pc-tint); color: var(--pc-primary); }
/* Scroll-linked highlight: a pill slides (with a little overshoot) to the service in view and takes its colour. */
.pc-chip { position: relative; z-index: 1; flex: none; }
.pc-chip.live, .pc-chip.live:hover { color: #fff; background: transparent; font-weight: 700; }
.pc-chip.live svg { animation: pc-chip-pop .75s cubic-bezier(.34,1.56,.64,1); }
@keyframes pc-chip-pop { 0% { transform: scale(.5) rotate(-25deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: none; } }
.pc-chip .pc-n { display: none; }
.pc-chip.live .pc-n { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 99px; background: rgba(0,0,0,.24); font-size: 10.5px; font-weight: 800; animation: pc-n-in .5s var(--pc-ease) .15s both; }
@keyframes pc-n-in { from { opacity: 0; transform: translateX(-6px) scale(.8); } }
.pc-chip-ind { position: absolute; z-index: 0; left: 0; top: 50%; height: 40px; margin-top: -20px; width: 0; border-radius: 99px; background-color: var(--pc-primary); opacity: 0; pointer-events: none; overflow: hidden;
transition: transform .7s cubic-bezier(.34,1.56,.64,1), width .7s cubic-bezier(.34,1.56,.64,1), background-color .5s var(--pc-ease), opacity .35s var(--pc-ease); }
.pc-chip-ind.show { opacity: 1; }
.pc-chip-ind.sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); background-size: 250% 100%; animation: pc-sheen 1s var(--pc-ease) both; }
@keyframes pc-sheen { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.pc-hdr-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform-origin: left; transform: scaleX(0); background-color: var(--pc-primary); opacity: 0; pointer-events: none; transition: transform .25s linear, background-color .5s var(--pc-ease), opacity .4s var(--pc-ease); }
.pc-hdr-prog.show { opacity: 1; }
/* ───── Header popovers, menus and sheets (portalled: they sit outside .pc-root) ───── */
.pc-pop, .pc-dd, .pc-menu, .pc-favs { font-family: var(--pc-font); color: var(--pc-ink); line-height: normal; -webkit-font-smoothing: antialiased; }
.pc-pop small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-cta); }
.pc-pop b { display: block; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; margin-top: 6px; }
.pc-pop p { font-size: 13.5px; line-height: 1.5; color: var(--pc-ink-2); margin-top: 4px; }
.pc-pop .pc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pc-pop .pc-acts a { height: 38px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; transition: background .3s, box-shadow .3s; }
.pc-pop .pc-acts .pc-dir { background: var(--pc-primary); color: #fff; }
.pc-pop .pc-acts .pc-dir:hover { background: var(--pc-primary-hover); }
.pc-pop .pc-acts .pc-bk { box-shadow: inset 0 0 0 1px var(--pc-line-strong); color: var(--pc-ink); }
.pc-pop .pc-acts .pc-bk:hover { box-shadow: inset 0 0 0 1.5px var(--pc-ink); }
.pc-dd .pc-dd-head { padding: 8px 12px 10px; }
.pc-dd .pc-dd-head small { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-dd .pc-dd-head b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-dd .pc-dd-head span { display: block; font-size: 12px; color: var(--pc-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-dd .pc-dd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; outline: none; }
.pc-dd .pc-dd-item[data-highlighted] { background: var(--pc-surface-2); }
.pc-dd .pc-dd-item.pc-danger { color: var(--pc-cta); }
.pc-dd .pc-dd-sep { height: 1px; margin: 4px 6px; background: var(--pc-line); }
/* Mobile menu sheet */
.pc-menu-in { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.pc-menu-top { display: flex; align-items: center; min-height: 76px; padding: 12px 56px 12px 20px; border-bottom: 1px solid var(--pc-line); }
.pc-menu-top .pc-logo img { height: 40px; }
.pc-menu .pc-search { margin: 16px 16px 4px; flex: none; }
.pc-menu-nav { display: grid; gap: 2px; padding: 10px 10px 4px; }
.pc-menu-nav a, .pc-menu-nav button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 16px; font-size: 15.5px; font-weight: 600; color: var(--pc-ink); text-align: left; cursor: pointer; }
.pc-menu-nav a:hover, .pc-menu-nav button:hover { background: var(--pc-surface-2); }
.pc-menu-nav a i, .pc-menu-nav button i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); flex: none; }
.pc-menu-nav .pc-menu-book { background: var(--pc-cta); color: #fff; margin: 4px 0; }
.pc-menu-nav .pc-menu-book:hover { background: var(--pc-cta-hover); }
.pc-menu-nav .pc-menu-book i { background: rgba(255,255,255,.18); color: #fff; }
.pc-menu-h { padding: 18px 24px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-menu-svcs { display: grid; gap: 2px; padding: 0 10px; }
.pc-menu-svcs a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; font-size: 14.5px; font-weight: 500; color: var(--pc-ink-2); }
.pc-menu-svcs a:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
.pc-menu-svcs a i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pc-c, var(--pc-primary)) 10%, white); color: var(--pc-c, var(--pc-primary)); flex: none; }
.pc-menu-acct { margin-top: auto; padding: 16px; border-top: 1px solid var(--pc-line); display: grid; gap: 6px; }
.pc-menu-acct a, .pc-menu-acct button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 99px; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.pc-menu-acct .pc-menu-acct-title { margin: 0 4px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-menu-acct .pc-primary { background: var(--pc-primary); color: #fff; }
.pc-menu-acct .pc-primary:hover { background: var(--pc-primary-hover); }
.pc-menu-acct .pc-quiet { color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-line-strong); }
.pc-menu-acct .pc-quiet:hover { background: var(--pc-surface-2); }
.pc-menu-acct .pc-danger { color: var(--pc-cta); }
/* Favourites sheet */
.pc-favs-head { padding: 24px 56px 18px 24px; border-bottom: 1px solid var(--pc-line); }
.pc-favs-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.pc-favs-head p { margin-top: 4px; font-size: 13.5px; color: var(--pc-ink-2); }
.pc-favs-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; }
.pc-favs-empty i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); }
.pc-favs-empty p { max-width: 17rem; font-size: 14px; line-height: 1.5; color: var(--pc-ink-2); }
.pc-favs-empty a { height: 46px; padding: 0 22px; border-radius: 99px; display: inline-flex; align-items: center; background: var(--pc-primary); color: #fff; font-weight: 700; font-size: 14px; }
.pc-favs-list { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 10px; align-content: start; }
.pc-fav-row { display: flex; gap: 12px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-fav-row .pc-ph { width: 76px; height: 76px; flex: none; border-radius: 16px; overflow: hidden; background: var(--pc-surface-2); display: grid; place-items: center; color: var(--pc-ink-3); }
.pc-fav-row .pc-ph img { width: 100%; height: 100%; object-fit: cover; }
.pc-fav-row .pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }
.pc-fav-row .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pc-fav-row .pc-name { font-size: 14.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-fav-row .pc-name:hover { color: var(--pc-primary); }
.pc-fav-row .pc-x { width: 32px; height: 32px; margin: -4px -2px 0 0; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--pc-ink-3); cursor: pointer; }
.pc-fav-row .pc-x:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
.pc-fav-row .pc-price { margin-top: auto; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pc-fav-row .pc-price small { font-size: 11px; color: var(--pc-ink-3); font-weight: 700; margin-right: 3px; letter-spacing: 0; }
.pc-fav-row .pc-oos { margin-left: 8px; font-size: 11.5px; font-weight: 700; color: #6B7280; }
/* ───── Hero (full-bleed photo; background carousel, copy fixed) ───── */
.pc-hero { position: relative; overflow: hidden; }
.pc-section.pc-hero { margin-top: 0; }
.pc-slides { position: absolute; inset: 0; }
.pc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--pc-ease); }
.pc-slide.on { opacity: 1; }
.pc-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.1); }
.pc-slide.on img { animation: pc-kenburns 7.5s linear forwards; }
@keyframes pc-kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }
/* Scrims keep the copy readable on any photo. */
.pc-scrim { position: absolute; inset: 0; background: linear-gradient(to right, var(--pc-bg) 0%, rgba(245,247,251,.93) 28%, rgba(245,247,251,.45) 48%, transparent 72%); }
.pc-scrim-b { position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(245,247,251,.55), transparent); }
.pc-hero-in { position: relative; min-height: 680px; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; padding-bottom: 32px; }
.pc-hero-copy { max-width: 620px; }
.pc-eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: 8px; border-radius: 99px; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; background: #fff; color: var(--pc-primary); box-shadow: inset 0 0 0 1px var(--pc-tint-line); }
.pc-ping { position: relative; width: 8px; height: 8px; flex: none; }
.pc-ping::before, .pc-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pc-cta); }
.pc-ping::before { animation: pc-ping 1.6s cubic-bezier(0,0,.2,1) infinite; opacity: .6; }
@keyframes pc-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.pc-h1 { font-size: clamp(2.7rem, 5.4vw, 4.8rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin-top: 20px; }
.pc-h1 .pc-l2 { color: var(--pc-primary); display: block; }
.pc-lede { margin-top: 20px; max-width: 32rem; font-size: 17.5px; line-height: 1.6; color: var(--pc-ink-2); }
.pc-ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.pc-btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 22px; border-radius: 99px; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: .3s var(--pc-ease); }
.pc-btn .pc-arrow { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); transition: transform .4s var(--pc-ease); }
.pc-btn:hover .pc-arrow { transform: translateX(3px); }
.pc-btn.pc-red { background: var(--pc-cta); color: #fff; }
.pc-btn.pc-red:hover { background: var(--pc-cta-hover); }
.pc-btn.pc-white { background: #fff; color: var(--pc-ink); padding-right: 8px; box-shadow: inset 0 0 0 1px var(--pc-line-strong); }
.pc-btn.pc-white .pc-arrow { background: var(--pc-tint); color: var(--pc-primary); }
.pc-dots { margin-top: 30px; display: flex; gap: 6px; align-items: center; }
.pc-dots button { position: relative; height: 4px; width: 6px; border: 0; border-radius: 99px; background: rgba(10,31,68,.22); cursor: pointer; overflow: hidden; transition: width .4s var(--pc-ease); padding: 0; }
.pc-dots button.on { width: 44px; }
.pc-dots button.on::after { content: ""; position: absolute; inset: 0; background: var(--pc-primary); transform-origin: left; animation: pc-fill 6.5s linear forwards; }
@keyframes pc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pc-dots small { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--pc-ink-2); }
/* Pause/play for the hero slideshow (overrides the dot-button styles above). Paused = active dot full. */
.pc-dots .pc-hero-pause { width: 28px; height: 28px; margin-right: 6px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-field-line); overflow: visible; transition: background .25s; }
.pc-dots .pc-hero-pause:hover { background: var(--pc-tint); }
.pc-dots.paused button.on::after { animation: none; }
/* Trust bar floats on the photo at the foot of the hero */
.pc-trust { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; background: #fff; border-radius: 24px; padding: 20px 24px; box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-trust li { list-style: none; display: flex; gap: 10px; align-items: flex-start; line-height: 1.3; }
.pc-trust i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); box-shadow: inset 0 0 0 1px var(--pc-tint-line); flex: none; }
.pc-trust b { display: block; font-size: 13.5px; }
.pc-trust span span { color: var(--pc-ink-3); font-size: 12px; }
/* ───── Section scaffolding ───── */
.pc-section { margin-top: 110px; line-height: normal; }
.pc-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.pc-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-cta); display: flex; align-items: center; gap: 10px; }
.pc-kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.pc-h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin-top: 12px; max-width: 22ch; }
.pc-sub { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--pc-ink-2); max-width: 46rem; }
.pc-tlink { font-weight: 700; font-size: 14px; color: var(--pc-primary); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.pc-reveal { transition: opacity 1s var(--pc-ease), transform 1s var(--pc-ease), filter 1s var(--pc-ease); }
.pc-reveal[data-reveal="hidden"] { opacity: 0; transform: translateY(28px); filter: blur(6px); }
/* ───── Services carousel (split photo + colour panel cards, auto-advancing) ───── */
.pc-svc-bleed { margin-top: 34px; }
.pc-svc-track { --pc-gap: 22px; --pc-per: 3; display: flex; gap: var(--pc-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 26px; }
.pc-svc { flex: 0 0 calc((100% - (var(--pc-per) - 1) * var(--pc-gap)) / var(--pc-per)); height: 300px; scroll-snap-align: start; display: grid; grid-template-columns: 42% 58%; border-radius: 22px; overflow: hidden; background: var(--pc-c); color: #fff; }
.pc-svc .pc-ph { position: relative; overflow: hidden; }
.pc-svc .pc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--pc-ease); }
.pc-svc:hover .pc-ph img { transform: scale(1.07); }
.pc-svc .pc-ph .pc-no { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.94); color: var(--pc-c); font-size: 11px; font-weight: 800; border-radius: 99px; padding: 4px 9px; }
.pc-svc .pc-panel-c { padding: 22px 20px 20px; display: flex; flex-direction: column; min-width: 0; }
.pc-svc h3 { font-size: clamp(1.08rem, 1.4vw, 1.32rem); line-height: 1.18; letter-spacing: -.02em; font-weight: 800; }
.pc-svc .pc-tg { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-svc .pc-acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pc-svc .pc-bk { height: 38px; padding: 0 14px; border-radius: 99px; background: #fff; color: var(--pc-c); font-weight: 800; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; transition: transform .3s var(--pc-ease); }
.pc-svc .pc-bk:hover { transform: translateY(-2px); }
.pc-svc .pc-more { font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; border-bottom: 1.5px solid rgba(255,255,255,.5); padding-bottom: 2px; }
.pc-svc .pc-more:hover { border-color: #fff; }
.pc-svc-ctrl { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.pc-svc-ctrl button { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--pc-primary); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, transform .3s var(--pc-ease); flex: none; }
.pc-svc-ctrl button:hover { background: var(--pc-primary-hover); transform: scale(1.05); }
.pc-svc-ctrl .pc-track { position: relative; flex: 1; height: 2px; background: var(--pc-line-strong); border-radius: 2px; margin-left: 6px; }
.pc-svc-ctrl .pc-thumb { position: absolute; top: -1px; height: 4px; border-radius: 4px; background: var(--pc-primary); transition: left .5s var(--pc-ease), width .5s var(--pc-ease); }
/* Auto-scroll status + pause/play toggle (a button: overrides the round arrow-button styles above). */
.pc-svc-ctrl .pc-auto { width: auto; height: 36px; padding: 0 12px; border-radius: 99px; background: var(--pc-surface); color: var(--pc-ink-2); box-shadow: inset 0 0 0 1px var(--pc-field-line); display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--pc-font); white-space: nowrap; }
.pc-svc-ctrl .pc-auto:hover { background: var(--pc-tint); transform: none; }
.pc-svc-ctrl .pc-auto svg { flex: none; color: var(--pc-primary); }
.pc-svc-ctrl .pc-auto i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.pc-svc-ctrl .pc-auto.paused i { background: var(--pc-ink-3); }
/* ───── Service chapters: full-width premium cards (photo carousel | story) ───── */
.pc-chapters { margin-top: 48px; }
.pc-chapter { --pc-c: var(--pc-primary); padding: 6px; border-radius: 38px; box-shadow: inset 0 0 0 1px rgba(10,31,68,.08); transform: scale(.99); transition: transform .9s var(--pc-ease), box-shadow .9s var(--pc-ease); scroll-margin-top: 150px; }
.pc-chapter.is-active { transform: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc-c) 55%, transparent); }
.pc-chapter .pc-core { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); min-height: 560px; border-radius: 32px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10,31,68,.06); }
.pc-chapter.flip .pc-core { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); }
.pc-chapter.flip .pc-ch-media { order: 2; }
/* Colour cap: clipped by the core's rounded corners, so it follows the curve. */
.pc-chapter .pc-core::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 5px; background: var(--pc-c); opacity: .22; transition: opacity .9s var(--pc-ease); }
.pc-chapter.is-active .pc-core::before { opacity: 1; }
.pc-ch-media { position: relative; margin: 10px; min-height: 540px; border-radius: 24px; overflow: hidden; background: var(--pc-surface-3); isolation: isolate; }
.pc-clip { clip-path: inset(6% 5% 6% 5% round 24px); transition: clip-path 1.2s var(--pc-ease); }
.pc-clip.in { clip-path: inset(0 0 0 0 round 24px); }
.pc-car-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--pc-ease); }
.pc-car-slide.on { opacity: 1; }
.pc-car-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 6s var(--pc-ease), filter 1s var(--pc-ease); filter: saturate(.35) brightness(1.04); }
.pc-car-slide.on img { transform: scale(1); }
.pc-chapter.is-active .pc-car-slide img { filter: none; }
.pc-ch-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(4,18,58,.5), transparent); z-index: 1; pointer-events: none; }
.pc-car-cap, .pc-car-count { position: absolute; top: 16px; z-index: 2; height: 32px; padding: 0 13px; border-radius: 99px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.95); color: var(--pc-ink); }
.pc-car-cap { left: 16px; }
.pc-car-count { right: 16px; font-variant-numeric: tabular-nums; }
.pc-car-count b { color: var(--pc-c); }
.pc-car-ui { position: absolute; z-index: 2; left: 20px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.pc-car-dots { display: flex; gap: 6px; }
.pc-car-dots button { position: relative; width: 16px; height: 4px; border: 0; padding: 0; border-radius: 99px; background: rgba(255,255,255,.45); cursor: pointer; overflow: hidden; transition: width .6s var(--pc-ease); }
.pc-car-dots button.on { width: 40px; background: rgba(255,255,255,.35); }
.pc-car-dots button.on::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(1); }
.pc-car-dots.run button.on::after { animation: pc-fill 4.6s linear forwards; }
.pc-car-arrows { display: flex; gap: 8px; }
.pc-car-arrows button { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.95); color: var(--pc-ink); transition: transform .5s var(--pc-ease); }
.pc-car-arrows button:hover { transform: scale(1.06); }
.pc-car-arrows button:active { transform: scale(.96); }
.pc-ch-content { position: relative; isolation: isolate; padding: 52px 56px 44px; display: flex; flex-direction: column; min-width: 0; }
/* Soft colour wash + outlined numeral: depth without shadows */
.pc-ch-content::before { content: ""; position: absolute; z-index: -1; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pc-c) 11%, transparent), transparent 68%); }
.pc-ch-num { position: absolute; z-index: -1; right: 40px; top: 26px; font-size: 156px; font-weight: 800; line-height: .9; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pc-c) 20%, transparent); -webkit-user-select: none; user-select: none; pointer-events: none; }
.pc-ch-eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 15px 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--pc-c) 7%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-c) 18%, white); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-c); }
.pc-ch-eyebrow i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-c); color: #fff; }
.pc-ch-content h3 { margin-top: 28px; font-size: clamp(2.2rem, 3.3vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; color: var(--pc-ink); max-width: 13ch; text-wrap: balance; }
.pc-ch-content .pc-tag { margin-top: 16px; font-size: 18.5px; line-height: 1.45; font-weight: 600; color: var(--pc-c); max-width: 30ch; }
.pc-ch-content p.pc-d { margin-top: 18px; font-size: 17px; line-height: 1.75; color: var(--pc-ink-2); max-width: 44ch; }
.pc-ch-foot { margin-top: auto; padding-top: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-ch-foot::before { content: ""; flex-basis: 100%; height: 1px; margin-bottom: 18px; background: linear-gradient(to right, rgba(10,31,68,.1), transparent); }
.pc-btn.pc-island { background: var(--pc-c); color: #fff; height: 52px; font-size: 14.5px; padding-left: 22px; }
.pc-btn.pc-island .pc-arrow { width: 38px; height: 38px; background: rgba(255,255,255,.2); transition: transform .5s var(--pc-ease); }
.pc-btn.pc-island:hover .pc-arrow { transform: translate(3px, -1px) scale(1.05); }
.pc-btn.pc-island:active { transform: scale(.98); }
.pc-wa { height: 52px; padding: 0 20px 0 7px; border-radius: 99px; background: #fff; color: var(--pc-ink); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 10px; box-shadow: inset 0 0 0 1px rgba(10,31,68,.13); transition: box-shadow .4s var(--pc-ease), transform .4s var(--pc-ease); }
.pc-wa i { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; transition: transform .5s var(--pc-ease); }
.pc-wa:hover { box-shadow: inset 0 0 0 1.5px #25D366; }
.pc-wa:hover i { transform: rotate(-10deg) scale(1.06); }
.pc-wa:active { transform: scale(.98); }
.pc-ch-next { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.pc-ch-next::before { content: ""; width: 0; height: 30px; border-left: 1.5px dashed rgba(10,31,68,.18); }
.pc-ch-next a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10,31,68,.1); font-size: 12.5px; font-weight: 600; color: var(--pc-ink-3); }
.pc-ch-next a b { color: var(--pc-ink); }
.pc-ch-next a i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); }
.pc-rail-wrap { position: relative; margin-top: 24px; }
.pc-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; }
.pc-arrows { display: flex; gap: 8px; }
.pc-arrows button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--pc-line-strong); cursor: pointer; display: grid; place-items: center; color: var(--pc-ink); }
.pc-arrows button:hover { background: var(--pc-primary); color: #fff; }
/* ───── Pharmacy jumbotron: full screen width ───── */
.pc-jumbo { --pc-jp: max(24px, 4vw); width: 100vw; margin-left: calc(50% - 50vw); position: relative; overflow: hidden; color: #fff; padding: 72px 0 52px;
background: radial-gradient(70% 90% at 0% 0%, rgba(30,92,220,.55), transparent 60%), linear-gradient(165deg, #082462 0%, #051640 55%, #030E2C 100%); }
/* Photo: set background-image inline, or put an ![]()
inside. */
.pc-jumbo-photo { position: absolute; top: 0; right: 0; width: 60%; height: 70%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .42;
-webkit-mask-image: linear-gradient(to left, #000 20%, transparent 88%), linear-gradient(to bottom, #000 35%, transparent 100%); -webkit-mask-composite: source-in;
mask-image: linear-gradient(to left, #000 20%, transparent 88%), linear-gradient(to bottom, #000 35%, transparent 100%); mask-composite: intersect; }
.pc-jumbo-photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-jumbo-plus { position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 11v8M11 15h8' stroke='white' stroke-opacity='.06' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pc-jumbo-in { position: relative; padding-inline: var(--pc-jp); }
.pc-j-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.pc-j-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: rgba(255,255,255,.85); }
.pc-jumbo .pc-h2 { margin-top: 16px; color: #fff; font-size: clamp(2.3rem, 4.4vw, 4.4rem); line-height: 1; letter-spacing: -.045em; max-width: none; text-wrap: balance; }
.pc-jumbo .pc-h2 span { color: #9DBBFF; }
.pc-j-cats { margin-top: 30px; display: flex; gap: 8px; overflow-x: auto; }
.pc-j-cats button { height: 42px; padding: 0 16px; border: 0; border-radius: 99px; cursor: pointer; font: 600 13.5px var(--pc-font); white-space: nowrap; background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); display: inline-flex; align-items: center; gap: 8px; transition: background .4s var(--pc-ease), color .4s var(--pc-ease); }
.pc-j-cats button em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.28); }
.pc-j-cats button:hover { background: rgba(255,255,255,.12); color: #fff; }
.pc-j-cats button.on { background: #fff; color: var(--pc-ink); box-shadow: none; }
.pc-j-cats button.on em { background: var(--pc-tint); color: var(--pc-primary); }
.pc-j-rail { margin-top: 24px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pc-jp); padding: 8px var(--pc-jp) 12px; }
.pc-j-ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.pc-j-track { position: relative; height: 2px; margin: 20px var(--pc-jp) 0; background: rgba(255,255,255,.16); border-radius: 2px; }
.pc-j-track .pc-thumb { position: absolute; top: -1px; height: 4px; border-radius: 4px; background: #fff; transition: left .5s var(--pc-ease), width .5s var(--pc-ease); }
.pc-j-ctrl button { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .3s, transform .4s var(--pc-ease); flex: none; }
.pc-j-ctrl button:hover { background: #fff; color: var(--pc-ink); }
.pc-j-ctrl button:active { transform: scale(.96); }
.pc-j-ctrl .pc-all { margin-right: 8px; font-weight: 700; font-size: 14px; color: #fff; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
/* ───── Product card (used for every product in this template) ───── */
.pc-pcard { flex: 0 0 272px; scroll-snap-align: start; background: #fff; color: var(--pc-ink); border-radius: 28px; padding: 8px; display: flex; flex-direction: column; line-height: normal; transition: transform .7s var(--pc-ease), opacity .5s var(--pc-ease); }
.pc-pcard:hover { transform: translateY(-6px); }
.pc-pcard.hide { display: none; }
.pc-pcard.enter { animation: pc-card-in .6s var(--pc-ease) both; }
@keyframes pc-card-in { from { opacity: 0; transform: translateY(14px); } }
.pc-pcard .pc-ph { position: relative; aspect-ratio: 1; border-radius: 21px; overflow: hidden; background: #EEF2F9; }
.pc-pcard .pc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--pc-ease); }
.pc-pcard:hover .pc-ph img { transform: scale(1.06); }
.pc-pcard.pc-out .pc-ph img { filter: grayscale(1) opacity(.7); }
.pc-pcard .pc-stock { position: absolute; left: 10px; top: 10px; height: 28px; padding: 0 10px; border-radius: 99px; background: rgba(255,255,255,.95); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: #0F7B43; }
.pc-pcard .pc-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pc-pcard .pc-stock.pc-low { color: #B45309; }
.pc-pcard .pc-stock.pc-out { color: #6B7280; }
.pc-pcard .pc-fav { position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.95); color: var(--pc-ink); display: grid; place-items: center; transition: transform .4s var(--pc-ease); }
.pc-pcard .pc-fav:active { transform: scale(.9); }
.pc-pcard .pc-fav.on { color: var(--pc-cta); }
.pc-pcard .pc-fav.on svg { fill: currentColor; }
.pc-pcard .pc-body { padding: 14px 10px 8px; display: flex; flex-direction: column; flex: 1; }
.pc-pcard .pc-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-primary); }
.pc-pcard h3, .pc-pcard h4 { margin-top: 6px; font-size: 16.5px; line-height: 1.28; font-weight: 700; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-pcard .pc-pack { margin-top: 3px; font-size: 13px; color: var(--pc-ink-3); }
.pc-pcard .pc-sup { margin-top: 12px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; background: #F5F7FB; font-size: 12.5px; line-height: 1.25; }
.pc-pcard .pc-sup em { font-style: normal; width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--pc-tint-2); color: var(--pc-primary); font-weight: 800; font-size: 10px; display: grid; place-items: center; }
.pc-pcard .pc-sup span { color: var(--pc-ink-3); display: block; font-size: 11px; }
.pc-pcard .pc-sup b { color: var(--pc-ink); font-weight: 700; }
.pc-pcard .pc-buy { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-pcard .pc-price { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pc-pcard .pc-price small { font-size: 11.5px; color: var(--pc-ink-3); font-weight: 700; margin-right: 3px; letter-spacing: 0; }
.pc-pcard .pc-add { height: 44px; padding: 0 6px 0 16px; border: 0; border-radius: 99px; cursor: pointer; background: var(--pc-primary); color: #fff; font: 700 13.5px var(--pc-font); display: inline-flex; align-items: center; gap: 10px; transition: transform .4s var(--pc-ease), background .3s; }
.pc-pcard .pc-add i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); transition: transform .5s var(--pc-ease); }
.pc-pcard .pc-add:hover { background: var(--pc-primary-hover); }
.pc-pcard .pc-add:hover i { transform: rotate(90deg); }
.pc-pcard .pc-add:active { transform: scale(.97); }
.pc-pcard .pc-add[disabled] { background: #E5E9F0; color: #6B7280; cursor: not-allowed; padding: 0 16px; }
.pc-pcard .pc-step { height: 44px; padding: 0 5px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; background: var(--pc-tint); box-shadow: inset 0 0 0 1px var(--pc-tint-line); }
.pc-pcard .pc-step button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; color: var(--pc-primary); display: grid; place-items: center; }
.pc-pcard .pc-step b { min-width: 22px; text-align: center; font-size: 15px; color: var(--pc-primary); }
/* ───── Suppliers: editorial split — story + live figures | bleeding card rail ───── */
.pc-sup-sec { --pc-bleed: max(24px, calc((100vw - 1400px) / 2 + 24px)); display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.pc-sup-intro { display: flex; flex-direction: column; padding-top: 6px; }
.pc-sup-intro .pc-h2 { max-width: 12ch; }
.pc-sup-intro .pc-sub { max-width: 34ch; }
.pc-sup-figs { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(10,31,68,.1); }
.pc-sup-figs div { padding: 20px 0 0; }
.pc-sup-figs div + div { padding-left: 22px; border-left: 1px solid rgba(10,31,68,.1); }
.pc-sup-figs b { display: block; font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--pc-ink); }
.pc-sup-figs span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--pc-ink-3); }
.pc-sup-nav { margin-top: auto; padding-top: 34px; display: flex; align-items: center; gap: 10px; }
.pc-sup-nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: #fff; color: var(--pc-ink); box-shadow: inset 0 0 0 1px rgba(10,31,68,.14); transition: background .3s var(--pc-ease), color .3s var(--pc-ease), transform .4s var(--pc-ease); }
.pc-sup-nav button:hover { background: var(--pc-ink); color: #fff; }
.pc-sup-nav button:active { transform: scale(.95); }
.pc-sup-nav a { margin-left: 8px; font-weight: 700; font-size: 14px; color: var(--pc-primary); display: inline-flex; gap: 8px; align-items: center; }
.pc-sup-rail { min-width: 0; margin-right: calc(-1 * var(--pc-bleed)); }
.pc-sup-rail .pc-rail { gap: 18px; padding: 2px var(--pc-bleed) 6px 2px; scroll-padding-left: 2px; }
.pc-sup-track { position: relative; height: 2px; margin: 22px var(--pc-bleed) 0 2px; background: rgba(10,31,68,.1); border-radius: 2px; }
.pc-sup-track span { position: absolute; top: -1px; height: 4px; border-radius: 4px; background: var(--pc-ink); transition: left .5s var(--pc-ease), width .5s var(--pc-ease); }
.pc-scard { --pc-c: var(--pc-primary); flex: 0 0 344px; scroll-snap-align: start; padding: 6px; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(10,31,68,.09); transition: box-shadow .5s var(--pc-ease), transform .7s var(--pc-ease); }
.pc-scard:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc-c) 55%, transparent); transform: translateY(-4px); }
.pc-scard .pc-in { height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(10,31,68,.05); overflow: hidden; }
.pc-scard .pc-cover { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; height: 200px; padding: 7px 7px 0; }
.pc-scard .pc-cover figure { overflow: hidden; background: var(--pc-surface-2); border-radius: 12px; }
.pc-scard .pc-cover figure:first-child { grid-row: span 2; border-radius: 20px 12px 12px 12px; }
.pc-scard .pc-cover figure:nth-child(2) { border-radius: 12px 20px 12px 12px; }
.pc-scard .pc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--pc-ease); }
.pc-scard:hover .pc-cover img { transform: scale(1.07); }
.pc-scard .pc-mono { position: relative; z-index: 1; margin: -30px 0 0 22px; width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; background: var(--pc-c); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 0 0 5px #fff; }
.pc-scard .pc-body { padding: 14px 22px 22px; display: flex; flex-direction: column; flex: 1; }
/* Supplier card names are h3 (under the section's h2); this ported rule styles h3 and h4 alike. */
.pc-scard h3, .pc-scard h4 { font-size: 20px; font-weight: 800; letter-spacing: -.025em; color: var(--pc-ink); }
.pc-scard .pc-loc { margin-top: 5px; display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--pc-ink-2); }
.pc-scard .pc-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-scard .pc-tags span { height: 28px; padding: 0 11px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--pc-ink-2); background: #F3F6FB; box-shadow: inset 0 0 0 1px rgba(10,31,68,.05); }
.pc-scard .pc-figs { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(10,31,68,.08); }
.pc-scard .pc-figs div { padding-top: 14px; }
.pc-scard .pc-figs div + div { padding-left: 16px; border-left: 1px solid rgba(10,31,68,.08); }
.pc-scard .pc-figs b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.035em; color: var(--pc-ink); line-height: 1; }
.pc-scard .pc-figs span { display: block; margin-top: 5px; font-size: 12px; color: var(--pc-ink-3); }
.pc-scard .pc-go { margin-top: 20px; height: 50px; padding: 0 6px 0 20px; border-radius: 99px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; color: var(--pc-ink); box-shadow: inset 0 0 0 1px rgba(10,31,68,.14); transition: background .4s var(--pc-ease), color .4s var(--pc-ease), box-shadow .4s var(--pc-ease); }
.pc-scard .pc-go i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pc-c) 9%, white); color: var(--pc-c); transition: transform .5s var(--pc-ease), background .4s, color .4s; }
.pc-scard .pc-go:hover { background: var(--pc-c); color: #fff; box-shadow: none; }
.pc-scard .pc-go:hover i { background: rgba(255,255,255,.2); color: #fff; transform: translate(2px, -1px); }
/* ───── Team ───── */
.pc-member { width: 280px; flex: none; scroll-snap-align: start; position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 3/4; background: var(--pc-surface-3); }
.pc-member img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--pc-ease); }
.pc-member:hover img { transform: scale(1.05); }
.pc-member .pc-cap { position: absolute; inset: auto 10px 10px 10px; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 20px; padding: 14px 16px; transition: .5s var(--pc-ease); }
.pc-member .pc-cap b { display: block; font-size: 16px; }
.pc-member .pc-cap span { font-size: 12.5px; color: var(--pc-primary); font-weight: 600; }
.pc-member .pc-cap p { max-height: 0; overflow: hidden; opacity: 0; font-size: 13px; line-height: 1.5; color: var(--pc-ink-2); transition: .5s var(--pc-ease); }
.pc-member:hover .pc-cap p, .pc-member:focus-within .pc-cap p { max-height: 80px; opacity: 1; margin-top: 8px; }
.pc-sample { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--pc-ink-3); background: var(--pc-surface-2); padding: 4px 10px; border-radius: 99px; }
/* ───── Facility ───── */
.pc-bento { margin-top: 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 14px; }
.pc-bento figure { border-radius: 26px; overflow: hidden; position: relative; }
.pc-bento figure:first-child { grid-row: span 2; }
.pc-bento img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.pc-bento figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.93); border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }
.pc-place { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; }
.pc-points { background: #fff; border-radius: 26px; padding: 30px; box-shadow: inset 0 0 0 1px var(--pc-line); display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-content: start; }
.pc-points div i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); }
.pc-points b { display: block; margin-top: 12px; font-size: 15px; }
.pc-points p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--pc-ink-2); }
.pc-map { position: relative; border-radius: 26px; overflow: hidden; min-height: 360px; box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.pc-addr { position: absolute; left: 16px; top: 16px; right: 16px; max-width: 360px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: inset 0 0 0 1px var(--pc-line-strong); }
.pc-addr small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-cta); }
.pc-addr b { display: block; font-size: 20px; letter-spacing: -.02em; margin-top: 6px; }
.pc-addr p { font-size: 13.5px; color: var(--pc-ink-2); margin-top: 2px; }
.pc-addr .pc-acts { display: flex; gap: 8px; margin-top: 14px; }
.pc-addr .pc-acts a { height: 38px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
/* ───── CTA band ───── */
.pc-band { position: relative; overflow: hidden; border-radius: 34px; background: radial-gradient(120% 120% at 85% 0%, #0B3A9E 0%, var(--pc-deep) 45%, var(--pc-deep-2) 100%); color: var(--pc-on-deep); padding: 70px 56px 150px; }
.pc-band .pc-h2 { color: #fff; max-width: 16ch; }
.pc-band .pc-sub { color: rgba(238,243,255,.75); }
.pc-band > svg.pc-ecg { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; height: 110px; opacity: .9; }
.pc-band .pc-ecg path { fill: none; stroke: #FF4A50; stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(255,74,80,.8)); }
.pc-band .pc-ctas { position: relative; }
.pc-btn.pc-ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); padding-right: 22px; }
/* ───── Footer: bright brand blue, drifting colour glows, floating pluses ───── */
.pc-footer { position: relative; isolation: isolate; margin-top: 120px; overflow: hidden; color: #fff; line-height: normal; border-radius: 48px 48px 0 0; background: linear-gradient(160deg, var(--pc-footer-1) 0%, var(--pc-footer-2) 55%, var(--pc-footer-3) 100%); }
/* --pc-glow-k (theme.ts) dims the glows only where a preset's footer would drop white text below 4.5:1. */
.pc-f-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; will-change: transform; opacity: var(--pc-glow-k, 1); }
.pc-f-glow.pc-g1 { width: 720px; height: 720px; left: -180px; top: -260px; background: radial-gradient(circle, rgba(92,182,255,.28), transparent 65%); animation: pc-drift1 16s ease-in-out infinite alternate; }
.pc-f-glow.pc-g2 { width: 620px; height: 620px; right: -140px; top: 40px; background: radial-gradient(circle, rgba(52,211,153,.28), transparent 65%); animation: pc-drift2 19s ease-in-out infinite alternate; }
.pc-f-glow.pc-g3 { width: 520px; height: 520px; left: 38%; bottom: -260px; background: radial-gradient(circle, rgba(255,120,120,.4), transparent 65%); animation: pc-drift3 22s ease-in-out infinite alternate; }
@keyframes pc-drift1 { to { transform: translate(160px, 120px) scale(1.12); } }
@keyframes pc-drift2 { to { transform: translate(-180px, 90px) scale(.92); } }
@keyframes pc-drift3 { to { transform: translate(-140px, -110px) scale(1.15); } }
.pc-f-plus { position: absolute; z-index: -1; pointer-events: none; color: rgba(255,255,255,.22); animation: pc-rise 9s ease-in-out infinite; }
.pc-f-plus svg { width: 100%; height: 100%; }
@keyframes pc-rise { 0% { transform: translateY(30px) rotate(0); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translateY(-120px) rotate(90deg); opacity: 0; } }
.pc-f-top { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 64px 0 46px; border-bottom: 1px solid rgba(255,255,255,.16); }
.pc-f-brand { display: flex; align-items: center; gap: 28px; }
.pc-f-logo { flex: none; background: #fff; border-radius: 22px; padding: 10px 16px; display: flex; align-items: center; }
.pc-f-logo img { height: 46px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.pc-f-logo .pc-wordmark { font-size: 22px; line-height: 46px; }
.pc-f-brand p { max-width: 36ch; font-size: 16px; line-height: 1.6; color: #fff; }
.pc-f-brand p b { color: #fff; display: block; font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
.pc-f-acts { display: flex; gap: 10px; flex: none; }
.pc-f-acts .pc-wa { box-shadow: none; }
.pc-f-acts .pc-wa i { width: 38px; height: 38px; }
.pc-f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding: 48px 0 56px; }
.pc-f-cols h5 { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 18px; opacity: 1; }
.pc-f-cols ul { list-style: none; display: grid; gap: 12px; }
.pc-f-cols a, .pc-f-cols li > span { font-size: 15px; font-weight: 500; color: #fff; overflow-wrap: anywhere; }
.pc-f-cols a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--pc-ease), color .3s; }
.pc-f-cols a:hover { background-size: 100% 1.5px; color: #fff; }
.pc-f-cols .pc-more { color: #fff; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.pc-f-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.24); font-size: 13px; color: #fff; }
.pc-f-base .pc-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.45); margin: 0 12px; vertical-align: middle; }
.pc-f-up { display: inline-flex; align-items: center; gap: 10px; color: #fff; background: none; border: 0; cursor: pointer; font: 700 13px var(--pc-font); }
.pc-f-up i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .5s var(--pc-ease), background .3s, color .3s; }
.pc-f-up:hover i { background: #fff; color: var(--pc-primary); transform: translateY(-3px); }
/* --pc-mark-n (the wordmark's length, set inline) shrinks long store names to fit the width. */
.pc-f-mark { font-size: clamp(2.4rem, min(15.5vw, calc(170vw / var(--pc-mark-n, 11))), 15rem); font-weight: 800; letter-spacing: -.06em; line-height: .78; white-space: nowrap; text-align: center; margin-bottom: -.14em; -webkit-user-select: none; user-select: none;
background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.04)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-footer :where(a, button):focus-visible { outline-color: #fff; }
@media (max-width: 1100px) {
.pc-scrim { background: linear-gradient(to bottom, rgba(245,247,251,.62), rgba(245,247,251,.9)); } .pc-trust { grid-template-columns: 1fr 1fr; }
.pc-svc-track { --pc-per: 2; }
.pc-chapter { transform: none; } .pc-chapter .pc-core, .pc-chapter.flip .pc-core { grid-template-columns: 1fr; } .pc-chapter.flip .pc-ch-media { order: 0; }
.pc-jumbo-photo { width: 100%; opacity: .25; }
.pc-sup-sec { grid-template-columns: 1fr; gap: 28px; } .pc-sup-nav { padding-top: 24px; }
.pc-ch-media { min-height: 360px; } .pc-ch-content { padding: 30px 26px 28px; } .pc-ch-num { font-size: 110px; }
.pc-place, .pc-points { grid-template-columns: 1fr; }
.pc-bento { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 200px); }
.pc-search, .pc-visit, .pc-row2, .pc-strip { display: none; }
.pc-menu .pc-search { display: flex; }
.pc-menu-btn { display: grid; }
.pc-ibtn.pc-desk { display: none; }
.pc-ibtn .pc-acct-lbl { display: none; }
.pc-hdr-fallback { height: 77px; }
.pc-f-top { flex-direction: column; align-items: flex-start; } .pc-f-brand { flex-direction: column; align-items: flex-start; gap: 16px; } .pc-f-brand p { padding-left: 0; border-left: 0; } .pc-f-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.pc-row1 { height: 64px; gap: 8px; padding: 0 16px; }
.pc-logo img { height: 38px; max-width: 132px; }
.pc-wordmark { font-size: 18px; max-width: 132px; }
.pc-icons { gap: 0; }
.pc-ibtn { padding-right: 0; }
.pc-ibtn .pc-lbl { display: none; }
.pc-badge { left: 22px; }
.pc-book { height: 40px; padding: 0 14px; gap: 6px; margin-left: 4px; }
.pc-book .pc-book-long { display: none; } .pc-book .pc-book-short { display: inline; }
.pc-hdr-fallback { height: 65px; }
.pc-footer { border-radius: 32px 32px 0 0; } .pc-f-acts { width: 100%; } .pc-f-acts > a { flex: 1; justify-content: center; } .pc-f-base { flex-direction: column; align-items: flex-start; }
.pc-scard { flex-basis: 82vw; } .pc-sup-figs b { font-size: 36px; }
.pc-jumbo { padding: 56px 0 44px; } .pc-pcard { flex-basis: 78vw; } .pc-j-ctrl .pc-all, .pc-j-ctrl button { display: none; }
.pc-ch-media { min-height: 280px; margin: 6px; } .pc-ch-content { padding: 24px 16px 18px; } .pc-ch-num { font-size: 84px; right: 16px; } .pc-ch-foot > a { flex: 1; justify-content: center; }
.pc-svc-track { --pc-per: 1; }
.pc-head { flex-direction: column; align-items: flex-start; }
.pc-svc { height: 260px; }
/* Phones: icon-only pause/play (its aria-label still says what it does). */
.pc-svc-ctrl .pc-auto { width: 36px; padding: 0; justify-content: center; }
.pc-svc-ctrl .pc-auto i, .pc-svc-ctrl .pc-auto .pc-auto-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pc-reveal, .pc-clip { opacity: 1; transform: none; clip-path: none; transition: none; }
.pc-reveal[data-reveal="hidden"] { opacity: 1; transform: none; filter: none; }
.pc-chapter, .pc-car-slide, .pc-car-slide img, .pc-reveal, .pc-chip-ind, .pc-hdr-prog { transition: none; filter: none; } .pc-f-glow, .pc-f-plus { animation: none; } .pc-f-plus { display: none; } .pc-chip.live svg, .pc-chip.live .pc-n, .pc-chip-ind.sweep::after { animation: none; }
.pc-slide.on img, .pc-dots button.on::after { animation: none; }
.pc-ping::before, .pc-pcard.enter, .pc-car-dots.run button.on::after { animation: none; }
/* No hover/press lifts, zooms or nudges. */
.pc-pcard:hover, .pc-scard:hover, .pc-svc .pc-bk:hover, .pc-svc-ctrl button:hover, .pc-car-arrows button:hover,
.pc-svc:hover .pc-ph img, .pc-pcard:hover .pc-ph img, .pc-scard:hover .pc-cover img, .pc-member:hover img,
.pc-btn:hover .pc-arrow, .pc-btn.pc-island:hover .pc-arrow, .pc-wa:hover i, .pc-pcard .pc-add:hover i,
.pc-scard .pc-go:hover i, .pc-f-up:hover i,
.pc-btn.pc-island:active, .pc-wa:active, .pc-car-arrows button:active, .pc-j-ctrl button:active,
.pc-sup-nav button:active, .pc-pcard .pc-fav:active, .pc-pcard .pc-add:active { transform: none; }
}
/* ───── Product card: app additions (image link, photo fallback, focus) ───── */
/* Cards render the name as an h3 (under each page's h2); the ported rule above styles h3 and h4 alike. */
.pc-pcard .pc-ph-link { display: block; width: 100%; height: 100%; }
.pc-ph-none { width: 100%; height: 100%; display: grid; place-items: center; background: var(--pc-surface-2); color: var(--pc-ink-3); }
/* The name is line-clamped (overflow hidden), so its link's focus ring is drawn around the whole card. */
@supports selector(:has(a)) {
.pc-pcard h3 a:focus-visible { outline: none; }
.pc-pcard:has(h3 a:focus-visible) { outline: 2px solid var(--pc-primary); outline-offset: 3px; }
}
/* ───── Products page ───── */
.pc-shop-page { padding-top: 28px; }
.pc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--pc-ink-3); }
.pc-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pc-crumbs a { color: var(--pc-ink-2); border-radius: 6px; }
.pc-crumbs a:hover { color: var(--pc-ink); text-decoration: underline; text-underline-offset: 3px; }
.pc-crumbs li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-shop-head { margin-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; }
.pc-shop-count { margin-top: 10px; font-size: 15px; color: var(--pc-ink-2); }
.pc-shop-search { flex: 0 1 440px; min-width: min(100%, 300px); display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 18px; border-radius: 99px; background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-field-line); color: var(--pc-ink-3); transition: box-shadow .25s var(--pc-ease); }
.pc-shop-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--pc-primary), 0 0 0 3px var(--pc-tint-2); }
.pc-shop-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--pc-ink); font: 500 15px var(--pc-font); outline: none; -webkit-appearance: none; appearance: none; }
.pc-shop-search input:focus-visible { outline: none; }
.pc-shop-search input::placeholder { color: var(--pc-ink-3); opacity: 1; }
.pc-shop-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pc-shop-clear { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--pc-ink-2); transition: background .25s; }
.pc-shop-clear:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
.pc-shop-bar { margin-top: 28px; display: flex; align-items: flex-start; gap: 14px 24px; }
/* Chips wrap on wider screens and scroll sideways on phones; the 4px of padding keeps their focus
rings clear of the scroll container's clipping. */
.pc-shop-cats { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; margin: -4px; }
.pc-shop-cats button { flex: none; height: 42px; padding: 0 8px 0 16px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 600 13.5px var(--pc-font); color: var(--pc-ink-2); background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-line-strong); transition: background .3s var(--pc-ease), color .3s var(--pc-ease), box-shadow .3s var(--pc-ease); }
.pc-shop-cats button em { font-style: normal; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--pc-surface-2); color: var(--pc-ink-2); }
.pc-shop-cats button:hover { color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-ink-3); }
.pc-shop-cats button.on { background: var(--pc-ink); color: #fff; box-shadow: none; }
.pc-shop-cats button.on em { background: rgba(255,255,255,.16); color: #fff; }
.pc-shop-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.pc-select { position: relative; display: inline-flex; align-items: center; height: 46px; border-radius: 99px; background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-field-line); color: var(--pc-ink); transition: box-shadow .25s var(--pc-ease); }
.pc-select:focus-within { box-shadow: inset 0 0 0 1.5px var(--pc-primary), 0 0 0 3px var(--pc-tint-2); }
.pc-select select { height: 100%; max-width: 16rem; padding: 0 42px 0 18px; border: 0; border-radius: 99px; background: transparent; color: var(--pc-ink); font: 600 13.5px var(--pc-font); text-overflow: ellipsis; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pc-select select:focus-visible { outline: none; }
.pc-select-k { padding-left: 18px; font-size: 13px; color: var(--pc-ink-3); white-space: nowrap; }
.pc-select .pc-select-k + select { padding-left: 6px; }
.pc-select svg { position: absolute; right: 16px; pointer-events: none; color: var(--pc-ink-2); }
.pc-shop-grid { margin-top: 26px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.pc-shop-grid > li { display: grid; min-width: 0; }
.pc-shop-more { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pc-shop-more p { font-size: 13px; color: var(--pc-ink-3); }
.pc-shop-more button { height: 50px; padding: 0 26px; border-radius: 99px; cursor: pointer; background: var(--pc-surface); color: var(--pc-ink); font: 700 14px var(--pc-font); box-shadow: inset 0 0 0 1px var(--pc-line-strong); transition: background .3s var(--pc-ease), color .3s var(--pc-ease); }
.pc-shop-more button:hover { background: var(--pc-ink); color: #fff; box-shadow: none; }
.pc-shop-empty { margin-top: 28px; padding: 64px 24px; border-radius: 28px; border: 1.5px dashed var(--pc-line-strong); background: var(--pc-surface); text-align: center; display: flex; flex-direction: column; align-items: center; }
.pc-shop-empty i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); }
.pc-shop-empty h2 { margin-top: 18px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--pc-ink); }
.pc-shop-empty p { margin-top: 6px; max-width: 26rem; font-size: 15px; line-height: 1.55; color: var(--pc-ink-2); }
.pc-shop-empty button { margin-top: 22px; height: 48px; padding: 0 24px; border-radius: 99px; cursor: pointer; background: var(--pc-primary); color: #fff; font: 700 14px var(--pc-font); transition: background .3s; }
.pc-shop-empty button:hover { background: var(--pc-primary-hover); }
/* ───── Product detail ───── */
.pc-pd { padding-top: 28px; }
.pc-pd-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pc-pd-gallery { position: sticky; top: 150px; min-width: 0; }
.pc-pd-main { position: relative; aspect-ratio: 1; border-radius: 32px; overflow: hidden; background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pc-pd-main.pc-out img { filter: grayscale(1) opacity(.7); }
.pc-pd-main .pc-ph-none svg { width: 72px; height: 72px; stroke-width: 1.1; }
.pc-pd-thumbs { margin: 12px -4px 0; padding: 4px; display: flex; gap: 10px; overflow-x: auto; }
.pc-pd-thumbs button { position: relative; flex: none; width: 84px; height: 84px; border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--pc-surface-2); opacity: .8; transition: opacity .3s; }
.pc-pd-thumbs button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--pc-line); pointer-events: none; }
.pc-pd-thumbs button:hover, .pc-pd-thumbs button.on { opacity: 1; }
.pc-pd-thumbs button.on::after { box-shadow: inset 0 0 0 2.5px var(--pc-primary); }
.pc-pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pc-pd-info { min-width: 0; padding-top: 4px; }
.pc-pd-cat { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-ink-2); background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-line-strong); transition: box-shadow .3s, color .3s; }
.pc-pd-cat:hover { color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-ink-3); }
.pc-pd-title { margin-top: 16px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; color: var(--pc-ink); text-wrap: balance; overflow-wrap: anywhere; }
.pc-pd-pack { margin-top: 8px; font-size: 15px; color: var(--pc-ink-3); }
.pc-pd-price { margin-top: 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.pc-pd-price > span { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--pc-ink); }
.pc-pd-price small { margin-right: 5px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--pc-ink-3); }
.pc-pd-price s { font-size: 16px; color: var(--pc-ink-3); }
/* Stock reads in ink; the dot carries the colour (green / amber / grey, as on the card badge). */
.pc-pd-stock { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--pc-ink); }
.pc-pd-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0F7B43; flex: none; }
.pc-pd-stock.pc-low::before { background: #B45309; }
.pc-pd-stock.pc-out::before { background: #6B7280; }
.pc-pd-buy { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pc-pd-qty { height: 56px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-field-line); }
.pc-pd-qty button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--pc-ink); transition: background .25s; }
.pc-pd-qty button:hover:not(:disabled) { background: var(--pc-surface-2); }
.pc-pd-qty button:disabled { color: var(--pc-ink-3); opacity: .45; cursor: not-allowed; }
.pc-pd-qty b { min-width: 34px; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pc-ink); }
.pc-pd-add { flex: 1 1 200px; height: 56px; padding: 0 24px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; background: var(--pc-primary); color: #fff; font: 700 15px var(--pc-font); transition: background .3s, transform .4s var(--pc-ease); }
.pc-pd-add:hover:not(:disabled) { background: var(--pc-primary-hover); }
.pc-pd-add:active:not(:disabled) { transform: scale(.98); }
.pc-pd-add:disabled { background: #E5E9F0; color: var(--pc-ink-3); cursor: not-allowed; }
.pc-pd-fav { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--pc-surface); color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-line-strong); transition: box-shadow .3s, color .3s, transform .4s var(--pc-ease); }
.pc-pd-fav:hover { box-shadow: inset 0 0 0 1.5px var(--pc-ink); }
.pc-pd-fav.on { color: var(--pc-cta); box-shadow: inset 0 0 0 1.5px var(--pc-cta); }
.pc-pd-fav.on svg { fill: currentColor; }
.pc-pd-fav:active { transform: scale(.94); }
.pc-pd-incart { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pc-ink-2); }
.pc-pd-incart svg { color: #0F7B43; flex: none; }
.pc-pd-incart a { font-weight: 700; color: var(--pc-ink); text-decoration: underline; text-underline-offset: 3px; }
.pc-pd-sup { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-pd-sup em { font-style: normal; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--pc-tint-2); color: var(--pc-primary); font-size: 14px; font-weight: 800; }
.pc-pd-sup > div { flex: 1; min-width: 0; }
.pc-pd-sup span { display: block; font-size: 12px; color: var(--pc-ink-3); }
.pc-pd-sup b { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--pc-ink); overflow-wrap: anywhere; }
.pc-pd-sup small { margin-top: 3px; display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--pc-ink-2); }
.pc-pd-sup a { height: 40px; padding: 0 16px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-line-strong); transition: background .3s, color .3s; }
.pc-pd-sup a:hover { background: var(--pc-ink); color: #fff; box-shadow: none; }
.pc-pd-ask { margin-top: 16px; padding: 4px 12px 4px 4px; border-radius: 99px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pc-ink-2); }
.pc-pd-ask i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; }
.pc-pd-ask b { color: var(--pc-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pc-pd-ask:hover b { text-decoration-thickness: 2px; }
.pc-pd-desc { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--pc-line); }
.pc-pd-desc h2 { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-pd-desc p { margin-top: 12px; max-width: 62ch; font-size: 16px; line-height: 1.7; color: var(--pc-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.pc-pd-more { margin-top: 96px; }
.pc-pd-more-ctrl { display: flex; align-items: center; gap: 16px; flex: none; }
/* Bleeds to the right edge of the window (like the suppliers rail). The padding (offset by negative
margins, so nothing shifts) leaves room for the hover lift and the cards' 2px/3px focus ring. */
.pc-pd-rail { --pc-bleed: max(24px, calc((100vw - 1400px) / 2 + 24px)); margin: 16px calc(-1 * var(--pc-bleed)) 0 -8px; padding: 12px var(--pc-bleed) 18px 8px; scroll-padding-left: 8px; }
@media (max-width: 1100px) {
.pc-shop-bar { flex-direction: column; align-items: stretch; }
.pc-pd-grid { grid-template-columns: 1fr; gap: 28px; }
.pc-pd-gallery { position: static; }
.pc-pd-main { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
.pc-shop-page, .pc-pd { padding-top: 18px; }
.pc-shop-head { flex-direction: column; align-items: stretch; }
.pc-shop-search { flex-basis: auto; height: 50px; }
.pc-shop-cats { flex-wrap: nowrap; overflow-x: auto; margin-inline: -24px; padding-inline: 24px; }
.pc-shop-tools > .pc-select { flex: 1 1 0; min-width: 0; }
.pc-shop-tools select { width: 100%; max-width: none; }
.pc-pd-main { aspect-ratio: 1; border-radius: 26px; }
.pc-pd-thumbs button { width: 68px; height: 68px; border-radius: 14px; }
.pc-pd-price > span { font-size: 30px; }
.pc-pd-qty { order: 1; } .pc-pd-fav { order: 2; margin-left: auto; } .pc-pd-add { order: 3; flex-basis: 100%; }
.pc-pd-sup a { width: 100%; }
.pc-pd-more { margin-top: 72px; }
.pc-pd-more-ctrl .pc-arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pc-pd-add:active:not(:disabled), .pc-pd-fav:active { transform: none; }
}
/* ───── Home page: app additions ───── */
.pc-svc-ctrl[hidden] { display: none; }
/* 3 service cards per view from 1100px up (the shared max-width:1100px block switches to 2 a pixel early). */
@media (width: 1100px) { .pc-svc-track { --pc-per: 3; } }
/* Contain the cards' sr-only text (absolutely positioned) inside their rails' scroll clip. */
.pc-svc, .pc-scard { position: relative; }
/* Focus rings that stay visible on the coloured service panels, the jumbotron and the booking band. */
.pc-svc .pc-acts a:focus-visible, .pc-jumbo-in :where(a, button):focus-visible, .pc-band :where(a, button):focus-visible { outline-color: #fff; }
@supports selector(:has(a)) {
.pc-jumbo .pc-pcard:has(h3 a:focus-visible) { outline-color: #fff; }
}
/* Jumbotron chips: 4px of padding (offset by the margins) keeps focus rings clear of the scroll clip. */
.pc-j-cats { margin: 26px -4px 0; padding: 4px; }
.pc-band .pc-kicker { color: #FFA3A6; }
/* Address card actions (inline styles in the mockup). */
.pc-addr .pc-acts .pc-dir { background: var(--pc-primary); color: #fff; transition: background .3s; }
.pc-addr .pc-acts .pc-dir:hover { background: var(--pc-primary-hover); }
.pc-addr .pc-acts .pc-bk { color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-line-strong); transition: box-shadow .3s; }
.pc-addr .pc-acts .pc-bk:hover { box-shadow: inset 0 0 0 1.5px var(--pc-ink); }
/* Our space without a recorded address: no map, so the points take the full width. */
.pc-place.pc-no-map { grid-template-columns: 1fr; }
@media (min-width: 1101px) { .pc-place.pc-no-map .pc-points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Team: initials when a photo fails to load; the focus ring sits inside the rounded portrait. */
.pc-member-none { width: 100%; height: 100%; display: grid; place-items: center; padding-bottom: 30%; background: var(--pc-tint); color: var(--pc-primary); font-size: 64px; font-weight: 800; letter-spacing: -.04em; }
.pc-member:focus-visible { outline-offset: -3px; }
/* Phones: each chapter action keeps its label on one line, so the two wrap onto their own full-width rows (as in the mockup) instead of squeezing "Book this service" onto three lines. */
@media (max-width: 640px) { .pc-ch-foot > a { white-space: nowrap; } }
/* ───── Booking page ───── */
/*
* Ported from docs/superpowers/specs/assets/primecheck/booking-mockup.html with the same renaming
* rules (components/booking/*). Exceptions: the page root is `.pc-booking` (`.pc-bk` is the "Book"
* link class), the mockup's `.select` is `.pc-bk-select` (`.pc-select` is the products page sort
* control), the steps' `li` is `.pc-bk-step` (`.pc-step` is the product card stepper), `.crumbs`
* reuses the shared `.pc-crumbs` list and `.sr-only` is `.pc-sr`. Inline errors, the restored banner
* and the group fields render only when shown, so they need no display toggles; the unused
* service-tile styles were not ported, and the mockup's `pin` entrance reuses `pc-card-in`.
* Selected chips/segments use solid white sub-labels (the mockup's 80-90% white drops below 4.5:1
* on lighter presets such as amber-700). State classes added here, always compounded: done, ok,
* bad, chosen, empty, booked (plus on, show, saved).
*/
.pc-bk-hero { padding: 40px 0 8px; }
.pc-bk-hero .pc-crumbs ol, .pc-bk-hero .pc-crumbs li { gap: 8px; }
.pc-bk-hero .pc-crumbs a { font-weight: 600; }
.pc-bk-hero .pc-h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-top: 16px; }
.pc-bk-hero .pc-lede { margin-top: 12px; max-width: 40rem; }
.pc-assure { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; font-size: 14px; color: var(--pc-ink-2); }
.pc-assure li { display: inline-flex; gap: 8px; align-items: center; }
.pc-assure i { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); }
.pc-bk-grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.pc-bk-form, .pc-sum-col { min-width: 0; }
.pc-steps { display: flex; gap: 6px; list-style: none; margin-bottom: 18px; }
.pc-steps li { flex: 1; min-width: 0; }
.pc-steps a { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; color: var(--pc-ink-3); white-space: nowrap; border-radius: 4px; }
.pc-steps a::before { content: ""; height: 4px; border-radius: 4px; background: #C9D1DE; transition: background .5s var(--pc-ease); }
.pc-steps .pc-bk-step.done a { color: var(--pc-ink); }
.pc-steps .pc-bk-step.done a::before { background: var(--pc-primary); }
.pc-blk { padding: 6px; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(10,31,68,.08); scroll-margin-top: 150px; }
.pc-blk + .pc-blk { margin-top: 16px; }
.pc-blk .pc-in { background: #fff; border-radius: 24px; padding: 26px 26px 28px; box-shadow: inset 0 0 0 1px rgba(10,31,68,.05); }
.pc-blk.bad { box-shadow: inset 0 0 0 1.5px rgba(215,12,17,.5); }
.pc-blk fieldset { border: 0; min-width: 0; margin: 0; padding: 0; }
.pc-blk legend { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--pc-ink); padding: 0; }
.pc-blk legend .pc-no { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--pc-tint); color: var(--pc-primary); transition: background .4s, color .4s; }
.pc-blk.ok legend .pc-no { background: var(--pc-primary); color: #fff; }
.pc-hint { margin-top: 6px; font-size: 13.5px; line-height: normal; color: var(--pc-ink-3); }
.pc-err { margin-top: 10px; font-size: 13px; font-weight: 600; color: #B42318; }
/* service dropdown */
.pc-svc-field { margin-top: 16px; }
.pc-bk-select { position: relative; display: flex; align-items: center; height: 60px; border-radius: 18px; background: #F7F9FD; box-shadow: inset 0 0 0 1px var(--pc-field-line); transition: box-shadow .25s, background .25s; }
.pc-bk-select:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-primary) 40%, transparent); }
.pc-bk-select:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--pc-primary), 0 0 0 4px color-mix(in srgb, var(--pc-primary) 10%, transparent); }
.pc-bk-select.chosen { background: var(--pc-tint); box-shadow: inset 0 0 0 1.5px var(--pc-primary); }
.pc-bk-select.chosen:focus-within { box-shadow: inset 0 0 0 1.5px var(--pc-primary), 0 0 0 4px color-mix(in srgb, var(--pc-primary) 10%, transparent); }
.pc-sel-ic { position: absolute; left: 10px; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: var(--pc-primary); box-shadow: inset 0 0 0 1px rgba(10,31,68,.08); pointer-events: none; transition: background .3s, color .3s; }
.pc-bk-select.chosen .pc-sel-ic { background: var(--pc-primary); color: #fff; box-shadow: none; }
.pc-bk-select select { -webkit-appearance: none; appearance: none; width: 100%; height: 100%; padding: 0 48px 0 62px; border: 0; background: transparent; border-radius: 18px; font: 600 15.5px var(--pc-font); color: var(--pc-ink); cursor: pointer; text-overflow: ellipsis; }
.pc-bk-select select:focus { outline: none; }
.pc-bk-select select:invalid { color: #5F6A84; font-weight: 500; }
.pc-bk-select select option, .pc-bk-select select optgroup { color: var(--pc-ink); }
.pc-bk-select .pc-chev { position: absolute; right: 18px; color: var(--pc-ink-2); pointer-events: none; }
.pc-bk-select.bad { box-shadow: inset 0 0 0 1.5px #D92D20; background: #FFF8F7; }
/* segmented */
.pc-seg { margin-top: 16px; display: inline-flex; padding: 5px; border-radius: 99px; background: #F2F5FB; box-shadow: inset 0 0 0 1px var(--pc-field-line); flex-wrap: wrap; }
.pc-seg label { position: relative; }
.pc-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pc-seg input:disabled { cursor: not-allowed; }
.pc-seg span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; font-size: 14px; font-weight: 700; color: var(--pc-ink-2); transition: background .35s var(--pc-ease), color .35s; cursor: pointer; }
.pc-seg input:checked + span { background: var(--pc-primary); color: #fff; }
.pc-seg input:checked + span small { color: #fff; }
.pc-seg input:focus-visible + span { outline: 2px solid var(--pc-primary); outline-offset: 2px; }
.pc-seg small { font-size: 12px; font-weight: 500; color: var(--pc-ink-3); }
.pc-seg input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.pc-group-extra { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; animation: pc-card-in .45s var(--pc-ease); }
/* fields */
.pc-fields { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pc-field.pc-full { grid-column: 1 / -1; }
.pc-field > label { font-size: 13.5px; font-weight: 700; color: var(--pc-ink); }
.pc-field > label em { font-style: normal; font-weight: 500; color: var(--pc-ink-3); }
.pc-field input, .pc-field textarea { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: #F7F9FD; box-shadow: inset 0 0 0 1px var(--pc-field-line); font: 500 15px var(--pc-font); color: var(--pc-ink); transition: box-shadow .25s, background .25s; }
.pc-field textarea { display: block; height: 96px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.pc-field input::placeholder, .pc-field textarea::placeholder { color: #5F6A84; opacity: 1; }
.pc-field input:focus, .pc-field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pc-primary), 0 0 0 4px color-mix(in srgb, var(--pc-primary) 10%, transparent); }
.pc-field.bad input, .pc-field.bad textarea { box-shadow: inset 0 0 0 1.5px #D92D20; background: #FFF8F7; }
.pc-field .pc-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--pc-ink-3); }
.pc-field .pc-meta span:last-child { flex: none; }
.pc-phone { position: relative; }
.pc-phone span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: var(--pc-ink-2); padding-right: 10px; border-right: 1px solid rgba(10,31,68,.12); pointer-events: none; }
.pc-field .pc-phone input { padding-left: 74px; }
.pc-stepper { display: flex; align-items: center; height: 52px; border-radius: 16px; background: #F7F9FD; box-shadow: inset 0 0 0 1px var(--pc-field-line); padding: 0 6px; transition: box-shadow .25s, background .25s; }
.pc-stepper:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--pc-primary), 0 0 0 4px color-mix(in srgb, var(--pc-primary) 10%, transparent); }
.pc-stepper button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: #fff; color: var(--pc-primary); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(10,31,68,.08); }
.pc-field .pc-stepper input, .pc-field .pc-stepper input:focus, .pc-field.bad .pc-stepper input { flex: 1; min-width: 0; height: 100%; text-align: center; background: transparent; box-shadow: none; font-weight: 800; font-size: 16px; padding: 0; }
.pc-field.bad .pc-stepper { box-shadow: inset 0 0 0 1.5px #D92D20; background: #FFF8F7; }
/* dates */
.pc-dates { margin-top: 16px; display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin-left: -2px; margin-right: -2px; }
.pc-date { flex: none; width: 74px; padding: 10px 0 11px; border: 0; border-radius: 18px; background: #F7F9FD; box-shadow: inset 0 0 0 1px var(--pc-field-line); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit; line-height: normal; color: var(--pc-ink); transition: background .3s, box-shadow .3s; }
.pc-date small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-date b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pc-date span { font-size: 11px; color: var(--pc-ink-3); }
.pc-date:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-primary) 35%, transparent); }
.pc-date.on { background: var(--pc-primary); box-shadow: none; color: #fff; }
.pc-date.on small, .pc-date.on span { color: #fff; }
.pc-date:disabled { opacity: .75; color: var(--pc-ink-3); cursor: not-allowed; background: repeating-linear-gradient(135deg, #F7F9FD 0 6px, #EEF2F8 6px 12px); }
.pc-date:disabled:hover { box-shadow: inset 0 0 0 1px var(--pc-field-line); }
.pc-date.pc-skel { height: 70px; cursor: default; }
.pc-other-date { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--pc-ink-2); }
.pc-other-date input { height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: #F7F9FD; box-shadow: inset 0 0 0 1px var(--pc-field-line); font: 600 14px var(--pc-font); color: var(--pc-ink); }
.pc-other-date input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #D92D20; background: #FFF8F7; }
.pc-win-wrap { margin-top: 22px; }
.pc-win-wrap > b { font-size: 13.5px; margin-right: 4px; }
.pc-consent { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--pc-ink-2); cursor: pointer; }
.pc-consent input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--pc-primary); cursor: pointer; }
.pc-consent.bad { color: #B42318; }
/* honeypot: off-screen (not display:none) so naive bots still fill it */
.pc-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* alert (send failures) */
.pc-bk-alert { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; background: #FEF3F2; color: #912018; box-shadow: inset 0 0 0 1px #FDA29B; font-size: 14px; line-height: 1.5; }
.pc-bk-alert > svg { flex: none; margin-top: 1px; }
.pc-bk-alert p { font-weight: 700; }
.pc-bk-alert-acts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-bk-alert-acts a { height: 38px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--pc-ink); background: #fff; box-shadow: inset 0 0 0 1px #7D879C; }
.pc-bk-alert-acts a i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; }
/* summary */
.pc-sum { position: sticky; top: 150px; }
.pc-sum .pc-in { padding: 24px; }
.pc-sum h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--pc-ink); }
.pc-sum h2 span { font-size: 12px; font-weight: 700; color: var(--pc-ink-3); }
.pc-sum dl { margin-top: 16px; display: grid; gap: 0; }
.pc-sum dl div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(10,31,68,.07); font-size: 14px; }
.pc-sum dt { color: var(--pc-ink-3); font-weight: 600; }
.pc-sum dd { font-weight: 700; color: var(--pc-ink); min-width: 0; overflow-wrap: anywhere; }
.pc-sum .pc-sum-v.empty { font-weight: 500; color: var(--pc-ink-3); }
.pc-sum .pc-submit { margin-top: 18px; width: 100%; height: 56px; border: 0; justify-content: space-between; font-family: inherit; }
.pc-btn.pc-red:disabled { opacity: .7; cursor: progress; }
/* End-of-form actions: Book / Save right after the last step (desktop users don't have to look across to the summary). */
.pc-bk-actions .pc-in { padding-top: 22px; padding-bottom: 22px; }
.pc-bk-actions-row { display: flex; gap: 12px; align-items: center; }
.pc-bk-book { flex: 1 1 auto; height: 56px; border: 0; justify-content: space-between; font-family: inherit; }
.pc-bk-actions .pc-save { margin-top: 0; width: auto; flex: 0 0 auto; height: 56px; padding: 0 22px; }
.pc-bk-actions-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--pc-ink-3); }
.pc-save { margin-top: 10px; width: 100%; height: 50px; border: 0; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: var(--pc-ink); font: 700 14.5px var(--pc-font); box-shadow: inset 0 0 0 1.5px var(--pc-ink); transition: background .3s var(--pc-ease), color .3s var(--pc-ease), transform .3s var(--pc-ease); }
.pc-save:hover { background: var(--pc-ink); color: #fff; }
.pc-save:active { transform: scale(.98); }
.pc-save.saved { background: #E8F5EC; color: #11602B; box-shadow: inset 0 0 0 1.5px #177A35; }
.pc-save.saved svg { animation: pc-chip-pop .6s cubic-bezier(.34,1.56,.64,1); }
.pc-restored { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 12px 12px 16px; border-radius: 18px; background: #E8F5EC; color: #11602B; box-shadow: inset 0 0 0 1px #9CCFAE; font-size: 14px; font-weight: 600; line-height: 1.45; animation: pc-card-in .5s var(--pc-ease); }
.pc-restored > svg { flex: none; }
.pc-restored span { flex: 1; }
.pc-restored button { height: 36px; padding: 0 14px; flex: none; border: 0; border-radius: 99px; background: #fff; color: var(--pc-ink); font: 700 13px var(--pc-font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--pc-field-line); }
.pc-toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); display: inline-flex; gap: 10px; align-items: center; padding: 13px 18px; border-radius: 99px; background: var(--pc-ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; transition: opacity .45s var(--pc-ease), transform .45s var(--pc-ease); }
.pc-toast:empty { padding: 0; }
.pc-toast.show { opacity: 1; transform: translate(-50%, 0); }
.pc-sum .pc-fine { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--pc-ink-3); text-align: center; }
.pc-talk { margin-top: 14px; display: flex; gap: 8px; }
.pc-talk a { flex: 1; min-width: 0; height: 46px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--pc-ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(10,31,68,.12); transition: box-shadow .3s; }
.pc-talk a:hover { box-shadow: inset 0 0 0 1.5px var(--pc-ink); }
.pc-talk a i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; }
.pc-mobile-bar { display: none; }
/* confirmation */
.pc-bk-grid.booked { grid-template-columns: minmax(0, 760px); justify-content: center; }
.pc-done-card { animation: pc-card-in .6s var(--pc-ease); scroll-margin-top: 150px; }
.pc-done-card .pc-in { padding: 40px; text-align: center; }
.pc-tick { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #E8F7EE; color: #12804A; }
.pc-tick svg { stroke-dasharray: 30; stroke-dashoffset: 30; animation: pc-draw-tick .7s .2s var(--pc-ease) forwards; }
@keyframes pc-draw-tick { to { stroke-dashoffset: 0; } }
.pc-done-card .pc-h2 { margin: 20px auto 0; max-width: none; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--pc-ink); }
.pc-done-card .pc-h2:focus { outline: none; }
.pc-done-card .pc-ref { margin-top: 14px; display: inline-flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 99px; background: var(--pc-tint); color: var(--pc-primary); font-weight: 800; letter-spacing: .04em; }
.pc-done-card .pc-next { margin: 16px auto 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--pc-ink-2); }
.pc-done-card dl { margin: 26px auto 0; max-width: 520px; text-align: left; }
.pc-done-card dl div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(10,31,68,.07); font-size: 14px; }
.pc-done-card dt { color: var(--pc-ink-3); font-weight: 600; }
.pc-done-card dd { font-weight: 700; color: var(--pc-ink); overflow-wrap: anywhere; white-space: pre-line; }
.pc-done-acts { margin-top: 28px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* booking paused (no bookable date, e.g. every day closed): reuses the confirmation card */
.pc-bk-paused-ic { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); }
@media (max-width: 1100px) {
.pc-booking { padding-bottom: 90px; }
.pc-bk-grid { grid-template-columns: minmax(0, 1fr); }
.pc-sum-col { display: none; }
.pc-blk, .pc-done-card { scroll-margin-top: 96px; }
/* Keep keyboard-focused fields and links clear of the fixed booking bar below. */
html:has(.pc-mobile-bar) { scroll-padding-bottom: 96px; }
.pc-root:has(.pc-mobile-bar) .pc-footer { padding-bottom: 84px; }
.pc-mobile-bar { display: flex; position: fixed; z-index: 45; left: 12px; right: 12px; bottom: 12px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 99px; background: var(--pc-ink); color: #fff; line-height: normal; }
.pc-mobile-bar > div:first-child { min-width: 0; }
.pc-mobile-bar small { display: block; font-size: 11px; color: #C9D3E8; }
.pc-mobile-bar b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-mobile-bar .pc-mb-acts { display: flex; gap: 8px; align-items: center; flex: none; }
.pc-mobile-bar .pc-mb-save { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.pc-mobile-bar .pc-btn { height: 46px; border: 0; font-family: inherit; }
.pc-mobile-bar :where(a, button):focus-visible { outline-color: #fff; }
.pc-toast { bottom: 92px; }
}
@media (max-width: 640px) {
.pc-steps a { font-size: 0; gap: 0; }
.pc-fields, .pc-group-extra { grid-template-columns: 1fr; }
.pc-blk .pc-in { padding: 20px 16px 22px; }
.pc-seg { display: flex; } .pc-seg label { flex: 1; } .pc-seg span { justify-content: center; width: 100%; padding: 0 10px; }
.pc-done-card .pc-in { padding: 28px 18px; } .pc-done-card dl div { grid-template-columns: 1fr; gap: 2px; }
.pc-bk-actions-row { flex-direction: column; align-items: stretch; }
.pc-bk-actions .pc-save { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.pc-group-extra, .pc-restored, .pc-done-card, .pc-save.saved svg { animation: none; }
.pc-tick svg { animation: none; stroke-dashoffset: 0; }
.pc-steps a::before, .pc-toast { transition: none; }
.pc-toast, .pc-toast.show { transform: translate(-50%, 0); }
.pc-save:active { transform: none; }
}
/* ───── My account: appointments ───── */
.pc-acct { padding: 32px 0 96px; }
.pc-acct-head { margin-top: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pc-acct-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-cta); }
.pc-acct-head h1 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--pc-ink); }
.pc-acct-btn { height: 50px; border: 0; font-family: inherit; padding: 0 22px; gap: 10px; text-decoration: none; }
.pc-acct-tabs { margin-top: 24px; display: flex; gap: 6px; border-bottom: 1px solid var(--pc-line); }
.pc-acct-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14.5px; font-weight: 600; color: var(--pc-ink-2); }
.pc-acct-tabs a:hover { color: var(--pc-ink); }
.pc-acct-tabs a.on { color: var(--pc-primary); border-bottom-color: var(--pc-primary); font-weight: 700; }
.pc-acct-group { margin-top: 32px; }
.pc-acct-group h2 { margin: 0 0 14px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--pc-ink); }
.pc-acct-none { margin: 0; font-size: 14.5px; color: var(--pc-ink-3); }
.pc-acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pc-appt { display: flex; justify-content: space-between; gap: 24px; padding: 20px 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-appt-main { min-width: 0; }
.pc-appt h3 { margin: 10px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--pc-ink); }
.pc-appt-when, .pc-appt-for { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--pc-ink-2); }
.pc-appt-when svg, .pc-appt-for svg { flex: none; color: var(--pc-primary); }
.pc-appt-status { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.pc-appt-status.requested { background: #FFF4E0; color: #7A4100; }
.pc-appt-status.confirmed { background: #E8F5EC; color: #11602B; }
.pc-appt-status.completed { background: var(--pc-surface-2); color: var(--pc-ink-2); }
.pc-appt-status.cancelled { background: #FDECEC; color: #9B1C1C; }
.pc-appt-meta { margin: 0; display: grid; gap: 10px; align-content: start; text-align: right; flex: none; }
.pc-appt-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-appt-meta dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--pc-ink); }
.pc-acct-empty { margin-top: 32px; padding: 40px 24px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--pc-line); text-align: center; display: grid; justify-items: center; gap: 10px; }
.pc-acct-empty-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-tint); color: var(--pc-primary); }
.pc-acct-empty h2 { margin: 6px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--pc-ink); }
.pc-acct-empty p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--pc-ink-2); }
.pc-acct-empty .pc-acct-btn, .pc-acct-empty .pc-acct-contact { margin-top: 10px; }
.pc-acct-help { margin-top: 28px; padding: 18px 20px; border-radius: 20px; background: var(--pc-surface-2); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pc-acct-help p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.55; color: var(--pc-ink-2); }
.pc-acct-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-acct-contact a { height: 44px; padding: 0 16px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--pc-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--pc-field-line); }
.pc-acct-contact a:hover { box-shadow: inset 0 0 0 1.5px var(--pc-ink); }
.pc-acct-contact a i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; }
:where(.pc-acct) :where(a, button):focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; }
@media (max-width: 640px) {
.pc-acct { padding-top: 20px; }
.pc-acct-head .pc-acct-btn { width: 100%; justify-content: center; }
.pc-appt { flex-direction: column; gap: 14px; padding: 18px; }
.pc-appt-meta { text-align: left; grid-template-columns: 1fr 1fr; }
}