/* CySuperStore — the purchase funnel (product detail -> cart -> checkout -> order).
 *
 * Phase B..H of the conversion funnel redesign. Hand-written, static CSS: no build
 * step, no CDN, no framework. It reads the same design tokens as the apex marketplace
 * (dark navy chrome, amber primary CTA, neutral page, 4-10px radii, no glassmorphism,
 * no decorative gradients) and keeps the shop's own --sf-* theme variables for the
 * product artwork, which stays the shop's identity.
 *
 * Axes the file is organised on:
 *   1. tokens                      5. cart page
 *   2. primitives (buttons, fields) 6. checkout
 *   3. product detail              7. confirmation / order / failure
 *   4. mini cart drawer + mobile bar 8. responsive + accessibility
 */

/* ------------------------------------------------------------------ 1 tokens */
.fn-body,
.fn-cart,
.fn-checkout,
.fn-confirm,
.fn-order,
.fn-fail,
.fn-pdp {
  --fn-navy: #0b1220;
  --fn-navy-2: #16203a;
  --fn-amber: #f59e0b;
  --fn-amber-dark: #b45309;
  --fn-amber-soft: #fef3c7;
  --fn-bg: #f5f6f7;
  --fn-surface: #ffffff;
  --fn-surface-2: #fafbfc;
  --fn-border: #d8dee4;
  --fn-border-strong: #b9c2cb;
  --fn-text: #16202c;
  --fn-muted: #5b6672;
  --fn-success: #15803d;
  --fn-success-soft: #ecfdf3;
  --fn-error: #b42318;
  --fn-error-soft: #fef3f2;
  --fn-warn: #92400e;
  --fn-warn-soft: #fffaeb;
  --fn-radius-sm: 4px;
  --fn-radius: 8px;
  --fn-radius-lg: 10px;
  --fn-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --fn-shadow-drawer: -8px 0 30px rgba(11, 18, 32, .18);
}

.fn-pdp,
.fn-cart,
.fn-checkout,
.fn-confirm,
.fn-order,
.fn-fail,
.fn-rail,
.fn-empty {
  max-width: 1320px;
  margin: 0 auto;
}

.fn-main { padding: 14px 16px 64px; }
.fn-main--checkout { max-width: 1180px; margin: 0 auto; }

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

