/* ==========================================================================
   PddFalcon storefront — layout chrome (marketplace style)
   Header (dark navy, two rows), search, category bar + mega menu, phone
   menu, bottom navigation, cart drawer, filter sheet, dialogs, footer.
   ========================================================================== */

/* ---- Header (light, two rows) ------------------------------------------------ */
.s-header { position: sticky; inset-block-start: 0; z-index: var(--s-z-header); background: var(--s-surface); color: var(--s-ink); box-shadow: 0 1px 0 var(--s-line), 0 6px 20px rgb(13 36 84 / 0.06); }
.s-header__top { background: var(--s-surface); }
.s-header__row {
  display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "burger brand . side" "search search search search";
  align-items: center; gap: 0.5rem 0.6rem; padding-block: 0.6rem;
}
.s-header__burger { grid-area: burger; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border: 0; border-radius: var(--s-radius-sm); background: transparent; color: var(--s-brand-800); }
.s-header__burger svg { inline-size: 1.5rem; block-size: 1.5rem; }
.s-header__brand { grid-area: brand; display: inline-flex; align-items: center; }
.s-brand-logo { block-size: 2.3rem; inline-size: auto; object-fit: contain; }
.s-search { grid-area: search; position: relative; }
.s-header__side { grid-area: side; display: flex; align-items: center; gap: 0.25rem; justify-self: end; }
.s-header__pin { display: none; }
@media (min-width: 62rem) {
  .s-header__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search side"; gap: var(--s-6); padding-block: 0.9rem; }
  .s-header__burger { display: none; }
  .s-brand-logo { block-size: 2.9rem; }
  .s-header__pin { display: inline-flex; }
  .s-header__side { gap: var(--s-3); }
}
@media (min-width: 80rem) { .s-brand-logo { block-size: 3.2rem; } .s-header__row { gap: var(--s-8); } }

.s-header__item { display: inline-flex; align-items: center; gap: 0.45rem; position: relative; min-block-size: 2.75rem; padding: 0.3rem 0.6rem; border: 0; border-radius: var(--s-radius); background: transparent; color: var(--s-ink); cursor: pointer; line-height: 1.1; white-space: nowrap; transition: background-color var(--s-fast) var(--s-ease); }
.s-header__item:hover { background: var(--s-cream); }
.s-header__item svg { inline-size: 1.4rem; block-size: 1.4rem; flex: none; color: var(--s-brand-800); }
.s-header__text { display: none; flex-direction: column; text-align: start; }
.s-header__text small { font-size: 0.68rem; color: var(--s-muted); }
.s-header__text strong { font-size: var(--s-text-sm); font-weight: 700; color: var(--s-brand-900); }
@media (min-width: 62rem) { .s-header__text { display: flex; } }
.s-hotline { display: none; align-items: center; gap: 0.6rem; color: inherit; padding-inline-end: var(--s-3); border-inline-end: 1px solid var(--s-line); }
@media (min-width: 72rem) { .s-hotline { display: inline-flex; } }
.s-hotline__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--s-brand-100); color: var(--s-brand-800); }
.s-hotline__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.s-lang { position: relative; }
.s-lang__btn span { font-size: var(--s-text-sm); font-weight: 600; }
.s-lang__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.35rem); min-inline-size: 10rem; padding: 0.35rem; list-style: none; background: var(--s-surface); border-radius: var(--s-radius); box-shadow: var(--s-shadow-lg); border: 1px solid var(--s-line); z-index: 5; }
.s-lang__list a { display: block; padding: 0.55rem 0.75rem; border-radius: var(--s-radius-sm); color: var(--s-ink); font-size: var(--s-text-sm); }
.s-lang__list a:hover, .s-lang__list a[aria-selected="true"] { background: var(--s-brand-100); color: var(--s-brand-800); }

