/* ============================================
   Vinnustofa (Workshop) — The Carpenter's Blueprint
   Brand: warm dark workbench + Icelandic technical drawing.
          Rugged, measured, made-by-hand. Not dev-tools (foundry),
          not white-cube brutalism (studio): this is a lit workshop
          at dusk — charcoal timber, oiled steel, a chalk-blue grid.
   Type:  Fjalla One does the heavy lifting — huge condensed CAPS
          for display; Fira Sans (+ tabular mono numerals) for the spec
          copy, so accented Icelandic names stay legible.
   Motif: a faint blueprint graph-paper grid + numbered spec-sheet
          section labels ("01 — VÖRUR") + 1px outline "snap" feedback.
   ============================================ */

.theme-workshop {
  /* ---- Scoped tokens (the inline per-store block sets --primary /
         --accent / --font-* AFTER us; we never fight those, we consume
         them. Everything below is owned by this theme only.) ---- */

  /* Modular type scale, ratio ~1.32 (major-third-ish, deliberate) */
  --step--2: 0.6875rem;   /* micro caps: eyebrows, SKU labels        */
  --step--1: 0.8125rem;   /* small UI text                           */
  --step-0:  0.9375rem;   /* body / product names                    */
  --step-1:  1.25rem;     /* sub-heads                               */
  --step-2:  clamp(1.5rem, 2.6vw, 2.1rem);  /* section heads         */
  --step-3:  clamp(2.1rem, 3.6vw, 3rem);    /* PDP title             */
  --step-4:  clamp(3.4rem, 9vw, 7rem);      /* hero — the whole show */

  /* Warm dark workbench palette — explicitly owned, never inherited */
  --wb-ink:        oklch(0.16 0.012 60);   /* deepest charcoal-timber */
  --wb-surface:    oklch(0.19 0.013 58);   /* page surface            */
  --wb-panel:      oklch(0.23 0.014 56);   /* card / panel            */
  --wb-panel-hi:   oklch(0.27 0.015 55);   /* raised panel            */
  --wb-line:       oklch(0.38 0.012 58);   /* visible dark hairline   */
  --wb-line-soft:  oklch(0.30 0.012 58);   /* quieter divider         */
  --wb-text:       oklch(0.93 0.012 70);   /* warm off-white          */
  --wb-muted:      oklch(0.70 0.012 65);   /* secondary copy          */
  --wb-faint:      oklch(0.56 0.010 62);   /* tertiary / annotations  */

  /* The one signature accent: chalk-blueprint blue (restrained, never neon) */
  --wb-blueprint:  oklch(0.74 0.085 235);
  --wb-grid:       oklch(0.95 0.02 235 / 0.05);  /* graph-paper lines */

  /* Rhythm + structural constants */
  --rhythm: clamp(3.25rem, 6.5vw, 5.5rem);  /* section vertical air  */
  --tick:   8px;                            /* the workshop "module" */

  /* Repaint the base children's-store light theme into warm dark so
     header, footer and every morphed/SSE region stay dark end-to-end. */
  --surface: var(--wb-surface);
  --surface-alt: var(--wb-ink);
  --text: var(--wb-text);
  --text-muted: var(--wb-muted);
  --border: var(--wb-line);

  background: var(--wb-surface);
  color: var(--wb-text);

  counter-reset: spec;

  /* ============================================================
     MOTIF — blueprint graph paper laid under the whole page.
     Two faint chalk grids: 8-tick fine + a heavier 4× rule.
     ============================================================ */
  background-image:
    linear-gradient(var(--wb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wb-grid) 1px, transparent 1px),
    linear-gradient(oklch(0.95 0.02 235 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.95 0.02 235 / 0.025) 1px, transparent 1px);
  background-size:
    calc(var(--tick) * 4) calc(var(--tick) * 4),
    calc(var(--tick) * 4) calc(var(--tick) * 4),
    var(--tick) var(--tick),
    var(--tick) var(--tick);
  background-attachment: fixed;

  /* ---- Vertical rhythm ---- */
  & main > section {
    padding-block: var(--rhythm);
  }

  /* ============================================================
     HERO — Fjalla One, vast condensed uppercase. The identity.
     Covers every hero layout variant the StoreContext can pick.
     ============================================================ */
  & .hero-content h1,
  /* Banner title is half-width — size it to fit its column, not the full-bleed scale */
  & .hero.hero-banner .hero-banner-text h1 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    margin-block-end: 1.25rem;
    overflow-wrap: anywhere;
  }

  & .hero.hero-minimal h1,
  & .hero.hero-edge .hero-center h1 {
    font-family: var(--font-display);
    font-weight: 400;                /* Fjalla One only ships 400 */
    text-transform: uppercase;
    font-size: var(--step-4);
    line-height: 0.9;
    letter-spacing: 0.01em;
    margin-block-end: 1.5rem;
  }

  /* Eyebrow + sub framed as a technical caption */
  & .hero-content .hero-eyebrow,
  & .hero.hero-banner .hero-banner-text .hero-eyebrow {
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--wb-blueprint);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;

    &::before {
      content: "";
      width: calc(var(--tick) * 3);
      height: 1px;
      background: var(--wb-blueprint);
    }
  }

  & .hero-content .hero-sub,
  & .hero.hero-minimal .hero-sub,
  & .hero.hero-edge .hero-center .hero-sub,
  & .hero.hero-banner .hero-banner-text p {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.7;
    max-width: 46ch;
    color: var(--wb-muted);
  }

  /* Banner variant: panel reads as a drawing board */
  & .hero.hero-banner .hero-banner-content {
    background: var(--wb-panel);
    border: 1px solid var(--wb-line);
    border-radius: 0;
  }

  /* ---- Buttons — flat oiled-steel, invert on hover (transform/opacity-safe) ---- */
  & .hero-actions a,
  & .hero.hero-edge .hero-center a,
  & .hero.hero-minimal .hero-actions a {
    font-family: var(--font-display);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--step--1);
    padding: 0.9em 2em;
    background: var(--wb-text);
    color: var(--wb-ink);
    border: 1px solid var(--wb-text);
    box-shadow: none;
    transition: background 0.25s var(--ease-out),
                color 0.25s var(--ease-out),
                opacity 0.25s var(--ease-out);

    &:hover {
      background: transparent;
      color: var(--wb-text);
      transform: none;
      box-shadow: none;
    }

    &.secondary {
      background: transparent;
      color: var(--wb-text);
      border: 1px solid var(--wb-line);

      &:hover {
        background: transparent;
        border-color: var(--wb-blueprint);
        color: var(--wb-blueprint);
      }
    }
  }

  /* ============================================================
     SECTION HEADS — numbered spec-sheet labels: "01 — VÖRUR".
     This counter device is unique to workshop.
     ============================================================ */
  & main > section { counter-increment: spec; }

  & .section-head {
    align-items: baseline;
    margin-block-end: calc(var(--tick) * 4);
    padding-block-end: calc(var(--tick) * 1.5);
    border-block-end: 1px solid var(--wb-line);

    & h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-2);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      line-height: 1;
      color: var(--wb-text);

      &::before {
        content: counter(spec, decimal-leading-zero) "  —  ";
        font-family: var(--font-body);
        font-size: var(--step--1);
        font-weight: 600;
        letter-spacing: 0.08em;
        color: var(--wb-blueprint);
        font-variant-numeric: tabular-nums;
      }
    }

    & p { color: var(--wb-muted); font-size: var(--step--1); }

    & .section-link {
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: var(--step--2);
      color: var(--wb-muted);

      &:hover { color: var(--wb-blueprint); }
    }
  }

  /* ============================================================
     CATEGORIES — tight tool-rack grid, 8px module gaps.
     ============================================================ */
  & .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--tick);
  }

  & .category-card {
    border-radius: 0;
    background: var(--wb-panel);
    border: 1px solid var(--wb-line-soft);
    padding: 1.5rem 1.25rem;
    transition: border-color 0.25s var(--ease-out),
                background 0.25s var(--ease-out);

    & .category-image {
      border-radius: 0;
      background: var(--wb-panel-hi);
      color: var(--wb-blueprint);
    }

    & .category-initial { color: var(--wb-blueprint); }

    & h3 {
      font-family: var(--font-display);
      font-size: var(--step-1);
      font-weight: 400;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--wb-text);
    }

    & p { color: var(--wb-muted); font-size: var(--step--1); }

    /* crisp 1px outline snap — never the inherited soft glow */
    &:hover {
      box-shadow: none;
      border-color: var(--wb-blueprint);
      background: var(--wb-panel-hi);

      & .category-image { transform: none; }
    }
  }

  /* ============================================================
     PRODUCTS — spec sheets. Framed panels, tabular price tags,
     sentence-case names for legible Icelandic (ð/þ/æ).
     ============================================================ */
  & .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--tick);
  }

  & .product-card {
    border-radius: 0;
    background: var(--wb-panel);
    border: 1px solid var(--wb-line-soft);
    overflow: hidden;
    transition: border-color 0.25s var(--ease-out);

    & .product-image {
      border-radius: 0;
      background: var(--wb-ink);
      border-block-end: 1px solid var(--wb-line-soft);

      & img { border-radius: 0; }
    }

    & .product-info { padding: calc(var(--tick) * 1.5); gap: 0.25rem; }

    & .product-brand {
      font-family: var(--font-body);
      font-size: var(--step--2);
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--wb-blueprint);
    }

    /* sentence-case, body face — readability over caps */
    & h3 {
      font-family: var(--font-body);
      font-size: var(--step-0);
      font-weight: 500;
      letter-spacing: 0.01em;
      text-transform: none;
      line-height: 1.4;
      color: var(--wb-text);
    }

    /* the measured price tag — tabular numerals = "spec" feel */
    & .product-price {
      font-family: var(--font-body);
      font-size: var(--step-0);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
      color: var(--wb-text);

      & del { color: var(--wb-faint); }
      & ins { color: var(--wb-blueprint); }
    }

    & .card-action {
      border-radius: 0;
      background: var(--wb-text);
      color: var(--wb-ink);
      border: 1px solid var(--wb-text);
      font-family: var(--font-display);
      font-size: var(--step--1);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background 0.2s var(--ease-out),
                  color 0.2s var(--ease-out),
                  opacity 0.2s var(--ease-out);

      &:hover { opacity: 1; background: transparent; color: var(--wb-text); }
      &.added { background: var(--wb-blueprint); border-color: var(--wb-blueprint); color: var(--wb-ink); }
    }

    & .card-variants > button {
      border-radius: 0;
      background: var(--wb-panel-hi);
      color: var(--wb-text);
      font-family: var(--font-display);
      letter-spacing: 0.04em;

      &:hover { background: var(--wb-blueprint); color: var(--wb-ink); transform: none; }
      &:active { background: var(--wb-blueprint); transform: none; }
    }

    & .sale-badge {
      border-radius: 0;
      font-family: var(--font-display);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    &:hover {
      box-shadow: none;
      border-color: var(--wb-blueprint);

      & .product-image { transform: none; }
    }
  }

  /* ============================================================
     EDITORIAL band — drawing-board panel, not soft sage wash.
     ============================================================ */
  & .editorial {
    background: var(--wb-panel);
    border: 1px solid var(--wb-line);
    border-radius: 0;

    & .editorial-eyebrow {
      color: var(--wb-blueprint);
      letter-spacing: 0.22em;
    }

    & h2 {
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--wb-text);
    }

    & p { color: var(--wb-muted); }
  }

  /* ============================================================
     BRAND strip — between blueprint rules.
     ============================================================ */
  & .brands {
    border-block: 1px solid var(--wb-line);

    & .brand-track span {
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--wb-muted);
    }

    & .brand-track span[aria-hidden] { color: var(--wb-blueprint); }
  }

  /* ============================================================
     NEWSLETTER — a darker drawing board, square cut.
     ============================================================ */
  & .newsletter {
    border-radius: 0;
    background: var(--wb-ink);
    border: 1px solid var(--wb-line);
    color: var(--wb-text);

    & .newsletter-inner {
      & h2 {
        font-family: var(--font-display);
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--wb-text);
      }

      & p { color: var(--wb-muted); }

      & form {
        background: var(--wb-panel);
        border: 1px solid var(--wb-line);
        border-radius: 0;
        padding: var(--tick);
      }

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

      & button {
        border-radius: 0;
        background: var(--wb-text);
        color: var(--wb-ink);
        font-family: var(--font-display);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        transition: opacity 0.2s var(--ease-out);

        &:hover { background: var(--wb-blueprint); transform: none; }
      }
    }
  }

  /* ============================================================
     CHROME — header, announcement bar, footer: dark, unbroken.
     ============================================================ */
  & .announcement-bar {
    background: var(--wb-ink);
    color: var(--wb-text);
    border-block-end: 1px solid var(--wb-line);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: var(--step--2);

    & > button { color: var(--wb-text); }
  }

  & header {
    background: var(--wb-surface);
    border-block-end: 1px solid var(--wb-line);
    color: var(--wb-text);

    & .logo-mark { color: var(--wb-blueprint); }

    & .logo-text {
      color: var(--wb-text);
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* Header icons (search, account, cart, menu) must read on the dark bar too. */
    & .icon-btn,
    & .cart-btn,
    & .menu-toggle,
    & .lang-toggle { color: var(--wb-text); }

    & nav a {
      color: var(--wb-text);
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: var(--step--1);
      border-radius: 0;

      &:hover { background: var(--wb-panel); }
    }

    & .icon-btn:hover,
    & .cart-btn:hover { background: var(--wb-panel); }

    & .cart-count { background: var(--wb-blueprint); color: var(--wb-ink); }
  }

  & footer {
    background: var(--wb-ink);
    border-block-start: 1px solid var(--wb-line);

    & .footer-brand .logo-text {
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    & nav h3,
    & .footer-payment h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step--2);
      letter-spacing: 0.2em;
      color: var(--wb-text);
    }

    & .payment-badge { border-radius: 0; border-color: var(--wb-line); color: var(--wb-muted); }
    & .footer-bottom { border-block-start: 1px solid var(--wb-line); }
  }

  /* ============================================================
     CATALOG — tight technical grid inside calm whitespace.
     ============================================================ */
  & .catalog-toolbar {
    border-block-end: 1px solid var(--wb-line);

    & .result-count {
      font-family: var(--font-display);
      font-size: var(--step--2);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--wb-muted);
      font-variant-numeric: tabular-nums;
    }

    & .filter-toggle {
      border-radius: 0;
      background: var(--wb-text);
      color: var(--wb-ink);
      border: 1px solid var(--wb-text);
      font-family: var(--font-display);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: var(--step--2);
      padding: 0.5rem 1rem;
    }

    & .sort-select select {
      border-radius: 0;
      background: var(--wb-panel);
      color: var(--wb-text);
      border: 1px solid var(--wb-line);
    }
  }

  & .catalog .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--tick);
  }

  & .category-hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wb-text);
  }

  /* Filter sidebar — blueprint hairlines + chalk-blue ticks */
  & .filter-group {
    border-block-end: 1px solid var(--wb-line-soft);

    & h3 {
      font-family: var(--font-display);
      font-size: var(--step--2);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--wb-muted);
    }

    & summary::after { border-color: var(--wb-faint); }
  }

  & .filter-list li label { color: var(--wb-muted); &:hover { color: var(--wb-text); } }

  & .filter-group input[type="checkbox"] {
    border-radius: 0;
    border-color: var(--wb-line);
    background: var(--wb-panel);

    &:checked { background: var(--wb-blueprint); border-color: var(--wb-blueprint); }
  }

  & .active-filters .active-filter-pill {
    border-radius: 0;
    background: var(--wb-panel-hi);
    border: 1px solid var(--wb-line);
    color: var(--wb-text);
    font-family: var(--font-display);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;

    &:hover { background: var(--wb-blueprint); color: var(--wb-ink); border-color: var(--wb-blueprint); }
  }

  & .size-chip {
    border-radius: 0;
    border-color: var(--wb-line);
    color: var(--wb-muted);

    &:hover { border-color: var(--wb-blueprint); color: var(--wb-text); }
    &.active { background: var(--wb-blueprint); border-color: var(--wb-blueprint); color: var(--wb-ink); }
  }

  & .empty-state a,
  & .empty-state-btn {
    border-radius: 0;
    background: var(--wb-text);
    color: var(--wb-ink);
    border: 1px solid var(--wb-text);
  }

  /* ============================================================
     PDP — full spec sheet. Descending, legible hierarchy.
     ============================================================ */
  & .pdp-gallery > .pdp-hero,
  & .pdp-gallery > nav > button {
    border-radius: 0;
    overflow: hidden;
  }

  & .pdp-gallery > .pdp-hero { border: 1px solid var(--wb-line-soft); }

  & .pdp-info {
    & .pdp-brand {
      font-family: var(--font-body);
      font-size: var(--step--2);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--wb-blueprint);

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

    & h1 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-3);
      letter-spacing: 0.02em;
      text-transform: uppercase;
      line-height: 1.0;
      color: var(--wb-text);
    }

    & .pdp-subtitle { color: var(--wb-muted); }

    & .pdp-sku {
      font-family: var(--font-body);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      color: var(--wb-faint);
    }

    & .pdp-price {
      font-family: var(--font-body);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
      color: var(--wb-text);
      border-block-end: 1px solid var(--wb-line);
    }

    & .pdp-description { color: var(--wb-muted); max-width: 68ch; }
  }

  & .pdp-details {
    background: var(--wb-panel);
    border: 1px solid var(--wb-line-soft);
    border-radius: 0;

    & dt { color: var(--wb-text); }
    & dd { color: var(--wb-muted); font-variant-numeric: tabular-nums; }
  }

  & .quantity-selector {
    border-radius: 0;
    border-color: var(--wb-line);
    background: var(--wb-panel);

    & input { color: var(--wb-text); border-inline-color: var(--wb-line); }
    & .qty-btn:hover { background: var(--wb-panel-hi); }
  }

  & .pdp-add-btn {
    border-radius: 0;
    background: var(--wb-text);
    color: var(--wb-ink);
    border: 1px solid var(--wb-text);
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), opacity 0.2s var(--ease-out);

    &:hover { background: transparent; color: var(--wb-text); transform: none; }
    &.added { background: var(--wb-blueprint); border-color: var(--wb-blueprint); color: var(--wb-ink); }
  }

  & .pdp-variants .pdp-variant-btn {
    border-radius: 0;
    background: var(--wb-panel-hi);
    border: 1px solid var(--wb-line);
    color: var(--wb-text);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: var(--step--1);

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

  & .pdp-tabs .pdp-tab-nav button {
    font-family: var(--font-display);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wb-muted);
  }

  & .pdp-trust {
    border-block-start: 1px solid var(--wb-line);

    & .trust-item { color: var(--wb-muted); & svg { color: var(--wb-blueprint); } }
  }

  /* Related — heavy blueprint rule above */
  & .related-section {
    border-block-start: 1px solid var(--wb-line);
    padding-block-start: var(--rhythm);
    margin-block-start: var(--rhythm);
  }

  /* ============================================================
     CMS pages — keep them dark + on-grid.
     ============================================================ */
  & .cms-page > h1 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-block-end: 1px solid var(--wb-line);
    color: var(--wb-text);
  }

  & .cms-content { color: var(--wb-text); }
  & .cms-content h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  & .cms-content a { color: var(--wb-blueprint); text-decoration-color: var(--wb-line); }
  & .cms-quote p { color: var(--wb-text); }
  & .cms-quote::before { color: var(--wb-blueprint); }
}

