/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }

    /* Tighter card content area so more of the card is image */
    .product-info {
        padding: 0.625rem;
    }

    .product-card .product-title {
        font-size: 0.8125rem;
        min-height: 2.2em;
    }

    .product-card .product-price {
        font-size: 0.8125rem;
    }
}

/* Narrow 2-col phones (≤480px but >360px, ~160px card content width):
   The single-line meta with text-overflow:ellipsis truncates heavily at
   this width — brand + era + material often collapses to "Hans J. Wegner…".
   Allow up to 2 lines so more product identity shows; line-clamp caps
   growth at 2 lines so cards in a row still stay close in height. */
@media (max-width: 480px) {
    .product-card .product-meta {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Ultra-narrow phones (≤360px, e.g. iPhone SE 320px):
   Switch to a single-column layout so cards are not squished
   to ~145px wide — a single column at full width reads far better. */
@media (max-width: 360px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .product-info {
        padding: var(--space-sm) var(--space-md);
    }

    /* Reclaim the min-height forced for 2-col alignment —
       single column cards have ample width for titles to flow naturally. */
    .product-card .product-title {
        min-height: auto;
        font-size: 0.875rem;
    }

    /* Full-width single-col cards have ~288px content width — brand·era·material
       fits on one line again; revert the 2-line clamp to keep cards compact. */
    .product-card .product-meta {
        font-size: 0.75rem;
        white-space: nowrap;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-card .product-price {
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */

.product-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--duration-slow) var(--ease);
    border: 1px solid var(--color-gray-100);
}

.product-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

/* Keyboard users get the same visual lift as mouse hover — equal feedback.
   :has() is supported in all modern browsers; gracefully ignored in older ones. */
.product-card:has(.product-link:focus-visible) {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.product-link {
    display: block;
}

.product-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-alt);
    touch-action: pan-y;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

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

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.product-info {
    padding: var(--space-md);
    background: #FDFCFA;
    display: flex;
    flex-direction: column;
}

.product-card .product-title {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.product-card .product-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: var(--space-xs);
}

.product-card .product-rating-count {
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

.product-card .product-meta {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    letter-spacing: 0.03em;
    margin-bottom: var(--space-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

/* Product Meta — bare/unscoped selector from shop.css's SINGLE PRODUCT
   section (used there for the product page's own meta row), but the class
   name is shared with the card's .product-meta above, so it was already
   loaded everywhere shop.css loaded — moved here rather than scoped into
   single-product.css. Lower specificity than .product-card .product-meta
   above, so it never overrides the card styling. */
.product-meta {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: var(--space-md) 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

/* margin-top:auto pushes price to the bottom of the flex card,
   aligning it consistently whether or not brand·era meta is present */
.product-card .product-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-black);
    letter-spacing: -0.01em;
    margin-top: auto;
}

.product-card .product-price del {
    color: var(--color-gray-400);
    font-weight: 400;
    margin-right: 0.5rem;
}

.product-card .product-price ins {
    text-decoration: none;
    color: #15803d; /* sale price accent — matches savings pill for visual consistency */
}

/* "Pris på forespørgsel" — shown when no price is set on a product.
   Muted italic signals this needs a contact action; links naturally to the inquiry form.
   Inherits font-size from parent .product-price so it scales correctly
   on both cards (0.9375rem) and the single-product page (1.625rem). */
.price-on-request {
    font-style: italic;
    font-weight: 400;
    color: var(--color-gray-400);
}

/* "Ask about price" CTA — sits next to .price-on-request in .product-price-row
   on the single-product page only. Regular customers had no immediate action
   next to a price-on-request product; dealers already get an "Inquire" quick
   action via the tda-menu, so this is gated to non-dealers in the template. */
.price-on-request-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-black);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--duration) var(--ease);
}

.price-on-request-cta:hover {
    background: var(--color-gray-800);
}

.price-on-request-cta:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .product-card .product-meta {
        font-size: 0.6875rem;
    }
}

/* Freshness indicator — "Tilføjet X dage siden" for items 8–30 days old;
   "Tilføjet denne uge" (--new modifier) for items within the last 7 days.
   Rendered only for recently-added items to create gentle urgency/recency signal.
   aria-hidden so screen readers skip the redundant date metadata. */
.product-freshness {
    font-size: 0.6875rem;
    color: var(--color-gray-600);
    letter-spacing: 0.02em;
    margin-top: 0.25rem;
}

/* New-arrival freshness: warmer green to complement the "Ny" badge */
.product-freshness--new {
    color: #4a7c59;
    font-weight: 500;
}

/* Product state modifiers */
.product--sold .product-image img {
    filter: grayscale(35%);
    opacity: 0.8;
}

.product--sold:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-gray-100);
}

