/* Hide search icon in header on mobile only */
@media (max-width: 767px) {
    .js-search-utility {
        display: none !important;
    }

    /* Prevent horizontal scroll on PDP mobile */
    #single-product {
        overflow-x: hidden !important;
    }

    /* Ensure body doesn't overflow horizontally */
    body {
        overflow-x: hidden;
    }
}

/*============================================================================
  Delivery Badge - Shows Entrega Rapida/Tardia based on product tags
==============================================================================*/

/* Badge container - wraps badge and info icon */
.delivery-badge-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.delivery-badge {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
    transition: all 0.2s ease;
}

/* Fast delivery - green tones */
.delivery-badge.delivery-fast {
    background-color: transparent;
    color: #333;
    border: 1px solid #155724;
}

/* Slow delivery - yellow/amber tones */
.delivery-badge.delivery-slow {
    background-color: transparent;
    color: #333;
    border: 1px solid #856404;
}


/* Info icon - circle with "i" */
.delivery-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #6c757d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.delivery-info-icon:hover {
    background-color: #5a6268;
}

/* Tooltip on info icon using data-tooltip attribute */
.delivery-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    font-style: normal;
    white-space: normal;
    width: 220px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Tooltip arrow on info icon */
.delivery-info-icon::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    margin-top: -4px;
}

/* Show tooltip on hover of info icon */
.delivery-info-icon:hover::after,
.delivery-info-icon:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Mobile - Position tooltip to the left to prevent overflow */
@media (max-width: 767px) {
    .delivery-info-icon::after {
        top: 50%;
        left: auto;
        right: 100%;
        transform: translateY(-50%);
        margin-top: 0;
        margin-right: 8px;
    }

    .delivery-info-icon::before {
        top: 50%;
        left: auto;
        right: 100%;
        transform: translateY(-50%);
        margin-top: 0;
        margin-right: -4px;
        border: 6px solid transparent;
        border-left-color: #333;
        border-bottom-color: transparent;
    }
}

/*============================================================================
  Cart Delivery Badges - Badges shown on cart items
==============================================================================*/

/* Cart item delivery badges */
.cart-delivery-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 4px;
}

.cart-delivery-fast {
    background-color: transparent;
    color: #333;
    border: 1px solid #155724;
}

.cart-delivery-slow {
    background-color: transparent;
    color: #333;
    border: 1px solid #856404;
}

/*============================================================================
  Cart Delivery Notice - Summary notice before cart total
==============================================================================*/

.cart-delivery-notice {
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.cart-delivery-notice svg.cart-delivery-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    vertical-align: middle;
}

.cart-delivery-notice>div {
    display: flex;
    align-items: flex-start;
}

.cart-delivery-notice span {
    flex: 1;
}

/* Mixed delivery notice - amber/warning */
.cart-delivery-mixed {
    background-color: transparent;
    border: 1px solid #856404;
    color: #333;
    border-radius: 6px;
    padding: 12px 15px;
}

.cart-delivery-mixed svg {
    stroke: #856404;
}

/* Slow delivery notice - amber */
.cart-delivery-slow-notice {
    background-color: transparent;
    border: 1px solid #856404;
    color: #333;
    border-radius: 6px;
    padding: 12px 15px;
}

.cart-delivery-slow-notice svg {
    stroke: #856404;
}

/* Fast delivery notice - green/success */
.cart-delivery-fast-notice {
    background-color: transparent;
    border: 1px solid #155724;
    color: #333;
    border-radius: 6px;
    padding: 12px 15px;
}

.cart-delivery-fast-notice svg {
    stroke: #155724;
}

/* Main Product Section - Desktop Styles (>980px) */

