/* ==========================================================================
   Fashion Pedon — styles.css
   Load order: color → typography → spacing → shape → this file.
   Nothing below invents a value. Every colour, size, and duration is a token.
   ========================================================================== */

/* ==========================================================================
   1. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* Safety net: nothing on any page should ever be able to push the page
   itself wider than the viewport (an oversized image, a stray fixed-width
   element, a mis-behaving carousel). overflow-x:hidden on html catches that
   at the outermost level; body uses overflow-x:clip instead of hidden for
   the same effect because overflow:hidden on body breaks position:sticky
   for its descendants in Safari (the sticky header, the sticky buy-box on
   product pages) — clip doesn't establish that scroll container. */
html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

body {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--fp-bg-page);
  color: var(--fp-text-primary);
  font-family: var(--fp-role-body-font);
  font-size: var(--fp-role-body-size);
  font-weight: var(--fp-role-body-weight);
  line-height: var(--fp-role-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a { color: var(--fp-text-brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

/* One focus treatment for the entire product. */
:focus-visible {
  outline: none;
  box-shadow: var(--fp-ring);
  border-radius: var(--fp-radius-xs);
}

.fp-skip-link {
  position: absolute;
  left: var(--fp-space-4);
  top: calc(var(--fp-space-4) * -6);
  z-index: var(--fp-z-toast);
  padding: var(--fp-space-3) var(--fp-space-4);
  background: var(--fp-action-primary);
  color: var(--fp-text-on-brand);
  border-radius: var(--fp-radius-md);
  transition: top var(--fp-duration-fast) var(--fp-ease-out);
}
.fp-skip-link:focus { top: var(--fp-space-4); }

.fp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   2. TYPE ROLES
   ========================================================================== */

.fp-hero {
  font-family: var(--fp-role-hero-font);
  font-size: var(--fp-role-hero-size);
  font-weight: var(--fp-role-hero-weight);
  line-height: var(--fp-role-hero-leading);
  letter-spacing: var(--fp-role-hero-tracking);
}

.fp-title {
  font-family: var(--fp-role-title-font);
  font-size: var(--fp-role-title-size);
  font-weight: var(--fp-role-title-weight);
  line-height: var(--fp-role-title-leading);
  letter-spacing: var(--fp-role-title-tracking);
}

.fp-subtitle {
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-xl);
  font-weight: var(--fp-weight-semibold);
  line-height: var(--fp-leading-snug);
  letter-spacing: var(--fp-tracking-tight);
}

.fp-body { font-size: var(--fp-text-base); line-height: var(--fp-leading-normal); }
.fp-body-sm { font-size: var(--fp-text-sm); line-height: var(--fp-leading-normal); }
.fp-lead {
  font-size: var(--fp-text-lg);
  line-height: var(--fp-leading-normal);
  color: var(--fp-text-secondary);
}

.fp-label {
  font-family: var(--fp-role-label-font);
  font-size: var(--fp-role-label-size);
  font-weight: var(--fp-role-label-weight);
  letter-spacing: var(--fp-role-label-tracking);
  text-transform: var(--fp-role-label-transform);
  color: var(--fp-text-secondary);
}

/* The garment-tag voice: SKUs, sizes, order numbers, measurements. */
.fp-tag-text {
  font-family: var(--fp-role-tag-font);
  font-size: var(--fp-role-tag-size);
  font-weight: var(--fp-role-tag-weight);
  letter-spacing: var(--fp-role-tag-tracking);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}

.fp-muted { color: var(--fp-text-muted); }
.fp-secondary { color: var(--fp-text-secondary); }

/* Eyebrow with a seam tick before it — the system's section marker. */
.fp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  font-family: var(--fp-font-body);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-semibold);
  letter-spacing: var(--fp-tracking-label);
  text-transform: uppercase;
  color: var(--fp-text-brand);
}
.fp-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background-image: var(--fp-seam);
  --fp-seam-color: var(--fp-action-accent);
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.fp-container {
  width: 100%;
  max-width: var(--fp-container-max);
  margin-inline: auto;
  padding-inline: var(--fp-gutter);
}
.fp-container--narrow { max-width: var(--fp-container-narrow); }

.fp-section { padding-block: var(--fp-section-y); }
/* Padding never collapses the way margins do, so two stacked sections each
   contributing their own top+bottom padding double the visible gap between
   them (bottom of one + top of the next). Dropping the top padding whenever
   a section directly follows another leaves exactly one --fp-section-y gap
   there instead of two, everywhere this pattern occurs (not just the
   homepage) — the first section on a page keeps its own top padding since
   nothing precedes it to collapse against. */
.fp-section + .fp-section { padding-top: 0; }

.fp-stack > * + * { margin-top: var(--fp-space-4); }
.fp-stack-sm > * + * { margin-top: var(--fp-space-2); }
.fp-stack-lg > * + * { margin-top: var(--fp-space-8); }

.fp-row {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3);
}
.fp-row--between { justify-content: space-between; }
.fp-row--wrap { flex-wrap: wrap; }
.fp-row--top { align-items: flex-start; }

.fp-grid { display: grid; gap: var(--fp-grid-gap); }
/* Mobile-first: always 2 columns down to 360px (auto-fill/minmax alone
   yields 1 column below ~460px, which fails the phone-width requirement).
   Above 560px there's room for auto-fill to size columns itself again. */