.fn-muted { color: var(--fn-muted); }
.fn-link { color: #0f766e; font-weight: 600; text-decoration: none; }
.fn-link:hover { text-decoration: underline; }
.fn-page-title { margin: 0; font-size: 26px; line-height: 1.2; color: var(--fn-text); }
.fn-page-sub { margin: 4px 0 0; color: var(--fn-muted); font-size: 14px; }
.fn-subhead { margin: 22px 0 8px; font-size: 15px; letter-spacing: .01em; color: var(--fn-text); }

/* --------------------------------------------------------------- 2 primitives */
.fn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid transparent; border-radius: var(--fn-radius);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
  cursor: pointer; text-decoration: none; text-align: center;
  background: var(--fn-surface-2); color: var(--fn-text);
}
.fn-btn:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
.fn-btn--primary { background: var(--fn-amber); color: #1b1503; border-color: #d97706; }
.fn-btn--primary:hover { background: #fbbf24; }
.fn-btn--ghost { background: var(--fn-surface); border-color: var(--fn-border-strong); color: var(--fn-text); }
.fn-btn--ghost:hover { background: #f1f3f5; }
.fn-btn--link {
  background: transparent; color: #0f766e; text-decoration: underline;
  border-color: transparent; font-weight: 600;
}
.fn-btn--sm { min-height: 36px; padding: 6px 11px; font-size: 13px; }
.fn-btn--block { width: 100%; }
.fn-btn--cta {
  width: 100%; min-height: 52px; font-size: 17px; border-radius: var(--fn-radius);
}
.fn-btn[disabled], .fn-btn--cta[disabled] {
  background: #e4e8ec; color: #6b7683; border-color: var(--fn-border);
  cursor: not-allowed;
}

.fn-field { margin-bottom: 14px; }
.fn-field__label, .fn-field__static-label {
  display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--fn-text);
}
.fn-field__static { margin: 0; font-size: 15px; color: var(--fn-muted); }
.fn-field__input {
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--fn-border-strong); border-radius: var(--fn-radius-sm);
  background: var(--fn-surface); color: var(--fn-text);
  /* 16px: any smaller and iOS Safari zooms the page when the field is focused. */
  font: inherit; font-size: 16px;
}
.fn-field__input:focus { outline: 3px solid #99f6e4; outline-offset: 0; border-color: #0f766e; }
.fn-field__input--short { max-width: 140px; }
.fn-field__hint { margin: 5px 0 0; font-size: 12px; color: var(--fn-muted); }
.fn-field__error { margin: 5px 0 0; font-size: 13px; font-weight: 600; color: var(--fn-error); }
.fn-field__error:empty { display: none; }
.fn-field--invalid .fn-field__input { border-color: var(--fn-error); background: var(--fn-error-soft); }
.fn-field-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
.fn-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.fn-check input { width: 20px; height: 20px; margin: 2px 0 0; }

.fn-notice {
  margin: 12px 0; padding: 12px 14px;
  background: var(--fn-surface); border: 1px solid var(--fn-border);
  border-left: 4px solid var(--fn-navy); border-radius: var(--fn-radius-sm);
  font-size: 14px; color: var(--fn-text);
}
.fn-notice--ok { border-left-color: var(--fn-success); background: var(--fn-success-soft); }
.fn-notice--warn { border-left-color: var(--fn-amber); background: var(--fn-warn-soft); }
.fn-notice--error { border-left-color: var(--fn-error); background: var(--fn-error-soft); }
.fn-notice__list { margin: 6px 0 0; padding-left: 18px; }
.fn-notice strong { display: block; }

.fn-price { display: inline-block; white-space: nowrap; color: var(--fn-text); font-weight: 800; }
.fn-price__symbol, .fn-price__whole { font-size: 1em; }
.fn-price__fraction { font-size: .72em; vertical-align: super; }
.fn-price--lg { font-size: 30px; line-height: 1.05; }
.fn-price--sm { font-size: 18px; }

.fn-badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  background: var(--fn-amber-soft); color: #7c2d12; font-size: 12px; font-weight: 700;
}
.fn-badge--paid, .fn-badge--delivered, .fn-badge--fulfilled { background: var(--fn-success-soft); color: #166534; }
.fn-badge--pending_payment, .fn-badge--draft { background: var(--fn-warn-soft); color: var(--fn-warn); }
.fn-badge--canceled, .fn-badge--refunded, .fn-badge--exception { background: var(--fn-error-soft); color: var(--fn-error); }

/* -------------------------------------------------- 3 product detail (40/35/25) */
.fn-breadcrumb { margin: 0 0 12px; font-size: 12px; color: var(--fn-muted); }
.fn-breadcrumb__list {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.fn-breadcrumb__list li + li::before { content: "›"; margin-right: 6px; color: var(--fn-border-strong); }
.fn-breadcrumb a { color: #0f766e; text-decoration: none; }
.fn-breadcrumb a:hover { text-decoration: underline; }

.fn-pdp { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }

.fn-gallery { display: grid; gap: 10px; grid-template-columns: 1fr; }
.fn-gallery__frame {
  margin: 0; padding: 0; min-height: 320px;
  background: var(--fn-surface); border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.fn-gallery__frame--art { min-height: 320px; }
.fn-gallery__main, .fn-gallery__art {
  display: block; width: 100%; height: 100%;
  object-fit: contain; aspect-ratio: 1 / 1;
}
.fn-gallery__art { position: relative; display: flex; align-items: center; justify-content: center; }
.fn-gallery__art-label {
  position: absolute; left: 12px; top: 10px;
  background: rgba(11, 18, 32, .72); color: #fff;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.fn-gallery__thumbs { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.fn-gallery__thumb {
  padding: 2px; width: 72px; height: 72px; background: var(--fn-surface);
  border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm); cursor: pointer;
}
.fn-gallery__thumb.is-active { border-color: var(--fn-amber); box-shadow: 0 0 0 2px var(--fn-amber-soft); }
.fn-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fn-gallery__note { margin: 0; font-size: 12px; color: var(--fn-muted); }

/* Real image gallery: one viewport that is a swipe track on mobile and a single
   frame on desktop (the thumbnail rail drives it). Every image keeps a 1:1 box so the
   grid never shifts while the real photographs load. */
.fn-gallery__viewport { position: relative; }
.fn-gallery__track {
  display: flex; gap: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  background: var(--fn-surface); border: 1px solid var(--fn-border); border-radius: var(--fn-radius);
  -webkit-overflow-scrolling: touch;
}
.fn-gallery__slide {
  flex: 0 0 100%; margin: 0; scroll-snap-align: center; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; min-height: 320px;
}
.fn-gallery__slide img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  aspect-ratio: 1 / 1;
}
.fn-gallery__dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.fn-gallery__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--fn-border-strong); opacity: .6;
}
.fn-gallery__dot.is-active { background: var(--fn-navy); opacity: 1; }
.fn-gallery__counter {
  position: absolute; right: 10px; bottom: 10px; margin: 0;
  background: rgba(11, 18, 32, .72); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}

.fn-pdp__seller { margin: 0 0 4px; font-size: 14px; }
.fn-pdp__shop { color: #0f766e; font-weight: 700; text-decoration: none; }
.fn-pdp__shop:hover { text-decoration: underline; }
.fn-pdp__title { margin: 0 0 10px; font-size: 26px; line-height: 1.25; color: var(--fn-text); }
.fn-pdp__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fn-pdp__was { font-size: 13px; color: var(--fn-muted); }
.fn-pdp__hook { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--fn-text); }

.fn-rating { display: none; }

.fn-variants { margin: 0 0 16px; padding: 0; border: 0; }
.fn-variants__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fn-variants__option {
  display: flex; gap: 8px; align-items: center; cursor: pointer;
  min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--fn-border-strong); border-radius: var(--fn-radius-sm);
  background: var(--fn-surface);
}
.fn-variants__option:has(input:checked) { border-color: var(--fn-navy); box-shadow: 0 0 0 2px var(--fn-amber-soft); }
.fn-variants__price { font-weight: 700; font-size: 14px; color: var(--fn-muted); }
.fn-variants__single { margin: 0 0 14px; font-size: 14px; }

