/*
 * parcel-preview.css
 * Standalone CSS for the Parcel WordPress FSE theme preview pages.
 * Replicates the WP-generated custom properties from theme.json plus all
 * theme stylesheets (reset.css, base.css, skin.css) so preview pages
 * render accurately without a live WordPress instance.
 *
 * Structure mirrors the theme's @layer declaration order.
 * Fonts load from Google Fonts CDN (same SIL OFL 1.1 files; browser handles subset routing).
 *
 * Theme identity: Parcel — conversion-focused DTC product theme.
 * Fictitious brand: Timber & Salt — artisan pantry subscription.
 * Syne (headlines, bold geometric sans) + Outfit (body, clean variable sans).
 */

/* ================================================================
   WP PRESET CUSTOM PROPERTIES
   WordPress injects these inline from theme.json. We declare them
   as :root custom properties so all CSS references resolve.
   Pillar 9 (Archaeological Records): every token named and sourced.
   ================================================================ */
:root {
  /* Color palette — warm cream ground, orange DTC punch
     parcel-carbon:      near-black primary text and dark backgrounds
     parcel-charcoal:    dark grey for h3/h4 supporting heads
     parcel-slate:       mid grey for h5, secondary text
     parcel-mist:        light grey for captions, post dates
     parcel-linen:       warm off-white for section backgrounds, quote bg
     parcel-cream:       page base background — the warmest neutral
     parcel-orange:      warm orange — the single accent; CTA, category, label
     parcel-orange-tint: pale orange — hover states, light accent areas
     parcel-rule:        warm grey for rules and dividers
  */
  --wp--preset--color--parcel-carbon:       #1c1c1c;
  --wp--preset--color--parcel-charcoal:     #2e2e2e;
  --wp--preset--color--parcel-slate:        #666666;
  --wp--preset--color--parcel-mist:         #a0a0a0;
  --wp--preset--color--parcel-linen:        #f5f2ee;
  --wp--preset--color--parcel-cream:        #faf9f7;
  --wp--preset--color--parcel-orange:       #e8622a;
  --wp--preset--color--parcel-orange-tint:  #fdf0ea;
  --wp--preset--color--parcel-rule:         #e0dbd4;

  /* Font families
     Syne: geometric display sans; bold, contemporary, 400–800 range.
     Outfit: clean variable sans; highly legible at body and small sizes.
  */
  --wp--preset--font-family--syne:   'Syne', 'Helvetica Neue', Arial, sans-serif;
  --wp--preset--font-family--outfit: 'Outfit', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Font sizes (fluid clamp scale — matches theme.json fluid typography)
     Pillar 8 (Kodawari): every clamp() value tuned against a 1.333 modular scale
     at viewport anchors 320px (min) and 1440px (max).
  */
  --wp--preset--font-size--2xs:     0.6875rem;
  --wp--preset--font-size--xs:      clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --wp--preset--font-size--sm:      clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --wp--preset--font-size--base:    clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --wp--preset--font-size--md:      clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);
  --wp--preset--font-size--lg:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --wp--preset--font-size--xl:      clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --wp--preset--font-size--2xl:     clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --wp--preset--font-size--3xl:     clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --wp--preset--font-size--4xl:     clamp(2.5rem, 1.9rem + 3vw, 5rem);
  --wp--preset--font-size--display: clamp(3rem, 1.8rem + 6vw, 7rem);

  /* Spacing — 0.25rem increments, named numerically matching WP spacing scale */
  --wp--preset--spacing--1:  0.25rem;
  --wp--preset--spacing--2:  0.5rem;
  --wp--preset--spacing--3:  0.75rem;
  --wp--preset--spacing--4:  1rem;
  --wp--preset--spacing--5:  1.5rem;
  --wp--preset--spacing--6:  2rem;
  --wp--preset--spacing--8:  2.5rem;
  --wp--preset--spacing--10: 3rem;
  --wp--preset--spacing--12: 4rem;
  --wp--preset--spacing--16: 6rem;
  --wp--preset--spacing--20: 8rem;
  --wp--preset--spacing--24: 10rem;

  /* Semantic a11y tokens (bound to palette)
     Pillar 5 (Safe by Default): focus ring always resolves to a visible colour.
  */
  --cl-focus-ring:         var(--wp--preset--color--parcel-orange);
  --cl-focus-ring-inverse: var(--wp--preset--color--parcel-cream);
  --cl-skip-bg:            var(--wp--preset--color--parcel-orange);
  --cl-skip-fg:            var(--wp--preset--color--parcel-cream);
}