.fp-grid--products {
  grid-template-columns: repeat(2, 1fr);
}
.fp-grid--2 { grid-template-columns: 1fr; }
.fp-grid--3 { grid-template-columns: 1fr; }
.fp-grid--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 560px) {
  .fp-grid--products {
    grid-template-columns: repeat(auto-fill, minmax(var(--fp-grid-product-min), 1fr));
  }
}
@media (min-width: 700px) {
  .fp-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .fp-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* A "carousel" that's a static 2-col grid on a phone isn't a carousel — below
   560px (the same point .fp-grid--products regains its own flexible sizing)
   the homepage product-carousel section scrolls horizontally instead. The
   admin's chosen column count still governs card width at 560px and up. */
@media (max-width: 559px) {
  .fp-grid--carousel {
    display: flex;
    grid-template-columns: none;
    gap: var(--fp-grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--fp-space-4);
  }
  .fp-grid--carousel > * {
    flex: 0 0 clamp(150px, 44vw, 200px);
    scroll-snap-align: start;
  }
}
@media (min-width: 1000px) {
  .fp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Shop layout: filter rail + results */
.fp-shop-layout { display: grid; gap: var(--fp-space-8); }
@media (min-width: 1000px) {
  .fp-shop-layout { grid-template-columns: 248px 1fr; align-items: start; }
}

/* Checkout / cart: form + sticky summary */
.fp-split { display: grid; gap: var(--fp-space-8); align-items: start; }
@media (min-width: 950px) {
  .fp-split { grid-template-columns: 1fr 380px; }
  .fp-split__aside { position: sticky; top: calc(var(--fp-header-h-full) + var(--fp-space-4)); }
}

/* The seam divider. */
.fp-seam {
  height: 2px;
  border: 0;
  background-image: var(--fp-seam);
  background-repeat: repeat-x;
  background-size: auto 2px;
}
.fp-seam--notched {
  position: relative;
  overflow: visible;
}
.fp-seam--notched::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--fp-bg-page);
  border: 2px solid var(--fp-action-accent);
  border-radius: 1px;
}

/* ==========================================================================
   4. SURFACES
   ========================================================================== */

.fp-card {
  background: var(--fp-bg-surface);
  border: var(--fp-border-hair);
  border-radius: var(--fp-radius-lg);
  padding: var(--fp-space-6);
  box-shadow: var(--fp-shadow-xs);
}
.fp-card--flush { padding: 0; overflow: hidden; }
.fp-card--sunken { background: var(--fp-bg-sunken); box-shadow: none; border-color: transparent; }
.fp-card--brand {
  background: var(--fp-bg-brand-soft);
  border-color: var(--fp-indigo-100);
  box-shadow: none;
}
.fp-card--inverse {
  background: var(--fp-bg-inverse);
  border-color: var(--fp-border-inverse);
  color: var(--fp-text-inverse);
}
.fp-card__header {
  padding: var(--fp-space-5) var(--fp-space-6);
  border-bottom: var(--fp-border-subtle-line);
}
.fp-card__body { padding: var(--fp-space-6); }
.fp-card__footer {
  padding: var(--fp-space-5) var(--fp-space-6);
  border-top: var(--fp-border-subtle-line);
  background: var(--fp-bg-page);
}

/* The hang tag. A specimen card shaped like the ticket on a garment:
   punched hole, seam edge, mono caption. Used across the foundations page. */
.fp-tag {
  position: relative;
  background: var(--fp-bg-surface);
  border: var(--fp-border-hair);
  border-radius: var(--fp-radius-md);
  padding: var(--fp-space-5);
  padding-top: var(--fp-space-8);
  box-shadow: var(--fp-shadow-xs);
}
.fp-tag::before {
  content: "";
  position: absolute;
  top: var(--fp-space-3);
  left: var(--fp-space-5);
  width: 12px; height: 12px;
  border-radius: var(--fp-radius-pill);
  border: 2px solid var(--fp-border-strong);
  background: var(--fp-bg-page);
}
.fp-tag::after {
  content: "";
  position: absolute;
  top: calc(var(--fp-space-3) + 5px);
  left: calc(var(--fp-space-5) + 16px);
  right: var(--fp-space-5);
  height: 2px;
  background-image: var(--fp-seam);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-space-2);
  min-height: var(--fp-control-h-md);
  padding-inline: var(--fp-space-5);
  border-radius: var(--fp-radius-md);
  border: var(--fp-border-w-thick) solid transparent;
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--fp-transition-control), transform var(--fp-duration-instant) var(--fp-ease-standard);
}
.fp-btn:hover { text-decoration: none; }
.fp-btn:active { transform: translateY(1px); }
.fp-btn:disabled,
.fp-btn[aria-disabled="true"] {
  background: var(--fp-action-disabled-bg);
  color: var(--fp-action-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}

.fp-btn--primary {
  background: var(--fp-action-primary);
  color: var(--fp-text-on-brand);
}
.fp-btn--primary:hover { background: var(--fp-action-primary-hover); }
.fp-btn--primary:active { background: var(--fp-action-primary-active); }

.fp-btn--secondary {
  background: var(--fp-bg-surface);
  color: var(--fp-text-primary);
  border-color: var(--fp-border-default);
}
.fp-btn--secondary:hover {
  border-color: var(--fp-border-brand);
  color: var(--fp-text-brand);
}

.fp-btn--accent {
  background: var(--fp-action-accent);
  color: var(--fp-paper-0);
}
.fp-btn--accent:hover { background: var(--fp-action-accent-hover); }

.fp-btn--ghost { color: var(--fp-text-secondary); padding-inline: var(--fp-space-3); }
.fp-btn--ghost:hover { background: var(--fp-bg-sunken); color: var(--fp-text-primary); }

.fp-btn--danger { background: var(--fp-danger-solid); color: var(--fp-paper-0); }
.fp-btn--danger:hover { background: var(--fp-danger-fg); }

.fp-btn--sm { min-height: var(--fp-control-h-sm); padding-inline: var(--fp-space-3); font-size: var(--fp-text-xs); }
.fp-btn--lg { min-height: var(--fp-control-h-lg); padding-inline: var(--fp-space-8); font-size: var(--fp-text-base); }
.fp-btn--block { width: 100%; }

.fp-btn__icon { width: var(--fp-icon-md); height: var(--fp-icon-md); flex: none; }

.fp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fp-tap-min);
  height: var(--fp-tap-min);
  border-radius: var(--fp-radius-md);
  color: var(--fp-text-primary);
  transition: var(--fp-transition-control);
}
.fp-icon-btn:hover { background: var(--fp-bg-sunken); }

