/*
 * mod_eshop_product_slider  v2.0.2
 * Fixes: blank space below carousel, missing dots on mobile
 */

/* ── Font Awesome ─────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
         url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
         url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
         url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.eshop-product-slider .fa { display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased; }
.eshop-product-slider .fa-heart::before   { content:"\f004"; }
.eshop-product-slider .fa-retweet::before { content:"\f079"; }

/* ── Outer wrapper ────────────────────────────────────────────────────────── */
.eshop-product-slider {
    display: block;
    position: relative;
    /* padding-bottom gives room for the dot-pagination below the carousel */
    padding-bottom: 40px;
}
/* The inner wrapper that owl carousel lives in – needed for overflow guard */
.eshop-product-slider .eshop-owl-wrap {
    position: relative;
    overflow: hidden; /* belt-and-braces: clips any stray items */
}

/* ── Custom prev / next arrows ────────────────────────────────────────────── */
.eshop-slider-nav {
    position: absolute;
    right: 0;
    top: -40px;
    z-index: 10;
}
.eshop-slider-nav .btn { display:inline-block;width:30px;height:30px;background-color:#eee;background-position:center center;background-repeat:no-repeat;cursor:pointer;border:none;vertical-align:top; }
.eshop-slider-nav .btn.btn-prev { background-image:url(../../images/arrow-prev.png); }
.eshop-slider-nav .btn.btn-next { background-image:url(../../images/arrow-next.png); }

/* ── Owl Carousel v1 – MINIMAL base CSS (let owl JS control display/width) ─ */
/*
   IMPORTANT:
   Do NOT set display:none on .owl-carousel or .owl-wrapper here.
   Owl carousel v1 manages those states itself via JavaScript.
   Setting display:none via CSS can interfere with height calculation
   and causes the large blank-space bug.
*/
.eshop-product-slider .owl-wrapper-outer {
    overflow: hidden !important;   /* prevent horizontal bleed */
    position: relative;
}
.eshop-product-slider .owl-wrapper {
    position: relative;
    display: block !important;     /* ensure wrapper is always visible after init */
}
.eshop-product-slider .owl-item {
    float: left;
    padding: 0 8px;
    box-sizing: border-box;
    /* DO NOT set width here – owl JS sets it via inline style */
}
/* clearfix for the wrapper */
.eshop-product-slider .owl-wrapper::after {
    content: "."; display:block; clear:both; visibility:hidden; line-height:0; height:0;
}
.eshop-product-slider .owl-wrapper,
.eshop-product-slider .owl-item {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ── Pagination DOTS ──────────────────────────────────────────────────────── */
/* Owl carousel v1 generates:
   .owl-controls > .owl-pagination > .owl-page > span  */
.eshop-product-slider .owl-controls {
    text-align: center;
    margin-top: 8px;
}
.eshop-product-slider .owl-controls .owl-pagination {
    display: block;
    text-align: center;
    padding: 4px 0;
}
.eshop-product-slider .owl-controls .owl-page {
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
}
.eshop-product-slider .owl-controls .owl-page span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.2s;
}
.eshop-product-slider .owl-controls .owl-page.active span,
.eshop-product-slider .owl-controls .owl-page:hover  span {
    background: #555;
}

/* ── Product card ─────────────────────────────────────────────────────────── */
.eshop-product-slider .eshop-slider-item {
    display: block;
    width: 100%;
}
.eshop-product-slider .eshop-image-block { position: relative; }
.eshop-product-slider .eshop-image-block .image { position:relative; overflow:hidden; }
.eshop-product-slider .eshop-image-block img   { display:block; width:100%; height:auto; }

/* overlay on hover */
.eshop-product-slider .overlay-background-color {
    display:block; height:100%; left:0; position:absolute; top:0; width:100%; z-index:99; transition:all 0.5s ease;
}
.eshop-product-slider .eshop-image-block:hover .overlay-background-color { background:rgba(0,0,0,.3); }

/* rollover image */
.eshop-product-slider .additional-image {
    top:0;left:0;z-index:999;opacity:0;position:absolute;width:100%;height:100%;transition:opacity .4s;
}
.eshop-product-slider .image:hover .additional-image { opacity:1; }

/* ── Hover overlay buttons ────────────────────────────────────────────────── */
.eshop-product-slider .eshop-buttons {
    position:absolute; top:45%; width:100%; text-align:center; z-index:999; opacity:0; transition:all .5s;
}
.eshop-product-slider .eshop-image-block:hover .eshop-buttons { opacity:1; top:35%; }
.eshop-product-slider .eshop-buttons .button { color:#fff; font-size:22px; padding:0 10px; }

/* ── Product info below image (centred, all screens) ─────────────────────── */
.eshop-product-slider .eshop-product-bottom { text-align:center; padding:6px 4px 8px; }
.eshop-product-slider h4.eshop-product-title {
    text-transform:uppercase; margin:8px 0 4px; font-size:.85rem; line-height:1.3; word-break:break-word;
}
.eshop-product-slider .eshop-product-price { display:block; margin:4px 0 6px; }
.eshop-product-slider .eshop-price,
.eshop-product-slider .eshop-sale-price { font-weight:bold; display:inline-block; font-size:15px; }
.eshop-product-slider .eshop-base-price  { text-decoration:line-through; display:inline-block; font-size:13px; color:#999; }
.eshop-product-slider .eshop-product-cart,
.eshop-product-slider .eshop-product-quote { margin-top:6px; }

/* ── Cart button (centred, flexbox icon – NEVER overlaps text) ───────────── */
/*
   FIX: position:absolute on ::before caused the icon to overlap the text
   when the button text wraps to 2+ lines (e.g. "ΠΡΟΣΘΗΚΗ ΣΤΟ ΚΑΛΑΘΙ").
   Solution: inline-flex so icon and text are side-by-side flex children.
*/
.eshop-product-slider .btn-cart-below,
.eshop-product-slider .eshop-product-bottom .btn-primary {
    float: none !important;
    display: inline-flex;       /* ← flex: icon left, text right */
    align-items: center;        /* ← vertically centres both on every line */
    gap: 6px;                   /* ← space between icon and text */
    text-transform: uppercase;
    padding: 7px 14px;          /* ← symmetric – no more asymmetric left hack */
    border-radius: 0;
    border: none;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
    text-align: left;           /* text aligns from icon outward */
    vertical-align: middle;
}
/* Icon as normal flex child – no position:absolute, no top/transform */
.eshop-product-slider .btn-cart-below::before,
.eshop-product-slider .eshop-product-bottom .btn-primary::before {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: 1;
    content: "\f07a";           /* fa-shopping-cart */
    flex-shrink: 0;             /* icon never squishes on narrow buttons */
    display: inline-block;
    /* NO position:absolute, NO top, NO transform */
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */

/* ── Desktop ≥ 992px ─────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .eshop-product-slider .owl-item { padding: 0 10px; }
}

/* ── Tablet 600–991px ────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 991px) {
    /* Hide hover overlay on touch screens */
    .eshop-product-slider .eshop-buttons { display: none !important; }
    .eshop-product-slider .owl-item { padding: 0 6px; }
    .eshop-product-slider h4.eshop-product-title { font-size: .80rem; }
}

/* ── Mobile < 600px ──────────────────────────────────────────────────────── */
@media (max-width: 599px) {

    /* Hide hover overlay (touch can't hover) */
    .eshop-product-slider .eshop-buttons { display: none !important; }

    /* No dark overlay on touch */
    .eshop-product-slider .overlay-background-color { display: none; }

    /* Tighter gutter */
    .eshop-product-slider .owl-item { padding: 0 4px; }

    /* Hide custom arrows – swipe + dots is enough */
    .eshop-slider-nav { display: none; }

    /* Bigger, more tappable dots on mobile */
    .eshop-product-slider .owl-controls .owl-page span {
        width: 12px;
        height: 12px;
    }
    .eshop-product-slider .owl-controls { margin-top: 10px; }

    /* Smaller text */
    .eshop-product-slider h4.eshop-product-title { font-size: .72rem; margin: 5px 0 3px; }
    .eshop-product-slider .eshop-price,
    .eshop-product-slider .eshop-sale-price { font-size: 12px; }
    .eshop-product-slider .eshop-base-price  { font-size: 11px; }


    /* Compact button: symmetric padding, flexbox handles icon position */
    .eshop-product-slider .btn-cart-below,
    .eshop-product-slider .eshop-product-bottom .btn-primary {
        font-size: 11px;
        padding: 5px 8px;
        gap: 4px;
    }
    .eshop-product-slider .btn-cart-below::before,
    .eshop-product-slider .eshop-product-bottom .btn-primary::before {
        font-size: 11px;
    }

    /* Bottom padding smaller since dots take less space */
    .eshop-product-slider { padding-bottom: 36px; }
}