/* TSZ-GLOBAL-UI: shared UI corrections that are not tied to one page type.
   Loaded unconditionally from _partials/head.tpl. */

/* TSZ-SLIDER-BUTTON-RADIUS */
.button1-slide {
    border-radius: 8px;
}

/* TSZ-IDENTITY-HELP-SPACING: the theme gives these inline spans 8px top
   padding, but inline padding does not create space below the preceding
   block-level input. Make only the identity form's field help text block-level
   so the existing spacing becomes visible. */
#identity #customer-form .js-input-column > .form-control-comment {
    display: block;
    padding-top: 8px;
}

/* --- slick carousel arrows ---
   Before: the arrows measured 40x20px while carrying border-radius:50%, which
   renders an ellipse instead of a circle. Measured on the product page at 412px
   (elementor-slick-slider): 40x20 without this file, 40x40 with it.

   Scoped to .slick-arrows and .elementor-slick-slider rather than a bare
   .slick-slider: the offending declaration is
   `.elementor-slick-slider .slick-prev { width: 20px; height: auto }` in
   leoelements' frontend.css / common.css, and a wider selector would also
   outrank leoelements' defensive `.slick-arrow.slick-hidden { display: none }`.
   :not(.slick-hidden) keeps that rule intact either way. */
.slick-arrows .slick-prev:not(.slick-hidden),
.slick-arrows .slick-next:not(.slick-hidden),
.elementor-slick-slider .slick-prev:not(.slick-hidden),
.elementor-slick-slider .slick-next:not(.slick-hidden) {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 40px;
}

.slick-arrows .slick-prev:before,
.slick-arrows .slick-next:before,
.elementor-slick-slider .slick-prev:before,
.elementor-slick-slider .slick-next:before {
    line-height: 1;
}

/* Deliberately no mobile size override: the theme forces width:40px on
   .slick-arrows .slick-arrow inside its own breakpoints, so shrinking only the
   height here produced a 40x36 ellipse. One size at every width stays round. */

/* --- TSZ-LIST-REVIEW-ROW: spmgsnipreview stars on product cards ---
   The markup comes from the theme override
   themes/leo_jamoo_elements/modules/spmgsnipreview/views/templates/hooks/liststars.tpl,
   rendered by the displayProductListReviews hook. That hook fires from BOTH
   product-card templates (templates/catalog/_partials/miniatures/product.tpl and
   leoelements .../products/plist1833498166.tpl), so the row appears on category,
   search, manufacturer and supplier listings AND inside product-page carousels
   such as "You might also like" (product_accessories.tpl).

   These rules lived in tsz-product-price-row.css scoped to
   `body#category, body#search, .page-category, .page-search`. That file is only
   linked when page_name == 'product' (head.tpl), so the block matched nothing
   anywhere: listings rendered the stars completely unstyled and only looked
   right because a bare <img> is display:inline. Inside a carousel the slider
   stylesheet wins instead -- `.slick-slide img { display: block }` in
   leoelements' frontend.css / common.css -- and every star became its own line,
   which is the reported vertical stack in the accessories block.

   Hence: unscoped (the classes exist nowhere else), loaded on every page, and
   the layout carried by the flex container so no `display` on the images is
   needed to hold them side by side.

   Star size stays at the images' natural 17x17 -- that is what listings render
   today and what the shop is signed off on; the dead rule's 12px was never
   visible anywhere. */
.tsz-spmgsnipreview-list-row {
    align-items: center;
    color: #7f879b;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 2px 5px;
    justify-content: center;
    line-height: 1.2;
    margin: 9px auto 0;
    text-align: center;
}

.tsz-spmgsnipreview-list-stars {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 1px;
    line-height: 1;
}

/* flex-shrink:0 keeps the five stars on one line inside the narrow carousel
   cards; object-fit guards against a theme rule forcing a different box. */
.tsz-spmgsnipreview-list-star {
    display: block;
    flex: 0 0 auto;
    height: 17px;
    object-fit: contain;
    width: 17px;
}

.tsz-spmgsnipreview-list-count {
    white-space: nowrap;
}