@media (min-width: 981px) {

    /* Make the row stretch both columns to same height */
    .section-main-product-home .row.d-none.d-md-flex {
        align-items: stretch;
    }

    /* Form column - flex container to push buttons to bottom */
    .section-main-product-home .row.d-none.d-md-flex>.col-md-5 {
        display: flex;
        flex-direction: column;
    }

    /* Unwrap the product form container */
    .section-main-product-home .js-product-form-wrapper {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    /* Push the Form (Buttons) to the VERY bottom */
    .section-main-product-home #product_form {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        width: 100%;
    }

    /* Image column - center content vertically */
    .section-main-product-home .row.d-none.d-md-flex>.col-md-7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Hide quantity selector in main product section */
.section-main-product-home .js-product-quantity-container,
.section-main-product-home .product-quantity,
.section-main-product-home .col-4.js-product-quantity-container {
    display: none !important;
}

/* Desktop fixes (>980px) */
@media (min-width: 981px) {

    /* Add left padding to form column */
    .section-main-product-home .row.d-none.d-md-flex>.col-md-5 {
        padding-left: 30px !important;
    }

    /* Reset all padding-left to 0 for consistent alignment */
    .section-main-product-home .col-md-5 .pl-2,
    .section-main-product-home .col-md-5 .pl-3,
    .section-main-product-home .col-md-5 .px-2,
    .section-main-product-home .col-md-5 .px-3 {
        padding-left: 0 !important;
    }

    /* Remove extra left margin/padding from variants */
    .section-main-product-home .js-product-variants-group {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Remove left padding from variants container row */
    .section-main-product-home .js-product-variants {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Fix the col-8 to be full width since quantity is hidden */
    .section-main-product-home .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
    }

    /* Reset form row padding */
    .section-main-product-home #product_form .row {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Align font-small blocks (categories, tags) */
    .section-main-product-home .font-small {
        padding-left: 0 !important;
    }

    /* === Make image fill the container using fixed height === */

    /* Remove padding from image column so image fills container */
    .section-main-product-home .col-md-7 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Product slide container - use fixed height instead of padding */
    .section-main-product-home .col-md-7 .product-slide-small {
        height: 500px;
        padding-bottom: 0 !important;
    }

    .section-main-product-home .col-md-7 .js-product-slide-link {
        padding-bottom: 0 !important;
        height: 100%;
    }

    /* Image fills container with cover */
    .section-main-product-home .col-md-7 .product-slider-image {
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* Main Product Label (Safe Implementation) */
.section-main-product-home .main-product-label {
    position: absolute;
    top: -30px;
    left: 0;
    z-index: 10;
    font-family: "Nanum Myeongjo", serif;
    font-size: 1rem;
    font-weight: 400;
    color: #333;
    pointer-events: none;
}

@media (max-width: 767px) {
    .section-main-product-home .main-product-label {
        top: -25px;
        left: 15px;
    }
}

/*============================================================================
  Main Product Section - Mobile/Tablet Layout Styles
  The mobile layout is now handled by separate HTML in the template
  Extended to apply from 0 to 980px
==============================================================================*/

/* Override Bootstrap visibility for custom breakpoint at 980px */
@media (min-width: 768px) and (max-width: 980px) {

    /* Hide desktop layout, show mobile layout between 768px and 980px */
    .section-main-product-home .row.d-none.d-md-flex {
        display: none !important;
    }

    .section-main-product-home .d-md-none {
        display: block !important;
    }

    /* Image container - full width, remove padding */
    .section-main-product-home .main-product-image-container-mobile {
        width: 100%;
    }

    .section-main-product-home .main-product-image-container-mobile .col.px-3 {
        padding: 0 !important;
    }

    /* Make image fill the container width */
    .section-main-product-home .main-product-image-container-mobile .product-slider-image {
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Adjust navigation buttons for tablet - inside image bounds */
    .section-main-product-home .main-product-nav-prev {
        left: 10px;
    }

    .section-main-product-home .main-product-nav-next {
        right: 10px;
    }

    /* Adjust label position - top right of image */
    .section-main-product-home .main-product-label-mobile-overlay {
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 980px) {

    /* Mobile price styling */
    .section-main-product-home .price-container-mobile #price_display_mobile {
        font-size: 2rem;
        font-weight: 400;
        color: #333333;
        font-family: 'Open Sans', sans-serif;
    }

    .section-main-product-home .price-container-mobile .price-compare {
        font-size: 1rem;
        text-decoration: line-through;
        color: #999;
        margin-left: 10px;
    }

    /* Mobile title styling - Left aligned */
    .section-main-product-home .main-product-title-mobile {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        color: #333333;
        font-size: 1.25rem;
    }

    /* Variants/Sizes - Left aligned */
    .section-main-product-home .d-md-none .form-label {
        text-align: left !important;
    }

    /* Override text-center on variants container and labels */
    .section-main-product-home .d-md-none .js-product-variants-group {
        text-align: left !important;
    }

    .section-main-product-home .d-md-none .js-product-variants-group .form-label {
        text-align: left !important;
        font-size: 0.8rem;
    }

    .section-main-product-home .d-md-none .js-variation,
    .section-main-product-home .d-md-none .form-options {
        justify-content: flex-start;
    }

    /* Smaller size/variant buttons */
    .section-main-product-home .d-md-none .btn-variant {
        min-width: 28px;
        height: 28px;
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    /* Smaller description text */
    .section-main-product-home .product-description-mobile .font-small {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Smaller title */
    .section-main-product-home .main-product-title-mobile {
        font-size: 1.1rem;
    }

    /* Image container for overlay positioning */
    .section-main-product-home .main-product-image-container-mobile {
        position: relative;
    }

    /* Label overlay - Top right corner over the image */
    .section-main-product-home .main-product-label-mobile-overlay {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        font-family: "Nanum Myeongjo", serif;
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 5px 12px;
        letter-spacing: 0.5px;
    }

    /* Navigation buttons - Same style as categorias-mobile-nav */
    .section-main-product-home .main-product-nav-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
    }

    .section-main-product-home .main-product-nav-mobile:active {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-50%) scale(0.95);
    }

    .section-main-product-home .main-product-nav-mobile svg {
        width: 18px;
        height: 18px;
        stroke: #333;
    }

    .section-main-product-home .main-product-nav-prev {
        left: 8px;
    }

    .section-main-product-home .main-product-nav-next {
        right: 8px;
    }

    /* Hide the original navigation buttons (arrows at bottom) in mobile layout */
    .section-main-product-home .main-product-image-container-mobile .row.no-gutters.my-1 {
        display: none !important;
    }

    /* Adjust image container to fit image properly */
    .section-main-product-home .main-product-image-container-mobile .col.px-3 {
        padding: 0 !important;
    }

    .section-main-product-home .main-product-image-container-mobile .product-detail-slider {
        margin-bottom: 0;
    }

    /* Fix the slide container to use fixed height */
    .section-main-product-home .main-product-image-container-mobile .product-slide-small {
        height: 400px;
        padding-bottom: 0 !important;
    }

    .section-main-product-home .main-product-image-container-mobile .product-slide-small .js-product-slide-link {
        padding-bottom: 0 !important;
        height: 100%;
    }

    /* Image fills container with cover */
    .section-main-product-home .main-product-image-container-mobile .product-slider-image {
        object-fit: cover !important;
    }

    /* Remove extra row padding */
    .section-main-product-home .main-product-image-container-mobile .row {
        margin: 0 !important;
    }

    /* Swiper wrapper adjustments */
    .section-main-product-home .main-product-image-container-mobile .swiper-wrapper {
        height: 100%;
    }

    /* Ensure proper padding for the section on mobile */
    .section-main-product-home {
        padding: 20px 0;
    }
}

/* Main Product Section - Typography (Open Sans Light) */
#single-product.section-main-product-home .font-small,
#single-product.section-main-product-home .form-label,
#single-product.section-main-product-home .js-product-sku,
#single-product.section-main-product-home .text-body,
#single-product.section-main-product-home .main-product-title,
#single-product.section-main-product-home .font-small a {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 300 !important;
    color: #333333 !important;
}


/* Main Product Section - Font Size for Metadata (0.9rem) */
#single-product.section-main-product-home .font-small,
#single-product.section-main-product-home .form-label,
#single-product.section-main-product-home .js-product-sku,
#single-product.section-main-product-home .text-body,
#single-product.section-main-product-home .font-small a {
    font-size: 0.9rem !important;
}

/*============================================================================
  Product Detail Page (PDP) - Swap quantity selector and add to cart button
  Quantity selector goes to the right, Add to cart button goes to the left
==============================================================================*/

/* Quantity selector - move to right */
#single-product .js-product-quantity-container {
    order: 2;
    padding-left: 0.75rem !important;
    padding-right: 0 !important;
}

/* Add to cart button - move to left */
#single-product .js-buy-button-container {
    order: 1;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/*============================================================================
  Product Detail Page (PDP) - Price Typography
==============================================================================*/

#single-product .js-price-display {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    color: #333333 !important;
}

#single-product .product-description-inline,
#single-product .product-description-inline .user-content {
    color: #333333 !important;
}

