/* ============================================================
   Invoice flow — shared typography scale
   ------------------------------------------------------------
   Single source of truth for the type sizes of the whole invoice
   flow (list, payment step, confirmation, finish). It lives here
   because this file is loaded on EVERY width and at the end of the
   <head>, while the invoice screens are different pages that each
   carry their own <style> block: a token defined inside one of them
   is NOT visible to the others.

   Values are in px, NOT rem, on purpose: the theme sets
   `html { font-size: 0.8vw !important }`, so 1rem measured 14.6px at
   1024px wide and 18.6px from 1440px up. A .875rem notice rendered
   12.7px on tablet and 16.3px on desktop. A fixed px value looks the
   same on every screen.
   ============================================================ */
:root {
    /* 16px is the base of the whole invoice flow: it is the size iOS Safari
       needs on a focused field to NOT auto-zoom, and it makes every caption,
       cell, input and button read the same. */
    --nn-fs-note: 16px;    /* captions, secondary lines, notices */
    --nn-fs-body: 16px;    /* table cells, links, inputs */
    --nn-fs-title: 16px;   /* card/field titles, buttons */
    --nn-fs-amount: 16px;  /* amounts */
    --nn-fs-total: 16px;   /* summary totals */
    --nn-fs-lead: 16px;    /* highlighted messages (validation notices) */
    --nn-fs-heading: 26px; /* page-level titles: the only larger size (it is a
                              heading, not body text) */
}

/* ============================================================
   Tablet breakpoint fixes
   ------------------------------------------------------------
   The theme mixed three different split widths (768 / 800-801 /
   1001) which left vertical tablets (768-1000px) half desktop,
   half mobile AND, in the 801-1000px range, with a WHITE header
   strip (the brand red was only applied from 1001px up).

   The shell breakpoint is unified at 1000px: phones and small
   tablets use the MOBILE version (with its own mobile header:
   hamburger + logo + search). From 1001px up the DESKTOP shell
   loads (styles1/styles2) — this includes the large iPads in
   portrait (1024px), which get the web version adjusted to width.
   ============================================================ */

/* Desktop only (>=1001px): hide any runtime injected "mobile version"
   header/search elements so they cannot duplicate the desktop header
   or leave an empty white band. */
@media (min-width: 1001px) {
    #navbar,
    #btn-search-mobile,
    input.input-search-version-mobile,
    .zone-search-term-version-mobile {
        display: none !important;
    }
}

/* Menú lateral por encima del buscador (que usa z-index alto). Cubre
   móvil Y tablet hasta 1024px. */
@media (max-width: 1000px) {
    .menu-side-left,
    .menu-side-left-account {
        z-index: 10002 !important;
    }

    /* El buscador (JS inline le pone z-index 99999) debe quedar DEBAJO
       del menú desplegado y del dropdown del mega-menú. */
    #form-search-nav-mobile,
    #small-search-box-form,
    .zone-search-term-version-mobile {
        z-index: 9000 !important;
    }
}

/* ============================================================
   My Account > Payment methods — botón "Add new card" y checkbox
   ------------------------------------------------------------
   Dos fugas de estilos rompían esta zona en móvil y tablet:
   - El checkbox auxiliar (marcado con display:none inline) era
     FORZADO a mostrarse por mobile_version.css
     (`.pay-target { display:block !important }`) y styles1.css lo
     pintaba como un círculo azul → se veía raro.
   - El botón vivía dentro de una columna estrecha (col-md-4) y
     quedaba apretado/desalineado.
   ============================================================ */
@media (max-width: 1000px) {
    .pay-target.nn-addnewcard-helper {
        display: none !important;
    }

    .addNewCard {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 10px !important;
        border-radius: 5px !important;
    }
}

/* ============================================================
   Order details (/orderdetails/{id}) — product photos
   ------------------------------------------------------------
   Two leaks made them look wrong:
   - Phones: the mobile order list (mobile_version.css) only set
     max-width:100%, so the picture rendered at natural size
     ("too big"). The original intent is a ~100px thumbnail.
   - Tablets / <=999px: styles2.css has a homepage .img-fluid hack
     (max-width:64% + margin-top !important) that leaks into the
     order items and pushed the photos around.
   ============================================================ */