/* Phone: the count moves under the stars instead of competing with them for a
   ~150px card width. flex-direction on the row only -- the stars span stays an
   inline-flex row of its own. */
@media (max-width: 575.98px) {
    .tsz-spmgsnipreview-list-row {
        flex-direction: column;
        gap: 2px;
    }
}

/* TSZ-REVIEW-PAGINATION -- pagination of the spmgsnipreview module (product
   reviews, store reviews, loyalty). theme.css styles `.pagination a` only:
   38x38 with line-height:38px on top of Bootstrap's .page-link padding, so the
   digit sits below centre. The current page is a <span>, matches none of it,
   and renders 34x34 with line-height:normal -- hence the misaligned active
   tile. The same rule adds border-radius:50% on hover, a circle over square
   tiles. Both are corrected here for anchors and spans alike; scoped by the
   module's `page_nav*` wrapper so PrestaShop's own category pagination is
   untouched. */
div[id^="page_nav"] ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

div[id^="page_nav"] ul.pagination .page-item {
    display: block;
}

div[id^="page_nav"] ul.pagination .page-link {
    align-items: center;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    float: none;
    height: 38px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    text-align: center;
    width: 38px;
}

div[id^="page_nav"] ul.pagination .page-link:focus,
div[id^="page_nav"] ul.pagination .page-link:hover {
    border-radius: 0;
}

/* TSZ-ACCOUNT-HOVER-CORRIDOR: keep the desktop account dropdown open while
   the pointer travels diagonally from the narrow icon to the wider menu.
   2026-07-30: widened 20px further left (150px -> 170px) -- customers moving
   further left than the original corridor still lost the hover. The narrow
   top point stays pixel-anchored at the icon (125px/155px, was 70%/90% of
   150px = 105px/135px, shifted +20px to compensate for the wider box moving
   box-left 20px further out); only the wide bottom edge gains the extra reach.
   2026-07-30: added a 40px hover buffer left of the icon itself. The corridor
   only spans the gap below the icon, so a pointer moving sideways first (the
   menu text starts 112px further left) left the hover area while still on icon
   height. The buffer is not gated on :hover -- it has to exist before the
   pointer arrives, otherwise it would vanish in the same frame the icon loses
   the hover. Nothing clickable sits left of the icon (probed: only Elementor
   wrapper divs for at least 80px), so the transparent overlay swallows no
   clicks. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    /* TSZ-CURRENCY-HOVER-BUFFER: include the separate Elementor currency icon
       in the currency selector's hover area. */
    #_desktop_currency_selector.popup-over::before {
        bottom: 0;
        content: "";
        left: -32px;
        position: absolute;
        top: 0;
        width: 32px;
    }

    .userinfo-selector.popup-over > .popup-title {
        position: relative;
        z-index: 1;
    }

    .userinfo-selector.popup-over::before {
        bottom: 0;
        content: "";
        left: -40px;
        position: absolute;
        top: 0;
        width: 40px;
    }

    .userinfo-selector.popup-over:hover::after {
        clip-path: polygon(125px 0, 155px 0, 170px 100%, 0 100%);
        content: "";
        height: 16px;
        position: absolute;
        right: -20px;
        top: 25px;
        width: 170px;
    }
}

/* TSZ-SPMGSNIPREVIEW-BUTTON-BRAND: the review module ships its own bootstrap-3
   blue for its primary buttons ("Write a Review", "Log in / sign up", "close")
   in modules/spmgsnipreview/views/css/spmgsnipreview.css and storereviews.css:
   background #428bca / border #357ebd, both !important. That blue belongs to no
   part of the Leo theme. Repaint it with the theme's own .btn-primary pair
   (#EA4E44, hover #232F3E, theme.css:672 and :6553).

   Both classes are always used together on the same element, so the double
   class selector outranks the module's single class rule; !important is still
   needed because the module declarations carry it too. */
.btn-spmgsnipreview.btn-primary-spmgsnipreview {
    background-color: #EA4E44 !important;
    border-color: #EA4E44 !important;
    color: #fff !important;
}

