/* ============================================
   Markaður — Practical, Dense, Efficient
   Brand: practical, dense, efficient
   Fonts: Public Sans + Red Hat Text
   ============================================ */

.theme-marketplace {
  /* --- Categories: compact chips --- */
  & .category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  & .category-card {
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: transparent;

    & .category-image {
      display: none;
    }

    & h3 {
      font-size: 0.8125rem;
      font-weight: 500;
    }
  }

  /* --- Section heads: compact bold with rule --- */
  & .section-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    border-block-end: 2px solid var(--text);
    padding-block-end: 0.5rem;
    margin-block-end: 1rem;

    & h2 {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
  }

  /* --- Newsletter: compact inline --- */
  & .newsletter {
    border-radius: 0.25rem;
    padding: 1.5rem var(--gap);

    & .newsletter-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      text-align: left;
    }

    & h2 {
      font-size: 0.875rem;
      font-weight: 600;
      margin: 0;
    }

    & p {
      display: none;
    }

    & input {
      border-radius: 0.25rem;
    }

    & button {
      border-radius: 0.25rem;
    }
  }

  /* --- No hero, tighter spacing --- */
  & main > section:first-child {
    padding-block-start: 2rem;
  }

  /* --- Product cards: compact practical --- */
  & .product-card {
    border-radius: 0.25rem;

    & img {
      border-radius: 0.25rem 0.25rem 0 0;
    }
  }

  /* --- Buttons: squared --- */
  & .hero a,
  & button {
    border-radius: 0.25rem;
  }

  /* --- Catalog: compact, info-dense, practical --- */
  & .catalog {
    gap: 1rem;
  }

  & .catalog-toolbar {
    border-block-end: 2px solid var(--text);
    padding-block-end: 0.5rem;

    & .result-count {
      font-weight: 600;
      font-size: 0.8125rem;
    }

    & .filter-toggle {
      border-radius: 0.25rem;
      font-weight: 500;
      font-size: 0.8125rem;
    }

    & .sort-select select {
      border-radius: 0.25rem;
    }
  }

  & .catalog .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1rem);
  }

  & .filter-group h3 {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
  }

  & .active-filters {
    & .active-filter-pill {
      border-radius: 0.25rem;
      font-size: 0.75rem;
      font-weight: 500;
    }
  }

  /* --- PDP: compact, practical, info-dense --- */
  & .pdp {
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  & .pdp-gallery .pdp-hero {
    border-radius: 0.25rem;
  }

  & .pdp-gallery .pdp-thumbnails button {
    border-radius: 0.25rem;
  }

  & .pdp-info {
    & .pdp-brand {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--primary);
    }

    & h1 {
      font-weight: 700;
      font-size: clamp(1.375rem, 2.5vw, 1.75rem);
      letter-spacing: -0.01em;
    }

    & .pdp-price {
      font-size: 1.375rem;
      font-weight: 700;
    }

    & .pdp-description {
      font-size: 0.875rem;
      line-height: 1.6;
    }
  }

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

    & .pdp-add-btn {
      border-radius: 0.25rem;
      font-weight: 600;
      font-size: 0.875rem;
    }
  }

  & .pdp-trust {
    font-size: 0.75rem;
    font-weight: 500;
  }

  & .pdp-variants .pdp-variant-btn {
    border-radius: 0.25rem;
    font-weight: 500;
    font-size: 0.8125rem;
  }

  & .pdp-tabs .pdp-tab-nav button {
    font-weight: 600;
    font-size: 0.8125rem;
  }

  /* --- Related: compact, bordered --- */
  & .related-section {
    border-block-start: 2px solid var(--text);
    padding-block-start: clamp(1.5rem, 3vw, 2rem);
    margin-block-start: clamp(1.5rem, 3vw, 2rem);
  }

  & .related-section .section-head h2 {
    font-weight: 700;
    font-size: 1rem;
  }
}