.fn-benefits { margin: 0; padding-left: 20px; }
.fn-benefits__item { margin-bottom: 5px; font-size: 14px; line-height: 1.5; }

.fn-details { margin: 18px 0 0; padding: 0; border-top: 1px solid var(--fn-border); }
.fn-details__row { display: grid; grid-template-columns: 40% 60%; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--fn-border); }
.fn-details dt { font-size: 13px; color: var(--fn-muted); margin: 0; }
.fn-details dd { margin: 0; font-size: 14px; }

.fn-buy {
  background: var(--fn-surface); border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius); padding: 16px; box-shadow: var(--fn-shadow);
}
.fn-buy__price { margin-bottom: 8px; }
.fn-buy__was { display: block; font-size: 13px; color: var(--fn-muted); }
.fn-buy__price-note { margin: 6px 0 12px; font-size: 12px; color: var(--fn-muted); }
.fn-buy__form { margin: 0 0 14px; }
.fn-buy__facts { margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; }
.fn-buy__facts li { padding: 5px 0; border-bottom: 1px solid var(--fn-border); }
.fn-buy__unavailable { margin: 0 0 10px; font-size: 13px; color: var(--fn-error); }

.fn-stock {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 15px; font-weight: 700;
}
.fn-stock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fn-muted); }
.fn-stock--in { color: var(--fn-success); }
.fn-stock--in .fn-stock__dot { background: var(--fn-success); }
.fn-stock--low { color: var(--fn-warn); }
.fn-stock--low .fn-stock__dot { background: var(--fn-amber); }
.fn-stock--out { color: var(--fn-error); }
.fn-stock--out .fn-stock__dot { background: var(--fn-error); }
.fn-stock__qty { font-weight: 600; color: var(--fn-muted); font-size: 13px; }