/* ==========================================================================
   6. FORMS
   ========================================================================== */

.fp-field { display: block; }
.fp-field + .fp-field { margin-top: var(--fp-space-5); }

.fp-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fp-space-2);
  margin-bottom: var(--fp-space-2);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  color: var(--fp-text-primary);
}
.fp-field__required { color: var(--fp-text-accent); }
.fp-field__optional {
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-2xs);
  font-weight: var(--fp-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--fp-tracking-wide);
  color: var(--fp-text-muted);
}

.fp-input,
.fp-select,
.fp-textarea {
  display: block;
  width: 100%;
  min-height: var(--fp-control-h-md);
  padding: var(--fp-space-3) var(--fp-space-4);
  background: var(--fp-bg-surface);
  border: var(--fp-border-w-hair) solid var(--fp-border-strong);
  border-radius: var(--fp-radius-sm);
  font-size: var(--fp-text-base);
  color: var(--fp-text-primary);
  transition: var(--fp-transition-control);
}
.fp-input::placeholder,
.fp-textarea::placeholder { color: var(--fp-text-muted); }

.fp-input:hover,
.fp-select:hover,
.fp-textarea:hover { border-color: var(--fp-paper-400); }

.fp-input:focus-visible,
.fp-select:focus-visible,
.fp-textarea:focus-visible {
  border-color: var(--fp-border-brand);
  box-shadow: var(--fp-ring);
}

.fp-input:disabled,
.fp-select:disabled,
.fp-textarea:disabled {
  background: var(--fp-bg-sunken);
  color: var(--fp-text-muted);
  cursor: not-allowed;
}

.fp-textarea { min-height: 7rem; resize: vertical; line-height: var(--fp-leading-normal); }

.fp-select {
  appearance: none;
  padding-right: var(--fp-space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236A7192' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--fp-space-4) center;
}

/* Mono input for the things that are literally printed on tags */
.fp-input--tag {
  font-family: var(--fp-font-mono);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
}

.fp-field__help {
  margin-top: var(--fp-space-2);
  font-size: var(--fp-text-sm);
  color: var(--fp-text-secondary);
}
.fp-field__error {
  display: none;
  align-items: center;
  gap: var(--fp-space-2);
  margin-top: var(--fp-space-2);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-medium);
  color: var(--fp-danger-fg);
}

.fp-field.is-invalid .fp-input,
.fp-field.is-invalid .fp-select,
.fp-field.is-invalid .fp-textarea { border-color: var(--fp-danger-solid); }
.fp-field.is-invalid .fp-field__error { display: flex; }
.fp-field.is-invalid .fp-field__help { display: none; }

/* Prefix — for the +971 on every phone number in this store */
.fp-input-group {
  display: flex;
  align-items: stretch;
  border: var(--fp-border-w-hair) solid var(--fp-border-strong);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-bg-surface);
  overflow: hidden;
  transition: var(--fp-transition-control);
}
.fp-input-group:focus-within {
  border-color: var(--fp-border-brand);
  box-shadow: var(--fp-ring);
}
.fp-input-group__prefix {
  display: flex;
  align-items: center;
  padding-inline: var(--fp-space-4);
  background: var(--fp-bg-sunken);
  border-right: var(--fp-border-w-hair) solid var(--fp-border-default);
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-sm);
  color: var(--fp-text-secondary);
}
.fp-input-group .fp-input {
  flex: 1 1 0%;
  min-width: 0;
  border: 0;
  border-radius: 0;
}
.fp-input-group .fp-input:focus-visible { box-shadow: none; }

/* Choice controls */
.fp-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-3);
  min-height: var(--fp-tap-min);
  padding: var(--fp-space-2) 0;
  cursor: pointer;
}
.fp-choice input[type="checkbox"],
.fp-choice input[type="radio"] {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--fp-action-primary);
  cursor: pointer;
}
.fp-choice__text { font-size: var(--fp-text-sm); line-height: var(--fp-leading-normal); }
.fp-choice__note { display: block; font-size: var(--fp-text-xs); color: var(--fp-text-muted); }

/* Selectable card — used for the single COD payment method */
.fp-choice-card {
  display: flex;
  align-items: center;
  gap: var(--fp-space-4);
  padding: var(--fp-space-5);
  border: var(--fp-border-w-thick) solid var(--fp-border-default);
  border-radius: var(--fp-radius-md);
  background: var(--fp-bg-surface);
  cursor: pointer;
  transition: var(--fp-transition-control);
}
.fp-choice-card:hover { border-color: var(--fp-border-strong); }
.fp-choice-card.is-selected {
  border-color: var(--fp-action-primary);
  background: var(--fp-bg-brand-soft);
}
.fp-choice-card.is-locked { cursor: default; }
.fp-choice-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--fp-bg-sunken);
}
.fp-choice-card.is-disabled:hover { border-color: var(--fp-border-default); }
.fp-choice-card .fp-badge { margin-inline-start: auto; flex: none; }
.fp-choice-card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-cod-bg);
  color: var(--fp-cod-fg);
}

