/* ==========================================================================
   Product recommendations (PRL).
   Scoped styles for PDP (.wc-prl-location-before_tabs) and cart collaterals.
   Enqueue exclusively on product and cart pages.
   ========================================================================== */


/* ==========================================================================
   PRODUCT RECOMMENDATIONS (PRL) - PDP & CART
   ========================================================================== */

/* Hide built-in Woo related block */
section.related.products { 
    display: none; 
}

/* ==========================================================================
   PDP — LAYOUT (.wc-prl-location-before_tabs)
   ========================================================================== */
.single-product #product-list-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    clear: both;
    margin-top: 1rem;
    margin-left: 0;
    margin-right: 0;
}

.single-product #product-list-wrapper > [class^="col-"],
.single-product #product-list-wrapper > [class*=" col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none;
    flex: 0 0 24% !important;
    max-width: 24% !important;
}

.single-product #product-list-wrapper .product-card,
.single-product #product-list-wrapper .card { 
    height: 100%; 
}

.wc-prl-location-before_tabs .wc-prl-title { 
    margin-bottom: 1.25rem; 
}


/* ==========================================================================
   PDP — CONTENT & BUTTONS
   ========================================================================== */
.wc-prl-recommendations.wc-prl-location-before_tabs.wc-prl-page-product_details {
    width: 100%; 
}

.wc-prl-location-before_tabs.wc-prl-page-product_details h2.wc-prl-title {
    font-size: var(--heading-3-size);
    line-height: var(--heading-3-line-height);
}

.wc-prl-location-before_tabs.wc-prl-page-product_details a,
.wc-prl-location-before_tabs.wc-prl-page-product_details a:hover,
.wc-prl-location-before_tabs.wc-prl-page-product_details a:focus { 
    text-decoration: none; 
}

.wc-prl-location-before_tabs.wc-prl-page-product_details .card-body {
    padding: 1rem 0.5rem;
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
}

.wc-prl-location-before_tabs.wc-prl-page-product_details .woocommerce-product-details__short-description {
    min-height: 2em;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.wc-prl-location-before_tabs.wc-prl-page-product_details .card-body .price {
    margin-bottom: 1rem !important;
    display: block;
}

.wc-prl-location-before_tabs.wc-prl-page-product_details .product-card .add-to-cart-container {
    display: block;
    margin-top: auto !important;
}

.wc-prl-location-before_tabs.wc-prl-page-product_details .single_add_to_cart_button,
.wc-prl-location-before_tabs.wc-prl-page-product_details .ajax_add_to_cart,
.wc-prl-location-before_tabs.wc-prl-page-product_details .add_to_cart_button {
    background-color: var(--black);
    color: var(--white);
    border: none;
    padding: 0.75rem;
    font-weight: 600;
    border-radius: var(--2x-small);
    font-size: var(--heading-4-size);
    line-height: var(--heading-4-line-height);
    width: 100%;
}

/* ==========================================================================
   CART — CROSS-SELLS (.wc-prl-location-cart_collaterals)
   ========================================================================== */
.wc-prl-recommendations.wc-prl-location-cart_collaterals.wc-prl-page-cart_page.cross-sells.wc-prl-recommendations--no-clear {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.wc-prl-location-cart_collaterals.wc-prl-page-cart_page h2.wc-prl-title {
    font-size: var(--heading-3-size);
    line-height: var(--heading-3-line-height);
    margin-bottom: 1rem;
}



.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .card-body {
    padding: var(--3x-small);
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
}

.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .woocommerce-product-details__short-description {
    min-height: 2.4em;
    /*line-height: 1.2;*/
    margin-bottom: 0.75rem;
}

.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .woocommerce-LoopProduct-link .price {
    margin-bottom: 0.75rem !important;
    display: block;
}

.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .product-card .add-to-cart-container {
    display: block;
    margin-top: auto !important;
}

.wc-prl-location-cart_collaterals.wc-prl-page-cart_page a,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page a:hover,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page a:focus { 
    text-decoration: none;
}

.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .single_add_to_cart_button,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .ajax_add_to_cart,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .add_to_cart_button {
    background-color: var(--black);
    color: var(--white);
    border: none;
    font-weight: 600;
    width: 100%;
}

/* Add-to-cart button hover & focus states */
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .single_add_to_cart_button:hover,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .single_add_to_cart_button:focus,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .ajax_add_to_cart:hover,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .ajax_add_to_cart:focus,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .add_to_cart_button:hover,
.wc-prl-location-cart_collaterals.wc-prl-page-cart_page .add_to_cart_button:focus {
    background-color: var(--black) !important;
    color: var(--white) !important;
    border-color: var(--black) !important;
    opacity: 0.8 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (max-width: 600px) {
    /* Overrides the desktop 4-column layout to show a single 90% wide card for mobile touch swiping. */
    .single-product #product-list-wrapper > [class^="col-"],
    .single-product #product-list-wrapper > [class*=" col-"] {
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }

    /* Compresses the default PDP recommendation card padding to fit compact mobile viewports. */
    .wc-prl-location-before_tabs.wc-prl-page-product_details .card-body {
        padding: var(--3x-small);
    }

    /* Scales down default PDP button dimensions and text to small button guidelines on mobile. */
    .wc-prl-location-before_tabs.wc-prl-page-product_details .single_add_to_cart_button,
    .wc-prl-location-before_tabs.wc-prl-page-product_details .ajax_add_to_cart,
    .wc-prl-location-before_tabs.wc-prl-page-product_details .add_to_cart_button {
        padding: var(--3x-small);
        font-size: var(--heading-5-size);
        line-height: var(--heading-5-line-height);
    }

    /* Hides the second column of the default cart cross-sell row to display only one offer on mobile. */
    .wc-prl-location-cart_collaterals.wc-prl-page-cart_page .row > .col-6:nth-of-type(2) {
        display: none;
    }

    /* Expands the remaining cart cross-sell item from half-width to full width on mobile screens. */
    .wc-prl-location-cart_collaterals.wc-prl-page-cart_page .row > .col-6:first-of-type {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 951px) {
    /* Overrides the desktop static wrapper to enable horizontal touch scrolling and snap alignment on tablets. */
    .single-product #product-list-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    /* Converts the desktop 24% four-column width into a two-card 50% slide on tablet devices. */
    .single-product #product-list-wrapper > [class^="col-"],
    .single-product #product-list-wrapper > [class*=" col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 991px) {
    /* Maintains standard interior card spacing for cart cross-sells across tablet screen sizes. */
    .wc-prl-location-cart_collaterals.wc-prl-page-cart_page .card-body {
        padding: var(--x-small);
    }
}