/* ================================================================
   @layer declaration order — must appear before any @layer block
   Mirrors reset.css exactly; new CSS earns a new layer or joins
   the appropriate existing layer.
   ================================================================ */
@layer reset, base, layout, components, blocks, utilities, preview;

/* ================================================================
   RESET
   ================================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: light;
    hanging-punctuation: first last;
  }

  body {
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, video, canvas { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ol, ul { list-style: none; }
}

/* ================================================================
   BASE
   ================================================================ */
@layer base {
  body {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 400;
    line-height: 1.65;
    background: var(--wp--preset--color--parcel-cream);
    color: var(--wp--preset--color--parcel-carbon);
  }

  /* text-wrap: balance on display heads prevents orphaned words.
     Pillar 8 (Kodawari): typographic detail nobody asked for. */
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }

  a {
    color: var(--wp--preset--color--parcel-carbon);
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--parcel-rule);
    text-underline-offset: 0.2em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
  }
  a:hover {
    color: var(--wp--preset--color--parcel-orange);
    text-decoration-color: var(--wp--preset--color--parcel-orange);
  }

  /* Heading scale — from theme.json elements.
     Syne carries all display and title work; Outfit handles the
     small-cap labelling (h5/h6). This split is intentional: Syne's
     geometric construction reads as brand at large sizes; Outfit's
     clarity wins at small labelling sizes.
     Pillar 8 (Kodawari): negative tracking at display weight;
     zero tracking at these sizes reads as unstyled. */
  h1 {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--display);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--wp--preset--color--parcel-carbon);
  }
  h2 {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--parcel-carbon);
  }
  h3 {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--2xl);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--wp--preset--color--parcel-charcoal);
  }
  h4 {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--wp--preset--color--parcel-charcoal);
  }
  h5 {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-slate);
  }
  h6 {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-mist);
  }

  /* Focus ring — WCAG 2.4.7: every interactive element must have a
     visible focus indicator. outline: none without a replacement is a
     WP.org accessibility rejection trigger. */
  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--cl-focus-ring);
    outline-offset: 2px;
  }
}

/* ================================================================
   LAYOUT
   ================================================================ */
@layer layout {
  :root {
    /* Rebind focus tokens at layout level so dark-band overrides work */
    --cl-focus-ring: var(--wp--preset--color--parcel-orange);
    --cl-focus-ring-inverse: var(--wp--preset--color--parcel-cream);
  }

  .parcel-site { display: flex; flex-direction: column; min-height: 100dvh; }
  .parcel-main { flex: 1; }

  /* Constrained content wrapper — 1440px max, centred */
  .parcel-constrained {
    max-width: 1440px;
    margin-inline: auto;
    width: 100%;
  }

  /* Reading measure — 780px matches theme.json contentSize */
  .parcel-reading { max-width: 780px; margin-inline: auto; }

  /* Unboxing hero — dark surface, product focus */
  .parcel-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--wp--preset--spacing--16);
    background: linear-gradient(135deg, #1c1c1c 0%, #2e2e2e 100%);
    position: relative;
    overflow: hidden;
  }

  /* Two-column grid — 50/50 */
  .parcel-cols-50-50 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--8);
  }
  @media (min-width: 768px) {
    .parcel-cols-50-50 {
      grid-template-columns: 1fr 1fr;
      gap: var(--wp--preset--spacing--12);
    }
  }

  /* Two-column grid — 40/60 */
  .parcel-cols-40-60 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--8);
  }
  @media (min-width: 768px) {
    .parcel-cols-40-60 {
      grid-template-columns: 2fr 3fr;
      gap: var(--wp--preset--spacing--16);
    }
  }

  /* Two-column grid — 60/40 */
  .parcel-cols-60-40 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--8);
  }
  @media (min-width: 768px) {
    .parcel-cols-60-40 {
      grid-template-columns: 3fr 2fr;
      gap: var(--wp--preset--spacing--12);
    }
  }

  /* Product grid — auto-fill cards, min 260px */
  .parcel-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--wp--preset--spacing--6);
  }

  /* Pricing tier grid — 3 columns */
  .parcel-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--5);
  }
  @media (min-width: 768px) {
    .parcel-pricing-grid { grid-template-columns: repeat(3, 1fr); }
  }
}

