/*
 * RLP Products Grid
 * Self-contained stylesheet — no dependency on EAEL or any Elementor-scoped CSS.
 * All rules scoped to .rlp-products-grid so they never interfere with the real
 * EAEL widget or any other grid on the page.
 * Visual design mirrors EAEL Product Grid Preset 5 defaults.
 */

/* ── Grid container ───────────────────────────────────────────────── */

.rlp-products-grid .woocommerce ul.products.rlp-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* WooCommerce adds ::before / ::after clearfix pseudo-elements to ul.products.
   In a CSS Grid context those become grid items and create empty cells at the
   start and end of the grid. Hide them so only real li.product items are placed. */
.rlp-products-grid .woocommerce ul.products.rlp-grid::before,
.rlp-products-grid .woocommerce ul.products.rlp-grid::after {
    display: none;
}

@media (max-width: 1024px) {
    .rlp-products-grid .woocommerce ul.products.rlp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .rlp-products-grid .woocommerce ul.products.rlp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Card — reset WooCommerce/theme float defaults ────────────────── */

.rlp-products-grid .woocommerce ul.products.rlp-grid li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    clear: none !important;
    padding: 0;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    text-align: center;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* ── Product wrap ─────────────────────────────────────────────────── */

.rlp-products-grid .rlp-product-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Image wrap (clipping context for hover overlay) ─────────────── */

.rlp-products-grid .rlp-image-wrap {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 0; /* kills any residual inline whitespace gap regardless of child display */
    line-height: 0;
}

/* Square image container — 1:1 aspect ratio */
.rlp-products-grid .rlp-image-wrap > a.woocommerce-LoopProduct-link {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0; /* kills baseline gap from any inline child WC wraps the img in */
}

.rlp-products-grid .rlp-image-wrap > a.woocommerce-LoopProduct-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block !important; /* beats theme/WC rules that force img back to inline */
    vertical-align: bottom;
    margin: 0; /* WC/theme often adds margin-bottom to product images; kills the gap */
    padding: 0;
    transition: transform 0.4s ease, opacity 0.3s ease;
    backface-visibility: hidden;
}

.rlp-products-grid .rlp-product-wrap:hover .rlp-image-wrap > a.woocommerce-LoopProduct-link img {
    transform: scale(1.05);
}

/* ── Hover overlay bar — slides up from bottom of image ───────────── */

.rlp-products-grid .rlp-hover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s linear 0.4s;
}

.rlp-products-grid .rlp-product-wrap:hover .rlp-hover-overlay {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s linear 0s;
}

/* ── Action icons list ─────────────────────────────────────────────── */

/* Base state: the whole bar is red whenever it is visible (title/price hover).
 * Painted with !important directly on ul + li + anchor (not left to show
 * through via transparency) because the anchor keeps the real WooCommerce
 * `button add_to_cart_button` classes (required for AJAX add-to-cart), and
 * a sitewide Elementor Theme Style "Buttons" rule targets those same classes
 * with !important — it was winning over our transparent anchor background
 * and painting the anchor opaque, hiding the red bar underneath it. */
.rlp-products-grid .rlp-action-icons {
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 48px;
    background-color: #C8102E !important;
}

.rlp-products-grid .rlp-action-icons li {
    flex: 1;
    display: flex;
    background-color: #C8102E !important;
    transition: background-color 0.3s ease;
}

/* Only the segment directly under the pointer turns gray — one at a time,
   independent of the other — applied to both the li and its anchor since
   the anchor is the actual visible surface. */
.rlp-products-grid .rlp-action-icons li:hover {
    background-color: #333 !important;
}

.rlp-products-grid .rlp-action-icons li:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

/* "Læs mere og book" button gets more weight than the icon */
.rlp-products-grid .rlp-action-icons li.rlp-add-to-cart {
    flex: 4;
}

/* ── Action links ──────────────────────────────────────────────────── */

.rlp-products-grid .rlp-action-icons li a,
.rlp-products-grid .rlp-action-icons li a.button,
.rlp-products-grid .rlp-action-icons li a.button.add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    background-color: #C8102E !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    height: 100%;
}

/* Anchor keeps the real WooCommerce button/add_to_cart_button classes (needed
   for AJAX add-to-cart), so a global "Buttons" style elsewhere on the site can
   target the same classes with !important and paint over a transparent anchor.
   Painting red directly on the anchor (above) instead of relying on the li's
   background showing through neutralises that regardless of load order. */
.rlp-products-grid .rlp-action-icons li:hover > a,
.rlp-products-grid .rlp-action-icons li:hover > a.button,
.rlp-products-grid .rlp-action-icons li:hover > a.button.add_to_cart_button {
    background-color: #333 !important;
}

/* "Læs mere og book" text — distinct size from the icon-only link */
.rlp-products-grid .rlp-action-icons li.rlp-add-to-cart a.button.add_to_cart_button {
    font-size: 15px;
    line-height: 1.2em;
    font-weight: 700;
}

.rlp-products-grid .rlp-action-icons li a i {
    font-size: 16px;
    line-height: normal;
}

/* ── Product details ───────────────────────────────────────────────── */

.rlp-products-grid .rlp-product-details {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Title ─────────────────────────────────────────────────────────── */

.rlp-products-grid .rlp-product-title {
    width: 100%;
}

.rlp-products-grid .rlp-product-title h2 {
    font-size: 20px;
    line-height: 22px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 8px;
    padding: 0;
}

/* Prevent theme h2 decorators */
.rlp-products-grid .rlp-product-title h2::before,
.rlp-products-grid .rlp-product-title h2::after {
    content: none;
}

.rlp-products-grid .rlp-product-title h2 a {
    color: inherit;
    text-decoration: none;
}

.rlp-products-grid .rlp-product-title h2 a:hover {
    text-decoration: underline;
    color: inherit;
}

/* ── Price ─────────────────────────────────────────────────────────── */

.rlp-products-grid .rlp-product-price {
    font-size: 20px;
    line-height: 22px;
    font-weight: 500;
    color: #000000;
    margin-top: 0;
    padding-top: 0;
    width: 100%;
}

.rlp-products-grid .rlp-product-price .woocommerce-Price-amount {
    color: inherit;
}

.rlp-products-grid .rlp-product-price del {
    opacity: 0.6;
    font-size: 0.85em;
    font-weight: 400;
}

.rlp-products-grid .rlp-product-price ins {
    text-decoration: none;
}