/** Shopify CDN: Minification failed

Line 811:23 Unexpected "26"

**/
/* ═══════════════════════════════════════════════════════════════════
   AFP DESIGN TOKENS  —  A Few Pieces
   The Kinetic Archive Design System  v1.0

   Usage: Include after base.css, before any component styles.
   All AFP-specific tokens are prefixed with --afp- to avoid
   conflicts with Shopify Horizon's own CSS custom properties.

   Reference: docs/DESIGN-SYSTEM.md
   ═══════════════════════════════════════════════════════════════════ */

/* Fonts are loaded by layout/theme.liquid via <link> with preconnect for performance.
   Fallback @import kept so this file works standalone in previews. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;600;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Crimson+Pro:ital,wght@1,400;1,600&display=swap');

:root {

  /* ─────────────────────────────────────────────
     COLOR PALETTE
     ───────────────────────────────────────────── */

  /* Core */
  --afp-canvas:       #F5F3EF;   /* Bone Canvas — Warm off-white page background */
  --afp-black:        #1A1A1A;   /* Deep Obsidian — Primary text / structural borders */
  --afp-white:        #FFFFFF;   /* Pure Paper — card surfaces, polaroids */

  /* Primary Accent — warm taupe (legacy) */
  --afp-acid:         #A49A87;   /* Primary CTA, active states, badges, hover fills */
  --afp-acid-glow:    rgba(164, 154, 135, 0.30); /* Glow for elevated CTAs */

  /* Secondary Accents */
  --afp-orange:       #636B2F;   /* Secondary accent (olive), ticker CTAs, warm emphasis */
  --afp-red:          #C5412A;   /* Primary accent (handoff) / Error states */
  --afp-accent:       #C5412A;   /* Handoff accent color */

  /* Neutrals */
  --afp-gray-border:  #D9D4C8;   /* Borders, dividers, separators (handoff rule) */
  --afp-gray-text:    #6B6863;   /* Secondary/muted text (handoff ink-2) */
  --afp-gray-light:   #EFECE4;   /* Subtle backgrounds, hover states on light (handoff paper) */
  --afp-paper:        #EFECE4;   /* Image placeholder / tile tone (handoff) */
  --afp-ink:          var(--afp-black); /* Alias — handoff naming */
  --afp-ink-2:        #6B6863;
  --afp-ink-3:        #A09C94;
  --afp-rule:         #D9D4C8;

  /* Functional */
  --afp-overlay-light:  rgba(255, 255, 255, 0.35); /* Specimen card default overlay */
  --afp-overlay-hover:  rgba(255, 255, 255, 0.85); /* Specimen card hover reveal */
  --afp-glass-bg:       rgba(255, 255, 255, 0.70); /* Dock nav glassmorphism */
  --afp-glass-border:   rgba(0, 0, 0, 0.08);       /* Dock nav glass border */

  /* Grid background (hero section) */
  --afp-grid-line:    rgba(0, 0, 0, 0.035);


  /* ─────────────────────────────────────────────
     TYPOGRAPHY — FONT STACKS
     ───────────────────────────────────────────── */

  --afp-font-display: 'Archivo Black', 'Archivo', sans-serif;
  /* Used for: headings, CTAs, product names, logo, all ALL-CAPS display text */

  --afp-font-mono:    'Space Mono', ui-monospace, Menlo, monospace;
  /* Used for: prices, serial numbers, labels, metadata, subtitles, ticker */

  --afp-font-italic:  'Crimson Pro', Georgia, 'Times New Roman', serif;
  /* Used for: artist credits, editorial italic accents (always italic) */

  --afp-font-body:    'Crimson Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Used for: product descriptions, long-form text, body copy (Editorial Body) */


  /* ─────────────────────────────────────────────
     TYPOGRAPHY — SCALE
     Each token encodes: font-size / line-height / letter-spacing / weight
     Use the semantic names; do not hardcode sizes.
     ───────────────────────────────────────────── */

  /* Logo */
  --afp-text-logo-size:     17px;
  --afp-text-logo-weight:   700;
  --afp-text-logo-tracking: 0.12em;

  /* Section titles (fluid) */
  --afp-text-title-size:     clamp(36px, 6vw, 72px);
  --afp-text-title-weight:   900;
  --afp-text-title-tracking: -0.02em;
  --afp-text-title-leading:  1.0;

  /* Product page title */
  --afp-text-product-title-size:    42px;
  --afp-text-product-title-weight:  900;
  --afp-text-product-title-tracking: -0.02em;
  --afp-text-product-title-leading:  1.1;

  /* Card / component headings */
  --afp-text-card-name-size:    13px;
  --afp-text-card-name-weight:  900;
  --afp-text-card-name-tracking: 0.03em;

  /* CTA buttons — large */
  --afp-text-cta-lg-size:     16px;
  --afp-text-cta-lg-weight:   800;
  --afp-text-cta-lg-tracking: 0.10em;

  /* CTA buttons — standard */
  --afp-text-cta-size:     14px;
  --afp-text-cta-weight:   800;
  --afp-text-cta-tracking: 0.10em;

  /* CTA buttons — small (inline, card) */
  --afp-text-cta-sm-size:     10px;
  --afp-text-cta-sm-weight:   700;
  --afp-text-cta-sm-tracking: 0.12em;

  /* Subtitles / eyebrows (mono) */
  --afp-text-subtitle-size:     12px;
  --afp-text-subtitle-tracking: 0.15em;
  --afp-text-subtitle-opacity:  0.45;

  /* Labels / metadata (mono) */
  --afp-text-label-size:     11px;
  --afp-text-label-tracking: 0.10em;

  /* Micro labels / serial numbers (mono) */
  --afp-text-micro-size:     10px;
  --afp-text-micro-tracking: 0.10em;

  /* Prices (mono) */
  --afp-text-price-size:    15px;
  --afp-text-price-weight:  700;

  --afp-text-price-lg-size:   18px;
  --afp-text-price-lg-weight: 700;

  /* Body / description */
  --afp-text-body-size:    15px;
  --afp-text-body-leading: 1.6;

  /* Ticker */
  --afp-text-ticker-size:     14px;
  --afp-text-ticker-weight:   700;
  --afp-text-ticker-tracking: 0.06em;


  /* ─────────────────────────────────────────────
     SPACING SCALE
     ───────────────────────────────────────────── */

  --afp-space-1:    4px;
  --afp-space-2:    8px;
  --afp-space-3:   12px;
  --afp-space-4:   16px;
  --afp-space-5:   20px;
  --afp-space-6:   24px;
  --afp-space-8:   32px;
  --afp-space-10:  40px;
  --afp-space-12:  48px;
  --afp-space-14:  56px;
  --afp-space-16:  64px;
  --afp-space-20:  80px;  /* Section vertical padding */
  --afp-space-24:  96px;
  --afp-space-32: 128px;
  --afp-space-36: 144px;

  /* Semantic spacing */
  --afp-section-padding-v:  80px;   /* Section top/bottom padding */
  --afp-section-padding-h:  50px;   /* Section left/right padding */
  --afp-card-padding:       10px;   /* Card inner padding */
  --afp-polaroid-padding:   10px 10px 36px 10px; /* Polaroid (extra bottom for label) */
  --afp-grid-gap:           20px;   /* Product grid gap */
  --afp-grid-gap-lg:        25px;   /* Archive/specimen grid gap */
  --afp-block-gap:          40px;   /* Content block bottom margin */
  --afp-block-gap-lg:       50px;   /* Larger content block gap */

  /* Logo position */
  --afp-logo-top:  28px;
  --afp-logo-left: 32px;

  /* Dock nav */
  --afp-dock-bottom:   58px;   /* Distance from viewport bottom */
  --afp-ticker-height: 48px;   /* Ticker bar height */


  /* ─────────────────────────────────────────────
     BORDERS
     ───────────────────────────────────────────── */

  --afp-border-card:    1px solid var(--afp-gray-border);
  --afp-border-cta:     1px solid var(--afp-black);      /* Refined CTA border */
  --afp-border-size-btn: 1px solid var(--afp-gray-border);
  --afp-border-glass:   1px solid var(--afp-glass-border);

  --afp-radius-pill:    50px;   /* Dock nav, pill buttons */
  --afp-radius-none:    0;      /* CTAs, cards — intentionally square */


  /* ─────────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────────── */

  /* Luxury Minimalist — Shadows removed or softened */
  --afp-shadow-cta:        none;
  --afp-shadow-cta-hover:  none;
  --afp-shadow-cta-active: none;

  /* Card shadows — Defined for Minimalist Luxury */
  --afp-shadow-card:
    0 8px 24px rgba(0, 0, 0, 0.04),
    0 2px 8px  rgba(0, 0, 0, 0.02);

  --afp-shadow-card-hover:
    0 24px 48px rgba(0, 0, 0, 0.08),
    0 8px  16px rgba(0, 0, 0, 0.04);

  /* Polaroid shadows */
  --afp-shadow-polaroid:
    0 8px  32px rgba(0, 0, 0, 0.12),
    0 2px  8px  rgba(0, 0, 0, 0.06);

  --afp-shadow-polaroid-hover:
    0 16px 48px rgba(0, 0, 0, 0.18),
    0 4px  12px rgba(0, 0, 0, 0.10);

  /* Dock nav */
  --afp-shadow-dock:
    0 10px 30px rgba(0, 0, 0, 0.10),
    0 2px  6px  rgba(0, 0, 0, 0.05);

  /* Elevated CTA (acid glow) */
  --afp-shadow-cta-glow:
    0 10px 30px var(--afp-acid-glow);


  /* ─────────────────────────────────────────────
     MOTION — EASING & DURATION
     ───────────────────────────────────────────── */

  /* AFP signature spring — used on CTAs, cards, interactive reveals */
  --afp-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Aggressive wipe — quick-fill animations, scene transitions */
  --afp-ease-wipe:      cubic-bezier(0.86, 0, 0.07, 1);

  /* Standard ease — most transitions */
  --afp-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --afp-duration-fast:   0.2s;   /* Size buttons, opacity fades */
  --afp-duration-base:   0.3s;   /* Most hover states */
  --afp-duration-card:   0.4s;   /* Card lifts, spring interactions */
  --afp-duration-reveal: 0.35s;  /* Quick-fill wipe, overlays */
  --afp-duration-slow:   0.6s;   /* Page-level transitions */

  /* Ticker */
  --afp-ticker-duration: 22s;    /* Full ticker loop */


  /* ─────────────────────────────────────────────
     LAYOUT — GRID & COLUMNS
     ───────────────────────────────────────────── */

  --afp-cols-products:  4;          /* Desktop product grid columns */
  --afp-cols-archive:   4;          /* Desktop archive/specimen grid columns */
  --afp-product-detail-sidebar: 450px; /* Product page right column width */

  /* Z-index layers */
  --afp-z-base:       1;
  --afp-z-card:      10;
  --afp-z-card-drag: 100;
  --afp-z-dock:      999;
  --afp-z-ticker:    1000;
  --afp-z-logo:      1001;
  --afp-z-grain:     9999;


  /* ─────────────────────────────────────────────
     EFFECTS
     ───────────────────────────────────────────── */

  /* Grain texture — SVG fractalNoise overlay, multiply blend */
  --afp-grain-opacity:    0.04;
  --afp-grain-blend:      multiply;

  /* Hero architectural grid */
  --afp-hero-grid-size:   60px;

  /* Glassmorphism — dock nav */
  --afp-glass-blur:       18px;

  /* Skew — product grid theatrical tilt */
  --afp-grid-skew:        -10deg;   /* Container skew */
  --afp-card-skew:         10deg;   /* Card counter-skew (cancels container skew) */
  --afp-card-rotate:        4deg;   /* Card artistic tilt after counter-skew */


  /* ─────────────────────────────────────────────
     COMPONENT TOKENS — Quick-reference shortcuts
     for the most frequently used component styles
     ───────────────────────────────────────────── */

  /* CTA Button — every visual axis exposed as a custom prop so the
     theme customizer (afp-tokens-overrides.liquid + AFP Design System
     schema) can rebrand without touching code. Defaults below are the
     Apr 2026 handoff values. */
  --afp-btn-bg:               transparent;
  --afp-btn-color:            var(--afp-black);
  --afp-btn-border-color:     var(--afp-black);
  --afp-btn-border-width:     0px;           /* Using underline instead of full border */
  --afp-btn-border:           var(--afp-btn-border-width) solid var(--afp-btn-border-color);
  --afp-btn-shadow-offset:    5px;
  --afp-btn-shadow-offset-hover: 8px;
  --afp-btn-shadow:           var(--afp-btn-shadow-offset) var(--afp-btn-shadow-offset) 0 var(--afp-btn-border-color);
  --afp-btn-shadow-hover:     var(--afp-btn-shadow-offset-hover) var(--afp-btn-shadow-offset-hover) 0 var(--afp-btn-border-color);
  --afp-btn-padding-lg:       22px 52px;
  --afp-btn-padding:          18px 44px;
  --afp-btn-padding-x:        44px;
  --afp-btn-padding-y:        18px;
  --afp-btn-font-size:        14px;
  --afp-btn-letter-spacing:   0.10em;
  --afp-btn-radius:           0;
  --afp-btn-underline:        underline;            /* none → no underline */
  --afp-btn-underline-offset: 4px;
  --afp-btn-underline-thickness: 2px;
  --afp-btn-underline-thickness-hover: 3px;

  /* Badge — SOLD OUT / status labels */
  --afp-badge-bg:       var(--afp-acid);
  --afp-badge-color:    var(--afp-black);
  --afp-badge-padding:  5px 14px;

  /* Size selector buttons */
  --afp-size-btn-size:  48px;

  /* Thumbnail dimensions */
  --afp-thumb-w: 80px;
  --afp-thumb-h: 106px;   /* ~3:4 ratio */


  /* ─────────────────────────────────────────────
     ARCHIVE PALETTE — Minimal "digital archive" surface
     Used by .afp-archive-card and .afp-archive-* sections.
     This is a DELIBERATE retreat from the loud signature
     palette — no acid, no hard shadows, no skew. Gallery
     wall-tag aesthetic per client brief (Apr 2026).
     ───────────────────────────────────────────── */

  --afp-arch-canvas: #F5F3EF;   /* Warm off-white page background */
  --afp-arch-paper:  #EDEAE4;   /* Image placeholder / tile tone  */
  --afp-arch-ink:    #1A1A1A;   /* Warm near-black, primary text  */
  --afp-arch-ink-2:  #7A7168;   /* Secondary mono text            */
  --afp-arch-ink-3:  #A49A87;   /* Tertiary / muted labels        */
  --afp-arch-rule:   #D6D1C8;   /* Hairline rule / divider        */
  --afp-arch-accent: #636B2F;   /* Reserved olive accent          */

  --afp-arch-font-display: var(--font-heading--family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  --afp-arch-font-mono:    var(--afp-font-mono);

  /* Density gaps — applied to .afp-archive-grid */
  --afp-arch-gap-generous-col:  48px;
  --afp-arch-gap-generous-row:  88px;
  --afp-arch-gap-breathing-col: 72px;
  --afp-arch-gap-breathing-row: 128px;
  --afp-arch-gap-cathedral-col: 112px;
  --afp-arch-gap-cathedral-row: 180px;
}