/* ============================================================
   DARK-THEME GUARDS — the per-header-style base rules
   (header[data-theme="split"] ~ main .newsletter / ~ footer) use an
   INVERSION trick (background:var(--text); color:var(--surface)) that
   assumes a LIGHT page. On this dark theme that paints a LIGHT slab and
   the workshop's own light copy/inputs vanish on it. Re-assert the
   workbench dark at matching specificity (wins on load order).
   ============================================================ */
body.theme-workshop main section.newsletter {
  background: var(--wb-ink);
  color: var(--wb-text);
}
body.theme-workshop main section.newsletter .newsletter-inner h2 { color: var(--wb-text); }
body.theme-workshop main section.newsletter .newsletter-inner p { color: var(--wb-muted); }
body.theme-workshop main section.newsletter input[type="email"] { color: var(--wb-text); }

body.theme-workshop footer {
  background: var(--wb-ink);
  color: var(--wb-text);
}
body.theme-workshop footer .logo-text,
body.theme-workshop footer .footer-brand .logo-text { color: var(--wb-text); }

/* Imageless products read as a blueprint spec-card on the workbench grid,
   not a generic grey "no photo" box. */
.theme-workshop .product-placeholder {
  background:
    linear-gradient(var(--wb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wb-grid) 1px, transparent 1px),
    var(--wb-panel);
  background-size: var(--tick) var(--tick), var(--tick) var(--tick), auto;
}
.theme-workshop .product-placeholder::after {
  width: clamp(34px, 26%, 64px);
  background: color-mix(in oklab, var(--wb-blueprint) 75%, transparent);
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
  mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
}