/* Size tabs — modelled on the woven size label inside a collar */
.fp-sizes { display: flex; flex-wrap: wrap; gap: var(--fp-space-2); }
.fp-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fp-tap-min);
  height: var(--fp-tap-min);
  padding-inline: var(--fp-space-3);
  border: var(--fp-border-w-hair) solid var(--fp-border-strong);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-bg-surface);
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-medium);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
  color: var(--fp-text-primary);
  transition: var(--fp-transition-control);
}
.fp-size:hover:not(:disabled) { border-color: var(--fp-border-brand); }
.fp-size.is-selected {
  background: var(--fp-action-primary);
  border-color: var(--fp-action-primary);
  color: var(--fp-text-on-brand);
}
.fp-size:disabled {
  color: var(--fp-text-muted);
  background: var(--fp-bg-sunken);
  border-color: var(--fp-border-subtle);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Colour swatches */
.fp-swatches { display: flex; flex-wrap: wrap; gap: var(--fp-space-3); }
.fp-swatch {
  position: relative;
  width: var(--fp-tap-min); height: var(--fp-tap-min);
  border-radius: var(--fp-radius-pill);
  border: var(--fp-border-w-hair) solid var(--fp-border-strong);
  background: var(--fp-swatch, var(--fp-paper-200));
  transition: var(--fp-transition-control);
}
.fp-swatch::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--fp-radius-pill);
  border: var(--fp-border-w-thick) solid transparent;
  transition: var(--fp-transition-control);
}
.fp-swatch.is-selected::after { border-color: var(--fp-action-primary); }

/* Quantity stepper */
.fp-stepper {
  display: inline-flex;
  align-items: center;
  border: var(--fp-border-w-hair) solid var(--fp-border-strong);
  border-radius: var(--fp-radius-sm);
  overflow: hidden;
  background: var(--fp-bg-surface);
}
.fp-stepper button {
  width: var(--fp-tap-min);
  height: var(--fp-control-h-md);
  display: grid;
  place-items: center;
  color: var(--fp-text-secondary);
  transition: var(--fp-transition-control);
}
.fp-stepper button:hover:not(:disabled) { background: var(--fp-bg-sunken); color: var(--fp-text-primary); }
.fp-stepper button:disabled { color: var(--fp-text-muted); cursor: not-allowed; }
.fp-stepper__value {
  min-width: 3ch;
  text-align: center;
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-sm);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. COMMERCE
   ========================================================================== */

/* --- Price ---------------------------------------------------------------
   Always tabular so a column of prices aligns on the rupee. */
.fp-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fp-space-2);
  font-family: var(--fp-role-price-font);
  font-variant-numeric: var(--fp-role-price-numeric);
}
.fp-price__now {
  font-size: var(--fp-role-price-size);
  font-weight: var(--fp-role-price-weight);
  line-height: var(--fp-role-price-leading);
  color: var(--fp-text-primary);
}
.fp-price__was {
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-regular);
  color: var(--fp-price-was);
  text-decoration: line-through;
}
.fp-price__off {
  font-family: var(--fp-font-body);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-semibold);
  color: var(--fp-sale-fg);
}
.fp-price--lg .fp-price__now { font-size: var(--fp-text-3xl); }
.fp-price--lg .fp-price__was { font-size: var(--fp-text-base); }

/* --- Product card -------------------------------------------------------- */
.fp-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fp-bg-surface);
  border: var(--fp-border-hair);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--fp-duration-base) var(--fp-ease-out),
              transform var(--fp-duration-base) var(--fp-ease-out),
              border-color var(--fp-duration-base) var(--fp-ease-out);
}
.fp-product:hover {
  box-shadow: var(--fp-shadow-lift);
  border-color: var(--fp-indigo-200);
  transform: translateY(-3px);
}
.fp-product__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--fp-bg-sunken);
  overflow: hidden;
}
.fp-product__media img,
.fp-product__media .fp-ph {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--fp-duration-slow) var(--fp-ease-out);
}
.fp-product:hover .fp-product__media img,
.fp-product:hover .fp-product__media .fp-ph { transform: scale(1.05); }

.fp-product__flags {
  position: absolute;
  top: var(--fp-space-3);
  left: var(--fp-space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fp-space-2);
  z-index: 1;
}
.fp-product__wish {
  position: absolute;
  top: var(--fp-space-3);
  right: var(--fp-space-3);
  z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--fp-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--fp-text-secondary);
  box-shadow: var(--fp-shadow-xs);
  transition: var(--fp-transition-control);
}
.fp-product__wish:hover { color: var(--fp-action-accent); }
.fp-product__wish.is-active { color: var(--fp-action-accent); }
.fp-product__wish.is-active svg { fill: currentColor; }

.fp-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-2);
  padding: var(--fp-space-4);
  flex: 1;
}
.fp-product__name {
  font-family: var(--fp-font-body);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  line-height: var(--fp-leading-snug);
  color: var(--fp-text-primary);
}
.fp-product__name a { color: inherit; }
.fp-product__meta {
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-2xs);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}
.fp-product__foot { margin-top: auto; padding-top: var(--fp-space-3); }

/* --- Badges -------------------------------------------------------------- */
.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-1);
  padding: 3px var(--fp-space-2);
  border-radius: var(--fp-radius-xs);
  font-family: var(--fp-font-body);
  font-size: var(--fp-text-2xs);
  font-weight: var(--fp-weight-bold);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}