.btn-spmgsnipreview.btn-primary-spmgsnipreview:hover,
.btn-spmgsnipreview.btn-primary-spmgsnipreview:focus,
.btn-spmgsnipreview.btn-primary-spmgsnipreview:active,
.btn-spmgsnipreview.btn-primary-spmgsnipreview.active,
.btn-spmgsnipreview.btn-primary-spmgsnipreview:visited {
    background-color: #232F3E !important;
    border-color: #232F3E !important;
    color: #fff !important;
}

/* TSZ-CARTMODAL-BUTTON-CASE: the "Continue shopping" button in the add-to-cart
   modal (themes/leo_jamoo_elements/modules/ps_shoppingcart/modal.tpl:91) renders
   as all caps because theme.css:13189 sets text-transform: uppercase on every
   .btn-secondary. Its sibling "Proceed to checkout" is a .btn-primary and stays
   in sentence case, so the two buttons look inconsistent. Reset the casing for
   this modal only; the id selector outranks the theme rule, no !important. */
#blockcart-modal .btn-secondary {
    text-transform: none;
}

/* TSZ-ADDTOCART-BUTTON-CASE: theme.css:16121 sets text-transform: capitalize on
   .product-add-to-cart .add-to-cart, which upper-cases the first letter of every
   word. The German label is "In den Warenkorb legen" and renders as "In Den
   Warenkorb Legen". Same class of defect as TSZ-CARTMODAL-BUTTON-CASE above.

   Patched here rather than in theme.css: that file is 612 KB of generated CSS,
   a direct edit is lost on a theme update, and the override loads after it from
   head.tpl, so an identical selector wins on order alone -- no !important, and
   the button keeps every other declaration from the theme rule. */
.product-add-to-cart .add-to-cart {
    text-transform: none;
}

/* TSZ-PRODUCT-CARD-RADIUS: the buybox and product-tabs belong to one mobile
   commerce flow, but the loaded theme CSS gives them 14px and 20px outer
   radii. Keep both theme-owned cards aligned with the existing 8px benefits
   card. The matching shipping-module radius is maintained in that module. */
.page-product .product-actions .product-variants {
    border-radius: 8px 8px 0 0;
}

.page-product .product-actions .product-add-to-cart > .product-quantity {
    border-radius: 0 0 8px 8px;
}

.page-product .product-tabs {
    border-radius: 8px;
}

/* TSZ-CHECKOUT-ADDRESS-ACTIONS: retain the native cancel link and its handler. */
body#checkout #checkout-addresses-step .add-address + p {
    margin-top: 0.75rem;
}

body#checkout #checkout-addresses-step .cancel-address {
    display: inline-block;
    min-width: 7rem;
    margin: 0 0.75rem 0 0;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 0.5rem 1.25rem;
    background-color: #f6f6f6;
    color: #232323;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

body#checkout #checkout-addresses-step .cancel-address:hover {
    background-color: #dddddd;
}

body#checkout #checkout-addresses-step .cancel-address:focus-visible {
    outline: 2px solid #363a42;
    outline-offset: 2px;
}

/* TSZ-FULL-CATEGORY-BREADCRUMB: LeoElements hides intermediate category links. */
#product #wrapper .breadcrumb ol li,
#category #wrapper .breadcrumb ol li {
    display: inline;
}

/* TSZ-PRODUCT-TAB-TYPOGRAPHY: the theme's 20px/800 maps to Rubik Black 900
   and makes the desktop product tabs disproportionately heavy. */
.product-tabs.tabs .nav-tabs .nav-link {
    font-size: 18px;
    font-weight: 600;
}

/* TSZ-MOBILE-PRODUCT-TABS: keep every product tab visible in a compact
   stacked layout and match the Rubik scale used by the main menu. */
@media (max-width: 575.98px) {
    .product-tabs.tabs .nav-tabs .nav-link {
        color: var(--text-color);
        font-family: var(--font-family-megamenu);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        padding: 6px 0;
    }

    .product-tabs.tabs .nav-tabs .nav-link.active,
    .product-tabs.tabs .nav-tabs .nav-link:hover {
        color: var(--headings-color);
    }
}