/*
 * Osmova Base — WooCommerce catalog presentation (PF-TH-3).
 *
 * Plain hand-written CSS, `o-`-prefixed BEM, generic `--color-*` tokens
 * with literal fallbacks, native nesting, gap over margin, NO !important, no
 * Tailwind (parent asset contract). Registered + conditionally enqueued by
 * inc/woocommerce.php only when the catalog layer is active
 * (osmova_base_woo_catalog) and on a WooCommerce surface.
 *
 * Covers: shop hero band, loop container, product grid + card, the loop
 * toolbar (result-count + ordering) and pagination, and a checkout/cart form
 * baseline. A child re-skins by overriding the `--color-*` palette
 * tokens or the per-component `--o-woo-*` vars; it does not need to fork the
 * templates.
 *
 * Breakpoints follow the platform scale (sm 40rem, md 48rem, lg 64rem).
 */

:root {
    /* Per-layer component vars (re-skinnable by a child). */
    --o-woo-ink: var(--color-foreground, #111827);
    --o-woo-bg: var(--color-surface, #ffffff);
    --o-woo-muted: var(--color-secondary, #6b7280);
    --o-woo-border: var(--color-primary-100, #e5e7eb);
    --o-woo-accent: var(--color-accent, #2563eb);
    --o-woo-container: var(--osmova-base-container-width, 72rem);
    --o-woo-gutter: var(--osmova-base-gutter, 1rem);
    --o-woo-gap: 1.5rem;
    --o-woo-radius: 0.25rem;
}

/* Shop hero ---------------------------------------------------------------- */
.o-shop-hero {
    background: var(--o-woo-ink);
    color: var(--o-woo-bg);

    & .o-shop-hero__inner {
        width: min(100% - (var(--o-woo-gutter) * 2), var(--o-woo-container));
        margin-inline: auto;
        padding-block: 2.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    & .o-shop-hero__title {
        margin: 0;
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        line-height: 1.1;
    }

    & .o-shop-hero__text {
        margin: 0;
        max-width: 48ch;
        opacity: 0.85;
    }

    /* Same normalized hero renderer as the ACF block, without its block CSS. */
    & .o-hero__body {
        width: min(100% - (var(--o-woo-gutter) * 2), var(--o-woo-container));
        margin-inline: auto;
        padding-block: 2.5rem;
    }

    & .o-hero__content {
        display: grid;
        gap: 0.5rem;
    }

    & .o-hero__title {
        margin: 0;
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        line-height: 1.1;
    }

    & .o-hero__sub {
        max-width: 48ch;
        margin: 0;
        opacity: 0.85;
    }
}

/* Loop container ----------------------------------------------------------- */
.o-shop-inner {
    width: min(100% - (var(--o-woo-gutter) * 2), var(--o-woo-container));
    margin-inline: auto;
    padding-block: 2.5rem;
}

/* Loop toolbar: result count + ordering ------------------------------------ */
.o-shop-inner .woocommerce-result-count,
.o-shop-inner .woocommerce-ordering {
    margin-bottom: 1.5rem;
    color: var(--o-woo-muted);
}

.o-shop-inner .woocommerce-ordering {
    & select {
        padding: 0.4rem 0.6rem;
        border: 1px solid var(--o-woo-border);
        border-radius: var(--o-woo-radius);
        background: var(--o-woo-bg);
        color: var(--o-woo-ink);
    }
}

/* Product grid ------------------------------------------------------------- */
.o-product-grid {
    --o-woo-cols: var(--osmova-base-woo-columns, 3);
    --o-woo-cols-mobile: 1;
    --o-woo-cols-tablet: 2;

    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--o-woo-gap);
    grid-template-columns: repeat(var(--o-woo-cols-mobile), minmax(0, 1fr));

    @media (min-width: 40rem) {
        grid-template-columns: repeat(var(--o-woo-cols-tablet), minmax(0, 1fr));
    }

    @media (min-width: 64rem) {
        grid-template-columns: repeat(var(--o-woo-cols), minmax(0, 1fr));
    }
}

/* Product card ------------------------------------------------------------- */
.o-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--o-product-card-gap, 0.75rem);
    margin: 0;

    & .o-product-card__link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    & .o-product-card__media {
        position: relative;
        overflow: hidden;
        border-radius: var(--o-product-card-radius, var(--o-woo-radius));
        background: var(--o-woo-border);
        aspect-ratio: 1 / 1;
    }

    & .o-product-card__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    &.o-product-card--hover-zoom:hover .o-product-card__img,
    &.o-product-card--hover-zoom:focus-within .o-product-card__img,
    &.o-product-card--hover-swap-image:hover .o-product-card__img,
    &.o-product-card--hover-swap-image:focus-within .o-product-card__img {
        transform: scale(1.04);
    }

    & .o-product-card__badge {
        position: absolute;
        inset-block-start: 0.5rem;
        inset-inline-start: 0.5rem;
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--o-woo-bg);
        background: var(--o-woo-accent);
        border-radius: var(--o-product-card-radius, var(--o-woo-radius));
    }

    /* Hover-revealed add-to-cart affordance. */
    & .o-product-card__atc {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        color: var(--o-woo-bg);
        background: color-mix(in srgb, var(--o-woo-ink) 92%, transparent);
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    &.o-product-card--quick-add-hover:hover .o-product-card__atc,
    &.o-product-card--quick-add-hover:focus-within .o-product-card__atc,
    &.o-product-card--quick-add-hover .o-product-card__atc:focus {
        opacity: 1;
        transform: translateY(0);
    }

    &.o-product-card--quick-add-hover .o-product-card__atc.added {
        opacity: 1;
        transform: translateY(0);
    }

    & .o-product-card__title-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    & .o-product-card__name {
        margin: 0;
        font-size: 1rem;
        line-height: 1.3;
    }

    & .o-product-card__cat {
        margin: 0.15rem 0 0;
        font-size: 0.8125rem;
        color: var(--o-woo-muted);
    }

    & .o-product-card__price {
        margin: 0;
        font-weight: 600;
        color: var(--o-woo-ink);

        & del {
            color: var(--o-woo-muted);
            font-weight: 400;
        }

        & ins {
            text-decoration: none;
        }
    }
}

/* Normalized grid and card modifiers are allowlisted by the PHP resolver. */
.o-product-grid--gap-none { gap: 0; }
.o-product-grid--gap-small { gap: 0.75rem; }
.o-product-grid--gap-normal { gap: var(--o-woo-gap); }
.o-product-grid--gap-large { gap: 2rem; }

.o-product-card--gap-none { --o-product-card-gap: 0; }
.o-product-card--gap-small { --o-product-card-gap: 0.5rem; }
.o-product-card--gap-normal { --o-product-card-gap: 0.75rem; }
.o-product-card--gap-large { --o-product-card-gap: 1.25rem; }

.o-product-card--radius-none { --o-product-card-radius: 0; }
.o-product-card--radius-small { --o-product-card-radius: var(--o-woo-radius); }
.o-product-card--radius-medium { --o-product-card-radius: 0.5rem; }
.o-product-card--radius-large { --o-product-card-radius: 1rem; }

.o-product-card--border-subtle .o-product-card__media { border: 1px solid var(--o-woo-border); }
.o-product-card--border-strong .o-product-card__media { border: 2px solid var(--o-woo-ink); }
.o-product-card--align-center .o-product-card__body { text-align: center; }
.o-product-card--align-end .o-product-card__body { text-align: end; }
.o-product-card--quick-add-always .o-product-card__atc {
    opacity: 1;
    transform: none;
    border-radius: var(--o-product-card-radius, var(--o-woo-radius));
}

/* Block grid modifiers use the exact same card and grid component as archives. */
.o-product-grid--block {
    --o-woo-cols: var(--o-product-grid-columns, 3);
    --o-woo-cols-mobile: var(--o-product-grid-columns-mobile, 1);
    --o-woo-cols-tablet: var(--o-product-grid-columns-tablet, 2);
}

.o-product-grid-section {
    --o-product-grid-gap: var(--o-woo-gap);

    display: grid;
    gap: var(--o-product-grid-gap);
}

.o-product-grid-section--none { --o-product-grid-gap: 0; }
.o-product-grid-section--small { --o-product-grid-gap: 0.75rem; }
.o-product-grid-section--normal { --o-product-grid-gap: var(--o-woo-gap); }
.o-product-grid-section--large { --o-product-grid-gap: 2rem; }

.o-product-grid-section__header {
    display: grid;
    gap: 0.5rem;
}

.o-product-grid-section__title,
.o-product-grid-section__intro {
    margin: 0;
}

.o-product-grid-section__intro {
    color: var(--o-woo-muted);
}

/* Ratio cards constrain the media box. The renderer normalizes reversed
   bounds; natural media receives neither bound and keeps intrinsic height. */
.o-product-card:not(.o-product-card--ratio-natural) .o-product-card__media {
    min-height: var(--o-product-card-min-height, auto);
    max-height: var(--o-product-card-max-height, none);
}

.o-product-card--ratio-landscape .o-product-card__media {
    aspect-ratio: 4 / 3;
}

.o-product-card--ratio-portrait .o-product-card__media {
    aspect-ratio: 3 / 4;
}

.o-product-card--ratio-custom .o-product-card__media {
    aspect-ratio: var(--o-product-card-ratio, 1 / 1);
}

.o-product-card--ratio-natural .o-product-card__media {
    aspect-ratio: auto;
}

.o-product-card--ratio-natural .o-product-card__img {
    height: auto;
    object-fit: initial;
    object-position: initial;
}

.o-product-card__img {
    object-fit: var(--o-product-card-fit, cover);
    object-position: var(--o-product-card-focal, center center);
}

/* This comes after the generic image rule so natural cannot inherit a crop. */
.o-product-card--ratio-natural .o-product-card__img {
    height: auto;
    object-fit: initial;
    object-position: initial;
}

.o-product-card__img--secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.o-product-card--hover-swap-image:hover .o-product-card__img--secondary,
.o-product-card--hover-swap-image:focus-within .o-product-card__img--secondary {
    opacity: 1;
}

/* Hover carousel: gallery slides stack over the intrinsic primary image and
   crossfade; JS sets `is-active` and hydrates sources on first hover. */
.o-product-card__img--slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.o-product-card__img--slide.is-active {
    opacity: 1;
}

.o-product-card__dots {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.o-product-card__dot {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.55);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.o-product-card__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

.o-product-card--has-slides.is-cycling .o-product-card__dots {
    opacity: 1;
}

.o-product-grid-placeholder {
    padding: 1rem;
    border: 1px dashed var(--o-woo-border);
    color: var(--o-woo-muted);
}

/* No JS: the hover affordance can't be reached by keyboard reliably, so make
   the ATC always visible when JavaScript is unavailable. */
html:not(.js) .o-product-card__atc {
    opacity: 1;
    transform: none;
    border-radius: var(--o-product-card-radius, var(--o-woo-radius));
}

@media (prefers-reduced-motion: reduce) {
    .o-product-card__img,
    .o-product-card__atc,
    .o-product-card__dots {
        transition: none;
    }
}

/* Product carousel --------------------------------------------------------
 * Public API: --o-product-carousel-visible-{mobile,tablet,desktop} and
 * --o-product-carousel-gap-{mobile,tablet,desktop}. A child may set these on
 * any carousel or ancestor; renderer instance values remain lower-priority
 * fallbacks so brand and block skins do not need `!important`.
 */
.o-product-carousel {
    --o-product-carousel-visible: var(--o-product-carousel-visible-mobile, var(--o-product-carousel-instance-visible-mobile, 1));
    --o-product-carousel-gap: var(--o-product-carousel-gap-mobile, var(--o-product-carousel-instance-gap-mobile, 0px));
    --o-product-carousel-section-gap: 1rem;
    --o-product-carousel-header-gap: 0.5rem;
    --o-product-carousel-title-color: var(--o-woo-ink);
    --o-product-carousel-title-font-family: inherit;
    --o-product-carousel-title-font-size: inherit;
    --o-product-carousel-title-font-weight: inherit;
    --o-product-carousel-title-line-height: inherit;
    --o-product-carousel-title-letter-spacing: normal;
    --o-product-carousel-title-text-transform: none;
    --o-product-carousel-controls-gap: 0.5rem;
    --o-product-carousel-controls-margin-block-start: 0;
    --o-product-carousel-controls-justify: flex-end;
    --o-product-carousel-control-size: 2.75rem;
    --o-product-carousel-control-padding: 0.5rem 0.75rem;
    --o-product-carousel-control-font-size: inherit;
    --o-product-carousel-control-border: 1px solid var(--o-woo-border);
    --o-product-carousel-control-radius: var(--o-woo-radius);
    --o-product-carousel-control-color: var(--o-woo-ink);
    --o-product-carousel-control-background: var(--o-woo-bg);
    --o-product-carousel-control-disabled-opacity: 0.45;
    --o-product-carousel-focus-color: var(--o-woo-accent);
    --o-product-carousel-focus-width: 2px;
    --o-product-carousel-focus-offset: 2px;

    display: grid;
    gap: var(--o-product-carousel-section-gap);
}

.o-product-carousel__header { display: grid; gap: var(--o-product-carousel-header-gap); }
.o-product-carousel__title {
    margin: 0;
    color: var(--o-product-carousel-title-color);
    font-family: var(--o-product-carousel-title-font-family);
    font-size: var(--o-product-carousel-title-font-size);
    font-weight: var(--o-product-carousel-title-font-weight);
    line-height: var(--o-product-carousel-title-line-height);
    letter-spacing: var(--o-product-carousel-title-letter-spacing);
    text-transform: var(--o-product-carousel-title-text-transform);
}
.o-product-carousel__track {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--o-product-carousel-gap, var(--o-carousel-space-between, 0px));
    overflow-x: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}
.o-product-carousel__slide {
    flex: 0 0 calc((100% - (var(--o-product-carousel-gap) * (var(--o-product-carousel-visible) - 1))) / var(--o-product-carousel-visible));
    min-width: 0;
    scroll-snap-align: start;
}
.o-product-carousel[data-o-carousel-initialized="swiper"] .o-product-carousel__track { gap: 0; overflow: visible; scroll-behavior: auto; scroll-snap-type: none; }
.o-product-carousel[data-o-carousel-initialized="swiper"] .o-product-carousel__slide { flex: 0 0 auto; }
.o-product-carousel__controls[hidden]{display:none}
.o-product-carousel__controls { display: flex; justify-content: var(--o-product-carousel-controls-justify); gap: var(--o-product-carousel-controls-gap); margin-block-start: var(--o-product-carousel-controls-margin-block-start); }
.o-product-carousel__control {
    min-width: var(--o-product-carousel-control-size);
    min-height: var(--o-product-carousel-control-size);
    padding: var(--o-product-carousel-control-padding);
    border: var(--o-product-carousel-control-border);
    border-radius: var(--o-product-carousel-control-radius);
    color: var(--o-product-carousel-control-color);
    background: var(--o-product-carousel-control-background);
    font: inherit;
    font-size: var(--o-product-carousel-control-font-size);
}
.o-product-carousel__control:disabled { opacity: var(--o-product-carousel-control-disabled-opacity); }
.o-product-carousel__track:focus-visible,
.o-product-carousel__control:focus-visible { outline: var(--o-product-carousel-focus-width) solid var(--o-product-carousel-focus-color); outline-offset: var(--o-product-carousel-focus-offset); }

@media (min-width: 40rem) { .o-product-carousel { --o-product-carousel-visible: var(--o-product-carousel-visible-tablet, var(--o-product-carousel-instance-visible-tablet, 2)); --o-product-carousel-gap: var(--o-product-carousel-gap-tablet, var(--o-product-carousel-instance-gap-tablet, 0px)); } }
@media (min-width: 64rem) { .o-product-carousel { --o-product-carousel-visible: var(--o-product-carousel-visible-desktop, var(--o-product-carousel-instance-visible-desktop, var(--o-carousel-slides-per-view, 4))); --o-product-carousel-gap: var(--o-product-carousel-gap-desktop, var(--o-product-carousel-instance-gap-desktop, var(--o-carousel-space-between, 0px))); } }
@media (prefers-reduced-motion: reduce) { .o-product-carousel__track { scroll-behavior: auto; } }

/* Pagination --------------------------------------------------------------- */
.o-shop-inner .woocommerce-pagination {
    margin-top: 2.5rem;

    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        list-style: none;
        margin: 0;
        padding: 0;
        border: 0;
    }

    & li {
        margin: 0;
        border: 0;
    }

    & a,
    & span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0 0.5rem;
        text-decoration: none;
        color: var(--o-woo-ink);
        border: 1px solid var(--o-woo-border);
        border-radius: var(--o-woo-radius);
    }

    & .current {
        color: var(--o-woo-bg);
        background: var(--o-woo-ink);
        border-color: var(--o-woo-ink);
    }
}

/* Cart / checkout form baseline -------------------------------------------- */
.woocommerce-cart .o-shop-inner,
.woocommerce-checkout .o-shop-inner,
.woocommerce-cart .osmova-base-woocommerce,
.woocommerce-checkout .osmova-base-woocommerce {
    --o-woo-field-border: var(--o-woo-border);
}

.woocommerce form .form-row {
    & label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--o-woo-ink);
    }

    & input.input-text,
    & textarea,
    & select {
        width: 100%;
        padding: 0.6rem 0.75rem;
        font-size: 1rem;
        color: var(--o-woo-ink);
        background: var(--o-woo-bg);
        border: 1px solid var(--o-woo-field-border, var(--o-woo-border));
        border-radius: var(--o-woo-radius);
    }

    & input.input-text:focus,
    & textarea:focus,
    & select:focus {
        outline: 2px solid var(--o-woo-accent);
        outline-offset: 1px;
    }
}

.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals {
    & table {
        width: 100%;
        border-collapse: collapse;
    }

    & th,
    & td {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--o-woo-border);
        text-align: start;
    }
}

/* Shared product controls -------------------------------------------------- */
.o-product-unit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
    margin-block: 0 0.75rem;
    color: var(--o-woo-muted);
    font-size: 0.875rem;

    &[hidden] {
        display: none;
    }

    & .o-product-unit__title {
        font-weight: 600;
        color: var(--o-woo-ink);
    }
}

.woocommerce .o-buy-now {
    min-height: 2.75rem;
    margin-inline-start: 0.5rem;
}

@media (max-width: 39.999rem) {
    .woocommerce .o-buy-now {
        width: 100%;
        margin-block-start: 0.5rem;
        margin-inline-start: 0;
    }
}

/* Primary buttons inherit the accent token so the catalog + checkout share a
   single re-skin point. Scoped to Woo surfaces to avoid touching other UI. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    color: var(--o-woo-bg);
    background: var(--o-woo-ink);
    border: 0;
    border-radius: var(--o-woo-radius);
    padding: 0.7rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--o-woo-accent);
}