.fn-qty { margin-bottom: 14px; }
.fn-qty__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.fn-qty__controls { display: flex; align-items: stretch; gap: 0; max-width: 190px; }
.fn-qty__btn {
  width: 44px; min-height: 44px; font-size: 20px; line-height: 1;
  background: var(--fn-surface-2); border: 1px solid var(--fn-border-strong);
  cursor: pointer; color: var(--fn-text);
}
.fn-qty__btn:first-child { border-radius: var(--fn-radius-sm) 0 0 var(--fn-radius-sm); }
.fn-qty__btn:last-child { border-radius: 0 var(--fn-radius-sm) var(--fn-radius-sm) 0; }
.fn-qty__btn:focus-visible { outline: 3px solid #0f766e; outline-offset: 1px; z-index: 1; }
.fn-qty__btn[disabled] { color: var(--fn-muted); cursor: not-allowed; }
.fn-qty__input {
  flex: 1 1 auto; width: 100%; min-width: 56px; text-align: center;
  border: 1px solid var(--fn-border-strong); border-left: 0; border-right: 0;
  font: inherit; font-size: 16px; min-height: 44px;
  -moz-appearance: textfield; appearance: textfield;
}
.fn-qty__input::-webkit-outer-spin-button,
.fn-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fn-qty__hint { margin: 6px 0 0; font-size: 12px; color: var(--fn-muted); }

.fn-trust { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; }
.fn-trust li { display: flex; gap: 8px; padding: 7px 0; border-top: 1px solid var(--fn-border); }
.fn-trust__icon { flex: 0 0 auto; }
.fn-trust--compact li { border-top: 0; padding: 3px 0; color: var(--fn-muted); }

.fn-pdp__section { margin-top: 30px; border-top: 1px solid var(--fn-border); }
.fn-facts { margin: 0; padding: 0; list-style: none; }
.fn-facts__item { padding: 8px 0; border-bottom: 1px solid var(--fn-border); font-size: 14px; }
.fn-facts--compact .fn-facts__item { padding: 4px 0; border-bottom: 0; font-size: 13px; color: var(--fn-muted); }

/* Long-form product copy (the catalogue's own description). Escaped and wrapped, never
   rendered as supplier HTML. */
.fn-prose { max-width: 78ch; font-size: 15px; line-height: 1.65; color: var(--fn-text); }
.fn-prose p { margin: 0 0 10px; }

.fn-rail { margin-top: 30px; }
.fn-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fn-border); }
.fn-rail__link { font-size: 12px; font-weight: 700; color: #0f766e; text-decoration: none; }
.fn-rail__list {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin: 12px 0 0; padding: 0; list-style: none;
}
.fn-rail__item { min-width: 0; }

/* ---------------------------------------------- 4 mini cart drawer + mobile bar */
.fn-drawer { position: fixed; inset: 0; z-index: 60; }
.fn-drawer[hidden] { display: none; }
.fn-drawer__scrim { position: absolute; inset: 0; background: rgba(11, 18, 32, .45); }
.fn-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--fn-surface); box-shadow: var(--fn-shadow-drawer);
  border-left: 1px solid var(--fn-border);
}
.fn-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--fn-border); background: var(--fn-surface-2);
}
.fn-drawer__title { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.fn-drawer__tick { color: var(--fn-success); font-weight: 800; }
.fn-drawer__close {
  width: 44px; height: 44px; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm);
  background: var(--fn-surface); font-size: 16px; cursor: pointer;
}
.fn-drawer__close:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
#mini-cart { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px; }
.fn-drawer__list { margin: 0; padding: 0; list-style: none; }
.fn-drawer__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fn-border); }
.fn-drawer__art {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--fn-radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.fn-drawer__item-body { display: block; min-width: 0; }
.fn-drawer__item-title { display: block; font-size: 14px; font-weight: 700; }
.fn-drawer__item-meta { display: block; font-size: 12px; color: var(--fn-muted); }
.fn-drawer__item-price { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }
.fn-drawer__empty { color: var(--fn-muted); font-size: 14px; }
.fn-drawer__foot {
  border-top: 1px solid var(--fn-border); padding: 12px 16px 16px; background: var(--fn-surface-2);
}
.fn-drawer__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 10px; }
.fn-drawer__actions { display: grid; gap: 8px; }

.fn-stickybuy { display: none; }