/* Phones: keep the item picture as a thumbnail beside the text. */
.list-items-order-detail-mobile .order-item-picture-mobile img,
.list-items-order-detail-mobile .cart-zone-items-mobile img {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Tablet / small screens: undo the homepage .img-fluid hack on the
   order items (64% width + margins). Desktop (>=1000px) is untouched. */
@media (max-width: 1000px) {
    .list-items-order-detail-desktop .img-fluid {
        max-width: 110px !important;
        max-height: 110px !important;
        margin-top: 0 !important;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* ============================================================
   iOS Safari — auto-zoom when focusing a text field
   ------------------------------------------------------------
   Safari on iPhone/iPad auto-zooms when the focused field has
   font-size < 16px, which enlarged the page on every tap and broke
   the layout. The only reliable way to stop it WITHOUT taking zoom
   away from the user (an accessibility problem) is for the field to
   reach 16px.

   The media query is deliberately NOT limited to mobile widths: an
   iPad in landscape reports 1366px, so a `max-width: 1000px` rule
   never fired there and the fields kept their 13px size, zooming on
   focus. The `@supports (-webkit-touch-callout)` guard already makes
   this iOS/iPadOS only, so Android and desktop keep their layout.

   checkbox/radio/file/button are excluded: only focusing a text field
   triggers the zoom, and those do not change visual size.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============================================================
   Popup "You have a branded version of this item"
   ------------------------------------------------------------
   It is generated by public.ajaxcart.js (addproducttocart_catalog
   and addproducttocart_details) when adding to the cart a product
   with brand variants. The content came with the wrapper
   id="ui-id-1" carrying inline `position: fixed` and no padding, and the
   buttons with float left/right and different widths (50% / 40%):
   the result was an off-center notice with the buttons
   misaligned with each other.

   The markup now uses .nn-branded-msg and .nn-branded-actions (the
   inline styles were removed from the JS) and the centering is
   resolved here, applying on desktop, tablet and mobile.
   ============================================================ */
.nn-branded-msg {
    padding: 20px;
    text-align: center;
}

/* Button row: centered flex, both buttons at the same width and height. */
.nn-branded-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 0 20px 4px;
}

.nn-branded-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 41px;
    padding: 0 14px;
    font-family: Raleway, sans-serif;
    font-size: 12px;
    font-style: normal;
    text-transform: none;
    border-radius: 5px !important;
    cursor: pointer;
    box-sizing: border-box;
}

/* "Continue Anyway": secondary (gray), as it was in the design. */
.nn-branded-btn--secondary {
    background-color: gray !important;
    color: #fff !important;
    border: 1px solid gray !important;
}

/* "View Your Branded Items": primary action in brand blue. */
.nn-branded-btn--primary {
    background-color: #4ab2f1 !important;
    color: #fff !important;
    border: 1px solid #4ab2f1 !important;
}

/* On very narrow screens they stack, so the text is not compressed. */
@media (max-width: 420px) {
    .nn-branded-actions {
        flex-direction: column;
    }

    .nn-branded-btn {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* ============================================================
   Freight Quote popup — it must FIT the screen and scroll
   ------------------------------------------------------------
   The form got taller as the fields grew (48px high, 16px text) and the
   dialog ended up 911px tall on a 900px screen: it started at y=135 and
   ended at 1046, so the last rows AND the "Send Request" / "Return to
   Checkout" buttons fell OUTSIDE the viewport. Its own scroll area was only
   26px (scrollHeight 935 vs clientHeight 909), not enough to reach them, so
   the popup looked broken and could not be completed.

   The dialog is now capped to the viewport with a real scroll inside, and
   it is centred vertically instead of being pinned 135px from the top.
   ============================================================ */
.ui-dialog#FreightQuotePopup {
    max-height: calc(100vh - 40px) !important;
    top: 20px !important;
    overflow: hidden !important;
}

/* The scrollable part is the dialog body, not the whole dialog: this keeps
   the title and the close button fixed while the form scrolls. */
.ui-dialog#FreightQuotePopup .ui-dialog-content,
#FreightQuotePopup .ui-dialog-content,
#FreightQuotePopupContent {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* On short screens (laptops, landscape tablets, phones) the dialog uses the
   full height available and leaves no outer margin. */
@media (max-height: 800px) {
    .ui-dialog#FreightQuotePopup {
        max-height: calc(100vh - 16px) !important;
        top: 8px !important;
    }

    .ui-dialog#FreightQuotePopup .ui-dialog-content,
    #FreightQuotePopup .ui-dialog-content,
    #FreightQuotePopupContent {
        max-height: calc(100vh - 90px) !important;
    }
}

/* The last row of the form needs breathing room above the buttons, so the
   scroll ends with the buttons fully visible instead of clipped. */
.ui-dialog .freight-wrapper table tr:last-child td {
    padding-bottom: 4px;
}

/* ============================================================
   Freight Quote popup — fields with a single look
   ------------------------------------------------------------
   The form (Topic "FreightQuote") mixes two classes:
     - the <select> carry "Freigh-select freight-field"
     - the <input type="text"> (Email / Phone) only "freight-field"
   .Freigh-select lives in styles2.css (>=1001px) with font-size 0.8rem,
   color #777 and border #ddd; .freight-field defined another border (#ccc)
   and another radius (6px) but WITHOUT text color or size. Result:
   dropdowns and text boxes did not match.

   These rules equalize color, radius, border, height and typography on
   both. They live in tablet-fix.css because it is loaded at ALL widths and
   at the end of the <head>, so they win the cascade on desktop, tablet and
   mobile (the popup opens from the checkout on all three).
   The topic IDs and names are preserved: this is presentation only.

   MEASUREMENTS: they were raised to 48px high and 16px text (before
   42px/15px), which felt small for a form filled in on a phone.
   16px is also the size at which Safari on iOS does NOT auto-zoom when
   focusing (see the auto-zoom block above), so both goals coincide. The
   radius becomes 8px to match the checkout V2 fields (.form-field) and the
   border becomes #ABABAB, the same those fields use, instead of the #ccc
   that .freight-field carried.
   ============================================================ */