/* ═══════════════════════════════════════════════════════════════════
   GRAIN TEXTURE UTILITY
   Apply <div class="afp-grain"></div> as a fixed child of <body>
   ═══════════════════════════════════════════════════════════════════ */
.afp-grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.03'/></svg>");
  opacity: var(--afp-grain-opacity);
  mix-blend-mode: var(--afp-grain-blend);
  pointer-events: none;
  z-index: var(--afp-z-grain);
}


/* ═══════════════════════════════════════════════════════════════════
   HERO GRID BACKGROUND UTILITY
   ═══════════════════════════════════════════════════════════════════ */
.afp-hero-grid {
  background-color: var(--afp-canvas);
  background-image:
    linear-gradient(var(--afp-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--afp-grid-line) 1px, transparent 1px);
  background-size: var(--afp-hero-grid-size) var(--afp-hero-grid-size);
}


/* ═══════════════════════════════════════════════════════════════════
   CTA BUTTON BASE  —  .afp-btn
   Extend with modifier classes or component styles.
   ═══════════════════════════════════════════════════════════════════ */
.afp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--afp-btn-section-padding-y) var(--afp-btn-section-padding-x);
  background: var(--afp-btn-section-bg);
  color: var(--afp-btn-section-color);
  font-family: var(--afp-btn-section-font);
  font-size: var(--afp-btn-section-font-size);
  font-weight: 800;
  letter-spacing: var(--afp-btn-section-letter-spacing);
  text-transform: uppercase;
  text-decoration: var(--afp-btn-section-underline);
  text-underline-offset: var(--afp-btn-section-underline-offset);
  text-decoration-thickness: var(--afp-btn-section-underline-thickness);
  border: var(--afp-btn-section-border-width) solid var(--afp-btn-section-border-color);
  box-shadow: var(--afp-btn-section-shadow-offset) var(--afp-btn-section-shadow-offset) 0 var(--afp-btn-section-border-color);
  border-radius: var(--afp-btn-section-radius);
  cursor: pointer;
  transition: transform var(--afp-duration-base) var(--afp-ease-spring), box-shadow var(--afp-duration-base) var(--afp-ease-spring), text-decoration-thickness var(--afp-duration-fast) ease;
}
.afp-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--afp-btn-section-shadow-offset-hover) var(--afp-btn-section-shadow-offset-hover) 0 var(--afp-btn-section-border-color);
  text-decoration-thickness: var(--afp-btn-section-underline-thickness-hover);
}
.afp-btn:active {
  transform: translate(0, 0);
  box-shadow: none;
}
.afp-btn--card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--afp-btn-card-padding-y) var(--afp-btn-card-padding-x);
  background: var(--afp-btn-card-bg);
  color: var(--afp-btn-card-color);
  font-family: var(--afp-btn-card-font);
  font-size: var(--afp-btn-card-font-size);
  font-weight: 800;
  letter-spacing: var(--afp-btn-card-letter-spacing);
  text-transform: uppercase;
  text-decoration: var(--afp-btn-card-underline);
  text-underline-offset: var(--afp-btn-card-underline-offset);
  text-decoration-thickness: var(--afp-btn-card-underline-thickness);
  border: var(--afp-btn-card-border-width) solid var(--afp-btn-card-border-color);
  box-shadow: var(--afp-btn-card-shadow-offset) var(--afp-btn-card-shadow-offset) 0 var(--afp-btn-card-border-color);
  border-radius: var(--afp-btn-card-radius);
  cursor: pointer;
  transition: transform var(--afp-duration-base) var(--afp-ease-spring), box-shadow var(--afp-duration-base) var(--afp-ease-spring), text-decoration-thickness var(--afp-duration-fast) ease;
}
.afp-btn--card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--afp-btn-card-shadow-offset-hover) var(--afp-btn-card-shadow-offset-hover) 0 var(--afp-btn-card-border-color);
  text-decoration-thickness: var(--afp-btn-card-underline-thickness-hover);
}
.afp-btn--card:active {
  transform: translate(0, 0);
  box-shadow: none;
}
.afp-btn--pdp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--afp-btn-pdp-padding-y) var(--afp-btn-pdp-padding-x);
  background: var(--afp-btn-pdp-bg);
  color: var(--afp-btn-pdp-color);
  font-family: var(--afp-btn-pdp-font);
  font-size: var(--afp-btn-pdp-font-size);
  font-weight: 800;
  letter-spacing: var(--afp-btn-pdp-letter-spacing);
  text-transform: uppercase;
  text-decoration: var(--afp-btn-pdp-underline);
  text-underline-offset: var(--afp-btn-pdp-underline-offset);
  text-decoration-thickness: var(--afp-btn-pdp-underline-thickness);
  border: var(--afp-btn-pdp-border-width) solid var(--afp-btn-pdp-border-color);
  box-shadow: var(--afp-btn-pdp-shadow-offset) var(--afp-btn-pdp-shadow-offset) 0 var(--afp-btn-pdp-border-color);
  border-radius: var(--afp-btn-pdp-radius);
  cursor: pointer;
  transition: transform var(--afp-duration-base) var(--afp-ease-spring), box-shadow var(--afp-duration-base) var(--afp-ease-spring), text-decoration-thickness var(--afp-duration-fast) ease;
}
.afp-btn--pdp:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--afp-btn-pdp-shadow-offset-hover) var(--afp-btn-pdp-shadow-offset-hover) 0 var(--afp-btn-pdp-border-color);
  text-decoration-thickness: var(--afp-btn-pdp-underline-thickness-hover);
}
.afp-btn--pdp:active {
  transform: translate(0, 0);
  box-shadow: none;
}
/* Secondary text-link CTA — pairs with the stamped buttons */
.afp-link--underlined {
  font-family: var(--afp-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--afp-black);
  text-decoration: none;
  border-bottom: 1px solid var(--afp-black);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--afp-duration-base) var(--afp-ease-standard);
}
.afp-link--underlined:hover {
  opacity: 0.7;
}

