/* ==========================================================================
   Holex Product Slider – slider.css
   Works alongside your existing theme styles.
   CSS custom properties are set by Elementor responsive controls.
   ========================================================================== */

.hps-btn:focus {
    background-color:#00498F !important;
}

/* ---- Carousel shell -------------------------------------------------- */
.hps-carousel {
    --hps-visible : 4;
    --hps-gap     : 20px;
    --hps-accent  : #00498F;
    --hps-ease    : cubic-bezier(.4, 0, .2, 1);

    position      : relative;
    width         : 100%;
    overflow      : hidden;
    padding:10px 10px 25px 10px;
    box-sizing    : border-box;
}

/* ---- Track wrap (clips overflow) ------------------------------------ */
.hps-track-wrap {
    padding: 10px 20px 20px 20px;
    overflow: visible;
}

/* ---- Track (the sliding strip) -------------------------------------- */
.hps-track {
    display    : flex !important;   /* override WC ul styles */
    flex-wrap  : nowrap  !important;
    gap        : var(--hps-gap);
    margin     : 0 !important;
    padding    : 0 !important;
    list-style : none !important;
    transition : transform .45s var(--hps-ease);
    will-change: transform;
}

/* ---- Individual slide ----------------------------------------------- */
.hps-slide {
    flex     : 0 0 calc(
                 (100% - (var(--hps-visible) - 1) * var(--hps-gap))
                 / var(--hps-visible)
               ) !important;
    width    : auto !important;
    min-width: 0;
    float    : none !important;    /* override old WC float grids */
    box-sizing: border-box;
}

/* ---- Inner card wrapper --------------------------------------------- */
.hps-slide .product {
    height        : 100%;
    display       : flex;
    flex-direction: column;
    background    : #fff;
    border-radius : 8px;
    overflow      : hidden;
    transition    : box-shadow .25s ease, transform .25s ease;
}

.hps-slide .product:hover {
    /*transform : translateY(-4px);*/
    /*box-shadow: 0 8px 32px rgba(0,0,0,.13);*/
}

/* ---- Thumbnail ------------------------------------------------------- */
.hps-slide .holex-product-archive-thumb {
    position   : relative;
    width      : 100%;
    padding-top: 100%;          /* 1:1 default; overridden by Elementor control */
    overflow   : hidden;
    flex-shrink: 0;
}

.hps-slide .holex-product-archive-thumb > a,
.hps-slide .holex-product-archive-thumb > img {
    position: absolute;
    inset   : 0;
    width   : 100%;
    height  : 100%;
}