.fp-badge--sale { background: var(--fp-sale-bg); color: var(--fp-sale-text); }
.fp-badge--new { background: var(--fp-indigo-950); color: var(--fp-paper-0); }
.fp-badge--cod { background: var(--fp-cod-bg); color: var(--fp-cod-fg); }
.fp-badge--soft { background: var(--fp-bg-sunken); color: var(--fp-text-secondary); }

/* Stock line — the dot colour is the message */
.fp-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-medium);
}
.fp-stock::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--fp-radius-pill);
  background: currentColor;
}
.fp-stock--in { color: var(--fp-stock-in); }
.fp-stock--low { color: var(--fp-stock-low); }
.fp-stock--out { color: var(--fp-stock-out); }

/* --- Order status pill --------------------------------------------------- */
.fp-status {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  padding: var(--fp-space-1) var(--fp-space-3);
  border-radius: var(--fp-radius-pill);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-semibold);
}
.fp-status--pending { background: var(--fp-status-pending-bg); color: var(--fp-status-pending-fg); }
.fp-status--confirmed { background: var(--fp-status-confirmed-bg); color: var(--fp-status-confirmed-fg); }
.fp-status--packed { background: var(--fp-status-packed-bg); color: var(--fp-status-packed-fg); }
.fp-status--shipped { background: var(--fp-status-shipped-bg); color: var(--fp-status-shipped-fg); }
.fp-status--delivered { background: var(--fp-status-delivered-bg); color: var(--fp-status-delivered-fg); }
.fp-status--cancelled { background: var(--fp-status-cancelled-bg); color: var(--fp-status-cancelled-fg); }

/* --- Line item ----------------------------------------------------------- */
.fp-line {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--fp-space-4);
  padding-block: var(--fp-space-4);
}
.fp-line + .fp-line { border-top: var(--fp-border-subtle-line); }
.fp-line__media {
  aspect-ratio: 3 / 4;
  border-radius: var(--fp-radius-sm);
  overflow: hidden;
  background: var(--fp-bg-sunken);
}
.fp-line__media img, .fp-line__media .fp-ph { width: 100%; height: 100%; object-fit: cover; }
.fp-line__name { font-size: var(--fp-text-sm); font-weight: var(--fp-weight-semibold); }
.fp-line__variant {
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-2xs);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}

/* --- Order summary ------------------------------------------------------- */
.fp-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--fp-space-4);
  padding-block: var(--fp-space-2);
  font-size: var(--fp-text-sm);
  color: var(--fp-text-secondary);
}
.fp-summary__row span:last-child {
  font-family: var(--fp-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fp-text-primary);
}
.fp-summary__row--free span:last-child { color: var(--fp-success-fg); }
.fp-summary__row--discount span:last-child { color: var(--fp-success-fg); }
.fp-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fp-space-4);
  margin-top: var(--fp-space-3);
  padding-top: var(--fp-space-4);
  border-top: var(--fp-border-w-thick) solid var(--fp-border-default);
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-xl);
  font-weight: var(--fp-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* --- Delivery / order tracker ------------------------------------------- */
.fp-tracker { display: grid; gap: 0; }
.fp-tracker__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--fp-space-4);
  position: relative;
  padding-bottom: var(--fp-space-6);
}
.fp-tracker__step:last-child { padding-bottom: 0; }
.fp-tracker__dot {
  position: relative;
  z-index: 1;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-bg-surface);
  border: var(--fp-border-w-thick) solid var(--fp-border-default);
  color: var(--fp-text-muted);
}
.fp-tracker__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--fp-seam-color) 0, var(--fp-seam-color) 5px,
    transparent 5px, transparent 10px
  );
}
.fp-tracker__step.is-done .fp-tracker__dot {
  background: var(--fp-action-primary);
  border-color: var(--fp-action-primary);
  color: var(--fp-text-on-brand);
}
.fp-tracker__step.is-done::before { --fp-seam-color: var(--fp-indigo-300); }
.fp-tracker__step.is-current .fp-tracker__dot {
  border-color: var(--fp-action-primary);
  color: var(--fp-action-primary);
  box-shadow: 0 0 0 4px var(--fp-indigo-100);
}
.fp-tracker__label { font-size: var(--fp-text-sm); font-weight: var(--fp-weight-semibold); }
.fp-tracker__time {
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--fp-tracking-wide);
  color: var(--fp-text-muted);
}

/* --- Trust strip --------------------------------------------------------- */
.fp-trust {
  display: grid;
  gap: var(--fp-space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .fp-trust { grid-template-columns: repeat(4, 1fr); } }
.fp-trust__item {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3);
  padding: var(--fp-space-4);
  background: var(--fp-bg-surface);
  border: var(--fp-border-hair);
  border-radius: var(--fp-radius-md);
}
.fp-trust__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-bg-brand-soft);
  color: var(--fp-text-brand);
}

/* ==========================================================================
   8. FEEDBACK
   ========================================================================== */

.fp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-3);
  padding: var(--fp-space-4);
  border: var(--fp-border-w-hair) solid;
  border-radius: var(--fp-radius-md);
  font-size: var(--fp-text-sm);
  line-height: var(--fp-leading-normal);
}
.fp-alert__icon { flex: none; margin-top: 1px; }
.fp-alert__title { font-weight: var(--fp-weight-semibold); display: block; margin-bottom: 2px; }
.fp-alert--success { background: var(--fp-success-bg); border-color: var(--fp-success-border); color: var(--fp-success-fg); }
.fp-alert--warning { background: var(--fp-warning-bg); border-color: var(--fp-warning-border); color: var(--fp-warning-fg); }
.fp-alert--danger  { background: var(--fp-danger-bg);  border-color: var(--fp-danger-border);  color: var(--fp-danger-fg); }
.fp-alert--info    { background: var(--fp-info-bg);    border-color: var(--fp-info-border);    color: var(--fp-info-fg); }