#FreightQuotePopupContent .freight-wrapper input[type="text"],
#FreightQuotePopupContent .freight-wrapper select,
#FreightQuotePopup .freight-wrapper input[type="text"],
#FreightQuotePopup .freight-wrapper select,
.ui-dialog .freight-wrapper input[type="text"],
.ui-dialog .freight-wrapper select,
.ui-dialog .freight-wrapper .Freigh-select,
.ui-dialog .freight-wrapper .freight-field {
    width: 100%;
    box-sizing: border-box;
    height: 48px !important; /* same height for select and input */
    padding: 12px 14px !important;
    margin: 4px 0 16px !important;
    font-family: inherit !important;
    font-size: 16px !important; /* equal to the iOS default: no auto-zoom */
    line-height: 1.3 !important;
    color: #4F4F4F !important; /* same text gray as the checkout */
    background-color: #fff;
    border: 1px solid #ABABAB !important; /* same border as the checkout V2 */
    border-radius: 8px !important; /* same radius as the checkout V2 */
    vertical-align: middle;
}

/* Focus: same brand blue as the checkout fields, so the form feels like
   part of the checkout and not a separate component. */
.ui-dialog .freight-wrapper input[type="text"]:focus,
.ui-dialog .freight-wrapper select:focus,
.ui-dialog .freight-wrapper .freight-field:focus {
    outline: none;
    border-color: #2e9ad8 !important;
}

/* Popup labels ("Email", "Phone", "Residential address?"...):
   raised to 15px so they accompany the 16px fields instead of looking
   disproportionately small next to them. */
.ui-dialog .freight-wrapper .RequestFreighTitle {
    font-size: 15px !important;
    font-weight: 700;
    color: #232323;
}

/* Help texts ("9am - 4pm", notes): one point larger, italic as they were,
   to set them apart from the label. */
.ui-dialog .freight-wrapper .RequestFreighText,
.ui-dialog .freight-wrapper .RequestFreighSubTitle {
    font-size: 14px !important;
}

/* The <select> options inherit the same size/color (some browsers paint
   the native list with their own typography). */
.ui-dialog .freight-wrapper .Freigh-select option,
.ui-dialog .freight-wrapper select option {
    font-size: 16px !important;
    color: #4F4F4F !important;
}

/* The notes textarea (if the topic uses it) follows the same language but
   keeps its own height: a 48px textarea is not usable. */
.ui-dialog .freight-wrapper textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px !important;
    margin: 4px 0 16px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: #4F4F4F !important;
    background-color: #fff;
    border: 1px solid #ABABAB !important;
    border-radius: 8px !important;
}

/* ============================================================
   Freight Quote popup — the field widths exploded inside the table
   ------------------------------------------------------------
   The topic lays the form out as a ONE-COLUMN table
   (`<table class="additionalData" style="width:100%">` with one <td>
   per label/field pair) and every field carries an INLINE
   `style="width:100%; padding:8px"`.

   A `<table>` defaults to `table-layout: auto`, which sizes its cells
   from their content. With `width:100%` on the field, the browser
   computed the cell width FROM the field and then re-applied the
   percentage, so the column kept growing: at 820px the fields started
   at x=266 and measured 288px inside a 382px dialog, i.e. they ran off
   the right edge (measured, not guessed).

   Two things are needed, and both are scoped to the popup so no other
   table of the theme is touched:
     1. `table-layout: fixed` makes the table ignore the content when
        sizing the single column, so `width:100%` resolves against the
        real available width.
     2. `box-sizing: border-box` on the fields, so the inline padding
        (8px) is counted INSIDE that 100% instead of being added to it.
   `max-width:100%` is kept as a safety net for both.
   ============================================================ */
.ui-dialog .freight-wrapper table.additionalData,
#FreightQuotePopup .freight-wrapper table.additionalData,
#FreightQuotePopupContent .freight-wrapper table.additionalData {
    table-layout: fixed !important;
    width: 100% !important;
    /* `display` MUST be forced back to `table` here.
       ----------------------------------------------------------
       mobile_version.css sets `.ui-dialog .freight-wrapper .additionalData
       { display: block }` ("Tabla (evitar overflow)", <=1000px). A table with
       `display: block` is NOT a table any more for layout purposes: the
       browser stops applying the table algorithm, so `table-layout: fixed`
       is silently IGNORED and the cells size themselves from their content.
       That is why the fix did not work on tablet: the declaration was there
       but had no effect. `display: table` + `table-layout: fixed` together
       are what actually pin the single column to 100% of the dialog. */
    display: table !important;
}

/* The single column must be allowed to shrink instead of forcing the
   table wider than the dialog. */
.ui-dialog .freight-wrapper table.additionalData td,
#FreightQuotePopup .freight-wrapper table.additionalData td,
#FreightQuotePopupContent .freight-wrapper table.additionalData td {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
    display: table-cell !important;
}

/* Every field of the popup: the inline `width:100%` must resolve against
   the cell, counting its own padding inside. */