/* Search: category select + input + round navy button, all inside one pill */
.s-search__form { position: relative; display: flex; align-items: stretch; border: 1px solid var(--s-line); border-radius: var(--s-radius-pill); background: var(--s-cream); overflow: hidden; transition: border-color var(--s-fast) var(--s-ease), box-shadow var(--s-fast) var(--s-ease), background-color var(--s-fast) var(--s-ease); }
.s-search__form:hover { border-color: var(--s-brand-200); }
.s-search__form:focus-within { border-color: var(--s-brand-500); background: #fff; box-shadow: 0 0 0 4px rgb(42 90 192 / 0.12), 0 8px 24px rgb(13 36 84 / 0.08); }
.s-search__cat { display: none; flex: none; max-inline-size: 11rem; padding: 0 2rem 0 1.1rem; border: 0; border-inline-end: 1px solid var(--s-line); background: transparent; color: var(--s-ink-soft); font-size: var(--s-text-sm); font-weight: 600; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 0.9rem; }
@media (min-width: 62rem) { .s-search__cat { display: block; } }
.s-search__cat:focus { outline: none; }
.s-search__input { flex: 1; min-inline-size: 0; min-block-size: 2.75rem; padding: 0.5rem 0.9rem 0.5rem 1rem; border: 0; background: transparent; color: var(--s-ink); font-size: var(--s-text-md); }
@media (min-width: 62rem) { .s-search__input { min-block-size: 3rem; } }
.s-search__input:focus { outline: none; }
.s-search__input::placeholder { color: var(--s-muted); }
.s-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.s-search__go { flex: none; margin: 0.25rem; inline-size: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--s-brand-800); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgb(13 36 84 / 0.25); transition: background-color var(--s-fast) var(--s-ease), transform var(--s-fast) var(--s-ease); }
.s-search__go:hover { background: var(--s-accent-500); }
.s-search__go:active { transform: scale(0.96); }
.s-search__go svg { inline-size: 1.2rem; block-size: 1.2rem; }
.s-suggest { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 0.4rem); z-index: 20; background: var(--s-surface); color: var(--s-ink); border: 1px solid var(--s-line); border-radius: var(--s-radius); box-shadow: var(--s-shadow-lg); overflow: hidden; }
.s-suggest a, .s-suggest [role="option"] { display: flex; align-items: center; gap: var(--s-3); padding: 0.6rem 0.9rem; color: var(--s-ink); font-size: var(--s-text-sm); }
.s-suggest a:hover, .s-suggest [aria-selected="true"] { background: var(--s-brand-100); }
.s-suggest img { inline-size: 2.5rem; block-size: 2.5rem; object-fit: contain; border-radius: var(--s-radius-sm); background: #fff; }

/* Row 2 */
.s-header__nav { display: none; background: var(--s-brand-100); border-block-start: 1px solid var(--s-line); }
@media (min-width: 62rem) { .s-header__nav { display: block; } }
.s-header__navrow { display: flex; align-items: stretch; gap: var(--s-5); }
.s-browse { position: relative; flex: none; inline-size: 17rem; }
.s-browse__btn { display: flex; align-items: center; gap: 0.6rem; block-size: 100%; min-block-size: 3rem; padding: 0.5rem 1rem; background: var(--s-cool-500); color: var(--s-brand-950); font-weight: 800; font-size: var(--s-text-sm); letter-spacing: 0.01em; }
.s-browse__btn svg { inline-size: 1.2rem; block-size: 1.2rem; }
.s-browse__chev { margin-inline-start: auto; transition: rotate var(--s-fast) var(--s-ease); }
.s-browse:hover .s-browse__chev { rotate: 180deg; }
.s-browse__panel { position: absolute; inset-inline-start: 0; inset-block-start: 100%; z-index: 40; inline-size: 100%; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 0 0 var(--s-radius) var(--s-radius); box-shadow: var(--s-shadow-xl); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity var(--s-fast) var(--s-ease), translate var(--s-fast) var(--s-ease), visibility 0s linear var(--s-fast); }
.s-browse:hover .s-browse__panel, .s-browse:focus-within .s-browse__panel { opacity: 1; visibility: visible; translate: 0; transition-delay: 0s; }
.s-browse__list { padding: 0.35rem 0; }
.s-browse__item { position: relative; }
.s-browse__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1rem; color: var(--s-ink); font-size: var(--s-text-sm); font-weight: 500; border-block-end: 1px solid var(--s-line-soft); }
.s-browse__link img { inline-size: 2rem; block-size: 2rem; border-radius: 50%; object-fit: cover; background: var(--s-line-soft); }
.s-browse__dot { inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--s-brand-100); }
.s-browse__arrow { margin-inline-start: auto; inline-size: 1rem; block-size: 1rem; color: var(--s-muted); }
.s-browse__item:hover > .s-browse__link { background: var(--s-brand-100); color: var(--s-brand-800); }
.s-browse__sub { position: absolute; inset-inline-start: 100%; inset-block-start: 0; z-index: 41; min-inline-size: 16rem; padding: var(--s-4); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius); box-shadow: var(--s-shadow-xl); opacity: 0; visibility: hidden; transition: opacity var(--s-fast) var(--s-ease); }
.s-browse__item--has-menu:hover > .s-browse__sub { opacity: 1; visibility: visible; }
.s-browse__subtitle { display: block; margin-block-end: 0.5rem; font-family: var(--s-font-display); font-weight: 700; color: var(--s-brand-800); font-size: var(--s-text-sm); }
.s-browse__sub ul { display: grid; gap: 0.1rem; }
.s-browse__sub a { display: flex; justify-content: space-between; gap: var(--s-3); padding: 0.4rem 0.5rem; margin-inline: -0.5rem; border-radius: var(--s-radius-sm); color: var(--s-ink-soft); font-size: var(--s-text-sm); }
.s-browse__sub a:hover { background: var(--s-brand-100); color: var(--s-brand-800); }
.s-browse__sub small { color: var(--s-muted); }
.s-browse__all a { display: block; padding: 0.6rem 1rem; color: var(--s-brand-500); font-weight: 600; font-size: var(--s-text-sm); }