/* ------------------------------------------------------------ 5 cart page 70/30 */
.fn-cart__grid { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; margin-top: 12px; }
.fn-cart__head { margin-bottom: 12px; }
.fn-cart__list { margin: 0; padding: 0; list-style: none; }
.fn-cart__continue { margin: 14px 0 0; }
.fn-cart__cross { margin-top: 34px; border-top: 1px solid var(--fn-border); }

.fn-line {
  display: grid; gap: 12px; grid-template-columns: 84px 1fr;
  padding: 16px 0; border-bottom: 1px solid var(--fn-border);
}
.fn-line__media-link { display: block; }
.fn-line__art {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: var(--fn-radius-sm); font-size: 30px;
}
.fn-line__title { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.fn-line__title a { color: var(--fn-text); text-decoration: none; }
.fn-line__title a:hover { text-decoration: underline; }
.fn-line__meta { margin: 0 0 10px; padding: 0; list-style: none; font-size: 13px; color: var(--fn-text); }
.fn-line__meta li { padding: 1px 0; }
.fn-line__stock--in { color: var(--fn-success); font-weight: 600; }
.fn-line__stock--out { color: var(--fn-error); font-weight: 600; }
.fn-line__pricechange { color: var(--fn-warn); font-weight: 600; }
.fn-line__problem { color: var(--fn-error); }
.fn-line__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fn-line__unit, .fn-line__total { display: grid; font-size: 13px; }
.fn-line__unit strong, .fn-line__total strong { font-size: 15px; }
.fn-line__qty { display: grid; gap: 4px; }
.fn-line__actions { grid-column: 2; }

.fn-summary {
  background: var(--fn-surface); border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius); padding: 16px; box-shadow: var(--fn-shadow);
}
.fn-summary__title { margin: 0 0 10px; font-size: 17px; }
.fn-summary__rows { margin: 0 0 12px; padding: 0; }
.fn-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.fn-summary__row dt { margin: 0; color: var(--fn-text); }
.fn-summary__row dd { margin: 0; text-align: right; }
.fn-summary__row--total { border-top: 1px solid var(--fn-border); margin-top: 6px; padding-top: 10px; font-size: 16px; }
.fn-summary__row--total dd strong { font-size: 18px; }
.fn-summary__note { margin: 0 0 12px; font-size: 12px; color: var(--fn-muted); }
.fn-summary__continue { margin: 10px 0 0; font-size: 13px; }
.fn-summary--checkout { padding: 0; }
.fn-summary__toggle { display: none; }
.fn-summary__items { margin: 0 0 12px; padding: 0; list-style: none; }
.fn-summary__item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fn-border); }
.fn-summary__art {
  width: 44px; height: 44px; border-radius: var(--fn-radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.fn-summary__item-title { display: block; font-size: 13px; font-weight: 700; }
.fn-summary__item-meta { display: block; font-size: 12px; color: var(--fn-muted); }
.fn-summary__item-price { font-size: 13px; font-weight: 700; white-space: nowrap; }

.fn-empty { padding: 20px 0; }
.fn-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 22px; }

/* ------------------------------------------------------------- 6 checkout page */
.fn-body--checkout { background: var(--fn-bg); margin: 0; }
.fn-checkout-header { background: var(--fn-navy); color: #fff; }
.fn-checkout-header__inner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  max-width: 1180px; margin: 0 auto; padding: 12px 16px;
}
.fn-checkout-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.fn-checkout-header__mark { font-size: 22px; }
.fn-checkout-header__names { display: grid; }
.fn-checkout-header__name { font-weight: 800; font-size: 17px; }
.fn-checkout-header__sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; }
.fn-checkout-header__secure { margin: 0; font-size: 13px; font-weight: 700; color: #fde68a; }
.fn-checkout-header__cart { color: #e2e8f0; font-size: 13px; font-weight: 600; text-decoration: none; }
.fn-checkout-header__cart:hover { text-decoration: underline; }
.fn-checkout-footer {
  max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px;
  border-top: 1px solid var(--fn-border); font-size: 12px; color: var(--fn-text);
}
.fn-checkout-footer p { margin: 3px 0; }
.fn-flash { max-width: 1180px; margin: 0 auto; }

.fn-steps { margin: 14px 0 6px; }
.fn-steps__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.fn-steps__step { padding: 4px 10px; border: 1px solid var(--fn-border); border-radius: 999px; color: var(--fn-muted); background: var(--fn-surface); }
.fn-steps__step a { color: inherit; text-decoration: none; }
.fn-steps__step.is-done { border-color: var(--fn-success); color: var(--fn-success); }
.fn-steps__step.is-current { border-color: var(--fn-navy); color: var(--fn-navy); font-weight: 700; }

.fn-checkout__grid { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
.fn-step {
  margin: 0 0 18px; padding: 16px; border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius); background: var(--fn-surface);
}
.fn-step__legend { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; padding: 0; }
.fn-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--fn-navy); color: #fff;
  font-size: 13px; font-weight: 700;
}
.fn-step__hint { margin: 6px 0 14px; font-size: 13px; color: var(--fn-muted); }
.fn-methods { margin: 0; padding: 0; list-style: none; }
.fn-methods__item { margin-bottom: 8px; }
.fn-methods__label {
  display: flex; gap: 10px; align-items: flex-start; min-height: 44px;
  padding: 10px 12px; border: 1px solid var(--fn-border-strong); border-radius: var(--fn-radius-sm);
  background: var(--fn-surface);
}
.fn-methods__label:has(input:checked) { border-color: var(--fn-navy); box-shadow: 0 0 0 2px var(--fn-amber-soft); }
.fn-methods__label input { width: 20px; height: 20px; margin: 1px 0 0; }
.fn-methods__body { display: grid; gap: 2px; }
.fn-methods__name { font-size: 14px; font-weight: 700; }
.fn-methods__price { font-size: 14px; font-weight: 700; color: var(--fn-navy); }
.fn-methods__note { font-size: 12px; color: var(--fn-muted); }
.fn-review { margin: 0; }
.fn-review__row { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--fn-border); }
.fn-review dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fn-muted); }
.fn-review dd { margin: 0; font-size: 14px; }
.fn-review__items { margin: 0 0 6px; padding-left: 18px; }
.fn-review__row--total dd strong { font-size: 18px; }
.fn-legal { margin: 10px 0 0; font-size: 12px; color: var(--fn-muted); }

