astro-component-kit 0.4.0 → 0.4.1

package/src/components/lib/ecommerce/CountdownBanner.astro

@@ -0,0 +1,230 @@
+---
+/**
+ * CountdownBanner — Live sale countdown (days · hours · minutes · seconds) with title,
+ * copy and CTA; switches to an "ended" message when the time runs out.
+ *
+ * @param {string} endsAt - ISO date the offer ends. When omitted, `hours` is used.
+ * @param {number} hours - Rolling offer length in hours, counted from the visitor's first view (stored in localStorage). Default 48.
+ * @param {string} eyebrow - Small label. Default 'Flash sale'.
+ * @param {string} title - Headline. Default 'Up to 30% off the Storm collection'.
+ * @param {string} text - Supporting copy.
+ * @param {{label: string, href: string}} cta - Call to action.
+ * @param {string} endedText - Message shown after the deadline. Default 'This offer has ended — new deals every Friday.'
+ * @param {string} storageKey - localStorage key for the rolling deadline. Default 'ack-countdown'.
+ * @param {string} variant - Style (glow|bar|card). Default 'glow'.
+ * @param {string} size - Density (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: the ticking digits are aria-hidden; a visually hidden sentence with the remaining
+ * time updates once a minute in a polite live region (no per-second announcements).
+ */
+interface Props {
+  endsAt?: string;
+  hours?: number;
+  eyebrow?: string;
+  title?: string;
+  text?: string;
+  cta?: { label: string; href: string };
+  endedText?: string;
+  storageKey?: string;
+  variant?: 'glow' | 'bar' | 'card';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  endsAt,
+  hours = 48,
+  eyebrow = 'Flash sale',
+  title = 'Up to 30% off the Storm collection',
+  text = 'Waterproof shells, insulated layers and accessories. While stock lasts.',
+  cta = { label: 'Shop the sale', href: '#' },
+  endedText = 'This offer has ended — new deals every Friday.',
+  storageKey = 'ack-countdown',
+  variant = 'glow',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const units = [
+  { key: 'd', label: 'Days' },
+  { key: 'h', label: 'Hours' },
+  { key: 'm', label: 'Minutes' },
+  { key: 's', label: 'Seconds' },
+];
+---
+
+<section
+  class:list={['countdown', `countdown--${variant}`, `countdown--${size}`, className]}
+  data-countdown
+  data-ends={endsAt}
+  data-hours={hours}
+  data-key={storageKey}
+  aria-label={title}
+>
+  <div class="countdown__inner">
+  <div class="countdown__copy">
+    {eyebrow && <p class="countdown__eyebrow"><span aria-hidden="true"></span>{eyebrow}</p>}
+    <h2 class="countdown__title">{title}</h2>
+    {text && <p class="countdown__text" data-live-text>{text}</p>}
+    <p class="countdown__ended" data-ended hidden>{endedText}</p>
+  </div>
+  <div class="countdown__side">
+    <div class="countdown__clock" aria-hidden="true" data-clock>
+      {units.map((u) => (
+        <div class="countdown__unit">
+          <span class="countdown__num" data-unit={u.key}>00</span>
+          <span class="countdown__label">{u.label}</span>
+        </div>
+      ))}
+    </div>
+    <p class="sr-only" aria-live="polite" data-sr></p>
+    {cta && <a class="countdown__cta" href={cta.href}>{cta.label}</a>}
+  </div>
+  </div>
+</section>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-countdown]:not([data-bound])').forEach((el) => {
+    el.dataset.bound = '';
+    let end = el.dataset.ends ? Date.parse(el.dataset.ends) : NaN;
+    if (Number.isNaN(end)) {
+      const key = el.dataset.key || 'ack-countdown';
+      const ms = (Number(el.dataset.hours) || 48) * 3600_000;
+      try {
+        const saved = Number(window.localStorage.getItem(key));
+        end = saved && saved > Date.now() ? saved : Date.now() + ms;
+        window.localStorage.setItem(key, String(end));
+      } catch {
+        end = Date.now() + ms;
+      }
+    }
+    const nums = Object.fromEntries(Array.from(el.querySelectorAll<HTMLElement>('[data-unit]')).map((n) => [n.dataset.unit, n]));
+    const sr = el.querySelector<HTMLElement>('[data-sr]');
+    const ended = el.querySelector<HTMLElement>('[data-ended]');
+    const clock = el.querySelector<HTMLElement>('[data-clock]');
+    let lastMinute = -1;
+    let timer = 0;
+
+    const pad = (n: number) => String(n).padStart(2, '0');
+    function tick() {
+      const left = Math.max(0, end - Date.now());
+      const s = Math.floor(left / 1000);
+      const parts = { d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60 };
+      (Object.keys(parts) as Array<keyof typeof parts>).forEach((k) => {
+        const node = nums[k];
+        const value = pad(parts[k]);
+        if (node && node.textContent !== value) {
+          node.textContent = value;
+          node.classList.remove('is-tick');
+          void node.offsetWidth;
+          node.classList.add('is-tick');
+        }
+      });
+      const minute = Math.floor(s / 60);
+      if (sr && minute !== lastMinute) {
+        lastMinute = minute;
+        sr.textContent = `Offer ends in ${parts.d} days, ${parts.h} hours and ${parts.m} minutes.`;
+      }
+      if (left === 0) {
+        window.clearInterval(timer);
+        el.classList.add('is-ended');
+        if (ended) ended.hidden = false;
+        if (clock) clock.hidden = true;
+        if (sr) sr.textContent = ended?.textContent || 'Offer ended.';
+      }
+    }
+    tick();
+    timer = window.setInterval(tick, 1000);
+  });
+</script>
+
+<style>
+  .countdown {
+    container-type: inline-size;
+    position: relative;
+    padding: clamp(1.5rem, 4vw, 2.75rem);
+    border-radius: var(--r-xl, 28px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    overflow: hidden;
+    isolation: isolate;
+  }
+  .countdown--glow {
+    background:
+      radial-gradient(circle at 100% 0%, rgba(248, 113, 113, 0.16), transparent 45%),
+      radial-gradient(circle at 0% 100%, rgba(212, 160, 23, 0.16), transparent 45%),
+      var(--c-surface, rgb(var(--ink-rgb, 255 255 255) / 0.02));
+  }
+  .countdown__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-8, 2rem); }
+  .countdown--card { background: var(--c-bg-1, #0a0a0a); }
+  .countdown--bar { border-radius: var(--r-md, 12px); padding: var(--sp-3, 0.75rem) var(--sp-5, 1.25rem); }
+  .countdown--bar .countdown__inner { grid-template-columns: auto 1fr auto; gap: var(--sp-5, 1.25rem); }
+  .countdown--bar .countdown__copy { display: flex; align-items: center; gap: var(--sp-4, 1rem); }
+  .countdown--bar .countdown__title { font-size: 1rem; }
+  .countdown--bar .countdown__text, .countdown--bar .countdown__eyebrow { display: none; }
+  .countdown--bar .countdown__side { display: contents; }
+  .countdown--sm { padding: var(--sp-5, 1.25rem); }
+
+  .countdown__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2, 0.5rem);
+    margin: 0 0 var(--sp-3, 0.75rem);
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--c-danger, #f87171);
+  }
+  .countdown__eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: cd-pulse 1.6s ease-in-out infinite; }
+  .countdown__title { margin: 0; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; color: var(--c-text-1, #fff); }
+  .countdown__text, .countdown__ended { margin: var(--sp-3, 0.75rem) 0 0; max-width: 34rem; color: var(--c-text-2, #a3a3a3); }
+  .countdown__ended[hidden] { display: none; }
+
+  .countdown__side { display: grid; justify-items: end; gap: var(--sp-4, 1rem); }
+  .countdown__clock { display: flex; gap: var(--sp-2, 0.5rem); }
+  .countdown__clock[hidden] { display: none; }
+  .countdown__unit {
+    display: grid;
+    justify-items: center;
+    min-width: 72px;
+    padding: var(--sp-3, 0.75rem) var(--sp-2, 0.5rem);
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    background: rgb(var(--paper-rgb, 5 5 5) / 0.5);
+  }
+  .countdown--bar .countdown__unit { min-width: 52px; padding: 4px 6px; }
+  .countdown__num { font-size: 1.9rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--c-text-1, #fff); line-height: 1.1; }
+  .countdown--bar .countdown__num { font-size: 1.1rem; }
+  .countdown__num.is-tick { animation: cd-tick 0.35s ease-out; }
+  .countdown__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .countdown__cta {
+    display: inline-flex;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 var(--sp-6, 1.5rem);
+    border-radius: var(--r-full, 9999px);
+    background: var(--c-primary-light, #d4a017);
+    color: var(--c-on-primary, #050505);
+    font-weight: 800;
+    text-decoration: none;
+  }
+  .countdown__cta:hover { filter: brightness(1.08); color: var(--c-on-primary, #050505); }
+  .countdown__cta:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: 3px; }
+  .countdown.is-ended .countdown__cta { display: none; }
+
+  @keyframes cd-tick { from { transform: translateY(-4px); opacity: 0.5; } }
+  @keyframes cd-pulse { 50% { opacity: 0.35; } }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 760px) {
+    .countdown__inner, .countdown--bar .countdown__inner { grid-template-columns: 1fr; }
+    .countdown__side { justify-items: stretch; }
+    .countdown__clock { justify-content: space-between; }
+    .countdown__unit { flex: 1; min-width: 0; }
+    .countdown__cta { justify-content: center; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .countdown__num.is-tick, .countdown__eyebrow span { animation: none; }
+  }
+</style>

package/src/components/lib/ecommerce/FilterBar.astro

@@ -0,0 +1,278 @@
+---
+/**
+ * FilterBar — Horizontal catalogue toolbar: category chips, a "Refine" panel (price, colour,
+ * availability), sort select and a live count. Filters any grid of product cards instantly.
+ *
+ * @param {string} target - id of the product grid. Default 'product-grid'.
+ * @param {Array<{id: string, name: string, count?: number}>} categories - Category chips.
+ * @param {string[]} selected - Pre-selected category ids (also read from `?category=`).
+ * @param {number} maxPrice - Upper bound of the price slider. Default 400.
+ * @param {Array<{name: string, hex: string}>} colors - Colour options.
+ * @param {number} total - Initial product count. Default 0.
+ * @param {string} allLabel - Label of the "all" chip. Default 'All'.
+ * @param {string} countLabel - Text after the count. Default 'products'.
+ * @param {string} currency - ISO currency. Default 'EUR'.
+ * @param {string} locale - Number format locale. Default 'en-GB'.
+ * @param {boolean} sticky - Stick under the header while scrolling. Default true.
+ * @param {string} variant - Style (line|filled). Default 'line'.
+ * @param {string} id - Base id. Default 'filter-bar'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: chips are toggle buttons (aria-pressed); "Refine" is a disclosure that closes
+ * with Escape; the count is a polite live region; all controls are native inputs.
+ */
+import { formatMoney } from './cart-store';
+
+interface Props {
+  target?: string;
+  categories?: Array<{ id: string; name: string; count?: number }>;
+  selected?: string[];
+  maxPrice?: number;
+  colors?: Array<{ name: string; hex: string }>;
+  total?: number;
+  allLabel?: string;
+  countLabel?: string;
+  currency?: string;
+  locale?: string;
+  sticky?: boolean;
+  variant?: 'line' | 'filled';
+  id?: string;
+  className?: string;
+}
+
+const {
+  target = 'product-grid',
+  categories = [
+    { id: 'clothing', name: 'Clothing', count: 5 },
+    { id: 'shoes', name: 'Shoes', count: 2 },
+    { id: 'bags', name: 'Bags', count: 2 },
+    { id: 'objects', name: 'Objects', count: 3 },
+  ],
+  selected = [],
+  maxPrice = 400,
+  colors = [
+    { name: 'Oat', hex: '#d9cbb3' },
+    { name: 'Ink', hex: '#22252b' },
+    { name: 'Rust', hex: '#9c3d1c' },
+    { name: 'Sage', hex: '#8a9a7b' },
+  ],
+  total = 0,
+  allLabel = 'All',
+  countLabel = 'products',
+  currency = 'EUR',
+  locale = 'en-GB',
+  sticky = true,
+  variant = 'line',
+  id = 'filter-bar',
+  className = '',
+} = Astro.props;
+
+const money = { currency, locale };
+---
+
+<div class:list={['fbar', `fbar--${variant}`, { 'fbar--sticky': sticky }, className]} data-filter-bar data-target={target} data-currency={currency} data-locale={locale}>
+  <div class="fbar__row">
+    <div class="fbar__chips" role="group" aria-label="Categories">
+      <button type="button" class="fbar__chip" data-chip="" aria-pressed={selected.length === 0 ? 'true' : 'false'}>{allLabel}</button>
+      {categories.map((c) => (
+        <button type="button" class="fbar__chip" data-chip={c.id} aria-pressed={selected.includes(c.id) ? 'true' : 'false'}>
+          {c.name}{c.count !== undefined && <sup>{c.count}</sup>}
+        </button>
+      ))}
+    </div>
+
+    <div class="fbar__tools">
+      <p class="fbar__count" aria-live="polite"><span data-result-count={target}>{total}</span> {countLabel}</p>
+      <button type="button" class="fbar__refine" aria-expanded="false" aria-controls={`${id}-panel`} data-refine>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg>
+        Refine <span class="fbar__badge" data-active hidden></span>
+      </button>
+      <label class="fbar__sort">
+        <span class="sr-only">Sort by</span>
+        <select data-sort>
+          <option value="featured">Featured</option>
+          <option value="price-asc">Price, low to high</option>
+          <option value="price-desc">Price, high to low</option>
+          <option value="name">Alphabetical</option>
+        </select>
+      </label>
+    </div>
+  </div>
+
+  <form class="fbar__panel" id={`${id}-panel`} hidden data-panel aria-label="Refine products">
+    <fieldset>
+      <legend>Price</legend>
+      <label class="fbar__range">
+        <span>Up to <output data-price-out>{formatMoney(maxPrice, money)}</output></span>
+        <input type="range" name="max" min="0" max={maxPrice} step="5" value={maxPrice} aria-label="Maximum price" />
+      </label>
+    </fieldset>
+    {colors.length > 0 && (
+      <fieldset>
+        <legend>Colour</legend>
+        <div class="fbar__colors">
+          {colors.map((c) => (
+            <label class="fbar__color" style={`--sw: ${c.hex}`}>
+              <input type="checkbox" name="color" value={c.name.toLowerCase()} />
+              <span aria-hidden="true"></span>{c.name}
+            </label>
+          ))}
+        </div>
+      </fieldset>
+    )}
+    <fieldset>
+      <legend>Availability</legend>
+      <label class="fbar__check"><input type="checkbox" name="stock" value="in" /> <span>In stock only</span></label>
+    </fieldset>
+    <div class="fbar__panel-actions">
+      <button type="reset" class="fbar__link">Clear filters</button>
+      <button type="button" class="fbar__done" data-close>Show results</button>
+    </div>
+  </form>
+</div>
+
+<script>
+  import { applyCatalogFilter, syncCatalogUrl } from './catalog-filter';
+  import { formatMoney } from './cart-store';
+
+  document.querySelectorAll<HTMLElement>('[data-filter-bar]:not([data-bound])').forEach((bar) => {
+    bar.dataset.bound = '';
+    const grid = document.getElementById(bar.dataset.target || '');
+    if (!grid) return;
+    const target: HTMLElement = grid;
+    const chips = Array.from(bar.querySelectorAll<HTMLButtonElement>('[data-chip]'));
+    const panel = bar.querySelector<HTMLFormElement>('[data-panel]')!;
+    const refine = bar.querySelector<HTMLButtonElement>('[data-refine]')!;
+    const sort = bar.querySelector<HTMLSelectElement>('[data-sort]')!;
+    const active = bar.querySelector<HTMLElement>('[data-active]')!;
+    const priceOut = bar.querySelector<HTMLOutputElement>('[data-price-out]');
+    const priceInput = panel.elements.namedItem('max') as HTMLInputElement;
+    const money = { currency: bar.dataset.currency, locale: bar.dataset.locale };
+
+    const params = new URLSearchParams(window.location.search);
+    let categories = (params.get('category') || '').split(',').filter(Boolean);
+    if (!categories.length) categories = chips.filter((c) => c.dataset.chip && c.getAttribute('aria-pressed') === 'true').map((c) => c.dataset.chip!);
+    if (params.get('sort')) sort.value = params.get('sort')!;
+
+    function run() {
+      const data = new FormData(panel);
+      const max = Number(data.get('max'));
+      const colors = data.getAll('color') as string[];
+      const inStockOnly = data.get('stock') === 'in';
+      chips.forEach((c) => {
+        const id = c.dataset.chip;
+        c.setAttribute('aria-pressed', String(id ? categories.includes(id) : categories.length === 0));
+      });
+      applyCatalogFilter(target, { categories, colors, maxPrice: max, minRating: 0, inStockOnly, sort: sort.value });
+      syncCatalogUrl({ categories, sort: sort.value });
+      if (priceOut) priceOut.textContent = formatMoney(max, money);
+      const n = colors.length + (inStockOnly ? 1 : 0) + (max < Number(priceInput.max) ? 1 : 0);
+      active.hidden = n === 0;
+      active.textContent = String(n);
+    }
+
+    chips.forEach((chip) => chip.addEventListener('click', () => {
+      const id = chip.dataset.chip;
+      if (!id) categories = [];
+      else categories = categories.includes(id) ? categories.filter((c) => c !== id) : [...categories, id];
+      run();
+    }));
+    const setOpen = (open: boolean) => {
+      panel.hidden = !open;
+      refine.setAttribute('aria-expanded', String(open));
+    };
+    refine.addEventListener('click', () => setOpen(panel.hidden));
+    bar.querySelector('[data-close]')?.addEventListener('click', () => { setOpen(false); refine.focus(); });
+    bar.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !panel.hidden) { setOpen(false); refine.focus(); } });
+    panel.addEventListener('input', run);
+    panel.addEventListener('reset', () => window.setTimeout(run, 0));
+    sort.addEventListener('change', run);
+    run();
+  });
+</script>
+
+<style>
+  .fbar { container-type: inline-size; position: relative; z-index: 5; border-block: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); background: var(--c-bg, #050505); }
+  .fbar--sticky { position: sticky; top: var(--shop-header-h, 0px); }
+  .fbar--filled { background: var(--c-bg-1, #0a0a0a); }
+  .fbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 1rem); min-height: 60px; }
+  .fbar__chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
+  .fbar__chips::-webkit-scrollbar { display: none; }
+  .fbar__chip {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 3px;
+    min-height: 40px;
+    padding: 0.55rem 0.9rem;
+    border: 1px solid transparent;
+    border-radius: var(--r-full, 999px);
+    background: transparent;
+    color: var(--c-text-2, #a3a3a3);
+    font: inherit;
+    font-size: 0.88rem;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+  }
+  .fbar__chip sup { font-size: 0.62rem; opacity: 0.8; }
+  .fbar__chip:hover { color: var(--c-text-1, #fff); border-color: var(--c-border, rgba(255, 255, 255, 0.15)); }
+  .fbar__chip[aria-pressed='true'] { color: var(--c-bg, #050505); background: var(--c-text-1, #fff); }
+
+  .fbar__tools { display: flex; align-items: center; gap: var(--sp-3, 0.75rem); flex-shrink: 0; }
+  .fbar__count { margin: 0; font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); white-space: nowrap; }
+  .fbar__count span { color: var(--c-text-1, #fff); font-weight: 700; }
+  .fbar__refine, .fbar__sort select {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 40px;
+    padding: 0 0.9rem;
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.15));
+    border-radius: var(--r-sm, 2px);
+    background: transparent;
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+  }
+  .fbar__sort select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
+  .fbar__sort select option { background: var(--c-bg-1, #0a0a0a); color: var(--c-text-1, #fff); }
+  .fbar__refine[aria-expanded='true'] { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); }
+  .fbar__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--shop-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; }
+  .fbar__badge[hidden] { display: none; }
+  .fbar :is(button, select, input):focus-visible { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+
+  .fbar__panel {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
+    gap: var(--sp-6, 1.5rem);
+    padding: var(--sp-5, 1.25rem) 0 var(--sp-6, 1.5rem);
+    border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.1));
+  }
+  .fbar__panel[hidden] { display: none; }
+  .fbar__panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
+  .fbar__panel legend { margin-bottom: var(--sp-3, 0.75rem); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .fbar__range { display: grid; gap: var(--sp-2, 0.5rem); font-size: 0.88rem; color: var(--c-text-1, #fff); }
+  .fbar__range input { width: 100%; accent-color: var(--shop-accent, var(--c-primary-light, #d4a017)); }
+  .fbar__colors { display: flex; flex-wrap: wrap; gap: var(--sp-2, 0.5rem); }
+  .fbar__color { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 0.7rem 0 0.4rem; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.15)); border-radius: 999px; font-size: 0.82rem; color: var(--c-text-1, #fff); cursor: pointer; }
+  .fbar__color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .fbar__color span { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb, 255 255 255) / 0.2); }
+  .fbar__color:has(input:checked) { border-color: var(--c-text-1, #fff); background: rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+  .fbar__color:has(input:focus-visible) { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  .fbar__check { display: inline-flex; align-items: center; gap: var(--sp-2, 0.5rem); min-height: 36px; font-size: 0.88rem; color: var(--c-text-1, #fff); cursor: pointer; }
+  .fbar__check input { width: 18px; height: 18px; accent-color: var(--shop-accent, var(--c-primary-light, #d4a017)); }
+  .fbar__panel-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: var(--sp-2, 0.5rem); }
+  .fbar__link { min-height: 36px; border: 0; background: none; color: var(--c-text-2, #a3a3a3); font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+  .fbar__done { min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: var(--r-sm, 2px); background: var(--c-text-1, #fff); color: var(--c-bg, #050505); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 860px) {
+    .fbar__row { flex-direction: column; align-items: stretch; gap: 0; }
+    .fbar__tools { justify-content: space-between; padding-bottom: 10px; }
+    .fbar__panel { grid-template-columns: 1fr; }
+    .fbar__panel-actions { flex-direction: row; justify-content: space-between; }
+  }
+</style>