.s-nav { flex: 1 1 auto; min-inline-size: 0; }
.s-nav__list { display: flex; align-items: center; block-size: 100%; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.s-nav__list::-webkit-scrollbar { display: none; }
.s-nav__list > li { position: relative; flex: none; }
.s-nav__link { display: inline-flex; align-items: center; gap: 0.3rem; min-block-size: 3rem; padding: 0.4rem 0.8rem; color: var(--s-ink); font-size: var(--s-text-sm); font-weight: 600; white-space: nowrap; border-block-end: 2px solid transparent; cursor: pointer; transition: color var(--s-fast) var(--s-ease), border-color var(--s-fast) var(--s-ease); }
.s-nav__link:hover, .s-nav__link.is-active, .s-nav__item--has-menu:hover > .s-nav__link { color: var(--s-accent-600); border-block-end-color: var(--s-accent-500); }
.s-nav__link--hot { color: var(--s-accent-600); }
.s-nav__mark { font-size: 0.7em; opacity: 0.6; }
.s-header__actions { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.s-header__icon { position: relative; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--s-brand-800); cursor: pointer; transition: background-color var(--s-fast) var(--s-ease); }
.s-header__icon:hover { background: var(--s-surface); }
.s-header__icon svg { inline-size: 1.45rem; block-size: 1.45rem; }
.s-header__count { position: absolute; inset-block-start: 0.15rem; inset-inline-end: 0.1rem; min-inline-size: 1.1rem; block-size: 1.1rem; padding-inline: 0.28rem; border-radius: var(--s-radius-pill); background: var(--s-accent-500); color: #fff; font-size: 0.65rem; font-weight: 800; line-height: 1.1rem; text-align: center; box-shadow: 0 0 0 2px var(--s-brand-100); }
.s-header__user { display: inline-flex; align-items: center; gap: 0.5rem; margin-inline-start: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: var(--s-radius-pill); background: var(--s-surface); border: 1px solid var(--s-line); color: var(--s-ink); }
.s-header__user:hover { border-color: var(--s-brand-500); }
.s-header__avatar { display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border-radius: 50%; background: var(--s-brand-800); color: #fff; }
.s-header__avatar svg { inline-size: 1.2rem; block-size: 1.2rem; }
.s-header__user .s-header__text { display: flex; }

.s-mega { position: absolute; inset-inline-start: 0; inset-block-start: 100%; z-index: 30; min-inline-size: 16rem; padding: var(--s-4); color: var(--s-ink); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius); box-shadow: var(--s-shadow-xl); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity var(--s-fast) var(--s-ease), translate var(--s-fast) var(--s-ease), visibility 0s linear var(--s-fast); }
.s-nav__item--has-menu:hover > .s-mega, .s-nav__item--has-menu:focus-within > .s-mega { opacity: 1; visibility: visible; translate: 0; transition-delay: 0s; }
.s-mega__heading { display: block; margin-block-end: 0.4rem; font-family: var(--s-font-display); font-weight: 700; font-size: var(--s-text-sm); color: var(--s-brand-800); }
.s-mega__list { display: grid; gap: 0.1rem; }
.s-mega__list a { display: flex; align-items: center; gap: var(--s-2); padding: 0.4rem 0.5rem; margin-inline: -0.5rem; border-radius: var(--s-radius-sm); color: var(--s-ink-soft); font-size: var(--s-text-sm); white-space: nowrap; }
.s-mega__list a:hover { background: var(--s-brand-100); color: var(--s-brand-800); }
.s-mega__pic { inline-size: 2rem; block-size: 2rem; border-radius: 50%; object-fit: cover; background: var(--s-line-soft); }
.s-mega__list--tail { margin-block-start: 0.35rem; padding-block-start: 0.35rem; border-block-start: 1px solid var(--s-line); }
.s-mega__all a { color: var(--s-brand-500); font-weight: 600; }
.s-mega--note, .s-mega__none { color: var(--s-muted); font-size: var(--s-text-sm); white-space: nowrap; }
.s-mega__item--has-menu { position: relative; }
.s-mega--nested { inset-inline-start: 100%; inset-block-start: -0.5rem; }
.s-mega__item--has-menu:hover > .s-mega--nested, .s-mega__item--has-menu:focus-within > .s-mega--nested { opacity: 1; visibility: visible; translate: 0; }
.s-mega__mark { margin-inline-start: auto; opacity: 0.5; }
.s-mega__text { color: var(--s-muted); font-size: var(--s-text-xs); }

/* ---- Deliver-to dialog ---------------------------------------------------------------- */
.s-pindialog { inline-size: min(26rem, calc(100vw - 2rem)); padding: var(--s-6); border: 0; border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-xl); color: var(--s-ink); }
.s-pindialog::backdrop { background: rgb(6 16 49 / 0.55); backdrop-filter: blur(2px); }
.s-pindialog__title { font-size: var(--s-text-xl); margin-block-end: 0.25rem; }
.s-pindialog__close { position: absolute; inset-inline-end: 0.75rem; inset-block-start: 0.75rem; inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--s-cream); color: var(--s-ink); }
.s-pincode { display: grid; gap: 0.75rem; position: relative; }
.s-pincode__row { display: flex; gap: 0.5rem; }
.s-pincode__row .s-input { flex: 1; }
.s-pincode__result { font-size: var(--s-text-sm); }
.s-pincode__result.is-ok { color: var(--s-success); font-weight: 600; }
.s-pincode__result.is-bad { color: var(--s-danger); font-weight: 600; }

