/* ============================================
   Harvest — Íslenskur uppskerumarkaður
   Brand: farm-to-table, handmade preserves, the
   honest weight of a market stall at season's end.
   Fonts: Literata (display, used ITALIC + small-caps)
          + Lexend (body, tracked uppercase metadata)
   Signature motif: a HAND-STAMPED WAX SEAL — a small
   inked ring + dot pressed above every section head,
   echoed by the asymmetric "preserve-jar" card shape
   (square shoulders, rounded base) and a hand-torn
   dashed paper rule on the recipe-card newsletter.
   Palette: driven ENTIRELY by the store's injected
   --primary / --accent via color-mix — no hardcoded
   hue, so olive, plum, or rust stores each stay true.
   ============================================ */

.theme-harvest {
  /* --- Modular type scale: 1.25 (minor third) --- */
  --step--1: 0.8rem;     /* tracked metadata (Lexend caps) */
  --step-0:  1rem;       /* body */
  --step-1:  1.25rem;    /* card heading */
  --step-2:  1.5625rem;  /* sub-display */
  --step-3:  1.953rem;   /* section head */
  --step-4:  2.441rem;   /* page title */

  /* --- Harvest vertical rhythm & motif tokens --- */
  --rhythm: clamp(2.5rem, 6vw, 5.5rem);
  --seal: color-mix(in oklab, var(--accent) 60%, transparent);
  --seal-fill: color-mix(in oklab, var(--accent) 20%, transparent);
  --rule: color-mix(in oklab, var(--accent) 38%, transparent);
  --paper: color-mix(in oklab, var(--primary) 7%, var(--surface));
  --paper-deep: color-mix(in oklab, var(--primary) 13%, var(--surface));
  --label-frame: color-mix(in oklab, var(--accent) 22%, transparent);

  /* ===========================================================
     HERO — Literata speaks in italic; a small-caps eyebrow
     sits under a stamped seal. Grounded, hearty, unhurried.
     =========================================================== */
  & .hero-content {
    & .hero-eyebrow {
      position: relative;
      font-family: var(--font-display);
      font-style: normal;
      font-variant: small-caps;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0.2em;
      font-size: var(--step--1);
      color: var(--accent);
      padding-block-start: 2.6rem;

      &::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 1.9rem;
        height: 1.9rem;
        border: 1.5px solid var(--seal);
        border-radius: 50%;
        background: radial-gradient(circle, var(--seal-fill) 0 40%, transparent 42%);
      }
    }

    & h1 {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(3rem, 6.4vw, 5rem);
      line-height: 1.02;
      letter-spacing: -0.018em;
      margin-block-end: 1.25rem;
    }

    & .hero-sub {
      font-size: 1.0625rem;
      line-height: 1.72;
      max-width: 38ch;
      letter-spacing: 0;
    }

    & .hero-actions {
      gap: 0.75rem;

      & a {
        border-radius: 7px 7px 12px 12px;
        padding: 0.8em 1.9em;
        font-size: var(--step--1);
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 22%, transparent);
        }
      }
    }
  }

  /* Hero banner variant — keep the italic display voice */
  & .hero.hero-banner .hero-banner-text h1 {
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.018em;
  }

  /* ===========================================================
     SECTION HEADS — the hand-stamped wax seal signature.
     A pressed ink ring + dot above every section title.
     =========================================================== */
  & .section-head {
    align-items: flex-end;

    & h2 {
      position: relative;
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(1.55rem, 3.4vw, var(--step-3));
      line-height: 1.1;
      letter-spacing: -0.012em;
      padding-block-start: 2.85rem;

      &::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 2.1rem;
        height: 2.1rem;
        border: 1.5px solid var(--seal);
        border-radius: 50%;
        background: radial-gradient(circle, var(--seal-fill) 0 38%, transparent 40%);
        transition: transform 0.4s var(--ease-out);
      }
    }

    & .section-link {
      font-family: var(--font-body);
      font-size: var(--step--1);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);

      &:hover { color: var(--text); }
    }
  }

  /* ===========================================================
     CATEGORY CARDS — preserve-jar silhouette on warm paper.
     Square shoulders, rounded base. Real motion restored.
     =========================================================== */
  & .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  & .category-card {
    padding: 1.75rem 1rem 1.5rem;
    background: var(--paper);
    border-radius: 5px 5px 16px 16px;
    box-shadow: inset 0 0 0 1px var(--label-frame);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);

    & h3 {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: var(--step-1);
    }

    & p {
      font-size: var(--step--1);
      letter-spacing: 0;
    }

    &:hover {
      transform: translateY(-3px);
      box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent),
        0 12px 28px color-mix(in oklab, var(--accent) 16%, transparent);

      & .category-image { transform: scale(1.05); }
    }
  }

  /* ===========================================================
     PRODUCT CARDS — same jar silhouette, hairline label frame.
     Literata-italic title vs. tracked uppercase Lexend brand
     builds an in-card type crescendo (>=1.25 across the card).
     =========================================================== */
  & .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: clamp(1.5rem, 2vw, 2rem) clamp(1rem, 1.6vw, 1.5rem);
  }

  & .product-card {
    background: var(--paper);
    border-radius: 5px 5px 16px 16px;
    box-shadow: inset 0 0 0 1px var(--label-frame);
    overflow: hidden;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);

    & .product-image {
      border-radius: 4px 4px 12px 12px;
      transition: transform 0.5s var(--ease-out);
    }

    & .product-info {
      padding: 0.875rem 0.875rem 1rem;
    }

    & .product-brand {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
    }

    & h3 {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: var(--step-1);
      line-height: 1.25;
      margin-block: 0.15rem 0.3rem;
    }

    & .product-price {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    & .card-action {
      border-radius: 6px;
      font-size: var(--step--1);
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    &:hover {
      transform: translateY(-3px);
      box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent),
        0 14px 32px color-mix(in oklab, var(--accent) 15%, transparent);

      & .product-image { transform: scale(1.04); }
    }
  }

  /* ===========================================================
     NEWSLETTER — recipe-card treatment: inset double rule with
     a hand-torn dashed top edge. The most visible band reads
     farm-kitchen, never SaaS.
     =========================================================== */
  & .newsletter {
    background: var(--paper-deep);
    color: var(--text);
    border-radius: 16px;
    border-block-start: 1.5px dashed var(--rule);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
      inset 0 0 0 6px var(--surface);

    & .newsletter-inner {
      & h2 {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 500;
        font-size: clamp(1.6rem, 3vw, var(--step-2));
        color: var(--text);
      }

      & p {
        color: var(--text-muted);
        font-size: 0.9375rem;
      }

      & form {
        background: var(--surface);
        border-radius: 8px;
        box-shadow: inset 0 0 0 1px var(--rule);
        padding: 0.3rem;
      }

      & input[type="email"] {
        color: var(--text);
        border-radius: 6px;

        &::placeholder { color: var(--text-muted); }
      }

      & button {
        background: var(--accent);
        color: var(--surface);
        border-radius: 6px;
        letter-spacing: 0.04em;

        &:hover {
          background: color-mix(in oklab, var(--accent) 85%, var(--text));
        }
      }
    }
  }

  /* ===========================================================
     FOOTER — the stated olive (var(--accent)) actually shows:
     a warm wash where customers look, with the dashed rule.
     =========================================================== */
  & footer {
    background: var(--paper-deep);
    border-block-start: 1.5px dashed var(--rule);

    & nav h3 {
      font-family: var(--font-body);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: var(--step--1);
      color: var(--accent);
    }
  }

  & .footer-brand .logo-text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
  }

  /* ===========================================================
     CATALOG — hearty, slightly tighter grid; the toolbar reads
     as a stall ledger. Sort/filter use jar-radius, not pills.
     =========================================================== */
  & .catalog {
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  & .catalog-toolbar {
    & .result-count {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1rem;
      color: var(--text);
    }

    & .sort-select select {
      border-radius: 6px;
      box-shadow: inset 0 0 0 1px var(--label-frame);
    }
  }

  & .filter-group {
    & h3 {
      font-family: var(--font-body);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: 0.7rem;
    }
  }

  /* Active-filter pills — full-round reserved deliberately here */
  & .active-filters .active-filter-pill {
    border-radius: var(--radius-full);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
  }

  /* ===========================================================
     PDP — editorial Literata, jar-radius controls.
     =========================================================== */
  & .pdp {
    gap: clamp(2rem, 4vw, 3rem);
  }

  & .pdp-gallery {
    & .pdp-hero { border-radius: 5px 5px 16px 16px; }

    & .pdp-thumbnails button {
      border-radius: 5px;

      &[aria-pressed="true"] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
    }
  }

  & .pdp-info {
    & .pdp-brand {
      font-family: var(--font-body);
      font-weight: 600;
      letter-spacing: 0.12em;
      color: var(--accent);
    }

    & h1 {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(1.85rem, 3.6vw, var(--step-4));
      letter-spacing: -0.014em;
    }

    & .pdp-price {
      font-size: 1.3rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    & .pdp-description {
      font-size: 1rem;
      line-height: 1.78;
      max-width: 68ch;
    }
  }

  & .pdp-actions {
    & .quantity-selector { border-radius: 6px; }

    & .pdp-add-btn {
      border-radius: 7px 7px 11px 11px;
      font-weight: 600;
      letter-spacing: 0.03em;
    }
  }

  & .pdp-trust {
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  & .pdp-variants .pdp-variant-btn {
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  & .pdp-tabs .pdp-tab-nav button {
    border-radius: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.0625rem;
  }

  /* ===========================================================
     RELATED — warm paper panel framed like a shelf label;
     its section seal stays consistent with the rest.
     =========================================================== */
  & .related-section {
    background: var(--paper);
    border-radius: 6px 6px 18px 18px;
    box-shadow: inset 0 0 0 1px var(--label-frame);
    padding: clamp(2rem, 4vw, 3rem);
    margin-block-start: var(--rhythm);
  }

  /* ===========================================================
     PAGE TITLES — italic Literata everywhere a heading lands.
     =========================================================== */
  & .category-hero h1,
  & .cms-page > h1,
  & .cms-content h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
  }

  & .breadcrumb ol {
    font-size: var(--step--1);
    letter-spacing: 0.01em;
  }

  & .empty-state a {
    border-radius: 7px 7px 11px 11px;
  }
}