/* Reactive Shop design system (from the Google Stitch design, reactive_shop/DESIGN.md).
   Emerald is the "operational signal": primary actions, prices, in-stock states — never
   large background areas. Slate carries text and structure; hairline borders + soft
   shadows give depth. Shared by the storefront pages and (via admin.css) the admin. */

:root {
  --primary: #00aa77;
  --primary-hover: #009668;
  --primary-active: #00825a;
  --primary-tint: #e6f7f2;
  --primary-ink: #00825a;
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --surface: #ffffff;
  --canvas: #f8f9ff;
  --blue: #3b82f6;
  --blue-tint: #eff4ff;
  --danger: #dc2626;
  --danger-tint: #fef2f2;
  --warn: #b45309;
  --warn-tint: #fffbeb;

  --radius-sm: .375rem;
  --radius: .5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --shadow-1: 0 1px .1875rem 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  --shadow-2: 0 .5rem 1.5rem -.25rem rgba(15, 23, 42, 0.08), 0 .25rem .5rem -2px rgba(15, 23, 42, 0.03);
  --shadow-3: 0 1.25rem 2rem -.5rem rgba(15, 23, 42, 0.10), 0 .5rem 1rem -.25rem rgba(15, 23, 42, 0.05);
  --shadow-4: 0 1.5rem 3rem -.75rem rgba(15, 23, 42, 0.22);

  --font-display: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 80rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
.hidden, [hidden] { display: none !important; }

/* App shell: the browser page never scrolls. Header (and the phone tab bar) stay put and
   only .app-scroll — the content between them — scrolls, without chaining into the page. */
html:has(body.app-shell) { height: 100%; overflow: hidden; }
/* Same, for browsers without :has() (the scripts add the class); kept as its own rule so they don't drop it. */
html.app-shell-root { height: 100%; overflow: hidden; }
body.app-shell { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; overscroll-behavior: none; }
body.app-shell > .site-header { position: relative; flex: none; }
/* Until storefront.js moves the page into .app-scroll (once the page has loaded), the content
   sits right in the body after the tab bar: it fills the space between header and tab bar, and
   the tab bar is drawn last, so it is at the bottom from the first paint (it showed under the
   header while pages loaded). */
body.app-shell > main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
body.app-shell > .bottom-nav { order: 1; }
.app-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
/* The page's content fills at least the screen, so the footer is always below it: while a page
   loads (or when its content is short) the footer never rides up under the header. */
.app-scroll > main { min-height: 100%; }
/* Everything is sized in rem, and the root size is fluid: ~14px on a small phone, 16px from
   about 1024px wide. The whole UI scales with the screen, and with browser zoom and the
   user's text-size setting (the clamp is in rem, so it follows their base size too). */
html { -webkit-text-size-adjust: 100%; font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.375rem;
  color: var(--slate-700);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--slate-900); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--slate-900); margin: 0; letter-spacing: -0.02em; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
mark { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--slate-500); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Reserve the final icon slot even on a cold/slow connection. font-display:block only
   hides ligature text briefly; the font loader keeps names from flashing afterwards. */
.icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 1.25rem; line-height: 1;
  display: inline-block; letter-spacing: normal; text-transform: none; white-space: nowrap;
  direction: ltr; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle; flex-shrink: 0;
  width: 1em; height: 1em; overflow: hidden; visibility: hidden;
}
html.shop-icons-ready .icon { visibility: inherit; }
.icon.sm { font-size: 1.125rem; }
.icon.xs { font-size: 1rem; }
.icon.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
/* Large screens use more of the width instead of leaving wide empty margins. */
@media (min-width: 1600px) { :root { --container: 100rem; } .container { padding: 0 2rem; } }
@media (min-width: 2200px) { :root { --container: 120rem; } }
@media (max-width: 640px) { .container { padding: 0 1rem; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.75rem; padding: 0 1.125rem; border-radius: var(--radius);
  border: 1px solid transparent; font-weight: 600; font-size: .875rem; cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
  white-space: nowrap; text-decoration: none;
}
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); color: #fff; box-shadow: 0 .375rem .875rem -.375rem rgba(0, 170, 119, 0.55); }
.btn-primary:active:not(:disabled) { background: var(--primary-active); transform: translateY(1px); }
.btn-secondary { background: var(--surface); border-color: var(--slate-200); color: var(--slate-900); }
.btn-secondary:hover:not(:disabled) { border-color: var(--slate-300); background: var(--slate-50); }
.btn-ghost { background: transparent; color: var(--slate-500); }
.btn-ghost:hover:not(:disabled) { color: var(--slate-900); background: var(--slate-100); }
.btn-danger-outline { background: var(--surface); border-color: #fecaca; color: var(--danger); }
.btn-danger-outline:hover:not(:disabled) { background: var(--danger-tint); border-color: #fca5a5; }
.btn-sm { height: 2.125rem; padding: 0 .75rem; font-size: .8125rem; border-radius: var(--radius-sm); }
.btn-lg { height: 3.25rem; font-size: 1rem; }
.btn-block { width: 100%; }
.link { color: var(--primary-ink); font-weight: 500; background: none; border: none; padding: 0; cursor: pointer; }
.link:hover { color: var(--primary-active); text-decoration: underline; }

/* ---------- inputs ---------- */
.input, .select {
  height: 2.75rem; width: 100%; padding: 0 .75rem;
  background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius);
  color: var(--slate-900); transition: border-color 150ms, box-shadow 150ms;
}
.input::placeholder { color: var(--slate-400); }
.input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 .1875rem rgba(0, 170, 119, 0.15); }
.select { appearance: none; padding-right: 2.125rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center; }
.field { display: flex; flex-direction: column; gap: .375rem; }
.field > span, .field-label { font-size: .8125rem; font-weight: 500; color: var(--slate-700); }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--slate-400); pointer-events: none; }
.input-icon .input { padding-left: 2.5rem; }
.check { display: flex; align-items: center; gap: .625rem; cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--primary); cursor: pointer; margin: 0; }