/* Toasts */
.fp-toasts {
  position: fixed;
  z-index: var(--fp-z-toast);
  bottom: var(--fp-space-5);
  left: var(--fp-space-5);
  right: var(--fp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-2);
  pointer-events: none;
}
@media (min-width: 700px) {
  .fp-toasts { left: auto; width: 340px; }
}
.fp-toast {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3);
  padding: var(--fp-space-4);
  background: var(--fp-bg-inverse);
  color: var(--fp-text-inverse);
  border-radius: var(--fp-radius-md);
  box-shadow: var(--fp-shadow-lg);
  font-size: var(--fp-text-sm);
  pointer-events: auto;
  animation: fp-toast-in var(--fp-duration-base) var(--fp-ease-out);
}
.fp-toast.is-leaving { animation: fp-toast-out var(--fp-duration-fast) var(--fp-ease-in) forwards; }
.fp-toast__icon { flex: none; color: var(--fp-green-500); }
.fp-toast--error .fp-toast__icon { color: var(--fp-rose-400); }
.fp-toast__close { margin-left: auto; color: var(--fp-paper-400); flex: none; }
.fp-toast__close:hover { color: var(--fp-paper-0); }

@keyframes fp-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes fp-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* Empty state */
.fp-empty {
  display: grid;
  justify-items: center;
  gap: var(--fp-space-4);
  padding: var(--fp-space-16) var(--fp-space-5);
  text-align: center;
}
.fp-empty__art {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: var(--fp-radius-lg);
  background: var(--fp-bg-sunken);
  color: var(--fp-text-muted);
}

/* Skeleton */
.fp-skeleton {
  background: linear-gradient(90deg,
    var(--fp-paper-100) 25%,
    var(--fp-paper-50) 37%,
    var(--fp-paper-100) 63%);
  background-size: 400% 100%;
  border-radius: var(--fp-radius-sm);
  animation: fp-shimmer 1.4s ease-in-out infinite;
}
@keyframes fp-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* Inline spinner */
.fp-spinner {
  width: var(--fp-icon-md); height: var(--fp-icon-md);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--fp-radius-pill);
  opacity: 0.7;
  animation: fp-spin 700ms linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* Placeholder art used in this kit in place of photography — a clean,
   neutral light-grey fill with a photo glyph, not a "missing image" look
   (the old grey diagonal-stripe pattern read as broken/unfinished rather
   than as a deliberate placeholder). The glyph is a CSS mask, not an
   <img>/<svg>, so every existing .fp-ph usage across the site (product
   cards, cart lines, category tiles, hero banners, the product gallery)
   gets it with no markup changes. */
.fp-ph {
  display: grid;
  place-items: center;
  gap: var(--fp-space-2);
  background: var(--fp-bg-sunken);
  color: var(--fp-text-muted);
  padding: var(--fp-space-3);
  text-align: center;
}
.fp-ph::before {
  content: "";
  width: 28%;
  max-width: 40px;
  min-width: 14px;
  aspect-ratio: 1 / 1;
  flex: none;
  background-color: var(--fp-text-muted);
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 17l4.8-4.8 3 3 4-5 4.7 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 17l4.8-4.8 3 3 4-5 4.7 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fp-ph span {
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-2xs);
  letter-spacing: var(--fp-tracking-label);
  text-transform: uppercase;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ==========================================================================
   9. NAVIGATION
   ========================================================================== */

.fp-announce {
  background: var(--fp-bg-inverse);
  color: var(--fp-paper-200);
  font-size: var(--fp-text-xs);
  text-align: center;
  padding-block: var(--fp-space-2);
}
.fp-announce strong { color: var(--fp-paper-0); font-weight: var(--fp-weight-semibold); }

.fp-header {
  position: sticky;
  top: 0;
  z-index: var(--fp-z-header);
  background: var(--fp-bg-surface);
  border-bottom: var(--fp-border-subtle-line);
  transition: transform 0.25s ease;
}
/* assets/js/header-scroll.js toggles this on scroll direction — slides the
   whole header (logo row + search row together) up out of view scrolling
   down, back down scrolling up. */
.fp-header.is-hidden { transform: translateY(-100%); }
.fp-header__bar {
  display: flex;
  align-items: center;
  gap: var(--fp-space-4);
  min-height: var(--fp-header-h);
}
.fp-header__nav { display: none; margin-inline: auto; }
@media (min-width: 900px) {
  .fp-header__nav { display: flex; gap: var(--fp-space-1); }
}
.fp-header__actions { display: flex; align-items: center; gap: var(--fp-space-1); margin-left: auto; }
@media (min-width: 900px) { .fp-header__actions { margin-left: 0; } }

.fp-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--fp-control-h-md);
  padding-inline: var(--fp-space-3);
  border-radius: var(--fp-radius-md);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-medium);
  color: var(--fp-text-secondary);
  transition: var(--fp-transition-control);
}
.fp-navlink:hover { color: var(--fp-text-primary); background: var(--fp-bg-sunken); text-decoration: none; }
.fp-navlink.is-active { color: var(--fp-text-primary); font-weight: var(--fp-weight-semibold); }
.fp-navlink.is-active::after {
  content: "";
  position: absolute;
  left: var(--fp-space-3); right: var(--fp-space-3);
  bottom: 6px;
  height: 2px;
  background-image: var(--fp-seam);
  --fp-seam-color: var(--fp-action-accent);
}