/* ------------------------------------- 7 confirmation / order / failure pages */
.fn-confirm__head, .fn-order__head, .fn-fail__head { margin-bottom: 14px; }
.fn-confirm__eyebrow { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fn-success); font-weight: 800; }
.fn-confirm__title { margin: 4px 0 6px; font-size: 27px; line-height: 1.2; }
.fn-confirm__number, .fn-confirm__status { margin: 2px 0; font-size: 14px; }
.fn-confirm__grid, .fn-order__grid, .fn-fail__grid { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
.fn-confirm__items { margin: 0; padding: 0; list-style: none; }
.fn-confirm__item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fn-border); }
.fn-confirm__item-title { display: block; font-size: 15px; font-weight: 700; }
.fn-confirm__item-meta { display: block; font-size: 12.5px; color: var(--fn-muted); }
.fn-confirm__item-price { font-weight: 700; white-space: nowrap; }
.fn-confirm__aside, .fn-order__aside, .fn-fail__aside {
  background: var(--fn-surface); border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius); padding: 16px;
}
.fn-confirm__actions, .fn-order__actions { display: grid; gap: 8px; margin-top: 12px; }
.fn-address { font-style: normal; font-size: 14px; line-height: 1.6; border-left: 3px solid var(--fn-amber); padding-left: 12px; }
.fn-address span { display: block; }

.fn-timeline { margin: 0; padding: 0; list-style: none; }
.fn-timeline__item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 8px 0; }
.fn-timeline__dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--fn-amber); }
.fn-timeline__label { display: block; font-size: 14px; font-weight: 600; }
.fn-timeline__when { display: block; font-size: 12px; color: var(--fn-muted); }