/*============================================================================
  Product Detail Page (PDP) - Desktop Header Above Image Gallery
  Breadcrumbs and title moved to top left, above the image column
==============================================================================*/

/* Desktop header - visible only on desktop */
@media (min-width: 768px) {

    /* Show the new desktop header */
    #single-product .desktop-product-header {
        display: block;
    }

    /* Style the desktop header */
    #single-product .desktop-product-header .breadcrumbs {
        margin-bottom: 0.5rem;
    }

    #single-product .desktop-product-header .js-product-name-desktop {
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        color: #333333;
        margin-bottom: 1rem;
        font-size: 2.5rem;
    }

    /* Hide the original page-header in product-form (right column) on desktop */
    #single-product .col[data-store^="product-info"] .page-header {
        display: none !important;
    }
}

/*============================================================================
  Product Detail Page (PDP) - Mobile Specific Styles
  Text alignment and description truncation
==============================================================================*/

@media (max-width: 767px) {

    /* Show mobile-only title/breadcrumb section above image */
    #single-product .mobile-product-header {
        display: block;
    }

    /* Hide the original title and breadcrumb in product-form on mobile (duplicated above image) */
    #single-product .col[data-store^="product-info"] .page-header {
        display: none !important;
    }

    /*============================================================================
      Product Description Truncation - Mobile Only (Character-based, 280 chars)
      Uses Twig to truncate text and CSS checkbox toggle for expand/collapse
    ==============================================================================*/

    /* Hide the checkbox */
    .description-toggle-checkbox {
        display: none !important;
    }

    /* By default: show short version, hide full version */
    .product-description-short {
        display: block;
    }

    .product-description-full {
        display: none;
    }

    /* When checkbox is checked: hide short, show full */
    .description-toggle-checkbox:checked~.product-description-short {
        display: none;
    }

    .description-toggle-checkbox:checked~.product-description-full {
        display: block;
    }

    /* Toggle button/label styling */
    .product-description-toggle-label {
        display: block;
        margin-top: 8px;
        padding: 0;
        background: none;
        border: none;
        color: var(--accent-color, #333);
        cursor: pointer;
        text-decoration: none;
        font-weight: 600;
    }

    .product-description-toggle-label:hover {
        text-decoration: underline;
    }

    /* Toggle text visibility - show "Ver más" by default */
    .product-description-toggle-label .toggle-text-less {
        display: none;
    }

    .product-description-toggle-label .toggle-text-more {
        display: inline;
    }

    /* When checkbox is checked - show "Ver menos" */
    .description-toggle-checkbox:checked~.product-description-toggle-label .toggle-text-more {
        display: none;
    }

    .description-toggle-checkbox:checked~.product-description-toggle-label .toggle-text-less {
        display: inline;
    }

    /* Align all text to the left on mobile */
    #single-product .breadcrumbs,
    #single-product .page-header,
    #single-product .js-product-name,
    #single-product .js-price-container,
    #single-product .product-description-inline,
    #single-product .form-label,
    #single-product .js-product-variants,
    #single-product .js-product-payments-container {
        text-align: left !important;
    }

    /* Variant labels aligned left */
    #single-product .variant-label,
    #single-product .js-variant-label {
        text-align: left !important;
    }

    /* Override text-center on variant groups - these come from template classes */
    #single-product .js-product-variants-group,
    #single-product .js-product-variants-group.text-center,
    #single-product .js-product-variants .form-group.text-center {
        text-align: left !important;
    }

    /* Variant label inside the group */
    #single-product .js-product-variants-group .form-label,
    #single-product .js-product-variants-group .form-label.text-center {
        text-align: left !important;
    }

    /* Align button row with content padding */
    #single-product #product_form>.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove negative margins that cause misalignment */
    #single-product .js-buy-button-container {
        padding-left: 0 !important;
    }

    #single-product .js-product-quantity-container {
        padding-left: 10px !important;
    }

    /* Reduce quantity buttons (+/-) size to 30px height */
    #single-product .js-product-quantity-container .form-quantity-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    /* Reduce add to cart button height to 30px */
    #single-product .js-buy-button-container .btn-add-to-cart,
    #single-product .js-buy-button-container .btn {
        height: 32px !important;
        min-height: 30px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 30px !important;
        font-size: 0.85rem !important;
    }

    /* Reduce quantity input height to match */
    #single-product .js-product-quantity-container .js-quantity-input {
        height: 30px !important;
    }

    /* PDP Mobile Navigation Arrows - Same style as categorias-mobile-nav */
    .pdp-slider-wrapper {
        position: relative;
    }

    .pdp-mobile-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
    }

    .pdp-mobile-nav:active {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-50%) scale(0.95);
    }

    .pdp-mobile-nav svg {
        width: 18px;
        height: 18px;
        stroke: #333;
    }

    .pdp-mobile-nav-prev {
        left: 8px;
    }

    .pdp-mobile-nav-next {
        right: 8px;
    }

    /* Hide original bottom navigation arrows (we use the ones on the slider) */
    #single-product .js-swiper-product-prev:not(.pdp-mobile-nav),
    #single-product .js-swiper-product-next:not(.pdp-mobile-nav),
    #single-product .row.no-gutters.my-1.text-center.align-items-center.d-md-none {
        display: none !important;
    }

    /* Related products section - add lateral padding on mobile */
    .section-products-related .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Related products header container - override px-0 on mobile */
    .container.px-0.px-md-4.mb-4 {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/*============================================================================
  Product Detail Page (PDP) - Fixed Height Image Container
  The images use position:absolute with .img-absolute-centered
  We override padding-bottom (aspect ratio) with fixed height
==============================================================================*/

/* Align image column with product info */
#single-product .col-md-7.pb-3.pr-md-2 {
    padding-top: 1rem;
}