.fp-count {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-action-accent);
  color: var(--fp-paper-0);
  font-family: var(--fp-font-mono);
  font-size: 10px;
  font-weight: var(--fp-weight-medium);
  line-height: 1;
}
.fp-icon-btn { position: relative; }

/* Mobile drawer */
.fp-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--fp-z-drawer);
  visibility: hidden;
}
.fp-drawer.is-open { visibility: visible; }
.fp-drawer__scrim {
  position: absolute; inset: 0;
  background: var(--fp-bg-overlay);
  opacity: 0;
  transition: opacity var(--fp-duration-base) var(--fp-ease-standard);
}
.fp-drawer.is-open .fp-drawer__scrim { opacity: 1; }
.fp-drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(320px, 86vw);
  background: var(--fp-bg-surface);
  padding: var(--fp-space-5);
  transform: translateX(-100%);
  transition: transform var(--fp-duration-base) var(--fp-ease-out);
  overflow-y: auto;
}
.fp-drawer--right .fp-drawer__panel { left: auto; right: 0; transform: translateX(100%); width: min(420px, 92vw); }
.fp-drawer.is-open .fp-drawer__panel { transform: none; }

/* Breadcrumb */
.fp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fp-space-2);
  font-size: var(--fp-text-xs);
  color: var(--fp-text-muted);
}
.fp-crumbs a { color: var(--fp-text-secondary); }
.fp-crumbs li { display: flex; align-items: center; gap: var(--fp-space-2); }
.fp-crumbs li + li::before { content: "/"; color: var(--fp-border-strong); }
.fp-crumbs [aria-current] { color: var(--fp-text-primary); font-weight: var(--fp-weight-medium); }

/* Filter chips */
.fp-chips { display: flex; flex-wrap: wrap; gap: var(--fp-space-2); }
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  height: var(--fp-control-h-sm);
  padding-inline: var(--fp-space-3);
  border: var(--fp-border-w-hair) solid var(--fp-border-default);
  border-radius: var(--fp-radius-pill);
  background: var(--fp-bg-surface);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-medium);
  color: var(--fp-text-secondary);
  transition: var(--fp-transition-control);
}
.fp-chip:hover { border-color: var(--fp-border-strong); color: var(--fp-text-primary); }
.fp-chip.is-active {
  background: var(--fp-bg-brand-soft);
  border-color: var(--fp-action-primary);
  color: var(--fp-text-brand);
}
.fp-chip__x { display: grid; place-items: center; opacity: 0.6; }
.fp-chip__x:hover { opacity: 1; }

/* Tabs */
.fp-tabs {
  display: flex;
  gap: var(--fp-space-1);
  border-bottom: var(--fp-border-subtle-line);
  overflow-x: auto;
}
.fp-tab {
  padding: var(--fp-space-3) var(--fp-space-4);
  border-bottom: var(--fp-border-w-thick) solid transparent;
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-medium);
  color: var(--fp-text-secondary);
  white-space: nowrap;
  transition: var(--fp-transition-control);
}
.fp-tab:hover { color: var(--fp-text-primary); }
.fp-tab.is-active { color: var(--fp-text-brand); border-bottom-color: var(--fp-action-primary); font-weight: var(--fp-weight-semibold); }

/* Accordion */
.fp-acc { border-top: var(--fp-border-subtle-line); }
.fp-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-space-4);
  width: 100%;
  padding: var(--fp-space-4) 0;
  text-align: left;
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  color: var(--fp-text-primary);
}
.fp-acc__head svg { transition: transform var(--fp-duration-fast) var(--fp-ease-standard); flex: none; }
.fp-acc.is-open .fp-acc__head svg { transform: rotate(180deg); }
.fp-acc__panel { display: none; padding-bottom: var(--fp-space-4); font-size: var(--fp-text-sm); color: var(--fp-text-secondary); }
.fp-acc.is-open .fp-acc__panel { display: block; }

/* Pagination */
.fp-pager { display: flex; align-items: center; justify-content: center; gap: var(--fp-space-1); }
.fp-pager button, .fp-pager a {
  min-width: var(--fp-tap-min); height: var(--fp-tap-min);
  display: grid; place-items: center;
  border-radius: var(--fp-radius-md);
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-sm);
  color: var(--fp-text-secondary);
  transition: var(--fp-transition-control);
}
.fp-pager button:hover, .fp-pager a:hover { background: var(--fp-bg-sunken); color: var(--fp-text-primary); text-decoration: none; }
.fp-pager [aria-current="page"] { background: var(--fp-action-primary); color: var(--fp-text-on-brand); }

/* Footer */
.fp-footer {
  background: var(--fp-bg-inverse);
  color: var(--fp-paper-300);
  padding-block: var(--fp-space-16) var(--fp-space-8);
  font-size: var(--fp-text-sm);
}
.fp-footer a { color: var(--fp-paper-300); }
.fp-footer a:hover { color: var(--fp-paper-0); }
.fp-footer__grid { display: grid; gap: var(--fp-space-8); }
@media (min-width: 800px) { .fp-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.fp-footer__title {
  font-family: var(--fp-font-body);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-bold);
  letter-spacing: var(--fp-tracking-label);
  text-transform: uppercase;
  color: var(--fp-paper-0);
  margin-bottom: var(--fp-space-4);
}
.fp-footer__links li + li { margin-top: var(--fp-space-2); }
.fp-footer__bottom {
  margin-top: var(--fp-space-10);
  padding-top: var(--fp-space-6);
  border-top: 1px solid var(--fp-border-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-space-4);
  justify-content: space-between;
  font-size: var(--fp-text-xs);
  color: var(--fp-paper-400);
}