.fn-fail__icon { margin: 0; font-size: 26px; }
.fn-fail__lead { margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.fn-fail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fn-fail__actions .fn-btn--cta { width: auto; min-width: 220px; }

/* --------------------------------------------------- 8 responsive + focus/print */
@media (min-width: 760px) {
  .fn-field-row { grid-template-columns: 1fr 1fr; }
  .fn-field-row--3 { grid-template-columns: 2fr 1fr 1fr; }
  /* A real gallery on desktop: the thumbnail rail stands beside the image viewport. */
  .fn-gallery:has(.fn-gallery__thumbs) { grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
  .fn-gallery:has(.fn-gallery__thumbs) .fn-gallery__thumbs { flex-direction: column; flex-wrap: nowrap; }
  .fn-gallery:has(.fn-gallery__thumbs) .fn-gallery__thumb { width: 84px; height: 84px; }
  .fn-cart__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .fn-checkout__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .fn-confirm__grid, .fn-order__grid, .fn-fail__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .fn-line { grid-template-columns: 96px 1fr auto; align-items: start; }
  .fn-line__art { width: 96px; height: 96px; font-size: 34px; }
  .fn-line__actions { grid-column: auto; }
  .fn-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  /* Desktop product detail: 40% gallery / 35% information / 25% purchase box. */
  .fn-pdp { grid-template-columns: 40fr 35fr 25fr; gap: 26px; }
  .fn-gallery { grid-template-columns: 1fr; }
  .fn-gallery__frame, .fn-gallery__frame--art { min-height: 500px; }
  .fn-pdp__title { font-size: 27px; }
  .fn-buy { position: sticky; top: 84px; }
  .fn-summary--checkout { position: sticky; top: 84px; }
  .fn-cart__summary-sticky { position: sticky; top: 84px; }
  .fn-cart__grid > .fn-summary { position: sticky; top: 84px; }
}

@media (max-width: 1099px) {
  .fn-gallery__frame, .fn-gallery__frame--art { min-height: 380px; }
}

@media (max-width: 900px) {
  /* Mobile sticky purchase bar: price + CTA always reachable while scrolling. The
     storefront has no bottom navigation, so nothing else occupies this edge. */
  .fn-stickybuy {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--fn-surface); border-top: 1px solid var(--fn-border);
    box-shadow: 0 -2px 10px rgba(11, 18, 32, .08);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .fn-stickybuy__inner { display: flex; align-items: center; gap: 12px; }
  .fn-stickybuy__price { display: grid; min-width: 0; }
  .fn-stickybuy__stock { font-size: 11px; color: var(--fn-muted); }
  .fn-stickybuy__cta { min-height: 48px; min-width: 150px; }
  /* Reserve the bar's height so it never covers the footer or the last product. */
  .fn-pdp__section:last-of-type, .fn-rail:last-of-type { margin-bottom: 84px; }
  .fn-pdp { padding-bottom: 76px; }

  .fn-drawer__panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 82vh; border-left: 0; border-top: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-lg) var(--fn-radius-lg) 0 0;
  }
  .fn-summary--checkout { padding: 0; }
  .fn-summary__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; cursor: pointer; font-weight: 800;
  }
  .fn-summary__toggle-total { font-weight: 800; }
  .fn-summary__chev { font-size: 11px; color: var(--fn-muted); }
  .fn-summary--checkout > *:not(summary) { padding-left: 16px; padding-right: 16px; }
  .fn-summary--checkout > :last-child { padding-bottom: 16px; }
  .fn-cart__grid > .fn-summary, .fn-confirm__aside, .fn-order__aside { position: static; }
}

@media (max-width: 480px) {
  .fn-page-title { font-size: 22px; }
  .fn-pdp__title { font-size: 21px; }
  .fn-price--lg { font-size: 26px; }
  .fn-btn--cta { font-size: 16px; }
  .fn-line { grid-template-columns: 72px 1fr; }
  .fn-line__art { width: 72px; height: 72px; font-size: 26px; }
  .fn-confirm__title { font-size: 22px; }
}

/* No horizontal overflow anywhere: every media/frame is bounded by its column. */
.fn-pdp img, .fn-cart img, .fn-checkout img, .fn-rail img, .fn-drawer img { max-width: 100%; }
.fn-pdp, .fn-cart, .fn-checkout, .fn-confirm, .fn-order, .fn-fail { overflow-wrap: anywhere; }

@media print {
  .fn-stickybuy, .fn-drawer, .fn-buy__form, .fn-summary__toggle-total { display: none !important; }
}