/**
* Theme Name: Partdo Child
* Description: This is a child theme of Partdo, generated by Merlin WP.
* Author: <a href="http://themeforest.net/user/KlbTheme">KlbTheme (Sinan ISIK)</a>
* Template: partdo
* Version: 1.4.0
*/

/* -------------------------------------------------------------------------
 * iPhone horizontal-scroll fix (checkout / address forms).
 *
 * The theme renders form controls at 15px. iOS Safari auto-zooms the page
 * whenever a focused input has font-size < 16px; the zoomed page can then
 * be panned horizontally (and often stays zoomed after the keyboard
 * closes). Android never auto-zooms, which is why this was only
 * reproducible on iPhones, specifically on pages with address forms.
 *
 * 1) Bump form controls to 16px on mobile so the auto-zoom never triggers.
 *    !important on purpose: the 15px comes from several parent/plugin
 *    selectors of varying specificity (theme base.css, woocommerce.css,
 *    select2), and this must win over all of them.
 * 2) Belt-and-braces: clamp horizontal overflow on the page itself so no
 *    stray element can ever enable left/right panning. `clip` (iOS 16+)
 *    avoids creating a scroll container; `hidden` is the fallback.
 *    Off-canvas UI (drawer, search) is position:fixed and unaffected.
 * -------------------------------------------------------------------------*/
@media (max-width: 991.98px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea,
    .select2-search__field {
        font-size: 16px !important;
    }
}

html,
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* -------------------------------------------------------------------------
 * Mobile-only quick-contact buttons rendered inside the masthead.
 *
 * Markup lives at the bottom of includes/header/header-type1.php in this
 * child theme. Sits inside `.header-mobile` so it inherits the theme's
 * mobile header background, border, and breakpoint behavior automatically.
 * -------------------------------------------------------------------------*/

.site-header .header-mobile .erdexim-mobile-quick-row-inner {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
}