.product--sold:hover .product-image img {
    transform: none;
}

/* "Solgt" overlay — appears on hover over sold product images (pointer devices only) */
@media (hover: hover) {
    .product--sold .product-image::after {
        content: 'Solgt';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(17, 17, 17, 0.42);
        color: var(--color-white);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity var(--duration-slow) var(--ease);
        pointer-events: none;
        z-index: 1;
    }

    .product--sold:hover .product-image::after {
        opacity: 1;
    }
}

/* "Reserveret" amber hover overlay on reserved product card images */
@media (hover: hover) {
    .product--reserved .product-image::after {
        content: 'Reserveret';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(180, 120, 0, 0.40);
        color: var(--color-white);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity var(--duration-slow) var(--ease);
        pointer-events: none;
        z-index: 1;
    }

    .product--reserved:hover .product-image::after {
        opacity: 1;
    }
}

.product--reserved {
    border-color: #fde68a;
}

.product--reserved:hover {
    border-color: #fbbf24;
    transform: none;
    box-shadow: none;
}

.product--reserved:hover .product-image img {
    transform: none;
}

.product--reserved:has(.product-link:focus-visible) {
    border-color: #fbbf24;
}

/* "Se produkt →" hover overlay on available (in-stock, non-reserved) product cards.
   Mirrors the sold/reserved overlay pattern but uses a lighter warm-black tint so
   it reads as an invitation to browse, not a blocking state label.
   Only on pointer devices — touch uses the image-swipe dots instead. */
@media (hover: hover) {
    .product-card:not(.product--sold):not(.product--reserved) .product-image::after {
        content: 'Se produkt →';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(17, 17, 17, 0.22);
        color: var(--color-white);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity var(--duration-slow) var(--ease);
        pointer-events: none;
        z-index: 1;
    }

    .product-card:not(.product--sold):not(.product--reserved):hover .product-image::after {
        opacity: 1;
    }
}

/* Keyboard users see the same "Se produkt →" label when tab-focusing a card.
   :focus-visible fires only on keyboard navigation (not tap), so this is
   additive — it does not affect pointer/touch UX. */
.product-card:not(.product--sold):not(.product--reserved):has(.product-link:focus-visible) .product-image::after {
    content: 'Se produkt →';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 17, 0.22);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}



/* ==========================================================================
   PRODUCT BADGES
   ========================================================================== */

/* Badge container */
.product-badges {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.product-badge {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.product-badge-new {
    background: var(--color-black);
    color: var(--color-white);
}

.product-badge-sale {
    background: #E53935;
    color: white;
}

.product-badge-instock {
    background: #2E7D32;
    color: white;
}

.product-badge-sold {
    background: var(--color-gray-600);
    color: white;
}

.product-badge-private {
    background: #F57C00;
    color: white;
}

.product-badge-reserved {
    background: #92400e;
    color: #fef3c7;
}

.product-badge-visibility {
    background: #6366F1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    width: 2rem;
    height: 2rem;
}

.product-badge-visibility svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.product-badge-visibility-hidden {
    background: #DC2626;
}

.product-badge-visibility-catalog-only {
    background: #F59E0B;
}


/* ==========================================================================
   PRODUCT IMAGE HOVER SWAP
   ========================================================================== */

.product-image {
    position: relative;
}

/* ==========================================================================
   PRODUCT IMAGE DOT NAVIGATION
   ========================================================================== */

.product-image-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.product-image-slide[data-slide="0"] {
    opacity: 1;
}

.product-image-dots {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.product-card:hover .product-image-dots {
    opacity: 1;
}

.product-image-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}

/* Larger invisible hit area */
.product-image-dot::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
}

.product-image-dot:hover,
.product-image-dot.active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.2);
}

/* Dot hover triggers image change via JS */

/* (Image collage removed — single image + dots only) */