.ui-dialog .freight-wrapper .freight-field,
.ui-dialog .freight-wrapper input[type="text"],
.ui-dialog .freight-wrapper select,
#FreightQuotePopup .freight-wrapper input[type="text"],
#FreightQuotePopup .freight-wrapper select,
#FreightQuotePopupContent .freight-wrapper input[type="text"],
#FreightQuotePopupContent .freight-wrapper select {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* ============================================================
   Registration — the fields overflowed their column
   ------------------------------------------------------------
   .registration-page-form-input has a FIXED `width: 580px !important`
   (styles1.css). That works when the field takes a wide column (col-md-8)
   or sits alone, but the PASSWORD / CONFIRM PASSWORD fields live in
   `col-md-4` columns (~33%, about 380px in a 1150px container) and the
   First/Last name ones in col-md-4 too.
   Result: 580px overflowed its column, the browser clipped it and the
   fields looked small and cramped against each other (they did not match
   the width of the rest).

   This makes it responsive: the input takes 100% of ITS column. `width:
   100%` is used with the inherited `max-width` so the layout max width is
   not altered, and the original height/border are kept.
   ============================================================ */
.registration-page-form-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* The .inputs container carried `white-space: nowrap` and `font-size: 0`
   (a trick for the "required" asterisks). With the input at 100% that
   stops it from shrinking: wrapping is allowed and the font size is
   restored for the validation messages below. */
.registration-page .inputs,
.registration-page .form-fields .inputs {
    white-space: normal;
    font-size: 14px;
}

/* Tablet in portrait and mobile: one column per field (Bootstrap already
   does that layout, but the input keeps the width of its column). */
@media (max-width: 1000px) {
    .registration-page-form-input {
        width: 100% !important;
    }
}

/* ============================================================
   Home product sections — tablet (601px to 1024px)
   ------------------------------------------------------------
   On tablets the desktop stylesheet is not loaded (mobile_version.css
   only applies up to 1000px), leaving the home sections half desktop,
   half mobile. This block normalizes Featured and Top Sold Products to
   a compact, centered layout matching the phone view.
   ============================================================ */
@media (min-width: 1001px) {
    #productshomepageMobileTitle,
    #nn-home-featured {
        display: none !important;
    }
}

@media (min-width: 601px) and (max-width: 1000px) {
    /* Top Sold Products (JCarousel "carousel-home") — fix arrows that the
       plugin CSS pushes off-screen with -100px margins. */
    .home-page .jCarouselMainWrapper .slick-prev,
    .home-page .jCarouselMainWrapper .slick-next {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .home-page .jCarouselMainWrapper .slick-prev {
        left: 0 !important;
    }

    .home-page .jCarouselMainWrapper .slick-next {
        right: 0 !important;
    }

    /* Top Sold: 2 cards per view on tablet (JS controls visibility). */
    .nn-top-item {
        flex: 0 0 50%;
        width: 50% !important;
        max-width: 50% !important;
    }

    /* --- Top Sold Products (mobile card proportions on tablet) --- */
}

/* Featured base styles — apply on phone AND tablet so arrows look correct. */
@media (max-width: 1000px) {
    /* ----------------------------------------------------------
       OJO: aqui habia `display: block`, que metia el col-sm-11 en
       x=0 en vez de centrarlo (Bootstrap solo centra con flex o
       con mx-auto; en block el col-11 se pega a la izquierda).

       Efecto: el titulo "Featured" salia 37px a la izquierda de
       Categories/Discovery/TopSold y su linea (HR) terminaba 37px
       antes que la de los demas.

       Con flex + justify-content:center el col-sm-11 aterriza en
       x=37, igual que el resto de secciones (medido en 768/850/900
       y 1000px: los cuatro titulos coinciden exactamente).
       ---------------------------------------------------------- */
    #productshomepageMobileTitle {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        visibility: visible !important;
    }

    #nn-home-featured {
        display: flex !important;
        visibility: visible !important;
        flex-wrap: nowrap !important;
    }

    .homepage-featured-products .nn-featured-nav {
        flex: 0 0 40px;
        max-width: 40px;
        min-width: 40px;
        padding: 0;
        text-align: center;
    }

    .homepage-featured-products .nn-featured-nav button {
        width: 36px;
        height: 48px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .homepage-featured-products .nn-featured-nav button img {
        width: 24px;
        height: 24px;
    }

    .homepage-featured-products .wop {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }

    #nn-home-featured-track,
    .nn-featured-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        min-height: 320px !important;
    }

    .nn-featured-item {
        display: none;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 0 8px;
    }

    .nn-featured-item.is-active {
        display: block !important;
    }

    .home-page #nn-home-featured-track .product-item-rounded {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        border: 1px solid #b0bec5;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    .home-page #nn-home-featured-track .product-item-rounded > .row {
        margin: 0 !important;
        padding: 16px !important;
    }

    .home-page #nn-home-featured-track .product-item-rounded > .row > .col-md-12:first-child {
        height: 260px !important;
    }

    .home-page #nn-home-featured-track .product-item-rounded .img-version-mobile,
    .home-page #nn-home-featured-track .product-item-rounded img.img-fluid {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: 240px !important;
        max-height: 240px !important;
        margin: 0 auto !important;
        object-fit: contain;
    }

    .home-page #nn-home-featured-track .product-item-rounded .btn-addtocart-card-desktop,
    .home-page #nn-home-featured-track .product-item-rounded .btn-addtowish-card-desktop {
        display: none !important;
    }

    .home-page #nn-home-featured-track .product-item-rounded .btn-addtocart-card-mobile,
    .home-page #nn-home-featured-track .product-item-rounded .btn-addtowish-card-mobile {
        display: initial !important;
    }

    .home-page #nn-home-featured-track .product-item-rounded .product-titlev2 {
        height: auto !important;
        min-height: 46px;
        margin-top: 8px !important;
        text-align: center !important;
    }

    .home-page #nn-home-featured-track .product-item-rounded .product-titlev2 a {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    .home-page #nn-home-featured-track .product-item-rounded .prices {
        margin-top: 8px !important;
        text-align: center !important;
    }

    /* Las reglas base de Top Sold (display de las tarjetas y flechas)
       se movieron FUERA de este media query: al estar solo aqui no
aplicaban en desktop y las 15 tarjetas se apilaban una debajo de otra.
       Ver el bloque "Top Sold Products - base" mas abajo. */

    .home-page #carousel-home .product-item-rounded {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        border: 1px solid #b0bec5;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    .home-page #carousel-home .product-item-rounded > .row {
        margin: 0 !important;
        padding: 16px !important;
    }

    .home-page #carousel-home .product-item-rounded > .row > .col-md-12:first-child {
        height: 240px !important;
    }

    .home-page #carousel-home .product-item-rounded .img-version-mobile,
    .home-page #carousel-home .product-item-rounded img.img-fluid {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: 220px !important;
        max-height: 220px !important;
        margin: 0 auto !important;
        object-fit: contain;
    }

    .home-page #carousel-home .product-item-rounded .btn-addtocart-card-desktop,
    .home-page #carousel-home .product-item-rounded .btn-addtowish-card-desktop {
        display: none !important;
    }

    .home-page #carousel-home .product-item-rounded .btn-addtocart-card-mobile,
    .home-page #carousel-home .product-item-rounded .btn-addtowish-card-mobile {
        display: initial !important;
    }

    .home-page #carousel-home .product-item-rounded .product-titlev2 {
        height: auto !important;
        min-height: 44px;
        margin-top: 8px !important;
        text-align: center !important;
    }

    .home-page #carousel-home .product-item-rounded .product-titlev2 a {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .home-page #carousel-home .product-item-rounded .prices {
        margin-top: 8px !important;
        text-align: center !important;
    }
}