/* ---- Phone menu ------------------------------------------------------------------------- */
.s-menu { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--s-z-drawer); inline-size: min(22rem, 88vw); background: var(--s-surface); color: var(--s-ink); box-shadow: var(--s-shadow-xl); translate: -105% 0; transition: translate var(--s-base) var(--s-ease-out); display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.s-menu.is-open { translate: 0 0; }
.s-menu__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); background: var(--s-brand-800); color: #fff; }
.s-menu__head .s-icon-btn { color: #fff; }
.s-menu__body { overflow-y: auto; padding: var(--s-3) var(--s-3) var(--s-8); }
.s-menu__group-label { padding: var(--s-4) var(--s-3) var(--s-2); font-size: var(--s-text-2xs); letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-muted); }
.s-menu__link { display: flex; align-items: center; gap: var(--s-3); min-block-size: 2.9rem; padding: 0.5rem var(--s-3); border-radius: var(--s-radius); color: var(--s-ink); font-weight: 500; }
.s-menu__link:hover { background: var(--s-brand-100); color: var(--s-brand-800); }
.s-menu__link--all { color: var(--s-brand-500); font-weight: 600; }
.s-menu__pic { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; object-fit: cover; background: var(--s-line-soft); }
.s-menu__branch { border-block-end: 1px solid var(--s-line-soft); }
.s-menu__branch > summary { list-style: none; }
.s-menu__branch > summary::-webkit-details-marker { display: none; }
.s-menu__chev { margin-inline-start: auto; transition: rotate var(--s-fast) var(--s-ease); }
.s-menu__branch[open] > summary .s-menu__chev { rotate: 180deg; }
.s-menu__link--branch + * { padding-inline-start: var(--s-4); }
.s-menu__none { padding: 0.5rem var(--s-3); color: var(--s-muted); font-size: var(--s-text-sm); }