/* Desktop - Aspect Ratio 4:3 */
@media (min-width: 768px) {

    /* Main slider container - use aspect ratio instead of fixed height */
    #single-product:not(.section-main-product-home) .product-detail-slider {
        overflow: hidden;
    }

    /* Each slide container - aspect ratio 4:3 */
    #single-product:not(.section-main-product-home) .product-slide {
        overflow: hidden;
    }

    /* The link container - aspect ratio 4:3 (width:height = 4:3, so 3/4 = 75%) */
    #single-product:not(.section-main-product-home) .product-slide .js-product-slide-link {
        padding-bottom: 75% !important;
        /* 4:3 aspect ratio */
        height: auto !important;
        overflow: hidden;
        position: relative !important;
    }

    /* The image - fills container with object-fit */
    #single-product:not(.section-main-product-home) .product-slide .product-slider-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        max-width: none !important;
        object-fit: contain !important;
        -o-object-fit: contain !important;
        object-position: center top !important;
        /* Align image to top center */
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* Mobile - Fixed height container, image centered by width */
@media (max-width: 767px) {

    /* Container with fixed height */
    #single-product:not(.section-main-product-home) .product-detail-slider {
        height: 350px;
        overflow: hidden;
    }

    #single-product:not(.section-main-product-home) .product-slide {
        height: 350px;
        overflow: hidden;
    }

    /* Override padding-bottom and use fixed height */
    #single-product:not(.section-main-product-home) .product-slide .js-product-slide-link {
        padding-bottom: 0 !important;
        height: 350px !important;
        overflow: hidden;
        position: relative !important;
    }

    /* Image fills container with object-fit */
    #single-product:not(.section-main-product-home) .product-slide .product-slider-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        max-width: none !important;
        object-fit: contain !important;
        -o-object-fit: contain !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/*============================================================================
  PDP - Thumbnails (Miniaturas) - Fix for Chrome
  Ensures thumbnail images fill their container properly
==============================================================================*/

