/*
 * PCC overrides on top of the prebuilt Hyvä styles.css.
 * Plain (unlayered) CSS, so it wins over Tailwind's @layer rules without a Tailwind rebuild.
 */

/* Product tiles (category grid + every product slider: homepage, related, up-sell, cross-sell): flat, edge-to-edge */
:is(.products-grid, .snap-slider) .product-item.card {
    --pcc-tile-bg: #fff;
    --pcc-tile-hover-bg: #f7f4ef;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--pcc-tile-bg);
    box-shadow: none;
}

:is(.products-grid, .snap-slider) .product-item.card:hover,
:is(.products-grid, .snap-slider) .product-item.card:focus-within {
    background-color: var(--pcc-tile-hover-bg);
    box-shadow: none;
}

:is(.products-grid, .snap-slider) .product-info {
    padding: 0 1rem 1rem;
}

:is(.products-grid, .snap-slider) .product-item-photo {
    width: 100%;
    margin: 0 0 0.75rem;
}

:is(.products-grid, .snap-slider) .product-item-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Name, stars and description left aligned */
:is(.products-grid, .snap-slider) .product-info > .text-center {
    text-align: left;
    justify-content: flex-start;
}

:is(.products-grid, .snap-slider) .product-info > div:has(> .rating-summary) {
    margin-inline: 0;
}

/*
 * Header: logo centred, icons right, main menu on its own row underneath.
 * Row 1: [mobile menu button | logo | icons]   Row 2: desktop menu (lg+ only; Hyvä hides it below lg)
 */
#header > .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "left logo right"
        "nav  nav  nav";
    align-items: center;
}

#header > .container > div:first-of-type {
    grid-area: logo;
    justify-self: center;
    width: auto;
    padding: 0;
}

#header > .container > [x-data="initMobileMenu"] {
    grid-area: left;
    justify-self: start;
}

#header > .container > .navigation {
    grid-area: nav;
    justify-self: center;
    margin-top: 0.5rem;
}

#header > .container > div:last-of-type {
    grid-area: right;
    justify-self: end;
    margin-right: 0;
}

/* Out of stock: Hyvä renders unsaleable tiles as <div> (saleable ones are <form>), so grey their image */
:is(.products-grid, .snap-slider) div.product-item .product-item-photo img {
    filter: grayscale(1);
}

/* Hide the stars row when a product has no reviews (no filled or part-filled star rendered) */
:is(.products-grid, .snap-slider) .product-info > div:has(> .rating-summary):not(:has(.fill-current, [style*="partialFill"])) {
    display: none;
}

/* Breadcrumb bar: no background/shadow (Hyvä default bg-surface + shadow-sm), and no gap
   between it and the page content below (page-main has 2rem margin-block by default) */
.breadcrumbs {
    background-color: transparent;
    box-shadow: none;
}

.breadcrumbs + .page-main {
    margin-block-start: 0;
}

/* Product page gallery: crop main images to the square frame (Hyvä uses object-scale-down).
   Thumbnails already use object-cover. The lightbox shows the full uncropped original. */
#gallery .snap-start > button > img {
    object-fit: cover;
}

/* Product page: full description sits at the end of the right-hand info card */
.pcc-product-description {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-300, #d1d5db);
}

/*
 * Product page gallery from md (two-column layout) up: every image stacked at the same
 * square size, scrolled with the page. No thumbnails or arrows. Below md it stays
 * Hyvä's swipe carousel.
 */
@media (min-width: 48rem) {
    #gallery > .snap-pager,
    #gallery > .relative > div:has(> [data-prev]) {
        display: none;
    }

    #gallery > .relative {
        width: 100%;
    }

    #gallery-main {
        flex-direction: column;
        gap: 1rem;
        overflow: visible;
        scroll-snap-type: none;
        aspect-ratio: auto;
    }

    /* Right-hand info card stays in view while the stacked images scroll past */
    #gallery ~ .card {
        position: sticky;
        top: 1rem;
        align-self: start;
    }
}

/* Product page below md: tighter side margins (Hyvä: 1.5rem page gutter + 1.5rem card padding) */
@media (max-width: 47.999rem) {
    .catalog-product-view .columns {
        padding-inline: 1rem;
    }

    /* Gallery runs edge to edge: pull it out over the page gutter above.
       Relative positioning turns it into the overlay context for the pager below. */
    .catalog-product-view #gallery {
        margin-inline: -1rem;
        position: relative;
    }

    .catalog-product-view .column.main .card {
        padding-inline: 1rem;
    }

    /* Product title beneath the image: hide the accessible h1 that normally sits
       above the gallery, and show Hyvä's decorative duplicate (aria-hidden, normally
       "hidden md:block" for desktop only) at the top of the info card instead. */
    .catalog-product-view h1.page-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .catalog-product-view .product-info-main > .card > .hidden.md\:block {
        display: block;
    }

    /* Remove the prev/next arrows; swipe is enough on mobile */
    .catalog-product-view #gallery [data-prev],
    .catalog-product-view #gallery [data-next] {
        display: none;
    }

    /* Current-image pager: overlay it inside the image, bottom-centred, instead of
       sitting in normal flow beneath it */
    .catalog-product-view #gallery > .snap-pager {
        position: absolute;
        inset-inline: 0;
        bottom: 0.5rem;
        min-block-size: 0;
        padding-block: 0;
        pointer-events: none;
    }

    .catalog-product-view #gallery > .snap-pager > [data-pager] {
        pointer-events: auto;
        background-color: rgb(0 0 0 / 0.3);
        border-radius: 9999px;
        padding-inline: 0.5rem;
        padding-block: 0.25rem;
    }

    /* Pager dot: white for the current image, not the theme's blue primary colour */
    .catalog-product-view #gallery .snap-marker[aria-current="true"] {
        border-color: #fff;
        background-color: #fff;
    }
}