/* ---------------------------------------------------------------
   Category CTA Nav & Headers
   --------------------------------------------------------------- */
.category-cta-nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.category-cta-btn {
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}

.category-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.category-title {
    font-size: var(--text-fluid-h2);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------
   Drop sections
   --------------------------------------------------------------- */
.drop-section + .drop-section {
    padding-top: 0;
}

.drop-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: 1.5rem;
}

.drop-code {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-accent-text);
    margin-bottom: 0.5rem;
}

.drop-name {
    font-size: var(--text-fluid-h2);
    margin: 0;
}

.drop-header-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.35rem;
}

.drop-released {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.drop-note {
    max-width: var(--text-max-width);
    color: var(--color-text-muted);
    font-size: var(--text-fluid-p);
    line-height: 1.75;
    margin: 0 0 3rem;
}

/* ---------------------------------------------------------------
   Product grid
   --------------------------------------------------------------- */
/* Hairlines are drawn as borders on the cards themselves, with the container
   supplying the top and left edge. A gap-over-background grid would be simpler,
   but it paints the container colour through empty cells — and an incomplete
   final row (4 pieces across 3 columns) then shows grey blocks. */
.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

@media (min-width: 600px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    color: var(--color-foreground);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
}

.product-card:hover,
.product-card:focus-visible {
    background: var(--color-surface);
    color: var(--color-foreground);
}

.product-card-plate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgb(193 39 45 / 0.05) 0%, transparent 55%),
        var(--color-void);
    border-bottom: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------
   Product Card 2x2 Grid (Index Page)
   --------------------------------------------------------------- */
.product-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 1 / 1;
    background: var(--color-border);
    gap: 1px;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.product-card-grid-cell {
    position: relative;
    background: var(--color-void);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-foreground);
    text-decoration: none;
    transition: background 0.15s ease;
}

.product-card-grid-cell:hover,
.product-card-grid-cell:focus-visible {
    background: var(--color-surface);
}

.product-card-grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card-grid-cell:hover .product-card-grid-image {
    transform: scale(1.05);
}

.product-card-grid-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    text-align: center;
}

.product-card-grid-code {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
}

.product-card-grid-cell--more {
    background: var(--color-surface);
    color: var(--color-accent-text);
    padding: 0.75rem;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.product-card-grid-cell--more:hover,
.product-card-grid-cell--more:focus-visible {
    background: var(--color-accent);
    color: var(--color-white);
}

.product-card-grid-more-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.product-card-title-link {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: inherit;
    text-decoration: none;
}

.product-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card-image {
    transform: scale(1.03);
}

/* Fallback plate when a piece has no photography: the garment code set large as
   the artwork. Kept faint, but strong enough that the plate reads as a
   deliberate typographic panel rather than a failed image. */
.product-card-code-xl {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 4rem);
    letter-spacing: -0.02em;
    color: hsl(0 0% 100% / 0.16);
    transition: color 0.2s ease;
}

.product-card:hover .product-card-code-xl {
    color: rgb(193 39 45 / 0.5);
}

.product-card-status {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--color-void);
}

.product-card--sold-out .product-card-plate {
    opacity: 0.55;
}

.product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem;
    gap: 0.625rem;
}

.product-card-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.product-card-category { color: var(--color-accent-text); }
.product-card-code { color: var(--color-text-muted); }

.product-card-name {
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.15;
}

.product-card-name-link {
    color: inherit;
}

.product-card-name-link::after {
    /* Stretches the name link over the whole card so the card body is one big
       target, while the action bar stays clickable on its own (it is lifted
       above this overlay). */
    content: "";
    position: absolute;
    inset: 0;
}

.product-card-fabric {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.product-card-foot {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.product-card-price {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   Card action bar

   Two full-bleed cells flush with the card edges, divided by the same hairline
   that draws the grid — the bar reads as the last row of the card rather than a
   pair of floating buttons. Buy is the filled half, details the ghost half.
   --------------------------------------------------------------- */
.product-card-actions {
    position: relative; /* above the stretched name link */
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--color-border);
}

.product-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem 0.75rem;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.product-card-action--buy {
    background: var(--color-foreground);
    color: var(--color-void);
}

.product-card-action--buy:hover,
.product-card-action--buy:focus-visible {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.product-card-action--details {
    background: transparent;
    color: var(--color-text-muted);
    border-left: 1px solid var(--color-border);
}

.product-card-action--details:hover,
.product-card-action--details:focus-visible {
    background: var(--color-surface);
    color: var(--color-foreground);
}

.product-card-action--buy[disabled] {
    background: transparent;
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* The grid is one row of prices and one row of actions across three columns;
   let short and long names take the space they need without the action bars
   drifting out of alignment. */
@media (min-width: 600px) {
    .product-card-body { min-height: 9.5rem; }
}

/* ---------------------------------------------------------------
   Size run

   In the catalogue the run is not decoration: each chip is a radio, so a size
   can be picked without leaving the grid and the cart island reads the choice
   from the card. Chips keep the same box as the read-only run on the product
   page.
   --------------------------------------------------------------- */
.product-card-sizes {
    position: relative; /* above the stretched name link */
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.size-run {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.size-option { display: inline-flex; }

.size-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.35rem;
    min-width: 1.65rem;
    text-align: center;
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.size-chip:hover {
    border-color: var(--color-foreground);
}

/* Selection is shown by fill, matching the size picker on the product page:
   red is the selection signal everywhere in the system. */
.reserve-size-input:checked + .size-chip {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
}

/* The input is visually hidden, so its focus ring has to be drawn on the chip. */
.reserve-size-input:focus-visible + .size-chip {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Unavailable sizes are struck through as well as dimmed, so stock is not
   communicated by colour alone. */
.size-chip--out {
    color: var(--color-text-muted);
    border-color: transparent;
    text-decoration: line-through;
    text-decoration-color: var(--color-accent);
    cursor: not-allowed;
}

.size-chip--out:hover { border-color: transparent; }

/* Cart island cue when add-to-cart is pressed before a size is picked. */
.product-card.is-size-required .size-chip:not(.size-chip--out) {
    border-color: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .product-card.is-size-required .product-card-sizes {
        animation: sizeNudge 0.3s ease;
    }
}

@keyframes sizeNudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ---------------------------------------------------------------
   Sizing table
   --------------------------------------------------------------- */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-width: 34rem;
}

.spec-table th,
.spec-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.spec-table thead th {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent-text);
    background: var(--color-void);
}

.spec-table tbody th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-foreground);
}

.spec-table tbody td { color: var(--color-text-muted); }

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: 0; }

.sizing-note {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}