/* Floating WhatsApp affordance */
.fp-float-wa {
  position: fixed;
  right: var(--fp-space-5);
  bottom: var(--fp-space-5);
  z-index: var(--fp-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--fp-space-2);
  height: 52px;
  padding-inline: var(--fp-space-4);
  border-radius: var(--fp-radius-pill);
  background: var(--fp-green-500);
  color: var(--fp-paper-0);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  box-shadow: var(--fp-shadow-lg);
}
.fp-float-wa:hover { background: var(--fp-green-700); text-decoration: none; }

/* ==========================================================================
   10. BRAND MARK
   ========================================================================== */

.fp-logo { display: inline-flex; align-items: center; gap: var(--fp-space-3); min-width: 0; }
.fp-logo:hover { text-decoration: none; }
.fp-logo__mark { width: 36px; height: 36px; flex: none; }
.fp-logo__word {
  display: grid;
  line-height: 1;
  min-width: 0;
}
.fp-logo__word b {
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-lg);
  font-weight: var(--fp-weight-extrabold);
  letter-spacing: var(--fp-tracking-tight);
  color: var(--fp-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fp-logo__word span {
  font-family: var(--fp-font-mono);
  font-size: 10px;
  letter-spacing: var(--fp-tracking-label);
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin-top: 3px;
  /* The tagline is decorative — drop it on narrow phones (360-390px). With
     only one action icon (wishlist) left in the header bar now that search
     has its own row and cart has moved to the bottom nav, "Super Golden"
     itself has enough room there and never needs to shorten. */
  display: none;
}
@media (min-width: 480px) {
  .fp-logo__word span { display: block; }
}
.fp-logo--inverse .fp-logo__word b { color: var(--fp-paper-0); }
.fp-logo--inverse .fp-logo__word span { color: var(--fp-paper-400); }

/* ==========================================================================
   11. DOCUMENTATION CHROME (specimen pages only — not shipped to storefront)
   ========================================================================== */

.fp-doc-nav {
  position: sticky; top: 0; z-index: var(--fp-z-header);
  background: var(--fp-bg-surface);
  border-bottom: var(--fp-border-subtle-line);
}
.fp-doc-nav__inner { display: flex; align-items: center; gap: var(--fp-space-2); min-height: var(--fp-header-h); flex-wrap: wrap; }
.fp-doc-nav__links { display: flex; gap: var(--fp-space-1); margin-left: auto; flex-wrap: wrap; }

.fp-spec {
  display: grid;
  gap: var(--fp-space-4);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.fp-spec--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.fp-swatch-chip {
  height: 76px;
  border-radius: var(--fp-radius-sm);
  border: var(--fp-border-w-hair) solid rgba(16, 18, 43, 0.08);
}
.fp-spec__name { font-size: var(--fp-text-sm); font-weight: var(--fp-weight-semibold); margin-top: var(--fp-space-3); }
.fp-spec__var {
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-2xs);
  color: var(--fp-text-muted);
  word-break: break-all;
  display: block;
  margin-top: 2px;
}
.fp-spec__note { font-size: var(--fp-text-xs); color: var(--fp-text-secondary); margin-top: var(--fp-space-2); }

.fp-code {
  font-family: var(--fp-font-mono);
  font-size: var(--fp-text-xs);
  background: var(--fp-bg-sunken);
  color: var(--fp-indigo-800);
  padding: 2px 6px;
  border-radius: var(--fp-radius-xs);
}
pre.fp-code {
  display: block;
  padding: var(--fp-space-4);
  border-radius: var(--fp-radius-md);
  overflow-x: auto;
  line-height: var(--fp-leading-normal);
  color: var(--fp-text-secondary);
}

.fp-do-dont { display: grid; gap: var(--fp-space-4); }
@media (min-width: 700px) { .fp-do-dont { grid-template-columns: 1fr 1fr; } }
.fp-do, .fp-dont {
  padding: var(--fp-space-5);
  border-radius: var(--fp-radius-md);
  border: var(--fp-border-w-hair) solid;
  font-size: var(--fp-text-sm);
}
.fp-do { background: var(--fp-success-bg); border-color: var(--fp-success-border); }
.fp-dont { background: var(--fp-danger-bg); border-color: var(--fp-danger-border); }
.fp-do b, .fp-dont b { display: block; margin-bottom: var(--fp-space-2); }
.fp-do b { color: var(--fp-success-fg); }
.fp-dont b { color: var(--fp-danger-fg); }

/* Utilities used by the doc pages */
.fp-mt-0 { margin-top: 0; }
.fp-mt-2 { margin-top: var(--fp-space-2); }
.fp-mt-4 { margin-top: var(--fp-space-4); }
.fp-mt-6 { margin-top: var(--fp-space-6); }
.fp-mt-8 { margin-top: var(--fp-space-8); }
.fp-text-center { text-align: center; }
.fp-hide-mobile { display: none; }
@media (min-width: 700px) { .fp-hide-mobile { display: block; } }

/* Logo mark colouring — the knockout behind the dot must match whatever
   surface the logo is sitting on, so it is a variable, not a hard white. */
.fp-logo { --fp-logo-knockout: var(--fp-bg-surface); }
.fp-logo__mark { color: var(--fp-action-primary); }
.fp-logo--inverse { --fp-logo-knockout: var(--fp-bg-inverse); }
.fp-logo--inverse .fp-logo__mark { color: var(--fp-paper-0); }