/**
 * plp-product-card.css
 * Styles for the PLP product card on shop / category listings.
 * Loaded from the theme; overrides the bare card layout coming from roomvo-plp.
 */

.plp-product-card {
    list-style: none;
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 0;
    /* Column layout + full cell height so the "See in room" button can be
       pinned to the bottom — keeps buttons on one line across a row even when
       cards differ (brand / "N COLORS" / 1-2 line titles). */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plp-product-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--rv-img-radius);
    border: var(--rv-img-border-width) solid var(--rv-img-border-color);
    line-height: 0;
}

.plp-product-image-link {
    display: block;
}

/* Hover veil over the image (replaces the old zoom). Sits above the image but
   below the product labels (z-index 5) and the wishlist heart (z-index 6), and
   ignores the pointer so the image link and the heart keep working. */
.plp-product-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: var(--rv-card-hover-overlay-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.plp-product-card:hover .plp-product-image-wrap::before,
.plp-product-card:focus-within .plp-product-image-wrap::before {
    opacity: var(--rv-card-hover-overlay-opacity);
}

@media (prefers-reduced-motion: reduce) {
    .plp-product-image-wrap::before,
    .woocommerce ul.products li.product {
        transition: none;
    }
}

.plp-product-image,
.plp-product-image-link img {
    display: block;
    width: 100%;
    height: auto;
    transition: all .4s;
}

.plp-product-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    /* Round grey pill so the white heart stays readable on any product image. */
    border-radius: 50%;
    background: var(--rv-wishlist-bg, rgba(0, 0, 0, .55));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .2s ease;
}

.plp-product-wishlist:focus {
    outline: 2px solid rgba(0, 0, 0, .15);
    outline-offset: 2px;
}

.plp-product-wishlist svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Idle heart: solid white. CSS wins over the SVG presentation attributes,
   so every heart markup variant (grey/black stroke) lands on the same look. */
.plp-product-wishlist svg path {
    fill: #fff;
    stroke: #fff;
    stroke-opacity: 1;
    transition: fill .2s ease, stroke .2s ease;
}

/* Hover, keyboard focus, or saved -> accent red. */
.plp-product-wishlist:hover svg path,
.plp-product-wishlist:focus-visible svg path,
.plp-product-wishlist.active svg path {
    fill: var(--rv-accent);
    stroke: var(--rv-accent);
}

.plp-product-brand {
    margin-top: 15px;
    text-transform: uppercase;
    color: var(--rv-text-muted);
    font-family: var(--rv-card-brand-font);
    font-size: var(--rv-card-brand-size);
    font-weight: var(--rv-card-brand-weight);
    line-height: 15px;
    text-align: center;
}
.plp-product-title-link{
    margin-top: 8px
}
.plp-product-card .plp-product-title-link,
.plp-product-card .plp-product-title-link:hover,
.plp-product-card .plp-product-title-link:focus {
    display: block;
    text-decoration: none;
}
.wp-block-media-text {
    margin-top: 15px;
}
.plp-product-card .plp-product-title {
    font-style: normal;
    text-decoration: none;
    color: var(--rv-text);
    font-family: var(--rv-card-title-font);
    font-size: var(--rv-card-title-size);
    font-weight: var(--rv-card-title-weight);
    line-height: 21px;
    text-align: center;
}
.plp-product-colors {
    font-family: var(--rv-font);
    color: var(--rv-text-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 8px
}
/* Hover frame. The transparent border is always there, so showing it costs no
   reflow; width/colour come from the Customizer ("Card hover" controls). */
.woocommerce ul.products li.product {
    border: var(--rv-card-hover-border-width) solid transparent;
    padding-bottom: 15px;
    /* Same curve as the image veil, so frame and overlay come up together. */
    transition: border-color .25s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
    border-color: var(--rv-card-hover-border-color);
}
.plp-product-see-in-room {
    display: inline-block;
    /* auto top margin eats the slack in a stretched card → button sits at the
       bottom; align-self keeps it centered (text-align no longer applies to a
       flex item). */
    margin-top: auto;
    align-self: center;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--rv-btn-radius);
    background: var(--rv-btn-bg);
    color: var(--rv-btn-text);
    font-family: var(--rv-card-room-btn-font);
    font-size: var(--rv-card-room-btn-size);
    font-weight: var(--rv-card-room-btn-weight);
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease;
}

.plp-product-see-in-room:hover,
.plp-product-see-in-room:focus {
    background: var(--rv-btn-bg-hover);
    outline: none;
}

/* Guaranteed gap above the bottom-pinned button: margin-top:auto collapses to
   0 when a row has no slack (equal-height cards), making the button touch the
   text. Give whichever element sits right before the button a bottom margin.
   The button now sits inside .roomvo-container (Roomvo's required wrapper for
   its official launch-button markup — see class-plp-product-blocks.php), so
   the sibling check targets that wrapper, not the button directly; display:
   contents below keeps the wrapper itself out of the flex layout so
   margin-top:auto / align-self on the button still work as if it were a
   direct child of .plp-product-card. */
.plp-product-card > :has(+ .roomvo-container) {
    margin-bottom: 16px;
}