/* Image count badge — camera icon + number, bottom-right of card image.
   Signals to buyers that more angles are available to browse/swipe.
   Desktop: fades in on card hover. Touch: always visible (see @media hover:none). */
.card-img-count {
    position: absolute;
    bottom: var(--space-xs);
    right: var(--space-xs);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(17, 17, 17, 0.55);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px 3px 5px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
    letter-spacing: 0.02em;
}

.product-card:hover .card-img-count {
    opacity: 1;
}



/* Mobile: fix container padding override (base.css rule was overridden by shop.css specificity) */
@media (max-width: 768px) {
    .product-single .container {
        border-radius: 0;
        padding: var(--space-lg) var(--space-sm);
        box-shadow: none;
    }
}

/* Bottom clearance so page content is never obscured by the sticky CTA bar (≤768px) */
@media (max-width: 768px) {
    .product-single {
        padding-bottom: 72px;
    }
}


/* ==========================================================================
   TOUCH / HOVER-CAPABLE GUARD
   Remove CSS :hover side-effects on touch devices to prevent "sticky hover"
   (iOS/Android retain :hover after tap-then-back, causing lifted/scaled cards).
   JS handles image-swap and dots on touch natively.
   Split from a single shared @media block in shop.css — see PR for shop.css split.
   ========================================================================== */
@media (hover: none) {
    /* Product cards — no lift or shadow on touch */
    .product-card:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--color-gray-100);
    }
    .product-card:hover .product-image img {
        transform: none;
    }
    /* Always show image-navigation dots and image count badge on touch (JS swipe handles them) */
    .product-image-dots {
        opacity: 1;
    }
    .card-img-count {
        opacity: 1;
    }
}

/* ==========================================================================
   PRODUCT GRID — 4-column variant (.product-grid-4)
   Used by cart/checkout cross-sells, related products on single-product,
   and material/restoration guide related products — moved here (rather than
   single-product.css, where it was physically located in shop.css) since
   it's a bare/unscoped selector reused across all of those page types.
   ========================================================================== */
.product-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet (769–1024px): 3-col is more readable than 4; avoids 4→2 jump */
@media (max-width: 1024px) {
    .product-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile (≤600px): 2-col */
@media (max-width: 600px) {
    .product-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ultra-narrow: single-col for related products at ≤360px (same as main archive) */
@media (max-width: 360px) {
    .product-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
   Merged from shop-leftover.css (night-loop item 633, #5414) — cart/checkout
   enqueued this alongside product-card.css as a second render-blocking
   request for no size win, since every call site loads both together anyway.
   =========================================================================== */
/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
}

.breadcrumbs a {
    color: var(--color-gray-600);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color: var(--color-black);
}

.breadcrumb-sep {
    margin: 0 0.5rem;
    color: var(--color-gray-400);
}

.breadcrumb-current {
    color: var(--color-black);
}

/* Breadcrumbs — single-product-page override (was physically located in
   shop.css's SINGLE PRODUCT section, but is a bare/unscoped selector so it
   cascaded everywhere shop.css loaded, same as the base rule above — moved
   here to preserve that, not scoped into single-product.css). */
.breadcrumbs {
    font-size: 0.8125rem;
    margin-bottom: var(--space-lg);
    color: var(--color-gray-600);
}

.breadcrumb-sep {
    margin: 0 0.625rem;
    color: var(--color-gray-300);
}

.breadcrumb-current {
    color: var(--color-black);
    font-weight: 500;
}

/* ==========================================================================
   CATEGORY NAVIGATION
   ========================================================================== */

.category-nav {
    padding: var(--space-2xl) 0;
    background: var(--color-white);
}

/* Masonry Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.category-grid-masonry {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(120px, auto);
    grid-auto-flow: dense;
}

/* Full page category grid (more columns) */
.category-grid-full {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
    .category-grid-full {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Categories page styles */
.categories-page {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}
.categories-page > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

.categories-page .page-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.categories-page .page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-xs);
}

.categories-page .page-subtitle {
    font-size: 1rem;
    color: var(--color-gray-600);
}

/* Wishlist page */
.wishlist-page {
    background: #F5F0EB;
    padding: var(--space-xl) 0 var(--space-2xl);
    min-height: 50vh;
    background: var(--color-warm);
    flex: 1;
}
.wishlist-page > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

.wishlist-page .page-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.wishlist-page .page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-xs);
}

.wishlist-page .page-subtitle {
    font-size: 1rem;
    color: var(--color-gray-600);
}

.wishlist-empty,
.wishlist-loading {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--color-gray-600);
}