/* Thumbnail container - fixed size, override padding-bottom aspect ratio */
#single-product .product-thumbs-container .product-thumb {
    width: 85px !important;
    height: 85px !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

/* Thumbnail image - fill container with object-fit, override img-absolute styles */
#single-product .product-thumbs-container .product-thumb img.img-absolute,
#single-product .product-thumbs-container .product-thumb img.img-absolute-centered,
#single-product .product-thumbs-container .product-thumb img.lazyload,
#single-product .product-thumbs-container .product-thumb img.lazyloaded {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    -o-object-fit: cover !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
}

/*============================================================================
  PDP - Related Products ("Productos similares") - Uniform Card Heights
  Fixes uneven text alignment caused by different image aspect ratios
  Uses aspect ratio 8:5 (width:height) = 62.5% padding-bottom
  Based on .category-body styles that work correctly
==============================================================================*/

/* Target only the related products section on PDP */
.section-products-related .swiper-slide {
    display: flex;
    flex-direction: column;
}

/* Aspect ratio 8:5 for product images in related products */
.section-products-related .item-image .js-item-image-padding {
    padding-bottom: 62.5% !important;
    /* Width 8 : Height 5 = 5/8 = 62.5% */
    height: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

/* Force all images to be absolute and cover - Same approach as category page */
.section-products-related .item-image img,
.section-products-related .item-image img:hover,
.section-products-related .item-image .img-absolute-centered,
.section-products-related .item-image .img-absolute-centered:hover,
.section-products-related .item-image:hover img,
.section-products-related .item-image:hover .img-absolute-centered {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
}

/* Lock down the container itself to prevent it from moving */
.section-products-related .item-product .item-image,
.section-products-related .item-product:hover .item-image {
    transform: none !important;
    transition: none !important;
}

/* Ensure product info container stays consistent */
.section-products-related .item-description {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/*============================================================================
  PDP - Related Products Mobile Navigation Buttons
  Same style as category banners carousel
==============================================================================*/

.related-products-carousel-wrapper {
    position: relative;
}

/* Mobile navigation buttons - positioned over the carousel */
.related-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-80%);
    z-index: 20;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.related-mobile-nav:active {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-80%) scale(0.95);
}