/* ============================================================
   Top Sold Products - base (todos los anchos)
   ------------------------------------------------------------
   Estas reglas vivian DENTRO de @media (max-width: 1000px), asi que en
   desktop no aplicaban: `.nn-top-item` no recibia `display:none` y las
   15 tarjetas se apilaban (cada una a ancho completo y ~2286px de alto).
   Se usa `#carousel-home.nn-top-track` para afectar SOLO al carrusel
   nuevo del tema y no al markup antiguo del plugin (`.carousel.slide`),
   que sigue funcionando igual.
   ============================================================ */
#carousel-home.nn-top-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

.nn-top-item {
    display: none;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 8px;
}

.nn-top-item.is-active {
    display: block !important;
}

.home-page .nn-top-nav {
    flex: 0 0 40px;
    max-width: 40px;
    min-width: 40px;
    padding: 0;
    text-align: center;
}

.home-page .nn-top-nav button {
    width: 36px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.home-page .nn-top-nav button img {
    width: 24px;
    height: 24px;
}

/* Tablet only: 2 products per view. */
@media (min-width: 601px) and (max-width: 1000px) {
    .nn-featured-item {
        flex: 0 0 50%;
        width: 50% !important;
        max-width: 50% !important;
    }

    .nn-top-item.is-active {
        flex: 0 0 50%;
        width: 50% !important;
        max-width: 50% !important;
    }
}

/* Desktop: 5 products per view (el ancho de la tarjeta lo fija el flex). */
@media (min-width: 1001px) {
    .nn-top-item.is-active {
        flex: 0 0 20%;
        width: 20% !important;
        max-width: 20% !important;
    }
}

/* Tablet only: Top Sold Products (mobile card proportions).
   This block had lost its @media opener, so its rules leaked to ALL
   widths and the file ended up with one brace too many. */
@media (min-width: 601px) and (max-width: 1000px) {
    /* --- Top Sold Products (mobile card proportions on tablet) --- */
    .home-page .homepage-bestsellers-mobile-style {
        width: 100% !important;
        margin: 0 0 24px !important;
    }

    .home-page .homepage-bestsellers-mobile-style .title {
        margin: 0 0 18px !important;
        padding: 0 0 10px !important;
        font-size: 22px !important;
        line-height: 28px !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        margin: 0 !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-grid .item-box {
        box-sizing: border-box;
        float: none !important;
        width: calc(50% - 8px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        overflow: hidden;
        border: 1px solid #B0BEC5;
        border-radius: 6px;
        background: #fff;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .picture {
        display: block;
        width: 100%;
        height: 180px !important;
        margin: 0 !important;
        background: #fff;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .picture a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .picture a:before {
        padding-top: 0 !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .picture a img {
        position: static !important;
        display: block;
        width: auto !important;
        max-width: 100% !important;
        height: 180px !important;
        max-height: 180px !important;
        margin: 0 auto !important;
        object-fit: contain;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .details {
        padding: 12px !important;
        text-align: center;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .product-title {
        min-height: 44px;
        margin: 0 0 8px !important;
        font-size: 16px !important;
        line-height: 21px !important;
        white-space: normal !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .description,
    .home-page .homepage-bestsellers-mobile-style .item-box .sku,
    .home-page .homepage-bestsellers-mobile-style .item-box .product-rating-box {
        display: none !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .prices {
        margin: 0 0 8px !important;
        text-align: center;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .actual-price {
        font-size: 20px !important;
        font-weight: 700;
        color: #E44436 !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .buttons {
        display: flex !important;
        justify-content: center;
        gap: 8px;
        margin: 0 !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .buttons input[type="button"] {
        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 14px !important;
        border: 1px solid #B0BEC5 !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        color: #37474F !important;
        background: #fff !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .buttons .product-box-add-to-cart-button {
        border-color: #E44436 !important;
        color: #E44436 !important;
        background: #fff !important;
    }

    .home-page .homepage-bestsellers-mobile-style .item-box .buttons .add-to-compare-list-button,
    .home-page .homepage-bestsellers-mobile-style .item-box .buttons .add-to-wishlist-button {
        width: 40px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
}

/* ============================================================
   Open side menus (category / "my account") — stacking fix
   ------------------------------------------------------------
   The mobile search panel (.zone-search-term-version-mobile,
   z-index 9999) was rendering ON TOP of the open side menus
   (.menu-side-left / .menu-side-left-account use z-index 100),
   visually covering them. The menus must sit ABOVE the search
   panel; the search stays behind an open menu.
   ============================================================ */
@media (max-width: 1000px) {
    .menu-side-left,
    .menu-side-left-account {
        z-index: 10000 !important;
    }
}


/* ============================================================
   Open side menus (category / "my account") — stacking fix
   ------------------------------------------------------------
   The mobile search panel (.zone-search-term-version-mobile,
   z-index 9999) was rendering ON TOP of the open side menus
   (.menu-side-left / .menu-side-left-account use z-index 100),
   visually covering them. The menus must sit ABOVE the search
   panel; the search stays behind an open menu.
   ============================================================ */
@media (max-width: 1000px) {
    .menu-side-left,
    .menu-side-left-account {
        z-index: 10000 !important;
    }
}

/* ============================================================
   Product detail / search / category — tablet & mobile fixes
   ============================================================ */

@media (max-width: 1000px) {
    /* Ocultar el breadcrumb de categorías ("category breakdown") que se
       muestra bajo el header en tablet/mobile en estas tres vistas. */
    .html-search-page .text-breadcrumb,
    .html-category-page .text-breadcrumb,
    .html-product-details-page .text-breadcrumb {
        display: none !important;
    }

    /* Ocultar el acordeón de categorías dentro del panel de filtros
       móvil (búsqueda y categoría). */
    .div-zone-filters-popup .block-category-navigation {
        display: none !important;
    }
}

/* ============================================================
   Related products slider — tablet fix (<=1000px)
   ------------------------------------------------------------
   Same issue as the home carousels: the multi-item overlap CSS
   lives in styles2.css, which is only loaded at >=1001px. On
   tablet the Bootstrap float + negative-margin layout leaves the
   slider empty (only the ‹ › arrows visible). Normalize it to a
   simple one-card-per-view block carousel.
   ============================================================ */
@media (max-width: 1000px) {
    #carousel-related-products-vm .carousel-inner,
    #carousel-alsopurchased-products-vm .carousel-inner {
        display: block; /* sin flex-wrap: los slides no se parten en filas */
    }

    #carousel-related-products-vm .carousel-item,
    #carousel-alsopurchased-products-vm .carousel-item {
        flex: 0 0 100%;
        float: none;
        width: 100%;
        max-width: 100%;
        margin-right: 0; /* neutraliza el solapamiento de Bootstrap */
    }

    #carousel-related-products-vm .carousel-item.active,
    #carousel-alsopurchased-products-vm .carousel-item.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #carousel-related-products-vm .carousel-item-left,
    #carousel-related-products-vm .carousel-item-right,
    #carousel-related-products-vm .carousel-item-next,
    #carousel-related-products-vm .carousel-item-prev,
    #carousel-alsopurchased-products-vm .carousel-item-left,
    #carousel-alsopurchased-products-vm .carousel-item-right,
    #carousel-alsopurchased-products-vm .carousel-item-next,
    #carousel-alsopurchased-products-vm .carousel-item-prev {
        transform: none !important;
    }

    /* ------------------------------------------------------------
       Sin salto de altura al cambiar de slide.
       ------------------------------------------------------------
       Bootstrap deja el slide que SALE (.active.carousel-item-left
       / -right) y el que ENTRA (.carousel-item-next / -prev) con
       `display: block`. Como arriba se anula el `transform`, ambos
       quedaban en el flujo normal y se APILABAN: el contenedor
       pasaba de 546px a 2142px durante ~400ms (el "se alarga un
       segundo" que se veia en movil/tablet).

       Fix: se saca del flujo al slide saliente (ya no se ve) y se
       deja en el flujo SOLO al entrante, que es el que debe marcar
       la altura. Asi el carrusel mantiene su alto durante toda la
       transicion. */
    #carousel-related-products-vm .carousel-item.active.carousel-item-left,
    #carousel-related-products-vm .carousel-item.active.carousel-item-right,
    #carousel-alsopurchased-products-vm .carousel-item.active.carousel-item-left,
    #carousel-alsopurchased-products-vm .carousel-item.active.carousel-item-right {
        display: none !important;
    }

    #carousel-related-products-vm .carousel-item.carousel-item-next,
    #carousel-related-products-vm .carousel-item.carousel-item-prev,
    #carousel-alsopurchased-products-vm .carousel-item.carousel-item-next,
    #carousel-alsopurchased-products-vm .carousel-item.carousel-item-prev {
        display: block !important;
    }
}

/* ============================================================
   Tablet portrait (768px - 1000px) — size fixes
   ============================================================ */
@media (min-width: 768px) and (max-width: 1000px) {
    /* Precio del detalle de producto: demasiado grande en tablet.
       (mobile_version.css lo deja en 40px en <=1000px). */
    .html-product-details-page .priceProductDetail {
        font-size: 28px !important;
    }

    /* Botones + / - de cantidad: demasiado grandes en tablet.
       (mobile_version.css los deja en 30px en <=1000px). */
    .html-product-details-page .img-btn-qty {
        width: 20px !important;
        height: 20px !important;
    }

    /* Precios de las tarjetas en busqueda, categoria y productos
       relacionados: demasiado pequenos en tablet.
       mobile_version.css tiene `@media (max-width: 900px) {
       .price { font-size: 12px !important } }`, asi que entre 771 y
       900px el precio cae a 12px (la regla de 40px solo aplica hasta
       750px). Se deja un tamano legible en TODO el rango de tablet.

       El selector anterior exigia el contenedor
       `.section-list-products-search-mobile`, que en la vista de
       CATEGORIA no existe y en los productos RELACIONADOS tampoco
       (viven en #carousel-related-products-vm), por lo que la regla
       no llegaba a aplicarse ahi. */
    .html-search-page .actual-price,
    .html-category-page .actual-price,
    .html-product-details-page #carousel-related-products-vm .actual-price,
    .html-product-details-page #carousel-alsopurchased-products-vm .actual-price,
    .html-search-page .section-list-products-search-mobile .price,
    .html-category-page .section-list-products-search-mobile .price {
        font-size: 20px !important;
    }

    /* Precio antiguo (tachado): proporcional al nuevo. */
    .html-search-page .old-price,
    .html-category-page .old-price,
    .html-product-details-page #carousel-related-products-vm .old-price,
    .html-product-details-page #carousel-alsopurchased-products-vm .old-price {
        font-size: 16px !important;
    }
}

/* ============================================================
   Product detail (/product) — tablet layout (768px - 1000px)
   ------------------------------------------------------------
   En tablet el shell es el MOBILE (mobile_version.css), pero
   Bootstrap sí activa el breakpoint `md`, de modo que las columnas
   `col-md-5` (imágenes) y `col-md-7` (info) se ponían LADO A LADO
   con la foto a 267px, mientras en móvil se apilan a ancho
   completo. Se fuerza el mismo apilado vertical del móvil.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1000px) {
    .html-product-details-page #product-details-form .row.text-center > .col-md-5,
    .html-product-details-page #product-details-form .row.text-center > .col-lg-5,
    .html-product-details-page #product-details-form .row.text-center > .col-md-7,
    .html-product-details-page #product-details-form .row.text-center > .col-lg-7 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Precio / cantidad: el contenedor externo pasa a ancho completo
       como en móvil (col-sm-6 lo partía al 50% desde 576px).
       OJO: solo el contenedor DIRECT0 (.col-md-7 > .row > .col-sm-6);
       las columnas de valor internas (.col-8.col-sm-6) deben seguir
       al lado de su label para quedar alineadas. */
    .html-product-details-page #product-details-form .row.text-center > .col-md-7 > .row > .col-sm-6,
    .html-product-details-page #product-details-form .row.text-center > .col-lg-7 > .row > .col-sm-6 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Label y valor de Price / Quantity: mantenerlos lado a lado y
       alineados verticalmente (29% / 71%). */
    .html-product-details-page #product-details-form .row.text-center > .col-md-7 > .row > .col-sm-6 > .row > .col-4,
    .html-product-details-page #product-details-form .row.text-center > .col-lg-7 > .row > .col-sm-6 > .row > .col-4 {
        flex: 0 0 29% !important;
        width: 29% !important;
        max-width: 29% !important;
        display: flex !important;
        align-items: center;
    }

    .html-product-details-page #product-details-form .row.text-center > .col-md-7 > .row > .col-sm-6 > .row > .col-8,
    .html-product-details-page #product-details-form .row.text-center > .col-lg-7 > .row > .col-sm-6 > .row > .col-8 {
        flex: 0 0 71% !important;
        width: 71% !important;
        max-width: 71% !important;
    }
}

/* ============================================================
   Home — titulo + linea (HR) consistentes en TODOS los bloques
   ------------------------------------------------------------
   "Featured", "Categories", "Discovery" y "Top Sold Products"
   repiten el patron: <strong class="title-homepage-productos"> +
   una barra de 3px (el "HR" de cada seccion).

   El bloque de Featured colgaba DIRECTO de .page-body mientras el
   resto vivia dentro de <col-sm-11 col-md-11 col-lg-11>, asi que su
   titulo salia desplazado y con una linea mas ancha que el resto.

   Se igualo la ESTRUCTURA en el markup (HomepageProducts usa ahora el
   mismo row > col-11 > row mt-3 mb-5 que Categories).
   ============================================================ */

/* ------------------------------------------------------------
   Titulo + HR alineados con el BORDE DE LOS BOXES
   ------------------------------------------------------------
   Una vez que los cuatro titulos ya coinciden entre si (x=82 en
   900px), el titulo arrancaba 23px MAS ADENTRO que las tarjetas de
   su propia seccion (x=59), y la linea terminaba 15px antes.

   Composicion del desfase (900px):
     col-11  x=37  padding-left 15  -> contenido arranca en 52
     col-12  x=52  padding-left 15  -> contenido arranca en 67
     col-10  x=67  padding-left 15  -> TEXTO en 82
     tarjetas: columna con padding 7 -> BOX en 59

   Se cancela el padding del col-12 con margen negativo y se usa el
   mismo gutter de 7px que las columnas de tarjetas, de modo que el
   titulo arranca donde arrancan los boxes (59) y el HR termina donde
   termina la grilla (no 15px antes).
   ============================================================ */
@media (max-width: 1000px) {
    .page.home-page .row.mt-3.mb-5 > .col-sm-12 > .form-inline {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    /* Mismo gutter que .zone-item-category-mobile (7px). */
    .page.home-page .row.mt-3.mb-5 > .col-sm-12 > .form-inline > .col-10 {
        padding-left: 7px !important;
    }

    /* ------------------------------------------------------------
       Top Sold Products.
       Su markup NO tiene el wrapper <div class="row mt-3 mb-5"> ni
       <div class="col-sm-12"> del resto de secciones: cuelga directo
       como col-11 > form-inline > col-10. Por eso no le aplicaba la
       regla de arriba y quedaba desalineado (su titulo y su linea
       caian 5px a la derecha).

       Se replica su geometria a mano para que coincida exactamente:
         col-11     padding 15px (igual que Categories/Discovery)
         col-10     padding-left 7px (igual que el resto)
       ------------------------------------------------------------ */
    .page.home-page .title-best-seller {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .page.home-page .title-best-seller .form-inline > .col-10 {
        padding-left: 7px !important;
    }
    .topic-block-body ul li{
        text-align: left !important;
        color: #777;

    }
}

/* ============================================================
   Shopping cart (/cart) — tablet: quantity stepper too spread out
   ------------------------------------------------------------
   The action row is two Bootstrap `col-6` halves (trash | stepper) and
   the stepper itself is three `col-4` columns (minus / input / plus).

   On a phone every column is narrow, so the stepper reads as one unit.
   On a tablet the halves are ~392px and each `col-4` ~120px, so the
   three controls drift apart and the stepper is pinned to the far right
   of the card, detached from the trash icon and from the product row
   above (measured at 820px: minus at x=496, input at x=573, plus at
   x=687 -> a 166px void between the minus and the plus).

   `col-4`/`col-6` come from `bootstrap4.6.css` (`.col-6` is
   `flex: 0 0 50%; max-width: 50%`). Two halves at 50% already fill the
   row exactly, so ANY gap added there overflows and pushes the `+` past
   the card border: the stepper half is capped below 50% instead.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1000px) {
    /* Cap the stepper half so it stops flush against the card border and
       lines up with the product text above it. */
    #div-cart-version-mobile .zone-action-cart-mobile .col-6.cart-items-total-mobile {
        max-width: 48% !important;
    }

    /* Collapse the three stepper columns to their content width so the
       minus, the input and the plus stay adjacent. */
    #div-cart-version-mobile .cart-items-total-mobile > .row > .wop {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 0 !important;
    }

    /* The 20px offset separated the input from the minus button when the
       columns were wide; with the columns collapsed it only adds a
       lopsided gap, so the three controls are evenly spaced. */
    #div-cart-version-mobile .cart-items-qty-input-mobile {
        margin-left: 0 !important;
    }

    /* NO `gap` on this row: it is already exactly the width of its parent
       (the three collapsed columns), so an outer gap pushed the last
       control out of the card. */
    #div-cart-version-mobile .cart-items-total-mobile > .row {
        justify-content: flex-end;
        align-items: center;
    }
}