/**
 * Deposito Trujillo - Widget Product Carousel Fixes
 * Improves the Magento PageBuilder product carousel widget styling on
 * desktop and mobile. Targets the `.widget-product-carousel` selector
 * emitted by `Magento_PageBuilder` content type "products" with the
 * `appearance=carousel` data attribute.
 *
 * Issues fixed:
 *   1. Arrow buttons rendered as text "Previous"/"Next" — replaced with
 *      chevron pseudo-element icons and proper button appearance.
 *   2. "Añadir al carrito" button looked like plain red text — now a
 *      proper primary button with background, border, hover state.
 *   3. Product titles had no max-height — long titles pushed cards to
 *      very different heights. Now clamped to 3 lines on desktop,
 *      2 lines on mobile.
 *   4. Card heights were inconsistent — equal-height flex layout so
 *      price + Add to cart align across all visible slides.
 *   5. Image heights were inconsistent — fixed aspect ratio with
 *      centered cover, no layout shift.
 *   6. Old price ("Precio Regular") had no `was` label visual — clearer
 *      strikethrough with reduced size and gray color.
 *   7. Slick track could overflow on narrow viewports — overflow:hidden
 *      on slick-list and a soft cap on track width.
 *   8. PageBuilder column constraint could leave the carousel stranded
 *      off-canvas on mobile — parent column no longer forces horizontal
 *      page overflow.
 *   9. Compare link was rendered as a tiny plain link with no affordance
 *      — moved to a small icon row under the Add to cart button.
 *  10. "Producto Nuevo" / "Oferta" style badges (if present) — left
 *      untouched, only target the carousel product card layout.
 */

/* =========================================================================
   1. ARROW BUTTONS — chevron icons, no "Previous"/"Next" text labels
   ========================================================================= */

ol.widget-product-carousel {
    position: relative;
}

ol.widget-product-carousel .slick-arrow {
    /* Hide the literal "Previous" / "Next" text node */
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;

    /* Reset defaults to a clean button look */
    width: 44px;
    height: 44px;
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 5;
    cursor: pointer;
    transition: background-color 160ms ease, box-shadow 160ms ease,
        transform 160ms ease, opacity 160ms ease;
    opacity: 1;
}

ol.widget-product-carousel .slick-arrow:hover,
ol.widget-product-carousel .slick-arrow:focus {
    background: #f7f7f7;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    outline: none;
}

ol.widget-product-carousel .slick-arrow.slick-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Athlete2 paints a full-bleed brand-red layer on ALL button::after
   (hover/primary effect). Slick arrows are plain <button>s, so that layer
   shows as solid red circles and hides the chevron. Kill it here. */
ol.widget-product-carousel .slick-arrow::after {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    transform: none !important;
}

/* Chevron via pseudo-element (Olegnax theme already uses ::before with
   icon font for these arrows — we override color/size only) */
ol.widget-product-carousel .slick-prev::before,
ol.widget-product-carousel .slick-next::before {
    color: #e10a16;
    font-size: 18px;
    line-height: 1;
    opacity: 1;
    text-indent: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
}

/* Position: tuck arrows just outside the slick-list (vertically centered
   to the image area, not the full card) */
ol.widget-product-carousel .slick-prev {
	left: 4px;
	top: 32%;
	transform: translateY(-50%);
}
ol.widget-product-carousel .slick-next {
	right: 4px;
	top: 32%;
	transform: translateY(-50%);
}
ol.widget-product-carousel .slick-prev:hover,
ol.widget-product-carousel .slick-prev:focus {
    transform: translateY(-50%) translateX(-1px);
}
ol.widget-product-carousel .slick-next:hover,
ol.widget-product-carousel .slick-next:focus {
    transform: translateY(-50%) translateX(1px);
}

/* =========================================================================
   2. SLIDE + CARD LAYOUT — equal height, consistent spacing
   ========================================================================= */

ol.widget-product-carousel .slick-slide {
    display: flex !important;
    height: auto;
    padding: 0 6px;
    box-sizing: border-box;
}

ol.widget-product-carousel .slick-slide > div {
    width: 100%;
    display: flex;
}

ol.widget-product-carousel .product-item {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
    transition: box-shadow 200ms ease, transform 200ms ease;
    margin: 0;
}

ol.widget-product-carousel .product-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

ol.widget-product-carousel .product-item-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: 0;
}

/* =========================================================================
   3. PRODUCT IMAGE — fixed aspect ratio, centered
   ========================================================================= */

ol.widget-product-carousel .product-item-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #fafafa;
}