.related-mobile-nav svg {
    width: 18px;
    height: 18px;
    stroke: #333;
}

.related-mobile-nav-prev {
    left: 8px;
}

.related-mobile-nav-next {
    right: 8px;
}

/* Hide on desktop (using d-md-none in HTML, but also CSS for safety) */
@media (min-width: 768px) {
    .related-mobile-nav {
        display: none !important;
    }
}

/*============================================================================
   VERTICAL FLYOUT MENU (Desktop Only)
   Converts the horizontal mega menu into a vertical dropdown with
   right-side flyouts for submenus
   
   Structure:
   - Level 1: Main nav items (PRODUCTOS, CONTACTO, etc.)
   - Level 2: Dropdown appears below - VERTICAL list
   - Level 3+: Flyout appears to the RIGHT on hover
==============================================================================*/

@media (min-width: 768px) {

    /* =========================================
       LEVEL 1 DROPDOWN CONTAINER
       The main dropdown that appears on hover
       ========================================= */

    .vertical-flyout-dropdown {
        /* Override default fixed positioning */
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: auto !important;
        min-width: 260px !important;
        max-width: 320px !important;

        /* Remove max-height and scroll - key fix! */
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;

        /* Styling */
        padding-bottom: 0px !important;
        background-color: var(--main-background, #fff) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: 6px !important;

        /* Hidden by default */
        display: none !important;
        visibility: hidden;
        opacity: 0;
        z-index: 1000 !important;
    }

    /* Show dropdown on hover */
    .nav-item-single:hover>.vertical-flyout-dropdown,
    .nav-item.item-with-subitems:hover>.vertical-flyout-dropdown {
        display: block !important;
        visibility: visible;
        opacity: 1;
    }

    /* =========================================
       LEVEL 2 VERTICAL LIST
       The list of subitems in vertical format
       ========================================= */

    .vertical-flyout-list {
        /* Reset mega menu columns */
        column-count: 1 !important;
        -webkit-column-count: 1 !important;
        -moz-column-count: 1 !important;
        column-gap: 0 !important;

        /* Vertical flex layout */
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;

        /* Allow flyout to overflow */
        overflow: visible !important;
    }

    /* =========================================
       LEVEL 2 LIST ITEMS
       Individual items in the vertical list
       ========================================= */

    .vertical-flyout-list>.nav-item,
    .vertical-flyout-list>.nav-item-desktop {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;

        /* Context for right flyout positioning */
        position: relative !important;
    }

    /* =========================================
       LEVEL 2 LINKS
       Styling for the menu item links
       ========================================= */

    .vertical-flyout-list>.nav-item>.nav-list-link,
    .vertical-flyout-list>.nav-item-desktop>.nav-list-link,
    .vertical-flyout-list>.nav-item>.nav-item-container>.nav-list-link {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        margin: 0 !important;

        /* Typography - Level 2: Nanum Myeongjo */
        font-family: 'Nanum Myeongjo', serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #333333 !important;
        text-transform: capitalize !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;

        /* Transitions */
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    /* Hover state */
    .vertical-flyout-list>.nav-item:hover>.nav-list-link,
    .vertical-flyout-list>.nav-item-desktop:hover>.nav-list-link,
    .vertical-flyout-list>.nav-item:hover>.nav-item-container>.nav-list-link {
        background-color: rgba(0, 0, 0, 0.04) !important;
        color: var(--accent-color, #000) !important;
    }

    /* =========================================
       LEVEL 3+ RIGHT FLYOUT
       Submenus that appear to the right
       ========================================= */

    .vertical-flyout-list .list-subitems {
        /* Position to the right of parent */
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;

        /* Sizing */
        min-width: 240px !important;
        max-width: 300px !important;
        max-height: none !important;

        /* Styling - same as parent dropdown */
        padding: 0 !important;
        margin: 0 !important;
        margin-left: 2px !important;
        /* Small gap between parent and flyout */
        background-color: var(--main-background, #fff) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: 6px !important;

        /* Hidden by default */
        display: none !important;
        visibility: hidden;
        opacity: 0;
        z-index: 1001 !important;

        /* Reset any column layout */
        column-count: 1 !important;
        list-style: none !important;
    }

    /* Show Level 3 flyout on Level 2 item hover */
    .vertical-flyout-list>.nav-item:hover>.list-subitems,
    .vertical-flyout-list>.nav-item-desktop:hover>.list-subitems,
    .vertical-flyout-list .item-with-subitems:hover>.list-subitems {
        display: block !important;
        visibility: visible;
        opacity: 1;
    }

    /* =========================================
       LEVEL 3+ ITEMS AND LINKS
       Styling for deeper level items
       ========================================= */

    .vertical-flyout-list .list-subitems .nav-item,
    .vertical-flyout-list .list-subitems .nav-item-desktop {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    .vertical-flyout-list .list-subitems .nav-list-link {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 18px !important;
        margin: 0 !important;

        /* Typography - Level 3: Roboto */
        font-family: 'Roboto', sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #333333 !important;
        text-transform: capitalize !important;
        white-space: nowrap !important;

        transition: background-color 0.2s ease !important;
    }

    /* Remove the dash prefix from nested items */
    .vertical-flyout-list .list-subitems .nav-list-link::before {
        content: none !important;
        display: none !important;
        margin-right: 0 !important;
    }

    /* Hover state for nested items */
    .vertical-flyout-list .list-subitems .nav-item:hover>.nav-list-link {
        background-color: rgba(0, 0, 0, 0.04) !important;
        color: var(--accent-color, #000) !important;
    }

    /* =========================================
       CHEVRON ARROWS
       Right arrow indicators for items with children
       ========================================= */

    /* Items that have subitems get a chevron */
    .vertical-flyout-list .item-with-subitems>.nav-item-container>.nav-list-link::after,
    .vertical-flyout-list .item-with-subitems>.nav-list-link::after {
        content: "" !important;
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        border-right: 1.5px solid currentColor !important;
        border-bottom: 1.5px solid currentColor !important;
        transform: rotate(-45deg) !important;
        margin-left: 12px !important;
        opacity: 0.5 !important;
        flex-shrink: 0 !important;
    }

    /* Chevron hover state */
    .vertical-flyout-list .item-with-subitems:hover>.nav-item-container>.nav-list-link::after,
    .vertical-flyout-list .item-with-subitems:hover>.nav-list-link::after {
        opacity: 1 !important;
    }

    /* =========================================
       NAV ITEM CONTAINER FIX
       Container wrapper used in some items
       ========================================= */

    .vertical-flyout-list .nav-item-container {
        display: block !important;
        width: 100% !important;
    }

    /* =========================================
       LEVEL 4+ NESTED FLYOUTS
       Deep nesting continues to the right
       ========================================= */

    .vertical-flyout-list .list-subitems .list-subitems {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        margin-left: 2px !important;
        z-index: 1002 !important;
    }

    .vertical-flyout-list .list-subitems .list-subitems .list-subitems {
        z-index: 1003 !important;
    }

    /* =========================================
       HOVER AREA EXTENSION
       Prevents menu from closing when moving mouse
       ========================================= */

    /* Extend hover area slightly for better UX */
    .vertical-flyout-dropdown::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
    }

    .vertical-flyout-list .list-subitems::before {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        bottom: 0;
        width: 10px;
    }

    /* =========================================
       ANIMATION
       Smooth fade-in effect
       ========================================= */

    .vertical-flyout-dropdown,
    .vertical-flyout-list .list-subitems {
        transition: opacity 0.15s ease, visibility 0.15s ease !important;
    }
}

/* =========================================
   MOBILE STYLES - DO NOT APPLY FLYOUT
   Ensure mobile hamburger menu is unaffected
   ========================================= */

@media (max-width: 767px) {

    /* Remove flyout classes from mobile view */
    .vertical-flyout-dropdown,
    .vertical-flyout-list {
        /* Reset to default mobile behavior */
        position: static !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .vertical-flyout-list .list-subitems {
        position: static !important;
        left: auto !important;
        top: auto !important;
        box-shadow: none !important;
        border: none !important;
        margin-left: 0 !important;
    }
}

/*============================================================================
  Banner de Categorías - Mobile Styling (Matching Featured Products exactly)
  Only affects mobile version - same styles as .section-featured-home
==============================================================================*/

@media (max-width: 767px) {

    /* Sección más compacta - same as .section-featured-home */
    .categorias-section {
        padding: 15px 15px;
    }

    /* Título más pequeño - same as .section-featured-home .section-title */
    .categorias-section-title {
        font-size: 1.3rem;
    }

    /* Cards de categoría más compactas - same as .item-product */
    .categoria-item {
        padding: 0 2px;
    }

    /* Nombre de categoría - same as .item-name */
    .categoria-name {
        font-size: 0.85rem;
        line-height: 1.3;
        margin-bottom: 4px;
        margin-top: 4px;
    }

    /* Image container - 3:2 aspect ratio (66.67%) */
    .categoria-image-container {
        margin-bottom: 4px;
        padding-top: 66.67% !important;
        /* 3:2 ratio */
    }

    /* Header de la sección - same as .d-flex.justify-content-between */
    .categorias-header {
        margin-bottom: 12px !important;
    }

    /* Contenedor - same as .container */
    .categorias-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*============================================================================
  Cart Quantity iOS Fix - Corrects misaligned number in quantity selector
  The iOS classes (cart-quantity-container-ios and form-control-ios) 
  have margin-bottom: -15px and height: 22px which misalign the input
==============================================================================*/

/* Container fix - remove restrictive height and add flex alignment */
.modal-cart .cart-item-quantity .cart-quantity-container-ios,
.modal-cart .cart-quantity-container-ios,
.cart-quantity-container-ios {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

/* Input fix - remove the negative margin and set proper alignment */
.modal-cart .cart-item-quantity .cart-quantity-container-ios .form-control-ios,
.modal-cart .cart-quantity-container-ios .form-control-ios,
.modal-cart .js-cart-quantity-input.form-control-ios,
.modal-cart .form-control.js-cart-quantity-input.form-control-ios,
.js-cart-quantity-input.form-control-ios {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
    transform: none !important;
}