.plp-product-card .roomvo-container {
    display: contents;
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--rv-surface-soft);
    color: var(--rv-text);
    font-family: var(--rv-pagination-font);
    font-size: var(--rv-pagination-size);
    font-weight: var(--rv-pagination-weight);
    line-height: 17px;
    margin-right: 10px;
}
/* Active / current page — highlighted with the primary button colour so the
   whole "one config" accent (pagination + product button + checkbox + swatch)
   stays in sync. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.current {
    background: var(--rv-btn-primary);
    border-color: var(--rv-btn-primary);
    color: var(--rv-btn-primary-text);
}
.woocommerce .woocommerce-pagination ul.page-numbers, .woocommerce-page .woocommerce-pagination ul.page-numbers {
    text-align: center;
}

/* Responsive pagination: desktop variant default, mobile variant under 768px. */
.rv-pagination--mobile {
    display: none;
}
@media (max-width: 767px) {
    .rv-pagination--desktop {
        display: none;
    }
    .rv-pagination--mobile {
        display: block;
    }
}

/* -----------------------------------------------
   Load more
   The button sits above the numbered pagination and the two work together:
   "Load more" extends the list in place, the numbers jump straight to a page.
   plp-load-more.js swaps in the fetched page's pagination after each batch, so
   both controls always describe the same position in the list. The class on
   <body> only marks that the script is running.
   ----------------------------------------------- */
body.plp-has-load-more .woocommerce-pagination {
    margin-top: 10px;
}

.plp-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0 10px;
}

.plp-load-more__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    padding: 14px 32px;
    border: 0;
    border-radius: var(--rv-btn-radius);
    background: var(--rv-btn-bg);
    color: var(--rv-btn-text);
    font-family: var(--rv-card-room-btn-font);
    font-size: var(--rv-card-room-btn-size);
    font-weight: var(--rv-card-room-btn-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}

.plp-load-more__btn:hover,
.plp-load-more__btn:focus {
    background: var(--rv-btn-bg-hover);
    color: var(--rv-btn-text);
    text-decoration: none;
}

.plp-load-more.is-loading .plp-load-more__btn {
    pointer-events: none;
    opacity: .7;
}

.plp-load-more__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: plp-load-more-spin .8s linear infinite;
}

.plp-load-more.is-loading .plp-load-more__spinner {
    display: block;
}

@keyframes plp-load-more-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .plp-load-more__spinner {
        animation-duration: 2.4s;
    }
}

/* Announced to screen readers after each batch, invisible on screen. */
.plp-load-more__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.kadence-shop-top-row {
    display: none;
}
@media screen and (min-width: 1025px) {
    .grid-lg-col-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 30px;
        column-gap: 15px;
    }
}

/* -------------------------------------------------------------------------
 * BeRocket "Advanced Product Labels" — listing badge
 *
 * The labels are rendered into the card by the PLP product-item block
 * (do_action 'berocket_apl_set_label'), wrapped in a .berocket_better_labels
 * overlay. The plugin's own positioning CSS is injected inline on its
 * stylesheet handle and does not survive the LiteSpeed CSS optimisation, so the
 * label collapses into a full-width bar across the top of the image. Re-assert
 * the layout here — this file loads reliably with the card and its selectors
 * match the server-rendered label DOM, so they are kept by "remove unused CSS".
 * ------------------------------------------------------------------------- */
.plp-product-image-wrap .berocket_better_labels.berocket_better_labels_image {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
    z-index: 5;
}
.plp-product-image-wrap .berocket_better_labels_position {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
}
.plp-product-image-wrap .berocket_better_labels_position_right  { align-items: flex-end; }
.plp-product-image-wrap .berocket_better_labels_position_left   { align-items: flex-start; }
.plp-product-image-wrap .berocket_better_labels_position_center { align-items: center; }
.plp-product-image-wrap .berocket_better_labels_line   { line-height: 1; }
.plp-product-image-wrap .berocket_better_labels_inline { display: inline-flex; }
.plp-product-image-wrap .br_alabel {
    display: inline-block;
    position: relative;
    pointer-events: auto;
}
.plp-product-image-wrap .br_alabel > span {
    display: inline-block;
    max-width: 16ch;            /* cap long text; longer is truncated with … */
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 9px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
}
/* Keep the wishlist heart clickable above the (top-right) label overlay. */
.plp-product-wishlist { z-index: 6; }

@media screen and (max-width: 1024px) {
    ul.products.grid-cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 30px;
        column-gap: 15px;
    }
}

/* Tablets: three across instead of two. Applies both to the listing grid and to
   the related products on a product page — Woo renders both as
   ul.products.grid-cols, so the rule above had them at two columns alike. */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    ul.products.grid-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Kadence styles every <button> on :hover/:focus/:active with
   --global-palette-btn-bg-hover, which is white here. A mouse click leaves
   :focus on the heart, so once the pointer moved away the pill turned white
   under the white idle heart and the control vanished. Pin the pill's own
   background in every state — colour then means state (white heart = not
   saved, accent = saved) instead of "the button was clicked". */
.plp-product-wishlist:hover,
.plp-product-wishlist:focus,
.plp-product-wishlist:focus-visible,
.plp-product-wishlist:active {
    background: var(--rv-wishlist-bg, rgba(0, 0, 0, .55));
}