ol.widget-product-carousel .product-image-container,
ol.widget-product-carousel .product-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    position: relative;
}

ol.widget-product-carousel .product-image-photo {
    position: relative !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* =========================================================================
   4. PRODUCT DETAILS — flex column so price + button align
   ========================================================================= */

ol.widget-product-carousel .product-item-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 12px;
    text-align: center;
}

ol.widget-product-carousel .product-item-name {
    margin: 0 0 8px;
    min-height: 0;
    line-height: 1.35;
    /* Title clamp — max 3 lines, ellipsis after */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 400;
}

ol.widget-product-carousel .product-item-link {
    color: #333;
    text-decoration: none;
    display: inline;
    font-size: 14px;
    line-height: 1.35;
}

ol.widget-product-carousel .product-item-link:hover {
    color: #e10a16;
}

/* =========================================================================
   5. PRICE BOX — clean, readable
   ========================================================================= */

ol.widget-product-carousel .price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 0 10px;
    min-height: 48px;
    justify-content: center;
}

ol.widget-product-carousel .special-price {
    display: block;
    line-height: 1.2;
}

ol.widget-product-carousel .special-price .price {
    color: #e10a16;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

ol.widget-product-carousel .old-price {
    display: block;
    line-height: 1.2;
}

ol.widget-product-carousel .old-price .price {
    color: #999;
    font-size: 13px;
    font-weight: 500;
    text-decoration: line-through;
    line-height: 1.2;
}

ol.widget-product-carousel .price-label {
    /* Visually hide the "Precio Especial" / "Precio Regular" text labels
       on this compact carousel; the price is enough */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   6. ADD TO CART — proper button look
   ========================================================================= */

ol.widget-product-carousel .product-item-inner {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

ol.widget-product-carousel .product-item-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

ol.widget-product-carousel button.tocart.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    background: #e10a16;
    color: #ffffff;
    border: 1px solid #e10a16;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease,
        color 160ms ease, transform 120ms ease;
    box-shadow: none;
}

ol.widget-product-carousel button.tocart.primary:hover,
ol.widget-product-carousel button.tocart.primary:focus {
    background: #b8080f;
    border-color: #b8080f;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

ol.widget-product-carousel button.tocart.primary:active {
    transform: translateY(0);
}

ol.widget-product-carousel button.tocart.primary > span {
    color: inherit;
    display: inline-block;
}

/* Compare link — small, subdued, under the main CTA */
ol.widget-product-carousel .actions-secondary {
    display: flex;
    justify-content: center;
}

ol.widget-product-carousel .action.tocompare {
    font-size: 12px;
    color: #777;
    text-decoration: none;
    padding: 4px 8px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    line-height: 1.2;
}

ol.widget-product-carousel .action.tocompare:hover,
ol.widget-product-carousel .action.tocompare:focus {
    color: #e10a16;
    text-decoration: underline;
    outline: none;
}

ol.widget-product-carousel .action.tocompare > span {
    display: inline;
    color: inherit;
}

/* =========================================================================
   7. SLICK TRACK + LIST — prevent horizontal overflow
   ========================================================================= */

ol.widget-product-carousel .slick-list {
    overflow: hidden;
    margin: 0;
    padding: 4px 0 12px;
}

ol.widget-product-carousel .slick-list.draggable {
    cursor: grab;
}
ol.widget-product-carousel .slick-list.draggable:active {
    cursor: grabbing;
}

ol.widget-product-carousel .slick-track {
    display: flex;
    align-items: stretch;
    /* Override inline 1326px width so the slider scales with the
       parent column on every viewport */
    width: 100% !important;
    transform: none !important;
}

/* Slick sets width inline per slide — leave that alone, but force
   each slide to share width equally when slidesToShow > 1 */
ol.widget-product-carousel .slick-slide {
    float: none;
    flex: 0 0 auto;
}

/* =========================================================================
   8. PAGEBUILDER COLUMN OVERFLOW — don't push the whole page horizontally
   ========================================================================= */

.pagebuilder-column-group .widget-product-carousel,
.row-full-width-inner .widget-product-carousel {
    /* PageBuilder may set a fixed inline width on the column; if it
       forces the slider off-screen on mobile, clip the overflow and
       let the column shrink. */
    max-width: 100%;
    min-width: 0;
}

.pagebuilder-column-line .widget-product-carousel {
    /* Same idea for the line wrapper */
    max-width: 100%;
    min-width: 0;
}

/* =========================================================================
   9. DOTS — only show when the admin enabled them, and style them
   ========================================================================= */

ol.widget-product-carousel .slick-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    position: static;
    width: auto;
    text-align: center;
    line-height: 1;
}

ol.widget-product-carousel .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
    display: inline-flex;
}

ol.widget-product-carousel .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    background: rgba(0, 0, 0, 0.18);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    transition: background-color 160ms ease, transform 160ms ease;
}