/* ================================================================
   COMPONENTS
   ================================================================ */
@layer components {
  /* Primary button — square corners (radius: 0 is a brand signal,
     not an oversight). Orange CTA, cream text, carbon hover.
     Pillar 8 (Kodawari): 0.04em tracking on Syne 700 prevents
     the glyphs from touching at button size. */
  .parcel-btn {
    display: inline-block;
    background: var(--wp--preset--color--parcel-orange);
    color: var(--wp--preset--color--parcel-cream);
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .parcel-btn:hover {
    background: var(--wp--preset--color--parcel-carbon);
    color: var(--wp--preset--color--parcel-cream);
    text-decoration: none;
  }

  /* Ghost button — outlined, for secondary actions */
  .parcel-btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--wp--preset--color--parcel-cream);
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: 1.5px solid rgba(250, 249, 247, 0.5);
    padding: calc(var(--wp--preset--spacing--4) - 1.5px) calc(var(--wp--preset--spacing--8) - 1.5px);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .parcel-btn-ghost:hover {
    background: rgba(250, 249, 247, 0.1);
    border-color: var(--wp--preset--color--parcel-cream);
    color: var(--wp--preset--color--parcel-cream);
    text-decoration: none;
  }

  /* Dark surface button — for carbon/dark band buttons */
  .parcel-btn-dark {
    background: var(--wp--preset--color--parcel-orange);
    color: var(--wp--preset--color--parcel-cream);
  }
  .parcel-btn-dark:hover {
    background: #c9511d; /* darkened orange — passes 4.5:1 on cream */
    color: var(--wp--preset--color--parcel-cream);
  }

  /* Eyebrow label — the all-caps micro-label above section headers.
     Outfit 600 at 0.1em tracking: readable at 11px, distinctive above
     a Syne headline. Used for category labels, section labels, product tags. */
  .parcel-eyebrow {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-slate);
    line-height: 1.4;
  }

  /* Orange category label — product/term labels */
  .parcel-cat-label {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--2xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-orange);
  }

  /* Post/product date */
  .parcel-date-label {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-mist);
  }

  /* Product card */
  .parcel-product-card {
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--parcel-cream);
    border: 1px solid var(--wp--preset--color--parcel-rule);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .parcel-product-card:hover {
    border-color: var(--wp--preset--color--parcel-charcoal);
    box-shadow: 0 4px 16px rgba(28, 28, 28, 0.08);
  }
  .parcel-product-card-img {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--wp--preset--color--parcel-linen), var(--wp--preset--color--parcel-rule));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .parcel-product-card-img-label {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-slate);
  }
  .parcel-product-card-body {
    padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--3);
    flex: 1;
  }
  .parcel-product-card-title {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--parcel-carbon);
    text-decoration: none;
  }
  .parcel-product-card-desc {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--parcel-slate);
    line-height: 1.6;
    flex: 1;
  }
  .parcel-product-card-price {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    color: var(--wp--preset--color--parcel-carbon);
  }

  /* Quote block — orange left rule, linen background
     Pillar 8 (Kodawari): the border is 4px not 2px because at linen
     background the thinner rule disappears visually. */
  .parcel-quote {
    border-left: 4px solid var(--wp--preset--color--parcel-orange);
    background: var(--wp--preset--color--parcel-linen);
    padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
    margin-block: var(--wp--preset--spacing--8);
    font-style: italic;
    font-size: var(--wp--preset--font-size--lg);
    color: var(--wp--preset--color--parcel-charcoal);
    line-height: 1.5;
  }

  /* Section header — label + optional link row */
  .parcel-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--wp--preset--spacing--6);
    border-bottom: 1px solid var(--wp--preset--color--parcel-rule);
    margin-bottom: var(--wp--preset--spacing--8);
  }

  /* Trust strip item */
  .parcel-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--8);
    justify-content: center;
    align-items: center;
    padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--5);
    border-top: 1px solid var(--wp--preset--color--parcel-rule);
    border-bottom: 1px solid var(--wp--preset--color--parcel-rule);
  }
  .parcel-trust-item {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--3);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--parcel-charcoal);
  }
  .parcel-trust-icon {
    width: 20px;
    height: 20px;
    color: var(--wp--preset--color--parcel-orange);
    flex-shrink: 0;
  }

  /* Pricing card */
  .parcel-pricing-card {
    border: 1px solid var(--wp--preset--color--parcel-rule);
    padding: var(--wp--preset--spacing--8);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--5);
    background: var(--wp--preset--color--parcel-cream);
    position: relative;
  }
  .parcel-pricing-card--featured {
    border-color: var(--wp--preset--color--parcel-orange);
    border-width: 2px;
    background: var(--wp--preset--color--parcel-cream);
  }
  .parcel-pricing-badge {
    position: absolute;
    top: -1px;
    right: var(--wp--preset--spacing--6);
    background: var(--wp--preset--color--parcel-orange);
    color: var(--wp--preset--color--parcel-cream);
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.75rem;
  }
  .parcel-pricing-tier-name {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--parcel-carbon);
  }
  .parcel-pricing-price {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--4xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--wp--preset--color--parcel-carbon);
    line-height: 1.0;
  }
  .parcel-pricing-price sup {
    font-size: 0.45em;
    font-weight: 700;
    vertical-align: super;
    letter-spacing: 0;
  }
  .parcel-pricing-period {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--parcel-slate);
    margin-top: var(--wp--preset--spacing--1);
  }
  .parcel-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--3);
    flex: 1;
  }
  .parcel-pricing-features li {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--parcel-charcoal);
    padding-left: 1.25rem;
    position: relative;
  }
  .parcel-pricing-features li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--parcel-orange);
    font-weight: 700;
  }
  .parcel-pricing-divider {
    border: none;
    border-top: 1px solid var(--wp--preset--color--parcel-rule);
    margin: 0;
  }

  /* Feature row — icon + heading + description */
  .parcel-feature-row {
    display: flex;
    gap: var(--wp--preset--spacing--5);
    align-items: flex-start;
    padding-block: var(--wp--preset--spacing--6);
    border-bottom: 1px solid var(--wp--preset--color--parcel-rule);
  }
  .parcel-feature-icon {
    width: 40px;
    height: 40px;
    background: var(--wp--preset--color--parcel-orange-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
  }
  .parcel-feature-heading {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--md);
    font-weight: 700;
    color: var(--wp--preset--color--parcel-carbon);
    margin-bottom: 0.3rem;
  }
  .parcel-feature-text {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--parcel-slate);
    line-height: 1.6;
  }

  /* Post navigation */
  .parcel-post-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--8);
    padding-block: var(--wp--preset--spacing--10);
    border-top: 1px solid var(--wp--preset--color--parcel-rule);
  }
  .parcel-post-nav-label {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--2xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-mist);
    margin-bottom: 0.5rem;
  }
  .parcel-post-nav-title {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    color: var(--wp--preset--color--parcel-carbon);
    letter-spacing: -0.01em;
  }

  /* Image placeholder — for product and article images */
  .parcel-img-placeholder {
    background: linear-gradient(135deg, var(--wp--preset--color--parcel-linen), var(--wp--preset--color--parcel-rule));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--parcel-slate);
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Hero image placeholder — dark surface simulating unboxing product shot */
  .parcel-img-placeholder-dark {
    background: linear-gradient(135deg, #1c1c1c 0%, #2e2e2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(250, 249, 247, 0.25);
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Filter row for shop pages */
  .parcel-filter-row {
    display: flex;
    gap: var(--wp--preset--spacing--3);
    flex-wrap: wrap;
    padding-bottom: var(--wp--preset--spacing--6);
  }
  .parcel-filter-tag {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--wp--preset--color--parcel-rule);
    color: var(--wp--preset--color--parcel-slate);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
  }
  .parcel-filter-tag:hover,
  .parcel-filter-tag--active {
    border-color: var(--wp--preset--color--parcel-carbon);
    color: var(--wp--preset--color--parcel-carbon);
    text-decoration: none;
  }

  /* Unboxing "what's inside" box — the Parcel signature feature.
     A styled block showing the box contents in the DTC idiom — each
     subscription box is announced with this layout. No other WP theme
     has this structure. A DTC brand operator sees it and recognises
     the format instantly. */
  .parcel-box-manifest {
    border: 2px solid var(--wp--preset--color--parcel-carbon);
    padding: var(--wp--preset--spacing--8);
  }
  .parcel-box-manifest-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--wp--preset--spacing--5);
    border-bottom: 1px solid var(--wp--preset--color--parcel-rule);
    margin-bottom: var(--wp--preset--spacing--6);
  }
  .parcel-box-manifest-title {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--md);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-carbon);
  }
  .parcel-box-manifest-count {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--parcel-mist);
    letter-spacing: 0.06em;
  }
  .parcel-box-manifest-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block: var(--wp--preset--spacing--4);
    border-bottom: 1px solid var(--wp--preset--color--parcel-linen);
  }
  .parcel-box-manifest-item-name {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    color: var(--wp--preset--color--parcel-carbon);
  }
  .parcel-box-manifest-item-origin {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--parcel-mist);
    letter-spacing: 0.04em;
  }
}