.wishlist-empty .btn {
    margin-top: var(--space-md);
}

.wishlist-grid .wishlist-btn {
    opacity: 1;
}

@media (max-width: 1100px) {
    .category-grid-masonry {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .category-grid,
    .category-grid-masonry {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-grid-masonry {
        grid-auto-rows: minmax(100px, auto);
    }
}

@media (max-width: 600px) {
    .category-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    .category-grid-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        grid-auto-rows: auto;
    }
    .category-grid-masonry .category-image {
        aspect-ratio: 4 / 3;
    }
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    transition: all var(--duration) var(--ease);
}

.category-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Keyboard focus ring: match the card's border-radius + same lift as hover
   so keyboard users get equal visual feedback. The universal :focus-visible
   in base.css gives a 2px black ring; we override border-radius and offset. */
.category-card:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 3px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Dark "Alle møbler" card needs a white ring for contrast on black background */
.category-card-all:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 3px;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 5px var(--color-black);
}

/* Landscape cards - span 2 columns (horizontal furniture like coffee tables) */
.category-card-landscape {
    grid-column: span 2;
}

.category-card-landscape .category-image {
    aspect-ratio: 16 / 9;
}

.category-card-landscape .category-name {
    font-size: 1.25rem;
}

/* Portrait cards - span 2 rows (vertical furniture like dressers, shelves) */
.category-card-portrait {
    grid-row: span 2;
}

.category-card-portrait .category-image {
    aspect-ratio: 3 / 4;
    flex: 1;
}

.category-card-portrait .category-name {
    font-size: 1.25rem;
}

/* Square cards - standard 1x1 */
.category-card-square .category-image {
    aspect-ratio: 1 / 1;
}

/* Keep rank-based classes for frontpage grid */
.category-card-large {
    grid-column: span 2;
    grid-row: span 2;
}

.category-card-large .category-image {
    aspect-ratio: 4 / 3;
}

.category-card-large .category-info {
    padding: var(--space-lg) var(--space-md);
}

.category-card-large .category-name {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.category-card-large .category-count {
    font-size: 0.9375rem;
}

.category-card-medium {
    grid-row: span 2;
}

.category-card-medium .category-image {
    aspect-ratio: 3 / 4;
    flex: 1;
}

.category-card-medium .category-name {
    font-size: 1.25rem;
}

.category-card-small .category-image {
    aspect-ratio: 16 / 10;
}

.category-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.category-card:hover .category-image img {
    transform: scale(1.05);
}

.category-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
}

.category-info {
    padding: var(--space-md);
    flex-shrink: 0;
    background: #FDFCFA;
}

.category-name {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: var(--space-2xs);
}