.s-icon-btn { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--s-brand-800); }
.s-icon-btn svg { inline-size: 1.5rem; block-size: 1.5rem; }
.s-icon-btn:hover { background: var(--s-cream); }

/* ---- Bottom navigation ------------------------------------------------------------------- */
.s-bottomnav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--s-z-bottomnav); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); block-size: calc(var(--s-bottomnav-height) + var(--s-safe-bottom)); padding-block-end: var(--s-safe-bottom); background: var(--s-surface); border-block-start: 1px solid var(--s-line); box-shadow: 0 -4px 16px rgb(6 16 49 / 0.08); }
@media (min-width: 62rem) { .s-bottomnav { display: none; } }
.s-bottomnav__item { position: relative; display: grid; place-items: center; gap: 0.15rem; border: 0; background: transparent; color: var(--s-muted); font-size: var(--s-text-2xs); font-weight: 600; }
.s-bottomnav__item svg { inline-size: 1.5rem; block-size: 1.5rem; }
.s-bottomnav__item.is-active { color: var(--s-brand-800); }
.s-bottomnav__item.is-active svg { color: var(--s-accent-500); }
/* The current tab may not be signalled by hue alone. Measured on the shipped
   build, active red and inactive muted grey differ by 1.14:1 in greyscale
   (relative luminance 0.1315 vs 0.1567), so a colour-blind visitor reading the
   bar in greyscale got no signal at all — snap.css's 2px icon lift is too
   small to carry the state on its own. Two cues that survive the colour being
   removed: a bar hanging off the top edge of the active cell, and a heavier
   label. Shape and weight only — snap.css still owns the active colour, and
   the bar takes currentColor so it follows whatever that sheet decides. */
.s-bottomnav__item.is-active { font-weight: 700; }
.s-bottomnav__item.is-active::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; inline-size: 1.65rem; block-size: 3px; translate: -50% 0; border-radius: 0 0 var(--s-radius-pill) var(--s-radius-pill); background: currentColor; animation: s-bottomnav-mark 360ms var(--s-ease-out) both; }
/* `translate` and `transform` are separate properties, so the centring offset
   above and this scale compose instead of overwriting each other. */
@keyframes s-bottomnav-mark { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .s-bottomnav__item.is-active::before { animation: none; } }
.s-bottomnav__count { position: absolute; inset-block-start: 0.35rem; inset-inline-start: calc(50% + 0.35rem); min-inline-size: 1.05rem; block-size: 1.05rem; padding-inline: 0.25rem; border-radius: var(--s-radius-pill); background: var(--s-accent-500); color: #fff; font-size: 0.6rem; line-height: 1.05rem; text-align: center; }

/* ---- Cart drawer ---------------------------------------------------------------------------- */
.s-cart { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--s-z-drawer); inline-size: min(27rem, 100vw); background: var(--s-surface); color: var(--s-ink); box-shadow: var(--s-shadow-xl); translate: 105% 0; transition: translate var(--s-base) var(--s-ease-out); display: grid; grid-template-rows: auto 1fr auto; }
.s-cart.is-open { translate: 0 0; }
.s-cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--s-line); }
.s-cart__title { font-size: var(--s-text-lg); }
.s-cart__body { overflow-y: auto; padding: var(--s-3) var(--s-4); }
.s-cart__foot { padding: var(--s-4); border-block-start: 1px solid var(--s-line); background: var(--s-surface); box-shadow: 0 -8px 24px rgb(13 36 84 / 0.06); }
.s-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: var(--s-2); font-weight: 700; font-size: var(--s-text-lg); }
.s-cart__total--grand { font-size: var(--s-text-xl); }
.s-cart__second { margin-block-start: var(--s-2); }

.s-line { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-3); padding-block: var(--s-3); border-block-end: 1px solid var(--s-line-soft); }
.s-line__thumb { inline-size: 4.5rem; block-size: 4.5rem; object-fit: contain; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: #fff; }
.s-line__name { font-weight: 600; font-size: var(--s-text-sm); color: var(--s-ink); }
.s-line__meta { font-size: var(--s-text-xs); color: var(--s-muted); }
.s-line__meta--warn { color: var(--s-warn); }
.s-line__price { font-weight: 700; }
.s-line__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-block-start: 0.4rem; }
.s-line__foot--actions { justify-content: flex-start; }
.s-line__remove { border: 0; background: transparent; color: var(--s-muted); font-size: var(--s-text-xs); text-decoration: underline; padding: 0.25rem; }
.s-line__remove:hover { color: var(--s-danger); }