/* ================================================================
   BLOCKS
   ================================================================ */
@layer blocks {
  /* Values list — for about/brand story sections */
  .parcel-values-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .parcel-values-item {
    display: flex;
    gap: var(--wp--preset--spacing--6);
    align-items: flex-start;
    padding-block: var(--wp--preset--spacing--8);
    border-bottom: 1px solid var(--wp--preset--color--parcel-rule);
  }
  .parcel-values-item:first-child { border-top: 1px solid var(--wp--preset--color--parcel-rule); }
  .parcel-values-number {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--2xl);
    font-weight: 800;
    color: var(--wp--preset--color--parcel-orange);
    letter-spacing: -0.02em;
    min-width: 2rem;
    line-height: 1.0;
  }
  .parcel-values-content-title {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    color: var(--wp--preset--color--parcel-carbon);
    margin-bottom: var(--wp--preset--spacing--3);
  }
  .parcel-values-content-text {
    font-size: var(--wp--preset--font-size--base);
    color: var(--wp--preset--color--parcel-slate);
    line-height: 1.65;
  }
}

/* ================================================================
   UTILITIES
   ================================================================ */
@layer utilities {
  /* Band colour utility classes — surface + automatic text/link inversion */
  .parcel-band--cream  { background: var(--wp--preset--color--parcel-cream); }
  .parcel-band--linen  { background: var(--wp--preset--color--parcel-linen); }
  .parcel-band--carbon {
    background: var(--wp--preset--color--parcel-carbon);
    color: var(--wp--preset--color--parcel-cream);
    --cl-focus-ring: var(--cl-focus-ring-inverse);
  }
  .parcel-band--carbon a {
    color: var(--wp--preset--color--parcel-cream);
    text-decoration-color: rgba(250, 249, 247, 0.3);
  }
  .parcel-band--carbon a:hover {
    color: var(--wp--preset--color--parcel-orange);
    text-decoration-color: var(--wp--preset--color--parcel-orange);
  }
  .parcel-band--orange-tint { background: var(--wp--preset--color--parcel-orange-tint); }
  .parcel-band--charcoal {
    background: var(--wp--preset--color--parcel-charcoal);
    color: var(--wp--preset--color--parcel-cream);
  }
}