ol.widget-product-carousel .slick-dots li.slick-active button,
ol.widget-product-carousel .slick-dots li button:hover,
ol.widget-product-carousel .slick-dots li button:focus {
    background: #e10a16;
    transform: scale(1.15);
    outline: none;
}

/* =========================================================================
   10. MOBILE TWEAKS (≤767px) — single-column feel, compact, no overflow
   ========================================================================= */

@media (max-width: 767px) {
    /* Tighter card padding on small screens */
    ol.widget-product-carousel .product-item {
        padding: 10px;
        border-radius: 6px;
    }

    /* 2-line title clamp on mobile (shorter than desktop) */
    ol.widget-product-carousel .product-item-name {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 13px;
        min-height: 36px;
    }

    /* Smaller CTA on mobile but still ≥44px touch target */
    ol.widget-product-carousel button.tocart.primary {
        min-height: 44px;
        font-size: 13px;
        padding: 10px 12px;
    }

    /* Compare link — 44px touch target */
    ol.widget-product-carousel .action.tocompare {
        min-height: 44px;
        padding: 10px 8px;
    }

    /* Dots — bigger touch area */
    ol.widget-product-carousel .slick-dots li button {
        width: 12px;
        height: 12px;
    }

    /* Arrows — position inside on mobile so they don't get cut off
       by the column edge */
    ol.widget-product-carousel .slick-prev {
        left: 4px;
    }
    ol.widget-product-carousel .slick-next {
        right: 4px;
    }

    /* Slightly smaller image area on mobile (single-column flow) */
    ol.widget-product-carousel .product-item-photo {
        aspect-ratio: 1 / 1;
    }
}

/* =========================================================================
   11. SMALL MOBILE (≤480px) — even more compact
   ========================================================================= */

@media (max-width: 480px) {
    ol.widget-product-carousel .slick-list {
        padding: 4px 0 8px;
    }

    /* On the smallest viewports the arrow buttons can collide with the
       product card — keep them slightly smaller and inside the column */
    ol.widget-product-carousel .slick-arrow {
        width: 36px;
        height: 36px;
    }
    ol.widget-product-carousel .slick-prev::before,
    ol.widget-product-carousel .slick-next::before {
        font-size: 16px;
    }
}

/* =========================================================================
   12. DESKTOP POLISH (≥1024px) — give the slider room to breathe
   ========================================================================= */

@media (min-width: 1024px) {
    /* Slightly more generous card padding and title space on desktop */
    ol.widget-product-carousel .product-item {
        padding: 14px;
    }

    ol.widget-product-carousel .product-item-name {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: 14px;
        min-height: 57px; /* 3 lines × 19px line-height */
    }

    ol.widget-product-carousel .special-price .price {
        font-size: 17px;
    }
}

/* =========================================================================
   13. PAGEBUILDER CONTAINER — keep the column from forcing horizontal
       overflow on the whole page
   ========================================================================= */

.pagebuilder-column-line .widget-product-carousel,
.pagebuilder-column-line .slick-list,
.pagebuilder-column-line .slick-track {
    max-width: 100%;
}

.pagebuilder-column-line {
    /* If the PageBuilder column was sized to a fixed width that
       exceeds the viewport, prevent it from creating horizontal
       scroll on the document */
    min-width: 0;
}

.row-full-width-inner .pagebuilder-column-line {
    min-width: 0;
}

/* =========================================================================
   14. PAGEBUILDER COLUMN OVERRIDE — admin sets the column to 680/1400px.
       That forces horizontal page scroll and confuses the layout
       viewport (media queries stop matching the visual width). Cap
       every PageBuilder wrapper to its container and clip the page's
       horizontal overflow so the layout viewport matches the device.
   ========================================================================= */

html,
body {
    overflow-x: hidden !important;
}

.pagebuilder-column,
.pagebuilder-column-line,
.row-full-width-inner,
.pagebuilder-column-group {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 1 auto !important;
    box-sizing: border-box !important;
}

ol.widget-product-carousel,
ol.widget-product-carousel .slick-list,
ol.widget-product-carousel .slick-track {
    max-width: 100% !important;
}