/* ============================================
   Glæsilegt — Quiet Icelandic couture
   ---------------------------------------------
   Identity: a hushed, high-contrast atelier. Tenor Sans is the spaced
   display voice (wordmarks, heads, prices); Spectral is the editorial
   serif that carries every line of descriptive copy. Nothing shouts.
   Signature motif: the HAIRLINE MAT — every focal image and the
   newsletter / price / footer sit inside a thin double-hairline frame
   with an offset outline, like a matted print in a gallery. Prices wear
   a top rule; category names are spaced Tenor wordmarks that underline
   on hover. Motion is slow, transform/opacity only, no bounce.
   Distinct from gallery/editorial: serif body copy + matted frame +
   ruled price + asymmetric column rhythm (vertical > horizontal).
   Fonts: Tenor Sans (display) + Spectral (body serif)
   ============================================ */

.theme-luxury {
  /* Tonal ink ramp — replaces opacity-as-color (no muddy grey haze) */
  --lx-ink: var(--text);
  --lx-muted: color-mix(in oklab, var(--text) 64%, var(--surface));
  --lx-faint: color-mix(in oklab, var(--text) 38%, var(--surface));
  --lx-hair: color-mix(in oklab, var(--text) 16%, var(--surface));
  --lx-hair-soft: color-mix(in oklab, var(--text) 8%, var(--surface));

  /* Modular type scale — 1.28 ratio, named steps */
  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: clamp(1.2rem, 1.6vw, 1.28rem);
  --step-2: clamp(1.5rem, 2.4vw, 1.64rem);
  --step-3: clamp(1.95rem, 3.4vw, 2.6rem);
  --step-4: clamp(2.6rem, 5vw, 3.6rem);
  --step-5: clamp(3.5rem, 7vw, 6rem);

  /* Vertical rhythm — breathing exceeds the horizontal */
  --rhythm: clamp(4.5rem, 9vw, 8rem);
  --tick: 0.28em; /* couture letter-spacing for spaced wordmarks */

  /* --- Top-of-page restraint reads from the very first pixel --- */
  & .announcement-bar,
  & [role="banner"][aria-label="Tilboð"] {
    background: transparent;
    color: var(--lx-ink);
    border-block-end: 1px solid var(--lx-hair);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 400;
    font-size: var(--step--2);
  }

  & header {
    background: var(--surface);
    border-block-end: 1px solid var(--lx-hair);

    & .logo-text {
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 1.05rem;
      font-weight: 400;
    }

    & nav a {
      font-family: var(--font-body);
      font-size: var(--step--1);
      letter-spacing: 0.08em;
      font-weight: 400;
      transition: color 0.4s var(--ease-out);

      &:hover { background: transparent; color: var(--lx-ink); }
    }
  }

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

  /* --- Hero: the matted print --- */
  & .hero-content {
    & .hero-eyebrow {
      font-family: var(--font-display);
      font-size: var(--step--1);
      letter-spacing: var(--tick);
      text-transform: uppercase;
      font-weight: 400;
      color: var(--lx-muted);
      margin-block-end: 1.5rem;
    }

    & h1 {
      font-family: var(--font-display);
      font-size: var(--step-5);
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: 0.04em;
      margin-block-end: 1.75rem;
    }

    & .hero-sub {
      font-family: var(--font-body); /* Spectral serif voice */
      font-style: italic;
      font-size: 1.0625rem;
      line-height: 1.85;
      letter-spacing: 0.005em;
      color: var(--lx-muted);
      max-width: 46ch;
      margin-block-end: 2.5rem;
    }
  }

  /* The signature hairline mat around hero / editorial / pdp imagery */
  & .hero-visual,
  & .hero.hero-split .hero-image-col img,
  & .editorial-visual,
  & .pdp-gallery > .pdp-hero,
  & .pdp-sticky .pdp-gallery-scroll .pdp-hero {
    border-radius: 0;
    border: 1px solid var(--lx-hair);
    outline: 1px solid var(--lx-hair-soft);
    outline-offset: 7px;
  }

  /* CTAs: invert, no translate/bounce */
  & .hero-actions a {
    border-radius: 0;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-size: var(--step--1);
    padding: 1.05em 2.4em;
    box-shadow: none;
    transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out);

    &:hover {
      transform: none;
      box-shadow: none;
      background: var(--lx-ink);
      color: var(--surface);
    }

    &.secondary {
      border: 1px solid var(--lx-hair);

      &:hover {
        transform: none;
        background: var(--lx-ink);
        color: var(--surface);
        border-color: var(--lx-ink);
      }
    }
  }

  /* --- Section heads: distinct display step + serif strapline --- */
  & .section-head {
    margin-block-end: clamp(2rem, 4vw, 3.25rem);

    & h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-3);
      letter-spacing: 0.03em;
      line-height: 1.1;
    }

    & p {
      font-family: var(--font-body);
      font-style: italic;
      font-size: var(--step-0);
      line-height: 1.7;
      color: var(--lx-muted);
      max-width: 52ch;
    }

    & .section-link {
      font-family: var(--font-display);
      font-size: var(--step--1);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--lx-muted);
      transition: color 0.4s var(--ease-out);

      &:hover { color: var(--lx-ink); }
    }
  }

  /* --- Categories: spaced Tenor wordmarks with hairline-underline reveal --- */
  & .category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    overflow-x: visible;
    padding-block-end: 0;
  }

  & .category-card {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: none;

    &:hover {
      box-shadow: none;

      & h3 { border-color: var(--lx-ink); }
    }

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

    & h3 {
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 400;
      letter-spacing: var(--tick);
      text-transform: uppercase;
      margin: 0;
      padding-block: 0.5rem;
      border-block-end: 1px solid transparent;
      transition: border-color 0.45s var(--ease-out);
    }

    & p { display: none; }
  }

  /* --- Product grid: couture density — fewer, larger, vertical breathing --- */
  & .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    column-gap: clamp(2.5rem, 5vw, 4rem);
    row-gap: clamp(3.5rem, 7vw, 6rem);
  }

  /* --- Product cards: no shadow, slow image zoom + tracking shift --- */
  & .product-card {
    border-radius: 0;
    overflow: visible;
    transition: none;

    &:hover {
      box-shadow: none;

      & .product-image img { transform: scale(1.04); }
      & h3 { letter-spacing: 0.05em; }
    }

    & .product-image {
      border-radius: 0;
      border: 1px solid var(--lx-hair-soft);
      transition: none;

      & img {
        border-radius: 0;
        transition: transform 0.8s var(--ease-out);
      }
    }

    & .product-brand {
      font-family: var(--font-display);
      font-size: var(--step--2);
      letter-spacing: 0.18em;
      color: var(--lx-muted);
    }

    & h3 {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      line-height: 1.35;
      transition: letter-spacing 0.45s var(--ease-out);
    }

    & .product-price {
      font-family: var(--font-display);
      font-weight: 400;
      letter-spacing: 0.03em;

      & del { color: var(--lx-faint); }
      & ins { color: var(--lx-ink); }
    }
  }

  /* --- Newsletter: a single centered hairline-matted band --- */
  & .newsletter {
    background: transparent;
    border-radius: 0;
    border-block: 1px solid var(--lx-hair);
    max-width: var(--max-w) !important;
    margin-inline: auto;
    padding-block: clamp(5rem, 10vw, 8rem);
  }

  & .newsletter-inner {
    text-align: center;
    max-width: 540px;

    & h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-3);
      letter-spacing: 0.04em;
      margin-block-end: 0.75rem;
    }

    & p {
      font-family: var(--font-body);
      font-style: italic;
      font-size: var(--step-0);
      line-height: 1.8;
      color: var(--lx-muted);
      margin-block-end: 2rem;
    }

    & form {
      background: transparent;
      border-radius: 0;
      padding: 0;
      gap: 1rem;
      align-items: flex-end;
    }

    /* Couture underline input — no filled field */
    & input[type="email"] {
      flex: 1;
      padding: 0.6rem 0.25rem;
      color: var(--lx-ink);
      background: transparent;
      border-block-end: 1px solid var(--lx-hair);
      border-radius: 0;
      font-family: var(--font-body);
      font-size: var(--step-0);
      transition: border-color 0.4s var(--ease-out);

      &::placeholder { color: var(--lx-faint); }
      &:focus { outline: none; border-block-end-color: var(--lx-ink); }
    }

    & button {
      background: var(--lx-ink);
      color: var(--surface);
      border-radius: 0;
      font-family: var(--font-display);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-size: var(--step--1);
      padding: 0.95em 2em;
      box-shadow: none;
      transition: opacity 0.4s var(--ease-out);

      &:hover {
        background: var(--lx-ink);
        opacity: 0.78;
        transform: none;
        box-shadow: none;
      }
    }
  }

  /* --- Editorial band: stripped of soft-sage tint, serif copy --- */
  & .editorial {
    background: transparent;
    border-radius: 0;
    border-block: 1px solid var(--lx-hair);

    & .editorial-eyebrow {
      font-family: var(--font-display);
      letter-spacing: var(--tick);
      color: var(--lx-muted);
    }

    & h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-4);
      letter-spacing: 0.03em;
    }

    & p {
      font-family: var(--font-body);
      font-style: italic;
      font-size: var(--step-0);
      line-height: 1.85;
      color: var(--lx-muted);
      max-width: 48ch;
    }
  }

  /* --- Brand strip: spaced Tenor, hairline ruled --- */
  & .brands .brand-track span {
    font-family: var(--font-display);
    letter-spacing: 0.12em;
    color: var(--lx-muted);
    transition: color 0.4s var(--ease-out);

    &:hover { color: var(--lx-ink); }
  }

  /* --- Breadcrumb: spaced micro-caps --- */
  & .breadcrumb ol {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: var(--step--2);
    color: var(--lx-faint);

    & a:hover { color: var(--lx-ink); }
    & [aria-current] { color: var(--lx-ink); font-weight: 400; }
  }

  /* --- Category page hero --- */
  & .category-hero {
    & h1 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-3);
      letter-spacing: 0.03em;
    }

    & p {
      font-family: var(--font-body);
      font-style: italic;
      line-height: 1.8;
      color: var(--lx-muted);
      max-width: 60ch;
    }
  }

  /* --- Catalog: spacious, spaced labels --- */
  & .catalog { gap: clamp(3rem, 6vw, 5rem); }

  & .catalog-toolbar {
    & .result-count {
      font-family: var(--font-display);
      font-size: var(--step--2);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--lx-muted);
    }

    & .sort-select select {
      border-radius: 0;
      font-size: var(--step--1);
      letter-spacing: 0.04em;
    }
  }

  & .catalog .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    column-gap: clamp(2.5rem, 5vw, 4rem);
    row-gap: clamp(3.5rem, 7vw, 6rem);
  }

  & .filter-toggle {
    border-radius: 0;
    font-family: var(--font-display);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  & .filter-group h3 {
    font-family: var(--font-display);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
  }

  & .active-filters .active-filter-pill {
    border-radius: 0;
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* --- PDP: large matted image, serif copy, ruled price --- */
  & .pdp { gap: clamp(3rem, 6vw, 5rem); }

  & .pdp-gallery > nav > button {
    border-radius: 0;
  }

  & .pdp-info {
    & .pdp-brand {
      font-family: var(--font-display);
      font-size: var(--step--1);
      letter-spacing: var(--tick);
      text-transform: uppercase;
      font-weight: 400;
      color: var(--lx-muted);

      &:hover { color: var(--lx-ink); }
    }

    & h1 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-4);
      letter-spacing: 0.03em;
      line-height: 1.08;
    }

    & .pdp-subtitle {
      font-family: var(--font-body);
      font-style: italic;
      color: var(--lx-muted);
    }

    /* Ruled price — a quiet-luxury price-tag device (top rule only) */
    & .pdp-price {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-2);
      letter-spacing: 0.03em;
      border-block: 1px solid var(--lx-hair);
      padding-block: 1.25rem;
      margin-block-end: 2rem;
    }

    & .pdp-description {
      font-family: var(--font-body); /* Spectral editorial serif */
      font-size: var(--step-0);
      line-height: 1.85;
      letter-spacing: 0.005em;
      color: var(--lx-ink);
      max-width: 62ch;
    }
  }

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

    & .pdp-add-btn {
      border-radius: 0;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-family: var(--font-display);
      font-size: var(--step--1);
      font-weight: 400;
      padding: 1.05rem 3rem;
      box-shadow: none;
      transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out);

      &:hover {
        transform: none;
        box-shadow: none;
        background: var(--lx-ink);
        color: var(--surface);
        opacity: 1;
      }
    }
  }

  & .pdp-trust {
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--lx-faint);
  }

  & .pdp-variants .pdp-variant-btn {
    border-radius: 0;
    letter-spacing: 0.08em;
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 400;
  }

  & .pdp-tabs .pdp-tab-nav button {
    font-family: var(--font-display);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
  }

  /* --- Related: luxurious vertical spacing --- */
  & .related-section {
    padding-block-start: clamp(5rem, 10vw, 8rem);
    margin-block-start: clamp(5rem, 10vw, 8rem);
    border-block-start: 1px solid var(--lx-hair);
  }

  & .related-section .section-head h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-3);
    letter-spacing: 0.03em;
  }

  /* --- CMS: serif editorial body, capped readable measure --- */
  & .cms-content {
    font-family: var(--font-body);

    & p {
      font-size: var(--step-0);
      line-height: 1.85;
      max-width: 68ch;
      color: var(--lx-ink);
    }

    & h2 {
      font-family: var(--font-display);
      font-weight: 400;
      letter-spacing: 0.02em;
    }
  }

  & .cms-page > h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.03em;
    border-block-end: 1px solid var(--lx-hair);
  }

  /* --- Footer: transparent, hairline-ruled, spaced micro heads --- */
  & footer {
    background: transparent;
    border-block-start: 1px solid var(--lx-hair);

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

    & nav h3,
    & .footer-payment h3 {
      font-family: var(--font-display);
      font-size: 0.625rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 400;
      color: var(--lx-muted);
    }

    & nav a {
      color: var(--lx-muted);
      transition: color 0.4s var(--ease-out);

      &:hover { color: var(--lx-ink); }
    }
  }
}

/* auto-fill handles responsive naturally — no media query needed */