.site-header .header-mobile .erdexim-mobile-quick-button {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px;
    text-decoration: none;
    color: inherit;
    line-height: 1.2;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.site-header .header-mobile .erdexim-mobile-quick-button + .erdexim-mobile-quick-button {
    border-left: 1px solid var(--klb-border-color, #e6e6e6);
}

.site-header .header-mobile .erdexim-mobile-quick-button:hover,
.site-header .header-mobile .erdexim-mobile-quick-button:focus,
.site-header .header-mobile .erdexim-mobile-quick-button:active {
    background-color: var(--klb-secondary-color, #f7f7f7);
    color: var(--klb-primary-color, inherit);
    text-decoration: none;
    outline: none;
}

.site-header .header-mobile .erdexim-mobile-quick-button i {
    font-size: 16px;
    line-height: 1;
}

.site-header .header-mobile .erdexim-mobile-quick-button-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
 * LCP fix: show slider immediately instead of waiting for JS-gated reveal.
 * Parent theme hides .klbth-slider with opacity:0;visibility:hidden until
 * siteslider.js fires imagesLoaded callback after slick init, which can
 * delay LCP by 5-15s. Showing it from the first paint cuts LCP dramatically.
 * Slick still initializes; the user sees the first slide statically until
 * then, which is strictly better UX than a spinner-on-white.
 * -------------------------------------------------------------------------*/
.klbth-slider-wrapper {
    min-height: 0 !important;
}
.klbth-slider-wrapper .klbth-slider {
    opacity: 1 !important;
    visibility: visible !important;
}
.klbth-slider-wrapper .klbth-slider-loader {
    display: none !important;
}
/* Hide non-first slides until slick takes over to avoid vertical stack flash */
.klbth-slider-wrapper .klbth-slider:not(.slick-initialized) .slider-item:not(:first-child) {
    display: none !important;
}

/* -------------------------------------------------------------------------
 * Login popup (authentication modal) fix.
 *
 * partdo-core's login-popup CSS styles `.klb-authentication-inner` as a
 * two-tab slider (`display: flex; width: 200%`, children at `width: 100%`,
 * intended to translateX between a login tab and a register tab), but the
 * matching PHP template only renders the login tab. Combined with the
 * parent's `overflow: hidden`, the lone form renders at 200% width and
 * gets clipped - the modal opens, animates, and appears empty.
 *
 * Collapse the slider back to a single normal-width panel. Scoped to
 * `.authentication-modal` so no other modal is affected.
 * -------------------------------------------------------------------------*/
.klb-modal-root.authentication-modal .klb-authentication-form.tab-style {
    overflow: visible;
}
.klb-modal-root.authentication-modal .klb-authentication-form.tab-style .klb-authentication-inner {
    display: block;
    width: 100% !important;
    -webkit-transform: none;
    transform: none;
}
.klb-modal-root.authentication-modal .klb-authentication-form.tab-style .klb-authentication-inner > * {
    width: 100%;
}

/* -------------------------------------------------------------------------
 * Product grid: align all "In den Warenkorb" buttons on the same line at
 * the bottom of each card, and keep them inside the raised card background
 * on desktop hover.
 *
 * Titles wrap to 1-3 lines, so cards in the same row have different content
 * heights and the add-to-cart button sits at different Y values across a row.
 *
 * Mobile chain (<992px):
 *   The theme pins .column-item.product height, so cells did not stretch to
 *   fill their flex row. height:auto restores per-row stretch. Card + wrapper
 *   become flex columns filling the cell, and margin-top:auto on .product-footer
 *   pins the button to the card bottom.
 *
 * Desktop chain (>=992px): same flex stretch, PLUS two extra fixes.
 *   1. The theme sets .product-footer to `position: absolute; opacity: 0;
 *      visibility: hidden` and only reveals it on :hover. Because top/bottom
 *      are `auto`, the absolute footer's static Y depends on .product-content
 *      height and therefore drifts with title length - so buttons in the same
 *      row landed at different Y positions even on hover. Switch it to
 *      position: relative and always-visible so the flex stretch above
 *      controls its Y.
 *   2. The theme's .product-content-fade extends 1.5rem past the inner card
 *      box on all sides. When the footer was absolute it sat OUTSIDE that
 *      1.5rem extension (footer ~85px tall, extension 24px), i.e. the button
 *      hung below the visible white card background. Because the footer is
 *      now inside the card's flex flow, the inner box already includes the
 *      footer height, so the fade automatically covers the button plus its
 *      1.5rem margin below - no explicit sizing needed here.
 *   3. productHover.js sets an inline `margin-bottom: -Npx` on
 *      .product-content-fade equal to the footer height. That existed to
 *      shift the fade downward so it visually covered the absolute-positioned
 *      footer. With the footer now in flow this shift is redundant and would
 *      just make the hover shadow bleed into the next row - neutralise it.
 * -------------------------------------------------------------------------*/
.products .column-item.product {
    display: flex;
    height: auto;
}
.products .column-item.product > .product {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}
.products .column-item.product > .product > .product-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.products .column-item.product .product-wrapper .product-footer {
    margin-top: auto;
}
@media (min-width: 992px) {
    .products .column-item.product .product-wrapper .product-footer {
        position: relative;
        top: auto;
        bottom: auto;
        opacity: 1;
        visibility: visible;
    }
    .products .column-item.product .product-content-fade {
        margin-bottom: 0 !important;
    }
}

/* -------------------------------------------------------------------------
 * Search popup layout (goes with the partdo_search_holder() override in
 * functions.php - port both together).
 *
 * Parent theme centers the popup content vertically (huge void above the
 * field) and sizes the overlay with 100vw/100vh - on iOS the layout
 * viewport can exceed the visual one, which clipped the right-anchored
 * close button. Top-align the content, use % / dvh sizing, pad the close
 * button by the safe-area insets, and style the category quick links
 * added by the override.
 * -------------------------------------------------------------------------*/
.search-holder {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}
.search-holder .search-holder-inner {
    overflow-y: auto;
}
.search-holder .container {
    justify-content: flex-start;
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0px));
}
.search-holder .container .search-holder-header {
    text-align: left;
}
.search-holder .container .search-holder-header .site-close {
    top: calc(1.25rem + env(safe-area-inset-top, 0px));
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
}
.search-holder .erdexim-search-cats {
    margin-top: 1.5rem;
}
.search-holder .erdexim-search-cats-title {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #868e96;
}
.search-holder .erdexim-search-cats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.search-holder .erdexim-search-cats-list a {
    display: inline-block;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--color-info, #e6e6e6);
    border-radius: 2rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.search-holder .erdexim-search-cats-list a:hover,
.search-holder .erdexim-search-cats-list a:focus {
    background-color: var(--color-info, #f1f3f5);
    border-color: var(--color-info-dark, #dee2e6);
}

/* -------------------------------------------------------------------------
 * Desktop product hover overlay: keep it on top during the fade-OUT.
 *
 * Parent theme raises the hovered card with
 * `.products .product:hover.custom-hover { z-index: 11 }`, while the
 * overlay (.product-footer / .product-content-fade) fades via a 0.15s
 * transition. On mouse-out the :hover z-index drops INSTANTLY but the
 * overlay is still fading for ~150ms - during that window it paints
 * underneath the neighboring cards (their .product-wrapper is z-index 1).
 *
 * Fix: transition z-index itself. Leaving the card delays the drop
 * (0.25s > 0.15s fade) so the overlay stays on top until it is invisible;
 * entering applies the raise immediately (transition-delay: 0s on :hover).
 * -------------------------------------------------------------------------*/
@media (min-width: 992px) {
    .products .product.custom-hover {
        position: relative;
        z-index: 1;
        -webkit-transition: z-index 0s linear 0.25s;
        transition: z-index 0s linear 0.25s;
    }
    .products .product:hover.custom-hover {
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
	.products:not(.large-list) .column-item.product .product-content-fade {
	    bottom: calc(-1.5rem - 85px) !important;
    	margin-bottom: 0 !important;
	}
}

/* -------------------------------------------------------------------------
 * Sticky header stacking fix (icon/image painting OVER the header on scroll).
 *
 * partdo-core prints the sticky header rules inline (inc/style.php) with
 * `z-index: 9`. Meanwhile the parent theme gives every product card the
 * `custom-hover` class via JS, and base.css has
 * `.products .product:hover.custom-hover { z-index: 11; }`. On touch
 * devices :hover sticks to the last-touched card while scrolling, so that
 * card (z 11) paints on top of the fixed header (z 9).
 *
 * Raise the sticky header above any content-level z-index (hover cards top
 * out at 11) while staying below the theme overlays: site-mask and
 * mobile-bottom-menu (999), search-holder (1000), site-drawer (1001).
 * Extra `.site-header` class outranks the inline rules by specificity, so
 * this wins regardless of stylesheet order and survives parent updates.
 * -------------------------------------------------------------------------*/
header.site-header.sticky-header .header-mobile {
    z-index: 100;
}
.site-header.sticky-header .header-main {
    z-index: 100;
}

/* -------------------------------------------------------------------------
 * Product page (single product) mobile gallery frame.
 *
 * Product photos are portrait (600x800), so on stacked layouts (<992px,
 * where .product-gallery/.product-detail collapse to one column) the main
 * image alone fills ~125vw of height and pushes the title/price below the
 * first screen. Cap each gallery slide in a fixed-height frame, letterbox
 * the image inside with object-fit, shrink the thumbnail strip, and tighten
 * vertical spacing so title + price clear the sticky add-to-cart bar on the
 * first screen (tested 390x844 and 375x667).
 *
 * WooCommerce's flexslider measures the slide height for .flex-viewport,
 * so the fixed frame height is what the slider animates to - no JS fight.
 * Thumbnail slides get inline widths from flexslider (4-up below 600px);
 * only the img is shaped (full slot width, square) so the nav math stays
 * intact. Social share icons are dropped on mobile to buy back the height.
 * -------------------------------------------------------------------------*/
@media (max-width: 991.98px) {
    .single-product .woocommerce-breadcrumb {
        margin-bottom: 0.5rem;
    }
    .single-product-wrapper {
        gap: 0.5rem;
    }
    .single-product-wrapper .product-gallery {
        --mobile-frame-height: min(26vh, 12.5rem);
    }
    .single-product-wrapper .product-gallery .woocommerce-product-gallery__image {
        height: var(--mobile-frame-height);
    }
    .single-product-wrapper .product-gallery .woocommerce-product-gallery > ul.flex-direction-nav li.flex-nav-prev,
    .single-product-wrapper .product-gallery .woocommerce-product-gallery > ul.flex-direction-nav li.flex-nav-next {
        top: calc(var(--mobile-frame-height) / 2) !important;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .single-product-wrapper .product-gallery .woocommerce-product-gallery__image > a {
        display: block;
        height: 100%;
    }
    .single-product-wrapper .product-gallery .woocommerce-product-gallery__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .single-product-wrapper .product-gallery .flex-control-thumbs {
        margin-bottom: 0;
    }
    .single-product-wrapper .product-gallery .flex-control-thumbs li img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    .single-product-wrapper .product-detail .product-share {
        display: none;
    }
    .single-product-wrapper .product-detail .product_title {
        margin-bottom: 0.25rem;
        font-size: 1.375rem;
    }
    .single-product-wrapper .product-detail .product-meta {
        margin-bottom: 0.25rem;
    }
}