.category-count {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: var(--color-warm);
    border: 1px solid var(--color-gray-200);
    border-radius: 2rem;
    padding: 0.1875rem 0.625rem;
    letter-spacing: 0.01em;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.category-card:hover .category-count {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

/* "All products" card */
.category-card-all {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
    min-height: 160px;
    grid-column: span 1;
}

.category-card-all .category-info {
    text-align: center;
    padding: var(--space-lg);
    background: transparent;
}

.category-card-all .category-name {
    color: var(--color-white);
    font-size: 1.25rem;
}

.category-card-all .category-count {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.category-card-all:hover .category-count {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.category-card-all:hover {
    background: var(--color-gray-900);
    border-color: var(--color-gray-900);
}

/* Responsive adjustments for masonry cards */
@media (max-width: 900px) {
    .category-card-landscape {
        grid-column: span 2;
    }
    .category-card-portrait {
        grid-row: span 1;
    }
    .category-card-portrait .category-image {
        aspect-ratio: 16 / 10;
    }
    .category-card-large {
        grid-column: span 2;
        grid-row: span 1;
    }
    .category-card-large .category-image {
        aspect-ratio: 16 / 9;
    }
    .category-card-medium {
        grid-row: span 1;
    }
    .category-card-medium .category-image {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 600px) {
    .category-card-landscape,
    .category-card-portrait,
    .category-card-square {
        grid-column: span 1;
        grid-row: span 1;
    }
    .category-card-landscape .category-image,
    .category-card-portrait .category-image,
    .category-card-square .category-image {
        aspect-ratio: 16 / 9;
    }
    .category-card-large,
    .category-card-medium,
    .category-card-small {
        grid-column: span 1;
        grid-row: span 1;
    }
    .category-card-large .category-image,
    .category-card-medium .category-image,
    .category-card-small .category-image {
        aspect-ratio: 16 / 9;
    }
    .category-card-large .category-info,
    .category-card-medium .category-info {
        padding: var(--space-md);
    }
    .category-card-large .category-name,
    .category-card-medium .category-name {
        font-size: 1.125rem;
    }
}


/* ==========================================================================
   BREADCRUMB TOUCH TARGETS — mobile (≤768px)
   Breadcrumb <a> links are 0.8125rem / 13px with no vertical padding.
   On touch screens the tap zone is tiny. Adding padding-block enlarges
   the tappable area without changing visible layout (inline links absorb
   block padding into their line-box). Font-size bumped to 0.875rem (14px)
   for slightly easier reading on small screens.
   ========================================================================== */
@media (max-width: 768px) {
    .breadcrumbs a {
        display: inline-flex;
        align-items: center;
        padding-block: 0.375rem; /* ~6px top+bottom → ~26px tap height; acceptable for inline nav */
        font-size: 0.875rem;     /* 14px vs 13px desktop; keeps crumb readable on small screens */
    }

    /* The current page span gets the same size so visual rhythm is consistent */
    .breadcrumb-current {
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   PRINT STYLESHEET — single-product page
   Goal: hide all chrome; show primary image, title, price, specs, description.
   ========================================================================== */

@media print {
    /* ── Hide navigation & site chrome ── */
    .site-header,
    .site-nav,
    .site-footer,
    nav[aria-label="Brødkrumme"],
    .breadcrumbs { display: none !important; }

    /* ── Hide interactive & decorative gallery elements ── */
    .gallery-grid,
    .gallery-strip,
    .gallery-nav,
    .gallery-counter,
    .gallery-kb-hint { display: none !important; }

    /* ── Hide purchase/action UI ── */
    .product-secondary-actions,
    .product-share-btn,
    .wishlist-btn,
    .sticky-product-cta { display: none !important; }

    /* ── Hide trust strip, delivery accordion, sold-out nudge, inquiry form ── */
    .product-trust-strip,
    .product-delivery,
    .product-soldout-nudge,
    .product-inquiry { display: none !important; }

    /* ── Hide related products and back navigation ── */
    .related-products,
    .product-back { display: none !important; }

    /* ── Hide filter UI (shop archive) ── */
    .shop-filters,
    .active-filters,
    .shop-toolbar { display: none !important; }

    /* ── Layout: single-column, full width ── */
    .product-single .container {
        max-width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .product-layout {
        display: block !important;
    }

    /* ── Primary image: full width, capped height ── */
    .gallery-primary-wrap {
        display: block !important;
        width: 100% !important;
        max-height: 55vh !important;
        overflow: hidden !important;
        margin-bottom: 1.5rem !important;
    }

    .gallery-primary-img {
        width: 100% !important;
        height: auto !important;
        max-height: 55vh !important;
        object-fit: contain !important;
    }

    /* ── Typography: black on white, no shadows or animations ── */
    body,
    .product-title,
    .product-lead,
    .spec-label,
    .spec-value,
    .product-price {
        color: #000 !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Specs table: clean rows ── */
    .product-specs {
        border-top: 1px solid #ccc !important;
        margin-top: 1rem !important;
    }

    .spec-item {
        display: flex !important;
        gap: 1rem !important;
        padding: 0.4rem 0 !important;
        border-bottom: 1px solid #e5e5e5 !important;
        page-break-inside: avoid !important;
    }

    .spec-label {
        min-width: 7rem !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
    }

    /* ── Price: slightly larger ── */
    .product-price {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin: 0.75rem 0 !important;
    }

    /* ── Add-to-cart WC button: hide ── */
    .woocommerce-variation-add-to-cart,
    .single_add_to_cart_button,
    .product-actions { display: none !important; }

    /* ── Page-break hints ── */
    .product-details {
        page-break-before: avoid !important;
    }

    .product-lead {
        page-break-inside: avoid !important;
    }
}