/* Inverse — white bg, black text (used inside acid-fill hover states) */
.afp-btn--inverse {
  background: var(--afp-black);
  color: var(--afp-acid);
  border-color: var(--afp-black);
}

.afp-btn--inverse:hover {
  background: var(--afp-white);
  color: var(--afp-black);
}


/* ═══════════════════════════════════════════════════════════════════
   BADGE  —  .afp-badge
   ═══════════════════════════════════════════════════════════════════ */
.afp-badge {
  display: inline-block;
  padding: var(--afp-badge-padding);
  background: var(--afp-badge-bg);
  color: var(--afp-badge-color);
  font-family: var(--afp-font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--afp-radius-none);
}

.afp-badge--olive {
  background: var(--afp-orange);
  color: var(--afp-canvas);
}

.afp-badge--ghost {
  background: transparent;
  color: var(--afp-black);
  border: 1px solid var(--afp-black);
}

.afp-badge--sold {
  background: var(--afp-black);
  color: var(--afp-canvas);
}


/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

/* Handoff utilities — use these instead of hand-styling text */
.afp-display {
  font-family: var(--afp-font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.afp-mono {
  font-family: var(--afp-font-mono);
}

.afp-italic {
  font-family: var(--afp-font-italic);
  font-style: italic;
  font-weight: 400;
}

/* Eyebrow — mono caps used as section pre-titles */
.afp-eye {
  font-family: var(--afp-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--afp-gray-text);
}

.afp-section-title {
  font-family: var(--afp-section-title-font, var(--afp-font-display));
  font-size: clamp(
    var(--afp-section-title-size-min, 32px),
    6vw,
    var(--afp-section-title-size-max, 64px)
  );
  font-weight: var(--afp-section-title-weight, 900);
  letter-spacing: var(--afp-section-title-letter-spacing, -0.02em);
  line-height: var(--afp-section-title-line-height, 1);
  text-transform: var(--afp-section-title-text-transform, uppercase);
  color: var(--afp-section-title-color, currentColor);
  margin: 0 0 var(--afp-section-title-margin-bottom, var(--afp-space-6));
}

.afp-badge--sold {
  background: transparent;
  color: var(--afp-gray-text);
  font-size: 8px;
  padding: 0;
  letter-spacing: 0.15em;
  opacity: 0.6;
  text-decoration: line-through;
}


/* Mono label */
.afp-label {
  font-family: var(--afp-font-mono);
  font-size: var(--afp-text-label-size);
  letter-spacing: var(--afp-text-label-tracking);
  text-transform: uppercase;
}

/* Price */
.afp-price {
  font-family: var(--afp-font-mono);
  font-size: var(--afp-text-price-size);
  font-weight: var(--afp-text-price-weight);
}

.afp-price--lg {
  font-size: var(--afp-text-price-lg-size);
}


/* ═══════════════════════════════════════════════════════════════════
   SERIAL OVERLAY  —  .afp-serial
   Mandatory on every product surface. The "0XX / 030" mark is the
   brand's whole personality — never drop it. Use:
     <figure class="afp-serial-wrap">
       <img …>
       <span class="afp-serial">012 / 030</span>
       <span class="afp-serial__label">AVAILABLE</span>  (optional)
     </figure>
   ═══════════════════════════════════════════════════════════════════ */
.afp-serial-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

.afp-serial {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--afp-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--afp-gray-text);
  text-transform: uppercase;
  pointer-events: none;
}

.afp-serial--dark {
  color: rgba(255, 255, 255, 0.6);
}

.afp-serial__label {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--afp-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--afp-gray-text);
  text-transform: uppercase;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   TICKER UTILITY  —  .afp-ticker
   ═══════════════════════════════════════════════════════════════════ */
.afp-ticker {
  overflow: hidden;
  background: var(--afp-black);
  color: var(--afp-canvas);
  height: var(--afp-ticker-height);
  display: flex;
  align-items: center;
}

.afp-ticker__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: afp-ticker-scroll var(--afp-ticker-duration) linear infinite;
  font-family: var(--afp-font-display);
  font-size: var(--afp-text-ticker-size);
  font-weight: var(--afp-text-ticker-weight);
  letter-spacing: var(--afp-text-ticker-tracking);
  text-transform: uppercase;
  will-change: transform;
}

