/* ============================================
   Markaður — The Ledger
   Icelandic trading-floor identity: a dense, ruled catalogue where
   every product reads as a listing on a kaupfélag ledger sheet.
   Signature motif: the double-hairline rule + filled tick-square (▪)
   index marker — a precise, ownable "ledger entry" device that no
   sibling theme uses. List/row product cards, tabular numerics, a
   sticky utility toolbar. Headings in Public Sans grotesque do real
   structural work; body in Red Hat Text. Confident, warm, íslenskt —
   not generic SaaS, not the mono/dark foundry, not a photo portrait grid.
   Fonts: Public Sans (display) + Red Hat Text (body)
   ============================================ */

.theme-marketplace {
  /* --- Modular type scale, ratio 1.26 (Major Third-ish) --- */
  --step--1: 0.75rem;    /* fine print / meta */
  --step-0:  0.9375rem;  /* body */
  --step-1:  1.1875rem;  /* card / filter heads */
  --step-2:  1.5rem;     /* section heads, PDP price */
  --step-3:  1.9rem;     /* opening display step */

  /* --- Vertical rhythm + motif tokens --- */
  --rhythm: 1.25rem;
  --rule: color-mix(in oklab, var(--text) 22%, transparent);
  --rule-strong: color-mix(in oklab, var(--text) 55%, transparent);
  --tick: var(--primary);
  --ledger-corner: 3px;
  --listing-bg: color-mix(in oklab, var(--surface) 94%, var(--text));
  --hairline: color-mix(in oklab, var(--text) 14%, transparent);

  font-family: var(--font-body);

  /* Tabular, slashed-zero numerics everywhere money or counts appear —
     the marketplace reads like a ledger, columns line up. */
  & .product-price,
  & .pdp-price,
  & .result-count,
  & .filter-count,
  & .cart-count,
  & .active-filter-pill,
  & .pdp-sku {
    font-variant-numeric: tabular-nums slashed-zero;
  }

  /* ============================================================
     OPENING RHYTHM — no hero. The page must open with intent.
     The first section becomes a declared "opening spread": a wide
     display header sitting above its own double rule, so the top of
     the page reads as a deliberate masthead, never an empty gap.
     ============================================================ */
  & main > section:first-of-type {
    padding-block-start: clamp(1.75rem, 4vw, 3rem);
  }

  & main > section:first-of-type > .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-block-end: calc(var(--rhythm) * 1.4);
    padding-block-end: 0.75rem;
    border-block-end: 3px double var(--rule-strong);

    & h2 {
      font-size: var(--step-3);
      line-height: 1.05;
    }

    /* opening masthead gets an over-line eyebrow rule + a baseline tally */
    &::before {
      content: "MARKAÐUR";
      align-self: flex-start;
      font-family: var(--font-display);
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: 0.22em;
      color: var(--text-muted);
      padding-block-end: 0.5rem;
      border-block-end: 1px solid var(--hairline);
      width: 100%;
    }
  }

  /* ============================================================
     SECTION HEADS — the signature ledger device.
     A double-hairline rule under the head + a filled tick-square
     index marker before every heading. Distinct from foundry's flat
     1px and editorial's heavy bars.
     ============================================================ */
  & .section-head {
    align-items: baseline;
    border-block-end: 3px double var(--rule);
    padding-block-end: 0.625rem;
    margin-block-end: var(--rhythm);

    & h2 {
      font-family: var(--font-display);
      font-size: var(--step-2);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;

      /* the tick-square — the ownable mark */
      &::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        flex-shrink: 0;
        background: var(--tick);
        border-radius: 1px;
        transform: rotate(0deg);
      }
    }

    & .section-link {
      font-family: var(--font-display);
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);

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

  /* ============================================================
     CATEGORIES — utilitarian index chips with real affordance.
     A row of tappable filter tokens, not a photo grid.
     ============================================================ */
  & .category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  & .category-card {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--rule);
    border-radius: var(--ledger-corner);
    background: var(--surface);
    box-shadow: none;
    transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), color 0.18s var(--ease-out);

    & .category-image,
    & .category-initial { display: none; }

    & h3 {
      font-family: var(--font-display);
      font-size: var(--step-0);
      font-weight: 600;
      letter-spacing: -0.005em;
      margin: 0;
    }

    & p { display: none; }

    &:hover {
      box-shadow: none;
      border-color: var(--tick);
      background: color-mix(in oklab, var(--tick) 8%, var(--surface));
    }

    &[aria-current="page"] {
      border-color: var(--tick);
      background: color-mix(in oklab, var(--tick) 14%, var(--surface));
      color: color-mix(in oklab, var(--tick) 70%, var(--text));
    }

    &.sale {
      background: color-mix(in oklab, var(--coral) 14%, var(--surface));
      border-color: var(--coral);
      color: color-mix(in oklab, var(--coral) 65%, var(--text));
    }
  }

  /* ============================================================
     PRODUCT CARDS — the headline identity: a LIST LEDGER.
     Rows, not a portrait photo grid. A 92px square thumbnail, a
     left-aligned info column, a right-aligned tabular price. Rows
     stack into a single ruled ledger with hairline separators.
     This is what makes marketplace unmistakable.
     ============================================================ */
  & .product-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-block-start: 1px solid var(--hairline);
  }

  /* The marketplace preset ships LIST cards (.product-card--list), whose own
     flex row layout is correct. The ledger grid below is for the DEFAULT card
     structure; without this guard it forces display:grid onto the list card and
     collapses its image/content columns into an overlap (clipped names). Keep
     the list card's flex row and give it the marketplace hairline + density. */
  & .product-card.product-card--list {
    display: flex;
    grid-template-columns: none;
    padding: 0.85rem 0.75rem;
    border-block-end: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;

    &:hover { background: var(--listing-bg); }

    & .list-info h3 {
      font-family: var(--font-display);
      font-weight: 700;
    }
  }

  & .product-card:not(.product-card--list) {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    column-gap: 1rem;
    padding: 0.7rem 0.75rem;
    border: none;
    border-block-end: 1px solid var(--hairline);
    border-radius: 0;
    overflow: visible;
    background: transparent;
    transition: background 0.16s var(--ease-out);

    &:hover {
      box-shadow: none;
      background: var(--listing-bg);

      & .product-image img { transform: none; }
      & .product-image-hover { opacity: 0; }
    }

    & .product-image {
      grid-row: 1 / span 3;
      aspect-ratio: 1;
      width: 92px;
      border-radius: var(--ledger-corner);
      border: 1px solid var(--hairline);
      background: var(--surface-alt);

      & img { transition: none; }
      & .product-image-hover { display: none; }
    }

    & .product-placeholder { border-radius: var(--ledger-corner); }

    & .sale-badge {
      top: 0.4rem;
      left: 0.4rem;
      border-radius: 2px;
      font-size: 0.625rem;
      letter-spacing: 0.04em;
      padding: 0.15em 0.5em;
    }

    & .product-info {
      padding: 0;
      gap: 0.15rem;
      align-self: center;
    }

    & .product-brand {
      font-family: var(--font-display);
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    & h3 {
      font-family: var(--font-display);
      font-size: var(--step-0);
      font-weight: 600;
      letter-spacing: -0.005em;
      line-height: 1.3;
      margin-block: 0;
      max-width: 48ch;
    }

    & .product-price {
      grid-column: 3;
      grid-row: 1 / span 3;
      align-self: center;
      justify-self: end;
      text-align: right;
      font-family: var(--font-display);
      font-size: var(--step-1);
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--text);

      & ins { color: var(--coral); }
    }

    /* the add affordance tucks under the title; on hover the whole row
       lifts to the listing tint. transform/opacity + ease-out only. */
    & .card-action {
      grid-column: 2;
      width: auto;
      justify-self: start;
      margin-top: 0.35rem;
      padding: 0.3rem 0.85rem;
      background: var(--text);
      color: var(--surface);
      border-radius: var(--ledger-corner);
      font-family: var(--font-display);
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: 0.02em;

      &:hover { opacity: 0.86; }
      &.added { background: var(--accent); }
    }

    & .card-variants {
      grid-column: 2;
      margin-top: 0.35rem;

      & > button {
        border-radius: var(--ledger-corner);
        font-family: var(--font-display);

        &:hover { transform: none; background: var(--text); }
        &:active { transform: none; }
      }
    }
  }

  /* ============================================================
     CATALOG — sticky utility toolbar + the same ledger rows.
     ============================================================ */
  & .catalog {
    grid-template-columns: 210px 1fr;
    gap: var(--rhythm) clamp(1.75rem, 4vw, 2.75rem);
  }

  & .catalog .product-grid {
    grid-template-columns: 1fr;
  }

  & .catalog-toolbar {
    position: sticky;
    top: 3.75rem;
    z-index: 5;
    background: var(--surface);
    border-block-end: 3px double var(--rule);
    padding-block: 0.65rem;
    margin-block-end: 0;

    & .result-count {
      font-family: var(--font-display);
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
    }

    & .sort-select {
      font-size: var(--step--1);

      & select {
        border: 1px solid var(--rule);
        border-radius: var(--ledger-corner);
        font-family: var(--font-display);
        font-weight: 600;
        padding: 0.35rem 0.7rem;

        &:hover { border-color: var(--tick); }
      }
    }
  }

  & .filter-group {
    & summary {
      font-family: var(--font-display);
      font-size: var(--step-0);
      font-weight: 700;
      letter-spacing: -0.005em;
    }
  }

  & .active-filter-pill {
    border-radius: var(--ledger-corner);
    border: 1px solid var(--tick);
    background: color-mix(in oklab, var(--tick) 10%, var(--surface));
    color: color-mix(in oklab, var(--tick) 65%, var(--text));
    font-family: var(--font-display);
    font-weight: 600;

    &:hover {
      background: var(--tick);
      color: var(--surface);
    }
  }

  & .filter-toggle {
    border-radius: var(--ledger-corner);
    border-width: 1px;
    font-family: var(--font-display);
    font-weight: 700;

    &:hover { border-color: var(--tick); }
  }

  & .empty-state-btn {
    border-radius: var(--ledger-corner);
    font-family: var(--font-display);
    font-weight: 700;
    background: var(--text);
  }

  /* ============================================================
     PDP — the listing detail sheet. Public Sans title, tick-marked
     price, ruled spec rhythm, capped measure.
     ============================================================ */
  & .breadcrumb ol {
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: 0.01em;
  }

  & .pdp { gap: clamp(1.5rem, 3.5vw, 3rem); }

  & .pdp-gallery > .pdp-hero { border-radius: var(--ledger-corner); }
  & .pdp-gallery .pdp-thumbnails button { border-radius: var(--ledger-corner); }

  & .pdp-info {
    & .pdp-brand {
      font-family: var(--font-display);
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--text-muted);

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

    & h1 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, var(--step-3));
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.08;
    }

    & .pdp-sku {
      font-family: var(--font-display);
      font-weight: 600;
    }

    & .pdp-price {
      font-family: var(--font-display);
      font-size: var(--step-2);
      font-weight: 800;
      letter-spacing: -0.02em;
      border-block-end: 3px double var(--rule);
      display: flex;
      align-items: center;
      gap: 0.55rem;

      /* same tick-square marker — ties the price to the ledger motif */
      &::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        flex-shrink: 0;
        background: var(--tick);
        border-radius: 1px;
      }
    }

    & .pdp-description {
      font-size: var(--step-0);
      line-height: 1.65;
      max-width: 65ch;
    }
  }

  & .pdp-add-btn {
    border-radius: var(--ledger-corner);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.01em;

    &.added { background: var(--accent); }
  }

  & .quantity-selector { border-radius: var(--ledger-corner); border-width: 1px; }

  & .pdp-variant-btn {
    border-radius: var(--ledger-corner);
    border-width: 1px;
    font-family: var(--font-display);
    font-weight: 600;

    &:hover { border-color: var(--tick); }
  }

  & .pdp-trust {
    font-family: var(--font-body);
    border-block-start: 1px solid var(--hairline);
  }

  & .pdp-tabs .pdp-tab-nav > button {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;

    &.active { font-weight: 800; }
  }

  & .pdp-tabpanel { max-width: 65ch; }

  /* Related rail — the ONE place the portrait photo grid survives,
     deliberately contrasting the ledger rows above it. */
  & .related-section {
    border-block-start: 3px double var(--rule);
    padding-block-start: var(--rhythm);
    margin-block-start: var(--gap-lg);

    & .product-grid {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: clamp(1rem, 2.5vw, 1.5rem);
      border-block-start: none;
    }

    & .product-card {
      display: block;
      padding: 0;
      border: none;

      & .product-image {
        grid-row: auto;
        width: auto;
        aspect-ratio: 3/4;
        border: none;
      }

      & .product-info { padding: 0.6rem 0.2rem 0.4rem; }

      & .product-price {
        grid-column: auto;
        grid-row: auto;
        justify-self: start;
        text-align: left;
        font-size: var(--step-0);
      }

      & .card-action { width: 100%; justify-self: stretch; }
    }
  }

  /* ============================================================
     NEWSLETTER — a flat inline registry strip, not a dark slab.
     Reads as a tool/sign-up row on surface-alt, Public Sans label,
     squared input + button group. Removes the serif/dark clash.
     ============================================================ */
  & .newsletter {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--rule);
    border-radius: var(--ledger-corner);

    & .newsletter-inner {
      max-width: var(--max-w);
      text-align: left;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 1rem 2rem;
    }

    & h2 {
      font-family: var(--font-display);
      font-size: var(--step-1);
      font-weight: 800;
      letter-spacing: -0.015em;
      color: var(--text);
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;

      &::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        flex-shrink: 0;
        background: var(--tick);
        border-radius: 1px;
      }
    }

    & p {
      grid-column: 1;
      color: var(--text-muted);
      font-size: var(--step-0);
      margin: 0;
      max-width: 52ch;
    }

    & form {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--ledger-corner);
      padding: 0.2rem;
    }

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

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

    & button {
      background: var(--text);
      border-radius: var(--ledger-corner);
      font-family: var(--font-display);
      font-weight: 700;

      &:hover { background: var(--text); opacity: 0.86; }
    }
  }

  /* ============================================================
     CHROME — header wordmark + announcement in Public Sans grotesque
     to keep the marketplace voice consistent end to end.
     ============================================================ */
  & header .logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  & header nav a {
    font-family: var(--font-display);
    font-weight: 600;
  }

  & .announcement-bar {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  & footer {
    & .footer-brand .logo-text,
    & h4 {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -0.01em;
    }
  }

  /* Responsive: keep the ledger legible on narrow screens — drop the
     thumbnail column gracefully, let price wrap under the title. */
  @media (max-width: 560px) {
    & .product-card {
      grid-template-columns: 64px 1fr;
      column-gap: 0.75rem;

      & .product-image { width: 64px; }

      & .product-price {
        grid-column: 2;
        grid-row: auto;
        justify-self: start;
        text-align: left;
      }
    }

    & .newsletter .newsletter-inner {
      grid-template-columns: 1fr;

      & form { grid-column: 1; grid-row: auto; }
    }
  }
}