.hps-slide .holex-product-archive-thumb > a {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.hps-slide .holex-product-archive-thumb img:not(.holex-proizvodac-logo) {
    width      : 100%;
    height     : 100%;
    object-fit : contain;
    padding    : 0;
    box-sizing : border-box;
    transition : transform .4s ease;
}

.hps-slide .product:hover .holex-product-archive-thumb img:not(.holex-proizvodac-logo) {
    /*transform: scale(1.05);*/
}

/* Proizvodac logo badge */
.hps-slide .holex-proizvodac-logo {
    position      : absolute;
    top           : 8px;
    left          : 8px;
    z-index       : 2;
    width         : 48px;
    height        : auto;
    object-fit    : contain;
    background    : rgba(255,255,255,.85);
    border-radius : 4px;
    padding       : 3px;
    box-sizing    : border-box;
}

/* ---- SKU ------------------------------------------------------------ */
.hps-slide .product-sku-archive {
    padding   : .45rem .85rem .15rem;
    font-size : .72rem;
    color     : #aaa;
    letter-spacing: .04em;
}

.hps-slide .product-sku-archive span {
    font-weight: 600;
    color      : #888;
}

/* ---- Title ---------------------------------------------------------- */
.hps-slide .holex-product-archive-title {
    padding    : 5px 0px !important;
    flex-grow  : 1;
}

.hps-slide .holex-product-archive-title a {
    text-decoration: none;
}

.hps-slide .holex-product-archive-title h2 {
    margin     : 0;
    font-size  : .9rem;
    font-weight: 600;
    line-height: 1.35;
    color      : #1a1a2e;
    display    : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow   : hidden;
    transition : color .2s;
}

.hps-slide .holex-product-archive-title a:hover h2 {
    /*color: var(--hps-accent);*/
}

/* ---- Desktop product row ------------------------------------------- */


/* ---- Quantity stepper ----------------------------------------------- */
.hps-slide .quantity {
    display    : flex;
    align-items: center;
    border     : 1.5px solid #e0e0e0;
    border-radius: 6px;
    overflow   : hidden;
    height     : 32px;
}

.hps-slide .quantity button {
    width     : 26px;
    height    : 100%;
    border    : none;
    background: #f5f5f5;
    cursor    : pointer;
    font-size : 1rem;
    line-height: 1;
    color     : #555;
    transition: background .15s;
    flex-shrink: 0;
}

.hps-slide .quantity button:hover { background: #e8e8e8; }

.hps-slide .quantity input.qty {
    width     : 36px !important;
    height    : 100%;
    border    : none !important;
    text-align: center;
    font-size : .85rem;
    font-weight: 600;
    background: transparent;
    padding   : 0 !important;
    margin    : 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.hps-slide .quantity input.qty::-webkit-outer-spin-button,
.hps-slide .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }

.hps-slide .holex-proizvodac-logo {
    width:58px !important;
    height:auto !important;
}

/* ---- Mobile row ---------------------------------------------------- */
.hps-slide .product-mobile {
    display: none;
}

/* ---- Navigation arrows --------------------------------------------- */
.hps-btn {
    position  : absolute;
    top       : calc(50% - 2.8rem);   /* vertically centred in the image area */
    z-index   : 10;
    display   : flex;
    align-items    : center;
    justify-content: center;
    width     : 2.6rem;
    height    : 2.6rem;
    border    : none;
    border-radius: 50%;
    background: #fff;
    color     : #222;
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
    cursor    : pointer;
    transition: background .2s, color .2s, transform .15s;
}

.hps-btn:hover,
.hps-btn:focus-visible {
    background: var(--hps-accent);
    color     : #fff;
    transform : scale(1.1);
    outline   : none;
}

.hps-btn svg { width: 1.1rem; height: 1.1rem; pointer-events: none; }

.hps-btn--prev { left:  .5rem; }
.hps-btn--next { right: .5rem; }

/* ---- Dots ----------------------------------------------------------- */
.hps-dots {
    position  : absolute;
    bottom    : .5rem;
    left      : 50%;
    transform : translateX(-50%);
    display   : flex;
    gap       : .4rem;
    flex-wrap : wrap;
    justify-content: center;
    max-width : 90%;
}

.hps-dot {
    width    : 8px;
    height   : 8px;
    border   : none;
    border-radius: 50%;
    background: #ccc;
    cursor   : pointer;
    padding  : 0;
    flex-shrink: 0;
    transition: background .2s, transform .2s;
}

.hps-dot.is-active {
    background: var(--hps-accent);
    transform : scale(1.4);
}

.hps-dot:focus-visible {
    outline: 2px solid var(--hps-accent);
    outline-offset: 2px;
}

/* ---- Empty ---------------------------------------------------------- */
.hps-empty {
    padding   : 1rem;
    color     : #888;
    font-style: italic;
}

/* ---- Section header ------------------------------------------------- */
.holex-product-tab-title {
    display        : flex;
    align-items    : end;
    justify-content: space-between;
    margin-bottom  : 5px;
    flex-wrap      : wrap;
    gap            : .5rem;
}

/* ========================================================================
   Responsive overrides
   (Elementor responsive controls override --hps-visible per breakpoint;
    these are fallbacks for non-Elementor contexts)
   ======================================================================== */
@media (max-width: 1024px) {
    .hps-carousel { --hps-visible: 3; }
}
@media (max-width: 767px) {
    .hps-carousel { --hps-visible: 2; }

    .hps-slide .product-desktop { display: none; }
    .hps-slide .product-mobile  { display: flex; justify-content: space-between; align-items: center; padding: .5rem .85rem .75rem; }
}
@media (max-width: 479px) {
    .hps-carousel { --hps-visible: 1; }
}