.afp-ticker:hover .afp-ticker__track {
  animation-play-state: paused;
}

.afp-ticker__cta {
  color: var(--afp-acid);
  cursor: pointer;
  transition: color var(--afp-duration-base);
}

.afp-ticker__cta:hover {
  color: var(--afp-orange);
}

.afp-ticker__sep {
  opacity: 0.3;
  padding: 0 6px;
  font-size: 8px;
}

@keyframes afp-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════════════════════════════
   DOCK NAV  —  .afp-dock
   ═══════════════════════════════════════════════════════════════════ */
.afp-dock {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--afp-radius-pill);
  background: var(--afp-glass-bg);
  backdrop-filter: blur(var(--afp-glass-blur));
  -webkit-backdrop-filter: blur(var(--afp-glass-blur));
  border: var(--afp-border-glass);
  box-shadow: var(--afp-shadow-dock);
}

.afp-dock__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 18px;
  border-radius: 40px;
  font-family: var(--afp-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--afp-black);
  text-decoration: none;
  transition: all var(--afp-duration-base);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}

.afp-dock__link:hover {
  background: var(--afp-black);
  color: var(--afp-white);
}

.afp-dock__link--active {
  background: var(--afp-acid);
  color: var(--afp-black);
}

.afp-dock__link--active:hover {
  background: var(--afp-black);
  color: var(--afp-acid);
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --afp-section-padding-v: 60px;
    --afp-section-padding-h: 20px;
    --afp-logo-top:  16px;
    --afp-logo-left: 16px;
    --afp-text-logo-size: 14px;
    --afp-ticker-height: 42px;
    --afp-text-ticker-size: 12px;
    --afp-dock-bottom: 54px;
    --afp-cols-products: 2;
    --afp-cols-archive: 2;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --afp-cols-products: 3;
    --afp-cols-archive: 2;
  }
}
<!-- test sync Sun Apr 26 05:49:39 PM CEST 2026 -->