/* ---- Filter sheet (phone) ------------------------------------------------------------------ */
.s-sheet { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--s-z-drawer); max-block-size: 88dvh; background: var(--s-surface); color: var(--s-ink); border-radius: var(--s-radius-lg) var(--s-radius-lg) 0 0; box-shadow: var(--s-shadow-xl); translate: 0 105%; transition: translate var(--s-base) var(--s-ease-out); display: grid; grid-template-rows: auto 1fr auto; }
.s-sheet.is-open { translate: 0 0; }
.s-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--s-line); }
.s-sheet__body { overflow-y: auto; padding: var(--s-3) var(--s-4); }
.s-sheet__foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-3); padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--s-safe-bottom)); border-block-start: 1px solid var(--s-line); }
@media (min-width: 62rem) { .s-sheet { display: none; } }

/* ---- Modal / quick view --------------------------------------------------------------------- */
.s-modal { position: fixed; inset: 0; z-index: var(--s-z-modal); display: grid; place-items: end center; opacity: 0; visibility: hidden; transition: opacity var(--s-base) var(--s-ease), visibility 0s linear var(--s-base); }
.s-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.s-modal__panel { position: relative; inline-size: 100%; max-inline-size: 56rem; max-block-size: 92dvh; overflow-y: auto; background: var(--s-surface); color: var(--s-ink); border-radius: var(--s-radius-lg) var(--s-radius-lg) 0 0; box-shadow: var(--s-shadow-xl); padding: var(--s-5); translate: 0 20px; transition: translate var(--s-base) var(--s-ease-out); }
.s-modal.is-open .s-modal__panel { translate: 0; }
@media (min-width: 62rem) { .s-modal { place-items: center; padding: var(--s-6); } .s-modal__panel { border-radius: var(--s-radius-lg); padding: var(--s-6); } }
.s-modal__grip { inline-size: 3rem; block-size: 4px; margin: 0 auto var(--s-3); border-radius: 4px; background: var(--s-line); }
@media (min-width: 62rem) { .s-modal__grip { display: none; } }
.s-modal__close { position: absolute; inset-inline-end: 0.75rem; inset-block-start: 0.75rem; }

/* ---- Footer ----------------------------------------------------------------------------------- */
.s-footer { margin-block-start: var(--s-12); color: rgb(255 255 255 / 0.82); }
.s-footer__top-link { display: block; padding: 0.9rem; background: var(--s-brand-700); color: #fff; text-align: center; font-size: var(--s-text-sm); font-weight: 600; }
.s-footer__top-link:hover { background: var(--s-brand-600); color: #fff; text-decoration: none; }
.s-footer__main { background: var(--s-brand-800); }
.s-footer a { color: inherit; }
.s-footer a:hover { color: #fff; text-decoration: underline; }
.s-footer__top { display: grid; gap: var(--s-8); padding-block: var(--s-10) var(--s-8); }
@media (min-width: 48rem) { .s-footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.s-footer__logo { block-size: 2.75rem; inline-size: auto; margin-block-end: var(--s-4); }
.s-footer__blurb { color: rgb(255 255 255 / 0.72); font-size: var(--s-text-sm); max-inline-size: 26rem; }
.s-footer__title { margin-block-end: var(--s-3); color: #fff; font-family: var(--s-font-display); font-size: var(--s-text-sm); font-weight: 700; }
.s-footer__list { display: grid; gap: 0.5rem; font-size: var(--s-text-sm); }
.s-footer__contact { display: grid; gap: 0.6rem; font-size: var(--s-text-sm); }
.s-footer__contact a { display: inline-flex; align-items: center; gap: 0.5rem; }
.s-social { display: flex; gap: 0.5rem; margin-block-start: var(--s-4); }
.s-social a { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: rgb(255 255 255 / 0.08); }
.s-social a:hover { background: var(--s-accent-500); }
.s-social svg { inline-size: 1.1rem; block-size: 1.1rem; }
.s-footer__install { padding-block-end: var(--s-6); }
.s-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); background: var(--s-brand-950); font-size: var(--s-text-xs); color: rgb(255 255 255 / 0.6); }
.s-footer__policies { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-block: var(--s-3); font-size: var(--s-text-xs); }