/*
 * General LED — visual and semantic hierarchy
 *
 * Keep the content order in the templates and the scale/weight decisions in
 * one small layer. This makes headings, product information and actions read
 * consistently across the home, catalog, product and checkout experiences.
 */

:root {
  --type-display: clamp(42px, 4.2vw, 56px);
  --type-page-title: clamp(34px, 3.2vw, 44px);
  --type-section-title: clamp(27px, 2.35vw, 32px);
  --type-subsection-title: 24px;
  --type-card-title: 18px;
  --type-body: 16px;
  --type-meta: 12px;
  --weight-display: 900;
  --weight-heading: 800;
  --weight-card: 700;
  --weight-label: 700;
  --weight-body: 500;
}

body {
  font-size: var(--type-body);
  line-height: 1.5;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

/* The home page has one clear display heading, followed by section headings. */
.hero-title {
  font-size: var(--type-display);
  font-weight: var(--weight-display);
  line-height: 0.98;
}

.section-heading h2,
.projects-layout h2,
.feature-tile h2 {
  font-weight: var(--weight-heading);
}

.section-heading h2 {
  font-size: var(--type-section-title);
  line-height: 1.08;
}

.feature-tile h2 {
  font-size: 28px;
  line-height: 1.08;
}

.section-heading > p,
.product-heading > p {
  font-weight: var(--weight-body);
  line-height: 1.45;
}

.light-guide-result h3 {
  font-size: clamp(24px, 2.35vw, 30px);
  font-weight: var(--weight-heading);
  line-height: 1.08;
}

/* Page-level H1s are intentionally prominent without competing with the home hero. */
.page-title,
.shop-page-title,
.shop-search-copy h1,
.general-cart-header h1,
.general-checkout-header h1,
.general-account-auth-header h1,
.general-account-header h1,
.general-thankyou-card h1 {
  font-size: var(--type-page-title);
  font-weight: var(--weight-heading);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.shop-sidebar-heading h2,
.shop-filter-block > h2,
.general-checkout-review-header h2,
.single-product-info-grid h2,
.single-product-variation-header h2 {
  font-size: var(--type-subsection-title);
  font-weight: var(--weight-heading);
  line-height: 1.15;
}

.single-product-related__title,
.single-product-accessories__title,
.general-b2b-form-header h2 {
  font-weight: var(--weight-heading);
}

/* The product name is the primary heading on a product page. */
.single-product-summary-panel h1 {
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: var(--weight-heading);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Product cards follow the same reading order as the product detail page. */
.product-card h3,
.shop-product-card h3 {
  font-size: var(--type-card-title);
  font-weight: var(--weight-card);
  line-height: 1.22;
}

.product-code {
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--weight-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-card dt,
.shop-product-specs dt {
  font-weight: var(--weight-label);
}

.product-card dd,
.shop-product-specs dd {
  font-weight: var(--weight-card);
}

.product-card .product-price,
.shop-product-price,
.single-product-price {
  font-weight: 800;
}

/* Category remains a small context label; the name and specifications carry
 * the visual emphasis. The SKU now sits after the product name in the DOM. */
.shop-product-meta,
.shop-product-meta.is-simple-product-meta,
.shop-product-meta.is-variable-product-meta {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "category";
}

.shop-product-meta a.shop-product-category-link {
  font-weight: var(--weight-label);
}

.shop-product-sku-after-title {
  grid-area: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  color: var(--muted);
}

.shop-product-sku-after-title b {
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: var(--weight-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-product-sku-after-title small {
  width: auto;
  max-width: 100%;
  font-size: 11px;
  font-weight: var(--weight-body);
}

.shop-product-grid[data-view="list"] .shop-product-body {
  grid-template-areas:
    "meta commerce"
    "title actions"
    "sku actions"
    "specs actions";
}

.shop-product-grid[data-view="list"] .shop-product-sku-after-title {
  grid-area: sku;
  justify-self: start;
}

.shop-product-grid:not([data-view="list"]) .shop-product-sku-after-title {
  grid-area: auto;
}

/* A quiet separation between the commercial summary and technical detail. */
.single-product-summary-copy {
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.55;
}

.single-product-info-grid {
  margin-top: 20px;
}

.single-product-info-grid h2 {
  margin-bottom: 12px;
}

/* Keep the footer useful without letting its spacing dominate the page. */
.site-footer .footer-shell {
  padding: 22px 0 14px;
}

.site-footer .footer-topline {
  gap: 8px;
  margin-bottom: 8px;
}

.site-footer .footer-topline span {
  min-height: 64px;
  border-radius: 8px;
  padding: 10px 14px;
}

.site-footer .footer-topline strong {
  font-size: 16px;
}

.site-footer .footer-topline small {
  font-size: 11px;
}

.site-footer .footer-main {
  gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(14px, 1.6vw, 22px);
}

.site-footer .footer-logo {
  width: 180px;
  height: 72px;
}

.site-footer .footer-brand p,
.site-footer .footer-description {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.site-footer .footer-cta {
  gap: 8px;
  margin-top: 12px;
}

.site-footer .footer-primary,
.site-footer .footer-secondary {
  min-height: 44px;
  padding-inline: 14px;
  font-size: 13px;
}

.site-footer .footer-links h2,
.site-footer .footer-contact h2 {
  margin-bottom: 8px;
  font-size: 12px;
}

.site-footer .footer-links ul,
.site-footer .footer-contact ul {
  gap: 6px;
}

.site-footer .footer-links a,
.site-footer .footer-contact a {
  font-size: 12px;
  line-height: 1.25;
}

.site-footer .footer-contact {
  padding: 14px;
}

.site-footer .footer-contact li {
  gap: 2px;
}

.site-footer .footer-contact span {
  font-size: 11px;
}

.site-footer .footer-contact strong {
  font-size: 12px;
}

.site-footer .footer-bottom {
  gap: 10px;
  padding-top: 10px;
  font-size: 11px;
}

@media (max-width: 820px) {
  .site-footer .footer-shell {
    padding-top: 16px;
  }

  .site-footer .footer-main {
    gap: 12px 16px;
    padding: 16px;
  }

  .site-footer .footer-logo {
    width: 156px;
    height: 60px;
  }

  .site-footer .footer-brand p,
  .site-footer .footer-description {
    font-size: 14px;
  }

  .site-footer .footer-cta {
    margin-top: 10px;
  }
}

@media (max-width: 520px) {
  .site-footer .footer-main {
    padding: 14px;
  }

  .site-footer .footer-logo {
    width: 148px;
    height: 56px;
  }

  .site-footer .footer-topline span {
    min-height: 52px;
    padding: 8px 12px;
  }

  .site-footer .footer-topline strong {
    font-size: 14px;
  }

  .site-footer .footer-topline small {
    font-size: 10px;
  }

  .site-footer .footer-primary,
  .site-footer .footer-secondary {
    width: 100%;
  }
}

@media (max-width: 820px) {
  :root {
    --type-page-title: clamp(30px, 7vw, 36px);
    --type-section-title: clamp(25px, 6.5vw, 29px);
  }

  .hero-title {
    font-size: clamp(36px, 11vw, 44px);
  }

  .feature-tile h2 {
    font-size: 24px;
  }

  .shop-product-grid[data-view="list"] .shop-product-body {
    grid-template-areas:
      "meta"
      "title"
      "sku"
      "specs"
      "commerce"
      "actions";
  }

  .shop-product-grid[data-view="list"] .shop-product-sku-after-title {
    justify-self: start;
  }

  .shop-product-sku-after-title {
    gap: 5px;
  }

  .single-product-summary-panel h1 {
    font-size: clamp(24px, 7vw, 31px);
    line-height: 1.08;
  }

  .single-product-info-grid h2 {
    font-size: 22px;
  }
}

@media (max-width: 520px) {
  .hero-title {
    font-size: clamp(34px, 10.5vw, 40px);
  }

  .single-product-summary-panel h1 {
    font-size: clamp(24px, 7.5vw, 30px);
  }
}