/* toggle switch built on a checkbox */
.switch { position: relative; width: 2.5rem; height: 1.375rem; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--slate-300); border-radius: 62.4375rem; transition: background 150ms; }
.switch span::after { content: ''; position: absolute; top: .1875rem; left: .1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 150ms var(--ease); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(1.125rem); }
.switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- chips, badges, pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem;
  border-radius: 62.4375rem; border: 1px solid var(--slate-200); background: var(--surface);
  color: var(--slate-700); font-size: .8125rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.chip:hover { border-color: var(--slate-300); color: var(--slate-900); }
.chip.on, .chip[aria-pressed="true"] { background: var(--slate-900); border-color: var(--slate-900); color: #fff; }
.chip.green.on { background: var(--primary); border-color: var(--primary); }
.chip .count { color: inherit; opacity: 0.6; font-weight: 500; }
.tag {
  display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: .375rem;
  background: var(--slate-100); color: var(--slate-500); font-size: .75rem; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  border: none; cursor: pointer; transition: background 150ms, color 150ms;
}
.tag:hover { background: var(--primary-tint); color: var(--primary-ink); }
.badge {
  display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .625rem; border-radius: 62.4375rem;
  font-size: .75rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
.badge.green { background: var(--primary-tint); color: var(--primary-ink); box-shadow: inset 0 0 0 1px rgba(0, 170, 119, 0.2); }
.badge.amber { background: var(--warn-tint); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.18); }
.badge.red { background: var(--danger-tint); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18); }
.badge.grey { background: var(--slate-100); color: var(--slate-500); box-shadow: inset 0 0 0 1px var(--slate-200); }
.badge.blue { background: var(--blue-tint); color: #1d4ed8; }
.badge.dark { background: var(--slate-900); color: #fff; }
.count-pill { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .4375rem; border-radius: 62.4375rem; background: var(--blue-tint); color: var(--slate-500); font-size: .75rem; font-weight: 600; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.card-pad { padding: 1.5rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--slate-200); }
.card-head h2 { font-size: 1.25rem; line-height: 1.75rem; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-500); }

/* ---------- site header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(.75rem); -webkit-backdrop-filter: blur(.75rem); border-bottom: 1px solid var(--slate-200); }
.site-header .bar { display: flex; align-items: center; gap: 1rem; height: 4.25rem; }
.logo { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--slate-900); flex-shrink: 0; }
.logo:hover { color: var(--slate-900); }
.logo-mark { width: 2rem; height: 2rem; border-radius: .5625rem; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: 0 .25rem .625rem -.25rem rgba(0, 170, 119, 0.6); }
.logo-mark .icon { font-size: 1.25rem; font-variation-settings: 'FILL' 1; }
.logo b { color: var(--primary); font-weight: 700; }
.header-search { flex: 1; max-width: 32.5rem; }
.header-search .input { height: 2.625rem; background: var(--slate-50); border-color: transparent; border-radius: .625rem; }
.header-search .input:focus { background: var(--surface); }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
/* compact currency & language buttons: the native <select> sits invisibly on top */
.currency-picker, .lang-picker { position: relative; display: inline-flex; align-items: center; gap: .25rem; height: 2.5rem; padding: 0 .5rem 0 .625rem; border-radius: .625rem; border: 1px solid var(--slate-200); background: var(--surface); color: var(--slate-900); font-weight: 600; font-size: .8125rem; cursor: pointer; transition: border-color 150ms, background 150ms; }
.currency-picker:hover, .lang-picker:hover { border-color: var(--slate-300); background: var(--slate-50); }
.currency-picker:focus-within, .lang-picker:focus-within { border-color: var(--primary); box-shadow: 0 0 0 .1875rem rgba(0, 170, 119, 0.15); }
.currency-picker > .icon, .lang-picker > .icon { color: var(--primary-ink); }
.currency-picker .caret, .lang-picker .caret { color: var(--slate-400); }
.currency-picker select, .lang-picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; font-size: 1rem; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .625rem; border: 1px solid transparent; background: transparent; color: var(--slate-700); cursor: pointer; transition: background 150ms; }
.icon-btn:hover { background: var(--slate-100); color: var(--slate-900); }
.cart-btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .75rem 0 .625rem; border-radius: .625rem; background: var(--blue-tint); color: var(--slate-900); font-weight: 600; font-size: .8125rem; }
.cart-btn:hover { background: #e5eeff; }
.cart-btn .n { min-width: 1.375rem; height: 1.375rem; border-radius: 62.4375rem; background: var(--primary); color: #fff; font-size: .75rem; display: inline-grid; place-items: center; padding: 0 .375rem; }
.cart-btn .n.bump { animation: bump 350ms var(--ease); }
@keyframes bump { 50% { transform: scale(1.3); } }
.nav-link { font-weight: 500; color: var(--slate-700); padding: .5rem .625rem; border-radius: var(--radius); }
.nav-link:hover, .nav-link.active { color: var(--slate-900); background: var(--slate-100); }
.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: .625rem; height: 2.75rem; padding: 0 .5rem 0 .25rem; border-radius: .75rem; border: none; background: transparent; cursor: pointer; }
.user-btn:hover { background: var(--slate-100); }
.avatar { width: 2.125rem; height: 2.125rem; border-radius: 50%; background: linear-gradient(135deg, #0f172a, #334155); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .875rem; }
.user-btn .who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.user-btn .who b { font-size: .8125rem; color: var(--slate-900); font-weight: 600; }
.user-btn .who small { font-size: .6875rem; color: var(--primary-ink); font-weight: 500; max-width: 11.5rem; overflow: hidden; text-overflow: ellipsis; }
.menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 14.5rem; background: var(--surface); border: 1px solid var(--slate-200); border-radius: .75rem; box-shadow: var(--shadow-3); padding: .375rem; z-index: 60; }
.menu[hidden] { display: none; }
.menu-user { padding: .4375rem .625rem .375rem; line-height: 1.3; }
.menu-user b { display: block; font-size: .8125rem; font-weight: 600; color: var(--slate-900); }
.menu-user small { display: block; font-size: .75rem; color: var(--primary-ink); font-weight: 500; overflow-wrap: anywhere; }
.menu a, .menu button { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5625rem .625rem; border-radius: .5rem; border: none; background: none; cursor: pointer; font-size: .875rem; color: var(--slate-700); text-align: left; }
.menu a:hover, .menu button:hover { background: var(--slate-100); color: var(--slate-900); }
.menu hr { border: none; border-top: 1px solid var(--slate-200); margin: .375rem 0; }
@media (max-width: 1024px) {
  .user-btn .who, .nav-link.hide-md { display: none; }
}
/* The header stays on one row and never squeezes or wraps its parts: when they don't fit,
   storefront.js hides the least important ones in turn (fit-1, fit-2...): the account name,
   "My Orders", the cart total, the Deals and Shop links, the guides button, then the shop
   name beside the logo mark. */
.nav-link, .cart-btn, .user-btn .who b, .user-btn .who small { white-space: nowrap; }
.header-actions > * { flex-shrink: 0; }
.header-search { min-width: 15rem; } /* room for "Search products…" */
.site-header.fit-1 .user-btn .who,
.site-header.fit-2 .nav-link.hide-md,
.site-header.fit-3 #cartTotalLabel,
.site-header.fit-4 .nav-link,
.site-header.fit-5 .guides-btn,
.site-header.fit-6 .logo .wordmark { display: none; }

/* ---------- account drawer (opened from the phone bottom bar) ---------- */
.menu-btn { display: none; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); animation: fade 150ms var(--ease); }
.drawer { position: fixed; top: 0; bottom: 0; right: 0; z-index: 95; width: min(20rem, 86vw); display: flex; flex-direction: column; gap: .375rem; padding: 1rem;
  background: var(--surface); border-left: 1px solid var(--slate-200); box-shadow: var(--shadow-4);
  transform: translateX(105%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s linear 220ms; overflow-y: auto; }
.drawer.open { transform: none; visibility: visible; transition: transform 220ms var(--ease); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .5rem; }
.drawer-user { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: .875rem; background: #eff4ff; margin-bottom: .375rem; }
.drawer-user b { display: block; color: var(--slate-900); }
.drawer-user small { color: var(--primary-ink); font-weight: 500; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-nav a { display: flex; align-items: center; gap: .875rem; height: 3rem; padding: 0 .75rem; border-radius: .75rem; color: var(--slate-700); font-weight: 500; }
.drawer-nav a:hover { background: var(--slate-100); color: var(--slate-900); }
.drawer-nav a.active { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.drawer-nav a .n { margin-left: auto; min-width: 1.375rem; height: 1.375rem; padding: 0 .4375rem; border-radius: 62.4375rem; background: var(--primary); color: #fff; font-size: .75rem; display: inline-grid; place-items: center; }
.drawer-nav a .n:empty { display: none; }
.drawer-nav hr { border: none; border-top: 1px solid var(--slate-200); margin: .5rem .25rem; }
.drawer-section { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem .75rem; border-top: 1px solid var(--slate-200); margin-top: .5rem; }
.drawer-foot { margin-top: auto; display: grid; gap: .5rem; padding-top: .75rem; }
body.no-scroll { overflow: hidden; }

/* ---------- bottom tab bar (phones, short screens & installed PWA), Material 3 style ---------- */
.bottom-nav { display: none; }
@media (max-width: 900px), (max-height: 620px), (display-mode: standalone), (display-mode: minimal-ui) {
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: calc(3.875rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(.75rem); -webkit-backdrop-filter: blur(.75rem);
    border-top: 1px solid var(--slate-200); box-shadow: 0 -.375rem 1.25rem -.75rem rgba(15, 23, 42, 0.18); }
  .bottom-nav .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem; min-width: 0;
    border: none; background: none; color: var(--slate-500); font-size: .72rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 0; height: auto; }
  .bottom-nav .tab .pill { position: relative; width: 3.5rem; height: 1.875rem; border-radius: 1rem; display: grid; place-items: center; transition: background 200ms var(--ease); }
  .bottom-nav .tab:active .pill { background: var(--slate-100); }
  .bottom-nav .tab.active { color: var(--slate-900); font-weight: 600; }
  .bottom-nav .tab.active .pill { background: var(--primary-tint); color: var(--primary-ink); }
  .bottom-nav .tab.active .icon { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
  .bottom-nav .tab-badge { position: absolute; top: -2px; right: .5rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: 62.4375rem; background: var(--danger); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.125rem; box-shadow: 0 0 0 2px #fff; }
  body:has(.bottom-nav):not(.app-shell) { padding-bottom: calc(4.375rem + env(safe-area-inset-bottom)); }
  body.app-shell .app-scroll { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  body:has(.bottom-nav) .toast, body.has-bottom-nav .toast { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 901px) and (min-height: 621px) and (display-mode: standalone) {
  .bottom-nav { max-width: 34rem; margin: 0 auto .625rem; border: 1px solid var(--slate-200); border-radius: 1.125rem; height: 3.625rem; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  /* Compact single-row mobile header: bolt icon + inline search + actions on one row */
  .site-header .bar { flex-wrap: nowrap; height: 3.125rem; padding-top: 0; padding-bottom: 0; gap: .5rem; }
  .site-header .logo .wordmark { display: none; }
  .header-search { order: 0; flex: 1 1 auto; min-width: 0; max-width: none; }
  .header-search .input { height: 2.25rem; font-size: .8125rem; padding-left: 2.125rem; border-radius: .5625rem; }
  .header-search.input-icon .icon { left: .5625rem; font-size: 1.125rem; }
  .header-actions { margin-left: 0; gap: .25rem; }
  .cart-btn { display: none; }
  .logo-mark { width: 1.875rem; height: 1.875rem; }
  .logo { font-size: 1.125rem; }
}
/* ---------- page scaffolding ---------- */
.page { padding: 1.75rem 0 3.5rem; }
.crumbs { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--slate-500); margin-bottom: .875rem; }
.crumbs a:hover { color: var(--slate-900); }
.crumbs .icon { font-size: 1rem; }
.page-title { font-size: 2.125rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -0.025em; }
.page-sub { color: var(--slate-500); margin: .375rem 0 0; max-width: 38.75rem; }
@media (max-width: 640px) {
  .page { padding: 1.125rem 0 2rem; }
  .page-title { font-size: 1.625rem; line-height: 2rem; }
  .page-sub { font-size: .8125rem; }
}

/* ---------- footer ---------- */
.site-footer { background: #eff4ff; border-top: 1px solid var(--slate-200); margin-top: 1.5rem; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-top: 2.5rem; padding-bottom: 1.75rem; }
.site-footer h4 { font-size: .9375rem; margin-bottom: .75rem; }
.site-footer p { color: var(--slate-500); margin: .75rem 0 0; max-width: 21.25rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: var(--slate-500); }
.site-footer ul a:hover { color: var(--slate-900); }
.site-footer .legal { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--slate-200); padding-top: 1rem; padding-bottom: 1.5rem; font-size: .75rem; color: var(--slate-500); }
@media (max-width: 640px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } .site-footer .cols > :first-child { grid-column: 1 / -1; } }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 200; display: flex; align-items: center; gap: .625rem;
  background: var(--slate-900); color: #fff; padding: .75rem 1rem; border-radius: .75rem; box-shadow: var(--shadow-3); font-size: .875rem;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); max-width: calc(100vw - 2rem); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .icon { color: #58dda6; }
.toast.error { background: #7f1d1d; }
.toast.error .icon { color: #fecaca; }
.toast a { color: #58dda6; font-weight: 600; margin-left: .25rem; }
.toast a:hover { color: #77fac1; }

/* ---------- Google sign-in card (signed-out visitors, shop page) ---------- */
.signin-card { position: fixed; top: 5rem; right: 1.5rem; z-index: 60; width: 23rem; max-width: calc(100vw - 2rem);
  display: grid; gap: .875rem; padding: 1.125rem 1.125rem 1rem; background: var(--surface); border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-4);
  opacity: 0; transform: translateY(-.5rem); pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.signin-card.show { opacity: 1; transform: none; pointer-events: auto; }
.signin-card-head { display: flex; align-items: flex-start; gap: .75rem; }
.signin-card-head > div { flex: 1; min-width: 0; }
.signin-card-head b { display: block; font-family: var(--font-display); font-size: 1.0625rem; color: var(--slate-900); }
.signin-card-head small { display: block; margin-top: .125rem; color: var(--slate-500); font-size: .8125rem; line-height: 1.25rem; }
.signin-card-head .icon-btn { width: 2rem; height: 2rem; margin: -.25rem -.375rem 0 0; flex: none; }
.signin-card-mark { width: 2.5rem; height: 2.5rem; flex: none; border-radius: .75rem; background: var(--primary-tint); color: var(--primary-ink); display: grid; place-items: center; }
.signin-card-button { min-height: 2.75rem; display: flex; justify-content: center; }
.signin-card-more { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; font-size: .8125rem; font-weight: 500; color: var(--slate-500); }
.signin-card-more:hover { color: var(--primary-ink); }
/* phones & short screens: keep the sign-in card compact above the bottom navbar */
@media (max-width: 760px) {
  .signin-card {
    top: auto;
    bottom: calc(var(--bottom-nav-h, 52px) + .5rem + env(safe-area-inset-bottom, 0px));
    left: .75rem; right: .75rem;
    width: auto; max-width: none;
    padding: .75rem .9rem; gap: .5rem; border-radius: 1rem;
    transform: translateY(.5rem);
  }
  .signin-card-mark { width: 2rem; height: 2rem; border-radius: .6rem; }
  .signin-card-head b { font-size: .9375rem; }
  .signin-card-head small { font-size: .75rem; line-height: 1.1rem; }
}
@media (max-height: 700px) {
  .signin-card { padding: .625rem .875rem; gap: .45rem; }
  .signin-card-head small { font-size: .72rem; line-height: 1.1; }
}

/* ---------- 1-click Google Sign-in button (saved Google account) ---------- */
.saved-google-btn, .presaved-google-btn {
  width: 100%;
  min-height: 2.875rem;
  padding: .375rem .875rem .375rem .5rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}
.saved-google-btn:hover, .presaved-google-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.saved-google-btn:active, .presaved-google-btn:active {
  background: #f1f5f9;
}
.saved-google-btn:disabled, .presaved-google-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}
.saved-avatar, .presaved-avatar {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, #0f172a 0%, #00aa77 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: .875rem;
  display: grid;
  place-items: center;
  object-fit: cover;
  user-select: none;
}
.saved-copy, .presaved-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: .0625rem;
}
.saved-copy b, .presaved-copy b {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-copy small, .presaved-copy small, .saved-email, .presaved-email {
  display: block !important;
  font-size: .78rem;
  font-weight: 500;
  color: #475569;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-g, .presaved-g {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
.saved-google-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--slate-500);
  background: none;
  border: none;
  padding: .25rem;
  cursor: pointer;
  text-decoration: underline;
  transition: color 150ms ease;
}
.saved-google-switch:hover {
  color: var(--primary-ink);
}

/* ---------- Progressive Web App (PWA) install button & responsive banner ---------- */
.pwa-install-btn { gap: .375rem; border-color: rgba(0, 170, 119, 0.35); background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.pwa-install-btn:hover:not(:disabled) { background: #d4f2e7; border-color: var(--primary); color: var(--primary-active); }
.site-header.fit-3 .pwa-install-label { display: none; }
@media (max-width: 900px) {
  .pwa-install-btn { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: .5625rem; }
  .pwa-install-btn .pwa-install-label { display: none; }
}
.pwa-banner {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 78;
  width: min(25rem, calc(100vw - 1.5rem));
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .875rem;
  background: var(--surface); border: 1px solid var(--slate-200); border-radius: 1rem;
  box-shadow: var(--shadow-4);
  opacity: 0; transform: translateY(.5rem); pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.pwa-banner.show { opacity: 1; transform: none; pointer-events: auto; }
.pwa-banner-mark {
  width: 2.375rem; height: 2.375rem; border-radius: .75rem; flex: none;
  background: var(--primary-tint); color: var(--primary-ink);
  display: grid; place-items: center;
}
.pwa-banner-copy { flex: 1; min-width: 0; line-height: 1.25; }
.pwa-banner-copy b { display: block; font-family: var(--font-display); font-size: .9375rem; color: var(--slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-banner-copy small { display: block; margin-top: .125rem; color: var(--slate-500); font-size: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pwa-banner-actions { display: flex; align-items: center; gap: .25rem; flex: none; }
.pwa-banner-close { width: 2rem; height: 2rem; color: var(--slate-400); }
.pwa-steps { margin: .25rem 0 0; padding-left: 1.25rem; display: grid; gap: .625rem; color: var(--slate-700); font-size: .875rem; line-height: 1.45; }
@media (max-width: 900px), (max-height: 620px), (display-mode: standalone) {
  .pwa-banner {
    left: .75rem; right: .75rem; width: auto;
    bottom: calc(4.375rem + env(safe-area-inset-bottom));
  }
}

/* ---------- Small-height device responsiveness ---------- */
@media (max-height: 700px) {
  .site-header .bar { height: 2.875rem; gap: .5rem; }
  .site-header .logo .wordmark { display: none; }
  .header-search .input { height: 2.125rem; font-size: .8125rem; }
  .page { padding: .75rem 0 4rem; }
  .crumbs { margin-bottom: .375rem; }
  .page-title { font-size: 1.375rem; line-height: 1.75rem; }
  .page-sub { font-size: .75rem; margin-top: .125rem; }
  .bottom-nav { height: calc(3.25rem + env(safe-area-inset-bottom)); }
  .bottom-nav .tab { gap: .0625rem; font-size: .6875rem; }
  .bottom-nav .tab .pill { width: 3rem; height: 1.5rem; }
  .bottom-nav .tab .icon { font-size: 1.125rem; }
  body.app-shell .app-scroll { padding-bottom: calc(3.625rem + env(safe-area-inset-bottom)); }
  .pwa-banner { bottom: calc(3.625rem + env(safe-area-inset-bottom)); padding: .5rem .75rem; }
  .pwa-banner-copy small { -webkit-line-clamp: 1; }
  .drawer { padding: .75rem; gap: .25rem; }
  .drawer-nav a { height: 2.375rem; font-size: .8125rem; }
  .drawer-section { padding: .5rem .625rem; margin-top: .25rem; }
  .modal { max-height: calc(100dvh - 1rem); }
  .modal-head { padding: .75rem 1.125rem .375rem; }
  .modal-head h2 { font-size: 1.1875rem; line-height: 1.5rem; }
  .modal-body { padding: .5rem 1.125rem .75rem; }
  .modal-foot { padding: .625rem 1.125rem .875rem; }
}
@media (max-height: 520px) {
  .pwa-banner { display: none !important; }
  .site-header .bar { height: 2.625rem; }
  .bottom-nav { height: calc(2.875rem + env(safe-area-inset-bottom)); }
  .bottom-nav .tab > span:last-child { display: none; }
}

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(.25rem); -webkit-backdrop-filter: blur(.25rem); }
.modal-backdrop.open { display: flex; animation: fade 150ms var(--ease); }
@keyframes fade { from { opacity: 0; } }
.modal { width: 30rem; max-width: 100%; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-4);
  animation: rise 200ms var(--ease); }
.modal::before { content: ''; display: block; height: .25rem; background: linear-gradient(90deg, var(--primary), var(--blue)); flex-shrink: 0; }
@keyframes rise { from { transform: translateY(.75rem); opacity: 0; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1.25rem 1.5rem .5rem; }
/* A payment step is running (see payment-lock.js): closing and switching method look disabled. */
.payment-busy .icon-btn[aria-label="Close"], .payment-busy #modalBackBtn,
.payment-busy .pay-method, .payment-busy .pay-tab-btn { opacity: .45; cursor: not-allowed; }
.payment-confirming { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem;
  padding: 1.5rem 1rem; border-radius: .75rem; background: var(--slate-50); border: 1px solid var(--slate-200);
  text-align: center; font-size: .875rem; color: var(--slate-700); }
.payment-confirming b { font-family: var(--font-display); font-size: 1rem; color: var(--slate-900); }
.modal-head h2 { font-size: 1.5rem; line-height: 1.875rem; }
.modal-body { padding: .75rem 1.5rem 1rem; overflow-y: auto; }
.modal-foot { padding: 1rem 1.5rem 1.375rem; border-top: 1px solid var(--slate-200); }
/* phones: dialogs become bottom sheets */
@media (max-width: 560px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-radius: 1.375rem 1.375rem 0 0; border-bottom: none; animation: sheet 220ms var(--ease); }
  .modal-head { padding: 1rem 1.125rem .375rem; }
  .modal-head h2 { font-size: 1.25rem; line-height: 1.625rem; }
  .modal-body { padding: .625rem 1.125rem .875rem; }
  .modal-foot { padding: .875rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom)); }
}
@keyframes sheet { from { transform: translateY(2.5rem); opacity: 0.6; } }

/* ---------- skeletons ---------- */
.skeleton { background: linear-gradient(100deg, #eef2f7 30%, #f7f9fc 50%, #eef2f7 70%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: .375rem; display: block; }
@keyframes shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.skeleton-line { height: .75rem; margin: .375rem 0; }
/* Page skeletons: the shape of a page while its content loads, so it never shows only a header
   and footer. Built from these blocks; every grid reflows like the real content does. */
.sk-page { display: grid; gap: 1.75rem; min-height: 60vh; }
.sk-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
.sk-hero > .skeleton { border-radius: 1.25rem; }
.sk-hero .main { aspect-ratio: 16 / 7; }
.sk-hero .side { display: grid; gap: 1rem; }
.sk-hero .side > .skeleton { border-radius: 1.25rem; }
.sk-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.sk-chips > .skeleton { height: 4.25rem; border-radius: 1rem; }
.sk-title { height: 1.5rem; width: 14rem; max-width: 60%; border-radius: .5rem; }
.sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.sk-card { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--slate-200); border-radius: 1rem; background: var(--surface); }
.sk-card .img { aspect-ratio: 1; border-radius: .75rem; }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.sk-tiles > .skeleton { aspect-ratio: 4 / 3; border-radius: 1rem; }
.sk-row { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border: 1px solid var(--slate-200); border-radius: .875rem; background: var(--surface); }
.sk-row .dot { width: 2.75rem; height: 2.75rem; border-radius: .75rem; flex: none; }
.sk-row .lines { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .sk-page { gap: 1.25rem; }
  .sk-hero { grid-template-columns: 1fr; }
  .sk-hero .main { aspect-ratio: 4 / 3; }
  .sk-hero .side { display: none; }
  .sk-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-chips > .skeleton { height: 3.5rem; }
  .sk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .sk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- empty states ---------- */
.empty { text-align: center; padding: 3.5rem 1.5rem; }
.empty .glyph { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 1.125rem; background: var(--blue-tint); color: var(--slate-500); display: grid; place-items: center; }
.empty .glyph .icon { font-size: 1.875rem; }
.empty h3 { font-size: 1.25rem; margin-bottom: .375rem; }
.empty p { color: var(--slate-500); margin: 0 0 1.25rem; }

/* ---------- notification bell (notifications.js) ---------- */
.notif { position: relative; display: inline-block; }
.notif-badge { position: absolute; top: .25rem; right: .25rem; background: var(--danger); color: #fff; border-radius: 62.4375rem; font-size: .625rem; font-weight: 700; line-height: 1rem; min-width: 1rem; padding: 0 .25rem; text-align: center; box-shadow: 0 0 0 2px #fff; }
.notif-badge[hidden] { display: none; }
/* Dropdown of alert cards: each notification gets a tone (success/info) that colours its
   icon badge, and unread ones an accent bar on the left plus a dot. */
.notif-panel { position: absolute; right: 0; top: calc(100% + .625rem); width: 24rem; max-width: calc(100vw - 2rem); display: flex; flex-direction: column; max-height: min(32rem, calc(100dvh - 6rem));
  background: var(--surface); border: 1px solid var(--slate-200); border-radius: 1rem; box-shadow: var(--shadow-4); z-index: 300; text-align: left; overflow: hidden;
  transform-origin: top right; animation: notif-in 160ms var(--ease); }
.notif-panel[hidden] { display: none; }
@keyframes notif-in { from { opacity: 0; transform: translateY(-.25rem) scale(.98); } }
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .875rem 1rem; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.notif-title { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--slate-900); }
.notif-title > .icon { color: var(--primary-ink); }
.notif-count { height: 1.25rem; padding: 0 .5rem; border-radius: 999px; background: var(--danger); color: #fff; font-family: var(--font-body); font-size: .6875rem; font-weight: 700; display: inline-grid; place-items: center; }
.notif-count[hidden], .notif-head button[hidden] { display: none; }
.notif-head button { display: inline-flex; align-items: center; gap: .25rem; background: none; border: none; border-radius: .5rem; color: var(--primary-ink); cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 600; padding: .25rem .5rem; margin-right: -.5rem; }
.notif-head button:hover { background: var(--primary-tint); }
.notif-list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: .5rem; display: grid; gap: .375rem; }
.notif-item { --tone: var(--blue); --tone-tint: var(--blue-tint); position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .875rem .75rem .75rem;
  border: 1px solid var(--slate-200); border-left: .25rem solid var(--slate-200); border-radius: .75rem; background: var(--surface); cursor: pointer; font-size: .8125rem; transition: background 150ms, border-color 150ms; }
.notif-item.success { --tone: var(--primary); --tone-tint: var(--primary-tint); }
.notif-item:hover { background: var(--slate-50); }
.notif-item.unread { border-left-color: var(--tone); background: var(--tone-tint); background: color-mix(in srgb, var(--tone-tint) 55%, var(--surface)); }
.notif-icon { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--tone-tint); color: var(--tone); }
.notif-icon .icon { font-size: 1.25rem; }
.notif-body { flex: 1; min-width: 0; }
.notif-meta { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .125rem; }
.notif-meta .kind { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }
.notif-item:not(.success) .notif-meta .kind { color: #1d4ed8; }
.notif-meta time { flex: none; color: var(--slate-400); font-size: .75rem; }
.notif-item .t { font-weight: 600; color: var(--slate-900); font-size: .875rem; line-height: 1.25rem; }
.notif-item.unread .t { font-weight: 700; }
.notif-item .m { color: var(--slate-500); line-height: 1.125rem; margin-top: .125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.notif-link { display: inline-flex; align-items: center; gap: .125rem; margin-top: .5rem; color: var(--primary-ink); font-weight: 600; font-size: .75rem; text-decoration: none; }
.notif-link:hover { text-decoration: underline; }
.notif-dot { position: absolute; top: .875rem; right: .75rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 .1875rem var(--surface); }
.notif-item.unread .notif-meta { padding-right: 1rem; }
.notif-empty { display: grid; justify-items: center; gap: .25rem; padding: 2rem 1rem; color: var(--slate-500); font-size: .8125rem; text-align: center; }
.notif-empty > .icon { font-size: 2rem; color: var(--slate-300); margin-bottom: .25rem; }
.notif-empty b { color: var(--slate-900); font-size: .875rem; }

/* ---------- loading animations & overlays ---------- */
.spinner-sm {
  width: 1.125rem;
  height: 1.125rem;
  border: 2.2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.spinner-sm.dark {
  border-color: var(--slate-300);
  border-top-color: var(--primary);
}
.loader-circle {
  width: 3.25rem;
  height: 3.25rem;
  border: 3.5px solid var(--slate-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pd-loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  width: 100%;
  animation: fadeIn 200ms ease;
}
.loading-progress-bar {
  width: 12rem;
  height: 4px;
  background: var(--slate-200);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1rem;
}
.loading-progress-val {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--blue));
  border-radius: 999px;
  animation: indetProgress 1.4s ease-in-out infinite;
}
@keyframes indetProgress {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- overflow guards ----------
   Every page and dialog loads this file (admin.css imports it), so these keep content inside
   the screen everywhere instead of fixing pages one by one: long words wrap, media shrinks,
   dialogs fit the screen and scroll inside, rows of buttons wrap, and on narrow screens a
   table that isn't already in a scroll box scrolls sideways itself rather than being cut off. */
body { overflow-wrap: break-word; }
img, video, iframe, canvas { max-width: 100%; }
.modal { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); }
.modal-body { min-width: 0; }
.modal-head > *, .modal-body > * { min-width: 0; }
.modal-foot, .modal .modal-actions { flex-wrap: wrap; }
.modal :is(input, select, textarea) { max-width: 100%; }
@media (max-width: 760px) {
  .modal { max-width: 100%; max-height: 92dvh; }
  .modal-foot .btn, .modal .modal-actions .btn { flex: 1 1 auto; }
  table:not(.table-scroll table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}