/* ================================================================
   PREVIEW — header, footer, and shared page chrome
   Not in the shipped theme; exists only to render these static files.
   ================================================================ */
@layer preview {
  /* Site header */
  .parcel-site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
    background: var(--wp--preset--color--parcel-cream);
    border-bottom: 1px solid var(--wp--preset--color--parcel-rule);
  }

  /* Dark header — for pages that start with a carbon hero */
  .parcel-site-header--dark {
    background: var(--wp--preset--color--parcel-carbon);
    border-bottom: 1px solid rgba(250, 249, 247, 0.1);
  }

  .parcel-site-title-link {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--parcel-carbon);
    text-decoration: none;
  }
  .parcel-site-header--dark .parcel-site-title-link {
    color: var(--wp--preset--color--parcel-cream);
  }

  .parcel-site-tagline {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--2xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--parcel-mist);
  }

  .parcel-nav {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .parcel-nav a {
    color: var(--wp--preset--color--parcel-carbon);
    text-decoration: none;
  }
  .parcel-nav a:hover { color: var(--wp--preset--color--parcel-orange); }
  .parcel-site-header--dark .parcel-nav a {
    color: var(--wp--preset--color--parcel-cream);
  }
  .parcel-site-header--dark .parcel-nav a:hover {
    color: var(--wp--preset--color--parcel-orange);
  }

  /* Cart icon area */
  .parcel-nav-cart {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--parcel-carbon);
    text-decoration: none;
    font-weight: 600;
  }
  .parcel-site-header--dark .parcel-nav-cart { color: var(--wp--preset--color--parcel-cream); }

  /* Footer */
  .parcel-site-footer {
    padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--6) var(--wp--preset--spacing--10);
    background: var(--wp--preset--color--parcel-carbon);
    color: var(--wp--preset--color--parcel-cream);
  }
  .parcel-footer-inner {
    max-width: 1440px;
    margin-inline: auto;
  }
  .parcel-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--wp--preset--spacing--10);
    padding-bottom: var(--wp--preset--spacing--12);
    border-bottom: 1px solid rgba(250, 249, 247, 0.1);
  }
  @media (max-width: 768px) {
    .parcel-footer-top { grid-template-columns: 1fr 1fr; }
  }
  .parcel-footer-brand-name {
    font-family: var(--wp--preset--font-family--syne);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--parcel-cream);
    margin-bottom: var(--wp--preset--spacing--3);
  }
  .parcel-footer-brand-desc {
    font-size: var(--wp--preset--font-size--sm);
    color: rgba(250, 249, 247, 0.55);
    line-height: 1.65;
    max-width: 28ch;
  }
  .parcel-footer-col-label {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 249, 247, 0.4);
    margin-bottom: var(--wp--preset--spacing--5);
  }
  .parcel-footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--3);
  }
  .parcel-footer-links a {
    font-size: var(--wp--preset--font-size--sm);
    color: rgba(250, 249, 247, 0.7);
    text-decoration: none;
    transition: color 0.15s;
  }
  .parcel-footer-links a:hover { color: var(--wp--preset--color--parcel-orange); }
  .parcel-footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--4);
    padding-top: var(--wp--preset--spacing--8);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--2xs);
    letter-spacing: 0.06em;
    color: rgba(250, 249, 247, 0.35);
  }
  .parcel-footer-bottom a { color: inherit; text-decoration: none; }
  .parcel-footer-bottom a:hover { color: var(--wp--preset--color--parcel-orange); }

  /* Section wrappers */
  .parcel-section {
    padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--6);
  }
  .parcel-section-sm {
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--6);
  }
  .parcel-section-inner {
    max-width: 1440px;
    margin-inline: auto;
  }

  /* Post meta row */
  .parcel-post-meta {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--parcel-mist);
    letter-spacing: 0.06em;
    display: flex;
    gap: var(--wp--preset--spacing--5);
    align-items: center;
    padding-block: var(--wp--preset--spacing--6);
    flex-wrap: wrap;
  }
  .parcel-post-meta-sep { color: var(--wp--preset--color--parcel-rule); }

  /* Mobile hamburger icon */
  .parcel-hamburger {
    width: 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }
  .parcel-hamburger span {
    display: block;
    height: 1.5px;
    background: var(--wp--preset--color--parcel-carbon);
  }
}