/* products.css — industries strip + product detail editorial layout. */

/* ─── Industries strip ────────────────────────────────────────── */
.industries-grid {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 600px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
    .industries-grid { grid-template-columns: repeat(3, 1fr); }
}
.industry-tile {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: relative;
    transition: border-color var(--duration-base) var(--ease),
                transform var(--duration-base) var(--ease);
}
.industry-tile:hover {
    border-color: color-mix(in srgb, var(--color-green) 50%, transparent);
    transform: translateY(-2px);
}
.industry-tile__dot {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    margin-bottom: var(--space-3);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gold) 18%, transparent);
}
.industry-tile__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
}
.industry-tile__short {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* ─── Product detail — editorial layout ───────────────────────── */
.product-detail-page .breadcrumb { margin-bottom: var(--space-4); }

.product-detail-hero {
    padding-block: var(--space-7) var(--space-7);
    background:
        radial-gradient(ellipse 60% 50% at 0% 0%,
            color-mix(in srgb, var(--color-green) 10%, transparent) 0%,
            transparent 60%),
        var(--color-bg);
}
.product-detail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 900px) {
    .product-detail__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: var(--space-7);
    }
}
.product-detail__media {
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-soft);
}
.product-detail__media img,
.product-detail__media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* When the media slot contains a slideshow, drop the wrapper's border + bg —
   the showcase-frame inside already has its own green border + radius and
   stacking two borders looks fussy. The frame's aspect-ratio (4/3) keeps the
   layout consistent with the static-image case above. */
.product-detail__media:has(.product-detail__slideshow) {
    aspect-ratio: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.product-detail__slideshow { width: 100%; }
.product-detail__title {
    margin: var(--space-3) 0 var(--space-3);
    max-width: 16ch;
}
.product-detail__sku {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
}
.product-detail__sku-label {
    color: var(--color-muted);
    text-transform: uppercase;
    font-family: var(--font-head);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
}
.product-detail__sku-value {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}
.product-detail__price {
    margin: 0 0 var(--space-4);
    color: var(--color-green-dark);
    font-size: var(--fs-lg);
}
[data-theme="dark"] .product-detail__price { color: var(--color-green); }
.product-detail__short { margin-bottom: var(--space-5); }

.category-external-cta {
    margin: var(--space-5) 0 var(--space-6);
}
.category-external-cta .btn svg { margin-left: var(--space-2); }
.product-detail__assurances {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.product-detail__assurances li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.product-detail__assurances svg { color: var(--color-green); flex-shrink: 0; }

.product-detail-body {
    padding-block: var(--space-8);
}
.product-detail-body__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 900px) {
    .product-detail-body__grid {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: var(--space-7);
    }
}

/* Spec band — bordered tile of bullet specs */
.product-spec-band {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-gold);
}
.product-spec-list {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}
@media (min-width: 600px) {
    .product-spec-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}
.product-spec-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-ink);
    font-size: var(--fs-base);
}
.product-spec-list svg { color: var(--color-green); flex-shrink: 0; margin-top: var(--space-1); }

/* Support card — "need advice?" sticky sidebar */
.support-card {
    background: var(--color-cream);
    border: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--space-4));
    box-shadow: var(--shadow-sm);
}
.support-card__title {
    margin: var(--space-3) 0 var(--space-3);
    font-size: var(--fs-xl);
    letter-spacing: -0.012em;
}
.support-card__lead {
    color: var(--color-muted);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.support-card__contact {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid color-mix(in srgb, var(--color-gold) 25%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-gold) 25%, transparent);
    display: grid;
    gap: var(--space-2);
}
.support-card__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: baseline;
    font-size: var(--fs-sm);
}
.support-card__row dt {
    margin: 0;
    color: var(--color-muted);
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--fs-eyebrow);
}
.support-card__row dd {
    margin: 0;
    text-align: right;
    color: var(--color-ink);
    font-weight: var(--fw-semibold);
}
.support-card__row a { color: var(--color-green-dark); }
[data-theme="dark"] .support-card__row a { color: var(--color-green); }

.btn--full { width: 100%; justify-content: center; }
.eyebrow__link { color: inherit; text-decoration: none; }
.eyebrow__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Category landing page ──────────────────────────────────── */
/* Two stacked blocks: "browse subcategories" pills, then the product grid.
   Vertical rhythm comes from one rule (block + block) so adding a third
   block in the future stays consistent. */
.category-page__hero {
    margin-bottom: var(--space-7);
}
.category-page__lead {
    margin-bottom: var(--space-4);
    max-width: 64ch;
}
.category-page .category-external-cta {
    margin: var(--space-3) 0 0;
}

.category-block + .category-block {
    margin-top: var(--space-8);
}
.category-block__head {
    margin-bottom: var(--space-5);
}
.category-block__head .eyebrow { display: inline-flex; }
.category-block__head .section__title {
    margin: var(--space-2) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Count chip next to "All products" — answers "how many?" without a heading. */
.count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 var(--space-2);
    height: 2rem;
    border-radius: 999px;
    background: var(--color-green-soft);
    color: var(--color-green-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
}
[data-theme="dark"] .count-chip {
    background: color-mix(in srgb, var(--color-green) 18%, transparent);
    color: var(--color-green);
}

/* Subcategory pills — horizontal jump links, one row per ~3 columns.
   Reads as navigation, not as full content cards (which is what the
   product grid below is for). */
.category-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 600px) { .category-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .category-tile-grid { grid-template-columns: repeat(3, 1fr); } }

.category-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: border-color var(--duration-base) var(--ease),
                transform var(--duration-base) var(--ease-spring),
                box-shadow var(--duration-base) var(--ease);
}
.category-tile:hover, .category-tile:focus-visible {
    border-color: var(--color-green);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--color-green) 35%, transparent);
}
.category-tile__name {
    line-height: 1.3;
}
.category-tile__arrow {
    flex-shrink: 0;
    color: var(--color-green);
    transition: transform var(--duration-base) var(--ease-spring);
}
.category-tile:hover .category-tile__arrow,
.category-tile:focus-visible .category-tile__arrow {
    transform: translateX(3px);
}
[data-theme="dark"] .category-tile {
    background: var(--color-bg-tint);
}

/* Product grid — taller cards, image + padded body. Uniform card heights
   keep the row rhythm clean even when short descriptions vary. */
.product-grid { gap: var(--space-5); }
.product-card {
    padding: 0;
    overflow: hidden;
}
.product-card img {
    margin: 0;
    border-radius: 0;
    aspect-ratio: 4 / 3;
}
.product-card.card--svg-placeholder svg {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
}
.product-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.product-card__cat {
    font-size: var(--fs-eyebrow, .75rem);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-green-dark);
    font-weight: var(--fw-semibold);
}
[data-theme="dark"] .product-card__cat { color: var(--color-green); }
.product-card__title {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.25;
    color: var(--color-ink);
}
.product-card__short {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    /* Cap to two lines so a wordy short doesn't break the grid rhythm. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}